Feuille de style CSS Dreamweaver - Tutoriel Dreamweaver

Feuille de style CSS dans Dreamweaver

Dans ce tutoriel, nous allons voir comment lier une feuille de styles CSS, créer, modifier et supprimer des règles.

Créer une feuille de style CSS

1. Afficher le panneau Styles CSS

Si le panneau CSS n'est pas affiché, il faudra aller dans le menu Fenêtre, puis cliquer sur Styles CSS.

Dans le panneau Styles CSS, cliquez sur le bouton

Cette fenêtre apparaît :

2. Choisissez un type de sélecteur contextuel pour votre règle

Classe
Une classe est applicable à toutes les balises HTML

ID
A les mêmes fonctions qu'une classe, la différence fondamentale réside dans le fait que l'on va pouvoir l'utiliser q'une seule fois dans une page. Le ID est d'ailleurs utilisé en Javascript.

Balise
Permet de re-définir la mise en forme d'une balise HTML existante
Exemple : Redéfinir la taille et la couleur d'une balise h2.

Composé
Permet de créer des régles imbriquées en fonction des éléments que vous avez sélectionné dans la page.

3. Nom du sélecteur : donner un nom à votre règle CSS

4. Définition de règle

Définition de règle CSS

Ce document uniquement

Dans ce cas, les régles de style CSS sont stockées dans la balise head de votre page web (Donc pas trés pratique si vous souhaitez ré-utiliser ces règles dans d'autres pages.

Nouveau fichier feuille de style

Ce premier choix permet de stocker votre mise en forme dans une feuille de style externe qui pourra être appelée dans chacune de vos pages (Il est plus judicieux de prendre cette option)

5. Enregistrer votre feuille de style CSS

Il ne faut bien entendu, pas mettre de caractères spéciaux et espaces dans le nom du fichier.

Si vous avez plusieurs feuilles de style, vous pouvez créer un dossiser css qui contiendra toutes vos feuilles de style.

Cette boîte de dialogue apparaît, maintenant il ne vous reste plus qu'à créer vos règles avec le puissant éditeur CSS de Dreamweaver.

Définir une régle de style CSS

Vous pouvez ensuite, cliquer sur le bouton OK.

Lier une feuille CSS

1. Dans le panneau CSS, cliquer sur l'icône

2. Cette boîte de dialogue apparaît :

Lier une feuille de style css

3. Cliquer sur le bouton "Parcourir", puis sélectionner votre feuille de style.

La case à cocher "importer", vous permettra d'importer le contenu au sein de votre page HTML.

Modifier une régle CSS

Dans le panneau Styles CSS, double cliquer sur la régle que vous souhaitez modifier.

Supprimer une régle CSS

Dans le panneau Styles CSS, cliquer sur le bouton

Appliquer une règle CSS

Sur une balise

1. Sélectionner la balise via l'interface graphique de Dreamweaver.
2. Dans le panneau Propriété, remplir le champ classe avec la classe que vous souhaitez appliquer.

Aplliquer classe CSS

Insérer une règle CSS sur une balise div

La balise Div est communément appelé Calque. Elle est utilisée pour mettre en forme (Un site web complet, ou des éléments texte, images ...)

Insérer balise DIV

Pour insérer une balise div dans votre page

1. Aller dans l'onglet Commun puis cliquez sur l'icône 6

2. Cette boîte de dialogue apparaît

3. Insérer

Permet de choisir où insérer la balise, plusieurs choix sont possibles :

Au point d'insertion
Avant la balise
Aprés le début de la balise
Avant la fin de la balise
Aprés la balise

4. Choisir si vous souhaitez insérer une classe ou un ID.