Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 

Créer un menu déroulant (menu Spry) avec Dreamweaver

 

Ce didacticiel est conçu pour vous donner une longueur d'avance sur les nombreuses façons dont vous pouvez personnaliser un menu déroulant dans Dreamweaver.

Adobe Dreamweaver CS3, CS4 et CS5 comprennent la barre de menu Spry, un ensemble de widgets que vous pouvez utiliser pour créer des menus déroulants et autres fonctions avancées pour vos pages web.

Les menus Spry font l'ajout d'un menu déroulant facile à Dreamweaver, mais vous aurez toujours besoin d'une compréhension de base de CSS et comment modifier les styles si vous voulez changer les couleurs, les polices ou d'autres paramètres dans ces menus.

La première étape est de comprendre quelles sont les règles CSS de contrôle de chacune des options Spry. Il y a plusieurs façons de créer et d'appliquer des styles et jusqu'à ce que vous comprenez les feuilles de style qui viennent avec les menus déroulants dans Dreamweaver, il est difficile de savoir où faire des ajustements à des modèles qui contrôlent la couleur, la taille, et d'autres attributs.

Modification d'un menu peut être compliqué, mais si vous prenez votre temps et vous êtes ouvert à l'expérimentation un peu, vous pouvez modifier ces menus pour correspondre à votre design.


1 Insérez un menu déroulant SPRY dans Adobe Dreamweaver

La première étape est de créer ou d'ouvrir une page avec un menu déroulant créé à l'aide Spry.

Voici un rapide tutoriel sur la façon d'insérer un menu Spry:

D'abord, ouvrez les options de menu Spry. Vous pouvez ouvrir et fermer les options Spry dans le menu Insertion (qui peut être en haut à droite-gauche ou en haut de votre espace de travail en fonction de si vous êtes en mode Design classique ou CS4).

Le menu Spry est une option dans la liste déroulante et une fois sélectionné, ouvre une liste de widgets que vous pouvez utiliser pour ajouter des fonctionnalités AJAX.

Avant d'insérer le menu, placez le curseur où vous voulez dans votre page web. Lorsque vous cliquez sur le menu Spry barre l'icône du menu sera créé à la position de votre curseur.

Lire à travers les étapes ci-dessous pour savoir comment modifier l'apparence d'un menu déroulant créé avec Spry dans Dreamweaver.

2 Créer des menus horizontaux ou verticaux

Lorsque vous insérez une barre de menus Spry, vous avez la possibilité de créer un menu qui affiche horizontalement à travers votre page avec des options de sous-menu qui s'affichent vers le bas en dessous de la barre de menu, ou une barre de menu verticale avec des options de sous-menu qui s'ouvrent vers la droite du menu principal articles.

Vous devez faire ce choix au cours du processus d'installation en cliquant sur le bouton correspondant, puis en cliquant sur OK pour insérer le menu. Une fois la barre de menu est insérée, vous ne pouvez pas changer son orientation.

Allez à Insertion >> Spry >> Barre de menu Spry. Vous aurez cette fenêtre:

Insertion de barre de menu spry

Après insertion:

Menu spry inséré

 

 

3 Trouvez le style Vous voulez éditer

Ouvrez le panneau Styles CSS (Fenêtre> Styles CSS). Cliquez sur le bouton tout en haut du panneau et tournoyer SpryMenuBarHorizontal.css ouvert.

Styles CSS du menu Spry

 

Cliquez et faites glisser la partie supérieure de la fenêtre Propriétés dans le panneau CSS (montré ici) jusqu'à ce que vous pouvez voir la liste de vos styles et leurs règles définies.

Une bonne façon de commencer est de cliquer sur chacun des noms de style dans la liste Toutes les règles et de revoir leurs paramètres dans le volet Propriétés.

Consulter pour la couleur, la police et les paramètres de taille, que vous êtes susceptible de vouloir changer. Dans les prochaines étapes, nous allons couvrir plusieurs de ces modèles en particulier.

4 Réglez les options ALIGNEMENT MENU

Comme la plupart des options pour un menu horizontal, l'alignement est contrôlé par un style CSS.

Par défaut, le menu horizontal soit aligné à gauche de la page, mais vous pouvez l'aligner sur le droit en changeant la définition du style nommé, "ul.MenuBarHorizontal li."

Cliquez sur le nom du style dans le panneau Styles CSS, puis dans le volet Propriétés, cliquez sur juste à droite du champ flotteur à utiliser la liste déroulante, et sélectionnez droite au lieu de gauche.

Changer position du menu Spry

Si vous préférez, vous pouvez double-cliquer sur le nom du style à ouvrir la boîte de dialogue Définition de règle CSS.

5 COULEURS RENVERSEMENTS CHANGEMENT

L'astuce pour changer les couleurs des éléments du menu déroulant, c'est que dans CSS, ces couleurs sont attribuées aux styles de lien, qui ont plusieurs états.

Pour changer les couleurs de fond et le texte de liens car ils se présentent lors du chargement de la première page, vous aurez besoin pour modifier le style nommé «ul.MenuBarHorizontal a."

Pour changer les couleurs qui apparaissent lorsque vous passez le curseur sur un lien, modifier les couleurs de fond et le texte dans le style, "ul.MenuBarHorizontal a.MenuBarItemHover, A.MENU ul.MenuBarHorizontal ...."

Remarque: Si vous avez créé un menu vertical, ces noms de style comprendra «Vertical» au lieu de «horizontal».

Changer couleur de fond du menu spry

6 Testez votre travail tôt et souvent

Beaucoup de changements à ces styles ne sont visibles que lorsque vous affichez la page dans un navigateur Web ou dans l'option Affichage en direct (disponible à partir de Dreamweaver CS4).

 

 

Si vous cliquez sur le bouton Affichage en direct en haut de l'espace de travail, vous pouvez prévisualiser la page et tester les effets interactifs, tels que des survols, sans quitter Dreamweaver.

C'est un moyen pratique de vérifier les choses, comme si la couleur de survol est de définir la façon dont vous le souhaitez.

Ne pas avoir peur d'expérimenter, vous pouvez toujours modifier les définitions de style en arrière si vous n'aimez pas la façon dont quelque chose semble.

7 modifier la police ET DE LA TAILLE

Par défaut, un Spry menu déroulant s'affiche dans la police spécifiée dans le corps de style ou dans le parent le plus proche de style pour la page.

Vous pouvez modifier vos menus déroulants afin que la police soit différente de celle d'autres textes sur la page en ajoutant un style de police du style nommé «ul.MenuBarHorizontal."

Double-cliquez sur le nom de la police pour l'ouvrir dans la boîte de dialogue Définition de règle CSS (montré ici), puis entrez une police ou choisir une collection de polices de la Famille de police dans le menu déroulant.

Changer la taille du menu

8 Changement de la largeur des éléments du menu déroulant spry

Vous pouvez modifier les paramètres de largeur dans le style nommé "li ul.MenuBarHorizontal." Par défaut, la largeur est fixée à 8 em.

Pour ceux qui ne connaissent pas l'option em, il définit les dimensions en fonction de la taille de la lettre M dans la police de caractères utilisée dans le style.

Cette solution flexible est une excellente façon de définir la largeur de ces boîtes de liaison pour mieux répondre à leur contenu.

Si vous avez des noms plus longs et ils enveloppent, vous pouvez augmenter cette taille, par exemple à 10 em, pour obtenir la totalité du texte sur une seule ligne.

9 Changer la largeur des sous-menus

Si vous souhaitez que les éléments déroulants qui apparaissent en dessous de chaque élément de menu s'ffichent dans la même largeur que le menu principal, vous aurez à régler la largeur.

Il y a deux styles différents qui contrôlent l'apparence des éléments de la liste déroulante "ul.MenuBarHorizontal ul" et "ul.MenuBarHorizontal ul li."

Si vous modifiez la largeur principale du lien à partir de 8 em à 10 em, vous devez modifier le paramètre de largeur correspondante de 8,2 à 10,2 em dans les styles nommés «ul ul.MenuBarHorizontal" et "ul.MenuBarHorizontal ul li."

10 Edition du menu déroulant Spry dans l'inspecteur des Propriétés

Lorsque une barre de menu est inséré, Dreamweaver comprend le texte d'espace réservé pour plusieurs éléments de menu et sous-menus, comme l'article 1, point 2, etc

Inspecteur des propriétés du menu déroulant spry

Pour modifier les options de menu et de sous-menu, cliquez sur l'onglet bleu Barre de menus Spry (en haut à gauche du menu dans l'espace de travail) pour le sélectionner, puis utilisez les paramètres dans l'inspecteur des propriétés.

Il suffit de cliquer sur le menu ou sous-menu que vous souhaitez modifier, puis sélectionnez le texte dans le champ de texte sur le type de droite, puis au-dessus pour le remplacer.

11 Ajouter les articles au menus déroulants et sous-menus

Pour ajouter menu ou sous-menus cliquez sur le signe plus (+) signe dans la partie supérieure du champ de menu correspondant, ou cliquez sur le signe moins (-) signe pour supprimer un élément.

Par exemple, vous pouvez ajouter un élément de menu de troisième niveau en sélectionnant un sous-menu, puis en cliquant sur le signe plus au-dessus du champ de troisième menu.

Assurez-vous de modifier ou d'ajouter du texte dans le champ de texte dans l'extrême droite de l'inspecteur des propriétés.

12 Créer et modifier des liens du MENU

Pour transformer n'importe quel élément de menu dans un lien, sélectionnez l'élément dans l'inspecteur des propriétés et entrez l'URL dans le champ Lien.

Vous pouvez également utiliser le bouton Parcourir (indice: il ressemble à un dossier jaune) pour localiser et sélectionner n'importe quel fichier dans un site Web et définir le lien automatiquement.

Si vous configurez un lien vers un élément de menu de niveau supérieur, vous pouvez également sélectionner le texte dans l'espace de travail principal et mettre le lien dans l'inspecteur des propriétés, ou utiliser l'icône Hyperlien dans le menu Insertion commune.

13 Extrait dans un navigateur web pour tester votre menu déroulant et ses liens
 

Pour tester un menu déroulant, vous aurez besoin pour prévisualiser votre page dans un navigateur Web, tel que Safari, Internet Explorer (IE) ou Firefox.

Idéalement, vous devriez tester à l'aide de ces trois navigateurs (et autres) afin de s'assurer que le menu fonctionne bien pour tous vos visiteurs.

Les menus déroulants peuvent être particulièrement difficiles quand il s'agit de l'affichage dans différents navigateurs Web.

Si vous rencontrez des problèmes avec IE et vous affichez le menu sur votre ordinateur local, assurez-vous que vous cliquez sur Autoriser le contenu bloqué en haut de la fenêtre du navigateur.

 

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter