|
Page 1 sur 4 Nous allons créer, ici, un menu vertical déroulant à base de calques, de CSS et d'extensions et surtout sans image. Désolée, je sais pas faire d'intro :-)))
Voici le résultat du tutorial et la feuille de style finale. Les extensions Notre première étape consiste à charger les extensions nécessaires pour ce tutorial : - chez Project Seven :Auto Hide Layers et Auto Layers;
- de Yaromat : Layer to Style;
- et de Dazdezines : Netscape/Opera resize Fix.
Nous aborderons très brièvement Productivity tools de Project Seven (Extension payante) Les calques Créons une nouvelle page dans DMX, nommons-la index.html.
Nous allons créer un premier bloc qui va nous servir à contenir le menu. Pour cela, insérons un calque (Insertion > Objets mise en forme > Calque) et nommons le navMenu. 
Dans l'inspecteur de Propriétés, nous lui avons attribué les valeurs suivantes : 10px du bord Gauche, 13px du Sommet, 130px de Large, 54px de Haut, une position 1 (index-Z : ordre de superposition des calques) et une couleur blanche d'arrière-plan. Si vous regardez de plus près le code HTML, vous constaterez que ces valeurs ont été traduites en définition de style... <body>
<div id="navMenu" style="position:absolute; width:130px; height:54px; z-index:1; left: 10px;
top: 13px; background-color: #FFFFFF; layer-background-color: #FFFFFF;">
</div>
</body> Dans ce calque, tapons le texte des différentes rubriques du menu principal... 
Faisons des liens fictifs en sélectionnant chaque rubrique et en tapant "javascript:;" dans l'emplacement Lien de l'inspecteur de Propriétés. 
Ensuite, créons autant de calques que de rubriques. Nommons-les "navNomdumenu", par exemple : navDreamweaver. Pour l'instant, leur placement importe peu, nous verrons cela plus tard. Toutefois, pour les distinguer, dans l'inspecteur de Propriétés, donnons-leur une hauteur de 100px, une largeur de 200px. Placons-les respectivement à 150/175/200px du bord Gauche et 10/20/30px du Sommet. Attribuons leur à chacun une couleur propre et surtout faisons en sorte qu'ils soient cachés (visibilité:hidden). 
Vérifions dans le panneau Création, onglet Calques, que les calques des trois rubriques soient bien cachés (hidden) : 
|
