Affichage de pages dans SuperPreview

  • Article

SuperPreview simplifie le processus de test et de débogage des problèmes de disposition pouvant survenir dans différents navigateurs Web. Grâce à SuperPreview, vous pouvez afficher vos pages dans plusieurs navigateurs simultanément ou vérifier le rendu d'une page dans un navigateur et la comparer à une maquette de page.

Vous pouvez afficher un aperçu des pages Web ASP.NET ou PHP à l’aide du serveur de développement Microsoft Expression. Le serveur de développement Expression est installé lorsque vous installez Microsoft Expression Web. Si vous avez besoin de réparer ou de réinstaller le serveur de développement Expression, voir Installation du serveur de développement Expression.

Pour plus d’informations sur l’aperçu des pages Web ASP.NET ou PHP, voir Aperçu d'une page ASP.NET ou Aperçu d'une page PHP. Pour plus d’informations sur l'utilisation d'une URL d'aperçu personnalisée, voir Prévisualiser des pages dans un navigateur.

Ee371310.alert_note(FR-FR,Expression.30).gifRemarque :

Vous devez utiliser Microsoft Internet Information Services (IIS) pour afficher un aperçu des pages ASP (pas ASP.NET). Voir Prévisualiser des pages dans un navigateur pour savoir comment utiliser une URL d'aperçu personnalisée.

Ee371310.45734cd3-0411-4ae7-bb6a-c761807e9153(FR-FR,Expression.30).png

Ee371310.edef891a-6b74-4192-8f7f-5079614b9112(FR-FR,Expression.30).png

Le mode Principal vous montre comment la page se présente dans votre navigateur de développement.

Ee371310.957413f8-28e0-4dc7-a144-0598679350b9(FR-FR,Expression.30).png

Le mode Comparaison affiche la page telle qu'elle est rendue dans le navigateur de comparaison.

Ee371310.13f14333-cc5f-457a-863b-ccd449500941(FR-FR,Expression.30).png

L'affichage de position rapide vous montre la taille et la position de l'élément sélectionné. Si l'élément sélectionné présente une différence de taille ou de position, la valeur modifiée est mise en surbrillance.

Ee371310.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(FR-FR,Expression.30).png

Le sélecteur de navigateur principal vous permet de désigner votre navigateur de développement comme navigateur principal.

Ee371310.9c26150c-cd15-44bb-bf69-ff72093d3d71(FR-FR,Expression.30).png

Le sélecteur de navigateur de comparaison vous permet de choisir jusqu'à huit navigateurs de comparaison. Vous pouvez basculer rapidement entre les différents navigateurs de comparaison en cliquant sur leur icône respective.

Ee371310.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(FR-FR,Expression.30).png

L'arborescence DOM montre où un élément se situe dans l'arborescence DOM. Vous pouvez cliquer sur un élément de l'arborescence DOM pour le sélectionner dans les vues de navigateur.

Ee371310.3ca58ea1-12d2-4379-9b89-e415efd03ca4(FR-FR,Expression.30).png

L'affichage Étiquette fournit des informations détaillées sur un élément lorsque vous déplacez le pointeur de la souris sur celui-ci ou que vous cliquez dessus.

Ee371310.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(FR-FR,Expression.30).png

La taille de navigateur vous permet de sélectionner une taille de navigateur fixe afin de comparer le rendu de vos pages selon différentes résolutions.

Ee371310.alert_note(FR-FR,Expression.30).gifRemarque :
La taille de navigateur minimale est de 640 x 480.

Pour afficher une page dans SuperPreview

  • Après avoir ouvert et sélectionné une page dans Expression Web, cliquez sur l'icône Afficher dans SuperPreviewEe371310.79c275f9-6a28-4b9c-879e-07293f26da55(FR-FR,Expression.30).png. Vous pouvez aussi cliquer sur Afficher dans SuperPreview dans le menu Fichier, ou appuyer sur Maj+F12. La page actuellement sélectionnée s'affiche dans SuperPreview.

Modes pointeur

Les deux modes pointeur de SuperPreview modifient votre mode d'interaction avec SuperPreview :

  • Cliquez sur Mode sélectionEe371310.d199852e-cbc2-477b-8ea7-eea123597e00(FR-FR,Expression.30).png pour choisir le pointeur de mode sélection. Utilisez le mode sélection pour sélectionner des sections de pages individuelles à comparer.

  • Cliquez sur Mode panoramiqueEe371310.8fa3c504-33cb-4104-8259-dc4e1ba4c305(FR-FR,Expression.30).png pour choisir le pointeur de mode panoramique. Utilisez le mode panoramique pour faire glisser une page dans l'affichage du navigateur. Dans ce mode, la molette de la souris permet de modifier le coefficient d'agrandissement des vues de navigateur. Vous ne pouvez pas sélectionner de sections de pages en mode panoramique.

Mise en évidence DOM

En mode sélection, vous pouvez déplacer le pointeur dans la page afin de mettre en évidence différentes sections. Il suffit de cliquer sur une section pour la sélectionner. Le nom de la balise HTML appliquée à la section, son nom de classe ou son ID, ainsi que les attributs de taille et de position, s'affichent dans la barre d'état. SuperPreview propose deux modes de mise en évidence DOM :

  • Le mode de mise en évidence d'encadréEe371310.cdb48f6d-b3f6-4edd-83d8-ebe8f442e2c6(FR-FR,Expression.30).png met en évidence en bleu l'élément sélectionné dans la vue du navigateur principal. L'élément sélectionné est mis en évidence en vert dans la vue du navigateur de comparaison.

  • Le mode de mise en évidence pour le service réduitEe371310.f9530007-c580-4380-868a-796ecc4c0169(FR-FR,Expression.30).png affiche l'élément sélectionné normalement en atténuant le reste de la page.

Affichage de la règle

Cliquez sur Déclencher la visibilité de la règleEe371310.da527daf-6515-4f4d-9fa0-d95298000b14(FR-FR,Expression.30).png pour activer ou désactiver l'affichage de la règle. Pour pouvoir créer des guides de positionnement, vous devez afficher la règle. Pour plus d’informations sur les guides de positionnement, voir « Guides de positionnement », plus loin dans cette rubrique.

Affichage des miniatures

L'affichage des miniatures permet de sélectionner rapidement une zone de la page.

Cliquez sur Déclencher la visibilité des miniatures Ee371310.2f540d66-99fb-450b-abc9-843f488ca7aa(FR-FR,Expression.30).png pour activer ou désactiver l'affichage des miniatures.

Guides de positionnement

Vous pouvez ajouter des guides de positionnement pour vous aider à évaluer le positionnement d'éléments multiples dans une page :

  • Cliquez sur la règle horizontale pour créer un guide horizontal que vous pouvez faire glisser vers un emplacement dans l'affichage de la page. Lorsque le guide est sélectionné, la distance verticale entre le guide et le coin supérieur gauche de la page est affichée en pixels. Pour désélectionner le guide, faites-le glisser hors de l'affichage de la page.

  • Cliquez sur la règle verticale pour créer un guide vertical que vous pouvez faire glisser vers un emplacement dans l'affichage de la page. Pendant que le guide est sélectionné, la distance horizontale entre le guide et le coin supérieur gauche de la page est affiché en pixels. Pour désélectionner le guide, faites-le glisser hors de l'affichage de la page.

  • Cliquez sur Déclencher la visibilité des miniaturesEe371310.f80659b2-fa76-4b08-97ac-459f2012835b(FR-FR,Expression.30).png pour activer ou désactiver l'affichage des miniatures.

Modes de disposition

SuperPreview propose quatre modes de disposition :

  • Disposition scindée verticaleEe371310.f46e9840-e5ae-48fe-993c-af355898c5f8(FR-FR,Expression.30).png compare les vues de navigateur disposées côte à côte.

  • Disposition scindée horizontaleEe371310.b941d0c0-e348-45d2-9df2-d921b6989891(FR-FR,Expression.30).png compare une vue de navigateur à une autre placée au-dessous de celle-ci.

  • Superposerla dispositionEe371310.2a95255f-ce44-4494-a7b2-ebcec9a152a5(FR-FR,Expression.30).png compare les vues de navigateur en mode superposition.

  • DispositionsimpleEe371310.f42cb246-2097-4520-a676-1046e25cef91(FR-FR,Expression.30).png affiche une seule vue de navigateur.

Vue DOM

Cliquez sur l'onglet DOM pour activer et désactiver l'affichage de l'arborescence DOM.

Si l'affichage DOM est activé, vous pouvez voir où se trouve un élément dans l'arborescence DOM (Document Object Model, modèle d'objet de document). Si vous utilisez le mode Disposition scindée verticale ou horizontale, vous pouvez sélectionner un élément dans la vue du navigateur. La vue DOM est alors mise à jour pour afficher les attributs de la vue de navigateur sélectionnée. Il est également possible de sélectionner un élément dans la vue DOM pour mettre à jour les vues de navigateur.

Sélection de l'affichage du panneau de disposition

Vous sélectionnez un navigateur principal ou de comparaison dans la liste des navigateurs pris en charge qui sont installés sur votre ordinateur. Vous pouvez également choisir un mode d'affichage d'image afin de comparer une vue de navigateur à une image de disposition complète (comp).

Vous pouvez utiliser SuperPreview pour afficher des pages dans les versions suivantes d'Internet Explorer :

  • Internet Explorer 8   Aperçu dans Internet Explorer 8 (disponible uniquement si Internet Explorer 8 est installé).

  • Internet Explorer 8→7   Aperçu dans Internet Explorer 8 exécuté en mode de compatibilité Internet Explorer 7 (disponible uniquement si Internet Explorer 8 est installé).

  • Internet Explorer 7   Aperçu dans Internet Explorer 7 (disponible uniquement si Internet Explorer 7 est installé).

  • Internet Explorer 6   Aperçu dans Internet Explorer 6.

Vous pouvez choisir jusqu'à huit navigateurs de comparaison entre lesquels vous pouvez basculer rapidement en cliquant sur leur icône respective.

Cliquez sur Ee371310.31665cc2-3483-4f04-91fc-029a20d1d7a9(FR-FR,Expression.30).pngAjouter pour ajouter des navigateurs supplémentaires au mode Comparaison. Cliquez sur Basculer l'emplacement du navigateur principalEe371310.c219a564-2cba-4f7e-a680-e793f1816be1(FR-FR,Expression.30).png pour permuter les vues de navigateur Principal et Comparaison.

Emplacement

Tapez l'URL ou le chemin d'accès à la page Web dont vous souhaitez afficher l'aperçu.

Ee371310.alert_note(FR-FR,Expression.30).gifRemarque :

La page par défaut ne s'affiche pas lorsque vous tapez un chemin d'accès. Vous devez inclure explicitement le nom de fichier de la page par défaut, par exemple :

C:\inetpub\wwwroot\default.html

Zoom

Sélectionnez le coefficient d’agrandissement ou entrez une valeur d'agrandissement.