Utilisation des widgets Spry (instructions générales)



    A 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 suivats :

    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.

    Insertion d'un widget Spry

     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

     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

     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.

    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.

     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. Sélectionnez la catégorie Spry dans la boîte de dialogue Gérer les sites.
    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é.