Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un menu horizontal avec Dreamweaver CS3

Compatible Dreamweaver CS3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 25 juin 2008

Nous allons voir à travers cet article, la création d’un menu horizontal en utilisant une liste non ordonnée, combinée à des propriétés CSS.

Création de la structure HTML du menu

Création de la liste

Afin de respecter la sémantique des éléments HTML, nous allons utiliser une liste non ordonnée pour créer notre menu. En effet, un menu, c’est une liste de liens donc nous allons utiliser l’élément HTML : ul.

Notre menu sera constitué de 5 rubriques : Google, Yahoo, Mozbot, Ask et Exalead.

Il existe plusieurs méthodes pour créer une liste dans Dreamweaver CS3. Nous allons dans un premier temps, saisir sous forme de paragraphes distincts, les différentes rubriques du menu.

Nous allons ensuite sélectionner les 5 paragraphes et nous allons les transformer en une liste en cliquant sur le bouton Liste simple du panneau Propriétés.

Création des liens

Nous allons créer les liens sur chaque rubrique du menu. Pour créer un lien, nous allons sélectionner le texte et saisir l’url de la page liée dans la zone Lien du panneau Propriétés.

Nous utiliserons ces 5 adresses :

La structure HTML étant créé, nous allons mettre en forme le menu avec des propriétés CSS.

Création de la feuille de styles CSS

Création du fichier CSS

Nous allons créer un nouveau fichier CSS qui contiendra les différentes règles CSS. Pour cela, nous allons cliquer sur Fichier | Nouveau

Nous choisirons Page Vierge | CSS

Enregistrez le fichier sous le nom : menu.css et refermez le.

Liaison entre le document HTML et le document CSS

Dans le fichier HTML, nous allons cliquer sur le bouton Attacher une feuille de style (maillon de chaîne) du panneau CSS

En cliquant sur le bouton Parcourir, nous allons sélectionner notre fichier CSS. Le CSS permettant de définir des styles en fonction des médias de sortie, nous allons préciser que notre feuille de styles est destinée à l’écran. Nous allons pour cela définir la propriété media sur screen.

Définir les propriétés CSS de la liste

L’élément HTML utilisé pour la liste est un élément ul. Afin de ne pas définir la même mise en forme pour toutes les listes, nous allons identifier de façon unique notre menu. Nous allons pour cela attribuer un attribut id à notre élément ul en sélectionnant la liste et en indiquant le nom de l’id dans le panneau Balises.

Nous allons maintenant créer une règle CSS pour définir les propriétés de la liste. Nous allons cliquer sur le bouton Nouvelle règle CSS (le + ) du panneau CSS et définir comme sélecteur ul#menu.

En effet, nous souhaitons mettre en forme une liste ul dont l’id est menu. Ce sélecteur sera défini dans une feuille de style existante menu.css.

La liste utilisera la famille de police Verdana, Arial, Helvetica, sans-serif et une couleur blanche.

La couleur d’arrière-plan du menu sera défini dans la catégorie Arrière-plan et c’est un bleu qui sera choisi.

Nous allons ensuite supprimer les puces devant les items de la liste. Pour cela, nous allons utiliser la propriété Type de la catégorie Liste

Définir les propriétés CSS des items de la liste

La liste, élément HTML ul, est constitué d’items, éléments HTML li. Les items représentent les lignes de la liste. Les éléments HTML li sont des éléments de type block, c'est-à-dire que par défaut, ils se positionnent les uns sous les autres. Nous allons donc créer une règle CSS qui va nous permettent de transformer les éléments li en éléments de type inline, éléments qui se positionnent les uns à côté des autres.

Nous allons utiliser un sélecteur contextuel afin de ne cibler que les éléments li qui sont dans un élement ul dont l’id est menu.

Nous allons donner à la propriété Afficher, de la catégorie Bloc, la valeur en ligne afin d’indiquer que les items de la liste doivent s’afficher les un à côté des autres.

L’espacement entre les liens va être gérer dans la catégorie Boîte en précisant les propriétés Marge gauche et Marge droite (propriété margin en CSS).

Définir les propriétés des liens

Il nous reste maintenant à définir l’aspect des liens du menu. Nous souhaitons supprimer le soulignement des liens, les mettre en gras et leurs donner une couleur blanche.

Nous allons donc là aussi créer un sélecteur contextuel afin de ne cibler que les liens du menu.

La propriété Décoration avec la valeur Aucune permet de supprimer le soulignement.

Nous souhaitons modifier la couleur des liens lors du survol de la souris. Nous allons donc créer un sélecteur contextuel utilisant la pseudo-classe :hover qui permet de définir le survol d’un élément.

La couleur des liens sera le blanc.

Aérer le menu

Afin d’aérer le menu, nous allons modifier notre sélecteur ul#menu.

La propriété Remplissage de la catégorie Boîte permet de définir un espace entre le contenu et la bordure (propriété padding en CSS). Cet espace est occupé par l’arrière-plan.

Nous venons donc de créer un menu full CSS, qui respectent les standards du web