img:coupe Qui n'a jamais été confronté au bon vieux menu déroulant, voilà une solution simple, pratique et efficace pour réaliser des menus déroulants parfaitement paramétrables et jolis en plus ! Grâce à Fireworks, nous allons pouvoir réaliser un menu et l'intégrer ensuite dans Dreamweaver. 1°- Dessiner l'objet qui doit déclencher l'apparition du menu déroulant à l'aide des outils graphiques de Fireworks. [img]http://dream.media-box.net/imgtut/egraphiste_01/01.gif[/img] 2°- Verrouiller votre calque de travail dans la palettes calques(F2) et placez vous sur le "calque Web". A l'aide de l'outil découpe(k), dessiner les découpes des différentes parties de votre menu. [img]http://dream.media-box.net/imgtut/egraphiste_01/02.gif[/img] 3°- Une fois les découpes terminées placez-vous sur la première et faites un "clic droit" (Ctrl + clic pour Mac) et "Ajouter menu contextuel..." [img]http://dream.media-box.net/imgtut/egraphiste_01/03.gif[/img] L'éditeur de menu contextuel apparaît avec 4 onglets : CONTENU, ASPECT, AVANCE et POSITION 4°- CONTENU [img]http://dream.media-box.net/imgtut/egraphiste_01/04.gif[/img] Taper dans le champ "texte", le texte qui doit s'afficher dans le menu déroulant. Taper dans le champ "lien", une URL, un mailto ou un lien vers une page HTML. Si nécessaire, ajouter une cible dans le champ "cible" par exemple en cas de jeu de cadres (frames). Pour ajouter un sous-menu, sélectionnez le texte dans la liste et cliquer sur "Menu renfoncement". :!: REMARQUE : si votre structure de site est déjà préparée, tous les liens peuvent être placés dans Fireworks, ils seront conservés et modifiables, une fois intégrés dans Dreamweaver. Cliquer sur suivant pour régler l'aspect du menu déroulant. 5°- ASPECT [img]http://dream.media-box.net/imgtut/egraphiste_01/05.gif[/img] Dans le cas où le bouton radio "HTML" est coché, on définit les états relevés (onLoad), au-dessus (onMouseOver) du menu déroulant en utilisant du code pour la mise en forme, et "Image" permet d'utiliser des images pour définir ces états. Choisir une police de caractère et sa taille dans les champs appropriés. Définir et enrichir le texte et la cellule qui le contient en utilisant les sélecteurs de couleurs. 6°- AVANCE [img]http://dream.media-box.net/imgtut/egraphiste_01/06.gif[/img] Ici on définit les différents attributs des cellules du menu déroulant. 7°- POSITION [img]http://dream.media-box.net/imgtut/egraphiste_01/07.gif[/img] Ici on définit le positionnement des menus et sous-menus. Si votre barre de navigation fait 30 pixels de hauteur, rentrer le paramètre 30 dans le champ "Y" pour que votre menu s'affiche au bord bas de votre barre... > Vous avez Terminé !! Tester le menu avec F12... Recadrer votre menu avec l'outil Recadrage ©, pour ne plus voir que votre objet réactif. Exporter (Ctrl+Maj+R) le HTML ET les découpes... 8°- INTEGRATION DANS DREAM Dans Dreamweaver, ouvrir une nouvelle page et dans la palette "communs" cliquer sur "HTML Fireworks". A l'aide du bouton "Parcourir", pointer sur la page HTML générée par Fireworks et cliquer sur OK. Par défaut, Dreamweaver propose de copier les médias dans le dossier racine, dites oui. Placer le menu à l'endroit souhaité et testez le avec F12, le résultat est > ICI <, et la source à télécharger > ICI < Bon courage :-)