TE.V Tutorial

Jean-Luc Nicolas

Description

Extension Snap Layers de Project SevenRubrique : Extensions TiercesDreamweaver MXLogiciel :Description : Un problème récurrent au sujet de l'utilisation des calques est le problème du positionnement par rapport à des éléments tels que des images, dans un document utilisant des tableaux définit en pourcentage, en cas de résolutions différentes de l'écran ayant servi à la mise en page ou en cas de redimensionnement de la fenêtre du navigateur.L'extension "Snap Layers", disponible sur l'excellent site de Project Seven, permet de contourner ces problèmes, nous allons voir ici comment l'utiliser.Placement des imagesOn crée tout d'abord une interface, avec un tableau de trois lignes et deux colonnes, faisant 100% de largeur, j'ai défini des marges de 20 pixels dans le document, afin que le tableau ne colle pas aux bords du document.Dans les colonnes de droite du tableau viennent se placer trois boutons, faisant 135 * 30 pixels et se nommant bouton_1.gif, bouton_2.gif et bouton_3.gif.Dans l'Inspecteur de propriétes on nomme ces boutons, (boutonUn, boutonDeux, boutonTrois) afin de leur donner un identifiant unique, pas d'espaces ni de caractères accentués.On en profite pour créer un lien virtuel, en tapant dans l'inspecteur de liens javascript:; (javacsript deux points point virgule), lien qui nous permettra d'afficher les calques sur un évenement OnMouseOver.Placement des calquesOn définit ensuite trois calques, ayant pour noms, layerUn, layerDeux, layerTrois ...

Informations

• Publié par: Utto
• Nombre de lectures: 51
• Langue: Français

Extrait

Extension Snap Layers de Project Seven

Rubrique : Extensions Tierces Logiciel : Dreamweaver MX Description : Un problème récurrent au sujet de l'utilisation des calques est le problème du positionnement par rapport à des éléments tels que des images, dans un document utilisant des tableaux définit en pourcentage, en cas de résolutions différentes de l'écran ayant servi à la mise en page ou en cas de redimensionnement de la fenêtre du navigateur.

L'extension "Snap Layers", disponible sur l'excellent site deProject Seven, permet de contourner ces problèmes, nous allons voir ici comment l'utiliser.

Placement des images

On crée tout d'abord une interface, avec un tableau de trois lignes et deux colonnes, faisant 100% de largeur, j'ai défini des marges de 20 pixels dans le document, afin que le tableau ne colle pas aux bords du document.

Dans les colonnes de droite du tableau viennent se placer trois boutons, faisant 135 * 30 pixels et se nommant bouton_1.gif, bouton_2.gif et bouton_3.gif.

Dans l'Inspecteur de propriétes on nomme ces boutons, (boutonUn, boutonDeux, boutonTrois) afin de leur donner un identifiant unique, pas d'espaces ni de caractères accentués.

On en profite pour créer un lien virtuel, en tapant dans l'inspecteur de liens javascript:; (javacsript deux points point virgule), lien qui nous permettra d'afficher les calques sur un évenement OnMouseOver.

Placement des calques

On définit ensuite trois calques, ayant pour noms, layerUn, layerDeux, layerTrois, d'une largeur de 150 pixels, hauteur indéfini, visibilité caché et de couleurs différentes, afin de bien les différencier.

L'interface des calques et des boutons dans le document

Ces calques peuvent être placés à n'importe quel endroit du document, le but étant de les faire apparaitre par rapport aux coordonnées du bouton voulu.

Interface "Snap Layers"

Les propriétés du layerUn

On accède au comportement via le menu "Fenêtre, Comportements, Studio VII, Snap layers by PVII".

La nouvelle fenêtre qui apparait nous permet de choisir l'évènement, le bouton qui va servir d'ancre au calque et la position de ce calque par rapport au bouton choisi.

On sélectionne le boutonUn en "Anchor Object", puis le layerUn qui va venir se positionner par rapport à ce bouton dans "Layer to Snap" et enfin la position par rapport à cette image dans "Presets", ici à la droite du bouton (To the Right of Image).

En cliquant sur le bouton plus + de l'interface on ajoute autant d'évènement que voulu, au contraire en cliquant sur le bouton moins  on en élimine, on peut aussi les déplacer en utilisant les flèches haut et bas.

On peut donc jouer sur l'emplacement du calque par rapport à l'image choisi, soit en utilisant le menu déroulant "Presets", soit en rentrant les coordonnées x y du calque choisi par rapport à l'image, dans les champs "Offset Left" et "Offset Top".

Evènement onLoad et onResize

Par défaut l'extension s'applique à l'évènement onLoad de la balise <body>, en cas de redimensionnement de la page il faut forcer le document à se recharger (pour NN4 et Opera) pour que les calques trouvent leurs positions par rapport aux images.

Vous pouvez trouver, toujours surProject Seven, des extensions pour forcer le rechargement du document pour les navigateurs Netscape et Opera, à savoir les extensionsOpera Resize FixetReDoIt.

Affichage des calques

Il nous reste à afficher/masquer les calques sur un évènement OnMouseOver des différents boutons, pour ce faire vous pouvez utiliser les outils présents dans les comportements de Dreamweaver en natif ou encore une fois les extensions deProject Seven, à savoirAutoLayersetautoHide Layers.

Conclusion et exemple

Cette extension est très pratique pour la création de menus par exemple, mais pas seulement, car en la combinant à d'autres, vous pouvez jouer sur l'emplacement et les évènements de vos calques, et ce de manière très simple, pour avoir des interfaces vraiment dynamiques et réactives. Ce n'est qu'une histoire d'imagination... Vous pouvez voir l'exemple du tutorial surcette page.