Dreamweaver MX 8

M1 /
VP8
CREATION DE FEUILLES
DE STYLE
Master 1
[Tribet Hervé]
2012
[DREAMWEAVER MX 8 ]
Styles CSS
Styles sous DW8
Les styles HTML sont des mises en forme complexes regroupées sous une appelation ; on
peut créer des styles HTML avec la commande :
Textes > Styles HTML > nouveau style
ce qui ouvre le panneau "Définir style HTML"
Pour appliquer un style, effectuer la sélection voulue, utiliser la fenêtre de l'onglet "Styles
HTML" (Ctrl+F11), et cliquer sur le style souhaité (cliquer sur le bouton "Appliquer" si la
case "appliquer automatiquement" n'est pas cochée).
Cette commande régle les propriétés de la sélection, mais ne permet pas de mise à jour
automatique quand on modifie le style.
Les styles CSS (cascading style sheet) sont des règles complexes de mise en forme d'une page
web, qui sont décrits soit dans la page web elle-même (partie en-tête), soit dans un fichier
externe (feuille de style .css en général) ce qui permet une utilisation commune pour plusieurs
pages d'un site.
On travaille avec les styles CSS en basculant le mode d'affichage des propriétés du mode
HTML vers le mode CSS
On peut aussi utiliser la fenêtre de l'onglet "Styles CSS" (Maj+F11) et cliquer sur le bouton
"Appliquer les styles". Il suffit ensuite de cliquer sur un style de la liste pour l'appliquer à
la sélection sur la page en création
2
[DREAMWEAVER MX 8 ]
Styles CSS
1 – Définition d’un nouveau style
Pour définir un nouveau style CSS, sélectionner "Nouveau style CSS ..." dans la liste
déroulante précédente, ou bien utiliser la fenêtre de l'onglet "Styles CSS" (Maj+F11) et cliquer
sur l'icone "Nouveau style Css" en bas de cette fenêtre.
Soit on crée un nouveau style CSS (une classe), soit on modifie une balise existante (ou
encore un sélecteur a:link , a:hover , a:visited , a:active).
2 - Mise en forme du texte à l’aide d’une feuille de style CSS
Fichier/Nouveau/Onglet général/Page de base/CSS. Enregistrez la page sous le nom
Mon_site_test.css (menu Fichier/Enregistrer).
Double cliquez sur Mon_site_test.css pour la faire apparaître en mode code et tapez le code
suivant :
Dans la boîte de dialogue cliquez sur le bouton Parcourir et sélectionnez le fichier
Mon_site_test.css.
Dans la page Index.html sélectionnez le texte "Ceci est la page d'accueil de mon site." . Dans
la fenêtre propriétés choisissez Paragraphe dans la liste déroulante Format :
3
[DREAMWEAVER MX 8 ]
Styles CSS
En choisissant cette option nous appliquons le style p à notre texte. Répétez cette opératoin
pour les deux autres pages.
Nous allons maintenant créer un style de texte gras.
Dans le fenêtre CSS (menu Fenêtre/Styles CSS si la fenêtre n'est pas apparente) cliquez sur
le bouton Nouveau style :
Renseignez ensuite la catégorie Type de la façon suivante
et cliquez sur OK :
4
[DREAMWEAVER MX 8 ]
Styles CSS
Dans la page Index.html sélectionnez le mot Accueil et choisissez Gras dans la liste
déroulante Style :
Le résultat est le suivant :
Faîtes la même chosepour les pages Liens et Services.
4 – Menu de navigation
Dans le fenêtre CSS (menu Fenêtre/Styles CSS si la fenêtre n'est pas apparente) cliquez sur
le bouton Nouveau style.
Complétez la boîte de dialogue ainsi et cliquez sur OK :
5
[DREAMWEAVER MX 8 ]
Renseignez ensuite la catégorie Type de la façon suivante et cliquez sur OK :
Puis fixez la couleur d'arrière-plan à #9999CC :
6
Styles CSS
[DREAMWEAVER MX 8 ]
Styles CSS
Dans la fenêtre Fichiers double cliquez sur Mon_site_test.css pour le faire apparaître dans la
fenêtre Création. Dans la fenêtre CSS cliquez sur .Navigation pour faire apparaître ses
propriétés puis sur le bouton Afficher sous forme de liste :
Cherchez la propriété Display et fixez la à Block. Puis
cherchez Width et tapez 140.
Dans le calque Navigation sélectionnez le mot Accueil. Dans
le fenêtre Propriétés faîtes dérouler la liste Style et
sélectionnez Navigation :
Répétez l'opération avec les mots Services et Liens :
Répétez ensuite l'opération pour les pages Liens et Services.
Nous allons maintenant ajouter un effet sur les options du menu lorsque le pointeur de la
souris les survole.
Faîtes apparaître la page Mon_site_test.css dans la fenêtre Code. Faîtes un copier/coller le
code du style .Navigation :
7
[DREAMWEAVER MX 8 ]
Modifiez le code que vous venez de coller ainsi :
Enregistrez les modifications et lancez un aperçu dans votre navigateur :
8
Styles CSS