Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), s'il n'est pas déjà ouvert et sélectionnez l'option CSS dans le coin gauche du panneau.
Dernière mise à jour le
20 déc. 2021
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 de propriétés de texte pour appliquer le formatage HTML ou le formatage des feuilles de style en cascade (CSS). Lorsque vous appliquez le formatage HTML, Dreamweaver ajoute des propriétés au code HTML dans le corps de votre page. Lorsque vous appliquez le formatage CSS, Dreamweaver ajoute des propriétés dans l'en-tête du document ou dans une feuille de style distincte.
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 du texte (CSS ou HTML)
Le formatage du texte dans Dreamweaver est similaire à l'utilisation d'un traitement de texte standard. Vous pouvez définir les styles 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 (monospace) et souligner.
Dreamweaver dispose de deux inspecteurs de propriétés, intégrés en un seul : l'inspecteur de propriétés CSS et l'inspecteur de propriétés HTML. Lorsque vous utilisez l'inspecteur de propriétés CSS, Dreamweaver formate le texte à l'aide de feuilles de style en cascade (CSS).Les CSS offrent aux concepteurs web et aux développeurs un meilleur contrôle sur la conception des pages web, tout en fournissant des fonctionnalités améliorées pour l'accessibilité et une taille de fichier réduite. L'inspecteur de propriétés CSS vous permet d'accéder aux styles existants, ainsi que de créer de nouveaux styles.
L'utilisation des CSS est un moyen de contrôler le style d'une page web sans compromettre sa structure. En séparant les éléments de conception visuelle (polices, couleurs, marges, etc.) de la logique structurelle d'une page web, les CSS offrent aux concepteurs web un contrôle visuel et typographique sans sacrifier l'intégrité du contenu. De plus, définir la conception typographique et la mise en page à partir d'un seul bloc de code distinct — sans avoir recours aux images cliquables, aux balises de police, aux tableaux et aux GIF d'espacement — permet des téléchargements plus rapides, une maintenance simplifiée du site et un point central pour contrôler les attributs de conception sur plusieurs pages web.
Vous pouvez stocker les styles créés avec CSS directement dans le document, ou, pour plus de puissance et de flexibilité, vous pouvez stocker les styles dans une feuille de style externe.Si vous joignez une feuille de style externe à plusieurs pages web, toutes les pages reflètent automatiquement les modifications que vous apportez à la 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 à une sélection actuelle, utilisez le panneau Styles CSS (mode Actuel) ou le menu contextuel Règle ciblée dans l'inspecteur de propriétés CSS.
Si vous préférez, vous pouvez utiliser les balises HTML pour formater le texte de vos pages web.Pour utiliser les balises HTML au lieu du CSS, formatez votre texte à l'aide de l'inspecteur de propriétés HTML.
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.
Modifier les règles CSS dans l'inspecteur de propriétés
Effectuez l’une des opérations suivantes :
- Placez le point d'insertion dans un bloc de texte qui a été formaté par une règle que vous souhaitez modifier.La règle apparaît dans le menu pop-up Règle ciblée.
- Choisissez une règle dans le menu Règle cible.
- Cliquez sur Modifier la règle.
Apportez des modifications à la règle à l'aide des différentes options dans l'inspecteur de 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 affectant le format du texte s'affiche lorsque vous cliquez à l'intérieur du texte sur la page.Vous pouvez également utiliser le menu pop-up Règle ciblée pour créer de nouvelles règles CSS, de nouveaux styles en ligne ou appliquer des classes existantes au texte sélectionné.Si vous créez une nouvelle règle, vous devrez remplir la boîte de dialogue Nouvelle règle CSS. Pour plus d'informations, consultez les liens à la fin de cette rubrique.
Modifier la règle
Ouvre la boîte de dialogue Définition de règle CSS pour la règle ciblée. Si vous sélectionnez Nouvelle règle CSS dans le menu pop-up Règle ciblée et cliquez sur le bouton Modifier la règle, Dreamweaver ouvre la boîte de dialogue de définition Nouvelle règle CSS à la place.
CSS Designer
Ouvre le panneau CSS Designer et affiche les propriétés de la règle ciblée dans la vue actuelle.
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 la zone de couleur, ou saisissez une valeur hexadécimale (par exemple, #BB5153) dans le champ de texte adjacent.
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 ciblée à gauche, au centre ou à droite.
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 couleurs affiche blanc, indiquant la couleur du texte où vous avez placé votre curseur.
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 de propriétés affiche la nouvelle couleur.
Définir le formatage HTML dans l'inspecteur de propriétés
Ouvrez l'inspecteur de propriétés (Fenêtre >
Propriétés), s'il n'est pas déjà ouvert, et cliquez sur le bouton HTML.
Sélectionnez le texte que vous souhaitez formater.
Définissez les options que vous souhaitez appliquer au texte sélectionné :
Format
Définit le style de paragraphe du texte sélectionné. Paragraphe applique le format par défaut pour une balise <p>, Titre 1 ajoute une balise H1, et ainsi de suite.
ID
Attribue un ID à votre sélection. Le menu déroulant ID (le cas échéant) répertorie tous les ID inutilisés et déclarés du document.
Classe
Affiche le style de classe actuellement appliqué au texte sélectionné. Si aucun style n'a été appliqué à la sélection, le menu déroulant affiche Aucun style CSS. Si plusieurs styles ont été appliqués à la sélection, le menu est vide.
Utilisez le menu Style pour effectuer l'une des actions suivantes :
Sélectionnez le style que vous souhaitez appliquer à la sélection.
Choisissez Aucun pour ne plus appliquer le style sélectionné.
Pour renommer le style, choisissez Renommer.
Sélectionnez Joindre une feuille de style pour ouvrir une boîte de dialogue qui vous permet de joindre une feuille de style externe à la page.
Gras
Applique <b> ou <strong> au texte sélectionné selon 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 <i> ou <em> au texte sélectionné selon 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 créée.
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 créée.
Blockquote et Supprimer Blockquote
Augmentez ou supprimez la mise en retrait du texte sélectionné en appliquant ou en supprimant la balise blockquote. Dans une liste, l'augmentation de la mise en retrait crée une liste imbriquée et la suppression de la mise en retrait annule l'imbrication de la liste.
Lien
Crée une liste à puces à partir du texte sélectionné. Cliquez sur l'icône de dossier pour parcourir un fichier dans votre emplacement ; saisissez l'URL ; faites glisser l'icône Pointer vers le fichier vers un fichier dans le panneau Fichiers ; ou faites glisser un fichier du panneau Fichiers dans la zone.
Titre
Définit l’infobulle textuelle d’un lien hypertexte.
Cible
Spécifie le cadre ou la fenêtre dans lesquels le document lié se chargera :
_blank charge le fichier lié dans une nouvelle fenêtre du navigateur sans nom.
_parent charge le fichier lié dans le jeu de cadres parent ou la fenêtre du cadre qui contient le lien.Si le cadre contenant le lien n'est pas imbriqué, le fichier lié se charge dans la fenêtre du navigateur complète.
_self charge le fichier lié dans le même cadre ou la même fenêtre que le lien. Cette cible est implicite, vous n'avez donc généralement pas besoin de la spécifier.
_top charge le fichier lié dans la fenêtre du navigateur complète, supprimant ainsi tous les cadres.
Renommer une classe à partir de l'inspecteur de propriétés HTML
Dreamweaver affiche toutes les classes disponibles pour votre page dans le menu Classe de l'inspecteur de propriétés HTML.Vous pouvez renommer les styles de cette liste en sélectionnant l'option Renommer à la fin de la liste des styles de classe.
Dans le panneau Inspecteur de propriétés, sélectionnez la liste déroulante Classe.
Dans la liste qui s'affiche, sélectionnez Renommer à la fin de la liste.
Sélectionnez le style que vous souhaitez renommer dans le menu contextuel Renommer le style.
Saisissez un nouveau nom dans le champ de texte « Nouveau nom » et cliquez sur OK.
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.
