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.

À propos des widgets Spry

Un widget Spry est un élément de page qui fournit une expérience utilisateur enrichie en permettant l’interaction de l’utilisateur. Un widget Spry comprend les éléments suivants :

Structure du widget

Bloc de code HTML qui définit la composition structurelle du widget.

Comportement du widget

JavaScript qui détermine comment le widget répond aux événements provoqués par l’utilisateur.

Style du Widget

CSS qui définit l’apparence du widget.

Le cadre applicatif Spry prend en charge un ensemble de widgets réutilisables rédigés en code HTML, CSS et JavaScript standard. Vous pouvez insérer aisément ces widgets, dont le code est du langage HTML et CSS extrêmement simple, puis définir le style du widget. Les comportements du cadre applicatif comprennent des fonctionnalités qui permettent aux utilisateurs d’afficher ou de masquer du contenu sur la page, de modifier l’apparence de la page (par exemple sa couleur), d’interagir avec des menus, et bien plus encore.

Chaque widget du cadre applicatif Spry est associé à des fichiers CSS et JavaScript uniques. Le fichier CSS contient toutes les informations requises pour définir le style du widget, alors que le fichier JavaScript lui confère ses fonctionnalités. Lorsque vous insérez un widget à l’aide de l’interface Dreamweaver, Dreamweaver lie automatiquement ces fichiers à votre page, de sorte que votre widget contienne les fonctionnalités et le style requis.

Les fichiers CSS et JavaScript associés à un widget sont nommés selon ce dernier. De la sorte, vous saurez aisément quels fichiers correspondent à chaque widget. Par exemple, les fichiers associés au widget Accordéon sont nommés SpryAccordion.css et SpryAccordion.js. Lorsque vous insérez un widget dans une page enregistrée, Dreamweaver crée un répertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants.

Ressources et didacticiels pour widgets Spry

Les ressources en ligne suivantes fournissent plus d’informations sur la personnalisation des widgets Spry.

Exemples de widgets Spry

Personnalisation des barres de menus Spry sous Dreamweaver

Widgets de validation Spry (didacticiel vidéo)

Insertion d’un widget Spry

  1. Choisissez Insertion > Spry puis sélectionnez le widget à insérer.

Lorsque vous insérez un widget, Dreamweaver ajoute automatiquement les fichiers JavaScript et CSS Spry requis dans votre site lorsque vous enregistrez la page.

Remarque :

Vous pouvez également insérer des widgets Spry par l’intermédiaire de la catégorie Spry du panneau Insertion.

Sélection d’un widget Spry

  1. Maintenez le pointeur de la souris au-dessus du widget jusqu’à ce que le contour bleu du widget soit visible.
  2. Cliquez sur l’onglet du widget, dans son coin supérieur gauche.

Modification d’un widget Spry

  1. Sélectionnez le widget à modifier puis apportez les modifications désirées dans l’inspecteur Propriétés (Fenêtre > Propriétés).

Pour plus d’informations sur la modification de widgets spécifiques, consultez les sections relatives à chacun d’eux.

Définition du style d’un widget Spry

  1. Accédez le fichier CSS approprié pour le widget dans le dossier SpryAssets de votre site, puis modifiez ce fichier CSS selon vos préférences.

Pour plus d’informations sur la définition du style de widgets spécifiques, consultez les sections de personnalisation relatives à chacun d’eux.

Remarque :

Vous pouvez également définir le style d’un widget Spry en modifiant les styles dans le panneau CSS, comme vous le feriez pour tout autre élément de la page possédant un style.

Obtention d’autres widgets

Il existe bien d’autres widgets Web que les widgets Spry installés avec Dreamweaver. Le site Adobe Exchange fournit des widgets Web qui ont été conçus par d’autres professionnels.

  1. Choisissez Rechercher des widgets Web dans le menu Etendre Dreamweaver de la barre Application.

Vous trouverez un didacticiel vidéo sur l’utilisation des widgets Web, réalisé par l’équipe de Dreamweaver, à l’adresse www.adobe.com/go/dw10widgets_fr.

Modification du dossier par défaut des actifs Spry

Lorsque vous insérez un widget, un jeu de données ou un effet Spry dans une page enregistrée, Dreamweaver crée un répertoire SpryAssets dans votre site et y place les fichiers JavaScript et CSS correspondants. Vous pouvez modifier l’emplacement par défaut où Dreamweaver enregistre les actifs Spry si vous préférez les enregistrer ailleurs.

  1. Choisissez Site > Gérer les sites.
  2. Sélectionnez votre site dans la boîte de dialogue Gérer les sites, puis cliquez sur Modifier.
  3. Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Spry.
  4. Entrez le chemin d’accès au dossier à utiliser pour les actifs Spry, puis cliquez sur OK. Vous pouvez également cliquer sur l’icône du dossier afin d’accéder à l’emplacement désiré.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne