All Articles Dreamweaver
Dreamweaver CS5: Création d'un menu de navigation à partir d'une liste
Iain Anderson on Sat, January 7th | 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

Lors de la construction d'un site web des meilleures pratiques, vous devez construire vos menus de navigation utilisant des listes, si possible. Theyre sémantiquement précis (un menu est une liste, après tout) et CSS rend faciles à coiffer. Jetons un regard sur la façon dont une liste de navigation fonctionne sous le capot. Défectuosité soit à l'aide de Dreamweaver en mode code, mais n'hésitez pas à suivre avec un éditeur de texte droite si vous le souhaitez.

Étape 1 - Construire une liste

Cette partie est facile: Créez un nouveau fichier HTML, pas de modèle, et il suffit de taper les éléments de votre menu. Placez chaque élément de la liste avec

Vous devriez vous retrouver avec quelque chose comme ceci: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

Cependant, vous voulez vous assurer que chaque élément des liens vers quelque chose, il va devenir important que nous construisons le CSS. Alors, ajouter des liens vers le caractère #, pour créer quelque chose comme ceci:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Étape 2 - Lien vers un fichier CSS externe

Dans le panneau CSS, appuyez sur le bouton Nouvelle règle CSS à la partie inférieure du panneau (le document avec le symbole plus). Créer un style de pièce d'identité avec le nom navlist et choisissez de créer un nouveau fichier style feuille. Dans la boîte de dialogue qui apparaît, le nom du fichier style.css . Il est toujours préférable d'utiliser une feuille de style externe, même lors de l'expérimentation.

Nous n'avons pas besoin de définir quoi que ce soit en utilisant la boîte de dialogue qui apparaît à côté, donc il suffit d'appuyer sur OK. Youll ont créé une feuille de style avec une base, la définition du style vierge. C'est en cliquant sur Afficher style.css juste au-dessus de votre document, à côté du code source des mots en surbrillance.

Étape 3 - Ajouter quelques règles de base CSS

Nous avons besoin de préciser que la liste a le navlist ID afin que nous puissions cibler. Dans le code HTML, ajouter id=navlist la

Maintenant, nous pouvons y aller sur le CSS. Youll surement envie d'adapter background-color, la largeur, les frontières et les marges pour commencer, et vous aurez envie de penser à comment construire des sélecteurs CSS. Si vous utilisez #navlist li , youll accéder à l'élément de liste dans la liste de navigation. Encore mieux, la cible #navlist li a de cibler les liens dans votre liste. Rajouter du rembourrage pour les fait un gros objectif, tout en ajoutant du rembourrage à un élément de la liste ne serait pas. Essayez:

# {Navlist

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

}

# Navlist li {

margin: 5px;

}

# Navlist li a {

background-color: # 222;

color: # eee;

padding: 10px;

text-decoration: none;

display: block;

}


L'

Le #navlist li

Enfin, le

Étape 4 - Ajoutez quelques règles CSS hover

Pour rendre la liste plus réactif, ajouter une règle de survol:

# Navlist li a: hover {

background-color: # 444;

color: # EE2;

}

Étape 5 - Marquage de la page active

Sa commune dans ces sortes de pages pour marquer la page active avec un style de classe mobile, par exemple classe = actif, qui est placé sur la page en cours. Toutefois, cela signifie que le bloc de menu est différent sur chaque page. Son plus pratique pour étiqueter chaque lien dans le code HTML avec une classe différente, puis ajouter une classe de page spécifique à la balise du corps, et les attraper tous avec une seule règle CSS. Quelque chose comme ceci:

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

Le CSS correspondant:

# Bodypage1. Page1 a, # bodypage2. Page2 a, # bodypage3. Page3 a, # bodypage4. Page4 a, # bodypage5. Page5 une {

background-color: # 555;

color: # EE2;

}

De cette façon, vous avez seulement besoin de changer la classe sur la balise body de chaque page. Sneaky, mais il fonctionne.

Il ya beaucoup, beaucoup plus de trucs, mais c'est tout pour aujourd'hui. Comme vous avez pu voir dans le tutoriel vidéo CSS Explorer, pour faire la liste horizontale, vous n'avez besoin que display: inline appliquée à la li élément, afin d'explorer que si vous le souhaitez. La prochaine fois, bien regarder quelques options plus exotiques.

finis product.png

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: