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

 

Dreamweaver et Fireworks: Création d'images de survol

Dans cette leçon, nous allons créer l'une des techniques les plus courantes sur les sites web: images de survol.

REMARQUE: Chaque image que vous aurez à créer en survol "rollover" est en fait 2 images: 1 pour l'état haut et l'autre pour l'état en cours . Gardez cela à l'esprit lorsque vous créez vos graphiques animés. L'effet peut être merveilleux, mais vous devez également savoir les inconvénients inhérents au téléchargement de vos pages. Trop d'images de survol peut induire plus de temps de téléchargement inutile à vos pages.


ETAPE 1: Création des graphiques animés dans Fireworks

Dans notre exemple , le menu contient 3 boutons : à propos | contact | services. Chaque bouton a 2 états: L'état d'en haut et l'état d'en bas .Cela nous donne un total de 6 graphiques.

Boutons de survol
 

Il est très important que vous exportiez chaque graphique à la même taille ou vos images de survol peuvent être déformées.

Dans l'image ci-dessus, les graphismes de fond (l'état d'en bas) sont plus grandes que ceux du haut. Afin de nous assurer que nos images sont de la même taille, nous allons créer une toile de la taille de la plus grande image et exporter ensuite chaque image de cette taille de la toile.

La taille de l'image pour chacun des graphiques de fond est la suivante:101x24 .

  1. Créer un nouveau fichier 101x24
  2. Réglez le coordonnées X et Y dans l'inspecteur des propriétés à 0,0.Cela garantit que le graphique soit parfaitement placé sur la nouvelle toile.
  3. Copiez le plus petit (Up) graphique pour la nouvelle toile et aligner le texte afin qu'il soit aligné avec le texte en bas
Bouton à propos
  1. Eteignez le visiblité de l'image Bas (couche inférieure) en cliquant sur l'icône de l'oeil. Nous allons exporter le premier graphique d'abord.
  2. Réglez le panneau d'optimisation à Gif | Les adaptatifs | 8 couleurs
  3. Exporter l'image et nommez-la: "apropos_haut"
  4. Réglez le panneau Optimiser pour Gif | Les adaptatifs | 8 couleurs
  5. Exporter l'image et le nom de: "apropos_bas"
  6. Répétez les étapes pour les boutons restants.

ETAPE 1: Mise en place des roulements

  1. Ouvrez la page où vous voulez placer le survol d'éléments.
  2. Créer-y un tableau avec 3 colonnes (Insertion >> Tableau).
  3. Placez votre curseur dans la première cellule du tableau

.

Contact Services

 

  1. Du menu Insertion , sélectionnez Insérer > Image survolée
  2. Vous pouvez taper un nom pour le nom de l'image et de remplacer la convention de nommage par défaut de Dreamweaver
  3. Définissez les originaux et Rollover images en utilisant leParcourir bouton ou en tapant les noms. Si vous tapez dans le nom de l'image être sûr que vous tapez le chemin d'accès aux images correctement. En général, je préfère utiliser le Parcourir bouton pour la première image, puis copiez et collez le nom pour l'image de survol et d'apporter les changements de nom nécessaires.
  4. Dreamweaver sélectionnez " Image survolée Précharge "par défaut. Laissez cette option sélectionnée.
  5. Tapez un nom descriptif pour le texte de remplacement domaine.Ceci est le texte qui s'affiche lorsque le curseur est passé de l'image
  6. Utilisez le Parcourir bouton pour naviguer vers la page que vous voulez le lien pour visiter lorsque vous cliquez dessus. Vous pouvez laisser ce champ vide pour cet exercice et Dreamweaver définit automatiquement le lien à un "lien nul" en plaçant le signe dièse (#) dans le champ Lien. liens nuls sont des liens temporaires qui ne vont pas n'importe où, mais sont nécessaires pour la mise en place l'image de survol.
  7. Continuez à ajouter les reports pour les deux autres boutons

 

ÉTAPE 2: Modification des images de survol

 

Au point que vous devrez peut-être ou si vous voulez revenir en arrière et changer l'un de vos roulements après que vous avez créé. Vous pouvez facilement faire cela en utilisant le panneau Comportements.

  1. Sélectionnez l'image que vous voulez changer
  2. Pour changer le état en haut du bouton, cliquez sur le fichier Parcourir Pour icône dans la inspecteur des propriétés et accédez à la nouvelle image.
  3. Pour changer le cours de l'état de l'image, aller à la panneau Comportements , double-cliquez sur le (onMouseOver) Permuter une image comportement. C'est pourquoi le nom de vos images lorsque vous réglez cette place est si important.
  4. L'image que vous sélectionnez est l'état Up de l'image. C'est le nom qui est mis en évidence dans le domaine des images.
  5. Réglez la source au vous permet de changer le cours de l'image pour l'image sélectionnée. Dans ce cas, nous avons sélectionné le bouton Services et si on change la source réglée à l'image, nous aurons un autre cours d'État pour le bouton Services.
Fenêtre comportements

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