Tutorial FrontPage

Menus déroulants

1 Chose facile à faire, et souvent utilisée dans les sites web : les menus déroulants. Le plus difficile reste l'organisation générale ainsi que la compatibilité des différents navigateurs. Dans un premier temps créez un tableau contenant vos différents menus. Cliquez sur dans la palette d'objets et indiquez vos valeurs de tableau. Dans chaque cellule indiquez votre menu. Mettez la taille du tableau en pixels !

2 Toujours dans la palette d'objets cliquez sur et cliquez glissez à l'endroit ou doivent apparaître les menus déroulants. Maintenez la touche Dreamweaver du clavier pour en créer plusieurs. Vous venez de créer des calques (layers). Ceux peuvent contenir presque tout (texte, image, tableaux,…) et ont la particularité de pouvoir se situer sur différents plans. Affichez maintenant la palette de calques via le menu fenêtre. Si vous devez empiler des calques pensez à désactiver la case empêcher le chevauchement de la palette calques. Nommez précisément vos calques en double cliquant sur leur noms dans cette même palette. Enfin, repérez l'index "Z" de ces derniers. Plus cette valeur est élevée, plus il sont "hauts" dans l'ordre des plans et plus ils sont près de vos yeux.

3 Si vous avez activé l'affichage des éléments invisibles vous verrez dans votre page cette icône
. Lorsque vous cliquez sur cette dernière, le calque concerné se met en évidence et la palette de propriétés affiche ses attributs. C'est par là aussi que vous pouvez donner un nom. G et S indiquent la position par rapport aux bords gauche et haut (sommet) de votre page en valeur absolue. En conséquence donc créez autant de calques de menu sous votre tableau de menus principal puis après les avoir sélectionnés (en maintenant la touche Dreamweaver) allez dans le menu Modifier/Calques et zones réactives et validez même hauteur et même largeur. Attention les attributs retenus sont ceux du dernier calque sélectionné ! Dans le même temps dans la palette de propriété dans l'option balise utilisez div (explorer).

4 Ouvrez la palette de comportements, elle nous permettra de faire apparaître les menus. Dans la liste événements pour choisissez IE4.0. Sélectionnez le texte du menu 1 qui lorsqu'il sera survolé fera apparaître le sous menu (calque) correspondant. Toujours dans la palette de comportement appuyez sur le + et choisissez afficher, masquer les calques. Pour le sous menu 1 appuyez sur afficher pour le sous menu 2 appuyez sur par défaut. Pour le sous menu 2 procédez de la même manière mais inversez les options précédentes. Attention, assurez vous que l'événement réagisse au survol de la souris. Si ce n'est pas le cas cliquez sur ce qui est indiqué en événement, puis sur la flèche descendante en regard de ce dernier et choisissez "onMouseOver".

5 Reste que si les calques apparaissent, ils ne disparaissent pas ! Pour résoudre ce détail plusieurs possibilités s'offrent à vous. Comme je travail avec des tableaux je vous propose la solution qui me parait la plus appropriée a savoir qu'au survol des cellules avoisinantes (en sortant des calques) je ferais disparaître les différents calques. Pour cela j'ai inclus mes menus dans un tableaux qui les contient. Je sélectionne les cellules concernées puis à l'aide de la palette de comportements je choisis l'événement afficher, masquer les calques. Bien sur c'est "onMouseOver" qui va permettre l'action. Pour les calques de sous menu j'appuie sur "par défaut".

6 Notez que Dream vous propose une grille : Affichage/Grille… pensez à l'exploiter et à la paramétrer. Il y a aussi des règles dont l'origine est déplaçable : Affichage/Règles… et enfin pour placer vos calques par rapport à un modèle image, visualisez cette dernière a l'aide des Propriétés de la page via le menu Modifier. Son opacité est paramétrable pensez qu'elle ne fait pas partie de la page et donc que son poids importe peu. Attention à la taille de votre modèle ! pensez que les internautes ont pour la grande majorité un affichage 800X600 px. A vous de jouer !