Exportez votre image depuis Fireworks vers le dossier du site local défini dans Dreamweaver.
Dernière mise à jour le
|
S'applique également à Adobe Fireworks CS5
Utilisation de Fireworks avec Dreamweaver
Adobe Dreamweaver® et Fireworks reconnaissent et partagent un grand nombre de modifications possibles dans un même fichier, y compris la modification des liens, des images interactives (cartes-images) et des tranches de table. Par ailleurs, ces deux applications fonctionnent avec un flux de production rationalisé pour l’édition, l’optimisation et l’insertion de fichiers graphiques web dans des pages HTML.
Insertion d’images Fireworks dans des fichiers Dreamweaver
Lorsque vous insérez les fichiers JPEG de Fireworks dans Dreamweaver, la qualité du fichier est calculée de façon automatique. La valeur peut être de 79 pour certains fichiers.
Remarque :
Avant d’utiliser l’une de ces procédures, assurez-vous que Dreamweaver est sélectionné comme type HTML dans la boîte de dialogue Configuration HTML.
Insertion d’images Fireworks dans Dreamweaver à l’aide du panneau Fichiers
-
-
Ouvrez le document Dreamweaver, et assurez-vous qu’il est en mode Création.
-
Faites glisser l’image du panneau Fichiers vers le document Dreamweaver.
Insertion d’images Fireworks dans Dreamweaver à l’aide du menu Insertion
-
Placez le point d’insertion à l’endroit où vous voulez insérer l’image dans la fenêtre de document de Dreamweaver.
-
Procédez de l’une des manières suivantes :
Choisissez Insertion > Image.
Cliquez sur le bouton Images: Image dans la catégorie Commun de la barre d’insertion.
-
Accédez à l’image exportée depuis Fireworks, puis cliquez sur OK.
Création de fichiers Fireworks à partir d’espaces réservés Dreamweaver
Les espaces réservés aux images vous permettent de tester différentes mises en page web avant de créer l’illustration définitive destinée à votre page. Utilisez-les pour spécifier la taille et la position des images Fireworks que vous aurez à placer dans Dreamweaver.
Lorsque vous créez une image Fireworks à partir d’un espace réservé pour l’image Dreamweaver, un document Fireworks est créé avec une zone de travail ayant les dimensions de l’espace réservé sélectionné.
Remarque :
Tous les comportements appliqués dans Fireworks sont conservés lors de l’exportation vers Dreamweaver. De même, la plupart des comportements Dreamweaver appliqués aux espaces réservés pour les images sont également conservés lorsque vous les lancez et les modifiez dans Fireworks. Il existe cependant une exception : les survols séparés appliqués aux espaces réservés pour les images dans Dreamweaver ne sont pas conservés lorsque vous les ouvrez et les modifiez dans Fireworks.
Lorsque vous fermez la session Fireworks et revenez dans Dreamweaver, le nouveau graphique Fireworks que vous avez créé remplace l’espace réservé pour l’image initialement sélectionné.
-
Dans Dreamweaver, enregistrez le document HTML souhaité dans un emplacement du dossier de site Dreamweaver.
-
Placez le point d’insertion à l’emplacement de votre choix dans le document, puis procédez de l’une des manières suivantes :
Choisissez Insertion > Objets image > Espace réservé pour l’image.
Cliquez sur le menu contextuel Images : Image dans la catégorie Commun de la barre Insérer, puis sélectionnez Espace réservé pour l’image.
-
Entrez le nom, les dimensions, la couleur et le texte secondaire de l’espace réservé pour l’image.
Un espace réservé pour l’image est inséré dans le document Dreamweaver.
Espace réservé pour l'image 
Espace réservé pour l’image sur DW Remarque :L’entrée de menu Espace réservé pour l’image n’est disponible que dans les versions antérieures à la version 13.0 de Dreamweaver.
-
Procédez de l’une des manières suivantes :
Sélectionnez l’espace réservé pour l’image, puis cliquez sur Créer dans l’inspecteur des propriétés.
Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, cliquez deux fois sur l’espace réservé pour l’image.
Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS), puis cliquez sur Création d’image dans Fireworks.
Fireworks s’ouvre avec un document vide exactement de la même taille que l’espace réservé pour l’image. La partie supérieure de la fenêtre Document indique que vous modifiez une image transférée depuis Dreamweaver.
-
Créez une image dans Fireworks, puis cliquez sur Terminé.
-
Spécifiez un nom et un emplacement pour le fichier PNG source.
-
Spécifiez un nom pour les fichiers d’image exportés.
Il s’agit des fichiers d’image qui s’affichent dans Dreamweaver.
-
Spécifiez un emplacement pour le ou les fichiers d’image exportés dans le dossier de site Dreamweaver, puis cliquez sur Enregistrer.
Lorsque vous revenez dans Dreamweaver, l’espace réservé pour l’image initialement sélectionné est remplacé par la nouvelle image ou le nouveau tableau Fireworks.
Espace réservé pour l'image remplacé par la nouvelle image Fireworks
Insertion de code HTML Fireworks dans Dreamweaver
L’exportation de fichiers Fireworks vers Dreamweaver s’effectue en deux étapes. Dans Fireworks, exportez directement des fichiers vers un dossier de site Dreamweaver. Cette opération génère un fichier HTML et les fichiers d’image associés dans l’emplacement que vous définissez. Placez ensuite le code HTML dans Dreamweaver à l’aide de la fonction Insérer du HTML Fireworks.
-
Exportez le document Fireworks HTML au format HTML.
-
Dans Dreamweaver, enregistrez votre document dans un site défini.
-
Placez le point d’insertion dans le document, à l’endroit où vous voulez insérer le code HTML.
-
Procédez de l’une des manières suivantes :
Choisissez Insertion > Objets image > HTML Fireworks.
Cliquez sur le menu contextuel Images : Image dans la catégorie Commun de la barre Insérer, puis sélectionnez HTML Fireworks.
-
Dans la boîte de dialogue qui s’affiche, cliquez sur Parcourir pour sélectionner le fichier HTML Fireworks souhaité.
-
(Facultatif) Cliquez sur Supprimer fichier après insertion pour déplacer le fichier HTML vers la Corbeille (Windows) ou le supprimer définitivement (Mac OS) une fois l’opération terminée.
Cette option n’affecte pas le fichier source PNG associé au fichier HTML.
-
Cliquez sur OK pour insérer le code HTML, avec les images, les tranches et le code JavaScript qui lui sont associés, dans le document Dreamweaver.
Copie de code HTML Fireworks pour une utilisation dans Dreamweaver
Lorsque vous copiez du code HTML Fireworks dans le Presse-papiers, l’ensemble du code HTML et JavaScript associé au document Fireworks est copié dans le document Dreamweaver, les images sont exportées vers un emplacement spécifié, et Dreamweaver met à jour le code HTML avec des liens relatifs au document vers ces images.
Remarque :
Cette méthode ne fonctionne qu’avec Dreamweaver. Elle ne fonctionne pas avec les autres éditeurs HTML.
-
Copiez le code HTML dans le Presse-papiers depuis Fireworks, puis collez-le directement dans un document Dreamweaver.
Remarque :
Vous pouvez ouvrir dans Dreamweaver un fichier HTML Fireworks exporté puis copier et coller les sections appropriées dans un autre document Dreamweaver.
Mise à jour du code HTML Fireworks exporté dans Dreamweaver
Remarque :
Roundtrip HTML présente de nombreux avantages si vous utilisez du code HTML exporté dans Dreamweaver (voir la section A propos de Roundtrip HTML).
-
Modifiez le document PNG dans Fireworks.
-
Sélectionnez la commande Fichier > Mettre à jour le code HTML.
-
Recherchez le fichier Dreamweaver contenant le code HTML à mettre à jour, puis cliquez sur Ouvrir.
-
Accédez au dossier de destination des fichiers d’image mis à jour, puis cliquez sur Ouvrir.
Fireworks met à jour le code HTML et JavaScript dans le document Dreamweaver. Fireworks exporte également les images mises à jour associées au code HTML et les place dans le dossier de destination indiqué.
Remarque :Si Fireworks ne trouve pas de code HTML correspondant à mettre à jour, vous pouvez insérer du nouveau code HTML dans le document Dreamweaver. La section JavaScript du nouveau code est placée au début du document, et le tableau HTML ou le lien vers l’image est inséré à la fin.
Exportation de fichiers Fireworks vers des bibliothèques Dreamweaver
Un élément de bibliothèque est une portion de fichier HTML située dans un dossier intitulé Bibliothèque au sein du dossier racine de votre site. Les éléments de bibliothèque s’affichent sous forme de catégorie dans le panneau Actifs de Dreamweaver. Dans Dreamweaver, les éléments de bibliothèque simplifient les processus de modification et de mise à jour des composants de site web fréquemment utilisés. Vous pouvez faire glisser un élément de bibliothèque (fichier portant l’extension .lbi) depuis le panneau Actifs vers n’importe quelle page de votre site web.
Vous ne pouvez pas modifier un élément de bibliothèque directement dans le document Dreamweaver. Vous ne pouvez modifier que l’élément de bibliothèque maître. Ensuite, vous pouvez utiliser Dreamweaver pour mettre à jour toutes les copies de cet élément dans l’ensemble de votre site web. Les éléments de bibliothèque Dreamweaver ressemblent à des symboles Fireworks ; les modifications apportées au document de bibliothèque maître (LBI) sont répercutées dans toutes les instances de bibliothèque de l’ensemble du site.
Remarque :
Les éléments de bibliothèque Dreamweaver ne prennent pas en charge les menus contextuels.
-
Choisissez Fichier > Exporter.
-
Sélectionnez Bibliothèque Dreamweaver dans le menu contextuel Exporter.
Sélectionnez ou créez un dossier intitulé Bibliothèque dans votre site Dreamweaver comme emplacement des fichiers. Le nom respecte la casse.
Remarque :Dreamweaver ne reconnaît pas le fichier exporté comme élément de bibliothèque s’il n’est pas enregistré dans le dossier Library.
-
Tapez un nom de fichier.
-
(Facultatif) Lorsque votre image comporte des tranches, sélectionnez les options correspondantes.
-
Sélectionnez Placer les images dans des sous-dossiers pour choisir un dossier distinct pour recevoir les images à enregistrer.
-
Cliquez sur Enregistrer.
Modification de fichiers Fireworks dans Dreamweaver
La fonction Roundtrip HTML s’intègre étroitement à Fireworks et à Dreamweaver. Elle permet d’effectuer des modifications dans une application et de les conserver dans une autre.
A propos de Roundtrip HTML
Fireworks reconnaît et conserve la plupart des types de modifications apportées à un document dans Dreamweaver (liens modifiés, cartes-images modifiées, texte et code HTML modifiés dans des tranches HTML et comportements partagés entre Fireworks et Dreamweaver). L’inspecteur des propriétés de Dreamweaver permet d’identifier les images, les tranches de table et les tableaux provenant de Fireworks.
Fireworks prend en charge la plupart des types de modification de Dreamweaver. Cependant, les principaux changements apportés à la structure d’un tableau dans Dreamweaver peuvent créer des différences inconciliables entre les deux applications. Si vous modifiez radicalement la structure d’un tableau, utilisez la fonction de lancement et de modification de Dreamweaver pour modifier le tableau dans Fireworks.
Remarque :
En s’appuyant sur la technologie Fireworks, Dreamweaver offre des fonctions d’édition d’images élémentaires permettant de retoucher les images sans avoir recours à une application de retouche d’images externe. Les fonctions de modification d’images de Dreamweaver s’appliquent uniquement aux formats de fichier JPEG et GIF.
Modification d’une image Fireworks placée dans Dreamweaver
Remarque :
Avant de modifier des graphiques Fireworks dans Dreamweaver, vous devez au préalable exécuter quelques tâches. Pour plus d’informations, reportez-vous à la section Définition des options de lancement et de modification.
-
Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur des propriétés.
-
Procédez de l’une des manières suivantes :
Sélectionnez l’image souhaitée. (L’inspecteur des propriétés identifie la sélection comme étant une image Fireworks et affiche le nom du fichier source PNG associé à cette image.) Dans l’inspecteur des propriétés, cliquez ensuite sur Modifier.
Tout en maintenant la touche Ctrl (Windows) ou Cmde (Mac OS) enfoncée, cliquez deux fois sur l’image à modifier.
Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Mac OS) sur l’image voulue, puis, dans le menu contextuel, cliquez sur Modifier avec Fireworks.
-
Lorsque le programme vous y invite, indiquez si vous désirez que le fichier source Fireworks de l’image placée soit ouvert.
-
Modifiez l’image dans Fireworks.
Les modifications appliquées sont conservées dans Dreamweaver.
-
Cliquez sur Terminé pour exporter l’image avec les paramètres d’optimisation actuels, mettre à jour le fichier GIF ou JPEG utilisé par Dreamweaver et enregistrer le fichier source PNG si un fichier source a été sélectionné.
Remarque :Lorsque vous ouvrez une image depuis le panneau Site de Dreamweaver, l’éditeur par défaut correspondant à ce type d’image ouvre le fichier. Cet éditeur est défini dans les préférences de Dreamweaver. Lorsque les images sont ouvertes depuis cet emplacement, Fireworks n’ouvre pas le fichier PNG d’origine. Pour utiliser les fonctions d’intégration de Fireworks, ouvrez les images dans la fenêtre Document de Dreamweaver.
Modification d’un tableau Fireworks placé dans Dreamweaver
Remarque :
Avant de modifier des tableaux Fireworks dans Dreamweaver, vous devez au préalable exécuter quelques tâches de lancement et de modification. Pour plus d’informations, reportez-vous à la section Définition des options de lancement et de modification.
-
Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur des propriétés.
-
Procédez de l’une des manières suivantes pour ouvrir le fichier PNG source dans la fenêtre de document :
Cliquez dans le tableau, puis sur la balise TABLE dans la barre d’état afin de sélectionner l’ensemble du tableau. (L’inspecteur des propriétés identifie la sélection comme étant un tableau Fireworks et affiche le nom du fichier source PNG associé à ce tableau.) Dans l’inspecteur des propriétés, cliquez ensuite sur Modifier.
Sélectionnez une image dans le tableau, puis cliquez sur Modifier dans l’inspecteur des propriétés.
Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS) sur l’image, puis, dans le menu contextuel, cliquez sur Modifier avec Fireworks.
-
Apportez les modifications dans Fireworks.
Dreamweaver reconnaît et conserve toutes les modifications apportées au tableau dans Fireworks.
-
Une fois le tableau modifié, cliquez sur Terminé dans la fenêtre de document.
Cette opération exporte les fichiers HTML et des tranches d’images du tableau en utilisant les paramètres d’optimisation en cours, met à jour le tableau placé dans Dreamweaver et enregistre le fichier source PNG.
Remarque :Vous pouvez obtenir un message d’erreur Dreamweaver si vous imbriquez un autre tableau dans le tableau original généré par Fireworks, puis essayez de le modifier à l’aide de Roundtrip dans Dreamweaver. Pour plus d’informations, consultez la note technique (TechNote) 19231 sur le site web d’Adobe.
A propos des comportements de Dreamweaver pris en charge et non pris en charge
Si un seul graphique Fireworks non découpé est inséré dans un document Dreamweaver et qu’un comportement Dreamweaver est appliqué, une tranche se trouve sur le graphique lorsqu’il est ouvert et modifié dans Fireworks. La tranche n’est pas visible immédiatement, car les tranches sont désactivées automatiquement lorsque vous ouvrez et modifiez un graphique unique non découpé auquel vous appliquez des comportements Dreamweaver. Pour afficher la tranche, activez sa visibilité dans le calque web du panneau Calques.
Dans Fireworks, lorsque vous affichez les propriétés d’une tranche à laquelle est associé un comportement Dreamweaver, la zone de texte Lien de l’inspecteur des propriétés peut afficher javascript:;. Vous pouvez supprimer ce texte sans risques. Vous pouvez l’écraser pour entrer une URL si nécessaire et le comportement reste intact lorsque vous revenez dans Dreamweaver.
Lorsque vous utilisez Roundtrip HTML depuis Dreamweaver, Fireworks prend en charge les formats de fichiers côté serveur, tels que CFM et PHP.
Dreamweaver prend en charge tous les comportements Fireworks, y compris ceux nécessaires aux survols et aux boutons.
Remarque :
les éléments de bibliothèque Dreamweaver ne prennent pas en charge les menus contextuels.
Fireworks prend en charge les comportements de Dreamweaver suivants lors d’une session de lancement et de modification :
Survol simple
Permutation d’images
Restauration de permutation d’images
Définition du texte de la barre d’état
Définition de l’image de la barre de navigation
Menu contextuel
Remarque :
Fireworks ne prend pas en charge les comportements non natifs, y compris les comportements côté serveur.
Optimisation des images et animations Fireworks placées dans Dreamweaver
Modification des paramètres d’optimisation d’une image Fireworks placée dans Dreamweaver
-
Dans Dreamweaver, sélectionnez l’image, puis procédez de l’une ou des deux manières suivantes :
Sélectionnez la commande Commandes > Optimiser l’image.
Cliquez sur le bouton Optimiser de l’inspecteur des propriétés.
Cliquez avec le bouton droit de la souris (Windows) ou tout en maintenant la touche Ctrl enfoncée (Mac OS), puis, dans le menu contextuel, sélectionnez Optimiser dans Fireworks.
-
Si un message vous y invite, indiquez si vous souhaitez ouvrir le fichier source Fireworks de l’image placée.
-
Apportez les modifications dans la boîte de dialogue Aperçu avant exportation :
Pour modifier les paramètres d’optimisation, cliquez sur l’onglet Options.
Pour modifier la taille et la zone de l’image exportée, cliquez sur l’onglet Fichier. Si vous changez les dimensions de l’image dans Fireworks, vous devez redéfinir la taille de l’image dans l’inspecteur des propriétés lorsque vous revenez dans Dreamweaver.
Pour modifier les paramètres d’animation de l’image, cliquez sur l’onglet Animation.
-
Une fois l’image modifiée, cliquez sur OK pour exporter l’image, la mettre à jour dans Dreamweaver et enregistrer le fichier PNG.
Si vous avez modifié le format de l’image, le vérificateur de liens de Dreamweaver vous invite à mettre à jour les références à cette image.
Modification des paramètres d’animation
Dans le cadre de l’ouverture et de l’optimisation d’un fichier GIF animé, vous pouvez modifier les paramètres de l’animation. Les options d’animation de la boîte de dialogue Aperçu avant exportation sont identiques à celles du panneau Etats de Fireworks.
Remarque :
Pour modifier des éléments graphiques dans une animation Fireworks, vous devez ouvrir et modifier l’animation Fireworks.
Définition des options de lancement et de modification
Pour utiliser efficacement la fonction Roundtrip HTML, vous devez exécuter préalablement quelques tâches, notamment définir Fireworks comme éditeur d’images principal dans Dreamweaver, spécifier les préférences de lancement et de modification dans Fireworks et définir un site local dans Dreamweaver.
Définition de Fireworks comme l’éditeur d’images externe principal pour Dreamweaver
Dans les préférences de Dreamweaver, il est possible d’indiquer les applications spécifiques qui doivent être automatiquement démarrées pour modifier des types de fichiers spécifiques. Pour utiliser les fonctions de lancement et de modification de Fireworks, vérifiez que Fireworks est bien désigné dans Dreamweaver comme éditeur principal pour les fichiers GIF, JPEG et PNG.
Remarque :
Vous n’avez besoin de définir cette préférence que s’il vous est difficile de démarrer Fireworks à partir de Dreamweaver.
-
Dans Dreamweaver, choisissez Edition > Préférences, puis sélectionnez Types de fichiers/Editeurs.
-
Dans la liste Extensions, sélectionnez une extension (.gif, .jpg ou .png) pour le nom du fichier d’image web.
-
Dans la liste Editeurs, choisissez l’option Fireworks. Si Fireworks ne se trouve pas dans la liste, cliquez sur le bouton Plus (+), recherchez l’application Fireworks sur votre disque dur, puis cliquez sur Ouvrir.
Préférences dans Dreamweaver -
Cliquez sur Rendre Principal.
-
Répétez les étapes 2 à 4 pour définir Fireworks comme éditeur principal pour les autres types de fichiers d’image web.
Définition des préférences de lancement et de modification pour les fichiers sources Fireworks
Les préférences de lancement et de modification Fireworks permettent de définir la manière dont les fichiers sources PNG sont traités lorsque vous ouvrez des fichiers Fireworks depuis une autre application.
Dreamweaver reconnaît les préférences de lancement et de modification Fireworks uniquement lorsque vous ouvrez et optimisez une image qui ne fait pas partie d’un tableau Fireworks et qui ne contient pas de chemin de Design Note correct vers un fichier PNG source. Dans tous les autres cas, y compris dans les cas de lancement et de modification d’images Fireworks, Dreamweaver ouvre automatiquement le fichier source PNG ; si Dreamweaver ne trouve pas l’emplacement de ce fichier, un message vous invite à le spécifier.
-
Dans Fireworks, choisissez Edition > Préférences (Windows) ou Fireworks > Préférences (Mac OS).
-
Cliquez sur la catégorie Lancer et modifier, puis définissez les options comme vous le souhaitez.
Pour plus d’informations, reportez-vous à la section Préférences de lancement et de modification.
A propos des Design Notes et des fichiers sources
Lorsque vous exportez vers un site Dreamweaver un fichier Fireworks à partir d’un fichier source PNG enregistré, Fireworks crée une Design Note (note de conception) contenant des informations sur le fichier PNG. Lorsque vous ouvrez et modifiez une image Fireworks depuis Dreamweaver, ce dernier utilise la Design Note correspondante pour localiser le fichier source PNG pour cette image. Pour obtenir de meilleurs résultats, enregistrez toujours votre fichier source PNG Fireworks ainsi que les fichiers exportés dans un site Dreamweaver. Tout autre développeur du site est ainsi en mesure de trouver le fichier source PNG lorsqu’il lance Fireworks à partir de Dreamweaver.
Transfert de fichiers de site à l’aide du bouton Gestion des fichiers
Le bouton Gestion des fichiers 
, situé dans la partie supérieure de la fenêtre de document, permet d’accéder facilement aux commandes de transfert de fichier. Utilisez ce bouton si votre document réside dans un dossier de site Dreamweaver et si le site a accès à un serveur distant. Pour permettre à Fireworks de reconnaître le dossier comme un site, utilisez la boîte de dialogue Gérer les sites de Dreamweaver pour définir le dossier cible (ou un dossier conteneur) comme dossier racine local du site.
Remarque :
Pour utiliser les options d’archivage et d’extraction de fichier de Fireworks, activez-les pour le site Dreamweaver contenant le document.
Acquérir
Copie la version distante du fichier sur le site local en remplaçant le fichier local par la copie distante.
Extraire
Extrait le fichier en remplaçant le fichier local par la copie distante.
Placer
Copie la version locale du fichier sur le site distant en remplaçant le fichier distant par la copie locale.
Archiver
Archive le fichier local en remplaçant le fichier distant par la copie locale.
Annuler l’extraction
Annule l’extraction du fichier local et l’archive en remplaçant le fichier local par la copie distante.
Remarque :
Les commandes Gestion de fichiers sont activées dans Fireworks uniquement si votre document réside dans un dossier de site Dreamweaver pour lequel un serveur distant est défini. Vous pouvez les utiliser uniquement pour des fichiers résidant sur des sites qui utilisent les méthodes de transport Local/Réseau et FTP. Vous ne pouvez pas transférer les fichiers des sites utilisant des méthodes de transport SFTP ou tierces comme SourceSafe, WebDAV et RDS du site distant vers Fireworks et inversement.
Accéder à votre compte