Guide d'utilisation Annuler

Extract dans Dreamweaver

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

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

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
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 :
  1. Dans le panneau Extract, cliquez sur Charger un fichier PSD.
  2. Sélectionnez Options dans la fenêtre du Finder et choisissez *.psd dans la liste déroulante qui s’affiche.
  3. 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.

  1. Cliquez sur Édition > Préférences (Win) ou Dreamweaver > Préférences (Mac).

  2. Sélectionnez Extract dans la liste Catégorie.

  3. (Facultatif) Modifiez le format par défaut dans lequel les images doivent être extraites.

    Format d’image extrait dans Dreamweaver CC
    Format de l’image extraite

  4. (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
    Extract pour les périphériques

  5. (Facultatif) Cliquez sur Vider la mémoire cache pour supprimer les données mises en mémoire cache concernant l’utilisation d’Extract.

  6. Cliquez sur Appliquer, puis fermez la boîte de dialogue Préférences.

  7. Pour afficher les modifications dans le panneau Extract, rechargez le PSD (menu déroulant > Recharger PSD).

    Option Recharger PSD dans le panneau Extract
    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.

  1. 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.

  2. 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
    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. 

  3. 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 :

  1. Ouvrez une source CSS associée à votre document ou passez en mode Code pour un document HTML.

  2. Dans le panneau Extract, cliquez sur le fichier PSD requis, puis sur l’élément requis dans la composition.

  3. Dans le document, placez le point d’insertion à l’emplacement requis dans le code. 

  4. 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
    Conseils de code avec une propriété CSS d’un élément dans un fichier PSD

  5. 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 dans Dreamweaver CC
    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
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.

  1. Dans le panneau Extract, cliquez sur le fichier PSD à partir duquel télécharger les images.

  2. 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. 

  3. 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.

  4. 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
    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
    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 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. 

  1. 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
    Mesures dans le panneau Extract

    Remarque :

    Pour afficher les mesures sous forme de pourcentages, cliquez sur un élément et choisissez Pourcentage.

  2. Cliquez sur la valeur requise pour la copier dans le Presse-papiers.

  3. 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.

  1. Dans le panneau Extract, cliquez sur Styles.

  2. 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
      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
      Extraction de couleurs

    3. Collez la valeur chromatique là où vous le souhaitez, par exemple, dans le code ou dans CSS Designer.

  3. 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é
    Extraction de dégradé

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?