Guide d'utilisation Annuler

Utilisation de Fireworks et Dreamweaver

 

 

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.

Remarque :

La fonction n’est pas prise en charge dans Adobe Dreamweaver.

Insertion d’une image Fireworks

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.

  1. Dans le document Dreamweaver, placez le point d’insertion à l’emplacement où vous souhaitez insérer l’image, puis procédez de l’une des manières suivantes :
    • Choisissez Insertion > Image.

    • Dans la catégorie Commun du panneau Insertion, cliquez sur l’icône Image ou faites-la glisser vers le document.

  2. Recherchez le fichier Fireworks exporté, puis cliquez sur OK (Windows) ou Ouvrir (Macintosh).
    Remarque :

    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.

Modification d’une image ou d’un tableau Fireworks sous 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.

  1. Sous Dreamweaver, ouvrez l’inspecteur Propriétés (Fenêtre > Propriétés), s’il n’est pas déjà ouvert.
  2. Cliquez sur une image ou une découpe d’image pour la sélectionner.

    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.

  3. Pour lancer Fireworks afin d’apporter des modifications, procédez de l’une des manières suivantes :
    • 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.  

  4. Dans Fireworks, modifiez le fichier PNG source puis cliquez sur Terminé.

    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.

Optimisation d’une image Fireworks depuis Dreamweaver

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.

  1. Sous Dreamweaver, sélectionnez l’image de votre choix, puis procédez de l’une ou des deux manières suivantes :
    • Choisissez Commande > Optimiser l’image.

    • Cliquez sur le bouton de modification des paramètres de l’image dans l’inspecteur Propriétés.

  2. Apportez les modifications dans la boîte de dialogue Aperçu de l’image.
    • 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.

  3. Une fois terminé, cliquez sur OK.

Utilisation de Fireworks pour modifier les espaces réservés pour les images Dreamweaver

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.

  1. Veillez à ce que Fireworks soit défini comme éditeur d’image des fichiers PNG.
  2. Dans la fenêtre de document, cliquez sur l’espace réservé pour l’image afin de le sélectionner.
  3. 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.

  4. Utilisez les options de Fireworks pour créer l’image.

    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 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.

  5. Au terme de votre travail, cliquez sur Terminé afin d’afficher l’invite d’enregistrement.
  6. Dans la zone de texte Enregistrer, sélectionnez le dossier défini comme étant celui du site local Dreamweaver.

    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.

  7. Cliquez sur Enregistrer pour enregistrer le fichier PNG.

    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.

  8. Dans la zone Enregistrer dans, sélectionnez le dossier du site local Dreamweaver.

    La zone de texte Nom affiche automatiquement le nom désignant le fichier PNG. Vous pouvez modifier le nom.

  9. Dans la zone Enregistrer sous le type, sélectionnez le type de fichier(s) à exporter, par exemple Images uniquement ou Documents HTML et images.
  10. Cliquez sur Enregistrer pour enregistrer le fichier exporté.

    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.

À propos des menus contextuels de Fireworks

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.

Modification des menus contextuels de Fireworks sous Dreamweaver

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.

  1. Sous Dreamweaver, sélectionnez la table Fireworks contenant le menu contextuel, puis cliquez sur Modifier dans l’inspecteur Propriétés.

    Le fichier PNG source s’ouvre dans Fireworks.

  2. Dans Fireworks, modifiez ce menu avec l’éditeur correspondant, puis cliquez sur Terminé dans la barre d’outils de 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.

Modification d’un menu contextuel créé dans Fireworks MX 2004 ou une version plus ancienne

  1. Sous Dreamweaver, sélectionnez la zone réactive ou l’image qui déclenche le menu contextuel.
  2. Dans le panneau Comportements (Maj+F3), double-cliquez sur Afficher le menu contextuel dans la liste Actions.
  3. Apportez vos modifications dans la boîte de dialogue Menu contextuel, puis cliquez sur OK.

Définition des préférences de lancement et de modification des fichiers source Fireworks

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.

  1. Dans Fireworks, choisissez Édition > Préférences (Windows) ou Fireworks > Préférences (Macintosh), puis cliquez sur l’onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le menu déroulant (Macintosh).
  2. 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.

    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.

Insertion de code HTML Fireworks dans un document Dreamweaver

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.

  1. Dans le document Dreamweaver, placez le point d’insertion là où vous souhaitez insérer le code HTML Fireworks.
  2. Effectuez l’une des opérations suivantes :
    • 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.

  3. Cliquez sur Parcourir pour sélectionner un fichier HTML Fireworks.
  4. 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).

  5. 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.

Collage de code HTML Fireworks sous Dreamweaver

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.

Copie et collage de code HTML Fireworks sous Dreamweaver

  1. Dans Fireworks, choisissez Édition > Copier le code HTML.
  2. Suivez les instructions de l’assistant qui vous aide à effectuer la procédure d’exportation de votre code HTML et des images. Quand vous y êtes invité, choisissez le dossier du site Dreamweaver comme dossier de destination des images exportées.

    L’assistant exporte les images à l’endroit indiqué et copie le code HTML dans le Presse-papiers.

  3. Dans le document Dreamweaver, placez le point d’insertion à l’emplacement du document de votre choix, collez le code HTML, puis sélectionnez Édition > Coller code HTML Fireworks.

    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.

Exportation et collage de code HTML Fireworks sous Dreamweaver

  1. Dans Fireworks, choisissez Fichier > Exporter.
  2. Choisissez le dossier du site Dreamweaver comme dossier de destination des images exportées.
  3. Dans le menu déroulant Exporter, choisissez Documents HTML et Images.
  4. Dans le menu déroulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur Exporter.
  5. Dans le document Dreamweaver, placez le point d’insertion à l’emplacement du document de votre choix, puis collez le code HTML exporté avant de sélectionner Édition > Coller code HTML Fireworks.

    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.

Mise à jour du code HTML Fireworks placé sous 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.

  1. Dans Fireworks, ouvrez le fichier PNG source, puis apportez les modifications désirées.
  2. Choisissez Fichier > Enregistrer.
  3. Dans Fireworks, choisissez Fichier > Mettre à jour le code HTML.
  4. Recherchez le fichier Dreamweaver contenant le code HTML à mettre à jour, puis cliquez sur Ouvrir.
  5. Recherchez le dossier dans lequel placer les fichiers d’image mis à jour, puis cliquez 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.

Création d’un album photos pour le web

La fonctionnalité Créer un album photos pour le web a été abandonnée à partir de Dreamweaver CS5.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?