Créer des cadres et un menu contextuel

Créer un site Web avec DreamWeaver
Créer des cadres et un menu contextuel
DreamWeave permet de créer un menu contextuel à partir d'un élément (texte, image).
1. Copiez le dossier saladine dans votre dossier et définir un nouveau site appelé saladine_nometudiant.
Création du menu initial
1. Créez un nouveau document XHTML saladine.htm.
2. Insérez un tableau de 1 ligne et 3 colonnes.
3. Remplissez-le comme ci-dessous
Saladine
Nos salades
Nos sauces
Création du menu contextuel
1. Sélectionnez le texte Nos salades qui nous servira de
bouton initial.
2. Dans la rubrique Lien du panneau Propriétés, tapez #
qui signifie un lien vide.
3. Dans le panneau Comportement, choisissez Afficher le
menu Contextuel.
4. Cliquez sur le bouton + pour ajouter un élément qui a
pour Texte Frisée, et pour Lien salades.htm#frisee.
5. Recommencez pour ajoutez un élément qui a pour
Texte Laitue, et pour Lien salades.htm#laitue.
6. Recommencez pour ajoutez un élément qui a pour
Texte Feuille de chêne, et qui n'a pas de lien.
7. Recommencez pour ajouter rouge qui a comme Lien salades.htm#cheneR. Décalez-le sous Feuille de
chêne avec le bouton approprié.
8. Recommencez avec verte et Romaine pour obtenir l'écran ci-dessus, en gérant les imbrications avec les
boutons appropriés.
9. Validez. Testez dans le navigateur.
Modification du contenu du menu contextuel
1. Sélectionnez de nouveau le texte Nos salades du bouton initial.
2. Dans le panneau Comportement, double-cliquez sur le comportement Afficher le menu contextuel associé à
l'évenement OnMouseOver.
3. Ajoutez de la même manière la salade Mâche avec son lien.
4. Ordonnez les salades dans l'ordre alphabétique à l'aide des boutons fléchés.
Modification de l'aspect du menu contextuel
1. Dans la boîte Afficher le menu contextuel, allez à l'onglet Aspect.
Choisissez un texte blanc sur fond vert foncé pour l'état Haut.
Choisissez un texte jaune sur fond vert foncé pour l'état Abaissé.
2. Dans la boîte Afficher le menu contextuel, allez à l'onglet Avancé.
Choisissez une bordure blanche de 1 pixel sans effet de relief (ni ombre, ni surbrillance).
3. Dans la boîte Afficher le menu contextuel, allez à l'onglet Position.
Choisissez la position en-dessous.
Modification de l'aspect du tableau initial
1. Ajoutez à la feuille de style des styles aux cellules du tableau (balise TD) pour que son aspect soit
similaire (avec un fond vert un peu moins foncé) aux boutons du menu contextuel.
Université de Marne-la-Vallée
DreamWeaver MX 2004 (v.7)
septembre 2005
F. Petit / DW_MX7_menu-contextuel.doc
Page 1 / 1