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

  1. Pour afficher le code HTML associé au texte ou à l’objet sélectionné, effectuez l’une des opérations suivantes :

    • 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.

Affichage ou masquage des icônes des éléments invisibles

  1. Sélectionnez Affichage > Options du mode Création > Assistances visuelles > Eléments invisibles.

    Remarque :

    L’affichage des éléments invisibles risque de modifier légèrement la mise en page, en déplaçant d’autres éléments de quelques pixels. Pour conserver une mise en page précise, vous devez donc masquer ces éléments invisibles.

Définition des préférences des éléments invisibles

Utilisez les préférences des éléments invisibles pour déterminer les types d’éléments devant être affichés lorsque l’option Affichage > Assistances visuelles > Eléments invisibles est activée.

  1. Choisissez Édition > Préférences (Windows) ou Dreamweaver > Préférences (Mac), puis cliquez sur Eléments invisibles.
  2. Sélectionnez les éléments à rendre visibles, puis cliquez sur OK.

    Remarque :

    Une coche à côté du nom de l’élément dans la boîte de dialogue signifie que l’élément est visible lorsque l’option Affichage > Assistances visuelles > Eléments invisibles est activée.

    Ancres nommées

    Affiche une icône marquant l’emplacement de chaque ancre nommée (a name ="") dans le document.

    Scripts

    Affiche une icône marquant l’emplacement de code Java Script ou VBScript dans le corps du document. Sélectionnez cette icône pour modifier le script dans l’inspecteur Propriétés, ou pour créer un lien vers un fichier script externe.

    Comments

    Affiche une icône marquant l’emplacement d’un commentaire HTML. Sélectionnez cette icône pour consulter le commentaire dans l’inspecteur Propriétés.

    Sauts de ligne

    Affiche une icône marquant 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 carte graphique du document.

    Styles incorporés

    Affiche une icône marquant l’emplacement de styles CSS incorporés dans le corps du document. Les styles CSS placés dans l’en-tête du document n’apparaissent pas dans la fenêtre de document.

    Champs de formulaire masqués

    Affiche une icône marquant l’emplacement de champs de formulaire dont l’attribut type est défini sur hidden.

    Séparateur de formulaire

    Affiche une bordure délimitant le formulaire pour vous aider à y insérer des éléments. La bordure indique l’étendue de la balise form ; ainsi, 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 marquant l’emplacement du code définissant un élément PA. L’élément PA lui-même peut être positionné n’importe où dans la page. Les éléments PA ne constituent pas des éléments invisibles ; seul le code qui les définit est invisible. Sélectionnez l’icône afin de sélectionner l’élément PA. Vous pouvez ainsi afficher le contenu de l’élément PA, même s’il est marqué comme masqué.

    Points d’ancrage des éléments alignés

    Affiche une icône marquant l’emplacement du code HTML des éléments qui acceptent l’attribut align. Ces éléments sont les suivants : images, tableaux, objets ActiveX, plug-ins et 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 marquage de serveur (telles que les balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document. En règle générale, lorsqu’elles sont traitées par un serveur, ces balises génèrent des balises HTML. 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 à l’aide d’un élément ColdFusion invisible, car il lui est impossible de déterminer la sortie dynamique finale de la page.

    Balises de marquage de serveur non visuel

    Affiche l’emplacement des balises de marquage de serveur (telles que les balises ASP (Active Server Pages) et ColdFusion) dont le contenu ne peut pas être affiché dans la fenêtre de document. Il s’agit généralement de 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 qui montre l’emplacement du contenu masqué par la propriété display:none de la feuille de style liée ou incorporée.

    Afficher le texte dynamique sous

    Affiche le texte dynamique de la page dans le format {Recordset:Field} par défaut. Si la longueur de ces valeurs perturbe le formatage de la page, vous pouvez choisir le type d’affichage {}.

    Inclusions côté serveur

    Affiche le contenu réel de chaque fichier d’inclusion côté serveur.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne