Dreamweaver MX

1
Présentation générale
de Dreamweaver
Au sommaire de ce chapitre
■ Un éditeur HTML WYSIWYG (Chapitres 2 à 5)
■ Tableaux et mise en page faciles (Chapitres 4 et 5)
■ Travail efficace (Chapitres 3 et 6)
■ Intégration avec Fireworks (Chapitre 7)
■ Fonctions de personnalisation (Chapitres 12, 28 et 29)
■ Des pages multinavigateurs (Chapitre 13)
■ Gestion et rédaction du code (Chapitres 2, 3 et 14)
■ Feuilles de styles et calques (Chapitres 15 et 16)
■ Comportements et scénarios (Chapitres 18 et 19)
■ Gestion de site et travail d’équipe (Chapitres 23 à 25)
■ Modèles et bibliothèques (Chapitres 26 et 27)
Le succès de Dreamweaver est dû à ses performances et à sa polyvalence. Si certaines fonctions de Dreamweaver sont communes à la plupart des éditeurs HTML, d’autres, importantes voire essentielles dans le contexte de création de sites de qualité professionnelle, lui sont
exclusives.
Ce chapitre présente un échantillon (non exhaustif) des possibilités de Dreamweaver.
Nous y aborderons brièvement les particularités du logiciel. Certains chapitres ne sont
pas mentionnés, mais cela ne signifie pas que leur contenu soit moins important que les
autres.
Un éditeur HTML WYSIWYG (Chapitres 2 à 5)
Dreamweaver est un éditeur HTML WYSIWYG (What You See Is What You Get) : ce
qu’il affiche apparaîtra de manière identique dans le navigateur de destination (voir
Figure 1.1). Toutes les modifications apportées au document sont répercutées instantanément dans son code. Ce n’est pas là la fonction la plus originale du logiciel, d’autant
que Dreamweaver n’est pas "parfaitement" WYSIWYG : en effet, l’affichage d’une
même page Web peut varier énormément en fonction du navigateur utilisé ; de ce fait,
la page telle qu’elle s’affiche dans Dreamweaver ne représente qu’une version parmi
d’autres.
Cependant, pour qui cherche à créer une page Web sans maîtriser le HTML, Dreamweaver permet de procéder de manière visuelle et ne réserve que rarement de mauvaises
surprises.
6
DREAMWEAVERMX
Figure 1.1
Une page Web affichée
dans Dreamweaver,
et la même affichée
dans Internet Explorer.
Les différences sont
minimes, mais elles
existent.
Tableaux et mise en page faciles (Chapitres 4 et 5)
La création de tableaux HTML peut rapidement tourner au cauchemar, surtout lorsqu’on
débute. Dreamweaver facilite beaucoup cette tâche, en particulier grâce à l’inspecteur de
propriétés. Pour créer rapidement une mise en page à l’aide de tableaux, vous disposez également du mode Mise en forme, qui vous permet de dessiner directement les tableaux et les
cellules avec la souris. Une fois maîtrisée, cette nouvelle fonction vous fera économiser
beaucoup de temps et d’énergie.
Travail efficace (Chapitres 3 et 6)
Dreamweaver propose un panneau Historique, qui permet de visualiser les dernières opérations effectuées par l’utilisateur et de revenir immédiatement en arrière en cas de problème. Mieux : vous pouvez transformer en commande une série d’actions. Cette série
d’actions peut ensuite être déclenchée à tout moment, vous évitant ainsi d’avoir à effectuer
des tâches répétitives.
Vous pouvez également créer des "styles HTML", des ensembles d’attributs de caractères
que vous appliquez ensuite au texte d’un simple clic de souris, à la manière des feuilles de
styles des traitements de texte.
Intégration avec Fireworks (Chapitre 7)
La coordination du code HTML et des images est maintenant plus facile : vous pouvez
importer d’un clic de souris dans Dreamweaver des ensembles d’images optimisées dans
Fireworks, JavaScript et code HTML compris. Ce code JavaScript apparaît sous la forme de
comportements (voir ci-après) dans l’interface de Dreamweaver, ce qui facilite sa gestion.
PRÉSENTATION GÉNÉRALE DE DREAMWEAVER
7
Les images créées dans Fireworks peuvent également y être modifiées, et le code de
Dreamweaver est automatiquement mis à jour en conséquence sans que vous ayez besoin
d’intervenir.
Fonctions de personnalisation (Chapitres 12, 28 et 29)
L’une des principales originalités de Dreamweaver est d’être presque entièrement personnalisable. Dreamweaver est livré avec une série d’objets (autrement dit de fonctions) prédéfinis. Il est possible de modifier ces objets ou d’en ajouter de nouveaux selon vos besoins.
Seule condition pour créer de nouveaux objets : quelques connaissances en HTML et en
JavaScript. Il est donc possible de créer de nouveaux objets pour Dreamweaver avec
Dreamweaver. Il en va de même pour les actions, qui sont des fonctions JavaScript que
Dreamweaver peut insérer dans une page Web (voir plus loin).
Mieux encore, vous trouverez sur le site de Macromedia des objets, actions et commandes
créés par des utilisateurs de Dreamweaver et mis en ligne sur le Web. Ils peuvent être
téléchargés et utilisés gratuitement. Le CD-ROM de ce livre comprend d’ailleurs plusieurs
objets supplémentaires que vous pourrez installer pour étendre les possibilités de Dreamweaver.
Enfin, l’interface de Dreamweaver elle-même peut être presque entièrement personnalisable. Vous pouvez ainsi modifier à votre guise tous les menus du logiciel ou supprimer ceux
que vous n’utilisez pas ; cette dernière fonction peut se révéler très utile si Dreamweaver
doit être employé par des non-spécialistes qui n’auront à se servir que de certaines fonctions
de base du logiciel.
Des pages multinavigateurs (Chapitre 13)
Le principal problème du créateur de pages Web est le suivant : les documents qu’il crée
doivent s’afficher correctement dans différents navigateurs plus ou moins incompatibles
entre eux. Dreamweaver n’apporte pas une solution définitive à ce problème complexe,
mais il propose plusieurs fonctions qui sont d’un grand secours :
• Lors de l’insertion d’actions (qui sont en fait des scripts JavaScript), Dreamweaver
permet de choisir les navigateurs cibles : Internet Explorer version 3 à 6, Netscape
version 3 à 6, ou autres.
• Dreamweaver dispose d’une fonction de test permettant de vérifier qu’un document est
compatible avec un navigateur donné et indiquant quelles balises ou quels attributs
risquent de poser problème.
• Enfin, on peut demander à Dreamweaver de convertir un document existant en document compatible avec des navigateurs plus anciens, de version 3 pour être précis. Vous
êtes ainsi (à peu près) sûr que vos pages s’afficheront correctement dans la majorité des
navigateurs.
8
DREAMWEAVERMX
Gestion et rédaction du code (Chapitres 2, 3 et 14)
Ce qui distingue, entre autres, Dreamweaver des autres éditeurs HTML est sa manière de
gérer le HTML. En effet, beaucoup de logiciels tendent à ajouter leurs propres balises non
standard aux documents HTML, y compris ceux qui ont été initialement créés à l’aide
d’autres logiciels.
Lorsqu’on ouvre un document dans Dreamweaver, celui-ci ne modifie en rien son code
HTML ; de plus, le code HTML généré par Dreamweaver est très "propre" et ne comprend
aucune balise spécifique. Mieux, Dreamweaver permet de formater le code selon les préférences de l’utilisateur (casse des balises et des attributs, retraits, etc.) et aussi de nettoyer le
code pour supprimer les balises inutiles.
Vous pouvez afficher et modifier de diverses manières le code généré par Dreamweaver :
• De manière "classique", dans une fenêtre distincte (l’inspecteur de code) ou dans un
volet séparé de la fenêtre principale.
• Avec la fonction Quick Tag Editor, qui permet de modifier ou d’ajouter instantanément
des balises HTML à n’importe quel endroit du document sans avoir à se plonger dans le
code HTML de la page.
• Les scripts peuvent être affichés seuls dans une fenêtre séparée et modifiés rapidement
sans qu’on ait à afficher tout le code du document.
Toutes les modifications que vous apportez au code sont instantanément prises en compte
dans la fenêtre principale du logiciel, et réciproquement.
Par ailleurs, de nombreuses fonctions de Dreamweaver sont conçues pour faciliter la lecture et la saisie du code : mise en couleurs selon les préférences de l’utilisateur, indicateurs de code permettant une saisie semi-automatique des balises, panneau Fragments de
code permettant de stocker et d’insérer rapidement des bouts de code fréquemment
employés, etc.
Feuilles de styles et calques (Chapitres 15 et 16)
Les feuilles de styles (CSS, Cascading Style Sheet) permettent de mettre en forme vos
pages Web avec plus de souplesse que le HTML. Dreamweaver dispose d’un panneau
Styles CSS qui permet de créer et de gérer simplement les feuilles de styles de vos
documents.
Les calques sont apparus avec le HTML 4. Ils permettent de positionner les éléments d’une
page de manière plus simple et plus sûre que les tableaux. Dreamweaver permet de créer et
de gérer les calques en toute simplicité ; combinés aux comportements et aux scénarios
(voir ci-après), les calques offrent de nombreuses fonctions créatives aux concepteurs de
pages Web.
PRÉSENTATION GÉNÉRALE DE DREAMWEAVER
9
Comportements et scénarios (Chapitres 18 et 19)
Le JavaScript permet d’enrichir considérablement l’interaction d’un site Web avec les visiteurs. Le JavaScript présente l’inconvénient d’être un langage de programmation, ce qui
implique un apprentissage.
Pour ceux qui ne souhaitent pas se lancer dans la programmation, Dreamweaver propose
des comportements et des scénarios. Les comportements sont des scripts JavaScript que
l’utilisateur insère dans le document en employant simplement des commandes de
menus et des boîtes de dialogue ; ces scripts peuvent être personnalisés en fonction des
besoins.
Les scénarios permettent, toujours sur la base du JavaScript, de créer des animations
en déplaçant, en affichant et en masquant des calques. Ici encore, nul besoin de connaître la programmation : tout se fait par l’intermédiaire de panneaux et de boîtes de
dialogue.
Pages dynamiques (Chapitre 22)
De plus en plus de sites font appel à des technologies serveur telles que le PHP, l’ASP
ou autres qui permettent de créer des pages à la demande en fonction de différents paramètres, en particulier ceux qui proviennent de l’utilisateur. Par le passé, le logiciel
Ultradev de Macromedia était le seul qui permettait de créer de manière visuelle de
telles pages.
Dreamweaver MX reprend et étend les possibilités d’Ultradev en matière de création de
pages dynamiques. Par conséquent, vous pourrez l’employer pour faire interagir vos pages
avec une base de données, par exemple. Toutefois, si nous décrivons les bases de la création
de pages dynamiques (faisant appel à l’ASP, en l’occurrence), nous ne pouvons, dans le
cadre de ce livre, être exhaustif sur le sujet qui nécessiterait un deuxième volume de la
même ampleur.
Gestion de site et travail d’équipe (Chapitres 23 à 25)
Les sites sont des ensembles de fichiers de plus en plus complexes qui sont généralement
créés par des équipes et non par des individus isolés. La fenêtre Site de Dreamweaver permet de gérer l’organisation, le téléchargement et la vérification de tous les fichiers d’un site.
Par ailleurs, Dreamweaver propose de nombreuses fonctions de travail en équipe, en particulier les Design Notes, des instructions que chaque personne travaillant à la réalisation
d’un site peut rattacher à un document, par exemple pour informer ses collaborateurs des
tâches restant à effectuer.
10
DREAMWEAVERMX
Modèles et bibliothèques (Chapitres 26 et 27)
La création et la gestion d’un site complexe représentent en général beaucoup de travail.
Pour le simplifier, il est possible de créer à l’aide de Dreamweaver des modèles et des
bibliothèques.
Les modèles sont des pages Web dans lesquelles certaines zones sont protégées et ne peuvent être modifiées ; ainsi, on peut confier le travail de mise à jour d’une page à une
personne moins experte en HTML sans craindre de voir la mise en page du document
bouleversée ou le code altéré.
Les bibliothèques, qu’on retrouve dans d’autres logiciels Macromedia (Flash, Director),
permettent de stocker des éléments (texte, images, formulaires, etc.) de page Web. Ils peuvent ensuite être insérés dans n’importe quelle page d’un simple clic de souris. Pour des
sites importants ayant recours aux mêmes éléments de manière répétée, le gain de temps
peut être appréciable. De plus, le nouveau panneau d’actifs répertorie tous les éléments d’un
site (images, liens, animations, etc.) pour vous permettre d’y accéder instantanément.