Pour afficher le code HTML associé au texte ou à l’objet sélectionné, effectuez l’une des opérations suivantes :
Dernière mise à jour le
20 déc. 2021
Sélectionnez et affichez des éléments sous Dreamweaver, affichez ou masquez des icônes de marqueur pour les éléments invisibles et définissez des préférences d’éléments invisibles.
Pour sélectionner un élément dans le mode Création de la fenêtre de document, cliquez dessus. Si un élément est invisible, vous devez le rendre visible pour le sélectionner.
Certains codes HTML ne sont pas visibles dans un navigateur, comme, par exemple, les balises comment. Il est cependant utile de pouvoir sélectionner, modifier, déplacer et supprimer ces éléments invisibles lorsque vous créez une page.
Dreamweaver permet d’afficher des icônes à l’emplacement de ces éléments invisibles dans la fenêtre de document en mode Création. Pour indiquer les marqueurs d’élément qui doivent s’afficher, définissez les préférences liées aux éléments invisibles. Par exemple, vous pouvez spécifier que les ancres nommées soient visibles, mais pas les sauts de ligne.
Vous pouvez créer certains éléments invisibles (tels que les commentaires et les ancres nommées) et les modifier à l’aide de la boîte de dialogue Préférences > Eléments invisibles.
Sélection d'éléments
Pour sélectionner un élément visible dans la fenêtre de document, cliquez dessus ou entourez-le du rectangle de sélection.
Pour sélectionner un élément invisible, en mode Création, choisissez Affichage > Options du mode Création > Assistances visuelles > Eléments invisibles (si ce n’est pas déjà fait), puis cliquez sur le marqueur de l’élément dans la fenêtre de document.
Certains objets apparaissent sur la page à un endroit différent de celui dans lequel leur code est inséré. Par exemple, en mode conception, un élément PA peut se trouver n’importe où dans la page, mais en mode Code, le code définissant l’élément PA se trouve dans un emplacement fixe. Lorsque les éléments invisibles sont affichés, Dreamweaver affiche des marqueurs dans la fenêtre de document pour indiquer l’emplacement du code de ces éléments. En sélectionnant le marqueur, vous sélectionnez tout l’élément : si, par exemple, vous sélectionnez le marqueur d’un élément PA, tout l’élément PA est sélectionné
Pour sélectionner une balise complète (avec son contenu, le cas échéant), cliquez sur son symbole dans le sélecteur de balise, dans la partie inférieure gauche de la fenêtre de document. Le sélecteur de balises apparaît en mode Création et en mode Code. Le sélecteur de balises affiche toujours les balises qui contiennent la sélection ou le point d’insertion en cours. La balise à l’extrême gauche est la balise ultrapériphérique contenant la sélection ou le point d’insertion en cours. La balise suivante est contenue dans cette balise ultrapériphérique, et ainsi de suite. La balise à l’extrême droite est la balise la plus à l’intérieur contenant la sélection ou le point d’insertion en cours.
Affichage du code HTML
Dans la barre d’outils du document, cliquez sur Code.
Choisissez Affichage > Code.
Sélectionnez Affichage > Fractionner > Code - En direct, Code - Création ou Code - Code.
Choisissez Fenêtre > Inspecteur de code.
Lorsque vous sélectionnez un élément dans l’un des deux éditeurs de code (mode Code ou Inspecteur de code), il est également sélectionné dans la fenêtre de document. Il est parfois nécessaire de synchroniser les deux affichages pour que la sélection apparaisse.
Afficher ou masquer les icônes de repère pour les éléments invisibles
Sélectionnez Affichage > Options du mode Création > Assistances visuelles > Eléments invisibles.
Annotation
L'affichage d'éléments invisibles peut légèrement modifier la mise en page d'une page, en déplaçant d'autres éléments de quelques pixels. Pour une mise en page de précision, masquez donc les éléments invisibles.
Définition des préférences des éléments invisibles
Utilisez les préférences Éléments invisibles pour spécifier les types d'éléments qui seront visibles lorsque vous sélectionnez Affichage > Aides visuelles > Éléments invisibles.
Sélectionnez Édition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis cliquez sur Éléments invisibles.
Sélectionnez les éléments à rendre visibles et cliquez sur OK.
Une coche en regard du nom de l'élément dans la boîte de dialogue signifie que l'élément est visible lorsque Affichage > Aides visuelles > Éléments invisibles est sélectionné.
Ancres nommées
Affiche une icône qui marque l'emplacement de chaque ancre de lien nommée (a name = "") dans le document.
Scripts
Affiche une icône qui marque l'emplacement du code JavaScript ou VBScript dans le corps du document.Sélectionnez l'icône pour modifier le Script dans l'inspecteur de propriétés ou pour effectuer un lien vers un fichier de Script externe.
Commentaires
Affiche une icône qui marque l'emplacement des commentaires HTML.Sélectionnez l'icône pour voir le commentaire dans l'inspecteur de propriétés.
Sauts de ligne
Affiche une icône qui marque l'emplacement de chaque saut de ligne (BR).Cette option est désélectionnée par défaut.
Cartes graphiques côté client
Affiche une icône marquant l'emplacement de chaque image map côté client dans le document.
Styles incorporés
Affiche une icône indiquant l'emplacement des styles CSS intégrés dans la section corps du document. Si les styles CSS sont placés dans la section d'en-tête d'un document, ils n'apparaissent pas dans la fenêtre de document.
Champs de formulaire masqués
Affiche une icône qui marque l'emplacement des champs de formulaire dont l'attribut type est défini sur "masqué".
Séparateur de formulaire
Affiche une bordure autour d'un formulaire afin que vous puissiez voir où insérer les éléments de formulaire.La bordure indique l'étendue de la balise form, de sorte que tous les éléments de formulaire à l'intérieur de cette bordure sont correctement inclus dans les balises form.
Points d’ancrage des éléments PA
Affiche une icône qui marque l'emplacement du code définissant un élément AP.L’élément PA lui-même peut être positionné n’importe où dans la page. (Les éléments PA ne sont pas des éléments invisibles ; seul le code définissant l'élément PA est invisible.) Sélectionnez l'icône pour sélectionner l'élément PA ; vous pouvez alors voir le Contenu de l'élément PA même si l'élément PA est marqué comme masqué.
Points d’ancrage des éléments alignés
Affiche une icône indiquant l'emplacement du code HTML pour les éléments qui acceptent l'attribut align. Il s'agit notamment d'images, de tableaux, d'objets ActiveX, de modules externes et d'applets.Dans certains cas, le code de l'élément peut être séparé de l'objet visible.
Balises de marquage de serveur visuel
Affiche l'emplacement des balises de balisage de Serveur (telles que les balises Active Server Pages et les balises ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document. Ces balises génèrent habituellement des balises HTML lorsqu'elles sont traitées par un serveur.Par exemple, une balise <CFGRAPH> génère un tableau HTML lorsqu'elle est traitée par un serveur ColdFusion. Dreamweaver représente la balise avec un élément invisible ColdFusion car Dreamweaver ne peut pas déterminer la sortie finale et dynamique de la page.
Balises de marquage de serveur non visuel
Affiche l'emplacement des balises de balisage de serveur (telles que les balises Active Server Pages et les balises ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre document. Ces balises sont généralement des balises de configuration, de traitement ou de logique (par exemple, <CFSET>, <CFWDDX> et <CFXML>) qui ne génèrent pas de balises HTML.
Affichage CSS: Aucun
Affiche une icône indiquant l'emplacement du contenu masqué par la propriété display:none dans la feuille de style liée ou incorporée.
Afficher le texte dynamique sous
Affiche par défaut tout texte dynamique sur votre page au format {Recordset:Field}. Si la longueur de ces valeurs est suffisamment importante pour déformer le formatage de votre page, vous pouvez modifier l'affichage pour {} à la place.
Inclusions côté serveur
Affiche le contenu réel de chaque fichier d’inclusion côté serveur.
Articles connexes
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
