Utilisation d’actifs

Dernière mise à jour le 25 avr. 2024

Utilisez le panneau Actifs de Dreamweaver pour gérer les actifs du site en cours.

Vous pouvez utiliser Adobe Dreamweaver pour assurer le suivi des actifs inclus dans un site, notamment les images, animations, couleurs, scripts et liens et les prévisualiser. Vous pouvez également faire glisser un actif directement pour l’insérer dans une page de votre document actuel.

Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouvez créer des ressources dans une application telle qu'Adobe Photoshop ou Adobe Animate, les recevoir d'un collègue, ou les copier depuis un CD d'images clipart ou un site web graphique.

Dreamweaver permet également d’accéder à deux types d’actifs spéciaux : les bibliothèques et les modèles. Tous deux sont des actifs liés. Ainsi, lorsque vous modifiez un élément de bibliothèque ou un modèle, Dreamweaver met à jour tous les documents qui utilisent ces éléments. Les éléments de bibliothèque représentent généralement de petits actifs de création, tels que le logo ou les informations de copyright d’un site. Pour définir la conception de zones plus larges, utilisez plutôt un modèle.

Utilisez le panneau Actifs (Fenêtre > Actifs) pour gérer les actifs du site en cours. Le panneau Actifs affiche les actifs du site associés au document actif dans la fenêtre du document.

Annotation

Vous devez définir un site local avant de pouvoir afficher des actifs dans le panneau Actifs.

Panneau Actifs en mode En direct
Panneau Actifs en mode En direct

Panneau Actifs en modes Création et Code

Le panneau Ressources offre différentes façons d'afficher les ressources :

Liste Site

Affiche toutes les ressources de votre site, y compris les couleurs et URL utilisées dans tout document de votre site.

Liste Favoris

Présente uniquement les actifs que vous avez sélectionnés de façon explicite.

Pour basculer entre ces deux vues, sélectionnez la case d'option Site ou Favoris au-dessus de la zone d'aperçu.(Ces deux vues ne sont pas disponibles pour les catégories Modèles et Bibliothèque.)

Annotation

La plupart des opérations du panneau Actifs fonctionnent de la même façon dans les deux listes. Toutefois, il existe quelques tâches qui ne peuvent être réalisées que dans la liste Favoris.

Dans les deux listes, les actifs appartiennent à l'une des catégories suivantes :

Images

Fichiers image aux formats GIF, JPEG ou PNG.

Couleurs

Couleurs utilisées dans les documents et feuilles de style, y compris les couleurs de texte, d'arrière-plan et de liens.

URL

Liens externes dans vos documents de site actuel, y compris les liens FTP, gopher, HTTP, HTTPS, JavaScript, e-mail (mailto) et fichier local (file://).

Média

Fichiers médias tels que les fichiers Adobe Flash (SWF uniquement), les fichiers Adobe Shockwave, QuickTime ou MPEG.

Scripts

Fichiers JavaScript ou VBScript. Les scripts dans les fichiers HTML (plutôt que dans des fichiers JavaScript ou VBScript indépendants) n’apparaissent pas dans le panneau Actifs. Cette catégorie est disponible uniquement en modes Code et Création.

Modèles

Mises en forme de pages principales utilisées sur plusieurs pages. La modification d’un modèle entraîne automatiquement la modification de toutes les pages qui y sont associées. Cette catégorie est disponible uniquement en modes Code et Création.

Éléments de bibliothèque

Éléments de design utilisés dans plusieurs pages. Lorsque vous modifiez un élément de bibliothèque, toutes les pages qui le contiennent sont mises à jour. Cette catégorie est disponible uniquement en modes Code et Création.

Annotation

Pour figurer dans le panneau Actifs, un fichier doit appartenir à l’une de ces catégories. Il existe d’autres types de fichiers parfois appelés actifs, mais qui ne sont pas affichés dans le panneau.

Par défaut, les ressources d'une catégorie sont classées alphabétiquement par nom, mais vous pouvez les trier par type et selon plusieurs autres critères. Vous pouvez également prévisualiser les ressources et redimensionner les colonnes ainsi que la zone d'aperçu.

L’icône Creative Cloud dans la colonne Type indique que les actifs correspondants sont importés depuis les Bibliothèques Creative Cloud. Vous pouvez cliquer deux fois sur l’icône Creative Cloud pour rééchantillonner les actifs correspondants. Pour plus d'informations sur la réutilisation de ressources dans Creative Cloud Libraries, voir Creative Cloud Libraries dans Dreamweaver.

Affichage d’un actif dans la zone d’aperçu

Sélectionnez l’actif dans le panneau Actifs.

Affichage des actifs d’une catégorie donnée

Cliquez sur l'icône d'une catégorie sur le côté gauche du panneau Ressources.

Tri des actifs

Cliquez sur un en-tête de colonne.

Par exemple, pour trier la liste d'images par type (afin que toutes les images GIF soient regroupées, toutes les images JPEG ensemble, et ainsi de suite), cliquez sur l'en-tête de colonne Type.

Redimensionnement d’une colonne

Faire glisser la ligne séparant deux en-têtes de colonne.

Redimensionnement de la zone d’aperçu

Faites glisser la barre de fractionnement (entre la zone d'aperçu et la liste des ressources) vers le haut ou vers le bas.

Actualisation du panneau Actifs

La création de la liste de sites peut prendre quelques secondes car Dreamweaver doit d'abord lire le cache du site.

Certaines modifications n’apparaissent pas immédiatement dans le panneau Actifs. Par exemple, lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas répercutées dans le panneau Actifs tant que vous n’actualisez pas la liste Site en cliquant sur le bouton Actualiser la liste du site. Si vous ajoutez ou supprimez une ressource en dehors de Dreamweaver — en utilisant l'Explorateur Windows ou le Finder par exemple — vous devez reconstruire le cache du site pour mettre à jour le panneau Ressources.

Lorsque vous supprimez l'unique instance d'une URL ou d'une couleur donnée du site, ou lorsque vous enregistrez un nouveau fichier contenant une couleur ou une URL n'ayant pas encore été utilisée dans le site, les modifications ne sont répercutées dans le panneau Actifs qu'une fois la liste Site actualisée.

  • Pour actualiser manuellement la liste Site, cliquez sur le bouton Actualiser la liste du site . Dreamweaver crée le cache du site ou le met à jour si nécessaire.
  • Pour actualiser la liste Site et reconstruire manuellement le cache du site, cliquez avec le bouton droit (Windows) ou cliquez en maintenant la touche Cmd enfoncée (Macintosh) dans la liste Ressources, puis sélectionnez Actualiser la liste du site.

Ajout d’un actif à un document

Vous pouvez insérer la plupart des actifs dans un document en les faisant glisser dans la fenêtre de document en mode En direct, Code ou Création, ou en utilisant le bouton Insérer du panneau. Vous pouvez faire glisser les assets depuis l'affichage liste et le volet d'aperçu du panneau Assets.

Remarque : Le glissement depuis le volet d'aperçu n'est pris en charge que sur Mac.

En mode Création ou En direct, vous pouvez insérer des couleurs et des URL. En mode Création, vous pouvez appliquer des couleurs et des URL aux éléments sélectionnés.

 

Dans le document, placez le point d'insertion à l'endroit où vous voulez que l'asset apparaisse.

Dans le panneau Assets, sélectionnez l'un des boutons de catégorie d'asset à gauche.
Annotation

sélectionnez toute catégorie autre que Modèles. Un modèle s'applique à un document entier ; il ne peut pas être inséré dans un document.

Sélectionnez Site ou Favoris dans la partie supérieure du panneau, puis sélectionnez l'asset.

Il n'existe aucune liste Site ou Favoris pour les éléments de bibliothèque ; ignorer cette étape si vous insérez un élément de bibliothèque.

Effectuez l’une des tâches suivantes :
  • Faites glisser l'actif depuis le panneau vers le document. Vous pouvez faire glisser depuis la vue en liste ainsi que depuis le volet d'aperçu.

    Remarque : Sous Windows, vous ne pouvez pas faire glisser les assets depuis le volet d'aperçu.

    Vous pouvez faire glisser des scripts dans la zone du contenu de l'en-tête de la fenêtre de document. Si cette zone n'est pas visible, choisissez Affichage > Contenu de l'en-tête.

  • Sélectionnez l'actif dans le panneau et cliquez sur Insérer.

    Si l'actif inséré est une couleur, elle s'applique au texte qui figure après le point d'insertion.

Appliquer une couleur au texte à l'aide du panneau Assets

Le panneau Assets affiche les couleurs que vous avez déjà appliquées aux différents éléments, comme le texte, les bordures de tableau, les arrière-plans, etc.

En mode Création, procédez comme suit :

Sélectionnez du texte dans le document.

Dans le panneau Assets, sélectionnez la catégorie Couleurs.

Sélectionnez la couleur souhaitée, puis cliquez sur Appliquer.

En mode En direct, procédez comme suit :

Dans le panneau Assets, sélectionnez la catégorie Couleurs.

Effectuez l’une des opérations suivantes :

  • Cliquez avec le bouton droit de la souris sur la couleur dans le panneau Actifs, puis cliquez sur Copier la valeur chromatique. La valeur chromatique est copiée dans le presse-papiers. Vous pouvez maintenant coller la valeur de couleur (Ctrl+V, Cmd+V) dans CSS Designer.
  • Faites glisser la couleur de l’aperçu rapide et passez la souris sur les éléments en mode En direct. Lorsque vous déposez la couleur, la boîte de dialogue Nouvelle règle CSS s'affiche et lorsque vous cliquez sur OK, la couleur est appliquée à l'élément sélectionné.
  • Cliquez sur Appliquer dans le panneau Actifs. La boîte de dialogue Nouvelle règle CSS s'affiche et lorsque vous cliquez sur OK, la couleur est appliquée à l'élément sélectionné.

Attribuer des URL aux images ou au texte

En mode Création, procédez comme suit :

Sélectionnez le texte ou l'image.

Dans le panneau Éléments, sélectionnez la catégorie URL dans la vue Sites ou Favoris, selon l'emplacement de stockage de l'URL.

Annotation

Les URL des fichiers de votre site sont stockées dans la vue Sites par défaut. La vue Favoris contient les URL que vous avez ajoutées vous-même.

Sélectionnez l’URL.
Effectuez l’une des opérations suivantes :
  • Faites glisser l'URL du panneau vers la sélection en mode Création.

  • Sélectionnez l'URL et cliquez sur Insérer.

En mode En direct, procédez comme suit :

Dans le panneau Ressources, sélectionnez la catégorie URL dans l'affichage Sites ou Favoris, selon l'emplacement de stockage de l'URL.

Effectuez l’une des opérations suivantes :

  • Faites glisser l’URL de l’aperçu rapide ou la vue de la liste. Passez la souris sur les éléments en mode En direct. Lorsque vous déposez l'URL, <a> englobe l'élément en surbrillance en mode En direct.
  • Cliquez sur l’élément requis en mode En direct. Choisissez l’URL dans le panneau Actifs, puis cliquez sur Appliquer. L'élément sélectionné est englobé par la balise <a>.

Sélection et modification d’actifs

Le panneau Assets vous permet de sélectionner plusieurs ressources à la fois.il offre également un moyen rapide de commencer l’édition d’actifs.

Sélection de plusieurs actifs.

Dans le panneau Actifs, sélectionnez un actif.
Sélectionnez les autres actifs à l’aide de l’une des méthodes suivantes :
  • Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série consécutive de ressources.

  • Cliquez en maintenant la touche Ctrl enfoncée (Windows) ou Cmd enfoncée (Macintosh) pour ajouter une ressource individuelle à la sélection (qu'elle soit adjacente ou non à la sélection existante). Cliquez en maintenant la touche Ctrl ou Cmd enfoncée sur une ressource sélectionnée pour la désélectionner.

Modification d’un actif

Lorsque vous modifiez une ressource dans le panneau Ressources, le comportement varie selon le type de ressource. Pour certaines ressources, telles que les images, vous utilisez un éditeur externe qui s'ouvre automatiquement si vous avez défini un éditeur pour ce type de ressource. Vous pouvez modifier les couleurs et les URL uniquement dans la liste Favoris. Lorsque vous modifiez des modèles et des éléments de bibliothèque, vous apportez les modifications dans Dreamweaver.

Dans le panneau Ressources, effectuez l'une des opérations suivantes :
  • Double-cliquez sur l'actif.

  • Sélectionnez la ressource, puis cliquez sur le bouton Modifier.

Annotation

Si l'actif doit être modifié dans un éditeur externe et qu'aucun éditeur ne s'ouvre automatiquement, sélectionnez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), sélectionnez la catégorie Types de fichiers/Editeurs, et assurez-vous qu'un éditeur externe est défini pour ce type d'actif.

Apportez les modifications voulues.
Lorsque vous avez terminé, procédez de l’une des façons suivantes :
  • Si l'actif est basé sur un fichier (tout objet autre qu'une couleur ou une URL), enregistrez-le (via l'éditeur que vous utilisez), puis fermez-le.

  • Si l'actif est une URL, cliquez sur OK dans la boîte de dialogue Modifier l'URL.

Annotation

Si l'actif est une couleur, le sélecteur de couleur se ferme automatiquement lorsque vous sélectionnez une couleur. Pour fermer le sélecteur de couleur sans sélectionner de couleur, appuyez sur la touche Echap.

Réutilisation d'actifs dans un autre site

Le panneau Ressources affiche toutes les ressources (de types reconnus) de votre site actuel. Pour utiliser une ressource du site actuel dans un autre site, vous devez la copier vers l'autre site. Vous pouvez copier une ressource individuelle, un ensemble de ressources individuelles ou un dossier Favoris entier à la fois.

Vous devrez peut-être localiser le fichier dans le panneau Fichiers qui correspond à une ressource du panneau Ressources avant de transférer la ressource vers ou depuis votre site distant.

Annotation

Le panneau Fichiers peut afficher un site différent de celui affiché dans le panneau Ressources. Ceci s'explique par le fait que le panneau Assets est associé au document actif.

Localiser un fichier de ressource dans le panneau Fichiers

Dans le panneau Ressources, sélectionnez la catégorie de la ressource que vous souhaitez trouver.
Cliquez avec le bouton droit (Windows) ou cliquez en maintenant la touche Ctrl enfoncée (Macintosh) sur le nom ou l'icône de la ressource dans le panneau Ressources, puis sélectionnez Localiser dans le site dans le menu contextuel.
Annotation

La commande Localiser dans le site est indisponible pour les couleurs et les URL, qui ne correspondent pas à des fichiers dans le site.

Le panneau Fichiers s'ouvre, avec le fichier de ressource sélectionné. La commande Localiser sur l'emplacement localise le fichier correspondant à la ressource elle-même ; elle ne localise pas les fichiers qui utilisent cette ressource.

Copier des ressources du panneau Ressources vers un autre emplacement

Dans le panneau Ressources, sélectionnez la catégorie de la ressource que vous voulez copier.
Cliquez avec le bouton droit (Windows) ou cliquez en maintenant la touche Contrôle enfoncée (Macintosh) sur une ou plusieurs ressources dans la liste Site ou Favoris, sélectionnez Copier vers le site, puis sélectionnez le nom du site cible dans le sous-menu répertoriant tous les sites que vous avez définis.
Annotation

Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des ressources individuelles.

Les ressources sont copiées vers leurs emplacements correspondants dans l'emplacement cible. Dreamweaver crée de nouveaux dossiers dans la hiérarchie du site cible selon les besoins.Les ressources sont également ajoutées à la liste Favoris de l'emplacement cible.

Annotation

Si la ressource que vous avez copiée est une couleur ou une URL, elle apparaît uniquement dans la liste Favoris de l'emplacement cible. Étant donné que les couleurs et les URL ne correspondent pas à des fichiers, il n'y a aucun fichier à copier dans l'autre emplacement.