X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Accès Premium gratuitement

Accédez à notre bibliothèque complète des articles Hub Premium, les fichiers projet et les premiers 10% de chaque Cours-vidéo de la Bibliothèque Didacticiel en ligne .

Créez votre compte gratuit!

Dreamweaver CS5: Création d'un menu de navigation à partir d'une liste
Traduit par Google Translate

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

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link