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

Créer un menu Spry et le personnaliser avec Dreamweaver CS

 

L'Insertion d'une barre de menus Spry dans Dreamweaver CS3 et CS4 ne prend que quelques instants, mais les styles par défaut sont sans intérêt, et c'est un euphémisme. Cependant, avec une planification minutieuse et une compréhension raisonnable de CSS, vous pouvez activer une barre de menu terne en quelque chose de beaucoup plus élégant assez facilement.

Tout d'abord, jetez un oeil à des styles par défaut d'horizontal et vertical des barres de menus Spry. À la fin de ce tutoriel, vous devez avoir créé un design plus élégant.

Styler deux types de barre de menus est très similaire. Les premières pages de ce tutoriel s'appliquent aux deux types. Quand il s'agit de travailler avec le CSS, je vais donner des instructions séparées.

Ce tutoriel couvre les sujets suivants:

 

La planification de votre barre de menu

Il y a plusieurs choses que vous devez décider avant de se lancer coiffer une barre de menus Spry.
Combien de haut niveau articles seront-elle?
Quelle est la largeur va être le menu?
Quelles sont les couleurs que vous utilisez?

Choisir le nombre d'articles et la largeur globale est particulièrement important pour une barre de menu horizontale. C'est parce qu'il est constitué de listes à puces imbriquées avec chaque élément de liste flottants à gauche. Il est donc impossible de centrer une barre de menu horizontale, sauf si vous lui donner une largeur fixe. Par défaut, chaque élément du menu principal est 8em large. Pour un menu à largeur fixe, vous devez la remplacer par une largeur, mesurée en pixels. Bien sûr, si vous ne voulez pas centrer le menu, vous pouvez supprimer les paramètres de largeur, et que chaque élément de menu ajuste automatiquement en fonction du texte.

Le choix de la largeur et le nombre d'articles est moins critique pour une barre de menu verticale. Si vous ajoutez des éléments de niveau supérieur, la barre de menu devient tout simplement plus grand. Toutefois, vous devez déclarer une largeur pour les éléments de menu ou placer le menu dans un récipient qui a une largeur déclarée. Sinon, si vous supprimez les largeurs par défaut, chaque élément du menu s'étire sur toute la largeur de la page.

Aux fins de ce tutoriel, je vais avoir six éléments de niveau supérieur, chaque 160px de large. Cela fera une barre de menu horizontale 960px de large, et la barre de menu verticale sera juste 160px de large.

Les couleurs que vous choisissez dépendra de la conception de votre site web, mais pour ce tutoriel, je vais utiliser ce qui suit:
Fond principal: mauve clair (# A3AAC6)
Texte principal: blanc (# FFF)
Contexte passage de la souris: mauve foncé (# 7A85AD)
Le texte sur passage de la souris: gris foncé (# 333)

Je prévois de faire les menus ressemblent à des boutons, et j'ai donc créé un rectangle solide en utilisant la couleur de fond principale dans un éditeur graphique, et appliqué un effet de biseau comme ceci:

J'ai ensuite utilisé l'outil pipette dans l'éditeur graphique pour obtenir les couleurs sur les côtés haut et à droite du biseau pour me donner les couleurs des frontières bouton (# 565968 et # C4C9DB).

Remarque: Le rectangle créé dans l'éditeur graphique n'est pas utilisée comme image d'arrière-plan pour les boutons. Il est simplement utilisé pour obtenir les bonnes couleurs pour les bordures. Après avoir fait une note de couleurs, vous pouvez annuler l'image.

Droite. C'est la planification de base fait. Maintenant, nous allons le style de la barre de menu.

 

L'insertion de la barre de menus

 

Lorsque vous insérez une barre de menus Spry, Dreamweaver a besoin de copier un fichier JavaScript externe, une feuille de style, et quatre images dans un dossier spécial dans la racine de votre site. Donc, avant de commencer, il est important de vous assurer que vous avez défini un site Web dans Dreamweaver. Vous devez également enregistrer votre page dans le site Web afin que Dreamweaver peut créer les bons liens vers ces avoirs extérieurs.

Créer la page où vous souhaitez insérer la barre de menu et enregistrez-le.

Placez votre curseur à l'endroit de la page où vous voulez que le menu soit, et cliquez sur le bouton Barre de menus Spry de la catégorie Spry du panneau Insertion / bar (ou sélectionnez Insertion> Spry> Barre de menus Spry.

Dreamweaver vous présente la boîte de dialogue suivante. Sélectionnez le type de barre de menu que vous souhaitez insérer, puis cliquez sur OK.

Barre de menus spry

Enregistrez votre page. Avant de personnaliser votre barre de menu Spry, prenez un moment pour regarder les styles par défaut créés par Dreamweaver.

Si le dossier SpryAssets n'existe pas déjà, Dreamweaver crée automatiquement pour vous. Ces actifs sont partagés par tous les barres de menus Spry dans le même site. Ainsi, toutes les modifications que vous apportez à la feuille de style aura une incidence sur toutes les barres de menus qui lui sont attachés. Feuilles de style distincts sont créés pour les barres de menus horizontaux et verticaux. Les règles ne sont pas en conflit les uns avec les autres, de sorte que vous pouvez avoir les deux types sur la même page et leur style différent.

   

 

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site