Accueil du site > LOGICIELS > DREAMWEAVER

Dreamweaver : Les styles

Les feuilles de style en cascade (CSS) regroupent des règles de mise en forme qui déterminent l’aspect du contenu d’une page Web. Les styles CSS vous permettent de gérer en souplesse l’aspect d’une page, tant en termes de précision de l’emplacement de la présentation qu’en termes de choix de polices et de styles de caractères spécifiques.

Par ailleurs, les styles CSS permettent de contrôler plusieurs propriétés qui ne peuvent pas être gérées via le langage HTML seul. Par exemple, vous pouvez attribuer des puces de liste personnalisées et spécifier différentes tailles et unités de police (pixels, points, etc.). En utilisant des styles CSS et en définissant des tailles de police en pixels, vous garantissez un traitement plus homogène de la présentation et de l’aspect de votre page dans différents navigateurs. Outre la mise en forme du texte, vous êtes à même de gérer le format et le positionnement des éléments blocs d’une page Web. Vous pouvez ainsi définir des marges et des bordures, habiller du texte avec du texte...

Créer une feuille de style

Créez une feuille de style CSS pour automatiser la mise en forme de balises HTML ou d’une plage de texte identifiée par un attribut CLASS.

• Comment faire ?

1- Choisissez Fenêtre > Styles CSS, et cliquez sur l’icône Nouveau style dans la palette Styles CSS.

2- Choisissez l’une des options de styles CSS suivantes :
Créer un style personnalisé (classe) crée un style qui peut être appliqué à l’aide de l’attribut CLASS à une plage de texte. Redéfinir la balise HTML redéfinit le formatage par défaut de la balise HTML spécifiée. Utiliser Sélecteur CSS définit le formatage d’une combinaison particulière de balises ou de toutes les balises qui contiennent un attribut ID spécifique.

3- Indiquez un nom, une balise ou un sélecteur pour le nouveau style. Les noms de style CSS personnalisés doivent commencer par un point. Si vous n’indiquez pas le point vous même, Dreamweaver l’insérera à votre place.
Pour redéfinir le style d’une balise HTML, indiquez le nom de cette balise ou choisissez-en une dans le menu contextuel.
Pour un sélecteur CSS, indiquez un critère valide pour les sélecteurs (par exemple TD H2 ou #monStyle), ou choisissez un sélecteur dans le menu contextuel.

4- Cliquez sur le nom d’une catégorie dans la liste qui apparaît à gauche de la boîte de dialogue, et choisissez les paramètres du nouveau style CSS dans le panneau de droite. Laissez les attributs vides s’ils ne sont pas importants pour ce style.

Les attributs qui ne sont pas affichés dans la fenêtre du document sont signalés par un astérisque (*) dans la boîte de dialogue Définition du style. Notez que certains des attributs de styles CSS que vous pouvez définir dans Dreamweaver ne s’affichent pas de la même manière dans Internet Explorer 4.0 et dans Netscape Navigator 4.0, et que quelques-uns ne sont encore pris en charge par aucun navigateur. Ainsi vous pouvez définir des styles perso via ces différentes boîte de dialogue :

"Panneau Type de la définition des styles"
"Panneau Arrière-plan de la définition des styles"
"Panneau Bloc de la définition des styles"
"Panneau Boîte de la définition des styles"
"Panneau Bordure de la définition des styles"
"Panneau Liste de la définition des styles"
"Panneau Positionnement de la définition des styles"
"Panneau Extensions de la définition des styles"

Lorsque vous créez un style personnalisé (une classe), il apparaît dans la palette de styles CSS et dans le sous-menu Texte > Styles CSS. Les styles de balises HTML et les styles de sélecteurs CSS n’apparaissent pas dans la palette Styles CSS, car ils ne peuvent pas être appliqués ; mais leur effet est automatiquement visible dans la fenêtre du document.

Créer ou lier une feuille de style externe

Une feuille de style CSS est un fichier texte externe à vos documents. Il contient toutes les indications de styles et de mises en forme. Si vous modifiez une feuille de style externe, les changements sont reflétés dans tous les documents liés à cette feuille de style CSS.

• Comment faire ?

1- Choisissez Fenêtre > Styles CSS, ou cliquez sur le bouton Styles CSS du Lanceur.

2- Dans la palette Styles CSS, cliquez sur l’icône Ouvrir feuille de style.

3- Dans la boîte de dialogue Modifier Feuille de style, cliquez sur le bouton Lien.

4- Dans la boîte de dialogue Ajouter une feuille de style externe, procédez de l’une des manières suivantes :

Cliquez sur le bouton Parcourir (Windows) ou Choisir (Macintosh) pour sélectionner une feuille de style externe, ou tapez son chemin d’accès dans la zone Fichier/URL.
Créez une nouvelle feuille de style CSS externe en indiquant un nouveau nom de fichier (un nom qui n’existe pas encore dans le répertoire indiqué). Ce nom de fichier doit avoir l’extension ".css".

5- Sélectionnez l’une des deux options Lien ou Importer pour indiquer et créer la balise qui sera utilisée pour associer la feuille de style externe au document, puis cliquez sur OK.

L’option Importer recopie les informations contenues dans la feuille de style CSS externe dans le document courant.

L’option Lien permet de lire et relayer ces informations sans les transférer dans le document.

Bien que Importer et Lien permettent d’appliquer tous les styles de la feuille de style CSS externe au document courant, Lien offre plus de possibilités et fonctionne dans la plupart des navigateurs.

Le nom de la feuille de style CSS externe apparaît avec son identificateur (lien ou importer) dans la liste des styles de la boîte de dialogue Modifier feuille de style. Suivez les étapes décrites ci-dessous pour créer ou modifier les styles définis dans une feuille de style CSS externe.

6- Dans la boîte de dialogue Modifier Feuille de style, sélectionnez le nom de la feuille de style externe, et cliquez sur Modifier. La boîte de dialogue Modifier feuille de style apparaît avec les paramètres de cette feuille de style.

7- Cliquez sur Nouveau pour définir des styles dans la feuille de style CSS externe.

8- Dans la boîte de dialogue Nouveau, définissez le nouveau style. Voir "Création d’une feuille de style CSS" .

9- Cliquez sur Enregistrer lorsque vous avez fini de définir des styles.

Modification d’une feuille de style externe

Lorsque vous modifiez une feuille de style CSS qui contrôle du texte dans votre document, vous reformatez instantanément tout ce texte. Vos modifications sont reflétées immédiat dans tous les documents liés à cette feuille de style.

• Comment faire ?

1- Ouvrez l’un des documents qui sont liés à la feuille de style CSS que vous désirez modifier.

2- Utilisez l’une des méthodes suivantes :
Choisissez Fenêtre > Styles CSS, ou cliquez sur le bouton Styles CSS du Lanceur. Dans la palette Styles CSS, cliquez sur l’icône Ouvrir feuille de style.
Choisissez Texte > Styles CSS > Modifier Feuille de style.

3- Dans la boîte de dialogue Modifier Feuille de style, sélectionnez le nom de la feuille de style externe, et cliquez sur Modifier.
Une seconde boîte de dialogue Modifier feuille de style apparaît, avec les paramètres de cette feuille de style externe.

4- Modifier les styles Voir Création d’une feuille de style CSS.

5- Cliquez sur Enregistrer lorsque vous avez fini de modifier des styles.

Appliquer des styles

Les styles CSS personnalisés, ou classes, sont le seul type de style CSS qui peut être appliqué à n’importe quel texte dans votre document, quelles que soient les balises qui contrôlent ce texte. La palette Styles CSS affiche les noms de tous les styles disponibles.

Il ne faut pas confondre les styles CSS avec les options de mise en forme, par exemple Gras ou Variable, qui figurent dans le sous-menu Texte > Style ; ces options sont des attributs de formatage prédéfinis, qui correspondent à des balises HTML spécifiques.

Lorsque vous appliquez plusieurs styles CSS au même texte, il peut y avoir entre ces styles un conflit qui produira des résultats inattendus.

• Comment faire pour appliquer un style CSS personnalisé ?

1- Choisissez Fenêtre > Styles CSS.

2- Sélectionnez le texte auquel vous voulez appliquer un style CSS.

Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.

Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, sélectionnez cette balise à l’aide du sélecteur de balise, dans la partie inférieure gauche de la fenêtre du document. Vous pouvez également changer de balise sélectionnée à l’aide du menu déroulant Appliquer à de la palette Styles CSS.

Si vous sélectionnez une plage de texte au sein d’un même paragraphe, le style CSS n’affectera que cette sélection.

3- Dans la palette Styles CSS, cliquez sur le nom d’un style.Vous pouvez également appliquer un style CSS en sélectionnant le nom d’un style dans le sous-menu Texte > Styles CSS, ou encore en cliquant dans la sélection à l’aide du bouton droit (Windows) ou en cliquant tout en maintenant la touche Contrôle enfoncée (Macintosh), puis en choisissant le nom du style dans le sous-menu Styles CSS du menu contextuel qui apparaît alors. La balise qui contrôle la sélection en cours apparaît à côté de la commande Style personnalisé.

Format PDF l l afficher une version imprimable de cet article Imprimer cet article