Guide d'utilisation Annuler

Utilisation de fichiers Photoshop dans Dreamweaver

Rechercher
  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

 

Comment fonctionne l’intégration de Photoshop sous Dreamweaver. Utilisez des objets dynamiques dans les workflows Photoshop et Dreamweaver.

À propos de l’intégration de Photoshop

Remarque :

Les workflows d’intégration de Photoshop ne sont plus disponibles à compter de la version 21.0 de Dreamweaver.

Vous pouvez insérer des fichiers d’image Photoshop (en format PSD) dans des pages web de Dreamweaver, puis les faire optimiser par Dreamweaver sous la forme d’images web (en formats GIF, JPEG et PNG). Dans ce cas, Dreamweaver insère l’image en tant qu’objet dynamique et conserve une connexion en direct avec le fichier PSD d’origine.

Vous pouvez également coller une image Photoshop à calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de Dreamweaver. Toutefois, lorsque vous effectuez un copier-coller à partir de Photoshop, aucune connexion en direct avec le fichier d’origine n’est conservée. Pour mettre à jour l’image, apportez les modifications dans Photoshop, puis utilisez de nouveau la fonction copier-coller.

Remarque :

Si vous employez souvent cette fonctionna lité d’intégration, il peut être utile de stocker les fichiers Photoshop sur votre site Dreamweaver, de manière à y accéder plus aisément. Dans ce cas, veillez à les voiler, de façon à éviter toute publication des actifs d’origine et tout transfert superflu entre le site local et le serveur distant.

Pour suivre un tutoriel consacré à l’intégration de Photoshop avec Dreamweaver, reportez-vous à la page Intégration de Dreamweaver avec Photoshop.

À propos des objets dynamiques et des flux de production entre Photoshop et Dreamweaver

Il existe deux principaux flux de production pour traiter les fichiers Photoshop dans Dreamweaver : le flux de production copier/coller et celui des objets dynamiques.

Flux de production copier/coller

Le flux de production copier/coller vous permet de sélectionner des tranches ou des calques dans un fichier Photoshop, puis de passer dans Dreamweaver pour en faire des images compatibles avec une utilisation sur le Web. Toutefois, si vous voulez mettre à jour le contenu ultérieurement, vous devez ouvrir le fichier Photoshop d’origine, effectuer vos modifications, copier de nouveau votre tranche ou votre calque dans le Presse-papiers, puis coller la tranche ou le calque mis à jour sous Dreamweaver. Ce flux de production est recommandé uniquement lorsque vous voulez insérer une partie d’un fichier Photoshop (par exemple, une section d’une composition) en tant qu’image sur une page Web.

Flux de production d’objets dynamiques

Lorsque vous travaillez sur des fichiers Photoshop entiers, Adobe recommande l’utilisation de ce flux de production. Sous Dreamweaver, un objet dynamique désigne une image placée sur une page web avec une connexion en ligne vers un fichier Photoshop (PSD) d’origine. En mode Création dans Dreamweaver, un objet dynamique est signalé par une icône située dans le coin supérieur gauche de l’image.

Objet dynamique

Lorsque l’image web (c’est-à-dire l’image de la page Dreamweaver) n’est pas synchronisée avec le fichier Photoshop d’origine, Dreamweaver détecte que le fichier d’origine a été mis à jour et affiche l’une des flèches de l’icône d’objet dynamique en rouge. Lorsque vous sélectionnez l’image Web en mode Création et que vous cliquez sur le bouton Mettre à jour depuis l’original dans l’inspecteur Propriétés, l’image se met à jour automatiquement avec tous les changements effectués dans le fichier Photoshop d’origine.

Lorsque vous utilisez le flux de production d’objets dynamiques, vous n’avez pas besoin d’ouvrir Photoshop pour mettre à jour une image Web. En outre, toute mise à jour d’objet dynamique sous Dreamweaver est non destructive. Cela signifie que vous pouvez modifier la version Web de l’image sur votre page tout en préservant l’intégrité de l’image Photoshop d’origine.

Vous pouvez également mettre à jour un objet dynamique sans sélectionner l’image Web en mode Création. Le panneau des actifs vous permet de mettre à jour tous les objets dynamiques, y compris les images susceptibles de ne pas pouvoir être sélectionnées dans la fenêtre de document (par exemple, les images d’arrière-plan CSS).

Paramètres d’optimisation d’image

Pour les flux de production copier/coller et d’objets dynamiques, vous pouvez spécifier des paramètres d’optimisation dans la boîte de dialogue Optimisation de l’image. Cette boîte de dialogue vous permet de spécifier le format de fichier et la qualité de l’image. Si vous copiez une tranche ou un calque ou que vous insérez un fichier Photoshop en tant qu’objet dynamique pour la première fois, Dreamweaver affiche cette boîte de dialogue pour vous aider à créer l’image Web.

Si vous copiez une mise à jour dans une tranche ou un calque, Dreamweaver se souvient des paramètres d’origine et recrée l’image Web avec ces paramètres. De même, lorsque vous mettez à jour un objet dynamique à l’aide de l’inspecteur Propriétés, Dreamweaver reprend les paramètres que vous avez utilisés lorsque vous avez inséré l’image pour la première fois. Vous pouvez à tout moment modifier les paramètres d’une image : il vous suffit de sélectionner l’image Web en mode Création, puis de cliquer sur le bouton Modifier les paramètres de l’image dans l’inspecteur Propriétés.

Stockage des fichiers Photoshop

Si vous avez inséré une image Web et que vous n’avez pas enregistré le fichier Photoshop d’origine sur votre site Dreamweaver, Dreamweaver reconnaît le chemin vers le fichier d’origine comme chemin de fichier local absolu (c’est le cas pour les flux de production copier/coller et d’objets dynamiques). Par exemple, si le chemin vers votre site Dreamweaver est C:\Sites\monSite et que votre fichier Photoshop se trouve sous C:\Images\Photoshop, Dreamweaver ne reconnaît pas le fichier d’origine comme faisant partie du site intitulé monSite. Cela pose des problèmes si vous voulez partager ce fichier Photoshop avec d’autres personnes, car Dreamweaver considère uniquement le fichier comme disponible sur un disque dur local spécifique.

Toutefois, si vous stockez le fichier Photoshop sur votre site, Dreamweaver établit un chemin lié au site vers le fichier. Les utilisateurs ayant accès au site pourront également établir le bon chemin vers le fichier, sous réserve que vous leur ayez aussi fourni le fichier d’origine à télécharger.

Pour suivre un tutoriel vidéo consacré à l’édition Roundtrip avec Photoshop, consultez la page Édition Roundtrip avec Photoshop.

Création d’un objet dynamique

Lorsque vous insérez une image Photoshop (fichier PSD) dans votre page, Dreamweaver crée un objet dynamique. Un objet dynamique est une image web qui conserve une connexion en direct avec l’image Photoshop d’origine. Lorsque vous mettez à jour l’image d’origine dans Photoshop, Dreamweaver vous permet de mettre à jour l’image dans Dreamweaver par simple clic sur un bouton.

  1. Dans Dreamweaver (mode Création ou Code), placez le point d’insertion sur la page, à l’endroit où vous voulez insérer l’image.

  2. Choisissez Insertion > Image.

    Remarque :

    Vous pouvez également tirer le fichier PSD sur la page, à partir du panneau Fichiers, si vous stockez vos fichiers Photoshop sur votre site Web. Dans ce cas, vous passerez l’étape suivante.

  3. Dans la boîte de dialogue Sélectionner la source de l’image, recherchez votre fichier d’image PSD Photoshop en cliquant sur le bouton Parcourir et en accédant à ce fichier.

  4. Dans la boîte de dialogue Optimisation de l’image qui s’affiche, ajustez les paramètres d’optimisation requis puis cliquez sur OK.

  5. Enregistrez le fichier d’image Web à un emplacement du dossier racine de votre site Web.

Dreamweaver crée l’objet dynamique sur la base des réglages d’optimisation sélectionnés, puis place une version web de l’image sur votre page. L’objet dynamique conserve une connexion en direct à l’image d’origine et vous signale quand les deux versions ne sont plus synchronisées.

Remarque :

si vous décidez, par la suite, de modifier les réglages d’optimisation d’une image placée sur vos pages, vous pouvez sélectionner cette image, cliquer sur le bouton Modifier les paramètres de l’image dans l’inspecteur Propriétés, puis apporter les modifications désirées dans la boîte de dialogue Optimisation de l’image. Les modifications apportées dans la boîte de dialogue Optimisation de l’image sont appliquées de façon non destructrice. Dreamweaver ne modifie jamais le fichier Photoshop d’origine et recrée toujours l’image web sur la base des données d’origine.

Pour suivre un tutoriel vidéo consacré à l’édition Roundtrip avec Photoshop, consultez la page Édition Roundtrip avec Photoshop.

Mise à jour d’un objet dynamique

Si vous modifiez le fichier Photoshop auquel votre objet dynamique est lié, Dreamweaver vous informe que l’image web n’est plus synchronisée avec l’original. Sous Dreamweaver, les objets dynamiques sont indiqués par la présence d’une icône dans le coin supérieur gauche de l’image. Lorsque l’image web sous Dreamweaver est synchronisée avec le fichier Photoshop d’origine, les deux flèches de l’icône sont vertes. Lorsque l’image Web n’est plus synchronisée avec le fichier Photoshop d’origine, l’une des flèches de l’icône devient rouge.

  1. Pour mettre à jour un objet dynamique à l’aide du contenu actuel du fichier Photoshop d’origine, sélectionnez cet objet dans la fenêtre de document, puis cliquez sur le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés.

Remarque :

Il n’est pas nécessaire que Photoshop soit installé pour que vous puissiez procéder à la mise à jour à partir de Dreamweaver.

Mise à jour de plusieurs objets dynamiques

Vous pouvez mettre à jour plusieurs objets dynamiques simultanément à l’aide du panneau Actifs. Le panneau Actifs vous permet également de visualiser les objets dynamiques qu’il peut être impossible de sélectionner dans la fenêtre de document (par exemple une image d’arrière-plan CSS).

  1. Dans le panneau Fichiers, cliquez sur l’onglet Actifs pour visualiser les actifs du site.

  2. Assurez-vous que l’affichage Images est bien activé. S’il ne l’est pas, cliquez sur le bouton Images.

  3. Sélectionnez chaque actif d’image dans le panneau Actifs. Lorsque vous sélectionnez un objet dynamique, son icône est visible dans le coin supérieur gauche de l’image. Les images ordinaires ne comportent pas cette icône.
  4. Pour chaque objet dynamique à mettre à jour, cliquez sur le nom de fichier à l’aide du bouton droit, puis choisissez Mettre à jour depuis l’original. Vous pouvez également sélectionner plusieurs noms de fichier en cliquant dessus tout en maintenant la touche Ctrl enfoncée, de manière à les mettre à jour ensemble.
Remarque :

Il n’est pas nécessaire que Photoshop soit installé pour que vous puissiez procéder à la mise à jour à partir de Dreamweaver.

Redimensionnement d’un objet dynamique

Vous pouvez redimensionner un objet dynamique dans la fenêtre de document comme vous le feriez pour n’importe quelle autre image.

  1. Pour redimensionner l’image, sélectionnez l’objet dynamique dans la fenêtre de document, puis tirez les poignées de redimensionnement. Vous pouvez préserver les proportions de largeur et de hauteur en maintenant la touche Maj enfoncée tout en tirant les poignées.

  2. Cliquez sur le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés.

    Lorsque vous mettez à jour l’objet dynamique, l’image Web est de nouveau rendue, de manière non destructive, sur la base du contenu actuel du fichier d’origine ainsi que des paramètres d’optimisation d’origine.

Modification du fichier Photoshop d’origine d’un objet dynamique

Lorsque vous avez créé un objet dynamique sur votre page Dreamweaver, vous pouvez modifier le fichier PSD d’origine dans Photoshop. Après avoir apporté des modifications dans Photoshop, vous pouvez aisément mettre à jour l’image web sous Dreamweaver.

Remarque :

Veillez à définir Photoshop comme éditeur d’images externe principal.

  1. Sélectionnez l’objet dynamique dans la fenêtre de document.

  2. Cliquez sur le bouton Modifier dans l’inspecteur Propriétés.

  3. Apportez les modifications requises dans Photoshop puis enregistrez le nouveau fichier PSD.

  4. Sous Dreamweaver, sélectionnez de nouveau l’objet dynamique, puis cliquez sur le bouton Mettre à jour depuis l’original.

Remarque :

si vous avez modifié la taille de l’image dans Photoshop, vous devez réinitialiser la taille de l’image web sous Dreamweaver. Dreamweaver met uniquement à jour l’objet dynamique sur la base du contenu du fichier Photoshop, et pas de sa taille. Pour synchroniser la taille d’une image web avec celle du fichier Photoshop d’origine, cliquez dessus à l’aide du bouton droit, puis choisissez Rétablir la taille selon original.

État des objets dynamiques

Le tableau suivant énumère les différents états des objets dynamiques.

Etat de l’objet dynamique

Description

Action conseillée

Images synchronisées.

L’image Web est synchronisée avec le contenu actuel du fichier Photoshop d’origine. Les attributs de largeur et de hauteur dans le code HTML correspondent aux dimensions de l’image Web.

Aucun

Actif d’origine modifié.

Le fichier Photoshop d’origine a été modifié après la création de l’image Web dans Dreamweaver.

Utilisez le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés pour synchroniser les deux images.

Les dimensions de l’image Web diffèrent de la largeur et de la hauteur HTML sélectionnées.

Les attributs de largeur et de hauteur dans le code HTML sont différents des dimensions de l’image Web que Dreamweaver a créée lors de l’insertion. Si les dimensions de l’image Web sont plus petites que les valeurs de largeur et de hauteur HTML sélectionnées, l’image peut sembler pixellisée.

Utilisez le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés pour recréer l’image Web à partir du fichier Photoshop d’origine. Dreamweaver utilise les valeurs de largeur et de hauteur HTML spécifiées pour recréer l’image.

Les dimensions de l’actif d’origine sont trop petites pour les valeurs de largeur et de hauteur HTML sélectionnées.

Les valeurs de largeur et de hauteur dans le code HTML sont supérieures aux dimensions du fichier Photoshop d’origine. Il se peut que l’image semble pixellisée.

Ne créez pas d’image Web dont les dimensions sont supérieures aux dimensions du fichier Photoshop d’origine.

Actif d’origine introuvable.

Dreamweaver ne trouve pas le fichier Photoshop d’origine spécifié dans la zone Original de l’inspecteur Propriétés.

Corrigez le chemin d’accès au fichier dans la zone Original de l’inspecteur Propriétés, ou déplacez le fichier Photoshop à l’emplacement spécifié actuellement.

Copier-coller d’une sélection à partir de Photoshop

Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la sélection dans votre page Dreamweaver sous la forme d’une image web. Vous pouvez copier un calque ou un groupe de calques pour une partie sélectionnée de l’image, ou encore copier une tranche de l’image. Toutefois, lorsque vous effectuez cette opération, Dreamweaver ne crée pas d’objet dynamique.

Remarque :

Bien que la fonctionnalité Mettre à jour depuis l’original ne soit pas disponible pour les images collées, vous pouvez ouvrir le fichier Photoshop d’origine et le modifier en sélectionnant l’image collée, puis en cliquant sur le bouton Modifier de l’inspecteur Propriétés.

  1. Dans Photoshop, effectuez l’une des opérations suivantes :
    • Copiez la totalité ou une partie d’un calque. Pour ce faire, utilisez l’outil Rectangle de sélection pour sélectionner la partie à copier, puis choisissez Édition > Copier. Cette opération ne copie que le calque actif correspondant à la zone sélectionnée dans le presse-papiers. Si vous avez défini des effets basés sur des calques, ils ne sont pas copiés.
    • Copiez et fusionnez plusieurs calques. Pour ce faire, employez l’outil Rectangle de sélection pour sélectionner la partie à copier, puis choisissez Edition > Copier avec fusion. Cette opération aplatit et copie tous les calques actifs et inférieurs de la zone sélectionnée dans le presse-papiers. Si des effets basés sur des calques sont associés à l’un de ces calques, ils sont copiés.
    • Copiez une tranche. Pour ce faire, sélectionnez la tranche à l’aide de l’outil Sélection de tranche, puis choisissez Edition > Copier. Cette opération aplatit et copie tous les calques actifs et inférieurs de la tranche dans le presse-papiers.
    Remarque :

    Vous pouvez choisir Sélection > Tout afin de sélectionner rapidement une image entière en vue de la copier.

  2. Dans Dreamweaver (mode Création ou Code), placez le point d’insertion sur la page, à l’endroit où vous voulez insérer l’image.

  3. Choisissez Edition > Coller.

  4. Dans la boîte de dialogue Optimisation de l’image, ajustez les paramètres d’optimisation requis puis cliquez sur OK.

  5. Enregistrez le fichier d’image Web à un emplacement du dossier racine de votre site Web.

Dreamweaver définit l’image conformément aux paramètres d’optimisation et en place une version web sur votre page. Les informations relatives à l’image, comme l’emplacement du fichier PSD d’origine, sont enregistrées dans une Design Note, que vous ayez ou non activé les Design Notes pour votre site. La Design Note vous permet de revenir au fichier Photoshop d’origine, afin d’y apporter des modifications, à partir de Dreamweaver.

Modification d’images collées

Après avoir copié des images de Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD d’origine dans Photoshop. Lorsque vous utilisez le flux d’activités copier/coller, Adobe recommande de toujours apporter vos modifications au fichier PSD d’origine (et non à l’image web), puis à effectuer un nouveau copier/coller, de façon à conserver une source unique.

Remarque :

Assurez-vous que Photoshop est bien défini comme l’éditeur principal pour le type de fichier à modifier.

  1. Dans Dreamweaver, sélectionnez une image Web créée à l’origine dans Photoshop, puis effectuez l’une des actions suivantes :
    • Cliquez sur le bouton Modifier dans l’inspecteur Propriétés de l’image.
    • Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh) lorsque vous double-cliquez sur le fichier.
    • Cliquez sur l’image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), choisissez Modifier l’original avec dans le menu contextuel, puis choisissez Photoshop.
    Remarque :

    Ce principe suppose que Photoshop soit défini comme éditeur d’image externe principal pour les fichiers d’image PSD. Il peut également être utile de définir Photoshop comme éditeur par défaut pour les fichiers de type JPEG, GIF et PNG.

  2. Modifiez le fichier dans Photoshop.
  3. Revenez à Dreamweaver et collez l’image ou la sélection mise à jour dans votre page.

À tout moment, si vous souhaitez optimiser à nouveau l’image, vous pouvez la sélectionner, puis cliquer sur le bouton Modifier les paramètres de l’image.

Définition des options de la boîte de dialogue Optimisation de l’image

Lorsque vous créez un objet dynamique ou que vous collez une sélection depuis Photoshop, Dreamweaver affiche la boîte de dialogue Optimisation de l’image. Cette boîte de dialogue s’affiche également pour tout autre type d’image si vous la sélectionnez, puis que vous cliquez sur le bouton Modifier les paramètres de l’image de l’inspecteur Propriétés. Cette boîte de dialogue permet de définir les paramètres d’images Web et d’en afficher un aperçu, de façon à déterminer la combinaison optimale de couleurs, de compression et de qualité.

Une image Web est une image qui peut être affichée par tous les navigateurs Web modernes et qui possède la même apparence, quel que soit le système ou le navigateur utilisé. En règle générale, ces paramètres permettent de parvenir à un compromis entre qualité et taille de fichier.

Remarque :

les paramètres que vous sélectionnez n’influent que sur la version importée du fichier d’image. Le fichier PSD (Photoshop) ou PNG (Fireworks) d’origine reste toujours inchangé.

Paramètre prédéfini

Choisissez le paramètre prédéfini qui répond le mieux à vos besoins. La taille de fichier de l’image change en fonction du paramètre prédéfini choisi. Un aperçu instantané de l’image avec le paramètre appliqué s’affiche en arrière-plan.

Par exemple, pour les images qui doivent être affichées avec un haut degré de clarté, choisissez PNG24 pour photos (détails nets). Sélectionnez GIF pour images d’arrière-plan (motifs) si vous insérez un motif qui fait office d’arrière-plan de la page.


Lorsque vous sélectionnez un paramètre prédéfini, ses options configurables sont affichées. Si vous souhaitez personnaliser davantage les paramètres d’optimisation, modifiez les valeurs de ces options.

Logo Adobe

Accéder à votre compte

Liens rapides

Voir toutes vos formules Gérer vos formules

Mentions légales    |    Politique de confidentialité en ligne