Créez une nouvelle règle pour la navigation

1. Ouvrez le fichier cafe_townsend.css s'il ne l'est pas déjà ou cliquez sur son onglet pour le voir.
2. Définissez une nouvelle règle en saisissant le code suivant dans le fichier, après le style de classe .gras :

   .navigation {
   }
   

   Il s'agit d'une règle vide.

   Le code dans le fichier devrait ressembler à l'exemple suivant :

   
   
   

3. Enregistrez le fichier cafe_townsend.css.

   Ensuite, vous utiliserez le panneau de styles CSS pour ajouter des propriétés à la règle.

4. Ouvrez le fichier index.html s'il ne l'est pas déjà.
5. Dans le panneau de Styles CSS, assurez-vous que le mode Tout est sélectionné, sélectionnez la nouvelle règle .navigation et cliquez sur Éditer style dans l'angle inférieur droit du panneau.

   
   
   

6. Dans la boîte de dialogue Défintion de règle CSS, procédez de la manière suivante :

• Dans la zone de texte Police, tapez Verdana, sans-serif.
• Sélectionnez 16 dans le menu déroulant Taille et pixels dans le menu déroulant juste à droite du menu Taille.
• Sélectionnez Normal dans le menu déroulant Style.
• Sélectionnez Aucune dans la liste Décoration.
• Sélectionnez Gras dans le menu déroulant épaisseur.
• Entrez #FFFFFF dans la zone de texte Couleur.

  
  
  

  CONSEIL

  Pour plus d'informations sur une quelconque propriété CSS, reportez-vous au guide de référence O'Reilly qui est livré avec Dreamweaver. Pour afficher le guide, choisissez Aide > Référence et sélectionnez O'Reilly - Référence CSS dans le menu déroulant du panneau Référence.

1. Cliquez sur OK.

   Ensuite, vous utiliserez le panneau de styles CSS pour ajouter quelques autres propriétés à la règle .navigation.

2. Dans le panneau Styles CSS, assurez-vous que la règle .navigation est sélectionnée et cliquez sur mode Afficher liste.

   
   
   

   Le mode Liste réorganise le volet Propriétés pour afficher une liste alphabétique de toutes les propriétés disponibles, à la différence du mode Définir propriétés, le mode précédent, qui n'affiche que celles que vous avez déjà définies.

3. Cliquez sur la colonne à la droite de la propriété background-color.

   Pour voir le libellé entier d'une propriété, placez la souris au-dessus de la propriété.

4. Tapez #993300 comme valeur hexadécimale et appuyez sur Entrée (Windows) ou sur Retour (Macintosh).

   
   
   

   CONSEIL

   Pour voir l'effet de votre travail sur la feuille de style externe, laissez le fichier cafe_townsend.css ouvert dans la fenêtre de document pendant que vous travaillez. Quand vous faites une sélection dans le panneau Styles CSS, vous vous apercevrez que Dreamweaver écrit du code CSS dans la feuille de style en même temps.

5. Localisez la propriété display (il faudra peut-être faire défiler votre curseur vers le bas), cliquez une fois sur la colonne de droite et sélectionnez block dans le menu déroulant.

   
   
   

6. Localisez la propriété padding, cliquez sur la colonne de droite, tapez 8px comme valeur et appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
7. Localisez la propriété width, cliquez sur la colonne de droite, tapez 140 dans la première zone de texte, sélectionnez pixels dans le menu déroulant et appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
8. Cliquez sur Afficher propriétés définies pour que les propriétés que vous avez définies apparaissent dans le volet Propriétés.

   
   
   

9. Cliquez sur le fichier cafe_townsend.css pour l'afficher. Vous verrez que Dreamweaver a ajouté au fichier toutes les propriétés que vous avez définies.
10. Enregistrez le fichier afe_townsend.css et fermez-le.

Vous avez maintenant créé une règle pour mettre le texte de la barre de navigation en forme. Ensuite, vous appliquerez la règle aux liens sélectionnés.