Dreamweaver 8 : mise en forme CSS d’un site (2/2)

I. Introduction à CSS avec Dreamweaver

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)

II. Explications

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 :

tutorial dreamweaver site en css image 19

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” :

tutorial dreamweaver site en css image 20

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 :

tutorial dreamweaver site en css image 21

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 :

tutorial dreamweaver site en css image 22

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

tutorial dreamweaver site en css image 23

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 :

tutorial dreamweaver site en css image 24

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 :

tutorial dreamweaver site en css image 25

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 :

tutorial dreamweaver site en css image 26

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 :

tutorial dreamweaver site en css image 27

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

tutorial dreamweaver site en css image 28

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

tutorial dreamweaver site en css image 29

Dans la page Index.html sélectionnez le mot Accueil et choisissez Gras dans la liste déroulante Style :

tutorial dreamweaver site en css image 30

Le résultat est le suivant :

tutorial dreamweaver site en css image 31

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 :

tutorial dreamweaver site en css image 32

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

tutorial dreamweaver site en css image 33

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

tutorial dreamweaver site en css image 34

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 :

tutorial dreamweaver site en css image 35

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 :

tutorial dreamweaver site en css image 36

Répétez l’opération avec les mots Services et Liens :

tutorial dreamweaver site en css image 37

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 :

tutorial dreamweaver site en css image 38

Modifiez le code que vous venez de coller ainsi :

tutorial dreamweaver site en css image 39

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

tutorial dreamweaver site en css image 40

III. Conclusion du tutorial

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.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*