Guide d'utilisation Annuler

Utilisation de Fireworks et Dreamweaver

Rechercher
Dreamweaver

Dreamweaver

Ouvrir l’application
  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver
  19. Résolution des problèmes
    1. Problèmes résolus
    2. Problèmes connus

 

 

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.

Articles connexes

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Liens rapides

Voir toutes vos formules Gérer vos formules
Afficher les liens rapides
Masquer les liens rapides

Informations juridiques    |    Politique de confidentialité en ligne