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.
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.
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é.
-
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.
-
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
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.
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.
Remarque :
Vous pouvez ouvrir dans Dreamweaver un fichier HTML Fireworks exporté puis copier et coller les sections appropriées dans un autre document 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).
-
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.
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.
-
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.
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.
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.
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
-
-
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.
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.
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.
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.
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.
-
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.
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.
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.
Placer
Copie la version locale du fichier sur le site distant 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.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.