PDF (adobe.com)

Insertion de code avec la barre d'outils de codage

  1. Assurez-vous que vous êtes en mode Code (Affichage > Code).
  2. Placez le curseur dans le code, ou sélectionnez un bloc de code.
  3. Cliquez sur un bouton de la barre d'outils de codage, ou sélectionnez un élément de l'un des menus contextuels de la barre d'outils.

    Pour connaître la fonction de chaque bouton, positionnez le pointeur sur ce bouton jusqu'à ce qu'une info-bulle apparaisse. La barre d'outils de codage contient par défaut les boutons suivants :

    Ouvrir les documents
    Affiche la liste des documents ouverts. Lorsque cette option est sélectionnée, elle s'affiche dans la fenêtre Document.

    Afficher la fenêtre Navigation dans le code
    Affiche la fenêtre Navigation dans le code. Pour plus d'informations, consultez la rubrique Navigation vers le code apparenté.

    Réduire balises entières
    Réduit tout le contenu compris entre une balise d’ouverture et sa balise de fermeture (par exemple, tout le code compris entre <table> et </table>). Pour réduire tout le contenu d'une balise complète, placez le point d'insertion sur la balise d'ouverture ou de fermeture, puis cliquez sur le bouton Réduire balise entière.
    Il est également possible de réduire le code situé à l'extérieur d'une balise complète, en plaçant le point d'insertion dans une balise d'ouverture ou de fermeture avant de cliquer sur le bouton Réduire balise entière tout en maintenant la touche Alt enfoncée (Windows) ou la touche Option (Macintosh). Par ailleurs, vous pouvez maintenir la touche Ctrl enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste pas le contenu réduit à l’extérieur de la paire de balises. Pour plus d'informations sur le mode Code, consultez la section A propos de la réduction du code.

    Réduire la sélection
    Réduit le code sélectionné.
    Vous pouvez également réduire le code en dehors d'une sélection en cliquant tout en maintenant enfoncée la touche Alt (Windows) ou Option (Macintosh) sur le bouton Réduire sélection. Par ailleurs, vous pouvez maintenir la touche Ctrl enfoncée tout en cliquant sur ce bouton pour désactiver la réduction intelligente. Dans ce cas, Dreamweaver n’ajuste pas le contenu et réduit exactement le code sélectionné. Pour plus d'informations sur le mode Code, consultez la section A propos de la réduction du code.

    Développer tout
    Rétablit tout le code réduit.

    Sélectionner une balise parent
    Sélectionne le contenu et les balises d’ouverture et de fermeture qui encadrent la ligne dans laquelle est placé le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont équilibrées, Dreamweaver sélectionne finalement les balises html et /html situées aux extrémités.

    Equilibrer les accolades
    Sélectionne tout le code se trouvant à l'intérieur des parenthèses, des accolades ou des crochets qui encadrent la ligne dans laquelle est placé le point d’insertion. Si vous cliquez plusieurs fois sur ce bouton et que toutes vos balises sont équilibrées, Dreamweaver sélectionne finalement les parenthèses, accolades ou crochets les plus extérieur(e)s du document.

    Numéros de lignes
    Permet d'afficher ou masquer les numéros de lignes au début de chaque ligne de code.

    Surligner le code non valide
    Surligne le code non valide en jaune.

    Alertes d'erreurs de syntaxe dans la barre d'information
    Active ou désactive une barre d'information, dans le haut de la page, qui vous avertit des erreurs de syntaxe. Lorsque Dreamweaver détecte une erreur de syntaxe, la barre d'information sur les erreurs de syntaxe spécifie la ligne de code où cette erreur est survenue. En outre, Dreamweaver met en surbrillance le numéro de la ligne de l'erreur, sur la gauche du document, en mode Code. La barre d'information est activée par défaut, mais elle ne s'affiche que lorsque Dreamweaver détecte des erreurs de syntaxe sur la page.

    Appliquer commentaire
    Permet d'encadrer le code sélectionné avec des balises de commentaires, ou d'ouvrir de nouvelles balises de commentaires.

    • Appliquer Commentaire HTML encadre le code sélectionné de balises <!-- et --!>, ou ouvre une nouvelle balise si aucun code n'est sélectionné.

    • Appliquer Commentaire // insère une double barre oblique (//) au début de chaque ligne du code CSS ou JavaScript sélectionné, ou insère une unique balise // si aucun code n'est sélectionné.

    • Appliquer Commentaire /* */ encadre le code CSS ou JavaScript sélectionné avec les codes de commentaires /* et /*.

    • La marque de commentaire ' a été conçue pour le code Visual Basic. Elle insère un guillemet droit simple au début de chaque ligne sélectionnée d'un script Visual Basic, ou insère un guillemet droit simple au point d'insertion si aucun code n'est sélectionné.

    • Lorsque vous travaillez sur un fichier ASP, ASP.NET, JSP, PHP ou ColdFusion, si vous appliquez l’option Appliquer Commentaire sur serveur, Dreamweaver détecte automatiquement la balise de commentaire correcte et l’applique à la sélection.

    Supprimer commentaire
    Supprime les balises de commentaires du code sélectionné. Si une sélection comporte des commentaires incorporés, seules les balises de commentaire externe sont supprimées.

    Envelopper avec balise
    Permet d'encadrer le code sélectionné avec la balise indiquée dans Quick Tag Editor.

    Fragment de code récents
    Permet de choisir dans le panneau Fragments de code un fragment de code récemment utilisé et de l'insérer. Pour plus d'informations, consultez la section Manipulation de fragments de code.

    Déplacer ou convertir une feuille CSS
    Permet de déplacer du code CSS ou de convertir du code CSS intégré en règles CSS. Pour plus d'informations, consultez les sections Déplacement des règles CSS et Conversion d'un style CSS intégré en une règle CSS.

    Indentation du code
    Ramène la sélection vers la droite.

    Indentation négative du code
    Ramène la sélection vers la gauche.

    Mise en forme du code source
    Applique les formats de code précédemment définis au code sélectionné (ou à la page entière si aucun code n'est sélectionné). Vous pouvez également définir les préférences de mise en forme du code en sélectionnant Mise en forme du code source avec le bouton du même nom, ou en modifiant les bibliothèques de balises en sélectionnant Edition, Bibliothèques de balises.

    Le nombre de boutons disponibles dans la barre d'outils de codage varie selon la taille d'affichage en mode Code dans la fenêtre du document. Pour voir tous les boutons disponibles, vous pouvez redimensionner la fenêtre d'affichage du mode Code ou cliquer sur le bouton d'expansion, à la base de la barre d'outils de codage.

    Vous pouvez également modifier la barre d'outils de codage pour afficher des boutons supplémentaires (Retour automatique à la ligne, Caractères masqués et Retrait auto) ou pour masquer des boutons que vous ne souhaitez pas utiliser. Néanmoins, vous devez pour cela modifier le fichier XML qui génère la barre d'outils. Pour plus d'informations, voir Extension de Dreamweaver.

    Remarque : L'option d'affichage des caractères masqués, qui ne fait pas partie des boutons par défaut de la barre d'outils de codage, est disponible à partir du menu Affichage (Affichage > Options d'affichage de code > Caractères masqués).