Création d’un menu sous Dreamweaver

Exemple d’un menu dreamweaver :

Nous vous proposons dans ce tutorial de créer le menu que vous voyez ci-dessus avec Dreamweaver. La procédure est très facile et ne devrait pas vous poser de problème.

Commencez par ouvrir Dreamweaver, cliquez ensuite sur l’onget “code” pour afficher le code.

Mise en place du CSS du menu

Collez ensuite ce code quelque part :

ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;

font-family:“Trebuchet MS”,Arial,sans-serif;font-size:13px;font-weight:bold;

margin:0;padding:11px 0 0 0;}

ul#simple-menu li{display:block;float:left;

margin:0 0 0 4px;height:27px;}

ul#simple-menu li.left{margin:0;}

ul#simple-menu li a{display:block;float:left;color:#fff;

background:#4A6867;line-height:27px;text-decoration:none;

padding:0 17px 0 18px;height:27px;}

ul#simple-menu li a.right{padding-right:19px;}

ul#simple-menu li a:hover{background:#2E4560;}

ul#simple-menu li a.current{color:#2E4560;background:#fff;}

ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}

</style>

Il est préférable de le coller entre la balise <head> et </head>. Vous pouvez même les mettre dans un fichier séparé CSS.

Création du menu sous Dreamweaver

Commencez par créer une liste en cliquant sur le bouton “Liste” :

Ceci donnera quelque chose de ce genre :

Passez ensuite dans la fenêtre du code. Observez le code de la liste que vous venez de créer, vous devriez voir quelque chose qui ressemble à ça :

</p> <ul> <li><a href="http://www.trouvertravail.com" class="current" onclick="javascript:urchinTracker('/outbound/www.trouvertravail.com');">Accueil</a></li> <li><a href="http://www.trouvertravail.com" onclick="javascript:urchinTracker('/outbound/www.trouvertravail.com');">Articles</a></li> <li><a href="http://www.trouvertravail.com" onclick="javascript:urchinTracker('/outbound/www.trouvertravail.com');">Contact</a></li> <li><a href="http://www.trouvertravail.com" onclick="javascript:urchinTracker('/outbound/www.trouvertravail.com');">Forum</a></li> <li><a href="http://www.trouvertravail.com" onclick="javascript:urchinTracker('/outbound/www.trouvertravail.com');">A propos</a></li> </ul> <p>

Modifiez alors la première balise <ul> par <ul id=”simple-menu”>.

Le mode affichage de dreamweaver n’est pas très performant, vous n’allez donc pas pouvoir voir votre menu directement sous dreamweaver. Cliquez sur le bouton F12 pour afficher la page dans un navigateur externe et pouvoir voir votre menu.