Ceci est la partie 2 du tutorial sur la mise en forme CSS d'un site avec Dreamweaver 8, si vous n'avez pas encore lu la première partie cliquez ici : tutorial Dreamweaver 8 : mise en forme CSS d'un site (partie 1)

5. Ajouter du texte aux calques

Cliquez à l'intérieur du calque Contenu et tapez le texte "Ceci est la page d'acceuil de mon site.".

Cliquez à l'intérieur du calque Pied_de_page et tapez "Copyright Mon_site.com 2006".

Cliquez à l'intérieur du calque Navigation et tapez les mots "Acceuil" " Services" et "Liens" l'un à la suite de l'autre, séparés par un espace. Il est important d'utiliser la barre d'espace, et non pas la touche Entrée entre les mots :

Ces mots serviront à créer notre menu de navigation, mais au prélable nous devons créer plus de pages. Enregistrez votre travail (menu Fichier/Enregistrer tout). Dans la fenêtre fichiers faites un clic droit sur Index.html. Dans le menu contextuel choisissez Edition/Dupliquer (raccourci clavier : CTR/D) et renommer la copie "Service.html".

Faîtes une nouvelle duplication que vous nommez "Liens" :

Double cliquez sur Services.html pour faire apparaître la page dans la fenêtre de création et modifiez le texte du calque contenu ainsi : "Ceci est la page Services de mon site".

Faites de même avec la page Liens en modifiant le texte ainsi : "Ceci est la page liens de mon site".

Enregistrez votre travail.

6. Créer des liens

Dans la fenêtre création cliquez sur l'onglet de la page Index.html. Dans le calque Navigation sélectionnez le mot Accueil en prenant garde de ne pas sélectionner l'espace qui suit le mot. Dans la fenêtre Propriétés cliquez sur le bouton Pointer vers un fichier à droite de la zone de texte de Lien et faîtes le glisser sur Index.html dans la fenêtre Fichiers :

Créez un lien de la même manière vers la page Services pour le mot Services et vers la page Liens pour le mot Liens.

Répétez l'opération pour les pages Services et Liens. Prenez garde de ne jamais sélectionner l'espace séparant les mots :

Enregistrez les modifications et testez la navigatoin entre les pages dans votre navigateur en cliquant sur le bouton Aperçu dans le navigateur :

7. Mise en forme du texte à l'aide d'une feuille de style CSS

Commencez par créer une page de style CSS : menu 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 :

Le style étant créé il faut maintenant lier la feuille de style à notre page. Faîtes apparaître la page Index.html dans la fenêtre Création. Dans ses Propriétés cliquez sur le bouton de la liste déroulante Style et choisisssez Joindre la feuille de style :

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 :

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 :

Complétez la boîte de dialogue ainsi et cliquez sur OK :

Renseignez ensuite la catégorie Type de la façon suivante et cliquez sur OK :

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.

8. Mise en forme du menu de navigation à l'aide de la feuille de style CSS

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 :

Renseignez ensuite la catégorie Type de la façon suivante et cliquez sur OK :

Puis fixez la couleur d'arrière-plan à #9999CC :

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 :

Modifiez le code que vous venez de coller ainsi :

Enregistrez les modifications et lancez un aperçu dans votre navigateur :

Vous l'avez constaté, nous avons utilisé CSS tant pour mettre en forme nos pages web que pour appliquer un style au contenu des pages.

Dans ce dernier exemple nous pouvons relever que les modifications apportées au style .Navigation sont immédiatement appliquées au texte se référant à ce style, sans avoir à modifier chacun des mots du menu de navigation sur chacune des pages de notre site. Les feuilles de style CSS présentent donc un intérêt indéniable.

Merci d'avoir pris le temps de lire ce tutorial jusqu'à son terme.