Sur cette page
- Insertion d’une image Fireworks
- Modification d’une image ou d’un tableau Fireworks sous Dreamweaver
- Optimisation d’une image Fireworks depuis Dreamweaver
- Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver
- À propos des menus contextuels de Fireworks
- Modification des menus contextuels de Fireworks sous Dreamweaver
- Modification d’un menu contextuel créé dans Fireworks MX 2004 ou une version plus ancienne
- Définition des préférences de lancement et de modification des fichiers source Fireworks
- Insertion de code HTML Fireworks dans un document Dreamweaver
- Collage de code HTML Fireworks sous Dreamweaver
- Mise à jour du code HTML Fireworks placé sous Dreamweaver
- Création d’un album photos pour le web
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.
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.
Remarque :
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.
-
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.
Remarque :
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 didacticiel 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.
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.
-
Démarrez Fireworks en mode Modification depuis Dreamweaver en utilisant l’une des méthodes suivantes :
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.
Remarque :
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 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.
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
Remarque :
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.
-
Indiquez les préférences applicables lors de la modification ou de l’optimisation d’images Fireworks placées dans une application externe :
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.
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.
-
Si le fichier n’est plus nécessaire par la suite, activez l’option Supprimer fichier après insertion. Cette option n’a aucun effet sur le fichier PNG source associé au fichier HTML.
Remarque :
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.
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.
-
Recherchez le dossier dans lequel placer les fichiers d’image mis à jour, puis cliquez surz sur Sélectionner (Windows) ou Choisir (Macintosh).
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.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.