L'un des principaux avantages d'utiliser l'application Dreamweaver est qu'elle s'intègre parfaitement avec d'autres logiciels de Creative Suite 4. L'interface utilisateur commune permet de passer d'un composant à l'autre avec une grande facilité, et l'intégration optimisée homogénéise le flux de travail et évite la répétition inutiles de tâches.

Rubriques associées :

• Utilisation de Photoshop
• Interaction avec Fireworks
• Intégration de Flash

Utilisation de Photoshop

Photoshop CS4 est l'éditeur graphique que choisissent la plupart des concepteurs, notamment ceux qui viennent du monde de l'impression. Dreamweaver CS4 s'intègre parfaitement avec Photoshop CS4 :

• Prise en charge des fichiers natifs : Dreamweaver peut ouvrir les fichiers Photoshop natifs (.psd) et les convertir en un format Web (GIF, JPEG ou PNG) pour un contrôle total de l'optimisation de la part du concepteur Web.
• Objets dynamiques : les fichiers Photoshop insérés dans une page Dreamweaver deviennent des objets dynamiques et conservent un lien au fichier source d'origine. Si l'image source est mise à jour, Dreamweaver détecte les modifications et autorise la mise à jour de la version Web sans ouvrir Photoshop.
• Copier/Coller : il est possible de copier une sélection dans Photoshop et de la coller dans Dreamweaver afin d'optimiser les images dans un format Web.

Ouverture de fichiers Photoshop natifs

Les fichiers Photoshop standard ne sont pas pris en charge par les navigateurs Web, mais ils le sont par Dreamweaver CS4. Si vous sélectionnez un fichier PSD, Dreamweaver affiche une boîte de dialogue qui vous permet de convertir l'image en un format compatible Web : GIF, JPEG ou PNG. Vous pouvez à présent optimiser, recadrer ou redimensionner l'image avant d'enregistrer le fichier converti dans votre site Dreamweaver.

Pour insérer un fichier PSD Photoshop dans Dreamweaver, procédez comme suit :

1. Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton du menu Images, puis choisissez Image .
2. Lorsque la boîte de dialogue Sélectionnez la source de l'image s'ouvre, recherchez votre fichier PSD et sélectionnez-le.
   Si vous choisissez une image dans un format Web, Dreamweaver se contentera de l'insérer. Si vous choisissez un fichier PSD, la boîte de dialogue Aperçu de l'image s'affiche.

3. Dans la boîte de dialogue Aperçu de l'image, choisissez le format de votre choix dans la liste Format, puis sélectionnez d'autres paramètres afin d'optimiser l'image. Activez l'option 2 fenêtres d'aperçu ou 4 fenêtres d'aperçu afin de comparer la qualité d'image et la taille de fichier côte à côte.

   

   Figure 1. Sélectionnez d'autres paramètres afin d'optimiser l'image.

4. Pour redimensionner une image, cliquez sur l'onglet Fichier, puis modifiez la valeur Echelle, ou les valeurs Largeur et Hauteur.
   Désactivez l'option Contraindre si vous souhaitez modifier les valeurs de largeur et de hauteur indépendamment l'une de l'autre.
5. Pour recadrer une image numériquement, activez l'option Exporter zone, puis indiquez les valeurs de détourage de votre choix. Pour recadrer une image visuellement, cliquez sur l'outil de recadrage situé sous la zone d'aperçu, puis ajustez les poignées de redimensionnement.

6. Une fois que vous avez terminé, cliquez sur OK. Dans la boîte de dialogue Enregistrer image Web, sélectionnez l'emplacement d'enregistrement de l'image, puis entrez le nom dans le champ Nom de fichier. Cliquez sur OK.

   

   Figure 2. Sélectionnez l'emplacement d'enregistrement de l'image.

7. Vous remarquerez que dans l'inspecteur Propriétés, le chemin d'accès au fichier source s'affiche à présent dans le champ Original. Un symbole de synchronisation se trouve à présent dans le coin supérieur gauche de l'image ; l'importance de ce symbole est expliquée à la section suivante relative aux objets dynamiques.
8. Si vous souhaitez modifier le fichier source de l'image dans Photoshop, cliquez sur le logo Photoshop (Ps) situé dans l'inspecteur Propriétés.
9. Pour modifier les paramètres d'optimisation dans la boîte de dialogue Aperçu de l'image, cliquez sur l'icône Modifier les paramètres de l'image située en regard du logo Ps.

Si vous ne souhaitez utiliser qu'une partie d'un fichier Photoshop, créez une sélection, puis copiez-la ; au lieu d'utiliser la commande de copie standard, vous pouvez choisir l'option Edition > Copier les calques fusionnés dans Photoshop pour inclure tous les calques à votre sélection. Ensuite, dans Dreamweaver, choisissez Edition > Coller ou utiliser le raccourci clavier Ctrl+V (Windows) ou Cmd+V (Mac). Dreamweaver ouvre la boîte de dialogue Aperçu de l'image afin que vous puissiez convertir votre sélection copiée au format adéquat.

Utilisation d'objets dynamiques

Les fichiers PSD Photoshop insérés dans une page Dreamweaver sont convertis en objets dynamiques. Pourquoi un objet dynamique est-il si intelligent ? Lorsque l'image est affichée dans Dreamweaver, un petit symbole situé dans le coin supérieur gauche indique que le fichier source et cette instance sont synchronisés. Si vous modifiez le matériel source d'origine, le symbole indique qu'ils ne sont pas synchronisés. Cliquez sur le bouton Mettre à jour depuis l'original de l'inspecteur Propriétés afin de mettre à jour l'image dans Dreamweaver sans ouvrir Photoshop.

Pour synchroniser un objet dynamique avec le fichier source Photoshop, procédez comme suit :

1. Dans Photoshop, modifiez le fichier source inséré dans Dreamweaver sous forme d'image Web.
   Initialement, les deux flèches du symbole de synchronisation sont vertes.

2. Ouvrez la page contenant l'image Web dans Dreamweaver. Notez que le symbole de synchronisation comporte à présent une flèche verte et une flèche rouge, ce qui indique que l'image n'est pas synchronisée avec le fichier source.

   

   Figure 3. Le symbole de synchronisation indique que l'image n'est pas synchronisée avec le fichier source.

3. Dans l'inspecteur Propriétés, cliquez sur l'icône Mettre à jour depuis l'original située à droite de l'icône Modifier les paramètres de l'image.

   

   Figure 4. Cliquez sur l'icône Mettre à jour depuis l'original.

4. Notez que le symbole de synchronisation est redevenu vert et que l'image a été mise à jour.

   

   Figure 5. L'image a été mise à jour.

L'une des fonctionnalités utiles des objets dynamiques est que vous pouvez redimensionner une image dans Dreamweaver à l'aide de la commande Modifier les paramètres de l'image ou de la commande Redimensionner afin que l'objet dynamique conserve la connexion à l'image source. Vous pouvez même obtenir plusieurs objets dynamiques à partir du même fichier source dans différents formats et les mettre à jour afin qu'ils conservent leurs dimensions actuelles.

Interaction avec Fireworks

La longue tradition de collaboration entre Dreamweaver et Fireworks donne aux utilisateurs l'accès à des outils d'édition interactifs et intégrés. Les images Web créées dans Fireworks et placées dans Dreamweaver peuvent être facilement envoyées à Fireworks en vue de les modifier, puis une fois les modifications effectuées, renvoyées à Dreamweaver, optimisées. Par ailleurs, Fireworks peut exporter des fichiers HTML et des images afin de les insérer directement dans une page Dreamweaver.

Insertion de fichiers HTML Fireworks

Fireworks exporte sans aucun problème les images Web au format de votre choix. Que vous utilisiez une barre de navigation basée sur un tableau avec des images survolées de différents états ou une mise en forme structurée avec des règles de CSS, Fireworks peut les extraire en vue de les utiliser dans Dreamweaver.

Les documents les plus fréquemment exportés depuis Fireworks sont les documents HTML et les images, qui génèrent des images découpées et optimisées, ainsi que le code HTML qui les lie. Pour les importer dans Dreamweaver, utiliser la commande Insérer du HTML Fireworks.

Pour insérer un fichier HTML Fireworks dans une page Dreamweaver, procédez comme suit :

1. Dans Dreamweaver, placez votre curseur à l'emplacement où vous souhaitez insérer le fichier HTML exporté depuis Fireworks.
2. Dans le menu principal, choisissez Insertion > Objets image > HTML Fireworks.
   Vous pouvez également cliquer sur HTML Fireworks à partir du bouton du menu Images situé dans la catégorie Commun du panneau Insertion.

3. Lorsque la boîte de dialogue Insérer du HTML Fireworks s'ouvre, entrez le nom du fichier du code exporté ou cliquez sur Parcourir pour rechercher le fichier. Cliquez sur OK.

   

   Figure 6. Entrez le nom du fichier du code exporté.

   Vous pouvez également supprimer le fichier après l'avoir inséré ; toutefois, nous vous conseillons de conserver ce fichier jusqu'à ce que votre conception soit achevée.

Si Fireworks dispose d'options d'exportation génériques, Dreamweaver en propose de plus spécifiques. Le tableau suivant vous explique comment incorporer chacune d'elles dans Dreamweaver :

Exporter depuis Fireworks	Exporte	Dans Dreamweaver
Images	GIF, JPEG ou PNG	Insertion > Image
HTML et images	Code HTML, images découpées	Insertion > Objets image > HTML Fireworks
HTML et CSS	Pages HTML, images découpées , fichiers CSS	Fichier > Ouvrir
Bibliothèque Dreamweaver (.lbi)	HTML au format bibliothèque, images découpées	Panneau Actifs > Bibliothèque
Calques CSS	Code HTML, images découpées	Insertion > Objets image > HTML Fireworks
Calques vers fichiers	Images	Insertion > Image
Etats vers fichiers	Images	Insertion > Image
Pages vers fichiers	Images	Insertion > Image

Copier/coller depuis Fireworks

Pour insérer rapidement une image dans Dreamweaver depuis Fireworks, il vous suffit de la copier, puis de la coller. Lorsque vous collez le Presse-papiers, Dreamweaver reconnaît le contenu et affiche la boîte de dialogue Aperçu de l'image, de la même manière que lorsque vous ouvrez un fichier PSD Photoshop ou collez une sélection à partir de Photoshop. Vous pouvez déterminer le format qui convient le mieux aux images copiées (GIF, JPEG ou PNG) et optimiser ces images afin d'obtenir la meilleure qualité possible pour les fichiers de plus petite taille.

Modification des images de Fireworks

L'un des principaux avantages de l'intégration entre Dreamweaver et Fireworks est la possibilité de modifier les fichiers de façon interactive. Les images qui ont été insérées dans Dreamweaver à l'aide de la commande d'insertion de fichiers HTML Fireworks peuvent être renvoyées à Fireworks en vue d'être modifiées. Mieux encore : vous pouvez choisir de modifier le fichier source ou le fichier exporté. Lorsque vous avez terminé, il vous suffit de cliquer sur le bouton Terminé de la boîte de dialogue Modification depuis Dreamweaver afin que Fireworks exporte à nouveau l'image avec les paramètres d'origine et vous renvoie à Dreamweaver.

Intégration de Flash

Flash et Dreamweaver s'intègrent à merveille. Il est très facile d'insérer une animation Flash, la prévisualiser dans Dreamweaver, modifier le fichier source dans Flash et renvoyer le nouveau fichier SWF exporté à Dreamweaver. En outre, Dreamweaver peut insérer facilement n'importe quelle animation Flash dans la page, en téléchargement progressif ou en flux continu, avec les commandes du lecteur.

Insertion de fichiers SWF

L'insertion d'animations créées avec Flash (fichiers SWF) dans Dreamweaver est extrêmement simple. Il existe plusieurs méthodes pour effectuer cette opération :

• Choisissez Insertion > Médias > SWF
• Appuyez sur Ctrl+Alt+F (Windows) ou sur Cmd+Opt+F (Mac)
• Faites glisser le fichier SWF vers la page à partir du panneau Fichiers
• Insérez le fichier SWF à partir du panneau Actifs

Quelle que soit la méthode d'insertion de votre fichier SWF, Dreamweaver CS4 gère l'opération de façon continue et insère du code compatible XHTML pour afficher les animations Flash, détecter les fichiers FLV et proposer des options d'installation.

Lorsque vous insérez un fichier SWF dans une page, un espace réservé est initialement défini sur la page, entouré d'une bordure et d'un onglet qui permettent d'identifier le contenu comme fichier SWF avec l'ID par défaut FlashID.

Figure 7. Lorsque vous insérez un fichier SWF, un espace réservé est initialement défini sur la page.

Sélectionnez l'icône de l'oeil dans l'onglet afin de visualiser le message qui s'affiche automatiquement aux visiteurs qui ne disposent pas de la version requise de Flash Player.

Figure 8. Les visiteurs qui ne disposent pas de Flash Player verront ce message d'alerte.

Vous pouvez modifier ce message comme bon vous semble. Lorsque les visiteurs cliquent sur l'image Get Adobe Flash Player, la version de Flash Player la plus récente est installée dans le navigateur actuel.

Mise à jour de fichiers SWF

Dreamweaver vous permet d'ouvrir en un seul clic le fichier FLA source du fichier SWF inséré en vue de le modifier. Pour établir la connexion, entrez le chemin d'accès au fichier FLA dans le champ Src de l'inspecteur Propriétés. Cliquez alors sur Modifier pour modifier la source.

Figure 9. Pour établir la connexion, entrez le chemin d'accès au fichier FLA dans l'inspecteur Propriétés.

Si aucun fichier n'est spécifié ou si Flash ne parvient pas à trouver le fichier FLA, la boîte de dialogue Sélectionnez la source de l'image s'ouvre. Une fois les modifications terminées, cliquez sur le bouton Terminé situé dans la partie supérieure de la fenêtre du document Flash afin d'exporter à nouveau le fichier SWF.

Ajout de fichiers FLV

Vous pouvez rapidement insérer un fichier FLV dans Dreamweaver ; Dreamweaver ajoute en outre les commandes du lecteur vidéo.

Pour insérer un fichier FLV, procédez comme suit :

1. Choisissez Insertion > Médias > FLV.
   Vous pouvez également cliquer sur l'objet FLV dans la catégorie Commun du panneau Insertion.

2. Lorsque la boîte de dialogue Insérer FLV s'affiche, choisissez le type de vidéo que vous souhaitez insérer : Vidéo en téléchargement progressif ou Vidéo en flux continu.

   

   Figure 10. Choisissez le type de vidéo que vous souhaitez insérer.

   Les fichiers FLV enregistrés dans des serveurs Web standard peuvent utiliser la méthode Vidéo en téléchargement progressif alors que les fichiers FLV enregistrés sur un serveur multimédia utilisent le flux continu. Dreamweaver propose différentes options dans cette boîte de dialogue en fonction du type de vidéo sélectionné.

3. Entrez le chemin du fichier FLV dans le champ correspondant (URL pour la vidéo en téléchargement continu, URL du serveur pour la vidéo en flux continu).
4. Sélectionnez les options de commande du lecteur dans la liste Apparence.
5. Définissez les autres paramètres.
6. Cliquez sur OK. Appuyez sur la touche F12 pour prévisualiser votre vidéo. Contrairement aux fichiers SWF, les fichiers FLV ne peuvent pas être lus dans Dreamweaver et doivent être prévisualisés dans le navigateur.

Lorsque vous publiez une page contenant une vidéo créée avec Flash et insérée à partir de Dreamweaver, vous devez charger deux fichiers FLV (un pour la vidéo, l'autre pour l'apparence), ainsi que des scripts Flash standard permettant d'afficher le fichier SWF et, le cas échéant, d'installer Flash Player.

Marche à suivre

Continuez à explorer Dreamweaver dans les sections suivantes :

• Introduction à Dreamweaver : présentation de l'interface utilisateur
• Gestion de site
• Création et utilisation de contenu
• Utilisation de CSS
• Intégration de pages côté serveur
• Introduction à Spry
• En ligne avec Dreamweaver - Publication de votre site sur le Web
• Optimisation du flux de travail de Creative Suite

A propos de l'auteur