Découvrez comment utiliser l’inspecteur Propriétés du texte pour appliquer un formatage HTML ou CSS sous Dreamweaver.

Vous pouvez utiliser l’inspecteur Propriétés de texte pour appliquer un formatage HTML ou CSS. Lorsque vous appliquez un formatage HTML, Dreamweaver ajoute des propriétés au code HTML du corps de la page. Lorsque vous appliquez un formatage CSS, Dreamweaver écrit les propriétés dans l’en-tête du document ou dans une feuille de style séparée.

Remarque :

lorsque vous créez des styles CSS intégrés, Dreamweaver ajoute directement le code d’attribut du style au corps de la page.

À propos du formatage de texte (CSS et HTML)

Les méthodes de formatage du texte sous Dreamweaver s’apparentent à celles d’un logiciel de traitement de texte standard. Vous pouvez définir le style de formatage par défaut (Paragraphe, En-tête 1, En-tête 2, etc.) pour un bloc de texte, modifier la police, la taille la couleur et l’alignement du texte sélectionné ou appliquer des styles de texte tels que gras, italique, code (texte à chasse fixe) et souligné.

Dreamweaver comprend deux inspecteurs Propriétés, intégrés pour n’en faire qu’un : l’inspecteur Propriétés CSS et l’inspecteur Propriétés HTML. Lorsque vous utilisez l’inspecteur Propriétés CSS, Dreamweaver met en forme le texte à l’aide de feuilles de style en cascade (CSS). Les styles CSS offrent aux concepteurs et développeurs Web un meilleur contrôle de l’aspect de la page web tout en proposant des fonctions qui permettent d’améliorer l’accessibilité et de réduire la taille des fichiers. L’inspecteur Propriétés CSS permet d’accéder à des styles existants et d’en créer de nouveaux.

CSS permet de modifier le style d’une page web sans compromettre sa structure. En séparant les éléments de conception visuelle (polices, couleurs, marges, etc.) des éléments logiques internes à la structure d’une page web, CSS offre aux concepteurs un contrôle à la fois visuel et typographique sans nuire à l’intégrité du contenu. De plus, définir une conception typographique et une mise en page depuis un bloc unique de code (sans avoir recours aux cartes graphiques, aux balises font, aux tableaux et aux GIF d’espacement) permet un chargement plus rapide, simplifie la maintenance du site et fournit un point central à partir duquel il est possible de contrôler les attributs de conception sur plusieurs pages web.

Vous pouvez stocker les styles créés à l’aide de CSS directement dans le document ou, pour disposer de davantage de puissance et de flexibilité, vous pouvez les stocker dans une feuille de style externe. Si vous associez une feuille de style externe à plusieurs pages web, toutes les pages s’adapteront automatiquement si vous effectuez une modification dans cette feuille de style. Pour accéder à toutes les règles CSS d’une page, utilisez le panneau Styles CSS (Fenêtre > Styles CSS). Pour accéder aux règles qui s’appliquent à la sélection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou le menu Règle cible de l’inspecteur Propriétés CSS.

Si vous le préférez, vous pouvez mettre en forme le texte de vos pages web à l’aide de balises de marquage HTML. Pour employer des balises HTML au lieu de CSS, mettez le texte en forme à l’aide de l’inspecteur Propriétés HTML.

Remarque :

vous pouvez combiner des formatages CSS et HTML 3.2 dans une même page. Le formatage est appliqué de façon hiérarchique : le formatage HTML 3.2 supplante celui appliqué par des feuilles de style CSS externes et le formatage CSS intégré dans un document supplante les styles CSS externes.

Modification de règles CSS dans l’inspecteur Propriétés

  1. S’il n’est pas déjà ouvert, ouvrez l’inspecteur Propriétés (Window > Propriétés) et sélectionnez l’option CSS dans l’angle gauche du panneau.

  2. Effectuez l’une des opérations suivantes :
    • Placez le point d’insertion dans un bloc de texte qui a été mis en forme à l’aide d’une règle que vous voulez modifier. La règle s’affiche dans le menu Règle cible.
    • Choisissez une règle dans le menu Règle cible.
    • Cliquez sur le bouton Modifier la règle.
    Sélection d’une règle dans le menu Règle cible
    Choisissez une règle dans le menu Règle cible.

  3. Apportez les modifications désirées à la règle à l’aide des différentes options de l’inspecteur Propriétés CSS.

    Règle cible

    La règle que vous modifiez dans l’inspecteur Propriétés CSS. Lorsqu’un style existant est appliqué au texte, la règle qui influe sur le format du texte s’affiche lorsque vous cliquez dans le texte sur la page. Vous pouvez également utiliser le menu Règle cible pour créer de nouvelles règles CSS et de nouveaux styles intégrés, ou pour appliquer des classes existantes au texte sélectionné. Si vous créez une nouvelle règle, vous devez remplir la boîte de dialogue Nouvelle règle CSS. Pour plus d’informations, consultez les liens dans le bas de cette rubrique.

    Modifier la règle

    Ouvre la boîte de dialogue Définition des règles CSS pour la règle cible. Par contre, si vous choisissez Nouvelle règle CSS dans le menu Règle cible puis que vous cliquez sur le bouton Modifier la règle, Dreamweaver ouvre la boîte de dialogue Définition de nouvelle règle CSS.

    CSS Designer

    Ouvre le panneau CSS Designer et affiche les propriétés de la règle cible en mode Actuel.

    Police

    Modifie la police de la règle cible.

    Taille

    Définit la taille de police de la règle cible.

    Couleur du texte

    Définit la couleur sélectionnée comme couleur de police dans la règle cible. Sélectionnez une couleur sécurisée pour le Web en cliquant sur le sélecteur de couleur ou entrez directement une valeur hexadécimale (par exemple, #BB5153) dans le champ de texte adjacent.

    Modification de règle CSS dans Dreamweaver
    Modification de règles CSS à l’aide de l’option Modifier la règle.

    Gras

    Ajoute la propriété gras à la règle cible.

    Italique

    Ajoute la propriété italique à la règle cible.

    Aligner à gauche, Centrer et Aligner à droite

    Aligne la règle cible sur la gauche, le centre ou la droite.

    Remarque :

    Les propriétés Police, Taille, Couleur du texte, Gras, Italique et Alignement affichent toujours les propriétés de la règle qui s’applique à la sélection actuelle dans la fenêtre de document. Lorsque vous modifiez l’une de ces propriétés, vous influez sur la règle cible.

Modification de la couleur du texte à l’aide de l’inspecteur Propriétés

Si vous n’avez appliqué aucune règle spécifique à votre texte, vous pouvez modifier la couleur du texte directement à partir de l’inspecteur Propriétés. Dans l’exemple suivant, notez la couleur du texte avant de la modifier. Le champ adjacent au sélecteur de couleur s’affiche en blanc, indiquant la couleur du texte où vous avez placé votre curseur.

Modification de la couleur du texte
Modification de la couleur du texte dans Dreamweaver

Pour modifier la couleur du texte, sélectionnez le texte que vous souhaitez modifier. Cliquez sur le sélecteur de couleur et sélectionnez la couleur de votre choix. Consultez l’image suivante où l’inspecteur Propriétés affiche la nouvelle couleur.

Modification de la couleur du texte dans Dreamweaver
Utilisation du sélecteur de couleur pour modifier la couleur du texte

Définition de formatage HTML dans l’inspecteur Propriétés

  1. Si ce n’est pas déjà fait, ouvrez l’inspecteur Propriétés (Fenêtre > Propriétés), puis cliquez sur le bouton HTML.
  2. Sélectionnez le texte que vous souhaitez formater.

  3. Définissez les options que vous souhaitez appliquer au texte sélectionné :
    Définition de propriétés de texte de formatage HTML dans Dreamweaver CC
    Définition de propriétés de texte de formatage HTML

    Format

    Définit le style de paragraphe du texte sélectionné. Paragraphe applique un format par défaut pour une balise <p>, En-tête 1 ajoute une balise H1, et ainsi de suite.

    ID

    Attribue un ID à votre sélection. Le menu ID présente (le cas échéant) tous les ID non utilisés et déclarés dans le document.

    Classe

    Affiche le style de classe appliqué au texte sélectionné. Si aucun style n’est appliqué à la sélection, la mention « Aucun style CSS » apparaît dans le menu déroulant. Si plusieurs styles sont appliqués à la sélection, le menu est vide.

    Le menu Style permet d’effectuer les opérations suivantes :

    • Sélectionnez le style à appliquer à la sélection.

    • Choisissez Aucun pour ne plus appliquer le style sélectionné.

    • Pour renommer le style, choisissez Renommer.

    • Sélectionnez Attacher une feuille de style pour ouvrir une boîte de dialogue qui vous permet d’attacher une feuille de style externe à la page.

    Gras

    Applique soit <b> soit <strong> au texte sélectionné en fonction de la préférence de style définie dans la catégorie Général de la boîte de dialogue Préférences.

    Italique

    Applique soit <i> soit <em> au texte sélectionné en fonction de la préférence de style définie dans la catégorie Général de la boîte de dialogue Préférences.

    Liste non ordonnée

    Crée une liste à puces à partir du texte sélectionné. Si aucun texte n’est sélectionné, une nouvelle liste à puces est ouverte.

    Liste numérotée

    Crée une liste numérotée à partir du texte sélectionné. Si aucun texte n’est sélectionné, une nouvelle liste numérotée est ouverte.

    Blockquote et Supprimer Blockquote

    Augmente ou supprime la mise en retrait du texte sélectionné, en insérant ou supprimant la balise blockquote. Au sein d’une liste, l’ajout d’un retrait crée une liste imbriquée et sa suppression ramène les éléments de la liste au niveau parent.

    Lien

    Crée une liste à puces à partir du texte sélectionné. Cliquez sur l’icône de dossier pour rechercher un fichier de votre site, faites glisser l’icône Pointer vers un fichier sur un fichier du panneau Fichiers ou faites glisser un fichier du panneau Fichiers sur la zone.

    Titre

    Définit l’infobulle textuelle d’un lien hypertexte.

    Cible

    Spécifie la fenêtre ou le cadre dans lequel sera chargé le document lié :

    • _blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.

    • _parent charge le document lié dans le jeu de cadres parent (ou dans la fenêtre parente) du cadre contenant le lien. Si le cadre contenant le lien n’est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.

    • _self charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s’agit de la cible par défaut, de sorte qu’il est le plus souvent inutile de la spécifier.

    • _top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres.

Modification du nom d’une classe à partir de l’inspecteur Propriétés HTML

Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de l’inspecteur Propriétés HTML. Vous pouvez renommer des styles dans cette liste en choisissant l’option Renommer, à la fin de la liste des styles de classes.

  1. Dans le panneau de l’inspecteur Propriétés, sélectionnez la liste déroulante Classe.

  2. Dans la liste qui s’affiche, sélectionnez Renommer à la fin de la liste.

  3. Sélectionnez le style à renommer dans le menu contextuel Renommer un style.

    Modification du nom d’une classe HTML dans Dreamweaver
    Modification du nom d’une classe HTML

  4. Entrez un nouveau nom dans la zone Nouveau nom, puis cliquez sur OK.

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