Montrer ou cacher les couches avec Dreamweaver®

Montrer ou cacher les couches

Démo: Survolez les liens ci-dessous

Côte d'Ivoire

 

 

Brésil
Tunisie
Algérie
Côte d'Ivoire
Canada
Belgique
Maroc
France

 

Algérie
Tunisie

 

 

 

Ce tutoriel va vous apprendre à utiliser la fonctionnalité montrer/cacher les couches. Vous avez cinq liens à créer (les noms de pays), qui correspondent à cinq images (drapeaux). Quand la souris passe sur un lien correspondant image doit être affichée.

Etape 1: Ouvrez un nouveau document et les liens de type «». Faire des liens comme nul. C'est-à-dire entrer un «#» (# = alt gr+3) dans la zone de texte Lien dans "Propriétés".

Lien nul

 

Etape 2: Insérez un calque en cliquant sur Insertion> Objet de mise en forme> Div PA ou Calque selon la version de Dreamweaver que vous avez (en savoir plus sur les calques ici), dans un endroit sur l'écran près des liens. Insérer une image dans la couche. Les images utilisées dans ce tutoriel sont de la même taille. Vous aussi, vous pouvez rendre l'image uniforme de la taille en donnant à la hauteur et la largeur de l'image dans les propriétés de votre image.

Etape 3: Le panneau affiche les noms des couches. (si le panneau ne s'affiche pas, cliquez sur Fenêtre>Eléments PA ou F2 Vous pouvez changer le nom en double-cliquant sur ce dernier. Cliquez sur l'icône de l'œil à côté du nom du pays, maintenant l'image est cachée.

Etape 4: Répétez les étapes 2 et 3 pour le reste des images. Depuis, il y a 8 liens, 8 images seront utilisées et 8 couches doivent être créées.

Etape 5: Après avoir créé les huit couches, essayez de positionner toutes les couches au même endroit. Vous pouvez le faire facilement en consultant chaque couche à la fois et changer les valeurs de L et H dans Propriétés.

Propriétés de couches

Étape 6: Sélectionnez le mot "France", allez aux "Comportements" (si ce panneau n'est pas affiché, cliquez sur Fenêtre > Comportements), cliquez sur l'onglet avec un signe + pour ajouter le comportement. Un menu déroulant apparaît, dans lequel vous devez sélectionner Afficher/masquer les éléments. Une fenêtre comme celle-ci apparaît:

Afficher/masquer les éléments

 

montrant les huit couches créées. Sélectionnez le calque «France» et cliquez sur Afficher, le mot 'Afficher' apparaît près du nom de la couche, fermez la fenêtre.

Toujours sélectionnez le mot "France" et allez encore à Comportements et faites apparaître la fenêtre précédente

Mais maintenant en sélectionnant le mot "France" cliquez sur "Masquer" pour ajouter un autre comportement au même calque. Faites la suite.

Masquer les couches


Etape 7: Le comportement et l'action sont affichés. Vous devez changer le "onClick" à "onMouseOver". Cliquez sur l'option et sélectionnez "onMouseOver". Dans la rangée suivante en ajoute un autre comportement "onMouseOut" et suivez la même démarche que précédemment pour ouvrir la fenêtre "Afficher/Masquer les éléments" et cliquez sur 'cacher' de la même couche. Ce qui se passe maintenant, c'est quand vous déplacez la souris sur le lien, l'image est vue et lorsque la souris est déplacée hors du lien, l'image est cachée.

Vous avez maintenant attribué deux comportements au même calque:

1- Afficher le drapeau lors du survol par le curseur du mot.

2- Masquer le drapeau lors de la fin du survol.

Comportements des couches

Faites de même pour les autres mots de pays.

Étape 8: Aperçu dans le navigateur pour tester votre page.