Guide d'utilisation Annuler

Extract dans Dreamweaver

Rechercher

Dernière mise à jour le 30 déc. 2021

Découvrez comment convertir rapidement vos fichiers PSD en conceptions web HTML pour une utilisation sur appareils mobiles ou postes de travail. Extrayez des feuilles CSS, images, mesures, polices, couleurs, dégradés, et bien plus, de Photoshop directement dans Dreamweaver.

Remarque :

À compter du 1er juillet 2022, les fonctionnalités dans le panneau Extract ne seront plus disponibles dans Dreamweaver 21.2 et les versions antérieures. Vous pouvez utiliser Adobe Photoshop pour l’extraction d’informations sur le style d’actifs des composants PSD, et les réutiliser dans Dreamweaver.

L’intégration d’Extract dans Dreamweaver permet aux designers et aux développeurs web d’appliquer des indications de conception et d’extraire des actifs optimisés pour le web au sein de leur environnement de codage. Extract fournit une solution complète et indépendante pour l’extraction d’informations sur le style d’actifs de compositions PSD, réduisant ainsi les besoins d’aller-retour entre Photoshop et Dreamweaver.

Avec le panneau Extract de Dreamweaver, vous pouvez extraire du code CSS, des images, des polices, des couleurs, des dégradés et des mesures directement dans votre page web. Outre ces fonctions principales d’Extract, Dreamweaver fournit également les fonctionnalités uniques suivantes :

Accès direct aux fichiers PSD sur Creative Cloud et à tous les fichiers PSD partagés avec vous dans un dossier de collaboration
Conseils de code contextuels pour définir facilement des polices, des couleurs et des dégradés dans votre code CSS
Prise en charge de la fonction glisser-déposer pour créer des balises d’image à partir de calques PSD
Possibilité de coller directement des styles en mode En direct (par exemple, CSS Designer et Affichage d’élément)

Prise en main d’Extract

Extraction de code CSS

Définition des préférences dans Extract

Copie de texte

Extraction des images

Extraction de polices, de couleurs et de dégradés

Extraction de mesures

Prise en main d’Extract

L’outil Extract vous permet d’accéder à vos fichiers PSD directement depuis le panneau du même nom dans Dreamweaver. Pour plus d’informations sur le panneau et l’espace de travail Extract, ainsi que sur le chargement de vos fichiers PSD dans le panneau Extract, consultez les rubriques suivantes :

Panneau et espace de travail Extract

L’espace de travail Extract est conçu pour vous aider à utiliser Extract avec Dreamweaver de manière efficace. Dans cet espace de travail, le panneau Extract apparaît sur la gauche et votre page web s’affiche sur la droite dans l’affichage à deux volets (modes En direct et Code). Vous pouvez personnaliser l’espace de travail en faisant glisser, en ancrant ou en réduisant les panneaux selon vos besoins. Vous pouvez également enregistrer un espace de travail personnalisé pour une utilisation ultérieure.

Remarque :

Si vous devez fermer le panneau Extract, utilisez les touches de raccourci clavier – Ctrl + K (Win)/Cmd + K (Mac) – ou sélectionnez Fenêtre > Extract pour rouvrir le panneau.

Lors du premier lancement de Dreamweaver, le panneau Extract affiche un tutoriel interactif pour vous aider à découvrir les différents workflows. Vous pouvez utiliser la liste déroulante en haut du panneau pour passer d’un tutoriel à l’autre.

Après avoir utilisé le tutoriel, vous pouvez cliquer sur Mise en route pour commencer à utiliser Extract sous Dreamweaver. Le panneau Extract affiche des vignettes des dossiers et des fichiers PSD dans votre compte Creative Cloud. Il s’agit des fichiers qui ont été téléchargés ou synchronisés depuis votre bureau, ou qui ont été partagés avec vous par l’intermédiaire d’un dossier de collaboration sur Creative Cloud.

Panneau Extract affichant les fichiers PSD enregistrés sur Creative Cloud

Remarque :

Pour relancer le tutoriel, cliquez sur le menu déroulant dans l’angle supérieur droit du panneau et sélectionnez Lancer le tutoriel.

Chargement de fichiers PSD dans Creative Cloud

Pour charger un fichier PSD sur votre espace Creative Cloud, choisissez Fenêtre > Extract, puis cliquez sur Charger un fichier PSD. Si les compositions PSD ont été développées par une personne ou une équipe différentes, vous pouvez demander leur partage via Creative Cloud. Vous pouvez ensuite télécharger les fichiers, puis les charger directement sur votre compte en vous connectant à Creative Cloud ou via le panneau Extract sous Dreamweaver.

Remarque :

Si vous utilisez Dreamweaver 21.2 ou toute autre version ultérieure sur un appareil macOS, activez le type de fichier PSD dans le Finder avant de charger votre fichier.

Pour macOS

Suivez les étapes ci-dessous pour activer et charger vos fichiers PSD :

Dans le panneau Extract, cliquez sur Charger un fichier PSD.
Sélectionnez Options dans la fenêtre du Finder et choisissez *.psd dans la liste déroulante qui s’affiche.
Sélectionnez le fichier PSD et cliquez sur Ouvrir afin de le charger.

Ouverture de fichiers PSD dans le panneau Extract

Cliquez sur la vignette du fichier PSD requis dans le panneau Extract. Si une version mise à jour du fichier PSD devient disponible sur Creative Cloud après que vous l’ayez ouvert, rechargez le fichier PSD dans le panneau Extract. Pour ce faire, cliquez sur le nom du fichier PSD ou cliquez sur Recharger PSD dans le menu déroulant dans l’angle supérieur droit. Pour revenir sur la miniature et sélectionner un autre fichier, cliquez sur l’icône Creative Cloud dans l’angle supérieur gauche du panneau.

Pour agrandir l’affichage et observer de plus près la conception, modifiez l’échelle en haut du panneau Extract ou utilisez la touche Alt +/-. Utilisez l’onglet Calques ou la liste déroulante Composition de calques pour afficher ou masquer les éléments du fichier PSD.

Vous êtes maintenant prêt à convertir la composition PSD en site web.

Définition des préférences dans Extract

À l’aide des préférences d’Extract, vous pouvez spécifier le format de fichier par défaut dans lequel les images doivent être extraites, ainsi que l’unité par défaut des polices à afficher dans le panneau Extract.

Cliquez sur Édition > Préférences (Win) ou Dreamweaver > Préférences (Mac).
Sélectionnez Extract dans la liste Catégorie.
(Facultatif) Modifiez le format par défaut dans lequel les images doivent être extraites.

Format de l’image extraite
(Facultatif) Dans la section Extract pour les périphériques, sélectionnez les résolutions requises. Ces paramètres sont utilisés lorsque vous choisissez d’enregistrer plusieurs versions d’une image dans différentes résolutions.
- Pour enregistrer ces versions en y ajoutant des suffixes, cliquez sur la ligne correspondante de la colonne Suffixe, puis saisissez le texte de votre choix.
- Pour enregistrer plusieurs versions dans des dossiers de sortie distincts, cliquez sur la ligne correspondante de la colonne Dossier, puis indiquez chaque chemin d’accès relatif.
Extract pour les périphériques
(Facultatif) Cliquez sur Vider la mémoire cache pour supprimer les données mises en mémoire cache concernant l’utilisation d’Extract.
Cliquez sur Appliquer, puis fermez la boîte de dialogue Préférences.
Pour afficher les modifications dans le panneau Extract, rechargez le PSD (menu déroulant > Recharger PSD).

Option Recharger PSD dans le panneau Extract

Extraction de code CSS dans les fichiers PSD

Vous pouvez copier toutes ou certaines propriétés CSS des éléments dans une composition PSD et coller directement les styles dans CSS Designer, dans l’affichage d’éléments en mode En direct, ou dans votre code (source CSS ou document HTML).

En outre, des conseils de code sont automatiquement renseignés avec les propriétés CSS de l’élément que vous sélectionnez dans la composition PSD. Si vous préférez coder, vous pouvez utiliser ces conseils de code pour extraire les propriétés CSS dans le code.

Dans le panneau Extract (Fenêtre > Extract), cliquez sur le fichier PSD requis. La miniature du PSD s’agrandit, ce qui permet de voir clairement la composition.
Dans le fichier PSD, cliquez sur l’élément ou l’actif requis. Une fenêtre contextuelle contenant la liste des propriétés CSS de l’élément apparaît et vous offre la possibilité de les sélectionner et de les copier. La largeur et la hauteur de l’élément sélectionné peuvent être exprimées en pixels ou en pourcentages.

Remarque : si vous optez pour les pourcentages, les mesures seront également indiquées sous forme de pourcentages.

Option Copier le CSS dans le panneau Extract

Pour copier le CSS, sélectionnez les propriétés que vous souhaitez copier, puis cliquez sur Copier CSS.
Collez le CSS dans votre document en utilisant l’une des méthodes suivantes :
- Pour coller le CSS dans CSS Designer, cliquez sur le sélecteur requis, puis cliquez sur Coller les styles.
- Pour coller le CSS à l’aide de l’Affichage d’élément, cliquez sur un sélecteur avec le bouton droit, puis cliquez sur Coller les styles.
- Pour coller le CSS dans le code, placez le point d’insertion à l’endroit requis, cliquez avec le bouton droit, puis cliquez sur Coller.

Pour utiliser des conseils de code pour extraire le CSS, procédez comme suit :

Ouvrez une source CSS associée à votre document ou passez en mode Code pour un document HTML.
Dans le panneau Extract, cliquez sur le fichier PSD requis, puis sur l’élément requis dans la composition.
Dans le document, placez le point d’insertion à l’emplacement requis dans le code.
Commencez à saisir le nom d’une propriété CSS pour afficher les conseils de code contenant les propriétés CSS de l’élément sélectionné dans la composition PSD. Cliquez sur la propriété CSS requise pour l’insérer dans le code.

Conseils de code avec une propriété CSS d’un élément dans un fichier PSD
Pour extraire plusieurs propriétés CSS, sélectionnez les propriétés requises dans le panneau contextuel Extract. Cliquez ensuite sur Insérer la sélection dans les conseils de code.

Insertion par lots de propriétés CSS

Copie de texte depuis des fichiers PSD

Le texte ou le contenu dans vos compositions PSD peuvent être insérés dans votre page web en un simple clic. Pour copier le texte de votre composition PSD dans le panneau Extract, sélectionnez un élément de texte, puis cliquez sur Copier le texte. Le texte est copié dans le presse-papiers. Vous pouvez ensuite coller le texte où vous le souhaitez.

Option Copier le texte dans le panneau Extract

Remarque :

Après avoir extrait le texte, vous pouvez extraire des propriétés, telles que la police et les couleurs associés au texte. Pour plus d’informations, consultez la section Extraction de polices, couleurs et dégradés à partir des fichiers PSD.

Extraction d’images depuis des fichiers PSD

Vous pouvez simplement faire glisser un calque de vos compositions PSD, depuis le panneau Extract vers un endroit précis dans la vue En direct de votre page web. Les aides visuelles du mode En direct, telles que les icônes Guides en direct et DOM, vous aident à positionner les éléments de votre choix. Quand vous marquez une pause de quelques instants avant de déposer un élément, l’icône DOM (</>) apparaît. Lorsque vous passez la souris sur cette icône, la structure DOM s’affiche et vous pouvez y déposer l’élément. Si vous préférez passer par du code, vous pouvez utiliser les conseils de code contextuels et extraire des images. Les conseils de code permettent d’extraire les couleurs et les dégradés en tant qu’images.

Remarque :

Si votre fichier PSD contient plusieurs plans de travail, chacun d’entre eux est représenté par un dossier dans le volet Calques. Vous pouvez développer ou réduire chaque dossier pour afficher ou masquer son contenu. Pour zoomer sur un plan de travail donné, cliquez simplement sur son nom. Pour dézoomer, cliquez n’importe où en dehors du plan de travail, puis cliquez sur AJUSTER.

Avant d’insérer l’image extraite, Dreamweaver affiche le nom de l’image, nom que vous pouvez modifier. Par défaut, l’image est enregistrée dans le dossier racine du site. Si vous souhaitez enregistrer l’image dans un emplacement personnalisé, vous pouvez inclure le chemin d’accès complet au répertoire avec le nom.

Remarque : si vous extrayez une image dans un document qui ne fait partie d’aucun site défini, l’image est extraite dans le répertoire dans lequel se trouve le document. Pour les documents non enregistrés, vous êtes invité à d’abord enregistrer le document.

Vous pouvez également enregistrer l’image en local et y refaire appel plus tard pour l’intégrer à votre page web. En outre, si vous créez un site web réactif, vous pouvez enregistrer plusieurs versions d’une image, avec différentes résolutions, d’un simple clic.

Dans le panneau Extract, cliquez sur le fichier PSD à partir duquel télécharger les images.
Cliquez sur l’image appropriée dans le fichier PSD.

Remarque :

Utilisez l’onglet Calques et la liste déroulante Composition de calques du panneau Extract pour afficher ou masquer les images dans la composition PSD. Si une image comprend plusieurs calques, vous pouvez choisir le calque de l’image à extraire.

Notez que les conseils de code s’affichent en mode Code sur la droite de l’espace de travail.
Pour importer plusieurs images, maintenez enfoncée la Maj ou la touche Commande, puis cliquez sur les images concernées. Les images sélectionnées sont extraites comme une seule image.
Effectuez l’une des actions suivantes :
- Dans la fenêtre contextuelle qui s’affiche lorsque vous cliquez sur l’image, cliquez sur . Indiquez le chemin, le nom et le format du fichier, ainsi que le facteur d’échelle (si nécessaire). Ensuite, effectuez l’une des actions suivantes :
  
  Cliquez sur Enregistrer pour enregistrer l’image à la résolution 1x. Pour redimensionner l’image, sélectionnez l’option Échelle et indiquez le facteur d’échelle.
  
  Cliquez sur Enregistrer plusieurs éléments pour enregistrer plusieurs versions de l’image, dans différentes résolutions. Il n’est pas impératif que le fichier PSD contienne ces versions : Dreamweaver peut enregistrer l’image dans différentes résolutions au moment de l’extraction.
Vous pouvez indiquer les résolutions requises et le dossier de sortie correspondant dans Préférences.
Extraction de l’image à l’aide de l’icône Extraire l’actif
- Faites glisser l’image de votre document en mode En direct. En mode En direct, les guides en direct s’affichent pour vous aider à positionner l’image.
Lorsque vous déposez l’image, Dreamweaver affiche le nom de l’image. Vous pouvez non seulement modifier le nom de l’image, mais aussi son extension ; appuyez ensuite sur Entrée pour enregistrer l’image. Par défaut, l’image est enregistrée dans le dossier racine du site. Pour enregistrer l’image dans un emplacement personnalisé, entrez le chemin avec le nom.
Option de modification du nom et de l’extension du fichier lorsque vous faites glisser une image depuis le panneau Extract
- Lorsque vous cliquez sur l’image, les conseils de code contextuels sous Dreamweaver sont renseignés. Dans le mode Code de votre document HTML ou dans le document CSS, placez le curseur au point d’insertion. Après avoir saisi le nom de l’image d’arrière-plan ou la balise <img>, le nom de l’image sélectionnée apparaît dans les conseils de code. Sélectionnez l’image, modifiez le nom et l’extension si nécessaire, puis appuyez sur Entrée.
Par défaut, l’image est enregistrée dans le dossier racine du site. Pour enregistrer l’image dans un emplacement personnalisé, entrez le chemin de fichier personnalisé avec le nom.
Extraction d’images à l’aide des conseils de code

Extraction de mesures dans les fichiers PSD

À l’aide du panneau Extract, vous pouvez facilement afficher et extraire la valeur de la mesure entre deux éléments dans la composition PSD.

Dans le panneau Extract du fichier PSD, cliquez sur les éléments requis en maintenant la touche Maj ou la touche Commande enfoncée.

Le panneau Extract affiche les distances horizontale et verticale entre les deux éléments.

Mesures dans le panneau Extract

Remarque :

Pour afficher les mesures sous forme de pourcentages, cliquez sur un élément et choisissez Pourcentage.
Cliquez sur la valeur requise pour la copier dans le Presse-papiers.
Collez cette valeur où vous le souhaitez, par exemple, dans les propriétés CSS de CSS Designer ou dans votre code.

Extraction de polices, couleurs et dégradés à partir des fichiers PSD

À l’aide du panneau Extract, vous pouvez extraire des propriétés CSS des polices, des couleurs ou des dégradés utilisés dans votre composition PSD.

Dans le panneau Extract, cliquez sur Styles.
Pour extraire des polices, procédez comme suit dans la section Polices.
1. Développez le type de la police requise.
  
  Pour afficher plus d’informations sur la police, cliquez sur l’icône Adobe Fonts ().
2. Cliquez sur le format et la taille à copier puis, dans la fenêtre contextuelle qui s’affiche, cliquez sur Copier CSS. Extrayez les balises des éléments de texte qui utilisent la police, le format et la taille sur lesquels vous avez cliqué.
  
  Remarque :
  
  Vous pouvez modifier l’unité de la police en « em » ou « rem » dans les préférences Extract (Préférences > Extract). Cliquez sur Recharger PSD dans le menu déroulant situé dans l’angle supérieur droit du panneau Extract pour voir les modifications.
  
  Extraction de polices
3. Collez le CSS à l’endroit requis, par exemple, dans le code ou dans CSS Designer.
Pour extraire des couleurs, procédez comme suit dans la section Couleurs :
1. Cliquez sur la nuance de couleur requise. Extrayez les balises les éléments qui utilisent la couleur sélectionnée.
  
  Remarque : vous pouvez également sélectionner une autre couleur de la composition PSD à l’aide du sélecteur de couleurs.
2. Dans la fenêtre contextuelle qui s’affiche lorsque vous cliquez sur la nuance de couleur, sélectionnez le modèle de couleur requis (RVB, hexadécimal ou TSI), puis copiez (Ctrl+c ; Cmd+c) la valeur chromatique.
  
  Extraction de couleurs
3. Collez la valeur chromatique là où vous le souhaitez, par exemple, dans le code ou dans CSS Designer.
Pour extraire les dégradés, cliquez sur une nuance de dégradé dans la section Dégradés. Dans la fenêtre contextuelle qui s’affiche, cliquez sur Copier CSS. Collez le CSS où requis, par exemple, dans le code ou dans CSS Designer.

Les préfixes fournisseur sélectionnés dans les préférences (Préférences > Styles CSS) sont également collés avec les dégradés. Si vous extrayez un dégradé radial, le CSS correspondant est inséré sans préfixe fournisseur, les dégradés radiaux n’étant pas pris en charge.

Extraction de dégradé