Mettre en forme le code

Vous pouvez définir les options qui modifient l’apparence du code dans Microsoft Expression Web, ainsi que d’autres options permettant de modifier la mise en forme du code.

Les techniques de mise en forme de base telles que les sauts de ligne, les espaces vides et les mises en retrait facilitent la lecture et la modification du code, sans affecter l’apparence de votre page Web. Vous pouvez spécifier ces paramètres ainsi que d’autres dans Expression Web et définir la couleur et la taille de la police individuellement pour les balises, attributs, valeurs et scripts.

Cc295457.alert_note(fr-fr,Expression.10).gifRemarque :

Lorsque vous ouvrez une page qui contient du code, Expression Web conserve la mise en forme du code de cette page par défaut. Les paramètres de l'onglet Mise en forme du code de la boîte de dialogue Options de l'éditeur de page s'appliquent uniquement aux nouvelles pages Web que vous créez et au contenu que vous ajoutez ou modifiez.

Pour définir les options d'affichage du code

  1. Dans le menu Outils, cliquez sur Options de l'éditeur de page.

  2. Dans l'onglet Général de la boîte de dialogue Options de l'éditeur de page sous Options d'affichage du code, effectuez l'une des opérations suivantes :

    Utilisez

    Pour

    Retour automatique à la ligne

    Renvoyer à la ligne toutes les lignes de code pour qu'elles respectent la largeur courante de la fenêtre d'édition.

    Retrait automatique

    Conserver le niveau actuel de mise en retrait lorsque vous appuyez sur les touches Entrée ou Retour pour commencer une nouvelle ligne.

    Numérotation des lignes

    Afficher un numéro unique à gauche de chaque ligne de code.

    Marge de sélection

    Ajouter une marge à gauche de la fenêtre d'édition qui vous permet de cliquer ou de faire glisser le curseur afin de sélectionner une ou plusieurs lignes de code.

    Surligner le code HTML incorrect

    Afficher le code HTML incorrect dans une couleur particulière (rouge, par défaut) et sur une couleur de fond (jaune, par défaut), que vous pouvez spécifier dans l'onglet Codageen couleurs de la boîte de dialogue Options de l’éditeur de page.

    Cc295457.alert_tip(fr-fr,Expression.10).gifConseil :
    Pour afficher une fenêtre flottante contenant plus d’informations sur un exemple spécifique de code non valide ou incompatible, en mode Code, pointez sur le code qui s’affiche surligné ou souligné.

    Surligner le code HTML incompatible

    Afficher une ligne de soulignement ondulée en dessous du code qui n’est pas compatible avec les normes HTML.

    Cc295457.alert_tip(fr-fr,Expression.10).gifConseil :

    Vous pouvez également définir ces options à l’aide de la barre d’outils Mode Code. Pour plus d’informations, voir Barre d’outils Mode Code.

Pour mettre le code en forme

  1. Dans le menu Outils, cliquez sur Options de l'éditeur de page.

  2. Dans l'onglet Mise en forme du code de la boîte de dialogue Options de l'éditeur de page, effectuez l'une des opérations suivantes :

    Utilisez

    Pour

    Réinitialiser

    Rétablir les valeurs par défaut de toutes les options.

    Noms de balise en minuscules

    Taper les balises en minuscules et non en majuscules.

    Noms d'attribut en minuscules

    Taper les noms d'attributs en minuscules et non en majuscules.

    Noms d’attributs classés par ordre alphabétique

    Entrez les attributs HTML dans l’ordre alphabétique.

    Permettre des sauts de ligne dans des balises

    Permettre l'affichage de sauts de ligne dans les balises au lieu de maintenir une balise sur une seule ligne.

    Taille des tabulations

    Définir le nombre d’espaces de mise en retrait lorsque vous appuyez sur la touche Tab en mode Code, ainsi que le nombre utilisé par l’option de mise en forme de code Retrait.

    Retrait

    Définit la taille et l'unité de la marge gauche pour le code imbriqué.

    Marge de droite

    Définit la taille de la marge de droite du code.

    Insérer des tabulations comme espaces

    Met en forme les tabulations comme espaces

    Balises

    Pour définir les options de mise en forme de certaines balises, sélectionnez la balise à mettre en forme puis, sous Sauts de ligne et en dessous de la section Sauts de ligne, définissez les options de votre choix. Par exemple, si vous souhaitez omettre la balise de l’élément de fin de liste (</li>) qui s’affiche normalement après chaque élément d’une liste, sous Balises, sélectionnez li, puis Omettre la balise de fin.

    CSS

    Pour définir les options de mise en forme de certains composants de feuilles de style en cascade, sélectionnez le composant que vous souhaitez mettre en forme, puis sous Mise en forme, définissez les options de votre choix. Par exemple, si vous souhaitez qu’un certain nombre d’espaces s’affiche après une accolade ouvrante ({) qui débute un bloc de déclaration de style, sous CSS, sélectionnez Accolade ouvrante, puis spécifiez le nombre d’espaces que vous souhaitez dans la zone Espace(s) après.

    Retrait des propriétés sur les nouvelles lignes

    Pour mettre en retrait les attributs CSS qui sont générés par Expression Web.

    Utiliser des propriétés sténographiques lors de la génération de styles

    Pour utiliser des attributs CSS au lieu de longhand. Par exemple, lorsque cette option est activée, Expression Web définit les valeurs de largeur, de couleur et de style d’une bordure en définissant uniquement l’attribut de bordure dans le style. Si cette option est désactivée, Expression Web définit un attribut et une valeur pour chaque attribut de bordure.

    Cc295457.alert_note(fr-fr,Expression.10).gifRemarque :

    Certaines options de mise en forme du code spécifiées affectent l’ensemble des pages existantes, alors que d’autres options affectent uniquement les pages que vous créez ultérieurement. Pour remettre en forme le code des pages existantes, voir la procédure « Pour remettre en forme le code d’une page existante ».

Pour remettre en forme le code d’une page existante

  1. Ouvrez la page Web que vous souhaitez remettre en forme.

  2. En mode Code, cliquez avec le bouton droit, puis sélectionnez Nouvelle mise en forme HTML.

Pour définir les options de mise en forme de code sur la base de la mise en forme du code d'une page particulière

  1. En conservant la page Web que vous souhaitez utiliser comme base ouverte, dans le menu Outils, cliquez sur Options de l'éditeur de page.

  2. Dans l'onglet Mise en forme du code de la boîte de dialogue Options de l'éditeur de page, cliquez sur Utiliser le format de la page active, puis cliquez sur OK.

Pour spécifier la couleur du code

  1. Dans le menu Outils, cliquez sur Options de l'éditeur de page.

  2. Dans l'onglet Codage en couleur de la boîte de dialogue Options de l'éditeur de page, effectuez l'une des opérations suivantes :

    Utilisez

    Pour

    Paramètres du mode Code

    Passer aux paramètres du mode Code.

    Paramètres par défaut

    Rétablir les valeurs par défaut de toutes les options.

    Éléments affichés

    Sélectionner l'élément à mettre en forme.

    Premier plan de l’élément, Arrière-plan de l’élément et Style de police

    Mettre en forme le code de l’élément sélectionné sous Éléments affichés.

Pour spécifier la police du code

  1. Dans le menu Outils, cliquez sur Options de l'éditeur de page.

  2. Dans l'onglet Polices par défaut de la boîte de dialogue Options de l'éditeur de page, sous Mode Code, définissez les valeurs de Police et de Taille.

Pour mettre en retrait certaines lignes de code

  1. En mode Code, dans votre page Web, placez le curseur dans la ligne de code que vous souhaitez mettre en retrait ou sélectionnez le code à mettre en retrait.

  2. Dans le menu Edition, pointez sur Mode Code, puis cliquez sur Augmenter le retrait ou sur Diminuer le retrait.

Voir aussi

Concepts

Barre d’outils Mode Code

Ajouter un signet temporaire à du code