Description

Il existe différentes sortes de menus dans un site Web. Les menus de type Spry permettent d'afficher des menus dans un format dynamique tel que démontré dans la partie gauche de cette page Web.

Insertion d'un menu Spry à l'aide du logiciel Adobe Dreamweaver CS4

Afin de positionner la barre de menu dans un endroit approprié, il est recommandé de diviser la page Web en insérant un tableau à l'intéreieur de la fenêtre de création du logiciel Adobe Dreamweaver CS4. Avant de sélectionner le sous-menu Barre de menus Spry, il faut placer le curseur dans la cellule en haut à gauehe du tableau à l'intéreieur de la fenêtre de création du logiciel Adobe Dreamweaver CS4. Il faut ensuite sélectionner le sous-menu Barre de menus Spry du sous-menu Spry du menu Insertion. Il faut sélectionner la barre de menu Spry de type Vertical. En cliquant sur la barre bleue "Barre de menus Spry: MenuBar1" de l'image ci-dessous, la fenêtre Propriétés devrait changer pour afficher les options démontrées par l'image ci-dessous. Il faut modifer tous les menus et sous-menus pour son propre projet. Le lien pour la page d'accueil doit être index.html. Le lien pour un menu subdivisé doit être # seulement. Le lien pour un menu non-divisé est le nom du fichier qui doit être activé par le lien (p.ex. bio.html). Le lien pour un menu subdivisé doit être # seulement. Le lien pour un menu non-divisé est le nom du fichier qui doit être activé par le lien (p.ex. album1.html).

Ajout d'images au meny Spry

Étape 1 - Préparation des images pour l'arrière plan et les menus

À l'aide d'un logiciel de photos tel que Jasc Software - Paint Shop Pro, construire des images comme celles ci-dessous en utilisant les couleurs de base préférées pour le site. Dégradé d'arrière-plan (255 X 15 pixels) arr1.jpg Menus - Bouton 1 (160 X 50 pixels) Menus - Bouton 1b (160 X 50 pixels) arr_menu1.jpg arr_menu1b.jpg Menus - Bouton 2 (160 X 50 pixels) Menus - Bouton 2b (160 X 50 pixels) arr_menu2.jpg arr_menu2b.jpg

Étape 2 - Modification de la feuille de style SpryMenuBarVertical.css

Ouvrir le fichier SpryMenuBarVertical.css, tel que démontré dans le clip vidéo ci-dessous. Modifier le fichier SpryMenuBarVertical.css, selon les codes suivants. Fichier SpryMenuBarVertical.css en format .pdf Cliquer sur l'image pour ouvrir le fichier.