Insertion de comportements : création d'un menu

La table des matières du niveau 1 de la formation présente un exemple de simulation de menu en utilisant des calques et des comportements. La feuille est composée de cinq calques. Celui de gauche est toujours visible, et il contient des titres des quatre chapitres de ce niveau 1 (sous forme d'images réalisées sous Fireworks). Les quatre autres calques sont au départ tous cachés et contiennent pour chacun la table des matières du chapitre correspondant.

A chaque image du calque de gauche a été associé une série de quatre comportements, tous déclenchés quand la souris survole l'image. L'un des comportements consiste à afficher le calque qui contient la table des matières du chapitre correspondant à l'image, les trois autres consistent à cacher les calques contenant les tables des matières des trois autres chapitres.

Ces comportements sont pris en charge par des petits programmes Javascript, écrits dans la partie d'entête du fichier html. L'intérêt de Dreamweaver (et aussi d'un certain nombre d'autres outils de développement web) est de fournir des assistants qui permettent de créer ces comportements sans avoir à écrire soi-même le programme Javascript.

Cliquer sur le bouton pour connaître la marche à suivre pour créer ce type de "pseudo-menu" :

Vous verrez également le type d'inconvénient que peut présenter ce choix de navigation et d'autres manières de concevoir des modes de navigation attrayants. Nous en présentons deux autres :

Cliquer sur le bouton suivant pour connaître la marche à suivre pour créer un "pseudo-menu" en utilisant une animation FLASH [avancé] :

Cliquer sur le bouton suivant pour connaître la marche à suivre pour créer un "pseudo-menu" en utilisant le HTML dynamique, des styles CSS et des fonctions Javascript [avancé] :

 

Nous décrivons dans la page suivante :

Insérer un lien de messagerie

comment créer un lien de messagerie analogue au lien Ecrire au formateur qui se trouve en haut de la page sous le logo IDEA. Nous verrons comment modifier le code pour que le message possède d'emblée un sujet.

Principes
Création d'un effet d'image survolée
Création de calques clignotants
Création d'un lien de messagerie
Création d'un formulaire avec fenêtre surgissante