Fireworks et Dreamweaver fonctionnent avec un flux de production rationalisé pour l’édition, l’optimisation et l’insertion de fichiers graphiques web dans des pages HTML.
La fonction n’est pas prise en charge dans Adobe Dreamweaver.
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procédures de modifications apportées aux fichiers, parmi lesquelles celles apportées aux liens, aux cartes graphiques, aux découpes de tables et bien plus. Réunies, les deux applications rationalisent les tâches de développement consistant à modifier, optimiser et importer des fichiers graphiques web dans des pages HTML.
Vous pouvez placer une image exportée de Fireworks directement dans un document Dreamweaver à l’aide de la commande Image (menu Insertion) ou vous pouvez créer une image Fireworks à partir d’un espace réservé à une image Dreamweaver.
Choisissez Insertion > Image.
Dans la catégorie Commun du panneau Insertion, cliquez sur l’icône Image ou faites-la glisser vers le document.
Si le fichier Fireworks ne se trouve pas dans le site Dreamweaver en cours d’utilisation, un message vous invitera à copier le fichier dans le dossier racine. Cliquez sur Oui.
Quand vous ouvrez ou éditez une image ou une découpe d’image qui fait partie d’une table Fireworks, Dreamweaver lance Fireworks, ouvrant ainsi un fichier PNG à partir duquel l’image ou la table a été exportée.
Ce principe suppose que Fireworks soit défini comme éditeur d’image externe principal pour les fichiers PNG. Par ailleurs, Fireworks est souvent défini comme éditeur par défaut pour les fichiers JPEG et GIF, bien qu’il puisse être utile de définir Photoshop comme éditeur par défaut pour ces types de fichiers.
Lorsque l’image fait partie d’une table Fireworks, vous pouvez ouvrir la table entière en vue de la modifier, pour autant que le commentaire <!--fw table--> figure dans le code HTML. Si le fichier PNG source a été exporté à partir de Fireworks vers un site Dreamweaver à l’aide du paramètre Document HTML et image du style Dreamweaver, le commentaire de la table Fireworks est automatiquement inséré dans le code HTML.
Lorsque vous sélectionnez une image exportée depuis Fireworks, l’inspecteur Propriétés identifie la sélection comme image ou table Fireworks et affiche le nom du fichier source PNG.
Dans l’inspecteur Propriétés, cliquez sur Modifier.
Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez sur l’image sélectionnée.
Cliquez sur l’image sélectionnée avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) et choisissez Modifier avec Fireworks dans le menu contextuel.
Si Fireworks ne trouve pas le fichier source, un message vous invite à le faire. Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont enregistrées dans le fichier source et le fichier exporté, sinon seul le fichier exporté est mis à jour.
Fireworks enregistre les modifications apportées à un fichier PNG, exporte l’image mise à jour (ou le document HTML et les images) et retourne à Dreamweaver. L’image ou la table mise à jour apparaît sous Dreamweaver.
Vous trouverez un tutoriel consacré à l’intégration de Dreamweaver et Fireworks à l’adresse www.adobe.com/go/vid0188_fr.
Dreamweaver permet de modifier rapidement une image ou une animation Fireworks. Depuis Dreamweaver, vous pouvez modifier les paramètres d’optimisation et d’animation, ainsi que la taille et la zone de l’image exportée.
Choisissez Commande > Optimiser l’image.
Cliquez sur le bouton de modification des paramètres de l’image dans l’inspecteur Propriétés.
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.
Créez un espace réservé à une image dans un document Dreamweaver, puis lancez Fireworks pour créer une image graphique ou une table Fireworks à insérer.
Pour créer une image à partir d’un espace réservé à une image, vous devrez avoir installé Dreamweaver et Fireworks au préalable sur votre système.
Dans l’inspecteur Propriétés, cliquez sur Créer.
Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur l’espace réservé pour l’image.
Cliquez sur l’espace réservé pour l’image avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Créer une image dans Fireworks.
Fireworks reconnaît les paramètres suivants de l’espace réservé à une image, précédemment établis lors de l’utilisation de ce dernier sous Dreamweaver : la taille de l’image (qui correspond à la taille de la zone de travail sous Fireworks), l’ID de l’image (utilisé par Fireworks comme nom de document par défaut pour le fichier source et le fichier d’exportation créé) et l’alignement du texte. Fireworks reconnaît également les liens et certains comportements (permutation d’image, menu contextuel et texte notamment) que vous avez associés à l’espace réservé à une image lorsque vous travailliez sous Dreamweaver.
Bien que les liens ajoutés à un espace réservé pour l’image soient invisibles dans Fireworks, ils sont conservés. Si vous dessinez une zone réactive et que vous ajoutez un lien sous Fireworks, le programme ne supprimera pas le lien ajouté à l’espace réservé à une image sous Dreamweaver. Toutefois, si dans Fireworks vous dessinez une découpe dans la nouvelle image, le lien sera supprimé du document Dreamweaver lors du remplacement de l’espace réservé pour l’image.
Fireworks ne reconnaît pas les paramètres suivants d’espace réservé pour l’image : alignement de l’image, couleur, espacement vertical et horizontal et cartes. Ils sont désactivés dans l’inspecteur Propriétés de l’espace réservé pour l’image.
Fireworks insère automatiquement le nom de l’espace pour image dans la zone de texte Nom de fichier lorsque vous le nommez au moment de son insertion dans un document Dreamweaver. Vous pouvez modifier le nom.
La boîte de dialogue Exporter s’affiche. Cette boîte de dialogue vous permet d’exporter l’image au format GIF, JPEG ou, dans le cas d’images découpées, sous la forme de documents HTML et d’images.
La zone de texte Nom affiche automatiquement le nom désignant le fichier PNG. Vous pouvez modifier le nom.
Le fichier est enregistré et Dreamweaver reprend la suite des opérations. Dans le document Dreamweaver, le fichier exporté ou la table Fireworks remplace l’espace pour image.
Fireworks permet de créer facilement et rapidement des menus contextuels de type CSS.
Les menus contextuels créés avec Fireworks sont non seulement plus extensibles et plus rapides à télécharger, mais encore présentent les avantages suivants :
Les éléments de menu peuvent être indexés par les moteurs de recherche.
Les éléments de menu peuvent être lus par des lecteurs d’écran, ce qui rend vos pages plus accessibles.
Le code généré par Fireworks est aux normes et peut être validé.
Vous pouvez modifier les menus contextuels Fireworks à l’aide de Dreamweaver ou Fireworks, mais pas les deux. Les modifications apportées sous Dreamweaver ne sont pas conservées sous Fireworks.
Vous pouvez créer un menu contextuel dans Fireworks 8, ou une version plus récente, puis le modifier à l’aide de Dreamweaver ou Fireworks (en utilisant la fonction Roundtrip editing), mais pas les deux. Si vous modifiez vos menus sous Dreamweaver, puis sous Fireworks, vous perdez toutes les modifications précédentes, à l’exception du texte.
Si vous préférez modifier vos menus avec Dreamweaver, vous pouvez utiliser Fireworks pour créer le menu contextuel, puis utiliser Dreamweaver de façon exclusive pour modifier le menu et le personnaliser.
Si vous préférez modifier les menus sous Fireworks, vous pouvez utiliser la fonction Roundtrip editing sous Dreamweaver, mais éviter d’y modifier les menus directement.
Le fichier PNG source s’ouvre dans Fireworks.
Fireworks renvoie le menu contextuel modifié à Dreamweaver.
Si vous avez créé un menu contextuel dans Fireworks MX 2004 ou une version plus ancienne, vous pouvez le modifier sous Dreamweaver à l’aide de la boîte de dialogue Afficher le menu contextuel, disponible à partir du panneau Comportements.
Lorsque vous modifiez des images dans Fireworks, les images placées dans vos pages web sont normalement exportées par Fireworks depuis un fichier source PNG. Lorsque vous ouvrez une image sous Dreamweaver pour la modifier, Fireworks ouvre automatiquement le fichier PNG source, vous invitant à préciser l’emplacement du fichier PNG si celui-ci ne peut pas être localisé. Vous pouvez régler vos préférences sous Fireworks afin que Dreamweaver puisse ouvrir l’image insérée, à moins que vous ne préfériez que Fireworks vous offre la possibilité d’utiliser le fichier d’image insérée ou le fichier source Fireworks chaque fois que vous ouvrez une image sous Dreamweaver.
Dreamweaver ne reconnait les paramètres lancer-et-modifier que dans certains cas. Par exemple, vous devez lancer et optimiser les images qui ne font pas partie d’une table Fireworks et dont le chemin Design Notes vers un fichier PNG source est correct.
Toujours utiliser le fichier PNG source
Permet de lancer automatiquement le fichier PNG Fireworks défini dans la Design Note comme fichier source de l’image placée. Les mises à jour sont appliquées au fichier PNG source et à l’image placée correspondante.
Ne jamais utiliser le fichier PNG source
Permet de lancer automatiquement l’image Fireworks placée, qu’il existe ou non un fichier PNG source. Les mises à jour sont appliquées à l’image placée uniquement.
Demander lors du lancement
Affiche un message vous demandant si le fichier PNG source doit être ouvert. Vous pouvez également déterminer les préférences globales de la fonction de lancement et d’édition dans cette fenêtre d’invite.
Dans Fireworks, la commande Exporter vous permet d’exporter et d’enregistrer des images optimisées et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez ensuite insérer le fichier sous Dreamweaver. Dreamweaver vous autorise à insérer dans un document du code HTML généré par Fireworks, intégrant des images, des découpes et JavaScript.
Choisissez Insertion > Objets image > HTML Fireworks.
Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images et choisissez Insérer HTML Fireworks dans le menu.
Si le fichier HTML se trouve sur un lecteur réseau, il est définitivement supprimé (il n’est pas placé dans la corbeille).
Le moyen le plus rapide de placer des images et tables générées sous Fireworks sous Dreamweaver est de copier et coller directement le code HTML Fireworks dans un document Dreamweaver.
L’assistant exporte les images à l’endroit indiqué et copie le code HTML dans le Presse-papiers.
L’ensemble du code HTML et JavaScript associés aux fichiers Fireworks exportés sont copiés dans le document Dreamweaver et tous les liens vers les images sont mis à jour.
L’ensemble du code HTML et JavaScript associés aux fichiers Fireworks exportés sont copiés dans le document Dreamweaver et tous les liens vers les images sont mis à jour.
Outre la technique de lancement et de modification décrite ci-dessus, vous pouvez faire appel à la commande Fichier > Mettre à jour le code HTML pour mettre à jour des fichiers Fireworks placés sous Dreamweaver. La commande Mettre à jour le code HTML vous permet de modifier l’image PNG source dans Fireworks et de mettre à jour automatiquement le code HTML et les fichiers d’image exportés placés dans un document Dreamweaver. Grâce à cette commande, vous pouvez mettre à jour les fichiers Dreamweaver même ce dernier est inactif.
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é.
Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d’insérer du nouveau code HTML dans le document Dreamweaver. Fireworks insère la section JavaScript du nouveau code au début du document et place la table HTML ou le lien vers l’image à la fin du document.
La fonctionnalité Créer un album photos pour le web a été abandonnée à partir de Dreamweaver CS5.
Accéder à votre compte