Ajout d’effets Spry sous Dreamweaver pour modifier visuellement des éléments de la page

Remarque :

Les widgets Spry ont été remplacés par des widgets jQuery sous Dreamweaver CC et versions ultérieures. Bien qu’il soit toujours possible de modifier des widgets Spry sur votre page, vous ne pouvez pas en ajouter de nouveaux.

Les effets Spry sont des améliorations visuelles que vous pouvez appliquer à pratiquement n’importe quel élément d’une page HTML à l’aide de JavaScript. Les effets sont souvent utilisés pour surligner des informations, créer des transitions animées ou modifier visuellement un élément de page pendant un certain délai. Vous pouvez appliquer des effets aux éléments HTML sans devoir employer de balises personnalisées supplémentaires.

Remarque :

Pour appliquer un effet à un élément, il doit être sélectionné ou posséder un ID. Si, par exemple, vous surlignez une balise div qui n’est pas sélectionnée, elle doit posséder une valeur ID valide. Si ce n’est pas encore le cas, vous devez en ajouter un au code HTML.

Les effets peuvent modifier les propriétés d’opacité, d’échelle, de position et de style d’un élément, comme sa couleur d’arrière-plan. Vous pouvez créer d’intéressants effets visuels en combinant plusieurs propriétés.

Ces effets sont basés sur Spry. Dès lors, lorsqu’un utilisateur clique sur un élément possédant un effet, seul l’élément est mis à jour de manière dynamique. La page HTML n’est pas entièrement actualisée.

Spry comporte les effets suivants :

Apparition/Fondu

Fait apparaître ou disparaître lentement un élément.

Surligner

Modifie la couleur d’arrière-plan d’un élément.

Volet

Simule l’effet d’un store qui monte ou descend pour afficher ou masquer l’élément.

Faire coulisser l’objet 3D

Fait monter ou descendre l’élément.

Agrandissement/Réduction

Augmente ou diminue la taille de l’élément.

Secouer

Donne l’impression que l’élément est secoué de gauche à droite.

Ecraser

Fait disparaître l’élément dans le coin supérieur gauche de la page.

Remarque :

Lorsque vous utilisez un effet, diverses lignes de code sont ajoutées au fichier en mode Code. Une ligne identifie le fichier SpryEffects.js, qui est nécessaire à l’inclusion des effets. Ne supprimez pas cette ligne du code, faute de quoi les effets ne fonctionneront pas.

Vous trouverez la liste détaillée des effets Spry disponibles dans le cadre applicatif Spry à l’adresse www.adobe.com/go/learn_dw_spryeffects_fr.

Remarque :

Vous pouvez utiliser cet effet avec n’importe quel élément HTML, sauf applet, body, iframe, object, tr, tbody ou th.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez Effets > Apparition/Fondu dans le menu.

Sélectionnez l’ID de l’élément dans le menu de l’élément cible. Si vous avez déjà sélectionné un élément, choisissez <Sélection actuelle>.

Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l’effet se produise.

Sélectionnez l’effet à appliquer : Fondu ou Apparition.

Dans la zone Début du fondu, définissez le pourcentage d’opacité que l’effet doit posséder lorsqu’il apparaît.

Dans la zone Fin du fondu, définissez le pourcentage d’opacité à atteindre.

Cliquez sur Effet de bascule si vous voulez que l’effet soit réversible, en apparaissant lentement puis en disparaissant de nouveau à chaque clic de souris.

Remarque :

Cet effet ne peut être utilisé que sur les éléments HTML suivants : address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu ou pre.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez Effets > Store dans le menu.

Sélectionnez l’ID de l’élément dans le menu de l’élément cible. Si vous avez déjà sélectionné un élément, choisissez <Sélection actuelle>.

Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l’effet se produise.

Sélectionnez l’effet à appliquer : Store monté ou Store baissé.

Dans la zone Store monté depuis/Store baissé depuis, définissez le point de départ du déroulement du store, sous la forme d’un pourcentage ou d’un nombre de pixels. Ces valeurs sont calculées à partir du dessus de l’élément.

Dans la zone Store monté jusqu’à/Store baissé jusqu’à, définissez le point final du déroulement du store, sous la forme d’un pourcentage ou d’un nombre de pixels. Ces valeurs sont calculées à partir du dessus de l’élément.

Cliquez sur Effet de bascule si vous voulez que l’effet soit réversible, en remontant puis en redescendant à chaque clic de souris.

Remarque :

Vous pouvez utiliser cet effet avec les éléments HTML suivants : address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu ou pre.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez Effets > Agrandissement/Réduction dans le menu.

Sélectionnez l’ID de l’élément dans le menu contextuel de l’élément cible. Si vous avez déjà sélectionné un élément, choisissez <Sélection actuelle>.

Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l’effet se produise.

Sélectionnez l’effet à appliquer : Agrandissement ou Réduction.

Dans la zone Début agrandissement/Début réduction, définissez la taille de l’élément au début de l’effet. Il s’agit d’un pourcentage de la taille ou d’un nombre de pixels.

Dans la zone Fin agrandissement/Fin réduction, définissez la taille de l’élément à la fin de l’effet. Il s’agit d’un pourcentage de la taille ou d’un nombre de pixels.

Si vous choisissez les pixels pour l’une des zones Début ou Fin agrandissement/réduction, la zone largeur/hauteur devient visible. En fonction de l’option choisie, l’élément sera agrandi ou réduit de manière proportionnelle.

Indiquez si vous voulez que l’élément soit agrandi ou réduit vers le coin supérieur gauche de la page ou le centre de la page.

Cliquez sur Effet de bascule si vous voulez que l’effet soit réversible, en étant agrandi puis réduit à chaque clic de souris.

Remarque :

Vous pouvez utiliser cet effet avec n’importe quel élément HTML, sauf applet, body, frame, frameset ou noframes.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez Effets > Surligner dans le menu.

Sélectionnez l’ID de l’élément dans le menu de l’élément cible. Si vous avez déjà sélectionné un élément, choisissez <Sélection actuelle>.

Dans la zone Durée de l’effet, définissez le délai (en millisecondes) pendant lequel l’effet doit durer.

Sélectionnez la couleur de début du surlignage.

Sélectionnez la couleur de fin du surlignage. Cette couleur ne dure que pendant le délai défini dans la zone Durée de l’effet.

Sélectionnez la couleur de l’élément à la fin du surlignage.

Cliquez sur Effet de bascule si vous voulez que l’effet soit réversible, en recevant successivement les différentes couleurs de surlignage à chaque clic de souris.

Remarque :

Cet effet peut être utilisé avec les éléments HTML suivants : address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre ou table.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez Effets > Secouer dans le menu.

Sélectionnez l’ID de l’élément dans le menu de l’élément cible. Si vous avez déjà sélectionné un élément, choisissez <Sélection actuelle>.

Pour que l’effet Glisser fonctionne correctement, l’élément cible doit être entouré d’une balise conteneur possédant un ID unique. La balise conteneur dont vous entourez l’élément cible doit être de type blockquote, dd, form, div ou center.

La balise d’élément cible doit être l’une des suivantes : blockquote, dd, div, form, center, table, span, input, textarea, select ou image.

(Facultatif) Sélectionnez la balise conteneur du contenu auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez Effets > Glisser dans le menu.

Sélectionnez l’ID du conteneur dans le menu de l’élément cible. Si le conteneur est déjà sélectionné, choisissez <Sélection actuelle>.

Dans la zone Durée de l’effet, définissez le délai (en millisecondes) nécessaire pour que l’effet se produise.

Sélectionnez l’effet à appliquer : Glisser vers le haut ou Glisser vers le bas.

Dans la zone Glisser vers le haut depuis, définissez le point de départ du coulissement, sous la forme d’un pourcentage ou d’un nombre de pixels.

Dans la zone Glisser vers le haut jusqu’à, définissez le point final du coulissement, sous la forme d’un pourcentage ou d’un nombre de pixels positif.

Cliquez sur Effet de bascule si vous voulez que l’effet soit réversible, en coulissant vers le haut puis vers le bas à chaque clic de souris.

Remarque :

Cet effet ne peut être utilisé qu’avec les éléments HTML suivants : address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu ou pre.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez Effets > Ecraser dans le menu.

Sélectionnez l’ID de l’élément dans le menu de l’élément cible. Si vous avez déjà sélectionné un élément, choisissez <Sélection actuelle>.

Vous pouvez associer plusieurs comportements d’effets au même élément, de manière à produire des effets intéressants.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), puis choisissez un effet dans le menu Effets.

Sélectionnez l’ID de l’élément dans le menu de l’élément cible. Si vous avez déjà sélectionné un élément, choisissez <Sélection actuelle>.

Vous pouvez supprimer un ou plusieurs comportements d’effet d’un élément.

(Facultatif) Sélectionnez le contenu ou l’élément de mise en forme auquel vous voulez appliquer l’effet.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur l’effet à supprimer de la liste de comportements.

Effectuez l’une des opérations suivantes :

Cliquez sur le bouton Supprimer un événement (-) de la barre de titre du panneau secondaire.
Cliquez sur le comportement avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Supprimer le comportement.

Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales | Politique de confidentialité en ligne

Application des effets Spry sous Dreamweaver

Présentation des effets Spry

Application d’un effet Apparition/Fondu

Application d’un effet Store

Application d’un effet Agrandissement/Réduction

Application d’un effet Surligner

Application d’un effet Secouer

Application d’un effet Glisser

Application d’un effet Ecraser

Ajout d’un effet supplémentaire

Suppression d’un effet

Interroger la communauté

Une question à nous poser ?