Mise en situation
Vous avez décidé d'inclure un menu vertical de navigation comprenant les liens suivants :
- Retour à l'accueil
- Présentation de la région
- Historique de la Franche Comté
- Gastronomie locale
- Hôtels et gîtes
- Photographies
Exercice n°4 : menu vertical
Quelle structure parmi les trois suivantes vous paraît-elle la plus appropriée ?
- inclure chaque élément <a> du menu au sein d'un élément de bloc
comme les balises <div> ou <p>, de sorte que ces liens s'affichent les uns sous les autres
- séparer ces liens par des balises de retour à la ligne
<br />
- utiliser les éléments de liste <ul> et <li> pour structurer ce menu et ses liens
exemple :
<ul>
<li><a href="#">Retour à l'accueil</a></li>
<li><a href="#">Présentation de la région</a></li>
...
</ul>
Le succès d'un site web dépendant directement de son ergonomie et de son intuition,
l'élaboration des méthodes de navigation permettant d'y circuler fera l'objet d'une
réflexion poussée et d'une grande attention.
Ces trois propositions auront des aspects sensiblement équivalents :
chacune affichera une liste de liens placés les uns sous les autres.
Rappelons que l'aspect visuel présent ne doit pas compter il sera toujours temps de le corriger dans la feuille de styles
(les exercices suivants vous ferons la démonstration de la grande puissance de cette technique).
Il s'agit uniquement de construire le menu le plus logiquement possible.
Quelle est donc la structure la plus sémantique
parmi les trois proposées ?
Structure 1 :
Placer chacun des liens dans une balise de type bloc est intéressant : cela permet de les séparer d'une manière structurelle et non graphique.
Cependant, le choix des balises DIV ou P est discutable.
La première est une balise générique n'apportant aucun sens au menu de navigation.
Quant à la seconde, qui désigne un paragraphe de texte, elle serait utilisée ici à contre-emploi.
Structure 2 :
Séparer les liens par une balise de retour à la ligne ( balise <br /> )
est une erreur : il s'agit justement du piège à éviter, puisque l'on ne se préoccupe
alors que du rendu visuel de la navigation.
Structure 3 :
Le plus approprié est ici d'opter pour les balises de listes non ordonnées.
Il s'agit bel et bien d'une liste (éléments de navigation) ; ce choix convient donc tout à fait et il est porteur de sens.
Nous verrons, plus loin dans un exercice, comment supprimer les puces par défaut et donner aux listes l'habillage graphique souhaité.
Cette première mise en situation débouche ainsi sur un code proche de :
<ul>
<li><a href="#">Retour à l'accueil</a></li>
<li><a href="#">Présentation de la région</a></li>
<li><a href="#">Historique de la Franche Comté</a></li>
<li><a href="#">Gastronomie locale</a></li>
<li><a href="#">Hôtels et gîtes</a></li>
<li><a href="#">Photographies</a></li>
</ul>
<h1><a href="photos.htm" title="photos de Franche Comté">Bienvenue en Franche Comté</a></h1>
<h2>Une belle région française</h2>
<p>[Paragraphe associé au sous-titre de niveau 2.]</p>
<a href="photos.htm" title="lien vers photos de Franche Comté"><img src="francheComte.jpg"></a>
<h2>Un patrimoine naturel</h2>
<p>[Paragraphe associé à cet autre sous-titre de niveau 2.]</p>
<p>Pied de page et <a href="#">Mentions légales</a></p>
Résultat
Une belle région française
[Paragraphe associé au sous-titre de niveau 2.]
Un patrimoine naturel
[Paragraphe associé à cet autre sous-titre de niveau 2.]
Pied de page et Mentions légales
Bien, passons aux feuilles de styles CSS...
Ouvrages de références
- « More on CSS » par Eric Meyer
(© CampusPress), 2005.
- « CSS 2 Pratique du design web » par Raphaël Goetter
(© Eyrolles), 2009.
Haut de page
Access®, Excel®, Powerpoint®, Word® & Windows®
sont des produits et marques déposés
propriété de
Microsoft, Inc.
Photoshop® &
Dreamweaver
® sont des produits et marques déposés propriété de
Adobe System. |
