Pour pouvoir suivre ce chapitre, vous avez besoin du logiciel :

• Dreamweaver CS3
• Télécharger les fichiers source

Nous vous invitons à visionner la vidéo correspondant à ce didacticiel dans Adobe Creative Suite 3 Video Workshop.

Créer des menus contextuels avec les widgets Spry

1. Dans Dreamweaver, choisissez Fichier > Ouvrir et ouvrez le fichier 07_spry_menus.htm. Ce fichier contient une nouvelle page prédéfinie à partir des conceptions de mise en page CSS de Dreamweaver.
2. Insérer votre pointeur à la suite du mot Header et appuyez sur Entrée pour insérer une ligne avant la barre de navigation.
3. Choisissez l’onglet Spry dans la barre d’insertion au-dessus de la fenêtre du document, et cliquez sur le bouton Barre de menus Spry.
4. Dans la boîte de dialogue Barre de menus Spry, sélectionnez Horizontale et cliquez sur OK. Une barre de navigation est ajoutée à la page (voir image n°1). Les paramètres par défaut comprennent quatre éléments; chaque élément peut posséder un nombre quelconque de sous-éléments, et les sous-éléments peuvent également contenir d’autres sous-éléments.
5. Passez à l’inspecteur de propriétés, et notez les outils de la palette qui vous serviront à ajouter ou à supprimer des éléments et des sous-éléments.



Image n°1 : la fenêtre du document affiche une barre de menus Spry avec les éléments de menu placés.

6. Pour ajouter des sous-éléments à un autre sous-élément dans l’inspecteur de propriétés, choisissez Elément 3 dans le premier champ de liste, Elément 3.1 dans le second et Elément 3.1.1 dans le troisième. Pendant que vous sélectionnez chaque élément dans l’inspecteur de propriétés, ceux-ci sont également sélectionnés sur l’écran.
7. Pour changer les éléments de navigation dans la fenêtre du document, passez au sous-élément sélectionné. Appuyez sur la touche retour arrière pour supprimer l’étiquette de l’élément, et tapez le nouveau nom. Sélectionnez l’élément 3.1.1 dans la fenêtre du document et remplacez l’étiquette par « Press ». Sélectionnez l’élément 3.1.2 et remplacez-la par « About Us » (voir image n°2).



Image n°2 : Vous pouvez changer les étiquettes de la barre de menu dans la fenêtre du document.

Vous pouvez également effectuer des changements dans l’inspecteur de propriétés.

8. Dans la fenêtre du document, sélectionnez l’onglet Barre de menus Spry :MenuBar1 situé au-dessus du menu pour afficher le nom pour le menu dans l’inspecteur de propriétés. Sélectionnez Élément 1 dans le premier champ Texte et tapez « Home ». Votre page est mise à jour automatiquement si vous vous trouvez dans l’aperçu Création.
9. Changez l’élément 2 en « Products ».
10. Pour ajouter des sous-éléments à Products, sélectionnez-le dans le premier champ de liste et cliquez sur le bouton Ajouter un élément de menu au-dessus du second champ de liste. Renommez-le sous-élément « Gold ».
11. Notez que l’option Lien est située directement en dessous du champ texte, il est donc très facile de rendre les éléments interactifs.
12. Ajoutez un autre sous-élément à Products. Cliquez sur la flèche montante au dessus du second champ d’élément de liste pour réorganiser les sous-éléments Products. Vous pouvez déplacer les éléments individuels vers le haut ou vers le bas de la liste.
13. Dans l’inspecteur de propriétés, cliquez sur le bouton Désactiver les styles pour travailler avec la liste désordonnée. Cliquez à nouveau sur ce bouton pour travailler avec le menu stylé.



Image n°3 : Désactivez les Styles pour travailler avec les éléments non stylés.

14. Choisissez Fichier > Enregistrer pour enregistrer vos changements.
15. Cliquez sur Aperçu dans le navigateur dans la barre d’outils du document pour prévisualiser le nouveau menu de navigation.
16. Lorsque la page est chargée, placez votre pointeur au-dessus des éléments et appuyez sur le bouton de votre souris pour révéler les sous-éléments (voir image n°4).

Si vous le désirez, vous pouvez modifier le style du menu entier en utilisant CSS. Les widgets Spry permettent de combiner les styles CSS avancés avec la fonctionnalité sophistiquée de JavaScript, le tout dans le cadre d’un environnement point-and-click (indiquer-et-cliquer).



Image n°4 : Voici l’apparence du menu Spry dans une fenêtre du navigateur.