MACROMEDIA STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX Manuel utilisateur

A la découverte de Studio MX
Marques commerciales
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, ColdFusion, Contribute, Design In Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite,
JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live
Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo and
Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with
Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip, Roundtrip
HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be et Xtra sont des
marques déposées ou des marques commerciales de Macromedia, Inc. susceptibles d’être déposées aux Etats-Unis ou dans d’autres
juridictions, y compris à l’échelle internationale. Les autres noms de produits, logos, graphiques, mises en page, titres, mots ou
phrases mentionnés dans cette publication peuvent être des marques, des marques de service ou des noms de marque appartenant
à Macromedia,Inc. ou à d’autres entités et peuvent être déposés dans certains pays, états ou provinces.
Informations de tiers
Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et Macromedia ne peut en aucun
cas être tenu responsable du contenu de ces sites. Si vous accédez à l’un de ces sites, vous le faites à vos propres risques.
Macromedia mentionne ces liens pour faciliter votre travail et l’inclusion de ces liens n’implique pas que Macromedia approuve le
contenu de ces sites tiers ou en accepte la responsabilité.
Technologie de compression et décompression audio discours utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com).
Technologie de compression et décompression vidéo Sorenson™ Spark™ utilisée sous licence de
Sorenson Media, Inc.
Navigateur Opera ® Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.
Dénégation de responsabilité d’Apple
APPLE COMPUTER, INC. NE FOURNIT AUCUNE GARANTIE, EXPRESSE OU IMPLICITE, CONCERNANT LE
LOGICIEL INCLUS, QUANT A SA QUALITE LOYALE ET MARCHANDE, OU SON ADAPTATION A UN OBJECTIF
PARTICULIER. L’EXCLUSION DES GARANTIES IMPLICITES N’ETANT PAS AUTORISEE DANS CERTAINS
ETATS, L’EXCLUSION CI-DESSUS PEUT DONC NE PAS S’APPLIQUER A VOTRE CAS. CETTE GARANTIE VOUS
OFFRE DES DROITS JURIDIQUES SPECIFIQUES. VOUS POUVEZ DISPOSER DE CERTAINS AUTRES DROITS,
QUI VARIENT SELON LES ETATS.
Copyright © 2003 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit,
traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l’autorisation écrite préalable de
Macromedia, Inc. Numéro de référence : ZWS70M100F
Remerciements
Gestion de projet : Sheila McGinn
Rédaction : Jon Michael Varese
Edition : Rosana Francescato, Barbara Milligan, Antonio Padial, Lisa Stanziano
Gestion de production : Patrice O’Neill
Production : Adam Barnett, Aaron Begley, Jeff Harmon
Remerciements particuliers à Kristin Conradi, George Fox, Stephanie Gowin, Julie Hallstrom, Jed Hartman, Mark Haynes, Matt
Hoffberg, Eliza Laffin, Charles Nadeau, John Nosal, Jennifer Rowe, Craig Simmons, Tim Statler et Gary White
Première édition : septembre 2003
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
TABLE DES MATIERES
PARTIE I : Bien démarrer
CHAPITRE 1 : Introduction
........................................... 9
Apprentissage des fonctions de base de Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Présentation générale des outils Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Installation de Studio MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Activation et enregistrement du produit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
CHAPITRE 2 : Nouveautés de Studio MX 2004
. . . . . . . . . . . . . . . . . . . . . . . . . 19
Nouveautés de Dreamweaver MX 2004. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nouveautés de Flash MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nouveautés de Flash MX Professionnel 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nouveautés de Fireworks MX 2004. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nouveautés de FreeHand MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 3 : Espace de travail de Studio MX 2004
19
23
25
26
28
. . . . . . . . . . . . . . . . . . . . . 31
Premier contact avec l’espace de travail de Dreamweaver . . . . . . . . . . . . . . . . . . . . 31
Premier contact avec l’espace de travail de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Description de l’espace de travail de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Premier contact avec l’espace de travail de FreeHand . . . . . . . . . . . . . . . . . . . . . . . 48
CHAPITRE 4 : Description des applications Web
. . . . . . . . . . . . . . . . . . . . . . . . 55
A propos des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Fonctionnement d’une application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Création de pages dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Choix d’une technologie de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Terminologie du développement d’applications Web. . . . . . . . . . . . . . . . . . . . . . . 63
3
CHAPITRE 5 : Installation d’un serveur Web
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Bien démarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Installation de Personal Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Installation d’Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Test de PWS ou IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Test du serveur Web Macintosh (développeurs PHP). . . . . . . . . . . . . . . . . . . . . . . 70
Fonctions élémentaires du serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
CHAPITRE 6 : Configuration d’un exemple de site ColdFusion
. . . . . . . . . . . . . . 73
Aide-mémoire pour la configuration à l’intention des développeurs ColdFusion . . 73
Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Définition d’un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Connexion à l’exemple de base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
PARTIE II : Utilisation de Macromedia Studio
CHAPITRE 7 : Processus de développement Web.
. . . . . . . . . . . . . . . . . . . . . . . 91
Planification de votre site Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Définition de l’environnement de développement . . . . . . . . . . . . . . . . . . . . . . . . . 96
Planification de la conception et de la mise en forme de la page . . . . . . . . . . . . . 100
Création d’actifs de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Création d’actifs d’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Assemblage, test et déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
DIDACTICIEL 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Planification de la navigation sur le site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Personnalisation de FreeHand pour une sortie multimédia/Web . . . . . . . . . . . . . 118
Création de rectangles pour le plan de navigation . . . . . . . . . . . . . . . . . . . . . . . . 120
Modification du texte du rectangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Ajout de lignes connecteur au document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Exportation du plan au format SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
DIDACTICIEL 2 : Création d’une mise en forme basée sur un tableau dans
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 131
Insertion de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Définition des propriétés d’un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Insertion d’un espace réservé pour l’image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Ajout de texte de l’espace réservé dans les cellules de tableau . . . . . . . . . . . . . . . . 136
4
Table des matières
DIDACTICIEL 3 : Création d’une bannière dans Fireworks
. . . . . . . . . . . . . . . . 141
Création d’un document Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout de texte à la bannière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimisation de la bannière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Exportation de la bannière dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . .
142
142
144
146
147
DIDACTICIEL 4 : Création d’une barre de navigation avec Fireworks . . . . . . . .
149
Création d’un document Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Création d’un symbole de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Création des états de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Création de plusieurs occurrences d’un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Modification du texte de l’occurrence du bouton . . . . . . . . . . . . . . . . . . . . . . . . 157
Affectation des URL et des noms aux boutons. . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Optimisation de la barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Définition des préférences HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Exportation du document au format HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Affichage des fichiers exportés dans le panneau Fichiers de Dreamweaver . . . . . . 162
Affichage du fichier HTML de Fireworks dans un navigateur . . . . . . . . . . . . . . . 163
DIDACTICIEL 5 : Création de médias enrichis avec Fireworks et Flash
. . . . . . 165
A propos des animations Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Examen des fichiers de téléchargement Fireworks . . . . . . . . . . . . . . . . . . . . . . . . 166
Création d’un document Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Importation et conversion du fichier Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Création d’un calque de texte et d’un symbole. . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Création d’images-clés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Définition de la transparence alpha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Création d’interpolations de mouvement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Publication du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
DIDACTICIEL 6 : Assemblage et modification d’actifs Studio . . . .
. . . . . . . . . . 177
Insertion de la barre de navigation Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification de la bannière Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion de l’animation Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Lecture de l’animation Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification de l’animation Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dernière étape de création de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
177
179
180
182
182
184
DIDACTICIEL 7 : Création d’une fonction de recherche dans une base de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
A propos des pages de recherche/de résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Création de la page de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Création de la page de résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Publication et test de vos pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Table des matières
5
6
Table des matières
Familiarisez-vous avec la suite de produits Macromedia Studio MX 2004 pour apprendre tout ce
que vous devez savoir avant de commencer à créer votre site Web.
Cette partie du manuel contient les sections suivantes :
Chapitre 1, Introduction, page 9
Chapitre 2, Nouveautés de Studio MX 2004, page 19
Chapitre 3, Espace de travail de Studio MX 2004, page 31
Chapitre 4, Description des applications Web, page 55
Chapitre 5, Installation d’un serveur Web, page 67
Chapitre 6, Configuration d’un exemple de site ColdFusion, page 73
PARTIE I
PARTIE I
Bien démarrer
CHAPITRE 1
Introduction
Ce manuel vous présente Macromedia Studio MX 2004, un ensemble d’outils de
développement Web intégrés comprenant Macromedia Dreamweaver MX 2004,
Macromedia Flash MX 2004 (ou Macromedia Flash MX Professionnel 2004),
Macromedia Fireworks MX 2004, Macromedia FreeHand MX, et Macromedia ColdFusion MX.
Après une présentation générale des différents produits, ce manuel expose quelques-uns des
concepts sur lesquels repose le développement d’applications Web, puis vous explique comment
créer un site Internet dynamique simple, mais fonctionnel, au travers d’une série de didacticiels.
Ce manuel s’adresse de manière générale aux utilisateurs de niveau débutant à intermédiaire, et en
particulier à ceux qui ne connaissent pas encore tous les produits de la suite Studio MX 2004,
voire aucun. Les utilisateurs plus confirmés pourront tirer parti de la lecture de ce manuel, par
l’apprentissage de techniques plus efficaces et la découverte des nouvelles fonctions de chaque
produit.
Remarque : Ce manuel ne constitue pas une référence complète décrivant toutes les fonctions des
outils Studio MX 2004. Pour des informations plus approfondies sur l’un des outils, voir le système
d’aide de chacun de ces produits. Pour accéder à l’aide en ligne d’un produit, ouvrez le menu Aide du
produit concerné et sélectionnez l’option Utilisation de Dreamweaver, Utilisation de Flash, Aide de
Fireworks ou Utilisation de FreeHand. Le guide d’utilisation de ColdFusion est disponible à partir du
menu Aide de Dreamweaver.
Apprentissage des fonctions de base de Studio
Pour acquérir les bases de l’utilisation de Dreamweaver, Flash, Fireworks, FreeHand et
ColdFusion, commencez par lire le présent manuel. Passez ensuite aux autres ressources
disponibles : didacticiels, aides en ligne et assistance en ligne de Macromedia.
Utilisation de ce manuel
Le présent manuel est scindé en deux parties. La première partie (chapitres 1 à 6) propose une
présentation générale et une explication des concepts permettant de bien démarrer avec
Studio MX 2004, et comporte un chapitre vous expliquant comment configurer votre système
pour développer une application ColdFusion. La seconde partie comporte un chapitre décrivant
le processus de développement d’un site Web, ainsi que sept didacticiels vous guidant dans la
création de tous les éléments qui composent un site Web dynamique simple et fonctionnel.
Vous pouvez lire les chapitres dans l’ordre ou bien prendre connaissance de la suite de cette
introduction avant de passer au chapitre ou au didacticiel de votre choix. La liste suivante décrit le
contenu de chaque chapitre :
9
• Le présent chapitre d’introduction décrit comment installer Studio MX 2004 ; les outils Studio
•
•
•
•
•
•
•
vous y sont également rapidement présentés. Lisez ce chapitre en premier, puis étudiez celui ou
ceux qui vous intéressent en priorité.
Chapitre 2, Nouveautés de Studio MX 2004, page 19, présente les nouvelles fonctions mises à
disposition dans les outils Studio MX 2004.
Chapitre 3, Espace de travail de Studio MX 2004, page 31, présente les espaces de travail des
applications Dreamweaver, Flash, Fireworks et FreeHand. Chacun de ces espaces de travail
ayant évolué dans nombre de ses aspects, vous trouverez peut-être intéressant de lire ce chapitre
même si vous connaissez déjà les produits.
Chapitre 4, Description des applications Web, page 55, fait le point sur le contexte conceptuel
des applications Web et leur fonctionnement.
Chapitre 5, Installation d’un serveur Web, page 67, explique aux utilisateurs Windows comment
installer et utiliser un serveur Web Microsoft sur un ordinateur local. Il explique également aux
utilisateurs Macintosh comment tester le serveur Web Apache déjà installé sur leurs systèmes.
Chapitre 6, Configuration d’un exemple de site ColdFusion, page 73, vous guide pas à pas dans
l’installation du serveur d’application ColdFusion MX (lequel comprend un serveur Web), la
définition d’un site Dreamweaver et la création d’une connexion à la base de données. Vous
devez mener à bien toutes les procédures décrites dans ce chapitre si vous souhaitez terminer
l’ensemble des didacticiels dans la seconde partie de ce guide.
Chapitre 7, Processus de développement Web, page 91, propose un scénario idéal d’organisation
du travail pour le développement d’un site dynamique.
Les didacticiels suivant le chapitre 7 vous expliquent comment développer les éléments
communs d’un site Web dynamique, dont des graphismes, du contenu Flash et une fonction
de recherche ColdFusion.
Le chapitre 6 Configuration d’un exemple de site ColdFusion et les didacticiels utilisent l’exemple
de contenu fourni avec Studio MX 2004. Si vous préférez créer votre premier site Studio avec vos
propres contenus et mises en forme, vous pouvez le faire, mais les didacticiels sont plus faciles à
suivre avec les contenus d’exemple fournis.
Autres ressources
Les outils de la suite Studio MX 2004 offrent des ressources variées pour vous aider à acquérir
rapidement une bonne connaissance des programmes et vous sentir à l’aise dans la création de vos
propres sites. Vous pouvez également trouver une aide en ligne, un support technique et de la
documentation explicative sur le site Web de Macromedia.
L’ensemble des didacticiels accompagnant chaque produit permet de compléter la formation
initiale sur des sujets plus précis, par l’apport d’informations non traitées dans ce manuel.
permettent de découvrir les fonctions de base de chaque produit.
Pour y accéder, ouvrez le menu Aide de chaque produit.
Les manuels de démarrage
fournit des informations complètes permettant d’exploiter toutes les
possibilités des outils Studio MX 2004. Pour accéder à l’aide en ligne d’un produit, ouvrez le
menu Aide du produit concerné et sélectionnez l’option Utilisation de Dreamweaver, Aide de
Fireworks, Utilisation de Fireworks ou Utilisation de FreeHand. Le guide d’utilisation de
ColdFusion est disponible à partir du menu Aide de Dreamweaver.
L’aide en ligne du produit
10
Chapitre 1 : Introduction
de l’ensemble de la documentation pour chaque produit, y compris les
manuels de démarrage, d’utilisation et autres sont inclus sur le CD de Studio MX 2004. Certaines
rubriques de référence présentes dans les manuels d’utilisation ne sont pas reprises dans cette
version PDF ; pour tout complément d’information sur ces rubriques, consultez l’aide en ligne du
produit concerné.
Des versions PDF
Des versions imprimées de la documentation pour Dreamweaver, Flash, Fireworks, FreeHand et
ColdFusion sont également disponibles à la vente auprès de Macromedia. Pour vous les procurer,
veuillez visiter le site http://dynamic.macromedia.com/fr/bin/MM/store/FR/catalog_training.jsp.
constituent une grande variété de manuels qui contribuent à
améliorer votre maîtrise des outils Studio et des autres produits Macromedia. Pour plus
d’informations, visitez www.macromedia.com/go/st2004_help_mmp/.
Les manuels Macromedia Press
Le support technique de Macromedia Studio vous apporte les réponses dont vous avez besoin,
de jour comme de nuit, avec un support technique Studio de haute qualité fourni par des
ingénieurs connaissant le produit. Pour plus d’informations, visitez www.macromedia.com/go/
st2004_support_fr/.
La formation et certification Macromedia Studio vous aide à développer vos compétences avec
Studio grâce à des essais pratiques et à des mises en situation. Vous avez le choix entre une
formation avec un professeur ou une formation en ligne. Vous pouvez même combiner les deux
solutions de façon à créer une véritable formation personnalisée. Pour plus d’informations, visitez
www.macromedia.com/go/studio_training_fr/.
vous informe sur les dernières tendances et
techniques de développement de Studio. Il fournit des didacticiels, des articles et des exemples
d’application vous aidant à travailler de manière efficace Pour plus d’informations, visitez
www.macromedia.com/go/developer_studio_fr/.
Le centre des développeurs Macromedia Studio
Par ailleurs, vous pouvez trouver des mises à jour régulières d’astuces, de notes techniques,
d’exemples, de didacticiels, ainsi que des informations diverses pour tous les produits
Studio MX 2004 au centre de support Macromedia (www.macromedia.com/fr/support/).
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
• Les options de menu sont indiquées comme suit : intitulé du menu > intitulé de l’option de
•
•
•
menu. Les options des sous-menus sont indiquées comme suit : intitulé du menu > intitulé du
sous-menu > intitulé de l’option de menu.
La police de code indique les intitulés des balises et attributs HTML, ainsi que le texte
utilisé littéralement dans les exemples.
La police de code en italique indique les éléments remplaçables (parfois appelés
métasymboles) dans le code.
Texte en gras indique le texte que vous devez saisir exactement à l’identique.
Présentation générale des outils Studio
La suite Studio MX 2004 rassemble cinq produits Macromedia : Dreamweaver, Flash, Fireworks,
FreeHand et ColdFusion. Chacun d’eux fait l’objet d’une rapide présentation dans cette section.
Présentation générale des outils Studio
11
Dreamweaver MX 2004
Dreamweaver MX2004 est un éditeur HTML professionnel destiné à la conception, au codage et
au développement de sites, de pages et d’applications Web. Quel que soit l’environnement de
travail utilisé (codage manuel HTML ou environnement d’édition visuel), Dreamweaver propose
des outils qui vous aideront à créer des applications Web.
Les fonctions d’édition visuelles de Dreamweaver vous permettent de créer rapidement des pages
sans rédiger une seule ligne de code. Si vous préférez faire appel au codage manuel, Dreamweaver
intègre également de nombreux outils et fonctions de codage. Avec Dreamweaver, vous pouvez
créer des applications Web dynamiques reposant sur des bases de données utilisant les langages
serveur ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP et PHP.
Dreamweaver fournit également un support de pointe pour l’utilisation de feuille de style en
cascade (CSS) avec les fonctions de conception et de codage manuel, vous offrant une plus grande
flexibilité, ainsi qu’un moyen de contrôle plus efficace de l’apparence de votre page Web. Que
vous soyez un expert cherchant à améliorer vos procédures de création actuelles ou un débutant
souhaitant créer des feuilles de style en cascade dans vos conceptions, Dreamweaver répondra à
vos besoins.
Pour plus d’informations sur Dreamweaver et ses fonctions, voir l’aide Utilisation de
Dreamweaver.
Pour découvrir les nouveautés de Dreamweaver MX 2004, voir Chapitre 2, Nouveautés de
Studio MX 2004, page 19.
Flash MX 2004
Flash MX 2004 vous apporte tout ce dont vous avez besoin pour créer et déployer des
applications Internet puissantes, au contenu d’une grande richesse. Que vous souhaitiez créer des
graphiques animés ou des applications de données, Flash possède tous les outils nécessaires pour
générer de superbes résultats et vous proposer les meilleures expériences utilisateur sur de
multiples plates-formes et périphériques.
Les éléments d’interface prédéfinis et les modèles permettent à la fois aux utilisateurs confirmés
comme aux débutants de mettre en place des systèmes interactifs complexes rapidement et en
toute facilité en utilisant le glisser-déposer. Concepteurs et développeurs peuvent élaborer très
rapidement des interfaces utilisateur grâce au haut niveau de contrôle et de fonctionnalité qu’offre
Flash Player. Grâce à un éditeur ActionScript évolué, un puissant débogueur et une gestion
optimisée des données en XML, ils peuvent par ailleurs s’appuyer sur leurs connaissances
existantes pour produire des applications Web en utilisant le module Flash comme support de
présentation.
Pour plus d’informations sur Flash et ses fonctions, voir l’aide Utilisation de Flash.
Pour découvrir les nouveautés de Flash MX 2004, voir Chapitre 2, Nouveautés de
Studio MX 2004, page 19.
12
Chapitre 1 : Introduction
Flash MX Professionnel 2004
Si vous avez acheté un exemplaire de Macromedia Studio MX 2004 avec Flash Professionnel,
votre version inclut l’environnement de développement Flash haut de gamme pour la création
d’applications de données, de présentations interactives et d’expériences vidéo de haute qualité.
Avec toutes les fonctions de Macromedia Flash MX 2004 et bien davantage,
Macromedia Flash MX Professionnel 2004 est la version de Macromedia Flash la plus complète.
Les développeurs peuvent créer rapidement des applications de données efficaces avec un
développement basé sur les formulaires, une liaison de données puissante et une intégration
Microsoft Visual Source Safe. Les professionnels de l’audiovisuel peuvent ajouter de l’interactivité
et des interfaces personnalisées aux vidéos de hautes qualité et présenter le client vidéo le plus
omniprésent dans le monde, Macromedia Flash Player. Vous pouvez aussi déployer du contenu et
des applications sur des appareils et des téléphones portables pour atteindre l’audience la plus
large à l’aide d’émulateurs, de modèles prédéfinis et d’échantillons.
De plus, Flash Professionnel vous permet d’ajouter des fonctions spécialisées avec des extensions
tierces s’intégrant directement à l’interface de l’application et au processus de création. Vous
pouvez ajouter des animations 3D vectorielles, des effets raster, de l’animation de texte
automatisée, des bitmaps haute résolution interactifs, des graphiques à présentation dynamique et
de nombreuses autres fonctions.
Pour plus d’informations sur Flash Professionnel et ses fonctions, voir l’aide Utilisation de Flash.
Pour découvrir les nouveautés de Flash MX 2004 Professionnel, voir Chapitre 2, Nouveautés de
Studio MX 2004, page 19.
Fireworks MX 2004
Fireworks MX 2004 offre la solution de facilité pour créer, optimiser et exporter des graphismes
interactifs depuis un environnement unique orienté vers le Web. L’environnement rationalisé de
cet outil permet de tout créer, depuis le simple bouton graphique jusqu’à l’effet de survol ou le
menu contextuel le plus sophistiqué. Avec Fireworks MX 2004, vous pouvez créer, modifier et
animer des graphismes Web, ajouter de une interactivité avancée et optimiser vos images. Vous
avez également la possibilité d’automatiser votre travail pour faire face aux exigences de longues
modifications et mises à jour.
De puissants outils de création, la prise en charge des principaux formats de fichiers et
normes HTML, l’intégration aux éditeurs HTML les plus courants sont autant d’atouts qui
permettent aux concepteurs d’exploiter aisément Fireworks dans n’importe quel environnement
de travail. L’espace de travail unique, orienté vers le Web, offre des outils robustes d’édition
bitmap, un contrôle précis du texte et une grande liberté de création. La prise en charge étendue
des différents formats de fichier, des normes émergentes, telles que l’XHTML, et le respect des
dispositions de la législation américaine (Section 508) garantissent la pérennité de vos créations
face aux exigences actuelles et à venir.
Pour plus d’informations sur Fireworks et ses fonctions, voir l’aide de Fireworks.
Pour découvrir les nouveautés de Fireworks MX 2004, voir Chapitre 2, Nouveautés de
Studio MX 2004, page 19.
Présentation générale des outils Studio
13
FreeHand MX
FreeHand MX est une application de dessin vectorielle. Avec FreeHand, vous pouvez créer des
graphismes vectoriels redimensionnables et imprimables dans toute résolution, sans perte de
détails ou de lisibilité.
Vous pouvez utiliser FreeHand pour créer, imprimer et mettre en ligne des objets d’illustration
graphique, tels que des logos et des bannières publicitaires. FreeHand vous permet aussi de
transformer vos dessins en animations Flash.
Son interface utilisateur intègre un espace de travail et un panneau d’outils cohérents avec ceux
des autres applications Studio MX 2004, afin de vous offrir une solution pour le Web et
l’impression véritablement intégrée.
Pour plus d’informations sur FreeHand et ses fonctions, voir l’aide Utilisation de FreeHand.
Pour découvrir les nouveautés de FreeHand MX, voir Chapitre 2, Nouveautés de Studio MX 2004,
page 19.
ColdFusion MX
ColdFusion MX est un environnement rapide de création de scripts serveur. Associant une grande
facilité de création de scripts, une facilité de connectivité aux données d’entreprise et de puissantes
fonctions intégrées de recherche et de présentation en tableaux, ColdFusion MX permet aux
développeurs de construire et déployer facilement des sites Web dynamiques, des systèmes de
publication de contenu, des applications en libre service, des sites commerciaux, etc.
Particulièrement souple, l’environnement ColdFusion MX prend en charge les systèmes
d’exploitation Windows, Linux et UNIX, s’intègre aux standards Java et .NET et offre une
simplicité d’utilisation sans égale pour le XML et les services Web. ColdFusion apporte une
connectivité de haute performance avec les clients Flash et la prise en charge native d’ActionScript
côté serveur. Exploitable comme serveur autonome ou en déploiement sur serveurs d’applications
d’entreprise (IBM WebSphere par exemple), ColdFusion MX permet à l’équipe de
développement d’obtenir plus rapidement des applications ayant un meilleur rapport utilisateur.
Pour plus d’informations sur ColdFusion, voir l’aide Utilisation de ColdFusion (disponible à partir
du menu Aide de Dreamweaver).
14
Chapitre 1 : Introduction
Installation de Studio MX 2004
Cette section décrit la configuration système requise minimale et les procédures d’installation
pour Studio MX 2004. Pour obtenir une liste complète de la configuration système requise du
produit et des recommandations, y compris la configuration système requise pour
ColdFusion MX, veuillez consulter le site www.macromedia.com/go/sysreqs/.
Configuration requise
Vous devez vous équiper du matériel et des logiciels suivants pour exécuter les outils
Studio MX 2004 :
Configuration système requise minimale sous Microsoft Windows
•
•
•
•
Processeur Intel Pentium III 600 MHz ou équivalent
Windows 98 Deuxième Edition, Windows 2000 ou Windows XP
256 Mo de RAM (512 Mo recommandés)
800 Mo d’espace disque disponible
Configuration système requise minimale sur Macintosh
•
•
•
•
Processeur PowerPC G3 500 MHz
Mac OS 10.2.6
256 Mo de RAM (512 Mo recommandés)
500 Mo d’espace disque disponible
Avant toute utilisation, ce produit doit être activé via l’Internet ou par téléphone. Les utilisateurs
de Windows 98 Deuxième Edition doivent disposer de Microsoft Internet Explorer 5.1 ou une
version ultérieure pour procéder à l’activation sur Internet.
Pour plus de détails, voir Activation et enregistrement du produit, page 18.
Installation de Studio MX 2004
La suite Studio MX 2004 est très facile à installer, que ce soit sur un système Windows ou
Macintosh. Macromedia préconise l’installation en une seule opération de la suite complète ; vous
pouvez cependant installer individuellement chaque application si vous le souhaitez.
La version Developer Edition de ColdFusion MX pour Windows s’installe séparément. Pour plus
de détails, voir Installation de ColdFusion MX, page 74.
Installation de Studio MX 2004 sous Windows
Suivez la procédure décrite ci-après pour installer Studio MX 2004 sous Windows.
Installation de Studio MX 2004
15
Pour installer Studio MX 2004 sous Windows :
1 Insérez le CD de Studio MX 2004 dans le lecteur de CD-ROM de votre ordinateur, pour
afficher l’écran d’installation de Studio MX 2004.
Remarque : Si cet écran n’apparaît pas automatiquement, ou si vous effectuez l’installation
depuis un lecteur réseau, ouvrez l’Explorateur de Windows pour rechercher le programme
Installer.exe Studio MX 2004 dans le répertoire Accessibilité, puis double-cliquez sur le
programme et suivez les instructions d’installation.
2 Procédez de l’une des manières suivantes :
■
■
Sélectionnez l’option d’installation de Macromedia Studio MX 2004 proposée dans l’écran
d’installation. (Il doit s’agir de la valeur par défaut.) Macromedia recommande la sélection
de cette option.
Si vous préférez n’installer qu’un seul programme, sélectionnez-le dans l’écran. Répétez la
procédure pour installer séparément les autres produits.
Remarque : Avant d’installer ColdFusion MX, voir Installation de ColdFusion MX, page 74.
3 Cliquez sur Installation
4 Suivez les instructions d’installation.
Si vous avez sélectionné l’option d’installation de Macromedia Studio MX 2004, le fichier
Lisezmoi de Macromedia Studio MX 2004 s’ouvre automatiquement. Si vous avez installé un seul
produit, le fichier d’informations s’y rapportant s’ouvre.
La fenêtre principale d’installation reste ouverte tant que vous n’avez pas cliqué sur le bouton
Fermer.
Les applications Studio MX 2004 installées sont à présent disponibles dans le menu Démarrer de
Windows sous Programmes > Macromedia.
Pour explorer la documentation supplémentaire fournie avec Studio MX 2004, sélectionnez
l’option d’exploration du contenu du CD sur l’écran d’installation.
16
Chapitre 1 : Introduction
Pour désinstaller les programmes :
• Sélectionnez Démarrer > Paramètres > Panneau de configuration > Ajout/Suppression de
programmes, puis sélectionnez l’application que vous souhaitez désinstaller.
Installation de Studio MX 2004 sur Macintosh
Suivez la procédure décrite ci-après pour installer Studio MX 2004 sur Macintosh.
Pour installer Studio MX 2004 sur Macintosh :
1 Insérez le CD de Macromedia Studio MX 2004 dans le lecteur de CD-ROM de votre
ordinateur, pour afficher l’écran d’installation de Macromedia Studio MX 2004.
Si cet écran ne s’ouvre pas automatiquement, double-cliquez sur l’icône d’installation de
Studio MX 2004 du CD-ROM.
2 Procédez de l’une des manières suivantes :
■ Sélectionnez l’option d’installation de Macromedia Studio MX 2004 proposée dans l’écran
d’installation. (Il doit s’agir de la valeur par défaut.) Macromedia recommande la sélection
de cette option.
■ Si vous préférez n’installer qu’un seul programme, sélectionnez-le dans l’écran. Répétez la
procédure pour installer séparément les autres produits.
3 Cliquez sur Installation
4 Suivez les instructions d’installation.
Remarque : Si l’on vous demande une phrase secrète, entrez le mot de passe de connexion de
l’administrateur système et cliquez sur OK .
Si vous avez sélectionné l’option d’installation de Macromedia Studio MX 2004, le fichier
Lisezmoi de Macromedia Studio MX 2004 s’ouvre automatiquement. Si vous avez installé un seul
produit, le fichier d’informations s’y rapportant s’ouvre.
La fenêtre principale d’installation reste ouverte tant que vous n’avez pas cliqué sur le bouton
Fermer.
Les applications Studio MX 2004 installées sont à présent disponibles dans le dossier
Applications.
Pour explorer la documentation supplémentaire fournie avec Studio MX 2004, sélectionnez
l’option d’exploration du contenu du CD sur l’écran d’installation.
Pour désinstaller les programmes :
• Glissez-déposez le dossier du produit à désinstaller depuis le dossier Applications dans la
corbeille.
Installation de Studio MX 2004
17
Activation et enregistrement du produit
Si vous disposez d’une licence pour utilisateur unique, vous devez activer votre licence pour les
produits Macromedia sous trente jours après installation du programme. Cette activation peut
être effectuée rapidement et en toute simplicité via Internet ou par téléphone et ne prend que
quelques minutes. Vous ne devez fournir aucune information personnelle, uniquement le numéro
de série de votre produit.
Remarque : Les utilisateurs de Windows 98 Deuxième Edition doivent disposer de Microsoft
Internet Explorer 5.1 ou une version ultérieure pour procéder à l’activation sur Internet.
Pour activer un produit :
1 Double-cliquez sur l’icône exécutable de Dreamweaver, Flash, Fireworks ou FreeHand pour
démarrer l’un des produits.
2 Cliquez sur Continuer pour passer à l’écran suivant.
3 Entrez votre numéro de série dans la fenêtre Activation des produits Macromedia et cliquez sur
Continuer.
Une fois activé, votre produit est prêt à être utilisé. Lorsque vous activez un produit de la suite
Studio MX 2004, tous les autres le sont également.
Pour plus d’informations sur l’activation du produit, connectez-vous au site
www.macromedia.com/go/activation_fr.
Il est judicieux d’enregistrer votre copie des produits Studio MX 2004 par voie électronique ou
par courrier. L’enregistrement vous permet de bénéficier du support technique de Macromedia.
Lorsque vous vous enregistrez, vous pouvez demander à recevoir des informations de dernière
minute concernant les mises à jour et les nouveaux produits Macromedia. Vous pouvez également
demander à être averti par courriel des dernières mises à jour disponibles pour les produits et à
être informé des nouvelles informations placées sur le site www.macromedia.com/fr/.
Pour enregistrer un produit :
• Dans l’un des produits de la suite Studio MX 2004, ouvrez le menu Aide et sélectionnez au
choix l’option d’enregistrement en ligne ou par courrier, avec impression d’un formulaire.
Lorsque vous enregistrez un produit de la suite Studio MX 2004, tous les autres le sont
également.
18
Chapitre 1 : Introduction
CHAPITRE 2
Nouveautés de Studio MX 2004
Que vous soyez totalement débutant avec les produits Macromedia Studio MX 2004 ou déjà
expérimenté sous Dreamweaver, Flash, Fireworks ou FreeHand, vous pouvez tirer parti des
nombreuses nouveautés qui vous sont proposées dans les outils Macromedia Studio MX 2004. Ce
chapitre répertorie toutes les nouvelles fonctions, par produit et comme suit :
Nouveautés de Dreamweaver MX 2004, page 19
Nouveautés de Flash MX 2004, page 23
Nouveautés de Flash MX Professionnel 2004, page 25
Nouveautés de Fireworks MX 2004, page 26
Nouveautés de FreeHand MX, page 28
Nouveautés de Dreamweaver MX 2004
Sous sa nouvelle interface rationalisée, Dreamweaver MX 2004 cache une performance produit
accrue. Il propose également de nombreuses nouvelles fonctions qui en améliorent la convivialité
et vous aident à créer des pages, que vous travailliez dans les environnements de création ou de
codage.
Simplification du produit et de l’interface de développement
L’interface de Dreamweaver est plus intuitive pour vous aider à améliorer votre productivité et la
qualité de votre travail.
Amélioration de la barre Insérer : grâce à sa présentation plus simple, la barre Insérer prend
moins de place dans l’environnement de travail. Une nouvelle catégorie de favoris vous permet en
outre de la personnaliser en regroupant les objets que vous utilisez le plus souvent. Pour plus
d’informations, voir Barre Insérer dans l’aide Utilisation de Dreamweaver.
ces commandes vous
permettent de copier et de coller un document Microsoft Word ou Excel directement dans
Dreamweaver. Lorsque vous collez un document Word ou Excel, Dreamweaver en conserve la
mise en forme et génère du code HTML de bonne qualité. Pour plus d’informations, voir Copie et
collage de texte à partir de documents MS Office dans l’aide Utilisation de Dreamweaver.
Commandes Copier/Coller pour Microsoft Word et Microsoft Excel :
19
cette fonction vous permet de voir l’impact des
opérations de redimensionnement de colonnes sur vos tableaux. Elle simplifie également la
sélection d’éléments dans les tableaux. Pour plus d’informations sur le redimensionnement, voir
Redimensionnement des tableaux, des colonnes et des lignes dans l’aide Utilisation de Dreamweaver.
Pour plus d’informations sur l’utilisation du mode Tableaux développés pour la sélection
d’éléments, voir Utilisation du mode Tableaux développés pour une modification de tableau plus
simple dans l’aide Utilisation de Dreamweaver.
Affichage visuel des modifications de tableau :
Modification de l’interface utilisateur : l’interface
utilisateur a été repensée pour optimiser
l’espace de travail utilisable et afficher le contexte et les éléments actifs de manière plus claire.
Désormais, l’interface est plus logique et intuitive. Pour plus d’informations sur l’espace de travail
de Dreamweaver, voir A propos de l’espace de travail de Dreamweaver dans l’aide Utilisation de
Dreamweaver.
Page de démarrage : cette page vous permet d’accéder rapidement aux derniers fichiers utilisés,
de créer de nouveaux fichiers et d’accéder aux didacticiels de Dreamweaver. Elle s’affiche lorsque
vous démarrez Dreamweaver ou lorsque aucun document n’est ouvert. Pour plus d’informations
sur l’affichage ou le masquage de la page de démarrage, voir Affichage et masquage de la page de
démarrage dans l’aide Utilisation de Dreamweaver.
cette option vous permet d’indiquer à Dreamweaver de rouvrir les
documents sur lesquels vous travailliez lorsque vous redémarrez Dreamweaver. Pour plus
d’informations sur la configuration de cette option, voir Définition des préférences générales de
Dreamweaver dans l’aide Utilisation de Dreamweaver.
Bureau enregistré :
sous Windows, Dreamweaver prend en charge tous les
codages de texte pris en charge par Internet Explorer. Dans Dreamweaver, vous pouvez vous servir
de la quasi-totalité des polices de caractères installées sur votre système en ayant la certitude que
Dreamweaver en assurera correctement le rendu et l’enregistrement. Pour plus d’informations sur
la définition des codages de police, voir Définition des préférences de police pour
l’affichage Dreamweaver dans l’aide Utilisation de Dreamweaver.
Prise en charge intégrale d’Unicode :
Secure FTP : cette fonction vous permet de crypter intégralement tous les transferts de fichiers et
d’empêcher les utilisateurs non autorisés d’accéder à vos données, fichiers, noms d’utilisateur et
mots de passe. Pour plus d’informations sur la configuration d’une connexion à distance à l’aide
du protocole FTP, voir Configuration d’un dossier distant dans l’aide Utilisation de Dreamweaver.
Actualisation de la mise en page et de l’environnement de création
Dreamweaver s’enrichit des nouvelles fonctions CSS présentées ci-dessous, qui vous permettent
de rendre vos projets dynamiques et interactifs de manière plus sophistiquée. Il permet également
d’afficher immédiatement les modifications apportées pour améliorer l’édition visuelle.
Validation dynamique entre navigateurs : cette fonction permet de vérifier automatiquement la
compatibilité du document ouvert avec différents navigateurs lors de chaque enregistrement.
Spécifiez les navigateurs à vérifier et Dreamweaver s’assure que les pages ne contiennent pas de
balises ou d’éléments CSS non pris en charge par ces navigateurs. Pour plus d’informations, voir
Vérification de la compatibilité du navigateur dans l’aide Utilisation de Dreamweaver.
20
Chapitre 2 : Nouveautés de Studio MX 2004
CSS pertinents : cet onglet affiche les règles CSS appliquées à la sélection en cours eu mode
Code ou Création. Cliquez sur une règle pour connaître les attributs qu’elle gère (style de bordure,
marge, marge intérieure, taille de texte, etc.). Les attributs ignorés sont mis en évidence. Des
modifications rapides peuvent être apportées directement et s’affichent instantanément en mode
Création. Pour plus d’informations, voir Onglet Propriétés CSS dans l’aide Utilisation de
Dreamweaver.
Visualisation de mise en forme CSS : la mise en forme de pages à l’aide de feuilles de style en
cascade (CSS) est désormais beaucoup plus simple. Vous pouvez facilement sélectionner des
balises div et d’autres blocs de contenu en mode Création, puis en modifier les propriétés sous
l’onglet Propriétés CSS. Pour plus d’informations, voir Mise en forme des pages avec les styles CSS
dans l’aide Utilisation de Dreamweaver.
Amélioration du rendu CSS : Dreamweaver peut afficher les mises en forme complexes reposant
sur les styles CSS avec plus de précision. L’amélioration du rendu vous permet de réaliser des
mises en forme plus sophistiquées et d’effectuer des manipulations visuelles poussées à l’aide des
outils de création de Dreamweaver.
le panneau propose désormais davantage d’options de
modification des styles dans le document. A présent, vous pouvez également appliquer
directement des styles depuis l’inspecteur des propriétés de texte. Pour plus d’informations, voir
Utilisation des feuilles de style en cascade dans l’aide Utilisation de Dreamweaver.
Amélioration du panneau Styles CSS :
Inspecteur des propriétés de texte reposant sur des feuilles de style en cascade (CSS) : cet
inspecteur dresse la liste de tous les styles disponibles applicables au texte et comprend une
fonction d’aperçu permettant de connaître l’aspect du texte après application du style. Pour plus
d’informations, voir Inspecteur des propriétés et formatage de texte dans l’aide Utilisation de
Dreamweaver.
Propriétés de page reposant sur des feuilles de style en cascade (CSS) : ces propriétés vous
offrent un meilleur contrôle des propriétés de page (affichage des en-têtes et des liens, par
exemple) à l’aide d’éléments de codage CSS récents. Pour plus d’informations, voir A propos de la
définition des propriétés de page dans l’aide Utilisation de Dreamweaver.
Barre d’outils de retouche d’image intégrée : cette fonction vous permet d’effectuer des
retouches d’image simples dans Dreamweaver à l’aide de la technologie Macromedia Fireworks.
Vous avez la possibilité de recadrer, de redimensionner ou encore de rééchantillonner des images
sans quitter Dreamweaver. Pour plus d’informations, voir Modification d’images dans
Dreamweaver dans l’aide Utilisation de Dreamweaver.
Environnement de codage puissant et ouvert
Dreamweaver offre aux rédacteurs de code les nouvelles fonctions présentées ci-dessous, qui
concernent notamment le mode Création et la possibilité de modifier des fichiers sans créer de site
Dreamweaver. Dreamweaver prend également en charge les technologies de serveur actuelles.
Amélioration de l’inspecteur de balises : cet inspecteur affiche la liste des propriétés disponibles
applicables à la sélection en cours et vous permet d’effectuer des modifications rapides et
complètes. Pour plus d’informations, voir Modification d’attributs dans l’inspecteur de balises dans
l’aide Utilisation de Dreamweaver.
Nouveautés de Dreamweaver MX 2004
21
Modification de fichiers sans site : cette fonction vous permet de travailler directement sur un
serveur FTP ou RDS sans créer de site Dreamweaver. Pour plus d’informations sur la
configuration de Dreamweaver pour travailler sur un serveur, voir Configuration de Dreamweaver
pour fonctionner sans avoir à définir de site dans l’aide Utilisation de Dreamweaver. Pour plus
d’informations sur la configuration d’un site Dreamweaver, voir Configuration d’un nouveau site
Dreamweaver dans l’aide Utilisation de Dreamweaver.
Comportements de serveur PHP : ces comportements vous permettent de créer un ensemble de
pages Principale-Détails et des pages d’authentification des utilisateurs. Pour plus d’informations,
voir Création d’un ensemble de pages Principale-Détails (PHP) et Création de pages limitant l’accès à
votre site (PHP) dans l’aide Utilisation de Dreamweaver.
de nouvelles
méthodes plus perfectionnées (notamment de nouveaux inspecteurs des propriétés) vous sont
proposées pour créer et modifier des formulaires Web ASP.NET en mode Création. Pour plus
d’informations, voir Création rapide d’applications ASP et JSP dans l’aide Utilisation de
Dreamweaver.
Amélioration de la prise en charge des contrôles de formulaire ASP.NET :
Menu contextuel en mode Code : ce menu vous permet de modifier rapidement la mise en
forme du code sélectionné. Pour plus d’informations, voir Modification rapide d’une sélection de
code dans l’aide Utilisation de Dreamweaver.
22
Chapitre 2 : Nouveautés de Studio MX 2004
Nouveautés de Flash MX 2004
Les nouvelles fonctions de Flash MX 2004 améliorent la productivité, élargissent l’éventail des
médias enrichis pris en charge et rationalisent la publication.
Productivité
Flash MX 2004 inclut de nombreuses fonctions visant à simplifier des tâches autrefois complexes
et donc à améliorer la productivité :
Effets de scénario
Vous pouvez appliquer des effets de scénario à un objet de la scène pour
ajouter rapidement des transitions et des animations, telles que des entrées en fondu, des vols en
fondu, des affichages flous et des tornades. Pour plus d’informations, voir Utilisation des effets
scénario dans l’aide Utilisation de Flash.
Comportements Les comportements permettent d’ajouter de l’interactivité au contenu Flash
sans avoir à rédiger une seule ligne de code. Vous pouvez par exemple utiliser des comportements
pour créer un lien vers un site Web, charger des sons et des graphiques, contrôler la lecture de
vidéos intégrées, lire des clips vidéo et déclencher des sources de données. Pour plus
d’informations, voir Contrôle d’occurrences à l’aide de comportements dans l’aide Utilisation de
Flash.
Support pour l’accessibilité dans l’environnement auteur Les fonctions d’accessibilité dans
l’environnement auteur de Flash offrent des raccourcis clavier destinés à faciliter la navigation et
l’utilisation des commandes d’interface. Vous pouvez ainsi travailler avec ces éléments d’interface
sans avoir à utiliser la souris. Pour plus d’informations, voir Accessibilité dans l’environnement
auteur Flash dans l’aide Utilisation de Flash.
Flash inclut des modèles mis à jour permettant de créer des présentations,
des applications de formation en ligne, des publicités, des applications pour périphériques
mobiles et d’autres types de documents Flash couramment utilisés. Pour plus d’informations, voir
Utilisation des modèles dans l’aide Utilisation de Flash.
Modèles mis à jour
Le nouveau panneau Aide offre des références contextuelles, des
références ActionScript et des leçons dans l’environnement auteur de Flash. Pour plus
d’informations, voir Utilisation du panneau Aide dans l’aide Utilisation de Flash.
Système d’aide intégré
Le correcteur orthographique recherche les fautes d’orthographe
dans votre texte. Pour plus d’informations, voir Vérification de l’orthographe dans l’aide Utilisation
de Flash.
Correcteur orthographique
Les onglets des documents ouverts s’affichent en bas de l’espace de
travail pour que vous puissiez rapidement localiser les documents ouverts et passer facilement de
l’un à l’autre. Pour plus d’informations, voir Utilisation des onglets dans des documents multiples
(Windows uniquement) dans l’aide Utilisation de Flash.
Onglets de documents
Page de démarrage Les tâches les plus couramment utilisées sont à votre portée sur la page de
démarrage. Pour plus d’informations, voir Utilisation de la page de démarrage dans le guide Bien
démarrer avec Flash (disponible dans l’aide de Flash).
Rechercher et remplacer
La fonction Rechercher et remplacer localise et remplace une chaîne
de texte, une police, une couleur, un symbole, un fichier audio, un fichier vidéo ou un fichier
bitmap importé. Pour plus d’informations, voir Utilisation de la fonction Rechercher et remplacer
dans l’aide Utilisation de Flash.
Nouveautés de Flash MX 2004
23
Prise en charge des médias enrichis
De nouvelles fonctions de support des médias enrichis améliorent la qualité de vos présentations.
L’importation haute-fidélité vous permet d’importer des fichiers
Adobe PDF et Adobe Illustrator 10 et de préserver une représentation vectorielle précise de vos
fichiers source. Pour plus d’informations, voir Importation de fichiers Adobe Illustrator, EPS
ou PDF dans l’aide Utilisation de Flash.
Importation haute-fidélité
L’assistant d’importation vidéo simplifie le codage vidéo et offre
des codages préréglés et des modifications de clip. Pour plus d’informations, voir A propos de
l’assistant d’importation vidéo dans l’aide Utilisation de Flash.
Assistant d’importation vidéo
Rendu des petites polices
Les petites polices ont un rendu plus net. Pour plus d’informations,
voir Création de texte dans l’aide Utilisation de Flash.
Publication
De nouvelles fonctions de publication facilitent la détection des versions de Flash Player,
améliorent l’accessibilité et simplifient la localisation.
Vous pouvez désormais publier les fichiers SWF avec des fichiers
associés qui détectent si la version spécifiée de Flash Player est installée sur l’ordinateur de
l’utilisateur. Vous avez la possibilité de configurer les fichiers publiés afin que l’utilisateur soit
dirigé vers des fichiers secondaires s’il ne dispose pas de cette version de Flash Player. Pour plus
d’informations, voir Configuration des paramètres de publication pour la détection de Flash Player
dans l’aide Utilisation de Flash.
Détection de Flash Player
Vous pouvez créer des profils afin d’enregistrer les paramètres de
publication, puis les exporter pour les utiliser sur tous vos projets, pour une plus grande
cohérence. Pour plus d’informations, voir Création d’un profil de publication dans l’aide Utilisation
de Flash.
Profils de publication
Accessibilité et composants Les nouvelles fonctions d’accessibilité et une nouvelle génération
de composants vous offrent des fonctions d’organisation des tabulations et de gestion du focus
pour les tabulations, ainsi qu’un support renforcé pour les lecteurs d’écran tiers et les programmes
codés.
Une meilleure prise en charge de la globalisation et d’Unicode
permettent une programmation multilingue, utilisant tous les jeux de caractères. Pour plus
d’informations, voir Création de texte multilingue dans l’aide Utilisation de Flash.
Globalisation et Unicode
La version 7 de Flash Player est doté d’un modèle de sécurité plus strict que les
versions antérieures. Dans le nouveau système de filtrage de domaine, le domaine de données
auquel vous voulez accéder doit correspondre exactement au domaine du fournisseur de données
pour que les domaines communiquent. La restriction HTTPS/HTTP spécifie qu’un fichier SWF
utilisant des protocoles non sécurisés (non HTTPS) ne peut pas accéder au contenu chargé à
l’aide d’un protocole sécurisé (HTTPS), même si les deux fichiers résident dans le même
domaine. Pour plus d’informations, voir Fonctions de sécurité de Flash Player dans le Guide de
référence ActionScript de l’aide.
Sécurité
24
Chapitre 2 : Nouveautés de Studio MX 2004
Autres améliorations
Les performances de Flash Player ont été considérablement améliorées et ActionScript a été
perfectionné pour respecter les spécifications du langage script ECMA. Par ailleurs, Flash garde
désormais la trace des interactions afin qu’elles puissent être converties en commandes
réutilisables.
Performances d’exécution de Flash Player Les performances d’exécution de Player ont été
multipliées par 2 et jusqu’à 5 pour la vidéo, la programmation et le rendu général de l’affichage.
ActionScript 2 est un langage orienté objet qui suit la spécification du langage
script ECMA et supporte l’héritage, le typage fort et le modèle d’événement. Pour plus
d’informations, voir Conformité avec le standard ECMA-262, quatrième édition dans le Guide de
référence ActionScript de l’aide.
ActionScript 2
Le panneau Historique assure le suivi de toutes les interactions pour que
vous puissiez les convertir en commandes réutilisables. Pour plus d’informations, voir Utilisation
du panneau Historique dans l’aide Utilisation de Flash.
Panneau Historique
Nouveautés de Flash MX Professionnel 2004
Flash MX Professionnel 2004 offre toutes les fonctions disponibles dans Flash MX 2004, plus un
éventail de fonctions inédites qui vous permettront d’améliorer le développement et la conception
de vos applications. Ces fonctions incluent l’environnement de développement visuel sur écran et
des outils de gestion interactive des données, vous permettant de renforcer la productivité de votre
équipe.
Environnement de développement visuel sur écran
Un environnement visuel de programmation
Flash MX Professionnel 2004 introduit un
environnement visuel de programmation s’appuyant sur des formulaires, un environnement idéal
pour le développement d’applications. Pour plus d’informations, voir Diapositives et Formulaires
(Flash Professionnel uniquement) dans l’aide Utilisation de Flash.
Les écrans de diapositives fournissent une
fonctionnalité conçue pour les présentations séquentielles. Pour plus d’informations,
voir Diapositives et Formulaires (Flash Professionnel uniquement) dans l’aide Utilisation de Flash.
Programmation basée sur les diapositives
Une nouvelle génération de composants
Les nouveaux composants prennent désormais en charge la
gestion du focus, pour vous permettre de contrôler la navigation par tabulation. Même si les
composants ont une nouvelle présentation plus sophistiquée, vous pouvez facilement leur
appliquer une nouvelle enveloppe pour modifier leur aspect. Pour plus d’informations, voir
Avantages des composants v2 dans l’aide Utilisation des composants.
Support des composants avancés
Interactivité des données
Liaison des données
La liaison des données vous permet de lier les composants à différentes
sources de données pour manipuler, afficher et mettre à jour les données à l’aide des composants
ou d’ActionScript. Pour plus d’informations, voir Liaison des données dans l’aide Utilisation de
Flash.
Nouveautés de Flash MX Professionnel 2004
25
De nouveaux
composants vous permettent de vous connecter facilement aux services Web et aux sources de
données XML. Pour plus d’informations, voir Composants Macromedia Flash MX 2004 et
Macromedia Flash MX Professionnel 2004 dans l’aide Utilisation des composants.
Connecteurs de données prédéfinis pour les services Web et XML
Améliorations des performances L’amélioration des performances des jeux d’enregistrements
volumineux permet un fonctionnement plus efficace de l’application avec de gros volumes de
données.
Productivité de l’équipe
Gestion de projet Le panneau Projet permet une gestion centralisée des fichiers du projet, le
contrôle de version, ainsi qu’une optimisation du flux de travail des utilisateurs Flash travaillant
en équipe. Pour plus d’informations, voir Utilisation des projets (Flash Professionnel uniquement)
dans l’aide Utilisation de Flash.
Contrôle des codes source Flash Professionnel intègre la gestion du code source via des
modules de systèmes de gestion de la source, tel que Microsoft Visual Source Safe. Pour plus
d’informations, voir Utilisation du contrôle de version dans les projets (Flash Professionnel
uniquement) dans l’aide Utilisation de Flash.
Nouveautés de Fireworks MX 2004
Grâce à ses nouvelles fonctions, Fireworks MX 2004 devient une application de plus en plus
accessible et offre une capacité accrue d’insertion de graphismes et d’éléments interactifs dans les
sites Web. Fireworks MX 2004 optimise la productivité des concepteurs Web expérimentés, des
développeurs HTML qui créent également des graphiques, et des développeurs Web débutants
qui doivent développer des pages Web interactives et riches en graphiques sans avoir de
connaissances techniques avancées de la programmation ou du langage JavaScript.
La page de démarrage apparaît au démarrage de Fireworks. Elle contient
différentes approches d’apprentissage du produit et vous dirige vers des emplacements auxquels
vous pouvez obtenir plus d’informations ou de l’aide. Pour plus d’informations, voir Utilisation de
la page de démarrage dans l’aide de Fireworks.
Page de démarrage
Enregistrement au format d’origine Amélioration majeure du processus de création de
Fireworks, cette nouvelle fonction vous permet d’enregistrer des documents importés dans leur
format d’origine après y avoir inséré des changements dans Fireworks. Voir Enregistrement de
documents dans d’autres formats dans l’aide de Fireworks.
Fireworks MX 2004 inclut désormais une prise en
charge complète des formats de fichiers côté serveur, tels que CFM, PHP et ASP. Voir « Working
with other Programs » (Travailler avec d’autres applications) du centre de support de Fireworks à
l’adresse suivante : www.macromedia.com/fr/support/.
Prise en charge des fichiers côté serveur
Formes automatiques Les formes automatiques sont de nouveaux objets primaires qui savent
comment déplacer leurs points et qui se comportent intelligemment lorsque vous les transformez.
Voir Dessin de formes automatiques dans l’aide de Fireworks.
Vous pouvez désormais envoyer des documents en pièce jointe
d’un courriel à partir de Fireworks. Voir « Working with other programs » (Travailler avec d’autres
applications) sur la page du centre de support Fireworks à l’adresse www.macromedia.com/fr/
support/.
Envoi sous forme de courriel
26
Chapitre 2 : Nouveautés de Studio MX 2004
Masquer/Afficher les panneaux Ce nouveau bouton vous permet de masquer et d’afficher
rapidement tous les panneaux Fireworks et de libérer de la place dans l’espace de travail. Voir
Organisation des groupes de panneaux et des panneaux dans l’aide de Fireworks.
Onglets Document (PC) Vous pouvez désormais naviguer entre plusieurs documents en
cliquant sur les onglets Document situés en bas de l’espace de travail. Voir Utilisation des onglets de
documents dans l’aide de Fireworks.
Ajuster le document Vous pouvez aisément adapter l’image à la taille du document en cliquant
sur le bouton Ajuster le document de l’Inspecteur des propriétés. Voir Réduction ou réglage du
document dans l’aide de Fireworks.
Mise à l’échelle à partir du centre Appuyez sur la touche Alt (Windows) ou Option
(Macintosh) pour que l’outil Mise à l’échelle effectue une mise à l’échelle à partir du centre. Voir
Mise à l’échelle des objets dans l’aide de Fireworks.
Outil Suppression de l’œil rouge L’outil Suppression de l’œil rouge permet d’éliminer
facilement l’effet yeux rouges sur vos photos numériques. Voir Suppression de l’effet yeux rouges sur
des photos dans l’aide de Fireworks.
Ce nouvel outil facilite le remplacement d’une couleur dans les
images bitmap de vos documents. Voir Remplacement des couleurs dans l’aide de Fireworks.
Outil Remplacer la couleur
De nouvelles options d’effets appliqués en direct
vous permettent de créer des flous artistiques et d’autres effets attrayants. Voir Utilisation des effets
en direct dans l’aide de Fireworks.
Amélioration des effets appliqués en direct
Fonction d’aperçu des menus contextuels Les menus contextuels de trait, de remplissage et de
police de l’Inspecteur des propriétés vous montrent la manière dont une nouvelle valeur de trait,
de remplissage ou de police va modifier l’objet auquel elle est appliquée. Voir Application de
couleurs, de traits et de remplissages dans l’aide de Fireworks.
La nouvelle fonction de ligne pointillée offre davantage d’options pour
créer des effets de trait utiles et attrayants. Voir Création de traits personnalisés dans l’aide de
Fireworks.
Trait de ligne pointillée
Dégradé de contour Cette fonction vous permet de créer des dégradés multicolores qui suivent
le contour d’un objet. Elle facilite la représentation d’illustrations organiques et fluides dans
Fireworks. Voir Application d’une trame en dégradé dans l’aide de Fireworks.
Bouton Gestion des fichiers Utilisez cette nouvelle barre d’outils pour archiver et extraire les
fichiers d’un site Web Macromedia Studio MX 2004. Voir Working with other
Programs (Travailler avec d’autres applications) sur la page du centre de support de Fireworks à
l’adresse suivante : www.macromedia.com/fr/support/.
Prise en charge d’Unicode
Exploitez les nouvelles fonctions de langue de votre système
d’exploitation. Les utilisateurs de la version anglaise de Fireworks MX 2004 peuvent désormais
créer du texte de description et des graphiques à double octet, et utiliser des caractères à double
octet, tels que Kanji et Hiragana, dans tout champ de texte.
Anticrénelage amélioré Basées sur l’anticrénelage système Windows ou Quartz pour
Macintosh, les différentes options d’anticrénelage améliorent la lisibilité du texte. Vous pouvez
également utiliser l’option innovante d’anticrénelage personnalisé de Fireworks. Voir Lissage du
bord des caractères dans l’aide de Fireworks.
Nouveautés de Fireworks MX 2004
27
Nouveautés de FreeHand MX
Que les illustrations que vous créez soient destinées à l’impression, au Web ou aux deux,
FreeHand MX offre de nouvelles fonctions qui en améliorent la convivialité, la créativité et la
puissance.
Remarque : La version de FreeHand MX comprise dans Studio MX 2004 est la même version
fournie avec Macromedia Studio MX Plus.
Standards et interactivité
FreeHand MX dispose d’une nouvelle interface utilisateur qui simplifie le travail et propose une
meilleure organisation de l’espace de travail. Cette nouvelle interface facilite l’apprentissage de
FreeHand si vous connaissez déjà un autre produit de la suite Macromedia Studio MX 2004,
comme Dreamweaver, Flash ou Fireworks.
Les panneaux sont désormais judicieusement ancrés ensemble sur le
bord droit de la fenêtre d’application. Totalement personnalisables, ces groupes de panneaux
peuvent être déplacés, séparés ou combinés. Pour plus d’informations, voir Utilisation des
panneaux dans l’aide Utilisation de FreeHand.
Panneaux groupés/onglets
Panneau Objet Le panneau Objet est un panneau contextuel qui vous permet d’afficher et de
modifier les propriétés des objets et textes sélectionnés. Il est très utile pour mener à bien
pratiquement toutes les opérations de dessin. Pour plus d’informations, voir Utilisation du
panneau Objet dans l’aide Utilisation de FreeHand.
Travail sous Flash Il est désormais possible de lancer Flash directement depuis FreeHand pour
modifier du contenu Flash importé. Pour plus d’informations, voir Modification d’animations
Flash importées dans l’aide Utilisation de FreeHand.
Lorsque vous travaillez sur un fichier bitmap, FreeHand peut
automatiquement démarrer Macromedia Fireworks pour vous permettre d’utiliser les outils de
modification de bitmap de ce dernier, afin de faciliter le travail de retouche ou d’optimisation du
fichier. Les deux applications associées permettent une meilleure rationalisation du travail de
création et de modification de graphismes. Pour plus d’informations, voir Utilisation d’illustrations
importées dans l’aide Utilisation de FreeHand.
Travail sous Fireworks
Le panneau Réponses vous aide à travailler plus efficacement en vous
donnant accès aux divers contenus du site Web Macromedia : didacticiels, leçons, notes
techniques et autres informations utiles. Pour plus d’informations, voir Le panneau Réponses dans
l’aide Utilisation de FreeHand.
Panneau Réponses
Puissant outil d’illustration
Les nombreuses nouvelles fonctions font de FreeHand MX un outil d’illustration très puissant.
Ce nouvel outil vous permet d’appliquer des effets d’extrusion 3D à n’importe
quel objet. Pour en savoir plus, voir Extrusion d’objets dans l’aide Utilisation de FreeHand.
Outil Extrusion
Avec FreeHand MX, il vous est désormais possible d’appliquer
plusieurs traits et remplissages à un objet, ce qui vous ouvre des perspectives pour vos illustrations.
Voir Utilisation des trames et des traits dans l’aide Utilisation de FreeHand.
Traits et remplissages multiples
28
Chapitre 2 : Nouveautés de Studio MX 2004
Effets de trame et de transparence en direct Les effets de trame en direct permettent d’obtenir
des résultats similaires à certains outils de manipulation d’images des logiciels de retouche photo,
tels que Fireworks. Ces effets font office de propriétés pour l’objet auquel ils sont appliqués ; ils ne
modifient en rien l’objet lui-même. Pour plus d’informations, voir Applications d’effets de trame en
direct dans l’aide Utilisation de FreeHand.
Les effets de transparence permettent d’obtenir un remplissage ou un trait (ou une partie
seulement) transparent ou semi-opaque. Pour en savoir plus, voir Utilisation d’un attribut d’effet
Transparence dans l’aide Utilisation de FreeHand.
Effets vectoriels en direct Ces effets permettent d’obtenir des résultats similaires à certains
autres outils de manipulation d’images de FreeHand, à l’exception près qu’ils font office de
propriétés pour l’objet auquel ils sont appliqués et ne modifient en rien l’objet en lui-même. Pour
plus d’informations, voir Application d’effets vectoriels en direct dans l’aide Utilisation de FreeHand.
Outil Fondu Les fondus sont désormais plus faciles à appliquer. L’outil vous permet de créer un
fondu en reliant deux formes par une ligne. Voir Utilisation de l’outil Fondu dans l’aide Utilisation
de FreeHand.
Trait calligraphique Cette nouvelle fonction vous permet de créer de jolies calligraphies en tant
qu’objet vectoriel. Pour plus d’informations, voir Utilisation d’attributs de traits calligraphiques
dans l’aide Utilisation de FreeHand.
Outil Gomme Ce nouvel outil vous permet d’effacer en partie les objets vectoriels. Pour en savoir
plus, voir Effacement d’un trajet dans l’aide Utilisation de FreeHand.
Canaux alpha d’image FreeHand MX prend en charge l’importation et l’affichage des canaux
alpha des fichiers communs d’image bitmap. Voir Utilisation d’images bitmap dans FreeHand dans
l’aide Utilisation de FreeHand.
Deux nouvelles trames de dégradé ont été ajoutées à
FreeHand MX : rectangulaire et en cône. Par ailleurs, les trames de dégradé proposent désormais
davantage d’options. Pour plus d’informations, voir Utilisation d’attributs de trames dégradées dans
l’aide Utilisation de FreeHand.
Nouvelles trames de dégradé
Améliorations du pinceau L’attribut Angles arrondis donne un effet plus fluide et naturel aux
passages du pinceau, en leur faisant épouser les coins et les angles fermés. Pour en savoir plus sur
les pinceaux, voir Utilisation d’attributs de traits de pinceau dans l’aide Utilisation de FreeHand.
Nouveautés de FreeHand MX
29
Fonctions liées au Web
Nombre des fonctions nouvelles ou améliorées de FreeHand MX vous aident à planifier, élaborer
la maquette et développer vos éléments de site Web. Enrichi de ces nouveautés, FreeHand MX
s’impose comme l’outil de choix pour mener à bien les premières étapes du développement d’un
site, et donc est la première application utilisée dans la suite Macromedia Studio MX 2004.
Cet outil vous permet de dessiner des lignes connecteur qui établissent un lien
dynamique entre les objets. Ces lignes connecteur s’ajustent automatiquement lorsque vous
déplacez les objets connectés dans la fenêtre de document. Pour plus d’informations, voir Liaison
dynamique d’objets dans l’aide Utilisation de FreeHand.
Outils Connecteur
Cet outil vous permet d’assigner des actions Flash à un objet. Pour plus
d’informations, voir Utilisation de l’outil Action dans l’aide Utilisation de FreeHand.
Outil Action
Zone de sortie Vous pouvez désormais imprimer ou exporter une zone de la fenêtre de
document avec l’outil Zone de sortie. Pour en savoir plus, voir Exportation d’une zone de document
dans l’aide Utilisation de FreeHand.
Paramètres simplifiés de Flash Il est à présent plus facile de contrôler les paramètres d’une
animation Flash depuis FreeHand. Pour plus d’informations, voir Utilisation d’animations Flash
dans l’aide Utilisation de FreeHand.
Vous pouvez importer directement
des fichiers SWF Flash, les placer dans FreeHand MX, puis les exporter. Voir Modification
d’animations Flash importées et Exportation de documents FreeHand en tant qu’animations Flash
dans l’aide Utilisation de FreeHand.
Importation, placement et exportation de fichiers SWF
Facilité d’emploi
De nombreuses nouveautés FreeHand MX visent à faciliter autant que possible votre processus de
travail.
Ce panneau a été réorganisé pour que les outils soient plus
faciles à trouver et à utiliser. Pour en savoir plus, voir Utilisation du panneau Outils dans l’aide
Utilisation de FreeHand.
Modifications du panneau Outils
Les trames de dégradé sont dotées de poignées pour pouvoir les
manipuler plus facilement. Voir Utilisation des trames et des traits dans l’aide Utilisation de
FreeHand.
Poignées de trame de dégradé
Pour créer une nouvelle page dans le document, il suffit désormais de
cliquer sur le bouton Ajouter une page, au bas de la fenêtre d’application. Voir Utilisation de pages
dans l’aide Utilisation de FreeHand.
Bouton Ajouter une page
Modifications de comportement de style Vous pouvez décider des types d’attributs d’objet
auquel un style s’applique. Voir Application des styles dans l’aide Utilisation de FreeHand.
30
Chapitre 2 : Nouveautés de Studio MX 2004
CHAPITRE 3
Espace de travail de Studio MX 2004
Macromedia Studio MX 2004 offre un espace de travail intégré permettant de passer très
simplement d’un produit de la suite à un autre. Vous remarquerez que les panneaux, les menus,
les icônes de sélection et beaucoup d’autres éléments d’interface utilisateur sont similaires entre les
différents produits et faciles à utiliser. Passant d’un produit à un autre, vous constaterez à quel
point l’espace de travail, homogène et familier, contribue à accroître votre productivité, en vous
faisant gagner du temps sur l’apprentissage d’un nouveau produit.
Ce chapitre contient les sections suivantes :
Premier contact avec l’espace de travail de Dreamweaver, page 31
Premier contact avec l’espace de travail de Flash, page 35
Description de l’espace de travail de Fireworks, page 42
Premier contact avec l’espace de travail de FreeHand, page 48
Premier contact avec l’espace de travail de Dreamweaver
Sous Windows, Dreamweaver MX 2004 offre un espace de travail intégré composé d’une seule
fenêtre. Dans l’espace de travail intégré, toutes les fenêtres et tous les panneaux sont rassemblés
dans une grande fenêtre d’application. Vous avez le choix entre une présentation axée sur la
conception et une autre axée sur les besoins des codeurs manuels.
Sur Macintosh, Dreamweaver se présente sous la forme d’un espace de travail flottant, dans lequel
chaque document est localisé dans une fenêtre individuelle. Les groupes de panneaux sont
initialement ancrés ensemble, mais vous pouvez les séparer pour les faire apparaître dans leur
propre fenêtre. Les fenêtres s’alignent automatiquement les unes sur les autres sur les côtés de
l’écran, et sur la fenêtre du document au fur et à mesure que vous les faites glisser ou que vous les
redimensionnez.
Remarque : Vous pouvez personnaliser votre espace de travail en réorganisant les groupes de
panneaux ; pour plus d’informations, voir l’aide Utilisation de Dreamweaver.
31
Choix de la présentation de l’espace de travail (sous Windows uniquement)
Lorsque vous lancez Dreamweaver pour la première fois dans Windows, une boîte de dialogue
vous demande de choisir une présentation d’espace de travail. Vous pourrez choisir un autre type
de présentation ultérieurement, à partir de la boîte de dialogue Préférences.
Pour choisir la présentation de l’espace de travail :
• Sélectionnez l’une des options suivantes :
Espace de travail Designer : il s’agit d’un espace de travail intégré utilisant l’interface MDI
(Multiple Document Interface), dans laquelle toutes les fenêtres de document et tous les
panneaux sont rassemblés dans une grande fenêtre d’application, les groupes de panneaux étant
ancrés sur la droite. C’est la présentation recommandée pour la plupart des utilisateurs.
Remarque : Dans la quasi-totalité de ce guide, nous supposons que vous utilisez l’espace de travail
Designer.
: correspond au même espace de travail intégré, mais avec les groupes
de panneaux ancrés sur la gauche, dans une présentation similaire à celle utilisée par Macromedia
HomeSite et Macromedia ColdFusion Studio. La fenêtre de document affiche le mode Code par
défaut. Nous recommandons cette présentation aux utilisateurs de HomeSite ou ColdFusion
Studio et aux utilisateurs habitués au codage manuel préférant travailler dans un espace de travail
familier.
Espace de travail Codeur
Remarque : Ces deux espaces de travail autorisent l’ancrage des groupes de panneaux à droite ou à
gauche.
32
Chapitre 3 : Espace de travail de Studio MX 2004
Présentation des fenêtres et des panneaux
Cette section décrit rapidement quelques éléments de l’espace de travail de Dreamweaver.
L’utilisation de ces outils est abordée dans les différentes sections de ce guide ; pour plus
d’informations, voir l’aide Utilisation de Dreamweaver.
Barre Insérer
Barre d’outils du document
Fenêtre de document
Sélecteur de
balises
Inspecteur des propriétés
Groupes de panneaux
Panneau Fichiers
La Page de démarrage (aucune illustration disponible) permet d’ouvrir un document récent ou
de créer un nouveau document. Elle contient également des informations complémentaires sur
Dreamweaver (présentation du produit, didacticiels).
contient des boutons permettant d’insérer divers types d’« objets », tels que des
images, tableaux et calques dans un document. Chaque objet est une portion de code HTML
vous permettant de définir des attributs lors de son insertion. Par exemple, vous pouvez insérer un
tableau en cliquant sur le bouton Tableau de la barre Insérer. Si vous le préférez, vous pouvez
insérer les objets à partir du menu Insertion.
La barre Insérer
contient des boutons et des menus déroulants permettant
d’accéder aux différents modes d’affichage de la fenêtre du document (tels que le mode Création
ou le mode Code), de définir les différentes options d’affichage et d’effectuer certaines opérations
courantes, telles que la prévisualisation dans un navigateur.
La barre d’outils du document
La fenêtre de document
affiche le document que vous créez et modifiez.
L’inspecteur de propriétés permet de visualiser et de modifier diverses propriétés de l’objet ou
du texte sélectionné. Chaque objet contient des propriétés différentes.
sont des ensembles de panneaux associés regroupés sous un même
titre. Pour développer un groupe de panneaux, cliquez sur la flèche d’agrandissement située à
gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée
d’ancrage sur le côté gauche de la barre de titre du groupe.
Les groupes de panneaux
Premier contact avec l’espace de travail de Dreamweaver
33
vous permet de gérer vos fichiers et dossiers, qu’ils fassent partie d’un site
Dreamweaver ou qu’ils se trouvent sur un serveur distant. Il permet également d’accéder à tous les
fichiers stockés sur votre disque local, tout comme l’Explorateur Windows (Windows) ou le
Finder (Macintosh).
Le panneau Fichiers
Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres qui ne sont pas
illustrés ici, tels que le panneau Styles CSS et l’inspecteur de balises. Pour ouvrir les panneaux,
inspecteurs et fenêtres Dreamweaver, utilisez le menu Fenêtre.
Présentation des menus
Cette section présente les menus de Dreamweaver.
Le menu Fichier et le menu Edition contiennent des éléments de menu standard, tels que
Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Rétablir. Le
menu Fichier contient également plusieurs autres commandes permettant d’afficher un aperçu du
document dans un navigateur ou d’imprimer du code, par exemple. Le menu Edition inclut des
commandes de sélection et de recherche, telles que Sélectionner balise parente et Rechercher et
Remplacer. Sous Windows, le menu Edition permet également d’accéder aux préférences ; sur
Macintosh, le menu Dreamweaver permet d’ouvrir la boîte de dialogue Préférences.
Le menu Affichage permet de modifier l’affichage du document (mode Création ou mode Code,
par exemple) et d’afficher ou de masquer plusieurs types d’éléments de page et d’outils
Dreamweaver, ainsi que des barres d’outils.
Le menu Insertion et la barre Insérer permettent d’insérer des objets dans votre document.
Le menu Modifier permet de modifier les propriétés de l’élément de page sélectionné. Vous
pouvez l’ouvrir pour modifier les attributs de balises, des tableaux et leurs éléments et effectuer
diverses opérations avec les éléments de bibliothèque et les modèles.
Le menu Texte permet de formater facilement le texte.
Le menu Commandes propose une commande de formatage du code qui tient compte de vos
préférences de formatage, une commande de création d’album photos et une commande
d’optimisation des images dans Macromedia Fireworks.
Le menu Site contient des éléments de menu permettant de gérer vos sites et de télécharger des
fichier vers ou en provenance d’un serveur distant.
Conseil : Certaines commandes du menu Site des versions précédentes de Dreamweaver se
trouvent désormais dans le menu Options du panneau Fichiers.
Le menu Fenêtre permet d’accéder à tous les panneaux, inspecteurs et fenêtres de Dreamweaver.
(Pour les barres d’outils, voir le menu Affichage.)
Le menu Aide permet d’accéder à la documentation de Dreamweaver, aux systèmes d’aide relatifs
à l’utilisation de Dreamweaver et à la création d’extensions vers Dreamweaver, ainsi qu’à des
références en plusieurs langues.
Outre les menus de la barre de menus, Dreamweaver propose plusieurs menus contextuels qui
permettent d’accéder rapidement à des commandes utiles en rapport avec la zone ou la sélection
courante. Pour afficher un menu contextuel, cliquez avec le bouton droit de la souris (Windows)
ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un élément qui vous intéresse
dans une fenêtre.
34
Chapitre 3 : Espace de travail de Studio MX 2004
Premier contact avec l’espace de travail de Flash
L’application Macromedia Flash MX 2004 est constituée d’une scène sur laquelle vous placez vos
éléments de média, d’une barre d’outils principale comportant des menus et commandes d’accès
aux diverses fonctions, de panneaux et d’un inspecteur des propriétés permettant d’organiser et
modifier les actifs des médias, et enfin d’une barre d’outils dédiée à la création et à la modification
des graphiques vectoriels.
Cette section contient une brève description de l’espace de travail Flash MX 2004. Pour une
description plus détaillée, voir Familiarisation avec l’espace de travail dans le manuel Bien démarrer
avec Flash. Pour ouvrir ce manuel, lancez Flash, sélectionnez Aide > Aide, puis Bien démarrer
avec Flash parmi la liste des aides en ligne.
Utilisation de la scène
La scène est un espace rectangulaire dans lequel vous placez votre contenu graphique, dont
notamment les dessins vectoriels, les zones de texte, les boutons, les bitmaps ou clips vidéo
importés, etc. Dans l’environnement de création Flash, la scène correspond à l’espace
rectangulaire de Macromedia Flash Player, dans lequel s’affiche votre document Flash à la lecture.
Une fonction de zoom vous permet d’adapter le taux d’agrandissement de la scène en fonction de
votre travail.
Zoom
Pour afficher l’ensemble de la scène à l’écran, ou seulement une partie de votre dessin de manière
très agrandie, vous pouvez modifier le facteur de zoom. Le zoom maximal dépend de la résolution
de votre moniteur et de la taille du document. La valeur minimum de réduction de la scène est
de 8 %. La valeur maximum d’agrandissement de la scène est de 2 000 %.
Premier contact avec l’espace de travail de Flash
35
Pour agrandir ou réduire la vue de la scène, procédez d’une des façons suivantes :
• Pour zoomer sur un élément particulier, sélectionnez l’outil Zoom et cliquez sur l’élément.
Pour basculer l’outil Zoom entre le zoom avant et le zoom arrière, utilisez les modificateurs
Agrandir ou Réduire (dans la zone d’options de la barre d’outils lorsque l’outil Zoom est
sélectionné) ou cliquez en maintenant la touche Alt (Windows) ou Option (Macintosh)
enfoncée.
• Pour faire un zoom avant sur une zone spécifique de votre dessin, tracez un cadre de sélection
•
•
•
•
•
•
avec l’outil Zoom. Flash définit le facteur de zoom de sorte que le cadre de sélection spécifié
remplisse la fenêtre.
Pour faire un zoom avant ou arrière de l’ensemble de la scène, choisissez Affichage > Zoom
avant ou Affichage> Zoom arrière.
Pour faire un zoom avant ou arrière d’un pourcentage précis, choisissez Affichage > Zoom et
sélectionnez un pourcentage dans le sous-menu, ou sélectionnez un pourcentage dans le
contrôle de Zoom situé dans l’angle inférieur gauche de la fenêtre d’application.
Pour redimensionner la scène afin qu’elle occupe tout l’espace disponible dans la fenêtre,
choisissez Affichage > Zoom > Ajuster à la fenêtre.
Pour afficher le contenu de l’image actuelle, sélectionnez Affichage > Zoom > Afficher tout, ou
choisissez Afficher tout dans la zone de zoom de la fenêtre de l’application (coin supérieur
droit). Si la séquence est vide, toute la scène est affichée.
Pour afficher toute la scène, choisissez Affichage > Zoom > Afficher une image ou choisissez
Afficher une image dans le contrôle Zoom dans l’angle inférieur gauche de la fenêtre
d’application.
Pour afficher l’espace de travail entourant la scène, choisissez Affichage > Zone de travail.
L’espace de travail est affiché en gris clair. Utilisez la commande Zone de travail pour afficher
les éléments d’une séquence qui sont partiellement ou totalement en dehors de la scène. Par
exemple, pour faire en sorte que le vol d’un oiseau passe par une image, vous devrez
initialement placer l’oiseau en dehors de la scène dans l’espace de travail.
Déplacement de la vue de la scène
Lorsque vous avez fait un zoom avant de la scène, il est possible que vous ne la voyiez plus en
intégralité. L’outil Main vous permet de déplacer la scène de manière à changer la vue sans avoir à
changer le zoom.
Pour déplacer la vue de la scène :
1 Dans la barre d’outils, sélectionnez l’outil Main. Pour basculer temporairement entre l’outil
Main et un autre outil, appuyez sur la barre d’espace et cliquez sur l’outil souhaité dans la boîte
à outils.
2 Faites glisser la scène.
36
Chapitre 3 : Espace de travail de Studio MX 2004
Utilisation du scénario
Le scénario organise et contrôle le contenu d’un document au fil du temps dans les calques et les
images. Tout comme les films, les documents Flash divisent les périodes de temps en images. Les
calques sont semblables à des bandes de film empilées les unes sur les autres, chacune contenant
une image différente qui apparaît sur la scène. Les principaux composants du scénario sont les
calques, les images et la tête de lecture.
Les calques d’un document sont répertoriés dans une colonne affichée sur la gauche du scénario.
Les images contenues dans chaque calque sont affichées sur une ligne à droite du nom du calque.
L’en-tête du scénario, situé en haut du scénario, affiche le numéro des images. La tête de lecture
indique l’image actuellement affichée sur la scène.
La barre d’état du scénario, affichée en bas de ce dernier, indique le numéro de l’image
sélectionnée, la cadence d’image actuelle et le temps écoulé jusqu’à l’image actuelle.
Remarque : Lors de la lecture d’une animation, la cadence réelle des images est indiquée : elle peut
être différente de la cadence du document si l’ordinateur ne peut pas afficher l’animation assez
rapidement.
Image-clé vide
Tête de lecture
En-tête du scénario
Menu déroulant d’affichage
des images
Animation image par image
Animation interpolée
Icône de calque guide
Bouton Centrer l’image
Boutons papier pelure
Indicateur de temps écoulé
Indicateur de cadence
Indicateur d’image courante
Vous pouvez changer la manière dont les images sont affichées dans le scénario, ainsi que d’y
afficher des vignettes reprenant le contenu d’image. Le scénario indique les endroits auxquels un
document contient des effets animés (animation image par image, animation interpolée ou
trajectoires de mouvement, par exemple). Pour plus d’informations, voir Création de mouvement
dans l’aide Utilisation de Flash.
Les commandes de la section des calques du scénario vous permettent d’afficher, masquer,
verrouiller ou déverrouiller les calques, ainsi que d’en afficher le contenu sous forme de contours.
Voir Modification des calques et dossiers de calques dans le manuel Bien démarrer avec Flash
(disponible dans l’aide de Flash).
Vous pouvez insérer, supprimer, sélectionner et déplacer des images dans le scénario. Vous pouvez
également faire glisser des images vers un nouvel emplacement du même calque ou d’un calque
différent. Voir Utilisation d’images dans le scénario dans le manuel Bien démarrer avec Flash
(disponible dans l’aide de Flash).
Premier contact avec l’espace de travail de Flash
37
Modification de l’apparence du scénario
Par défaut, le scénario est affiché en haut de la fenêtre principale de l’application, au-dessus de la
scène. Pour changer sa position, vous pouvez ancrer le scénario en bas ou sur les côtés de la fenêtre
principale de l’application, ou encore afficher le scénario dans sa propre fenêtre. Vous pouvez
également masquer le scénario.
Vous pouvez redimensionner le scénario de manière à changer le nombre de calques et d’images
visibles. Lorsque le scénario contient plus de calques qu’il ne peut en afficher, vous pouvez afficher
les calques supplémentaires à l’aide des barres de défilement situées sur la droite du scénario.
Pour déplacer le scénario :
• Faites glisser le scénario en cliquant sur la zone située au-dessus de son en-tête.
Faites glisser le scénario vers le bord de la fenêtre de l’application pour l’ancrer. Faites-le glisser
avec la touche Ctrl enfoncée pour empêcher son ancrage.
Pour agrandir ou réduire les champs de nom de calque :
• Faites glisser la barre séparant les noms des calques et la partie des images du scénario.
Pour redimensionner le scénario, effectuez l’une des opérations suivantes :
• Si le scénario est ancré à la fenêtre principale de l’application, faites glisser la barre séparant le
scénario de la fenêtre de l’application.
• Si le scénario n’est pas ancré à la fenêtre principale de l’application, faites glisser l’angle
inférieur droit (Windows) ou la case de redimensionnement située dans l’angle inférieur droit
(Macintosh).
Déplacement de la tête de lecture
La tête de lecture se déplace dans le scénario pour indiquer l’image actuellement affichée sur la
scène. L’en-tête du scénario affiche le numéro des images de l’animation. Pour afficher une image
sur la scène, vous devez déplacer la tête de lecture vers cette image dans le scénario.
Lorsque vous travaillez avec de nombreuses images qui ne peuvent pas être toutes affichées en
même temps dans le scénario, vous pouvez déplacer la tête de lecture le long du scénario de
manière à facilement localiser l’image actuelle.
Pour atteindre une image :
• Cliquez sur l’emplacement de l’image dans l’en-tête du scénario ou faites glisser la tête de
lecture vers la position souhaitée.
Pour centrer le scénario sur l’image en cours :
• Cliquez sur le bouton Centrer l’image en bas du scénario.
38
Chapitre 3 : Espace de travail de Studio MX 2004
Utilisation des images et des images-clés
Une image-clé est une image dans laquelle vous définissez la modification d’un effet animé ou
incluez des actions d’image permettant de modifier un document. Flash peut interpoler ou
remplir les images situées entre les images-clés pour produire des animations fluides. Les imagesclés facilitent la création des animations car elles évitent d’avoir à tracer chacune de leurs images.
Vous pouvez changer la longueur d’un effet animé interpolé en faisant glisser une image-clé dans
le scénario.
L’ordre d’apparition des images et des images-clés dans le scénario détermine celui de leur
affichage dans une application Flash. Vous pouvez organiser les images-clés différemment dans le
scénario afin de modifier la séquence des événements dans l’animation.
Utilisation d’images dans le scénario
Dans le scénario, vous travaillez avec des images et des images-clés, que vous placez dans l’ordre
correspondant à celui dans lequel vous souhaitez que les objets apparaissent dans les images. Vous
pouvez changer la longueur d’un effet animé interpolé en faisant glisser une image-clé dans le
scénario.
Vous pouvez effectuer les modifications suivantes sur les images et les images-clés :
• Insérer, sélectionner, supprimer et déplacer des images ou des images-clés.
• Faire glisser des images et des images-clés vers un nouvel emplacement du même calque ou
•
•
•
d’un calque différent.
Copier et coller des images et des images-clés.
Convertir des images-clés en images.
Faire glisser un élément du panneau Bibliothèque vers la scène de manière à l’ajouter à l’imageclé actuelle.
Le scénario affiche les images interpolées d’une animation. Pour plus d’informations sur la
modification des images interpolées, voir Manipulation de l’animation dans l’aide Utilisation de
Flash.
Flash offre deux méthodes distinctes pour sélectionner les images dans le scénario. Avec la
sélection basée sur images (paramètre par défaut), vous sélectionnez séparément les images dans le
scénario. Avec la sélection basée sur plages, vous sélectionnez toute une séquence d’images (d’une
image-clé à la suivante) en cliquant sur n’importe quelle image de cette séquence. La boîte de
dialogue Préférences de Flash vous permet de paramétrer le programme pour la sélection basée sur
plages. Voir Définition des préférences de Flash dans le manuel Bien démarrer avec Flash (disponible
dans l’aide de Flash).
Pour insérer des images dans le scénario, effectuez l’une des opérations suivantes :
• Pour insérer une nouvelle image, sélectionnez Insertion > Scénario > Image.
• Pour créer une image-clé, choisissez Insertion > Scénario >Image-clé. Vous pouvez également
cliquer avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Ctrl
(Macintosh) sur l’image dans laquelle placer l’image-clé, puis choisir Insérer une image-clé
dans le menu contextuel.
Premier contact avec l’espace de travail de Flash
39
• Pour créer une image-clé vierge, choisissez Insérer > Scénario > Image-clé vide ou cliquez avec
le bouton droit (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur l’image
dans laquelle placer l’image-clé, puis choisissez Insérer une image-clé vide dans le menu
contextuel.
Pour sélectionner une ou plusieurs images dans le scénario :
• Pour ne sélectionner qu’une seule image, cliquez dessus. Si vous avez activé l’option Sélection
•
•
basée sur plages dans les Préférences, il vous suffit de cliquer sur une seule image pour
sélectionner toute la séquence comprise entre les deux images-clés. Voir Définition des
préférences de Flash dans le manuel Bien démarrer avec Flash (disponible dans l’aide de Flash).
Pour sélectionner plusieurs images qui se suivent, cliquez dessus tout en appuyant sur la
touche Maj.
Pour sélectionner plusieurs images qui ne se suivent pas, cliquez dessus tout en appuyant sur la
touche Ctrl (Windows) ou Commande (Macintosh).
Pour sélectionner toutes les images du scénario :
• Choisissez Edition > Scénario > Sélectionner toutes les images.
Pour supprimer ou modifier une image ou une image-clé, effectuez l’une des opérations
suivantes :
• Pour supprimer une image, une image-clé ou une séquence, sélectionnez-la, puis choisissez
•
•
•
•
•
•
•
40
Edition > Scénario > Supprimer l’image, ou bien cliquez avec le bouton droit (Windows) ou en
appuyant sur la touche Contrôle (Macintosh) sur l’image, l’image-clé ou la séquence et
choisissez Supprimer l’image dans le menu contextuel. Les images environnantes demeurent
inchangées.
Pour déplacer une image-clé ou une séquence d’images et leur contenu, faites-la glisser vers
l’emplacement souhaité.
Pour étendre la durée d’une image-clé, faites-la glisser tout en maintenant la touche Alt
(Windows) ou Option (Macintosh) enfoncée, vers l’image finale de la nouvelle durée.
Pour copier une image-clé ou une séquence d’images en la faisant glisser, cliquez tout en
appuyant sur la touche Alt (Windows) ou sur la touche Option (Macintosh) et faites glisser
l’image-clé vers le nouvel emplacement.
Pour copier et coller une image ou une séquence d’images, sélectionnez-la et choisissez
Edition > Scénario > Copier les images. Sélectionnez l’image ou la séquence à remplacer, puis
choisissez Edition > Scénario > Coller les images.
Pour convertir une image-clé en image, sélectionnez-la et choisissez Edition > Scénario >
Supprimer l’image-clé. Vous pouvez également cliquer avec le bouton droit de la souris
(Windows) ou tout en appuyant sur la touche Contrôle (Macintosh) sur l’image ou la séquence
et choisir Supprimer l’image-clé dans le menu contextuel. L’image-clé effacée et toutes les
images jusqu’à l’image-clé suivante sont remplacées par le contenu de l’image
précédant l’image-clé effacée.
Pour changer la longueur d’une séquence interpolée, faites glisser l’image-clé de début ou de fin
vers la gauche ou la droite. Pour modifier la durée d’une séquence image par image, voir
A propos de l’animation image par image dans l’aide Utilisation de Flash.
Pour ajouter un élément de la bibliothèque à l’image-clé en cours, faites glisser l’élément du
panneau Bibliothèque vers la scène.
Chapitre 3 : Espace de travail de Studio MX 2004
Utilisation des calques
Les calques peuvent se comparer à des feuilles transparentes empilées les unes sur les autres. Les
calques permettent d’organiser les différentes illustrations d’un document. Vous pouvez dessiner
et modifier des objets sur un calque sans affecter les objets des autres calques. Les calques vides
laissent apparaître les calques situés en dessous.
Pour dessiner, peindre ou modifier tout autrement un calque ou dossier, vous sélectionnez le
calque pour le rendre actif. L’icône crayon en regard du nom d’un calque ou dossier indique que le
calque ou dossier est actif. Vous ne pouvez activer qu’un seul calque à la fois (même si vous pouvez
en sélectionner plusieurs à la fois).
Lorsque vous créez un document Flash, celui-ci contient un calque. Vous pouvez y ajouter
d’autres calques de façon à organiser les illustrations, les effets animés et les autres éléments de
votre document. Le nombre de calques que vous pouvez créer n’a de limite que la mémoire de
votre ordinateur, les calques n’augmentant pas la taille de votre fichier SWF publié. Vous pouvez
masquer, verrouiller ou réarranger les calques.
Vous pouvez également organiser et gérer les calques en créant des dossiers de calques et en y
plaçant des calques. Vous pouvez développer ou réduire les calques dans le scénario sans affecter ce
qui est affiché sur la scène. Il est judicieux d’utiliser des calques ou des dossiers séparés pour les
fichiers audio, les actions, les étiquettes et les commentaires d’image. Cela vous permet de
retrouver plus rapidement ces éléments lorsque vous devez les modifier.
En outre, vous pouvez utiliser des calques de guide spéciaux pour faciliter les opérations de dessin
et de modification, et masquer les calques pour mieux créer des effets spéciaux.
Pour une présentation interactive de l’utilisation des calques dans Flash, choisissez Aide >
Comment... > Bases de Flash > Utiliser les calques.
Utilisation de la barre d’outils
Les éléments de la barre d’outils vous permettent de dessiner, de peindre, de sélectionner, de
modifier une illustration ou de modifier l’affichage de la scène. La barre d’outils est divisée en
quatre parties :
• Une partie outils, contenant les outils de dessin, de peinture et de sélection.
• Une partie affichage, contenant les outils permettant de zoomer et de se déplacer dans la
•
•
fenêtre d’application.
Une partie couleurs, contenant les modificateurs de couleur de trait et de remplissage.
Une partie options, contenant les modificateurs de l’outil sélectionné, lesquels affectent les
opérations de peinture et d’édition de l’outil.
La boîte de dialogue Personnaliser la barre d’outils vous permet de spécifier quels outils afficher
dans l’environnement de création Flash. Voir Personnalisation de la barre d’outils dans le manuel
Bien démarrer avec Flash (disponible dans l’aide).
Pour plus d’informations sur l’utilisation des outils de dessin et de peinture, voir Outils de dessin et
de peinture de Flash dans l’aide Utilisation de Flash.Pour plus d’informations sur l’utilisation des
outils de sélection, voir Sélection d’objets dans l’aide Utilisation de Flash.
Pour afficher ou masquer la barre d’outils :
• Choisissez Fenêtre > Outils.
Close collapsed procedure
Premier contact avec l’espace de travail de Flash
41
Description de l’espace de travail de Fireworks
Lorsque vous ouvrez pour la première fois un document dans Macromedia Fireworks MX 2004,
l’environnement de travail est activé, y compris le panneau Outils, l’Inspecteur des propriétés, les
menus et d’autres panneaux. Le panneau Outils, à gauche de l’écran, contient des catégories
libellées, incluant les groupes d’outils bitmap, vectoriels et Web. L’Inspecteur des propriétés
apparaît par défaut en bas du document, et affiche initialement les propriétés du document. Il
change ensuite pour afficher les propriétés d’un outil nouvellement sélectionné ou d’un objet
actuellement sélectionné lorsque vous travaillez dans le document. Les panneaux sont initialement
rassemblés en groupes le long du bord droit de l’écran. La fenêtre du document apparaît au centre
de l’application.
42
Chapitre 3 : Espace de travail de Studio MX 2004
Utilisation du panneau Outils
Le panneau Outils se divise en six catégories : Sélection, Bitmap, Vecteur, Web, Couleurs et
Affichage.
Modification des options des outils
Lorsque vous choisissez un outil, l’Inspecteur des propriétés affiche les options de l’outil.
Certaines options d’outils restent affichées lorsque vous travaillez avec l’outil. Pour d’autres outils,
tels que les outils des formes de base, la Plume et la Ligne, l’Inspecteur des propriétés affiche les
propriétés des objets sélectionnés. Pour plus d’informations sur l’Inspecteur des propriétés, voir
Utilisation de l’Inspecteur des propriétés dans l’aide de Fireworks.
Pour que s’affiche dans l’Inspecteur des propriétés les options d’un outil que vous êtes déjà
en train d’utiliser :
• Choisissez Sélection > Désélectionner pour désélectionner tous les objets.
Description de l’espace de travail de Fireworks
43
Pour plus d’informations sur des options d’outils spécifiques, voir les sections qui présentent les
différents outils dans le manuel Utilisation de Fireworks ou l’aide de Fireworks.
Sélection d’un outil à partir d’un groupe d’outils
Un petit triangle dans le coin inférieur droit d’un outil dans le panneau Outils indique qu’il fait
partie d’un groupe d’outils. Par exemple, l’outil Rectangle fait partie du groupe des outils destiné
aux formes de base, qui inclut également les outils Rectangle arrondi, Ellipse et Polygone. Sont
aussi inclus les outils Formes intelligentes apparaissant sous la ligne de séparation.
Pour choisir un outil à partir d’un groupe d’outils :
1 Cliquez sur l’icône de l’outil et maintenez enfoncé le bouton de la souris.
Un menu contextuel apparaît avec les icônes des outils, le nom des outils et les touches de
raccourci. L’outil actuellement sélectionné possède une encoche à gauche de son nom.
2 Faites glisser le pointeur afin de sélectionner l’outil désiré et relâchez le bouton de la souris.
L’outil apparaît dans le panneau Outils, et les options de l’outil apparaissent dans l’Inspecteur
des propriétés.
Utilisation de l’inspecteur des propriétés
L’Inspecteur des propriétés est un panneau sensible au contexte qui affiche les propriétés de la
sélection courante, les options de l’outil courant ou bien les propriétés du document. Par défaut,
l’Inspecteur des propriétés est ancré en bas de l’espace de travail.
L’Inspecteur des propriétés peut être ouvert à mi-hauteur, présentant deux lignes de propriétés, ou
quatre en pleine hauteur. Vous pouvez également masquer totalement l’Inspecteur des propriétés
en le laissant dans l’espace de travail.
Remarque : Dans le manuel Utilisation de Fireworks, la plupart des procédures partent du principe
que l’Inspecteur des propriétés est complètement déployé.
Pour annuler l’ancrage de l’Inspecteur des propriétés :
• Faites glisser la poignée du coin supérieur gauche vers un autre endroit de l’espace de travail.
Pour ancrer l’Inspecteur des propriétés en bas de l’espace de travail (Windows
uniquement) :
• Faites glisser la barre latérale de l’Inspecteur des propriétés en bas de l’écran.
44
Chapitre 3 : Espace de travail de Studio MX 2004
Pour déployer l’Inspecteur des propriétés de la mi-hauteur à la pleine hauteur, permettant
ainsi de découvrir des options supplémentaires :
• Cliquez sur la flèche d’extension située dans le coin inférieur droit de l’Inspecteur des
propriétés.
• Cliquez sur l’icône en haut à droite de l’Inspecteur des propriétés et choisissez Pleine hauteur à
partir du menu Options de l’Inspecteur des propriétés.
Remarque : Sous Windows, le menu Options est disponible uniquement lorsque l’Inspecteur des
propriétés est ancré.
Pour réduire à mi-hauteur l’Inspecteur des propriétés :
• Cliquez sur la flèche d’extension située dans le coin inférieur droit de l’Inspecteur des
propriétés.
• Choisissez Demi-hauteur à partir du menu Options de l’Inspecteur des propriétés.
Remarque : Sous Windows, le menu Options est disponible uniquement lorsque l’Inspecteur des
propriétés est ancré.
Pour réduire l’Inspecteur des propriétés lorsqu’il est ancré :
• Cliquez sur la flèche d’extension ou sur le titre de l’Inspecteur des propriétés.
• Choisissez Réduire le groupe de panneaux à partir du menu Options de l’Inspecteur des
propriétés ancré.
Pour plus d’informations sur les options spécifiques de l’Inspecteur des propriétés, voir les
sections appropriées du manuel Utilisation de Fireworks ou l’aide de Fireworks.
Utilisation des panneaux
Les panneaux sont des groupes de commandes flottants qui permettent de modifier l’aspect d’un
objet sélectionné ou d’éléments du document. Ils permettent, entre autres, de travailler sur des
images, des calques, des symboles et des couleurs du nuancier. Il est possible de faire glisser les
panneaux de façon à les regrouper en fonction de vos préférences.
Les panneaux suivants sont regroupés par défaut :
• Les panneaux Styles, URL et Bibliothèque sont rassemblés dans le groupe de panneaux Actifs.
• Les panneaux Mélangeur et Nuanciers sont rassemblés dans le groupe de panneau Couleurs.
• Les panneaux Images et Historique sont rassemblés dans le groupe de panneaux Images et
Historique.
Les panneaux Optimiser, Calques, Formes, Info, Comportements, Rechercher et Aligner ne sont
pas regroupés par défaut mais vous pouvez le faire à votre convenance. Lorsque vous regroupez des
panneaux, tous les noms du groupe de panneaux apparaissent dans la barre de titre du groupe de
panneaux. Vous pouvez toutefois renommer les groupes de panneaux comme bon vous semble.
Le panneau Optimiser vous permet de gérer les paramètres qui contrôlent la taille et le type de
fichier, de travailler avec la palette des couleurs du fichier ou de la découpe à exporter.
Description de l’espace de travail de Fireworks
45
Le panneau Calques vous
permet d’organiser la structure d’un document et comporte des
options de création, suppression et manipulation des calques.
Le panneau Images
inclut des options de création d’animations.
Le panneau Historique répertorie les commandes que vous avez utilisées récemment de façon à
pouvoir les annuler et les rétablir rapidement. En outre, vous pouvez sélectionner des actions
multiples, puis les enregistrer et les réutiliser en tant que commandes. Pour plus d’informations,
voir Utilisation du panneau Historique pour annuler ou répéter plusieurs actions dans l’aide de
Fireworks.
Le panneau Formes
contient les formes automatiques qui n’apparaissent pas dans le panneau
Outils.
vous permet de stocker et de réutiliser des combinaisons de caractéristiques
d’objets ou de choisir un style stocké.
Le panneau Styles
Le panneau Bibliothèque comporte des symboles de graphiques, de boutons et d’animation.
Vous pouvez facilement faire glisser les occurrences de ces symboles, du panneau Bibliothèque
vers votre document. Vous pouvez modifier l’ensemble des occurrences en modifiant simplement
le symbole.
vous permet de créer des bibliothèques contenant les URL les plus
fréquemment utilisées.
Le panneau URL
Le panneau Mélangeur vous permet de créer de nouvelles couleurs que vous pouvez ensuite
ajouter à la palette de couleurs du document actif ou appliquer à des objets sélectionnés.
Le panneau Nuanciers
gère la palette de couleurs du document actif.
Le panneau Info fournit des informations sur les dimensions des objets sélectionnés et les
coordonnées exactes du pointeur au cours de son déplacement.
Le panneau Comportements gère les comportements qui déterminent ce qui se produit lorsque
des références ou des découpes réagissent aux déplacements de la souris.
Le panneau Rechercher vous permet de rechercher et de remplacer des éléments tels que du
texte, des URL, des polices et des couleurs dans un ou plusieurs documents.
Le panneau Aligner
renferme les commandes d’alignement et de distribution des objets dans le
document.
Organisation des groupes de panneaux et des panneaux
Par défaut, les panneaux Fireworks sont rassemblés par groupes dans la zone d’ancrage, dans la
partie droite de l’espace de travail. Vous pouvez annuler l’ancrage des groupes de panneaux,
ajouter des panneaux à un groupe, annuler l’ancrage de panneaux individuels, réorganiser l’ordre
des groupes de panneaux ancrés, et réduire et fermer des groupes de panneaux. Vous pouvez
également ouvrir et fermer des panneaux individuels.
Utilisez les panneaux et groupes de panneaux dans Fireworks de la même façon que vous le faites
dans les autres applications Studio.
46
Chapitre 3 : Espace de travail de Studio MX 2004
Bouton Exportation rapide
Le bouton Exportation rapide vous permet d’exporter vos fichiers Fireworks vers différentes
applications Macromedia, y compris Dreamweaver, Flash, Director et Macromedia
FreeHand MX. En outre, vous pouvez exporter vos fichiers vers Photoshop, FrontPage, Adobe
GoLive et Illustrator, ou les afficher dans le navigateur de votre choix.
Navigation et affichage d’un document
Vous pouvez contrôler le grossissement du document, le nombre de fenêtres d’aperçu et le mode
d’affichage. En outre, vous pouvez facilement déplacer le point de vue sur un document, ce qui est
particulièrement utile lorsque vous grossissez une partie de votre document et perdez la vue
l’ensemble.
Utilisation des onglets de documents
Lorsque l’affichage de votre document est maximisé, vous pouvez facilement passer d’un
document ouvert à un autre, à l’aide des onglets situés en haut de la fenêtre du document. Le nom
de chaque document ouvert apparaît sur un onglet au-dessus des boutons d’affichage.
Pour passer à un autre document lorsque l’affichage du document actif est maximisé :
• Cliquez sur l’onglet du document que vous souhaitez afficher.
Utilisation du panneau Historique pour annuler ou répéter plusieurs actions
Le panneau Historique permet d’afficher, de modifier et de répéter des actions de création du
document. Le panneau Historique répertorie les dernières actions exécutées dans Fireworks. Le
nombre maximal d’entrées est spécifié dans le champ Nombre max. d’actions annulées de la boîte
de dialogue Préférences de Fireworks.
Le panneau Historique permet d’effectuer les actions suivantes :
• Annuler et rétablir rapidement les actions récentes.
• Choisir des actions exécutées récemment à partir du panneau Historique, et les répéter.
• Copier dans le Presse-papiers des commandes sélectionnées sous forme de texte JavaScript.
Description de l’espace de travail de Fireworks
47
• Enregistrer un groupe d’actions exécutées récemment sous un nom de commande unique,
placé dans le menu Commandes et pouvant être réutilisé comme commande unique.
Pour annuler et refaire des actions :
1 Choisissez Fenêtre > Historique pour ouvrir le panneau Historique.
2 Faites glisser le marqueur d’annulation vers le haut ou vers le bas.
Pour refaire des actions :
1 Effectuer les actions.
2 Faites ce qui suit afin de sélectionner les commandes à répéter dans le panneau Historique :
Cliquez sur une action pour la sélectionner.
Cliquez sur Maj pour sélectionner une série ininterrompue d’actions.
■ Maintenez enfoncée la touche Maj tout en cliquant pour sélectionner une série continue de
commandes.
3 Cliquez sur le bouton Réexécuter, en bas du panneau Historique.
■
■
Pour enregistrer des actions à réutiliser par la suite :
1 Sélectionnez les actions à enregistrer à partir du panneau Historique.
2 Cliquez sur le bouton Enregistrer situé en bas du panneau.
3 Entrez un nom de commande, puis cliquez sur OK.
Pour utiliser une commande personnalisée enregistrée :
• Choisissez le nom de la commande dans le menu Commandes.
Premier contact avec l’espace de travail de FreeHand
L’application FreeHand fait partie de la famille de produits Macromedia MX. En tant que telle,
elle utilise l’espace de travail Macromedia MX, interface partagée par les autres produits
Macromedia MX. Cette homogénéité entre produits facilite l’apprentissage et l’utilisation des
autres produits.
48
Chapitre 3 : Espace de travail de Studio MX 2004
A la toute première ouverture de FreeHand, l’espace de travail se compose de la fenêtre de
document et d’un ensemble de panneaux ancrés. Sous Windows, l’espace de travail est intégré,
afin de rendre possible l’ancrage des panneaux et barres d’outils à la fenêtre d’application
principale. Cela permet d’éviter d’ouvrir simultanément un trop grand nombre de panneaux et de
barres d’outils et d’éviter ainsi d’encombrer l’espace de travail.
Panneaux
Menu déroulant des unités
Menu déroulant des modes de dessin
Bouton Ajouter une page
Menu déroulant d’accès aux pages
Bouton de sélection des pages
Menu déroulant du zoom
L’espace de travail intégré n’est pas pris en charge sur Macintosh. Toutefois, les panneaux et barres
d’outils sont par défaut ancrés les uns aux autres dans une configuration comparable à l’espace de
travail intégré de Windows.
Quel que soit le système d’exploitation utilisé, il reste toujours possible de réorganiser,
repositionner et ancrer les uns aux autres les panneaux, barres outils et fenêtres FreeHand.
Vous trouverez dans les pages qui suivent une description plus détaillée de l’espace de travail de
FreeHand. Des informations plus complètes sont également disponibles sous la rubrique intitulée
Fonctions principales de FreeHand dans l’aide Utilisation de FreeHand.
Fenêtre de document
Lorsque vous démarrez FreeHand, en plus des panneaux, la fenêtre de document et la table de
montage (zone contenant les pages du document) s’affichent.
Premier contact avec l’espace de travail de FreeHand
49
La fenêtre de document contient tous les objets de votre document. Vous devez placer les objets
sur une page pour les imprimer à l’aide de la commande Imprimer ; si vous les placez dans la table
de montage au-delà des limites de la page, vous pouvez les imprimer à l’aide de la fonction Zone
de sortie. Pour de plus amples informations, voir Définition d’un espace de sortie dans l’aide
Utilisation de FreeHand.
Si vous modifiez un document, un astérisque s’affiche en regard de son nom, dans la fenêtre de
document, et le reste tant que vous n’avez pas enregistré votre travail. Pour de plus amples
informations, voir Enregistrement des fichiers dans l’aide Utilisation de FreeHand.
Utilisation des panneaux
Lorsque vous démarrez FreeHand, les panneaux visibles (à l’exception du panneau Outils) sont
ancrés les uns aux autres le long du bord droit de la fenêtre d’application. Entièrement
personnalisables, ces groupes de panneaux peuvent être déplacés, séparés ou combinés. Vous
pouvez par ailleurs ouvrir, fermer, ancrer, développer et réduire les panneaux et groupes de
panneaux.
Les panneaux suivants sont regroupés par défaut :
• Les panneaux Objet et Document sont associés en un groupe intitulé Propriétés.
• Les panneaux Nuanciers, Styles et Bibliothèque sont associés en un groupe intitulé Actifs.
• Les panneaux Mélangeur et Teintes sont associés en un groupe intitulé Mélangeur et Teintes.
• Les panneaux Aligner et Transformer sont associés en un groupe intitulé Aligner et
•
•
50
Transformer.
Les deux panneaux Rechercher et remplacer et Sélectionner sont associés en un groupe intitulé
Rechercher et remplacer et Sélectionner.
Les panneaux Demi-tons, Calques, Réponses, et Navigation ne sont pas associés avec d’autres
par défaut, mais vous pouvez les grouper ensemble si vous le souhaitez. Sauf en ce qui concerne
les groupes Propriétés et Actifs, l’intitulé de chaque groupe s’affiche dans la barre de titre
lorsque vous regroupez les panneaux. Il vous est toutefois possible de remplacer l’intitulé par
défaut d’un groupe par celui de votre choix ; voir Association de panneaux dans l’aide Utilisation
de FreeHand.
Chapitre 3 : Espace de travail de Studio MX 2004
Les panneaux Calques, Réponses et les groupes de panneaux Propriétés, Actifs et Mélangeur et
Teintes sont affichés par défaut à la première ouverture de FreeHand. Cependant, certains
apparaissent sous forme réduite.
Pour plus d’informations, voir Utilisation des panneaux dans l’aide Utilisation de FreeHand.
Utilisation des barres d’outils
FreeHand est doté de plusieurs barres d’outils qui peuvent être au choix laissées flottantes ou
ancrées le long des bords haut, bas ou gauche de la fenêtre de document. Une info-bulle vous
informant de la fonction de chaque outil s’affiche lorsque vous superposez le pointeur de la souris
sur l’icône correspondante. Pour plus d’informations, voir Utilisation des infos-bulles dans l’aide
Utilisation de FreeHand.
Barre d’outils principale
La barre d’outils principale (Fenêtre > Barres d’outils > Principale) contient les commandes de
base dont vous vous servez au début de votre projet FreeHand. Vous l’utilisez pour ouvrir les
fichiers de document et pour gérer la présentation de votre document. La barre d’outils principale
permet également d’accéder rapidement aux panneaux les plus utilisés. Elle comporte les boutons
suivants par défaut, mais vous pouvez en ajouter d’autres, en fonction de vos besoins. Pour plus
d’informations, voir Personnalisation des barres d’outils dans l’aide Utilisation de FreeHand.
Crée un document
Ouvre le panneau Aligner
Ouvre un document existant
Ouvre le panneau Transformer
Enregistre le document actif
Ouvre le panneau Bibliothèque
Importe un fichier ou un objet
Ouvre le panneau Objet
Imprime le document actif
Ouvre le panneau Mélangeur
Verrouille les objets
sélectionnés
Ouvre le panneau Nuanciers
Déverrouille les objets
sélectionnés
Ouvre le panneau Calques
Ouvre le panneau Rechercher
et remplacer
Premier contact avec l’espace de travail de FreeHand
51
Utilisation du panneau Outils
Les outils que contient ce panneau vous permettent de sélectionner, dessiner et retoucher des
objets, leur appliquer des couleurs, créer du texte. Le panneau est divisé en quatre parties : Outils,
Affichage, Couleurs et Accrocher. Vous pouvez personnaliser le panneau en lui ajoutant ou
retirant des boutons.
Certains outils du panneau Outils sont dotés d’une flèche pointant vers le bas, dans leur angle
inférieur droit. Cette flèche indique la présence d’un menu déroulant. Vous pouvez sélectionner
d’autres outils dans le menu contextuel d’outils en cliquant sur tout outil présentant une flèche
vers le bas, en maintenant le bouton de la souris enfoncé, puis en sélectionnant une option dans le
menu contextuel qui s’affiche.
Pour sélectionner un outil parmi les options d’un menu contextuel :
1 Dans le panneau Outils, cliquez sur un outil présentant une flèche vers le bas et maintenez le
bouton de la souris enfoncé.
2 Sélectionnez un outil dans le menu contextuel qui apparaît.
Pour ajouter un outil au panneau Outils, procédez de l’une des manières suivantes :
• Choisissez Fenêtre > Barres d’outils > Personnaliser. Développez la rubrique voulue dans la liste
•
52
Commandes, puis faites glisser l’outil à ajouter de la moitié droite de la boîte de dialogue
jusqu’au panneau Outils.
Tout en appuyant sur la touche Alt (Windows) ou Commande (Macintosh), faites glisser
l’outil à ajouter de la barre d’outils concernée jusque dans le panneau Outils.
Chapitre 3 : Espace de travail de Studio MX 2004
Pour supprimer un outil du panneau Outils, procédez d’une des façons suivantes :
• Choisissez Fenêtre > Barres d’outils > Personnaliser, puis faites glisser l’outil à supprimer hors
•
du panneau Outils.
Tout en appuyant sur la touche Alt (Windows) ou Commande (Macintosh), faites glisser
l’outil hors du panneau Outils.
Après avoir supprimé un outil du panneau Outils, vous ne pouvez le rétablir qu’en utilisant la
boîte de dialogue Personnaliser. Pour plus d’informations, voir Personnalisation des barres
d’outils dans l’aide Utilisation de FreeHand.
Pour plus d’informations sur les autres barres d’outils de FreeHand, dont les barres d’outils Texte,
Enveloppe, Info, Etat (Windows), Outils Xtra et Opérations Xtra, voir Utilisation des barres
d’outils dans l’aide Utilisation de FreeHand.
Premier contact avec l’espace de travail de FreeHand
53
54
Chapitre 3 : Espace de travail de Studio MX 2004
CHAPITRE 4
Description des applications Web
Une application Web est un ensemble de pages qui interagissent avec les utilisateurs, les unes avec
les autres, ainsi qu’avec les différentes ressources d’un serveur Web, notamment les bases de
données. Familiarisez-vous avec les concepts abordés dans ce chapitre avant de créer vos propres
applications Web.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
•
A propos des applications Web, page 55
Fonctionnement d’une application Web, page 56
Création de pages dynamiques, page 61
Choix d’une technologie de serveur, page 62
Terminologie du développement d’applications Web, page 63
A propos des applications Web
Une application Web est un site Web dont le contenu des pages est partiellement ou entièrement
indéterminé. Le contenu final d’une page est déterminé uniquement lorsque l’utilisateur requiert
une page depuis le serveur Web. Le contenu final d’une page variant d’une requête à une autre en
fonction des actions de l’utilisateur, ce type de page est appelé page dynamique.
Les applications Web sont construites de manière à répondre à différents types de défis et de
problèmes. Cette section décrit les utilisations courantes des applications Web et présente un
exemple simple.
Utilisations courantes des applications Web
Les applications Web peuvent être utilisées de diverses façons par les visiteurs d’un site et les
développeurs, notamment pour :
• Permettre aux utilisateurs de trouver rapidement et facilement des informations sur un
site Web riche en contenu.
Ce type d’applications Web permet aux visiteurs du site de rechercher, d’organiser et de
parcourir le contenu à leur convenance. Les exemples incluent des réseaux intranet
d’entreprises, tels Microsoft MSDN (www.msdn.microsoft.com) et Amazon.com
(www.amazon.com).
55
• Collecter, enregistrer et analyser des données fournies par les visiteurs du site.
•
Auparavant, les données saisies dans des formulaires HTML étaient envoyées sous forme de
courriels aux employés ou sous forme d’applications CGI pour le traitement. Une
application Web peut enregistrer les données d’un formulaire directement dans une base de
données, ainsi qu’extraire les données et créer des rapports Web pour l’analyse. Les exemples
incluent des pages de banque en ligne et de contrôle des stocks, des sondages et des formulaires
de commentaires.
Mettre à jour des sites Web dont le contenu change souvent.
Une application Web évite au créateur d’avoir à mettre fréquemment à jour le code HTML du
site. Les fournisseurs de contenu, tels que les rédacteurs en chef, alimentent l’application Web
et celle-ci met automatiquement le site à jour, Il peut s’agir de The Economist
(www.economist.com) et CNN (www.cnn.com).
Exemple d’application Web
Claude, professionnel de la création Web, utilise MacromediaDreamweaver MX depuis de
nombreuses années. Il est chargé de la maintenance des sites intranet et Internet d’une entreprise
de taille moyenne comptant 1 000 employés. Christophe, du service des Ressources humaines, lui
soumet un jour un problème. Ce service gère un programme de mise en forme qui attribue des
points aux employés pour chaque kilomètre parcouru en marchant, en courant ou à vélo. Tous les
mois, chaque employé doit communiquer à Christophe le nombre total de kilomètres parcourus,
par courriel. A la fin du mois, Christophe rassemble tous les courriels et récompense chaque
employé avec des prix en espèces, en fonction de leur total de points.
Le problème est que ce programme de mise en forme a suscité de plus en plus d’enthousiasme. Le
nombre de participants est si important que Christophe est submergé de courriels à chaque fin de
mois. Il demande donc à Julie si une solution Web serait envisageable.
Julie suggère une application Web basée sur un réseau intranet exécutant les tâches suivantes :
• permettre aux employés de saisir leur kilométrage sur une page Web au moyen d’un simple
•
•
•
•
formulaire HTML ;
stocker le kilométrage des employés dans une base de données ;
calculer les points de mise en forme en fonction du kilométrage ;
permettre aux employés de suivre leurs progrès au fil des mois ;
permettre à Christophe d’accéder au total des points en un seul clic à chaque fin de mois.
Claude met rapidement en place l’application à l’aide de Dreamweaver MX 2004, logiciel doté
des outils nécessaires à la création rapide et facile de ce type d’applications.
Fonctionnement d’une application Web
Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n’est
pas modifiée lorsqu’un visiteur la consulte : le serveur Web transmet la page au navigateur qui la
sollicite sans la modifier. A l’inverse, une page Web dynamique est modifiée par le serveur avant
d’être transmise au navigateur qui la sollicite. C’est pourquoi cette page est dite dynamique.
Vous pouvez par exemple créer une page pour afficher les résultats du programme de mise en
forme et faire en sorte que certaines informations (telles le nom et les résultats de l’employé)
soient déterminées lorsqu’une page est sollicitée par un employé donné.
56
Chapitre 4 : Description des applications Web
Traitement des pages Web statiques
Un site Web statique comprend un jeu de pages et fichiers HTML associés hébergés sur un
ordinateur exécutant un serveur Web.
Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de
navigateurs Web. Une requête de page est générée lorsqu’un utilisateur clique sur un lien d’une
page Web, choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du
navigateur.
Le contenu final d’une page Web statique est déterminé par le créateur de la page et n’est pas
modifié lorsqu’un utilisateur la demande. Exemple :
<html>
<head>
<title>Page d’informations sur Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est leader dans le domaine de la construction automobile.</
p>
</body>
</html>
Chaque ligne du code HTML de la page est rédigée par le créateur avant que la page ne soit placée
sur le serveur. Ce code HTML n’étant pas modifié une fois la page sur le serveur, cette page est
dite statique.
Remarque : au sens strict du terme, une page dite « statique » peut ne pas être statique du tout. Une
image survolée ou une animation Flash (un fichier SWF), par exemple, peuvent animer une page
statique. Cependant, ce guide qualifie une page de statique si elle est adressée au navigateur sans
modifications.
Lorsqu’un serveur Web reçoit une requête de page statique, il lit la requête, localise la page et la
tvvransmet au navigateur qui l’a sollicitée, tel qu’indiqué dans la figure ci-dessous :
Etape 1 - Le
navigateur Web
demande une
page statique.
Navigateur Web
Demande
Réponse
Serveur Web
Etape 3 - Le serveur
Web envoie la page au
navigateur demandeur.
Etape 2 - Le
serveur Web
recherche la page.
<HTML>
<p>Hi
</HTML>
Page statique
Fonctionnement d’une application Web
57
Dans le cas des applications Web, certaines lignes de code ne sont pas déterminées au moment où
l’utilisateur sollicite la page. Ces lignes doivent être déterminées via un mécanisme avant que la
page ne soit transmise au navigateur. Ce mécanisme est présenté dans la section suivante.
Traitement des pages dynamiques
Lorsqu’un serveur Web reçoit une requête de page Web statique, il transmet directement cette
page au navigateur qui la demande. Le serveur Web réagit différemment lorsqu’il reçoit une
requête de page dynamique : il transmet la page à un logiciel spécial chargé de terminer la page.
Ce logiciel spécial est appelé un serveur d’application.
Le serveur d’application lit le code de la page, termine cette page en fonction des instructions
figurant dans le code, puis en retire le code. Il en résulte une page statique que le serveur
d’application renvoie au serveur Web, lequel transmet alors cette page au navigateur demandeur.
Le navigateur reçoit uniquement du code HTML pur lorsque la page lui est transmise. Voici un
aperçu du processus :
Etape 1 - Le
navigateur Web
demande une
page dynamique.
Navigateur Web
Demande
Réponse
Etape 5 - Le serveur
Web envoie la page
terminée au navigateur
demandeur.
Serveur Web
Etape 2 - Le
serveur Web
recherche la page
et la transmet au
serveur
d’application.
<HTML>
<code>
</HTML>
Etape 3- Le
serveur
d’application
analyse la page à
la recherche
d’instructions et la
termine.
<HTML>
<p>Hi
</HTML>
Etape 4 - Le serveur
d’application transmet
la page terminée au
serveur Web.
Serveur d'application
Accès à une base de données
Un serveur d’application vous permet de travailler avec des ressources côté serveur telles que les
bases de données. Une page dynamique peut, par exemple, ordonner au serveur d’application
d’extraire des données de la base de données et de les insérer dans le code HTML de la page. Pour
plus d’informations, voir l’annexe Guide du débutant en base de données de l’aide Utilisation de
Dreamweaver.
58
Chapitre 4 : Description des applications Web
L’instruction d’extraction des données de la base est nommée requête de base de données. Une
requête est composée de critères de recherche rédigés dans un langage de base de données appelé
SQL (Structured Query Language). La requête SQL est rédigée dans les scripts ou les balises de la
page côté serveur.
Un serveur d’application ne peut pas communiquer directement avec une base de données car le
format propriétaire de cette dernière rend les données indéchiffrables, de la même manière qu’un
document Microsoft Word ouvert dans Bloc-notes ou BBEdit peut être indéchiffrable. Le serveur
d’application peut communiquer avec la base de données uniquement via un pilote de base de
données, logiciel faisant office d’interprète entre le serveur d’application et la base de données.
Une fois que le pilote a établi la communication, la requête est exécutée par rapport à la base de
données et un jeu d’enregistrements est créé. Un jeu d’enregistrements est un ensemble de
données extraites d’une ou de plusieurs tables de base de données. Le jeu d’enregistrements est
renvoyé au serveur d’application, lequel utilise les données pour terminer la page.
Voici un exemple simple de requête de base de données rédigée en SQL :
SELECT lastname, firstname, fitpoints
FROM employees
Cette instruction crée un jeu d’enregistrements à trois colonnes et le remplit de lignes comportant
le nom, le prénom et les points de mise en forme de tous les employés de la base de données. Pour
plus d’informations, voir l’annexe Initiation à SQL de l’aide Utilisation de Dreamweaver.
Fonctionnement d’une application Web
59
Voici une illustration du processus d’interrogation de la base de données via des requêtes et de la
transmission des données au navigateur :
Etape 1 - Le
navigateur Web
demande une page
dynamique.
Navigateur Web
Demande
Réponse
Etape 9 - Le serveur
Web envoie la page
terminée au
navigateur
demandeur.
Serveur Web
Etape 2 - Le serveur
Web recherche la
page et la transmet
au serveur
d’application.
<HTML>
<code>
</HTML>
Etape 3 - Le serveur
d’application analyse
la page à la recherche
d’instructions.
Etape 4 - Le serveur
d’application envoie
une requête au pilote
de la base de
données.
Etape 5 - Le pilote
exécute la requête au
niveau de la base de
données.
<HTML>
<p>Hi
</HTML>
Etape 8 - Le serveur
d’application insère
les données dans la
page, puis transmet la
page au serveur Web.
Serveur d'application
Requête
Jeu d'enregistrement
Pilote de base de données
Etape 7 - Le pilote
transmet le jeu
d’enregistrements au
serveur d’application.
Etape 6 - Le jeu
d’enregistrements est
renvoyé au pilote.
Base de données
Vous pouvez utiliser pratiquement toutes les bases de données avec votre application Web, à
condition que les pilotes de base de données appropriés soient installés sur le serveur.
Si vous prévoyez de créer de petites applications peu onéreuses, vous pouvez utiliser une base de
données fichier, créée par exemple sous Microsoft Access. Si vous prévoyez de créer des
applications stratégiques robustes, vous pouvez utiliser une base de données serveur, créée par
exemple avec Microsoft SQL Server, Oracle 9i ou MySQL.
60
Chapitre 4 : Description des applications Web
Si votre base de données réside sur un système autre que votre serveur Web, assurez-vous qu’il
existe une connexion rapide entre les deux systèmes pour un fonctionnement efficace et rapide de
votre application Web.
Création de pages dynamiques
La création d’une page dynamique consiste à écrire d’abord le code HTML, puis à ajouter les
scripts ou les balises côté serveur au code HTML pour rendre la page dynamique. Lorsque vous
visualisez le code obtenu, le langage apparaît incorporé dans le code HTML de la page. Par
conséquent, ces langages sont appelés langages de programmation HTML intégrés. L’exemple
élémentaire ci-dessous utilise le langage CFML (ColdFusion Markup Language) :
<html>
<head>
<title>Page d’informations sur Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est leader dans le domaine de la construction automobile.</
p>
<!--- début des instructions intégré --->
<cfset department="Service commercial">
<cfoutput>
<p>Nous vous invitons à visiter la page #department#.</p>
</cfoutput>
<!--- fin des instructions intégrés --->
</body>
</html>
Les instructions intégrées dans cette page exécutent les actions suivantes :
1 Création d’une variable appelée department et assignation de la chaîne "Service commercial"
à cette variable.
2 Insertion de la valeur de la variable, "Service commercial", dans le code HTML.
Le serveur d’application renvoie la page suivante au serveur Web :
<html>
<head>
<title>Page d’informations sur Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est leader dans le domaine de la construction automobile.</
p>
<p>Nous vous invitons à visiter la page de notre Service commercial.</p>
</body>
</html>
Le serveur Web transmet la page au navigateur demandeur, lequel l’affiche de la manière
suivante :
A propos de Trio Motors
Trio Motors est leader dans le domaine de la construction automobile.
Nous vous invitons à visiter la page Service commercial.
Création de pages dynamiques
61
Choisissez un langage de script ou de balise en fonction de la technologie de votre serveur. Les
langages les plus employés pour les cinq technologies de serveur prises en charge par
Dreamweaver MX 2004 sont :
Technologie de serveur
Langage
ColdFusion
CFML (ColdFusion Markup Language)
ASP.NET
Visual Basic
C#
Pages ASP (Active Server Pages)
VBScript
JavaScript
JSP (JavaServer Pages)
Java
PHP
PHP
Pour plus de détails, voir Choix d’une technologie de serveur, page 62.
Dreamweaver peut créer les scripts ou les balises côté serveur nécessaires au bon fonctionnement
de vos pages. Vous pouvez également les rédiger manuellement dans l’environnement de codage
de Dreamweaver.
Choix d’une technologie de serveur
Dreamweaver vous permet de créer des applications Web à partir de l’une des cinq technologies
de serveur : ColdFusion, ASP.NET, ASP, JSP ou PHP. Chacune de ces technologies correspond à
un type de document dans Dreamweaver. Le choix d’une technologie pour vos applications Web
repose sur plusieurs facteurs, notamment votre niveau de connaissance des différents langages de
script et le serveur d’application que vous envisagez d’utiliser.
Si vous n’avez jamais créé d’applications Web ou d’applications en général, vous préférerez
sûrement utiliser ColdFusion en raison de son environnement de script serveur convivial intégré à
Dreamweaver. Si vous êtes déjà familiarisé avec les autres technologies de serveur, JSP, PHP, ASP
ou ASP.NET par exemple, Dreamweaver les prend également en charge.
Le choix de la technologie de serveur dépend également du serveur d’application que vous
souhaitez utiliser pour l’application Web. Un serveur d’application est un logiciel qui aide un
serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Par exemple,
si vous disposez de ColdFusion MX Server , vous pouvez choisir ColdFusion comme technologie
de serveur. Si vous avez accès au serveur Microsoft Internet Information Server 5 (IIS) avec la
plate-forme .NET, vous pouvez choisir ASP.NET. Sélectionnez PHP si vous avez accès à un
serveur Web avec un serveur d’application PHP. En revanche, choisissez JSP pour les serveurs
Web avec serveur d’application JSP, tel que Macromedia JRun.
Vous trouverez une version de ColdFusion MX destinée aux développeurs sur le CD Studio MX
2004 (version Windows uniquement) et sur le site Web de Macromedia à l’adresse suivante :
www.macromedia.com/fr/software/coldfusion/.
Pour plus d’informations, voir Installation d’un serveur d’application de l’aide Utilisation
de Dreamweaver.
Pour en savoir plus sur ColdFusion, voir Utilisation de ColdFusion (disponible via le menu Aide de
Dreamweaver) ou visitez le site Web de Macromedia à l’adresse suivante : www.macromedia.com/
fr/software/coldfusion/.
62
Chapitre 4 : Description des applications Web
Pour en savoir plus sur ASP.NET, visitez le site Web Microsoft à l’adresse suivante : www.asp.net/
(en anglais).
Pour en savoir plus sur ASP, visitez le site Web Microsoft à l’adresse suivante :
msdn.microsoft.com/library/psdk/iisref/aspguide.htm (en anglais).
Pour en savoir plus sur JSP, visitez le site Web de Sun Microsystems à l’adresse suivante :
java.sun.com/products/jsp/ (en anglais).
Pour en savoir plus sur PHP, visitez le site Web de PHP à l’adresse suivante : www.php.net/ (en
anglais).
Terminologie du développement d’applications Web
Cette section regroupe la définition des termes relatifs aux applications Web fréquemment
utilisés.
Un serveur d’application est un logiciel qui aide un serveur Web à traiter des pages Web
contenant des scripts ou des balises côté serveur. Lorsqu’une page de ce type est requise par le
serveur, le serveur Web transmet cette page au serveur d’application afin qu’il la traite avant de
l’envoyer au navigateur. Pour plus de détails, voir Fonctionnement d’une application Web, page 56.
Les serveurs d’application les plus utilisés sont Macromedia ColdFusion, Macromedia JRun
Server, la plate-forme .NET de Microsoft, IBM WebSphere et Apache Tomcat.
Une base de données est un ensemble de données stockées sous forme de tables. Chaque ligne
d’une table correspond à un enregistrement et chaque colonne correspond à un champ de
l’enregistrement, tel qu’illustré dans l’exemple ci-dessous.
Champs (colonnes)
Number
LastName FirstName
Position
Goal
Enregistrements
(lignes)
Un pilote de base de données est un logiciel qui agit comme un interprète entre un serveur
d’application et une base de données. Les données d’une base de données sont stockées dans un
format propriétaire. Un pilote de base de données permet à l’application Web de lire et de
manipuler des données qui, sans cela, seraient indéchiffrables.
Un système de gestion de base de données (SGBD
ou système de base de données) est un
logiciel utilisé pour créer et manipuler des bases de données. Les systèmes de base de données les
plus courants sont Microsoft Access, Oracle 9i et MySQL.
désigne l’opération permettant d’extraire un jeu
d’enregistrements d’une base de données. Une requête est constituée de critères de recherche
exprimés en langage de base de données appelé SQL. La requête peut, par exemple, spécifier que
seules certaines colonnes ou certains enregistrements doivent être inclus dans le jeu
d’enregistrements.
Une requête de base de données
Une page dynamique est une page Web qui est personnalisée par un serveur d’application avant
qu’elle ne soit transmise à un navigateur. Pour plus de détails, voir Fonctionnement d’une
application Web, page 56.
Terminologie du développement d’applications Web
63
est un ensemble de données extraites d’une ou plusieurs tables de base
de données, comme l’illustre l’exemple suivant :
Un jeu d’enregistrements
Number
LastName FirstName
Position
Goals
Table de bases de données
LastName FirstName
Position
Table de jeux d'enregistrements
est une base de données contenant plusieurs tables qui
partagent des données. La base de données suivante est relationnelle car deux tables partagent la
colonne DepartmentID.
Une base de données relationnelle
Une technologie de serveur est une technologie utilisée par un serveur d’application pour
modifier des pages dynamiques lors de l’exécution.
L’environnement de développement de Dreamweaver prend en charge les technologies de serveur
suivantes :
•
•
•
•
•
Macromedia ColdFusion
Microsoft ASP.NET
Pages ASP (Active Server Pages) de Microsoft
Pages JSP (JavaServer Pages) de Sun
PHP : Hypertext Preprocessor (PHP)
Vous pouvez également utiliser l’environnement de codage de Dreamweaver pour développer des
pages destinées à une technologie de serveur quelconque non répertoriée ci-dessus.
Une page statique est une page Web qui n’est pas modifiée par un serveur d’application avant
qu’elle ne soit envoyée à un navigateur. Pour plus de détails, voir Traitement des pages Web
statiques, page 57.
64
Chapitre 4 : Description des applications Web
Une application Web est un site Internet dont le contenu des pages constitutives est
partiellement ou entièrement indéterminé. Le contenu final de ces pages est déterminé
uniquement lorsque l’utilisateur requiert une page depuis le serveur Web. Le contenu final d’une
page variant d’une requête à une autre en fonction des actions de l’utilisateur, ce type de page est
appelé page dynamique.
Un serveur Web est un logiciel qui renvoie des pages Web en réponse aux requêtes de navigateurs
Web. Une requête de page est générée lorsqu’un utilisateur clique sur un lien d’une page Web,
choisit un signet dans le navigateur ou saisit une URL dans le champ Adresse du navigateur.
Les serveurs Web les plus courants sont Microsoft Internet Information Server, Microsoft Personal
Web Server, Apache HTTP Server, Netscape Enterprise Server et Sun ONE Web Server.
Terminologie du développement d’applications Web
65
66
Chapitre 4 : Description des applications Web
CHAPITRE 5
Installation d’un serveur Web
Pour développer et tester des pages Web dynamiques, vous avez besoin d’un serveur Web
opérationnel. Ce chapitre explique aux utilisateurs Windows comment installer et utiliser un
serveur Web Microsoft sur un ordinateur local.
Si vous travaillez sous Windows et que vous souhaitez développer des sites ColdFusion, vous
pouvez utiliser le serveur Web inclus dans l’édition développeur du serveur d’application
ColdFusion MX. Vous pouvez l’installer et l’utiliser gratuitement. Pour plus d’informations, voir
Chapitre 6, Configuration d’un exemple de site ColdFusion, page 73.
Si vous utilisez un Macintosh, vous pouvez utiliser un serveur Web sur un ordinateur réseau ou un
serveur d’hébergement Web. Si vous souhaitez développer des applications PHP, vous pouvez
utiliser le serveur Web Apache déjà installé sur votre Macintosh.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
Bien démarrer, page 68
Installation de Personal Web Server, page 68
Installation d’Internet Information Server, page 69
Test de PWS ou IIS, page 69
Test du serveur Web Macintosh (développeurs PHP), page 70
Fonctions élémentaires du serveur Web, page 70
Remarque : Macromedia ne fournit pas de support technique pour les logiciels tiers tels
que Microsoft Internet Information Server (IIS). Si vous avez besoin d’aide pour un produit Microsoft,
contactez le support technique de Microsoft.
67
Bien démarrer
Si vous utilisez Windows, vous pouvez installer et exécuter les serveurs Web suivants sur votre
ordinateur : Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS), une
version complète de PWS. Vous pouvez également installer le serveur Web sur un ordinateur
Windows en réseau de façon à ce que d’autres développeurs de votre équipe puissent l’utiliser.
Si vous travaillez sous Windows et que vous souhaitez développer des applications ColdFusion,
vous pouvez également utiliser le serveur Web inclus dans l’édition développeur de
ColdFusion MX. Pour plus d’informations, voir Chapitre 6, Configuration d’un exemple de site
ColdFusion, page 73.
PWS ou IIS sont peut-être déjà installés sur votre ordinateur. Parcourez votre arborescence pour
vérifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. PWS et IIS créent ces dossiers lors
de l’installation.
Si aucun de ces dossiers n’existe, procédez de la manière suivante :
Windows 98 Copiez sur votre disque dur le fichier d’installation PWS que vous trouverez sur le
CD Windows 98. Ce fichier se trouve dans le dossier Add-Ons/PWS. Installez ensuite le
serveur Web. Pour obtenir des instructions, voir Installation de Personal Web Server, page 68.
Windows 2000
Installez IIS. Pour plus d’informations, voir Installation d’Internet Information
Server, page 69.
Windows XP Professionnel
Installez IIS. Pour plus d’informations, voir Installation d’Internet
Information Server, page 69.
Si vous utilisez un Macintosh et êtes intéressé par le développement d’applications PHP, vous
pouvez utiliser le serveur Web Apache déjà installé sur votre Macintosh. Pour plus d’informations,
voir Test du serveur Web Macintosh (développeurs PHP), page 70.
Installation de Personal Web Server
Les utilisateurs de Windows 98 doivent installer PWS. Si vous utilisez Windows 2000 ou
Windows XP Professionnel, installez IIS à la place. Pour plus d’informations, voir Installation
d’Internet Information Server, page 69.
Vous pouvez installer PWS sur le même système Windows 98 qui exécute Macromedia
Dreamweaver MX 2004. Assurez-vous que le système dispose de Microsoft Internet
Explorer 4.01 ou d’une version ultérieure, sinon vous ne pourrez pas installer PWS.
Pour installer PWS :
1 Double-cliquez sur le fichier d’installation de PWS du CD-ROM de Windows 98.
2 Suivez les instructions de l’assistant d’installation.
3 Lorsque celui-ci vous demande quel est votre répertoire personnel de publication Web par
défaut, acceptez le répertoire par défaut :
C:\Inetpub\wwwroot
4 Cliquez sur Terminer pour achever le processus d’installation.
Vous pouvez tester le serveur Web après l’avoir installé. Pour plus d’informations, voir Test de
PWS ou IIS, page 69.
68
Chapitre 5 : Installation d’un serveur Web
Installation d’Internet Information Server
Les utilisateurs de Windows 2000 et Windows XP Professionnel doivent installer IIS (Internet
Information Server). Si vous utilisez Windows 98, installez PWS à la place. Pour plus
d’informations, voir Installation de Personal Web Server, page 68.
Si vous utilisez Windows 2000 ou Windows XP Professionnel, vérifiez si IIS est déjà installé et en
cours d’exécution sur votre système. Pour cela, recherchez le dossier C:\Inetpub. S’il n’existe pas, il
est probable qu’IIS ne soit pas installé sur votre système.
Pour installer IIS sous Windows 2000 et XP Professionnel :
1 Sélectionnez Démarrer > Paramètres > Panneau de configuration > Ajouter ou supprimer des
programmes ou Démarrer > Panneau de configuration > Ajout/Suppression de programmes.
2 Sélectionnez Ajouter/Supprimer des composants Windows.
3 Sélectionnez Internet Information Services (IIS) et cliquez sur suivant.
4 Suivez les instructions d’installation.
Vous pouvez tester le serveur Web après l’avoir installé. Voir Test de PWS ou IIS, page 69.
Test de PWS ou IIS
Pour tester le serveur Web, créez une page HTML simple intitulée monFichierTest.html, puis
enregistrez-la dans le dossier Inetpub\wwwroot de l’ordinateur exécutant le serveur Web. Cette
page HTML peut comporter une seule ligne, par exemple :
<p>Mon serveur Web fonctionne.</p>
Ouvrez ensuite une page test dans un navigateur Web avec une requête HTTP. Si PWS ou IIS est
exécuté sur votre ordinateur local, entrez l’URL suivante dans votre navigateur Web :
http://localhost/monFichierTest.html
Si PWS ou IIS est exécuté sur un ordinateur en réseau, utilisez le nom de l’ordinateur en réseau
comme nom de domaine. Par exemple, si le nom de l’ordinateur qui exécute PWS ou IIS est
rockford-pc, entrez l’URL suivante dans votre navigateur :
http://rockford-pc/monFichierTest.html
Remarque : Pour plus d’informations sur les noms d’ordinateurs, voir Fonctions élémentaires du
serveur Web, page 70.
Si le navigateur affiche votre page, le serveur Web est exécuté normalement.
Si le navigateur ne peut pas afficher la page, assurez-vous que le serveur est en cours d’exécution.
Par exemple, pour PWS, double-cliquez sur l’icône du serveur Web de la barre d’état système
(l’icône ressemble à une main tenant une page Web). La boîte de dialogue de Personal Web
Manager s’affiche. Si le panneau Publication indique que votre publication Web est désactivée,
cliquez sur le bouton Démarrer, puis ressaisissez l’URL appropriée dans votre navigateur.
Si la page ne s’affiche toujours pas, assurez-vous que votre page test est placée dans le dossier
Inetpub\wwwroot et comporte une extension .htm ou .html.
Test de PWS ou IIS
69
Test du serveur Web Macintosh (développeurs PHP)
Vous pouvez utiliser le serveur Web Apache déjà installé sur votre Macintosh pour développer des
applications PHP.
Pour tester le serveur, créez une page HTML simple appelée monFichierTest.html et enregistrez-la
dans le dossier /Users/votre_nom_utilisateur/Sites/ de votre Macintosh (où votre_nom_utilisateur
est votre nom d’utilisateur Macintosh). Cette page HTML peut comporter une seule ligne, par
exemple :
<p>Mon serveur Web fonctionne.</p>
Ouvrez ensuite une page test dans un navigateur Web avec une requête HTTP en y entrant l’URL
suivante :
http://localhost/~votre_nom_utilisateur/monFichierTest.html
Remarque : Par défaut, le serveur Apache s’exécute sur le port 80.
Si le navigateur affiche votre page, le serveur Web est exécuté normalement. Si le navigateur ne
peut pas afficher la page, assurez-vous que le serveur est en cours d’exécution. Pour cela, affichez
les préférences du système et vérifiez le panneau de préférences de partage. L’option Partage Web
personnel doit être activée.
Par défaut, le serveur Web Apache ne fonctionne pas avec PHP ; vous devez d’abord le configurer.
Pour plus d’informations, voir Configuration du système (PHP) dans le guide Bien démarrer avec
Dreamweaver (disponible via le menu Aide de Dreamweaver).
Fonctions élémentaires du serveur Web
Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs
Web. Un serveur Web est parfois appelé serveur HTTP.
Supposons que vous utilisiez IIS pour développer des applications Web. Le nom par défaut de
votre serveur Web est le nom de votre ordinateur. Vous pouvez modifier le nom du serveur en
modifiant celui de votre ordinateur. Si votre ordinateur n’a pas de nom, le serveur utilise le mot
« localhost ».
Le nom du serveur correspond au dossier racine du serveur, lequel est généralement (sur un
ordinateur fonctionnant sous Windows) : C:\Inetput\wwwroot. Vous pouvez ouvrir une page
Web quelconque stockée dans le dossier racine en entrant l’URL suivante dans un navigateur en
cours d’exécution sur votre ordinateur.
http://votre_nom_serveur/votre_nom_fichier
Par exemple, si le nom du serveur est mer_noire et qu’une page Web intitulée soleil.html est
stockée dans C:\Inetput\wwwroot\, vous pouvez ouvrir cette page en tapant l’URL suivante dans
le navigateur en cours d’exécution sur l’ordinateur local :
http://mer_noire/soleil.html
Remarque : Pensez à utiliser des barres obliques et non des barres obliques inverses dans les URL.
Vous pouvez également ouvrir une page Web quelconque stockée dans un sous-dossier du dossier
racine en spécifiant ce sous-dossier dans l’URL. Par exemple, supposons que le fichier soleil.html
est stocké dans un sous-dossier nommé gamelan, de la façon suivante :
C:\Inetput\wwwroot\gamelan\soleil.html
70
Chapitre 5 : Installation d’un serveur Web
Vous pouvez ouvrir cette page en entrant l’URL suivante dans un navigateur en cours d’exécution
sur votre ordinateur :
http://mer_noire/gamelan/soleil.html
Lorsque le serveur Web est exécuté sur votre ordinateur, vous pouvez remplacer le nom du serveur
par « localhost ». Par exemple, les URL suivantes ouvrent la même page dans un navigateur :
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
Remarque : Vous pouvez aussi utiliser une autre expression à la place du nom du serveur ou de
localhost : 127.0.0.1 (par exemple, http://127.0.0.1/gamelan/soleil.html).
Fonctions élémentaires du serveur Web
71
72
Chapitre 5 : Installation d’un serveur Web
CHAPITRE 6
Configuration d’un exemple de site ColdFusion
Ce chapitre vous guide tout au long du processus de configuration de l’environnement de
développement d’un exemple de site qui utilise Macromedia ColdFusion MX. Au cours de
l’installation, ColdFusion MX, qui contient un serveur Web intégré, crée un répertoire
CFusionMX sur le disque dur principal de votre ordinateur (équivalant au répertoire Inetpub
pour les utilisateurs d’IIS). Une fois que vous avez effectué la configuration décrite dans ce
chapitre, vous êtes prêt à suivre les didacticiels de la seconde partie du manuel.
Si vous souhaitez utiliser un serveur Web différent avec ColdFusion, assurez-vous que le
serveur Web est installé sur votre système avant d’installer ColdFusion. Pour plus d’informations,
voir Chapitre 5, Installation d’un serveur Web, page 67.
Si vous êtes développeur ASP, ASP.NET, JSP ou PHP, vous pouvez trouver des instructions
rapides de configuration de l’environnement de développement dans le manuel Démarrage avec
Dreamweaver (Aide > Démarrage et didacticiels). Des instructions plus détaillées sont également
disponibles dans l’aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Remarque : L’exemple de base de données mentionné dans les chapitres de démarrage de
Dreamweaver avec ColdFusion, ASP, ASP.NET, JSP et PHP est différent de l’exemple mentionné
dans ce chapitre.
Aide-mémoire pour la configuration à l’intention des
développeurs ColdFusion
Pour configurer une application Web ColdFusion, vous devez configurer votre système, définir un
site Macromedia Dreamweaver MX 2004, puis vous connecter à une base de données. Cette
section fournit une liste de contrôle pour chaque tâche. Les procédures sont décrites dans le reste
du chapitre.
Configurez votre système :
1 Installez le serveur d’application ColdFusion. Ce serveur contient un serveur Web.
2 Créez un dossier racine.
3 Testez le serveur d’application (facultatif).
Définissez un site Dreamweaver :
1 Définissez un dossier local.
2 Définissez un dossier distant.
73
3 Définissez un dossier dans lequel traiter les pages dynamiques.
Connectez-vous à la base de données :
1 Copiez l’exemple de base de données sur votre ordinateur ou copiez l’exemple de base de
données sur l’ordinateur distant si vous disposez d’une configuration de serveur distant
2 Créez une source de données ColdFusion dans le programme ColdFusion Administrator.
3 Visualisez la connexion dans Dreamweaver.
Configuration du système
La première étape de la définition de votre environnement de développement consiste à
configurer votre système pour qu’il exécute ColdFusion MX. Après avoir installé ColdFusion,
vous pouvez créer une page de test pour vérifier que le serveur Web et le serveur d’application
fonctionnent correctement.
Installation de ColdFusion MX
Le serveur ColdFusion MX Server Developer Edition est disponible pour les systèmes Windows,
Linux, Solaris et HP-UX et est fourni avec les outils Studio MX 2004. Pour plus d’informations
sur la configuration requise pour l’installation de ColdFusion MX, veuillez visiter le site
www.macromedia.com/go/sysreqs.
Remarque : Les différences suivantes sont à noter entre ColdFusion MX Developer Edition et les
versions Standard et Enterprise : Il est gratuit dans le cadre d’une utilisation non commerciale pour
développer et tester des applications Web sur un hôte local et une adresse IP distante. La licence
accordée ne permet pas d’effectuer le déploiement. Il inclut toutes les fonctions des versions
Standard et Enterprise à l’exception de Macromedia ClusterCATS. Après 30 jours, il prend en
charge uniquement les requêtes provenant d’une seule adresse IP. Cependant, vous pouvez toujours
l’utiliser pour le développement et le test, il n’expire pas.
ColdFusion MX n’est pas installé automatiquement lorsque vous installez les outils
Studio MX 2004. Vous devez installer le logiciel séparément. Nous vous recommandons de
consulter les instructions d’installation de ColdFusion MX avant et pendant l’installation. Pour
plus d’informations, voir Installation et utilisation de ColdFusion MX dans l’aide Utilisation de
ColdFusion (disponible à partir du menu Aide de Dreamweaver).
Pour installer ColdFusion MX :
1 Fermez toutes les applications ouvertes.
2 Le cas échéant, connectez-vous au système Windows en utilisant le compte Administrateur.
3 Insérez le CD Macromedia Studio MX 2004. Lorsque l’écran d’installation s’affiche, cliquez sur
le bouton d’installation du serveur ColdFusion MX.
4 Suivez les instructions d’installation.
Remarque : Vous n’avez pas besoin de fournir de numéro de série lorsque vous installez le
serveur ColdFusion MX Server Developer Edition.
74
Chapitre 6 : Configuration d’un exemple de site ColdFusion
Au cours de l’installation, assurez-vous d’effectuer les tâches suivantes :
• Sélectionnez l’option de serveur Web intégré (pour opérations de développement uniquement)
dans la fenêtre de sélection de serveur Web. ColdFusion est ainsi configuré pour utiliser le
serveur Web intégré, plutôt qu’un autre serveur Web tel que Microsoft IIS.
• Entrez un mot de passe RDS au cours de la configuration du service RDS. Le service
ColdFusion Remote Development Service (RDS) permet au développeurs qui utilisent les
outils Macromedia de se connecter à distance aux serveurs à des fins de développement. Le mot
de passe RDS peut être identique au mot de passe d’administration de ColdFusion MX. Pour
plus d’informations, voir A propos de la sécurité dans ColdFusion MX dans l’aide Utilisation de
ColdFusion (disponible à partir du menu Aide de Dreamweaver).
Les utilisateurs de Macintosh peuvent avoir recours à un service d’hébergement Web offrant une
solution ColdFusion, ou bien installer ColdFusion sur un ordinateur Windows, Linux, Solaris
ou HP-UX distant exécutant un serveur Web. Pour plus d’informations, voir Configuration d’une
application Web dans l’aide Utilisation de Dreamweaver.
Remarque : Les utilisateurs de Macintosh peuvent aussi installer ColdFusion MX sur un ordinateur
Mac OS X exécutant un serveur J2EE tel que JRun ou Tomcat. Pour plus d’informations, voir le site
Web de Macromedia à l’adresse : www.macromedia.com/go/coldfusion_macintosh/. Le processus
d’installation est complexe et Dreamweaver n’a pas été testé avec ColdFusion MX sur Macintosh. En
outre, la connexion d’un serveur ColdFusionMX exécuté sur Macintosh vers des systèmes de base
de données tels que MySQL peut s’avérer difficile.
Création d’un dossier racine pour votre application
Après avoir installé le logiciel d’application, vous devez créer un dossier racine pour l’application
sur l’ordinateur exécutant le serveur Web. Assurez-vous que dossier est publié par le serveur Web,
c’est-à-dire qu’il transmette les fichiers de ce dossier et de ses sous-dossiers en réponse à une
requête HTTP d’un navigateur Web. Par exemple, sur un ordinateur exécutant le serveur Web
intégré ColdFusion MX, tout fichier du dossier CFusionMX\wwwroot ou de ses sous-dossiers
peut être transmis à un serveur Web.
Configuration du système
75
Dans le dossier CFusionMX\wwwroot, créez un dossier racine appelé trio_motors.
Lorsque vous suivrez les didacticiels de la seconde partie du manuel, vous enverrez vos pages
ColdFusion dans ce dossier afin que le serveur d’application puisse les traiter et envoyer des
données dynamiques au navigateur.
Pour plus d’informations, voir Configuration d’une application Web dans l’aide Utilisation de
Dreamweaver.
Test du serveur d’application
Vous pouvez vérifier que ColdFusion s’exécute correctement en créant une page test que vous
affichez dans un navigateur.
Pour tester le serveur d’application :
1 Dans tout éditeur de texte (tel que le Bloc-notes), créez un fichier en texte brut appelé test.cfm.
2 Enregistrez le fichier test.cfm dans le dossier racine trio_motors que vous avez créé dans la
section précédente. Gardez à l’esprit que ce dossier doit se trouver dans le dossier publié par le
serveur Web, CFusionMX\wwwroot.
3 Saisissez le code suivant dans le fichier test.cfm :
<html>
<head>
<title>Test du serveur d’application CF MX</title>
</head>
<body>
Date du jour : <CFOUTPUT>#DateFormat(Now(),"dddd, m/d/yy")#</CFOUTPUT>
</body>
</html>
76
Chapitre 6 : Configuration d’un exemple de site ColdFusion
Ce code affiche la date à laquelle la page a été traitée sur le serveur.
4 Enregistrez le fichier après avoir saisi le code.
5 Dans votre navigateur Web, tapez l’URL de votre page de test, puis appuyez sur Entrée.
Par défaut, ColdFusion MX utilise le port de serveur Web 8500. L’URL est la suivante :
http://localhost:8500/trio_motors/test.cfm
La page de test s’ouvre et affiche la date actuelle.
Si la page ne fonctionne pas correctement, recherchez les erreurs potentielles suivantes :
• Le fichier ne porte pas l’extension .cfm.
• Le chemin d’accès de la page (c:\CFusionMX\wwwroot\trio_motors\test.cfm) a été saisi dans
•
•
la zone de texte Adresse du navigateur au lieu de son URL (par exemple, http://localhost:8500/
trio_motors/test.cfm).
Si vous tapez un chemin de fichier dans le navigateur (comme vous en avez peut-être l’habitude
avec les pages HTML normales), vous contournez le serveur Web et le serveur d’application.
Votre page n’est alors jamais traitée par le serveur.
L’URL contient une faute de frappe. Recherchez les erreurs éventuelles et vérifiez que le nom
de fichier n’est pas suivi d’une barre oblique, comme dans l’exemple suivant : http://
localhost:8500/trio_motors/test.cfm/.
Le code de la page contient une faute de frappe.
Configuration du système
77
Définition d’un site Dreamweaver
Dans Dreamweaver, le terme site peut se rapporter aussi bien à un site Web qu’au dossier local
dans lequel sont conservés tous les documents appartenant à un site Web. Vous devez définir ce
dossier avant de créer le site Web. Un site Dreamweaver organise tous les documents associés à
votre site Web et vous permet de suivre et de gérer les liens, de gérer et de partager les fichiers,
ainsi que de transférer vos fichiers de site à un serveur Web.
Un site Dreamweaver se compose de trois parties, selon votre environnement de travail et le type
de site Web en développement :
Le dossier local correspond à votre répertoire de travail. Dreamweaver désigne ce dossier comme
votre site local. Le dossier local est généralement un dossier qui se trouve sur votre disque dur.
Le dossier distant est le répertoire dans lequel sont stockés les fichiers, selon votre
environnement, que vous réservez aux évaluations, à la production, à la collaboration, etc.
Dreamweaver désigne ce dossier comme votre site distant. Le dossier distant est un dossier qui se
trouve sur l’ordinateur exécutant le serveur Web.
Le dossier des pages dynamiques (dossier du serveur d’évaluation) est l’emplacement dans
lequel Dreamweaver traite les pages dynamiques. Ce dossier est généralement le même que le
dossier distant.
Vous pouvez définir un site Dreamweaver à l’aide de l’assistant de définition d’un site, qui vous
guide tout au long de la procédure de configuration, ou à l’aide des paramètres avancés de
définition du site, qui vous permettent de configurer individuellement des dossiers locaux,
distants et d’évaluation, si nécessaire.
Les sections suivantes décrivent comment utiliser les paramètres avancés de définition du site dans
Dreamweaver. Si vous ne maîtrisez pas Dreamweaver, nous vous recommandons d’utiliser
l’assistant de définition d’un site en premier lieu. Pour plus d’informations, voir Utilisation de
l’assistant de définition d’un site Dreamweaver dans l’aide Utilisation de Dreamweaver.
Définition d’un dossier local
Vous devez définir un dossier local Dreamweaver pour chaque site Web créé. Ce dossier local est
le dossier du disque dur dans lequel seront stockées les copies de travail des fichiers du site. Ce
dossier local est indispensable au bon fonctionnement de certaines fonctions de Dreamweaver.
La définition d’un dossier local vous permet également de gérer vos fichiers et de les transférer vers
ou depuis le serveur Web à l’aide de différentes méthodes de transfert de fichiers.
Vous pouvez maintenant créer le dossier local pour l’exemple du site Web Trio Motors.
Pour créer le dossier local d’exemple du site :
1 Avant de lancer Dreamweaver, créez sur le disque dur un dossier appelé trio_motors dans lequel
seront stockées les copies de travail des fichiers.
2 Dans le dossier trio_motors, créez trois sous-dossiers : flash, png et images. Vous n’utiliserez pas
ces dossiers tout de suite, mais ils seront nécessaires pour suivre les didacticiels suivants de
ce manuel.
3 Lancez Dreamweaver, puis sélectionnez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
78
Chapitre 6 : Configuration d’un exemple de site ColdFusion
4 Cliquez sur le bouton Nouveau, puis sélectionnez Site.
La boîte de dialogue Définition du site s’ouvre.
5 Si l’assistant (onglet Elémentaire) s’affiche, cliquez sur l’onglet Avancé et sélectionnez Infos
locales dans la liste Catégorie (sélection par défaut).
6 Dans la zone de texte Nom du site, entrez Trio Motors.
7 Dans la zone de texte Dossier racine local, indiquez le dossier trio_motors créé à l’étape 1. Vous
pouvez cliquer sur l’icône de dossier pour rechercher et sélectionner le dossier ou entrer le
chemin d’accès dans la zone de texte.
8 Dans la zone de texte Dossier des images par défaut, indiquez le dossier d’images créé à l’étape 2.
Vous pouvez cliquer sur l’icône de dossier pour rechercher et sélectionner le dossier ou entrer le
chemin d’accès dans la zone de texte.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez ensuite définir
un dossier distant.
Définition d’un dossier distant
Après avoir défini un dossier local, vous pouvez définir un dossier distant pour le
site Dreamweaver. Le dossier distant correspond au dossier racine (trio_motors) créé pour
l’application Web dans Création d’un dossier racine pour votre application, page 75. Il porte le
même nom que le dossier local car votre site distant sera une copie exacte de votre site local. Cela
signifie que les fichiers et les sous-dossiers que vous transférerez dans votre dossier distant seront
des copies des fichiers et des sous-dossiers créés localement.
Définition d’un site Dreamweaver
79
Pour définir un dossier distant :
1 Dans la boîte de dialogue Définition du site, sélectionnez Infos distantes dans la liste Catégorie.
La boîte de dialogue Infos distantes s’affiche.
2 Dans le menu déroulant Accès, sélectionnez l’une des options suivantes : Local/Réseau, FTP ou
RDS.
Votre choix dépend de la méthode que vous souhaitez utiliser pour le transfert des fichiers entre
le dossier local et le dossier distant.
Si vous avez configuré ColdFusion MX sur votre ordinateur local ou sur un ordinateur distant
en réseau, vous devez sélectionner Local/Réseau comme méthode d’accès.
Remarque : Si vous souhaitez utiliser RDS, le dossier distant doit être situé sur un ordinateur
exécutant ColdFusion.
Dreamweaver prend également en charge les méthodes d’accès aux bases de
données SourceSafe et WebDAV. Pour plus d’informations, voir Définition des options de la
catégorie Infos distantes dans l’aide Utilisation de Dreamweaver.
3 Après avoir sélectionné une méthode d’accès, définissez les options d’accès correspondantes.
Les options d’accès illustrées ci-dessous définissent le dossier racine, trio_motors, comme
dossier distant. Dans ce cas, le dossier trio_motors se trouve dans le dossier
CFusionMX\wwwroot, le dossier publié sur le serveur Web intégré.
Pour plus d’informations, voir Création d’un dossier racine pour votre application, page 75
ou Configuration d’un dossier Infos distantes dans l’aide Utilisation de Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez maintenant
définir un dossier pour traiter les pages dynamiques.
80
Chapitre 6 : Configuration d’un exemple de site ColdFusion
Définition du dossier de traitement des pages dynamiques
Après avoir défini le dossier distant dans Dreamweaver, vous devez indiquer le dossier dans lequel
les pages dynamiques pourront être traitées. Dreamweaver utilise ce dossier, le dossier du serveur
d’évaluation, pour générer du contenu dynamique et se connecter à des bases de données pendant
que vous travaillez.
Normalement, vous spécifiez le dossier racine créé sur le serveur Web comme dossier du serveur
d’évaluation. Le dossier du serveur d’évaluation doit résider sur le serveur Web.
Remarque : Le dossier racine peut se trouver sur votre ordinateur local ou sur un ordinateur distant,
en fonction de l’emplacement d’exécution du serveur Web. Dans certains cas, les utilisateurs
sélectionnent un dossier racine sur le serveur Web local en tant que dossier du serveur d’évaluation et
un autre dossier racine sur le serveur Web distant en tant que dossier distant. Les utilisateurs peuvent
ainsi tester les pages dynamiques localement avant de les charger sur le serveur distant en accès
public.
Pour spécifier un dossier dans lequel traiter les pages dynamiques :
1 Dans la boîte de dialogue Définition du site, sélectionnez Serveur d’évaluation dans la liste
2
3
4
5
Catégorie.
La boîte de dialogue Serveur d’évaluation s’affiche.
Sélectionnez ColdFusion dans le menu déroulant Modèle de serveur.
Sélectionnez une méthode d’accès dans le menu déroulant Accès. Si vous avez sélectionné Local/
Réseau à la section précédente, sélectionnez Local/Réseau.
Acceptez les paramètres par défaut du dossier Serveur d’évaluation ou entrez d’autres
paramètres.
Par défaut, Dreamweaver suppose que le dossier du serveur d’évaluation et le dossier distant
constituent un seul et même dossier. Si vous avez défini un dossier distant dans la catégorie
Infos distantes de la boîte de dialogue Définition du site et qu’un serveur d’application réside
sur le système qui comprend le dossier distant (par exemple votre ordinateur local), acceptez les
paramètres par défaut de la catégorie Serveur d’évaluation.
Dans la zone de texte Préfixe de l’URL, entrez l’URL que vous devez saisir dans votre navigateur
pour ouvrir votre site Web mais n’indiquez pas de nom de fichier.
Par exemple, si l’URL de votre application est http://www.macromedia.com/trio_motors/
index.cfm, entrez le préfixe d’URL suivant : http://www.macromedia.com/trio_motors/.
Si Dreamweaver est exécuté sur le même système que le serveur Web intégré ColdFusion, vous
pouvez utiliser le terme localhost:8500 pour représenter votre nom de domaine. Supposons
que votre site Web possède l’URL suivante :
http://buttercup_pc/trio_motors/index.cfm
Entrez le préfixe d’URL suivant :
http://localhost:8500/trio_motors/
Pour plus d’informations, voir Définition du préfixe d’URL dans l’aide Utilisation
de Dreamweaver.
Définition d’un site Dreamweaver
81
6 Vérifiez vos paramètres de serveur d’évaluation.
Les paramètres de serveur d’évaluation illustrés ci-dessous s’appliquent à un site Dreamweaver
qui utilise ColdFusion MX et le serveur Web intégré ColdFusion sur un ordinateur
Windows XP.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue Serveur
d’évaluation.
7 Cliquez sur OK, puis sur Terminé.
Dreamweaver ajoute le nouveau site à votre liste de sites dans le panneau Fichiers.
Connexion à l’exemple de base de données
Cette section explique comment créer une connexion à un exemple de base de données
Microsoft Access.
Avant de commencer cette section, vous devez copier l’exemple de base de données sur votre
ordinateur. Pour localiser l’exemple de base de données, insérez le CD Studio MX 2004 dans
votre ordinateur et choisissez l’option d’exploration du contenu du CD dans l’angle inférieur
droit de l’écran d’installation. L’exemple de base de données trio.mdb se trouve dans le dossier
d’exemples Samples avec tous les fichiers d’exemple nécessaires pour suivre les didacticiels de la
seconde partie du manuel.
Si vous utilisez Windows et que votre serveur Web s’exécute sur le même ordinateur que
Dreamweaver, recherchez l’exemple de base de données et copiez-le sur votre disque dur. Vous
pouvez stocker le fichier dans le dossier de votre choix sur votre ordinateur ou créer un nouveau
dossier. Par exemple, vous pouvez créer un dossier appelé Données dans votre dossier
CFusionMX\wwwroot et stocker l’exemple de base de données à cet endroit.
82
Chapitre 6 : Configuration d’un exemple de site ColdFusion
Si vous utilisez un Macintosh, voir la section suivante, Configuration de la base de données
(configuration de serveur distant uniquement).
Pour plus d’informations sur les bases de données et les connexions aux bases de données, voir
l’annexe Guide du débutant en base de données dans l’aide Utilisation de Dreamweaver.
Configuration de la base de données (configuration de serveur distant
uniquement)
Cette section s’applique uniquement si vous disposez d’une configuration de serveur distant, c’està-dire si votre serveur Web s’exécute sur un ordinateur distant. Si votre serveur Web s’exécute sur
le même ordinateur que Dreamweaver, passez directement à la section suivante, Création d’une
source de données ColdFusion.
Avant d’essayer de vous connecter à l’exemple de base de données, copiez la base de données sur le
disque dur de l’ordinateur distant. Le fichier de la base de données, trio.mdb, réside dans le
dossier d’exemples Samples sur le CD Macromedia Studio MX 2004.
Vous pouvez stocker le fichier dans le dossier de votre choix, sur l’ordinateur distant, ou créer un
nouveau dossier. Par exemple, vous pouvez créer un dossier appelé Données dans votre dossier
CFusionMX\wwwroot et stocker l’exemple de base de données à cet endroit.
Une fois que vous avez placé la base de données, créez une source de données ColdFusion dans le
programme ColdFusion Administrator.
Création d’une source de données ColdFusion
Avant de vous connecter à une base de données dans Dreamweaver, vous devez créer une source
de données ColdFusion dans le programme ColdFusion Administrator, la console de gestion du
serveur.
Une source de données ColdFusion est un identificateur formé d’un seul mot (Acme par exemple),
qui pointe vers la base de données et contient toutes les informations requises pour s’y connecter.
Les sources de données ColdFusion sont similaires aux noms de sources de données
Windows (DSN) car elles incluent automatiquement tous les DSN définis sur le système
Windows exécutant ColdFusion. Elles diffèrent des DSN en ce que vous pouvez créer des sources
de données pour des bases de données à l’aide de fournisseurs OLE DB ou de pilotes natifs. Les
DSN peuvent pointer vers des bases de données uniquement si vous utilisez des pilotes ODBC
installés sur un ordinateur Windows. Pour plus d’informations, voir l’annexe Guide du débutant
en base de données dans l’aide Utilisation de Dreamweaver.
Vous pouvez maintenant définir l’exemple de base de données Trio Motors en tant que source de
données ColdFusion.
Pour définir l’exemple de base de données en tant que source de données ColdFusion :
1 Dans le panneau Fichiers de Dreamweaver, sélectionnez le site Trio Motors créé dans Définition
d’un site Dreamweaver, page 78.
2 Créez un fichier en sélectionnant Fichier > Nouveau.
3 Sélectionnez Page dynamique dans la colonne Catégorie et ColdFusion dans la colonne Page
dynamique de l’onglet Général.
4 Cliquez sur Créer.
5 Donnez un titre au document en saisissant Trio Motors dans la zone Titre dans la partie
supérieure du document.
Connexion à l’exemple de base de données
83
6 Enregistrez le fichier (Fichier > Enregistrer) dans le répertoire principal du site Trio Motors
(trio_motors) et attribuez-lui le nom index.cfm.
Ne fermez pas le fichier. Il doit être ouvert dans la fenêtre de document pour que vous puissiez
terminer la procédure.
7 Cliquez sur l’icône Modifier les sources de données dans le panneau Bases de données (Fenêtre >
Bases de données).
Icône Modifier les
sources de données
ColdFusion Administrator s’ouvre dans une fenêtre de navigateur.
8 Connectez-vous à ColdFusion Administrator en utilisant le mot de passe sélectionné lors de
l’installation de ColdFusion MX.
La fenêtre Sources de données s’affiche.
9 Entrez trio dans la zone de texte Nom de la source de données.
10 Sélectionnez Microsoft Access dans le menu déroulant Pilote.
Pour plus d’informations sur les pilotes de base de données, voir l’annexe Guide du débutant en
base de données dans l’aide Utilisation de Dreamweaver.
84
Chapitre 6 : Configuration d’un exemple de site ColdFusion
11 Cliquez sur le bouton Ajouter.
Une fenêtre de sélection de source de données s’affiche.
12 Cliquez sur le bouton de navigation sur le serveur situé à côté de la zone de texte du fichier de
base de données et recherchez la base de données Microsoft Access pour Trio Motors.
Si ColdFusion s’exécute sur votre ordinateur local, recherchez le fichier de base de données que
vous avez copié sur votre disque dur à partir du CD Macromedia Studio MX 2004. Pour plus
d’informations, voir le début de cette section, Connexion à l’exemple de base de données,
page 82.
Si ColdFusion s’exécute sur un ordinateur distant, créez une source de données qui pointe vers
le fichier de base de données que vous avez placé sur l’ordinateur distant. Voir Configuration de
la base de données (configuration de serveur distant uniquement), page 83.
13 Cliquez sur Appliquer.
ColdFusion Administrator renseigne le champ du fichier de base de données avec le chemin
d’accès correct pour la base de données.
14 Vous pouvez éventuellement entrer une description de la base de données dans la zone de texte
Description.
Connexion à l’exemple de base de données
85
15 Cliquez sur le bouton Soumettre.
ColdFusion Administrator affiche une nouvelle fois la fenêtre Sources de données.
Si vous avez sélectionné un chemin d’accès de base de données valide et que les pilotes
appropriés sont installés sur votre système, ColdFusion Administrator affiche OK dans la
colonne Etat de la fenêtre des sources de données connectées.
Pour plus d’informations, y compris des informations relatives à la connexion aux sources de
données utilisant Oracle, MySQL et d’autres pilotes, consultez la documentation de
ColdFusion Administrator. Vous pouvez accéder à la documentation de ColdFusion
Administrator en cliquant sur le lien Documentation situé dans la partie supérieure de l’écran
ColdFusion Administrator.
86
Chapitre 6 : Configuration d’un exemple de site ColdFusion
Affichage de sources de données ColdFusion dans Dreamweaver
Une fois la source de données ColdFusion créée dans ColdFusion Administrator, vous pouvez
l’utiliser pour vous connecter à la base de données depuis Dreamweaver.
Pour afficher la source de données ColdFusion dans Dreamweaver :
1 Vérifiez que le fichier index.cfm créé dans Création d’une source de données ColdFusion, page 83
est toujours ouvert dans la fenêtre de document de Dreamweaver. S’il n’est pas ouvert, doublecliquez sur l’icône du fichier dans le panneau Fichiers pour l’ouvrir.
2 Ouvrez le panneau Base de données (Fenêtre > Bases de données).
3 Spécifiez les informations de connexion RDS pour le serveur ColdFusion MX. Pour ce faire,
cliquez sur le lien de l’invite, entrez votre mot de passe de connexion RDS, puis cliquez sur OK.
Vos sources de données ColdFusion s’affichent dans le panneau.
Bouton Actualiser
Remarque : Il est parfois nécessaire de cliquer sur le bouton Actualiser pour afficher la nouvelle
source de données.
Le mot de passe RDS est défini lors de l’installation de ColdFusion MX. Le mot de passe RDS
est en général (mais pas obligatoirement) le même que votre mot de passe
ColdFusion Administrator. Pour modifier votre mot de passe RDS, cliquez sur le lien du mot
de passe RDS dans la catégorie Sécurité de ColdFusion Administrator, puis suivez les
instructions.
Connexion à l’exemple de base de données
87
88
Chapitre 6 : Configuration d’un exemple de site ColdFusion
Création d’actifs pour un site Web dynamique à l’aide de Macromedia Dreamweaver MX 2004,
Macromedia Flash MX 2004, Macromedia Fireworks MX 2004, Macromedia FreeHand MX et
Macromedia ColdFusion MX.
Avant de commencer, assurez-vous que votre système est configuré, que votre site Dreamweaver
est défini et que vous êtes connecté à une base de données. Pour plus d’informations, voir
Chapitre 6, Configuration d’un exemple de site ColdFusion, page 73.
Cette partie du manuel contient les sections suivantes :
Chapitre 7, Processus de développement Web, page 91
Didacticiel 1, Didacticiel Dessin du plan de navigation sur le site dans FreeHand, page 117
Didacticiel 2, Création d’une mise en forme basée sur un tableau dans Dreamweaver, page 131
Didacticiel 3, Création d’une bannière dans Fireworks, page 141
Didacticiel 4, Création d’une barre de navigation avec Fireworks, page 149
Didacticiel 5, Création de médias enrichis avec Fireworks et Flash, page 165
Didacticiel 6, Assemblage et modification d’actifs Studio, page 177
Didacticiel 7, Création d’une fonction de recherche dans une base de données, page 189
PARTIE II
PARTIE II
Utilisation de Macromedia Studio
CHAPITRE 7
Processus de développement Web
Ce chapitre présente les différents composants de Macromedia Studio MX 2004
(Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004,
Macromedia Fireworks MX 2004, Macromedia FreeHand MX et Macromedia ColdFusion MX)
et la façon dont ils interagissent pour offrir aux concepteurs et développeurs Web un
environnement optimal de conception et de développement d’application. Les outils de
Studio MX forment un environnement complet pour la conception et le développement
d’interfaces côté client pour des applications et du contenu complexes, ainsi qu’une logique côté
serveur pour les applications déployées avec des clients HTML, Flash, ColdFusion et d’autres
technologies serveur.
Un processus de développement Web standard présente les étapes suivantes :
• Planification de site, incluant la définition de la stratégie ou des objectifs du site, le choix du
public visé et la définition des données requises pour le site
• Définition de l’environnement de développement, incluant la sélection des serveurs Web et
d’applications, la définition d’un site Dreamweaver et la définition des sources de données
• Planification de la conception et de la mise en forme de la page, incluant le mappage de vos
•
•
•
pages et de vos interfaces d’application à l’aide d’un outil de dessin tel que FreeHand et la mise
en forme des pages HTML avec Dreamweaver
Création d’actifs de contenu, incluant la création d’images et de médias enrichis avec Flash,
Fireworks et FreeHand
Création d’actifs d’application, incluant la création de pages et d’applications Internet
dynamiques avec Dreamweaver et Flash
Assemblage, test et déploiement de votre site, incluant la compilation de vos actifs, la
vérification des conditions d’accessibilité, le test de votre code et la publication de votre site sur
un serveur à l’aide de Dreamweaver
Studio MX 2004 offre tous les outils nécessaires à la réalisation complète de ce processus. La
combinaison de Dreamweaver, Flash, Fireworks, FreeHand et ColdFusion vous permet de créer,
de déployer et de gérer aisément les sites Web dynamiques et les applications à la fois dans des
environnements de code et de conception. Vous obtenez des interfaces utilisateur plus riches et
une logique d’application plus résistante.
91
Ce chapitre présente un exemple de processus de développement Web. Bien qu’il fournisse des
méthodes d’optimisation de vos efforts de conception et de développement, il ne présente qu’un
exemple de processus possible. Le processus que vous et votre équipe déciderez d’adopter dépend
de vos ressources, de vos habitudes de travail personnelles et des besoins de votre site Web. Ce
chapitre a pour but de vous proposer des idées et des pratiques de conception et de
développement de sites Web et d’applications à l’aide de Studio MX 2004.
Pour plus d’informations sur les produits de Studio MX 2004, consultez les chapitres 1 à 3 de ce
manuel ou consultez l’aide en ligne de chacun des produits en sélectionnant Utilisation de
Dreamweaver, Utilisation de Flash, Utilisation de Fireworks ou Utilisation de FreeHand dans le
menu Aide.
Planification de votre site Web
La planification et l’organisation efficace de votre site ne se limite pas à la définition de
l’apparence du site et à l’emplacement de ses fichiers. Vous devez déterminer les objectifs du site,
les conditions requises en matière de pages dynamiques et statiques et les profils de publics visés.
Vous devez aussi tenir compte des conditions techniques requises, telles que l’accès utilisateur et
les restrictions de navigateur, de plug-in ou de chargement. Une planification minutieuse avant de
procéder au développement du site vous permettra de gagner énormément de temps par la suite.
Définition des objectifs du site et du public visé
La définition des objectifs du site constitue la première étape de la création d’un site Web.
Interrogez-vous ou interrogez votre client sur le site et notez vos objectifs afin de ne pas vous en
éloigner lors de la conception du site. Une liste d’objectifs vous aide à distinguer les besoins
particuliers de votre site Web. La navigation sur le site, le support utilisé et l’apparence de votre
site dépendent de la complexité de vos objectifs. L’apparence d’un site Web dédié aux
informations archéologiques et sa navigation seront très différentes de celles d’un site dédié à la
vente d’appareils électroménagers. De même, un site proposant du contenu et des applications
complexes n’a pas la même apparence qu’un site présentant des données dynamiques affichées à
l’aide de méthodes HTML plus traditionnelles.
Après avoir déterminé les objectifs de votre site Web, vous devez cibler votre public. Cette
question peut ne pas sembler nécessaire puisque vous souhaiteriez que tout le monde visite votre
site Web. Néanmoins, il s’avère très difficile de créer un tel site Web. Dans le monde entier, les
utilisateurs ont recours à différents types de navigateurs, se connectent à différentes vitesses,
possèdent ou non des plug-ins et utilisent différents types de périphériques d’affichage de contenu
Internet. Tous ces facteurs ayant des répercussions sur l’utilisation de votre site, il est essentiel de
déterminer le public ciblé lors de la phase initiale de la planification.
Demandez-vous qui pourrait être intéressé par votre site et qui vous souhaiteriez intéresser. Quels
types d’ordinateurs utilisent-ils ? Quelle est la plate-forme la plus utilisée (Macintosh, Windows,
Linux, etc.) et quelle est la vitesse de connexion moyenne (modem 33,6 Kbps ou DSL) ? Quels
types de navigateurs, d’écrans, de téléphones cellulaires et autres périphériques utilisent-ils ?
Souhaitez-vous créer un site intranet dans lequel tous les utilisateurs se servent du même
ordinateur, du même système d’exploitation et du même navigateur ? Tous ces facteurs ont
d’importantes répercussions sur l’apparence de vos pages Web et sur la façon dont vous testerez le
site après l’avoir créé.
92
Chapitre 7 : Processus de développement Web
Conception de sites et compatibilité de navigateur
Lorsque vous créez votre site, vous devez prendre en compte le fait que les visiteurs utilisent une
grande diversité de navigateurs Web. Il existe plus d’une vingtaine de navigateurs Web différents
en circulation, dont la plupart ont fait l’objet de plusieurs versions. Même si vous ne visez que
Netscape Navigator et Microsoft Internet Explorer, qui sont utilisés par la très grande majorité des
visiteurs, n’oubliez pas que tous n’utilisent pas la dernière version de ces deux navigateurs. Si votre
site est hébergé sur le Web, un internaute sera éventuellement amené à le visiter en utilisant
Netscape Navigator 3.0, le nouveau navigateur Macintosh Safari ou encore un navigateur de texte
seulement tel que Lynx.
Si votre site Web est conçu pour le grand public, il est préférable de rendre votre site visible pour
le plus grand nombre possible de navigateurs. Choisissez un ou deux navigateurs cibles et créez le
site pour ces navigateurs. Explorez de temps en temps le site avec d’autres navigateurs pour éviter
de proposer trop de contenu non compatible. Vous pouvez également envoyer un message à un
forum de discussion pour demander à d’autres internautes de consulter votre site. Il est, en effet,
toujours bon d’avoir l’avis d’un très vaste public.
Plus votre site est sophistiqué, en termes de mise en forme, d’animation, de multimédia et
d’interaction, moins il est compatible avec tous les navigateurs. Par exemple, certains navigateurs
ne peuvent pas exécuter de code JavaScript. Bien que vous puissiez afficher une page de texte brut
ne faisant appel à aucun enrichissement sophistiqué, elle offrira évidemment beaucoup moins
d’attrait, sur le plan esthétique, qu’une page utilisant efficacement des images, une mise en forme
et des éléments interactifs. Essayez de trouver un juste milieu entre une conception orientée vers
un maximum d’effets et une conception orientée vers une compatibilité maximale.
Une approche intéressante consiste à créer plusieurs versions de certaines pages importantes, en
particulier de la page d’accueil de votre site. Par exemple, vous pouvez concevoir une version avec
cadres et une version sans cadre. Ensuite, vous pouvez intégrer dans votre page un comportement
qui envoie automatiquement les visiteurs équipés de navigateurs ne prenant pas en charge les
cadres vers la version sans cadre. Pour plus d’informations, voir Utilisation des actions de
comportement livrées avec Dreamweaver dans l’aide Utilisation de Dreamweaver.
Des fonctions spéciales de Dreamweaver permettent de réduire aisément les problèmes de
compatibilité de navigateurs. La fonction Vérifier les navigateurs cibles teste le code de vos
documents et détermine s’il contient des balises, des attributs, des propriétés ou des valeurs CSS
non prises en charge par les navigateurs cibles. Cette vérification n’altère en rien le document. Par
défaut, Dreamweaver vérifie automatiquement le navigateur cible lorsque vous ouvrez un
document. Cette vérification peut également s’effectuer manuellement sur un document, un
dossier ou sur l’ensemble d’un site.
Pour plus d’informations, voir Vérification de la compatibilité du navigateur dans l’aide Utilisation
de Dreamweaver.
Planification de votre site Web
93
Définition des données requises et création d’une base de données
Que vous développiez une application Internet dynamique à l’aide de Flash ou une
application Web HTML plus traditionnelle à l’aide de Dreamweaver, vous devrez certainement
utiliser une base de données pour stocker les informations qui seront accessibles aux utilisateurs
du site Web. Toutefois, vous devez déterminer les données requises pour votre site Web avant de
créer votre base de données. Quels types de données dynamiques souhaitez-vous afficher sur vos
pages Web, et à quel emplacement ? Si les utilisateurs sont amenés à interagir avec une interface
d’application, quelles questions poseront-ils à l’application et quelles informations voudront-ils
extraire de la base de données ? Une fois les objectifs et le public visé de votre site déterminés, vous
aurez une bonne idée des sources de données requises pour commencer à développer votre
site Web.
Après avoir déterminé les sources de données requises, pensez à la structure que doit présenter
votre base de données pour qu’elle transmette le mieux possible les informations stockées aux
utilisateurs. Vous pouvez décider de la structure de votre base de données avant d’établir la mise
en forme de vos pages Web ou lors du développement de l’interface de l’application elle-même.
Décidez du moment et de la façon dont vous créez votre base de données en fonction des besoins
de votre processus de développement.
La première étape consiste à sélectionner les tables de la base de données. Une table de base de
données contient des ensembles d’entités liées, telles que des personnes, des objets ou des
événements qui sont organisés en lignes et en colonnes. Dans une base de données, une colonne
représente un champ et une ligne représente un enregistrement.
Après avoir déterminé le nombre et les types de tables de votre base de données, choisissez les
colonnes de chaque table. Les colonnes décrivent les propriétés de chaque entité ou
enregistrement de la table. Par exemple, vous pouvez créer une table nommée Joueurs contenant
des informations sur les membres d’une équipe de hockey. La table Joueurs peut contenir une
colonne indiquant le prénom, le nom, la position, le nombres de buts marqués, etc. de chaque
membre de l’équipe (voir l’illustration précédente). Chaque ligne de la table Joueurs représente
alors un enregistrement unique concernant un membre de l’équipe, comme une carte à
collectionner contenant des informations sur un joueur spécifique.
Assurez-vous que chaque table est dotée d’une colonne de clé primaire. Cette colonne contient
des valeurs qui identifient chaque enregistrement de manière unique, c’est-à-dire que chaque
valeur est unique pour tous les enregistrements. Vous pouvez ainsi retrouver une ligne lors d’une
recherche dans la base de données. La plupart des colonnes à clé primaire contiennent des
numéros d’identification, mais vous pouvez utiliser d’autres clés primaires, telles que des numéros
de formulaires ou des numéros de série de produits.
Pour plus d’informations, voir l’annexe Guide du débutant en base de données dans l’aide
Utilisation de Dreamweaver.
94
Chapitre 7 : Processus de développement Web
Dessin de la navigation sur le site dans FreeHand et présentation du plan
Une fois que vous avez déterminé les objectifs de votre site, le public visé et les sources de données
requises, vous pouvez commencer à concevoir le plan de navigation du site. Le plan de navigation
du site est une sorte de carte qui décrit comment vos pages Web sont liées les unes aux autres. Plus
particulièrement, il montre la manière dont les utilisateurs naviguent sur votre site en cliquant sur
les liens et en interagissant avec les interfaces d’applications.
Vous pouvez utiliser FreeHand pour concevoir, dessiner et expérimenter le plan de navigation sur
votre site.
Le nouvel outil Connecteur vous permet de connecter des sections de la planification préalable du
site d’un simple clic. FreeHand fournit également des éléments d’interface utilisateur communs
qui vous permettent d’intégrer facilement Flash et Fireworks à votre processus de
développement Web. Par exemple, le panneau Outils est l’un de ces éléments d’interface
utilisateur contenus dans tous les produits Studio MX 2004. Il contient des outils qui vous
permettent de sélectionner, de dessiner et de modifier des objets, d’appliquer des couleurs à des
objets, de créer du texte, etc.
Après avoir fait un dessin de la navigation sur votre site, vous pouvez présenter l’avant-projet à
votre client ou aux membres de votre groupe. FreeHand vous permet de convertir aisément vos
dessins en fichier Flash SWF en une seule opération. La fonction Exporter exporte votre
document en tant que contenu Flash pouvant être lu sur tout ordinateur équipé de
Macromedia Flash Player.
Pour créer la navigation sur un site, voir Didacticiel 1, Didacticiel Dessin du plan de navigation sur
le site dans FreeHand, page 117.
Planification de votre site Web
95
Définition de l’environnement de développement
Que vous développiez votre projet seul ou en équipe, vous devez définir un environnement de
développement avant de commencer à utiliser Studio MX pour créer votre site Web. A la base,
votre environnement de développement consiste en un serveur Web, un serveur d’application et
un site Dreamweaver.
Définition des serveurs Web et d’application
Un serveur Web est un logiciel qui transmet des fichiers en réponse à des requêtes de navigateurs
Web. Lorsque le serveur Web reçoit une requête pour une page HTML statique, le serveur lit la
requête, recherche la page et l’envoie au navigateur ayant formulé la requête. Les serveurs Web les
plus courants sont IIS (Microsoft Internet Information Server), Netscape Enterprise Server, Sun
ONE Web Server et Apache HTTP Server. ColdFusion est doté de son propre serveur Web. Nous
vous recommandons d’utiliser ce serveur uniquement dans le cadre d’opérations
de développement.
Choisissez un serveur Web et installez-le sur votre ordinateur local ou sur un ordinateur en réseau.
Pour plus de détails, voir Chapitre 5, Installation d’un serveur Web, page 67.
Pour exécuter des applications HTML ou des applications Internet dynamiques, votre
serveur Web doit être lié à un serveur d’application. Un serveur d’application est un logiciel qui
aide le serveur Web à traiter les pages dynamiques avant qu’il ne les envoie aux navigateurs
demandeurs. Le serveur d’application lit le code de la page dynamique, termine cette page en
fonction des instructions figurant dans le code, puis en retire le code. Dans le cadre d’une
application HTML, le serveur d’application transmet une page HTML statique au serveur Web,
qui l’envoie ensuite au navigateur ayant formulé la requête. Dans le cadre d’une application
Internet dynamique, une application Flash renvoie les variables demandées par le navigateur.
Pour choisir votre serveur d’application, vous devez tenir compte de plusieurs facteurs : votre
budget, la technologie de serveur ainsi que le serveur Web que vous souhaitez utiliser.
Dreamweaver prend en charge cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP et
PHP. Le tableau ci-dessous présente les serveurs d’application communs disponibles pour ces cinq
technologies de serveur.
96
Technologie de serveur
Serveur d’application
ColdFusion
Macromedia ColdFusion MX
ASP.NET
Microsoft IIS 6 avec plate-forme .NET
ASP
Microsoft IIS ou PWS
Sun ONE, pages de serveur actif
JSP
Macromedia JRun
IBM WebSphere
Apache Tomcat
BEA WebLogic
PHP
Serveur PHP
Chapitre 7 : Processus de développement Web
Assurez-vous que le serveur d’application que vous voulez utiliser fonctionne avec votre
serveur Web. Par exemple, la plate-forme .NET fonctionne uniquement avec Microsoft IIS qui
est muni à la fois d’un serveur Web et d’un serveur d’application. ColdFusion comprend
également un serveur Web et un serveur d’application mais son serveur Web n’est pas
recommandé pour des environnements de production.
Une fois vos serveurs Web et d’application lancés, créez un dossier racine pour votre application
sur l’ordinateur exécutant le serveur Web. Vérifiez que le dossier est publié par le serveur Web,
c’est-à-dire que le serveur Web peut transmettre tous les fichiers contenus dans ce dossier ou
chacun de ses sous-dossiers en réponse à une requête HTTP d’un navigateur Web. Par exemple,
sur un ordinateur exécutant PWS ou IIS, vous devez vous assurer que tous les fichiers du dossier
Inetpub/wwwroot et de chacun de ses sous-dossiers peuvent être transmis à un navigateur Web. Si
vous utilisez le serveur Web de ColdFusion pour des opérations de développement, tous les
fichiers contenus dans le dossier CFusionMX/wwwroot ou dans chacun de ses sous-dossiers
peuvent être transmis à un navigateur Web.
Pour plus d’informations, voir Chapitre 4, Description des applications Web, page 55, Chapitre 5,
Installation d’un serveur Web, page 67 et Chapitre 6, Configuration d’un exemple de site ColdFusion,
page 73.
Il est recommandé aux utilisateurs de ASP, ASP.NET, JSP et PHP de consulter la documentation
de Dreamweaver pour plus d’informations sur la définition d’un serveur d’application. Voir
Préparation à la création de sites dynamiques dans l’aide Utilisation de Dreamweaver.
Définition de votre site dans Dreamweaver
Dans Dreamweaver, le terme site peut se rapporter aussi bien à un site Web qu’au dossier local
dans lequel sont conservés tous les documents appartenant à un site Web. Vous devez définir un
tel emplacement avant de créer votre site. Un site Dreamweaver organise tous les documents
associés à votre site Web et vous permet de suivre et de gérer les liens, de gérer les fichiers, de
partager les fichiers et de copier les fichiers de votre site sur un serveur Web. Certaines fonctions
de Dreamweaver fonctionnent correctement uniquement si vous définissez un site.
La méthode la plus fiable pour créer un site Web à l’aide de Dreamweaver est de créer et de
modifier des pages sur votre disque local, puis de charger les copies des fichiers du site vers un
serveur Web distant afin de les mettre à la disposition d’autres utilisateurs. Dans la fenêtre Gérer
les sites de Dreamweaver (Site > Gérer les sites), définissez les informations de site local et de site
distant. Utilisez ensuite le panneau Fichiers (Fenêtre > Fichiers) pour gérer votre site.
Définition de l’environnement de développement
97
Le panneau Fichiers vous permet de choisir entre quatre modes distincts : Local, Distant, Serveur
d’évaluation et Carte.
Le mode Affichage local affiche les fichiers du site Web que vous stockez sur votre ordinateur
local.
Le mode Affichage distant affiche les fichiers que vous avez publiés vers votre serveur Web. Si
vous développez une application Web, le dossier distant est le dossier racine que vous avez créé
pour votre application Web sur le serveur Web.
Le mode Serveur d’évaluation affiche la structure des répertoires du serveur d’évaluation. En
général, il s’agit également du dossier racine que vous avez créé pour votre application Web sur le
serveur Web.
Le mode Affichage de la carte affiche une carte graphique du site, basée sur les relations entre les
documents.
Pour plus d’informations, voir Chapitre 6, Configuration d’un exemple de site ColdFusion, page 73
ou Configuration d’un site Dreamweaver dans l’aide Utilisation de Dreamweaver.
Définition des sources de données ColdFusion
Une source de données ColdFusion est un identificateur formé d’un seul mot (Acme par exemple),
qui pointe vers la base de données et contient toutes les informations requises pour s’y connecter.
Les sources de données ColdFusion sont semblables aux noms de sources de données Windows
(DSN) en ce sens qu’elles incluent automatiquement tous les DSN définis sur le système
Windows exécutant ColdFusion. Elles sont différentes des DSN car vous pouvez créer des sources
de données en utilisant des fournisseurs OLE DB (Object Linking and Embedding DataBase) ou
des pilotes natifs. Les DSN peuvent pointer vers des bases de données uniquement si vous utilisez
des pilotes ODBC (Open DataBase Connectivity) installés sur un ordinateur Windows.
Vous pouvez créer une source de données ColdFusion en utilisant ColdFusion Administrator. Si
vous utilisez un pilote ODBC sous Windows, vous pouvez également configurer un DSN sur
votre ordinateur. Les DSN système sont automatiquement traités comme des sources de données
ColdFusion.
98
Chapitre 7 : Processus de développement Web
Lorsque vous ouvrez une page ColdFusion dans Dreamweaver, les sources de données ColdFusion
apparaissent dans le panneau Bases de données (Fenêtre > Bases de données).
Vous pouvez modifier ces sources de données directement depuis l’espace de travail de
Dreamweaver. Cliquez sur le bouton Modifier les sources de données dans l’angle supérieur droit
du panneau Bases de données et Dreamweaver lance automatiquement ColdFusion
Administrator.
Pour plus d’informations, voir Chapitre 6, Configuration d’un exemple de site ColdFusion, page 73
ou Connexions à des bases de données pour les développeurs ColdFusion dans l’aide Utilisation de
Dreamweaver.
Pour plus d’informations sur la connectivité à une base de données ASP.NET, ASP, JSP et PHP,
voir Connexions à des bases de données pour les développeurs ASP.NET, Connexions à des bases de
données pour les développeurs ASP, Connexions à des bases de données pour les développeurs JSP et
Connexions à des bases de données pour les développeurs PHP dans l’aide Utilisation de Dreamweaver.
Définition d’un système de commande source dans Dreamweaver et
Fireworks
Si vous travaillez en équipe, vous avez la possibilité d’archiver et d’extraire des fichiers sur les
serveurs local et distant. L’extraction d’un fichier équivaut à déclarer : « Je suis en train de
travailler sur ce fichier ; n’y touchez pas ! ». Lorsqu’un fichier est extrait, le nom de la personne qui
l’a extrait s’affiche dans le panneau Fichiers, ainsi qu’une coche rouge (si le fichier a été extrait par
un membre de l’équipe autre que vous-même) ou verte (si vous êtes la personne ayant extrait le
fichier) en regard de l’icône du fichier.
L’archivage d’un fichier équivaut à le mettre à la disposition des autres membres de l’équipe, qui
peuvent l’extraire et le modifier. Lorsque vous archivez un fichier après l’avoir modifié, la version
locale de ce fichier devient accessible en lecture seule et un cadenas apparaît en regard du fichier
dans le panneau Fichiers pour vous empêcher de le modifier.
Pour plus d’informations, voir Archivage et extraction de fichiers dans l’aide Utilisation de
Dreamweaver.
Définition de l’environnement de développement
99
Fireworks MX 2004 contient désormais une fonction qui vous aide à intégrer la gestion des
fichiers à Dreamweaver. Le bouton Gestion de fichiers, situé en regard du bouton Exportation
rapide dans la partie supérieure de la fenêtre du document, permet d’accéder facilement aux
commandes de transport de fichier.
Utilisez ce bouton si votre document réside dans un dossier de site Studio MX 2004 et si le site a
accès à un serveur distant. Fireworks reconnaît votre dossier comme un site si vous avez défini le
dossier cible, ou un dossier le contenant, comme dossier racine local à l’aide de la boîte de
dialogue Gérer les sites dans Dreamweaver MX 2004. Vous pouvez utiliser ce bouton pour
acquérir des fichiers, les extraire et les archiver, les copier du site local vers le site distant (Placer)
ou annuler l’extraction.
Pour plus d’informations, voir Bouton Gestion de fichiers dans l’aide de Fireworks.
Planification de la conception et de la mise en forme de la page
La plupart des projets de conception Web naissent de storyboards ou d’organigrammes convertis
en exemples de pages par les concepteurs ou les développeurs. Vous pouvez utiliser Studio MX
pour créer une maquette avec des pages fictives au fur et à mesure que vous progressez dans la
conception. Les maquettes représentent en général la conception de la mise en forme, les
composants techniques, les motifs et la couleur, ainsi que les images graphiques ou d’autres types
d’éléments. Votre maquette doit s’apparenter à un calque sur lequel vous et les membres de votre
équipe devrez vous baser lors de la conception du site. Une fois que vous avez un aperçu de
l’apparence que vous voulez donner à vos pages, vous pouvez commencer à planifier leur mise en
forme dans Dreamweaver.
Création de maquettes de pages pour déterminer l’apparence de votre site
Le fait de planifier la conception et la mise en forme de vos pages Web avant de commencer à les
créer vous permettra de gagner un temps considérable lors du processus de développement. Il est
essentiel de vérifier la cohérence de la conception et de la mise en forme de vos pages. Donnez aux
pages Web du site une apparence similaire, un même modèle de couleurs, une même navigation,
etc. Cette approche cohérente permet d’orienter vos utilisateurs et de les faire bénéficier d’une
meilleure expérience.
100
Chapitre 7 : Processus de développement Web
FreeHand et Fireworks sont des outils idéaux pour mettre en place une conception préalable des
pages principales de votre site Web.
FreeHand et Fireworks vous permettent de créer des illustrations complexes, que vous créiez
entièrement votre conception initiale ou que vous assembliez des images déjà créées, au
format GIF ou JPEG par exemple. L’apparence et le fonctionnement de la plupart des outils de
FreeHand et Fireworks, ainsi que ceux de Flash, sont identiques, ce qui facilite la transition d’une
application à une autre. De plus, les modèles de sélection de couleurs et les interfaces ont la même
apparence et fonctionnent de la même façon dans tous les produits Studio MX 2004.
Lorsque vous avez terminé d’élaborer votre conception préalable, vous pouvez exporter vos
fichiers FreeHand ou Fireworks en fichiers Flash SWF. Votre travail peut ensuite être affiché par
tout ordinateur exécutant Flash Player.
Pour plus d’informations, voir les aides Utilisation de FreeHand et Utilisation de Fireworks.
Création de mises en forme de pages dans Dreamweaver
La mise en forme est l’un des aspects les plus importants de la conception Web. La mise en forme
d’une page détermine la manière dont votre page s’affichera dans le navigateur, par exemple où
seront placés les menus, les images et le contenu Flash. Dreamweaver propose différentes façons
de créer et de contrôler la mise en forme de vos pages Web.
Une méthode courante pour créer une mise en forme est de positionner les éléments en utilisant
des tables HTML. Les tables sont très utiles pour présenter des données tabulaires et mettre en
forme du texte et des images dans une page Web. Une table comprend au moins une ligne ;
chaque ligne comporte au moins une cellule.
Planification de la conception et de la mise en forme de la page
101
Dreamweaver offre trois méthodes pour afficher et manipuler les tables : mode Standard, mode
Mise en forme et mode Tableaux développés. En mode Standard, les tables sont présentées
comme une grille de lignes et de colonnes. Le mode Mise en forme présente des zones que vous
pouvez facilement dessiner, redimensionner et déplacer sur la page tout en conservant les tables
comme structure sous-jacente. En mode de Mise en forme, vous pouvez ensuite ajouter du texte,
des images ou tout autre contenu à des cellules, comme vous le feriez en mode Standard. Le mode
Tableaux développés est une nouvelle fonction de Dreamweaver qui ajoute temporairement des
marges intérieures et des espacements de cellules dans tous les tableaux d’un document et
augmente les bordures de tableaux pour faciliter la modification.
Pour mettre en forme des pages dans Dreamweaver, vous pouvez également placer des éléments à
l’aide des feuilles de style en cascade (CSS). Cette méthode est de plus en plus utilisée car elle offre
un meilleur contrôle et une plus grande flexibilité que les tables. Si vous savez correctement vous
servir des feuilles de style en cascade, vous pouvez utiliser les balises <div> pour créer des blocs de
contenu, puis placer ces blocs sur la page à l’aide des styles.
Pour plus d’informations sur la mise en forme des pages dans Dreamweaver, y compris sur la mise
en forme à l’aide de tables, de cellules de mise en forme, de cadres et de feuilles de style en cascade,
voir Mise en forme des pages dans l’aide Utilisation de Dreamweaver.
Pour commencer à créer une mise en forme à l’aide de tables dans Dreamweaver, voir
Didacticiel 2, Création d’une mise en forme basée sur un tableau dans Dreamweaver, page 131.
102
Chapitre 7 : Processus de développement Web
Création d’actifs de contenu
Une fois que vous savez à quoi va ressembler votre site, vous pouvez créer et regrouper les actifs
dont vous aurez besoin. Les actifs peuvent être des éléments tels que des images, du texte, des
animations Flash ou autres médias. Le panneau Actifs de Dreamweaver (Fenêtre > Actifs) affiche
et permet d’accéder à tous les actifs de votre site.
Création d’images dans FreeHand et Fireworks
Vous pouvez utiliser à la fois FreeHand et Fireworks pour créer des images pour votre site Web.
FreeHand est une application de dessin vectoriel. FreeHand vous permet de créer des illustrations
graphiques Web et à imprimer, telles que des figures, des logos et des bannières publicitaires.
FreeHand vous permet aussi de transformer vos dessins en animations Flash. L’espace de travail
FreeHand et le panneau Outils sont cohérents par rapport à ceux des autres produits Studio MX.
Vous savez déjà comment élaborer la navigation d’un site dans FreeHand ou la conception
préalable d’une page. Pour plus d’informations sur la création des actifs de contenu à l’aide de
FreeHand, voir l’aide Utilisation de FreeHand.
Fireworks constitue l’outil idéal de conception et de production pour les graphiques Web
professionnels. Il s’agit du premier environnement de production permettant de surmonter les
défis posés aux concepteurs et aux développeurs de graphiques Web. Grâce aux effets appliqués en
direct dans Fireworks, vous pouvez améliorer vos graphiques en appliquant des biseaux, des
estampes, des ombres portées, des effets néon ou autres aux objets vectoriels, aux bitmaps et aux
textes. L’application directe des effets n’est pas destructive, c’est-à-dire que ces effets sont toujours
modifiables. Fireworks génère également du code JavaScript, ce qui facilite considérablement la
création de survols, de boutons et de menus contextuels. En outre, ses fonctions d’optimisation
réduisent la taille des fichiers graphiques Web sans sacrifier la qualité.
Fireworks dispose d’outils de modification de bitmap, ainsi que d’outils de modification
vectorielle. Tout élément contenus dans Fireworks est entièrement modifiable, à tout moment. En
outre, vous pouvez automatiser vos procédures de travail pour faire face aux exigences de mise à
jour et de modification. Comme FreeHand, Fireworks s’intègre aux autres produits Studio pour
vous permettre d’optimiser votre travail. Une fois que vous avez créé vos images et que vous les
avez incluses dans votre site, vous pouvez les ouvrir, y apporter des modifications et travailler dans
Fireworks sans jamais quitter l’espace de travail de Dreamweaver ou de Flash.
Pour commencer à créer des actifs de contenu à l’aide de Fireworks, voir Didacticiel 3, Création
d’une bannière dans Fireworks, page 141 et Didacticiel 4, Création d’une barre de navigation avec
Fireworks, page 149.
Création de médias enrichis dans Flash
Votre contenu Flash peut comprendre des graphiques, du texte, des effets animés et des
applications destinés aux sites Web. Les contenus Flash sont principalement composés de
graphiques vectoriels, mais peuvent également contenir des graphiques bitmap, de la vidéo et des
sons importés. Ils peuvent être interactifs et ainsi permettre aux utilisateurs de saisir des
informations. Vous pouvez également créer du contenu non linéaire capable de communiquer
avec d’autres applications Web. Etant donné que le contenu Flash utilise des graphiques vectoriels
compacts, il se télécharge rapidement et s’adapte à la taille de l’écran de l’utilisateur.
Création d’actifs de contenu
103
Vous avez probablement déjà visualisé du contenu Flash interactif sur de nombreux sites Web.
Des millions d’internautes ont reçu Flash Player avec leur ordinateur, leur navigateur ou leur
système d’exploitation ; d’autres l’ont téléchargé à partir du site Web de Macromedia. Flash Player
est installé sur l’ordinateur local, où il lit le contenu Flash dans des navigateurs ou en tant
qu’applications autonomes. L’affichage de contenu Flash dans Flash Player est similaire à
l’affichage d’un DVD dans un lecteur de DVD ; Flash Player est le périphérique qui affiche le
contenu que vous avez créé dans l’application auteur Flash.
Les documents Flash (avec l’extension de fichier .fla) contiennent toutes les informations
nécessaires pour que vous puissiez développer, concevoir et tester du contenu interactif. Ils sont
cependant différents du contenu affiché par Flash Player. En effet, ils sont publiés sous forme de
fichiers Flash (portant l’extension .swf ) ne contenant que les informations nécessaires pour lire le
contenu.
Flash vous permet d’animer des objets pour donner une impression de mouvement sur la scène et
pour en modifier la forme, la taille, la couleur, l’opacité, la rotation et d’autres propriétés. Vous
pouvez créer une animation image par image dans laquelle vous désignez une image distincte pour
chaque plan. Vous pouvez aussi créer une animation par interpolation dans laquelle vous
définissez la première et la dernière images et laissez Flash créer les images intermédiaires.
De plus, Flash propose diverses méthodes de création et d’importation d’illustrations à partir
d’autres applications. Vous pourrez créer des objets à l’aide des outils de dessin et de peinture, de
même que modifier les attributs d’objets existants. Vous pouvez également importer des
graphiques vectoriels, des graphique bitmap et des vidéos depuis d’autres applications, tels que
FreeHand et Fireworks, puis modifier ces graphiques importés dans Flash.
Pour commencer à créer des actifs de contenu Flash, voir Didacticiel 5, Création de médias enrichis
avec Fireworks et Flash, page 165.
104
Chapitre 7 : Processus de développement Web
Création de modèles et de bibliothèques pour la réutilisation des actifs
Les modèles et les bibliothèques Dreamweaver vous permettent de créer des pages Web dont la
conception reste cohérente. L’utilisation de modèles et de bibliothèques simplifie la gestion de
votre site Web, car ils vous permettent de concevoir à nouveau votre site et de modifier des
centaines de pages en quelques secondes.
Un modèle est un document que vous pouvez utiliser pour créer plusieurs pages partageant la
même mise en forme. Lorsque vous créez un modèle, vous pouvez indiquer quels éléments
resteront constamment sur la page (non modifiables ou verrouillés) dans les documents basés sur
ce modèle et lesquels pourront être modifiés.
Par exemple, si vous publiez un magazine en ligne, l’en-tête et la mise en forme générale ne
changent pas d’une publication à une autre, ou d’un article à l’autre, mais le titre et le contenu de
chaque article sont différents. Un concepteur peut créer la mise en forme d’une page du magazine
qui contient des espaces réservés pour le titre et le contenu de l’article (marquées comme zones
modifiables). Il peut ainsi enregistrer cette mise en forme comme modèle. Lors d’une nouvelle
parution du magazine, vous n’avez plus qu’à créer une page basée sur ce modèle et remplacer le
texte de l’espace réservé par le titre et le contenu du nouvel article.
Vous pouvez même modifier un modèle après avoir créé des documents basés sur celui-ci. Lorsque
vous modifiez un modèle, les zones verrouillées (non modifiables) des documents basés sur ce
modèle sont mises à jour de façon à refléter les modifications apportées au modèle.
L’utilisation des modèles est la meilleure solution pour obtenir un ensemble de pages présentant la
même mise en forme, si vous voulez concevoir la mise en forme finale d’un ensemble de pages,
puis y ajouter du contenu. Si vous voulez simplement des pages ayant les mêmes en-têtes et pieds
de page mais des mises en forme différentes, utilisez plutôt des éléments de bibliothèque. Les
éléments de bibliothèques sont des éléments de page tels que des images, du texte, du contenu
Flash et autres médias que vous pouvez fréquemment utiliser ou mettre à jour dans l’ensemble de
votre site Web. Comme avec les modèles, vous pouvez mettre à jour toutes les pages basées sur des
éléments de bibliothèque lorsque vous modifiez le contenu de ces éléments.
Par exemple, supposons que vous créez le site d’une entreprise. L’entreprise souhaite que son
slogan apparaisse sur toutes les pages du site, mais le service marketing n’a pas encore établi de
slogan définitif. Dans ce cas, vous pouvez créer un élément de bibliothèque destiné à contenir le
slogan et utiliser cet élément sur chaque page. Ensuite, lorsque le service de marketing vous
communique le slogan définitif, vous pouvez modifier l’élément de bibliothèque et mettre
automatiquement à jour toutes les pages qui l’utilise.
Pour plus d’informations, voir Gestion des modèles et Gestion des actifs de site et des bibliothèques
dans l’aide de Utilisation de Dreamweaver.
Grâce à la bibliothèque Flash, vous pouvez facilement réutiliser vos actifs. La bibliothèque d’un
document Flash rassemble les symboles créés dans Flash, ainsi que les fichiers importés tels que les
clips vidéo, les clips audio, les bitmaps et les illustrations vectorielles. Le panneau Bibliothèque
affiche une liste contenant le nom de tous les éléments de la bibliothèque, ce qui vous permet
d’afficher et d’organiser ces éléments au fur et à mesure de votre travail. Dans Flash, vous pouvez
ouvrir la bibliothèque de tout document Flash pour rendre disponibles les éléments de
bibliothèque de ce fichier dans le document actif. Vous pouvez créer vos propres bibliothèques
permanentes, qui seront disponibles à chaque fois que vous lancerez Flash, ou utiliser les exemples
de bibliothèques fournis avec Flash. Les exemples de bibliothèques contiennent des boutons, des
graphiques, des clips et des sons que vous pouvez ajouter à vos propres documents Flash.
Création d’actifs de contenu
105
Pour plus d’informations, voir Utilisation de la bibliothèque pour la gestion des ressources multimédia
dans l’aide Utilisation de Flash.
FreeHand et Fireworks contiennent également des bibliothèques pouvant contenir des actifs
réutilisables. Vous avez ainsi la possibilité de stocker vos actifs de contenu, quel que soit le produit
que vous utilisez, ce qui vous permet d’optimiser votre travail dans le Studio MX 2004.
Pour plus d’informations, voir les aides Utilisation de FreeHand et Utilisation de Fireworks.
Création d’actifs d’application
L’un des avantages du développement d’une application Web dynamique est de pouvoir présenter
au format Web des informations stockées dans des bases de données. Les produits
Studio MX 2004 vous permettent de créer rapidement de telles applications, offrant une grande
variété de fonctions permettant d’augmenter la productivité des développeurs, telles que des
composants et modèles prédéfinis, des tâches de développement intégrées et une interface
utilisateur partagée.
Création de pages dynamiques dans Dreamweaver
L’un des avantages principaux de Dreamweaver est que vous pouvez l’utiliser pour créer des
sites Web dynamiques même si vous ne connaissez pas de langages de programmation. Les outils
visuels de Dreamweaver vous permettent de développer des sites Web dynamiques sans avoir à
rédiger manuellement le code de programmation complexe nécessaire à la création d’un site
prenant en charge l’affichage du contenu dynamique stocké dans une base de données.
Dreamweaver vous permet de créer des sites Web dynamiques en utilisant l’un des nombreux
langages de programmation Web et les technologies de serveur, incluant ColdFusion, ASP.NET,
Microsoft ASP (Active Server Pages), JSP (JavaServer Pages) et PHP.
Dreamweaver offre aux programmeurs un code d’exécution amélioré et un espace de travail centré
sur le code dérivé de ColdFusion Studio et de Macromedia HomeSite+. Vous pouvez travailler en
mode Code, en mode Création ou en mode Code et Création, ce qui vous permet de visualiser à
la fois le code et les interfaces lors du développement de vos pages dynamiques et de vos
applications. Le code ColdFusion généré par Dreamweaver pour vos pages dynamiques est
maintenant plus facile à comprendre et ressemble davantage au code que vous écririez
manuellement. Vous reconnaîtrez le code si vous avez appris les techniques ColdFusion dans les
manuels ou les didacticiels en ligne.
Lorsque vous créez un site Web dynamique, vous devez définir une source de contenu depuis
laquelle les données sont extraites avant d’être affichées sur une page Web du site. Dans
Dreamweaver, les sources de données correspondent à des bases de données, des variables de
demande, des variables de serveur, des variables de formulaire ou des procédures stockées.
Avant de pouvoir utiliser ces sources de contenu dans une page Web, vous devez :
• établir une connexion avec la source de contenu dynamique (telle qu’une base de données) et le
•
•
106
serveur d’application chargé du traitement de la page ;
préciser les informations de la base de données à afficher ou les variables à inclure dans la page ;
utiliser l’interface pointer-cliquer de Dreamweaver pour sélectionner des éléments de contenu
dynamique et les insérer dans la page concernée.
Chapitre 7 : Processus de développement Web
Dreamweaver vous permet d’établir facilement une connexion à une base de données et de créer
un jeu d’enregistrements (ou jeu de données dans ASP.NET) à partir duquel extraire le contenu
dynamique. Un jeu d’enregistrements correspond au résultat d’une requête de base de données.
Ce jeu d’enregistrements permet d’extraire les informations spécifiques demandées et de les
afficher dans une page donnée. L’utilisateur définit le jeu d’enregistrements en fonction des
informations présentes dans la base de données et du contenu qu’il souhaite afficher.
La création d’un jeu d’enregistrements dans Dreamweaver s’effectue depuis la boîte de dialogue
Jeu d’enregistrements.
Vous pouvez ouvrir la boîte de dialogue Jeu d’enregistrements en cliquant sur le bouton Jeu
d’enregistrements dans la catégorie Application de la barre Insérer ou en cliquant sur le
bouton Plus (+) du panneau Liaisons (Fenêtre > Liaisons) et en sélectionnant Jeu
d’enregistrements (Requête). La boîte de dialogue simple Jeu d’enregistrements vous permet de
sélectionner une connexion à une base de données existante et de créer une requête de base de
données en sélectionnant les tables dont vous souhaitez inclure les données dans le jeu
d’enregistrements. Vous pouvez même utiliser la partie Filtre de la boîte de dialogue afin de créer
des critères de recherche et de renvoi simples pour la requête. Vous avez la possibilité de tester la
requête depuis la boîte de dialogue Jeu d’enregistrements et de procéder à tous les réglages
nécessaires avant de l’ajouter au panneau Liaisons.
Création d’actifs d’application
107
Une fois une connexion à une base de données établie et un jeu d’enregistrements défini, ce
dernier apparaît dans le panneau Liaisons.
Vous pouvez importer vos sources de données à partir de ce panneau dans la page Web de votre
choix du site défini. Vous pouvez insérer dans une page Web des valeurs répertoriées dans le
panneau Liaisons, en sélectionnant un élément, puis en cliquant sur le bouton Insérer situé dans
la partie inférieure du panneau. Vous pouvez également sélectionner un élément et le faire glisser
vers la page, comme vous feriez glisser toute image ou tout support depuis le panneau Actifs.
L’illustration précédente présente une page affichant des espaces réservés dynamiques ayant été
glissés vers la page depuis le panneau Liaisons. Vous pouvez afficher, au premier plan, la page qui
s’affichera pour l’utilisateur dans une fenêtre de navigateur. Le fichier Dreamweaver présente un
comportement de serveur Région répétée, qui vous permet d’afficher plusieurs enregistrements
sur une seule page. Dans cet exemple, il affiche les trois premiers enregistrements de la base de
données.
108
Chapitre 7 : Processus de développement Web
Outre l’affichage des données dynamiques, Dreamweaver vous permet de créer des ensembles de
pages permettant aux utilisateurs de rechercher, d’insérer, de supprimer et de mettre à jour des
enregistrements dans votre base de données. Par exemple, vous pouvez rapidement développer
une application performante vous permettant de publier un répertoire contenant des
informations sur tous les employés sur l’intranet de votre entreprise, d’effectuer une recherche
dans le répertoire en fonction de critères (nom, service, etc.), d’ajouter et de supprimer des
enregistrements du répertoire et de modifier les enregistrements dans la base de données. Vous
pouvez effectuer tout cela sans avoir à taper une seule ligne de code. Les utilisateurs plus
expérimentés peuvent utiliser l’environnement de codage avancé de Dreamweaver.
Pour plus d’informations, voir Ajout de contenu dynamique aux pages Web et Développement rapide
d’applications dans l’aide Utilisation de Dreamweaver.
Pour créer une fonction de recherche simple dans Dreamweaver, voir Didacticiel 7, Création d’une
fonction de recherche dans une base de données, page 189.
Création des actifs d’une application Internet dynamique avec Flash
Flash combine différentes conceptions multimédia et possibilités de développement
d’applications Internet dynamiques en un seul produit. Les développeurs peuvent créer des
applications Internet dynamiques en utilisant les fonctions multimédia de Flash ainsi que ses
outils complexes, incluant un éditeur ActionScript performant, un débogueur résistant et des
composants d’interface utilisateur de Flash prédéfinis.
Alors que Flash offre une plate-forme ouverte pour le développement d’applications avec les
serveurs .NET et J2EE, l’intégration améliorée avec ColdFusion propose aux développeurs le
moyen le plus rapide de créer des applications Internet dynamiques. Le support général inclut des
exemples de code et des documents de référence, présente une connectivité haute-performance,
prend en charge les langages communs de Dreamweaver, Flash et ColdFusion, s’intègre aisément
aux composants de l’interface utilisateur de Flash et comprend un ensemble d’outils intégrés
conçus dans un souci d’unité de logique d’arrière-plan avec les interfaces utilisateurs Flash.
Création d’actifs d’application
109
Commencez la création d’applications Internet dynamiques Flash/ColdFusion par l’élaboration
de composants ColdFusion : fragments de code que Flash invoque via ActionScript une fois
l’application créée. Vous pouvez alors créer des interfaces d’application Flash en utilisant les
graphiques FreeHand précédemment désignés ou des éléments de page mis en place dans Flash.
Les composants d’interface utilisateur de Flash (barres de défilement, champs de texte, boutons,
boutons radio, cases à cocher, zones de liste et listes déroulantes) améliorent considérablement vos
capacités de création d’applications.
Les composants d’interface utilisateur de Flash assurent la cohérence entre les applications
Internet dynamiques créées à l’aide de Flash. Vous pouvez également créer des composants
personnalisés et réutilisables afin de répondre aux besoins de plusieurs projets. Pour plus
d’informations, voir le manuel Utilisation des composants (disponible dans l’aide de Flash).
Grâce aux applications Internet dynamiques, vous pouvez atteindre des millions d’utilisateurs
tout en réduisant la charge sur le serveur et le temps de téléchargement des données. Vous pouvez
inclure des animations, des données audio ou vidéo et des communications bidirectionnelles dans
une interface unique, permettre aux utilisateurs souffrant d’un handicap d’accéder facilement aux
données, fournir immédiatement des données quelle que soit la vitesse de connexion et
développer à destinations de plusieurs plate-formes ou de périphériques (par exemple pour les
téléphones sans fil, la télévision interactive et les consoles de jeux). Vos applications et données
dynamiques peuvent ainsi être affichées n’importe où. Puisqu’il n’est pas nécessaire de rafraîchir la
page lorsque des informations sont échangées entre Flash Player et le serveur d’application, les
coûts de bande passante sont réduits et les utilisateurs bénéficient d’une plus grande efficacité et
d’une meilleure convivialité.
110
Chapitre 7 : Processus de développement Web
Pour plus d’informations, voir la rubrique concernant les applications Internet dynamiques à
l’adresse http://www.macromedia.com/go/developer_ria/.
Assemblage, test et déploiement
La dernière phase du processus de développement Web consiste à assembler les actifs et à tester les
pages Web que vous avez créées afin de déployer votre site sur un serveur de façon à ce qu’il soit
accessible par le public. Studio MX 2004 offre un grand nombre de fonctions qui permettent de
simplifier ce processus.
Assemblage d’actifs dans Dreamweaver
Grâce à Dreamweaver, vous pouvez ajouter facilement plusieurs types de contenu à vos
pages Web. Vous pouvez ajouter des actifs et des éléments de conception, par exemple des textes,
des images, des couleurs, des animations, des sons et autres formes de données. Le panneau Actifs
(Fenêtre > Actifs) vous permet d’organiser facilement les actifs dans un site. Vous pouvez faire
glisser la plupart des actifs directement du panneau Actifs vers un document Dreamweaver.
Outre la possibilité de faire glisser des actifs enregistrés du panneau Actifs vers la page, vous
pouvez effectuer les opérations suivantes :
• Entrer directement du texte dans un document Dreamweaver ou importer du texte à partir
•
•
d’autres documents, puis le formater avec des styles CSS en utilisant l’inspecteur des propriétés
ou l’inspecteur de balises de Dreamweaver.
Insérer des images, y compris des images survolées, des graphiques contenant des zones
interactives et des images Fireworks. Grâce aux outils d’alignement, vous pouvez plus
facilement placer les images sur une page.
Insérer d’autres types de ressources dans une page Web : animations Flash, Shockwave ou
QuickTime, sons, applets.
Assemblage, test et déploiement
111
• Ajouter du contenu en mode Code dans Dreamweaver. A l’aide du mode Code de
•
•
Dreamweaver ou de l’inspecteur de code, vous pouvez écrire votre propre code HTML,
JavaScript, CFML, PHP, Visual Basic, C# et CSS.
Créer des liens HTML standard, y compris des liens vers des ancres et des adresses
électroniques, ou configurer facilement des systèmes de navigation graphiques, notamment des
menus de reroutage et des barres de navigation.
Appliquer du contenu réutilisable dans l’ensemble de votre site en utilisant les modèles et les
bibliothèques de Dreamweaver. Vous pouvez créer des pages à partir d’un modèle, puis ajouter
du contenu dans les zones modifiables ou modifier le contenu.
Après avoir assemblé vos actifs, vous pouvez les modifier directement dans l’espace de travail de
Dreamweaver. Dreamweaver vous permet désormais d’effectuer un certain nombre de tâches
simples d’édition d’images sans avoir recours à une application d’édition d’images. Vous pouvez
recadrer une image bitmap, en régler le contraste, l’optimiser ou en accentuer la netteté en
sélectionnant l’image dans la fenêtre de document ainsi que l’outil approprié dans l’inspecteur des
propriétés, puis en apportant vos modifications. Pour plus d’informations, voir Insertion d’images
dans l’aide Utilisation de Dreamweaver.
Remarque : La fonction d’optimisation d’images dans Dreamweaver est disponible uniquement si
Fireworks est installé.
Pour apporter des modifications complexes, vous pouvez lancer Fireworks afin de modifier des
images insérées dans un document Dreamweaver en les sélectionnant et en cliquant sur le bouton
Modifier de Fireworks dans l’inspecteur des propriétés. Lorsque vous lancez et modifiez une
image ou une découpe d’image faisant partie d’une table Fireworks, Dreamweaver lance Fireworks
et ouvre le fichier PNG à partir duquel l’image a été exportée.
Dans la fenêtre du fichier PNG, Fireworks vous indique que vous êtes en train de modifier
l’image depuis Dreamweaver. Lorsque vous avez apporté toutes vos modifications et fermé le
fichier PNG, ces modifications, une fois enregistrées, apparaissent sur l’image dans le document
Dreamweaver (GIF, JPG, etc.) que vous avez sélectionné pour modification.
De même, vous pouvez modifier des fichiers Flash en sélectionnant l’espace réservé de l’animation
Flash dans le document Dreamweaver et en cliquant sur le bouton Modifier de Flash dans
l’inspecteur des propriétés. Dreamweaver ouvre le fichier Flash (FLA) et enregistre toutes les
modifications que vous y avez apportées dans le fichier SWF.
Pour plus d’informations sur l’assemblage et la modification des actifs Studio MX, voir
Didacticiel 6, Assemblage et modification d’actifs Studio, page 177.
112
Chapitre 7 : Processus de développement Web
Utilisation de Dreamweaver et de Flash pour assurer l’accessibilité
Macromedia s’efforce de rendre ses sites et ses produits Web accessibles aux personnes souffrant de
handicaps visuels, auditifs, moteurs ou autre. Flash et Dreamweaver fournissent des outils d’aide à
la création de contenu accessible. Parmi les fonctions d’accessibilité aux sites Web, vous trouverez
la prise en charge des lecteurs d’écran, des étiquettes et des descriptions de graphiques, des
raccourcis clavier et des couleurs d’affichage à haut contraste. En outre, certaines fonctions
rendent l’application Dreamweaver elle-même accessible aux utilisateurs souffrant d’un handicap.
Il prend notamment en charge les lecteurs d’écran, les fonctions d’accessibilité du système
d’exploitation et la navigation avec le clavier.
Afin de rendre les informations accessibles aux lecteurs d’écrans et aux utilisateurs de votre
site Web, Dreamweaver prend en charge les légendes des éléments graphiques, y compris des
boutons-poussoirs, les commandes, les images et les tableaux. Cela signifie que vous avez la
possibilité d’ajouter des étiquettes et des descriptions aux éléments de façon à ce qu’un lecteur
d’écran puisse les lire pour l’utilisateur.
Par exemple, vous pouvez ajouter la description « Veste garçon rouge taille L » à une image de
produit dans votre document. Lorsqu’un malvoyant consulte votre site, un lecteur d’écran lit la
description de l’image qui apparaît sur une page. Ainsi, l’utilisateur saura de quel produit il s’agit.
Le contenu accessible Flash est pris en charge par Flash Player 6 ou version ultérieure. Pour
pouvoir tirer parti d’un contenu Flash accessible, les utilisateurs doivent disposer d’un système
d’exploitation Windows qui prend en charge l’accessibilité Flash, ainsi qu’un lecteur d’écran
approprié (y compris Flash Player 6 ou version ultérieure).
Flash comporte plusieurs fonctions de création d’accessibilité qui vont au-delà de la simple
affectation de noms aux objets. Vous pouvez fournir une description pour du texte ou des champs
de texte, des boutons ou des animations, ainsi que des raccourcis clavier pour les champs de saisie
de texte ou les boutons. Vous pouvez également désactiver le comportement d’affectation
automatique d’étiquettes pour un contenu, de façon à ce que les chaînes de texte ne soient pas
lues par les lecteurs d’écran.
Vous pouvez également choisir de masquer un objet aux lecteurs d’écran. Par exemple, vous
pouvez décider de masquer des clips animés si vous estimez que la description verbale n’améliore
pas la version accessible de l’animation. Vous pouvez également masquer des objets accessibles
figurant dans un clip ou une animation et n’exposer que le clip ou l’animation proprement dit aux
logiciels de lecture d’écran.
Gardez à l’esprit le fait que la technologie de lecture d’écran est conçue à l’origine pour interpréter
les informations d’interfaces utilisateur statiques. Vous pouvez rendre votre contenu Flash plus
accessible en conservant un minimum de contenu dynamique et en mettant l’accent sur les
fonctions d’interface utilisateur et texte. Vous pouvez sélectionner les objets d’un contenu Flash à
fournir au lecteur d’écran et omettre des effets d’animations ou des clips plus « visuels » afin
d’améliorer l’accessibilité.
Pour concevoir des sites Web accessibles, vous devez comprendre les exigences liées à l’accessibilité
et devez faire appel à votre subjectivité pour prendre des décisions qui ne peuvent pas être prises
par un outil de développement. Par exemple, vous ne pouvez pas faire passer des informations
uniquement associées à une couleur. La meilleure façon de s’assurer qu’un site Web est accessible
est de respecter toutes les procédures de préparation, de développement, de test et d’évaluation.
Assemblage, test et déploiement
113
Pour plus d’informations, voir Dreamweaver et accessibilité dans l’aide Utilisation de Dreamweaver.
Pour plus d’informations sur les fonctions d’accessibilité dans Flash, recherchez « accessibilité »
dans l’aide Utilisation de Flash.
Vous pouvez également consulter la rubrique du centre de ressources Macromedia concernant
l’accessibilité à l’adresse www.macromedia.com/macromedia/accessibility/ pour en savoir plus sur
la préparation de contenu Web conformément aux exigences d’accessibilité mandatées par les
agences fédérales américaines.
Validation et débogage de votre travail
Le programme de validation de Dreamweaver vous permet de déterminer si le code contient des
erreurs de balises ou de syntaxe. Le programme de validation prend en charge un grand nombre
de langages de balise, dont HTML 2, HTML 3.2, HTML 4, XHTML 1 Strict,
XHTML 1 transitional, XHTML 1 frameset, Internet Explorer 3 Extensions, Internet Explorer 4
Extensions, Netscape Navigator 3 Extensions, Netscape Navigator 4 Extensions, ColdFusion,
ColdFusion 3, ColdFusion 3.1, ColdFusion 4, ColdFusion 4.5, ColdFusion 5, ColdFusion MX,
SMIL 1 (Synchronized Multimedia Integration Language), WML (Wireless Markup Language)
et JSP (JavaServer Page). Vous pouvez également valider un document en tant que document
XML (ou XHTML).
Pour plus d’informations, voir Optimisation et débogage de code dans l’aide Utilisation
de Dreamweaver.
Le débogueur de Flash vous permet de rechercher des erreurs dans un contenu Flash en cours
d’exécution dans Flash Player. Vous pouvez utiliser le débogueur en mode de test sur des fichiers
locaux ou l’utiliser pour tester des fichiers sur un serveur Web à un emplacement distant. Le
débogueur permet d’insérer des points d’arrêt dans le code ActionScript, grâce auxquels vous
pouvez arrêter l’animation et consulter le code ligne par ligne. Vous pouvez alors revenir aux
scripts et les modifier afin d’obtenir les résultats souhaités.
Pour plus d’informations, voir Débogage de scripts dans le Guide de référence ActionScript
(disponible dans l’aide de Flash).
Test de votre site dans Dreamweaver
Avant de charger le site sur un serveur et de le déclarer prêt à être publié, il convient de le tester
localement. En fait, il est judicieux de tester et de résoudre les problèmes de votre site
fréquemment au cours de son élaboration, afin de traiter les problèmes avant qu’ils ne s’aggravent
et de les empêcher de se répéter.
Vous devez vous assurer que vos pages ont l’apparence et le fonctionnement souhaités dans les
navigateurs ciblés, qu’aucun lien n’est rompu et que les pages ne sont pas trop longues à
télécharger. Vous pouvez également tester et dépanner l’ensemble du site en exécutant un rapport
de site avant de publier votre site.
Les instructions suivantes vous permettront d’élaborer un site le plus convivial possible pour vos
utilisateurs :
• Affichez vos pages dans le plus grand nombre de navigateurs et sur le plus grand nombre de
plates-formes possible. Cela vous donnera la possibilité de constater les différences de
présentation, de couleur, de taille de police et de taille de fenêtre par défaut qui ne peuvent pas
être prévues lors de la vérification dans le navigateur cible.
114
Chapitre 7 : Processus de développement Web
• Assurez-vous que les pages fonctionnent comme prévu dans les navigateurs ciblés. Vérifiez
•
•
•
également qu’elles fonctionnent ou qu’elles « échouent élégamment » dans les autres
navigateurs. Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne
prennent pas en charge les styles, les calques, les plug-ins ou les éléments JavaScript. Pour les
pages qui ne s’affichent pas dans des navigateurs anciens, songez à utiliser le comportement
Vérifier le navigateur dans Dreamweaver pour rediriger automatiquement les visiteurs vers une
autre page. Vous pouvez également utiliser la fonction Vérifier les navigateurs cibles pour
déterminer si certaines balises, propriétés CSS, valeurs CSS ou certains attributs ne sont pas
pris en charge par vos navigateurs cibles.
Vérifiez que le site ne contient pas de liens brisés (réparez-les s’il en contient). Les autres sites
étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers lesquelles vos liens
pointent soient déplacées ou supprimées. Pour obtenir un liste des liens vers des sites externes,
vous pouvez procéder à une vérification des liens dans Dreamweaver. Vous pouvez également
exécuter un rapport au niveau du site qui recherche les liens externes et crée une liste de tous les
liens non valides.
Contrôlez la taille de vos pages et leur durée de téléchargement. Pour les pages qui contiennent
un tableau de grande taille, n’oubliez pas que les visiteurs ne voient rien tant que le tableau n’est
pas entièrement téléchargé. Envisagez de fragmenter les grands tableaux ; si c’est impossible,
envisagez de placer quelques données, par exemple un message de bienvenue ou une bannière
publicitaire, en dehors du tableau, en haut de la page, de manière à ce que les utilisateurs
puissent au moins voir ce contenu pendant le téléchargement du tableau
Recherchez sur le site entier d’éventuels problèmes, tel que des documents sans nom, des
balises vides ou des balises imbriquées redondantes, en exécutant des rapports de site dans
Dreamweaver. L’exécution de ces rapports avant la publication de votre site vous évitera de
nombreux problèmes par la suite.
Pour plus d’informations, voir Test de votre site dans l’aide Utilisation de Dreamweaver.
Déploiement de vos fichiers de site vers un serveur avec Dreamweaver
Vous venez donc de créer un site Web fonctionnel. L’étape suivante consiste à le publier en
chargeant les fichiers vers un serveur Web distant.
Avant de poursuivre, vous devez pouvoir accéder à un serveur Web distant (le serveur de votre
fournisseur d’accès Internet, un serveur appartenant à un client pour lequel vous travaillez ou un
serveur intranet de votre société). Si vous ne pouvez accéder à un serveur de ce type, contactez
votre fournisseur d’accès Internet ou votre client.
De manière générale, la commande Placer de Dreamweaver copie un fichier depuis le site local
vers le site distant sans changer l’état d’extraction du fichier. Il existe deux types de circonstances
dans lesquelles la commande Placer est préférable à la commande Archiver :
• lorsque vous ne travaillez pas en équipe et n’utilisez pas le système d’archivage et d’extraction ;
• lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez
continuer à y apporter des modifications.
Assemblage, test et déploiement
115
Pour placer un fichier sur un serveur distant, cliquez sur le bouton Gestion de fichiers après avoir
enregistré le fichier, puis sélectionnez Placer.
Vous pouvez également cliquer sur le bouton Placer dans la barre d’outils du panneau Fichiers ou
sélectionner Site > Placer pour charger le fichier. Si le fichier n’a pas encore été enregistré, il se
peut qu’une boîte de dialogue s’ouvre (selon les préférences définies dans la catégorie Site de la
boîte de dialogue Préférences) vous demandant si le fichier doit être enregistré avant d’être placé
sur le serveur distant.
Pour plus d’informations, voir Gestion des fichiers dans l’aide Utilisation de Dreamweaver.
Gestion et mise à jour de votre site
Lorsque la plus grande partie du site a été publiée, vous devez continuer à le mettre à jour et à en
assurer la maintenance. La publication d’un site, c’est-à-dire son déploiement vers un serveur et
son activation, constitue un processus continu. Dans le panneau Fichiers de Dreamweaver, vous
trouverez de nombreux outils qui vous aideront à gérer votre site, à transférer vos fichiers vers et
depuis un serveur distant, à configurer un processus d’archivage/extraction pour empêcher
l’écrasement des fichiers et à synchroniser les fichiers sur vos sites locaux et distants. Il est essentiel
de définir et de mettre en œuvre un système de contrôle de version, en utilisant soit les outils de
Dreamweaver, soit une application de contrôle de version externe.
Vous pouvez également rechercher des informations par le biais des forums de discussion
Dreamweaver du site Web de Macromedia. Ces forums sont de considérables sources
d’informations sur les différents navigateurs, plates-formes, conseils de conception, problèmes de
codage, etc. Pour plus d’informations, visitez le site www.macromedia.com/fr/support/forums/.
Pour plus d’informations sur l’un des produits de Studio MX 2004, voir Autres ressources, page 10
ou l’aide du produit concerné (disponible à partir du menu Aide du produit).
116
Chapitre 7 : Processus de développement Web
DIDACTICIEL 1
Didacticiel Dessin du plan de navigation sur le site
dans FreeHand
Ce didacticiel explique comment utiliser Macromedia FreeHand MX pour créer des dessins
préliminaires du plan de navigation de votre site. Le plan de navigation du site est une sorte de
carte qui décrit comment vos pages Web sont liées les unes aux autres. Plus particulièrement, il
montre la manière dont les utilisateurs navigueront sur votre site en cliquant sur les liens et en
interagissant avec les interfaces d’applications. Le plan de navigation d’un site apparaît
normalement dans les barres de navigation utilisées sur des pages Web.
Avant de poursuivre ce didacticiel, vous pouvez consulter Chapitre 7, Processus de
développement Web pour en savoir plus sur la planification de site. Pour plus d’informations, voir
Planification de votre site Web, page 92.
Ce didacticiel contient les sections suivantes :
Planification de la navigation sur le site, page 117
Personnalisation de FreeHand pour une sortie multimédia/Web, page 118
Création de rectangles pour le plan de navigation, page 120
Modification du texte du rectangle, page 124
Ajout de lignes connecteur au document, page 126
Exportation du plan au format SWF, page 129
Planification de la navigation sur le site
Une fois que vous avez déterminé les objectifs du site, le public visé et les données requises, vous
pouvez commencer à créer le plan de navigation sur le site. Dans ce didacticiel, vous allez mettre
en place un plan de navigation sur le site pour Trio Motors, une entreprise fictive qui vend des
automobiles à faible consommation.
Trio Motors a sollicité un plan de navigation facile à utiliser permettant à ses utilisateurs de visiter
la salle de démonstration, d’afficher un aperçu des nouveaux produits, d’afficher une page pour les
propriétaires d’automobiles Trio et de trouver des informations sur les nouveautés, les événements
et les services financiers. Trio Motors aimerait également que le site soit orienté sur les
caractéristiques technologiques et propose un outil de recherche permettant aux utilisateurs de
trouver un revendeur Trio Motors dans leur région.
117
En tant que développeur Web pour le site Web de Trio Motors, vous choisissez un plan de
navigation simple constitué de cinq liens, tous centralisés sur une page d’accueil. Dans la partie
supérieure de la page d’accueil, vous allez créer une barre de navigation Macromedia
Fireworks MX 2004 contenant des liens vers les différentes pages : salle d’exposition, nouveautés
et événements, propriétaires, services financiers et section de prévisualisation. A un autre endroit
de la page, vous allez créer un lien vers une page spéciale fournissant des informations actuelles sur
les caractéristiques technologiques. Vous allez également créer un lien vers une page de résultats
affichant les résultats de l’outil de recherche.
Personnalisation de FreeHand pour une sortie multimédia/Web
FreeHand MX est une application de dessin vectorielle adaptée au Web et à l’impression. Avant
d’établir un aperçu de votre navigation sur le site, vous allez personnaliser FreeHand pour une
sortie multimédia/Web. Vous utiliserez les couleurs RVB et Web Safe tout au long du didacticiel
en choisissant des couleurs dans les menus déroulants de couleur de remplissage et de trait. Les
menus déroulants de choix de couleurs garantis pour le Web sont les mêmes que ceux se trouvant
dans les autres outils Macromedia Studio MX 2004.
1 Dans FreeHand, créez un fichier en choisissant Fichier > Nouveau.
2 Dans la partie inférieure de la fenêtre de document, choisissez Pixels dans le menu déroulant
Unités.
Remarque : L’unité de mesure par défaut pour un nouveau document est exprimée en points.
3 Dans l’inspecteur des propriétés, (Fenêtre > Document), cliquez sur l’onglet Document.
4 Choisissez Web dans le menu déroulant Format de la page.
Ceci crée une page avec une taille prédéfinie de 550 pixels sur 400 pixels. Vous pouvez
également choisir Personnalisé dans le menu déroulant Format de la page et entrer les
dimensions de votre choix en pixels.
5 Choisissez Edition > Préférences.
La boîte de dialogue Préférences s’affiche.
118
Didacticiel 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
6 Cliquez sur l’onglet Couleurs et sélectionnez Aucun dans le menu déroulant Gestion des
couleurs.
La désactivation de la fonction Gestion des couleurs permet d’afficher les couleurs dans un
environnement RVB générique.
7 Cliquez sur OK.
8 (Facultatif) Sélectionnez Page entière dans le menu déroulant du zoom au niveau du coin
inférieur gauche de la fenêtre de document.
Cette option permet de définir le facteur de zoom de sorte que la page active remplisse la
fenêtre. Vous pouvez également définir manuellement un facteur de zoom. Le grossissement
avec lequel vous choisissez de travailler dépend de la taille de l’écran de votre ordinateur et de
vos propres préférences.
9 Enregistrer le nouveau document (Fichier > Enregistrer) avec le nom trio_navigation.FH11.
Vous pouvez, si vous le souhaitez, enregistrer le nouveau fichier dans le répertoire principal du
site Dreamweaver que vous avez créé dans Chapitre 6, Configuration d’un exemple de site
ColdFusion Il est judicieux de conserver tous les fichiers du site dans un même emplacement.
Personnalisation de FreeHand pour une sortie multimédia/Web
119
Création de rectangles pour le plan de navigation
Une fois que vous avez personnalisé votre document pour le Web, vous êtes prêt à réaliser un
dessin du plan de navigation sur le site dans FreeHand.
1 Assurez-vous que le fichier que vous venez de créer, trio_navigation.FH11, est ouvert dans la
fenêtre de document.
2 Dans le panneau Outils, cliquez sur l’outil Rectangle et faites glisser un rectangle sur la page.
Outil Rectangle
Lorsque vous relâchez le bouton de la souris, le nouveau rectangle reste sélectionné. Laissez-le
sélectionné afin de pouvoir modifier ses propriétés.
Remarque : Ce didacticiel prend pour exemple un rectangle de 135 pixels de large et 52 pixels de
haut. Vous pouvez afficher et définir les dimensions exactes d’un rectangle dans l’onglet Objet de
l’inspecteur des propriétés (Fenêtre > Objet).
120
Didacticiel 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
3 Dans le panneau Outils, cliquez sur la zone Remplissage et choisissez une couleur dans la palette
de couleurs contextuelle pour l’intérieur du rectangle. L’exemple de ce didacticiel utilise la
couleur bleue clair (CCCCFF) pour le remplissage du rectangle.
Zone Remplissage
4 En gardant le rectangle toujours sélectionné, cliquez sur la zone Trait et choisissez une couleur
dans la palette de couleur déroulante pour le contour du rectangle. La zone Couleur de trait se
trouve au-dessus de la zone Remplissage dans le panneau Outils. L’exemple de ce didacticiel
utilise un bleu plus foncé (000033) pour le trait du rectangle.
5 Enregistrez le document (Fichier > Enregistrer). Pensez à enregistrer votre travail régulièrement
au fur et à mesure que vous apportez des modifications.
6 Dans le panneau Outils, cliquez sur l’outil Texte et cliquez une fois à l’intérieur du rectangle.
Outil Texte
Un bloc de texte apparaît à l’intérieur du rectangle avec une règle de texte au-dessus.
Création de rectangles pour le plan de navigation
121
7 Dans l’onglet Objet de l’inspecteur des propriétés (Fenêtre > Objet), effectuez l’une des
opérations suivantes :
■ Sélectionnez Arial dans le menu déroulant Police.
■ Sélectionnez Normal dans le menu déroulant Style.
■ Sélectionnez 18 dans le menu déroulant Taille de police.
■ Cliquez sur le bouton Centrer.
8 Dans le panneau Outils, cliquez sur la zone Remplissage et choisissez une couleur de remplissage
pour le texte. L’exemple utilise 000033, la même couleur que le contour du rectangle.
9 Tapez le mot Home à l’intérieur du rectangle.
10 Cliquez en dehors du bloc de texte pour le désélectionner.
11 Sélectionnez à la fois le rectangle et le bloc de texte en choisissant Edition > Sélectionner >
Sélectionner tout.
12 Dans l’onglet Aligner du panneau Aligner et Transformer (Fenêtre > Aligner), sélectionnez
Centrer dans les menus déroulants Horizontal et Vertical, puis cliquez sur Appliquer.
Le texte s’aligne verticalement et horizontalement au centre du rectangle.
122
Didacticiel 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
13 Conservez le rectangle et le bloc de texte sélectionnés et choisissez Edition > Groupe.
Le rectangle et le bloc de texte deviennent un objet groupé.
14 Choisissez Edition > Cloner.
Une copie de l’objet groupé s’affiche au-dessus du rectangle d’origine.
Remarque : La fonction de clonage est également disponible dans Fireworks MX 2004.
15 Faites glisser la copie de l’objet en dessous du rectangle d’origine, comme dans l’exemple.
16 Continuez à cloner et à faire glisser l’objet groupé d’origine jusqu’à ce que huit objets
apparaissent sur la page. Disposez vos rectangles comme sur la figure ci-dessous à l’aide de l’outil
Pointeur :
Les touches fléchées sur votre clavier vous permettent également de positionner les rectangles
avec plus de précision. Les touches fléchées vous permettent de déplacer les objets vers le haut,
vers le bas, vers la droite ou vers la gauche, par incréments d’un pixel.
Création de rectangles pour le plan de navigation
123
Modification du texte du rectangle
Vous allez ensuite modifier le texte de vos rectangles pour décrire les différentes pages de votre
site Web.
1 A partir du panneau Outils, cliquez sur l’outil Sous-sélection.
Outil Sous-sélection
2 Cliquez sur le mot Home dans le deuxième rectangle (au-dessous du premier rectangle sur la
page) pour sélectionner le bloc de texte.
3 A partir du panneau Outils, cliquez sur l’Outil Texte.
4 Sélectionnez le texte du bloc de texte sélectionné en maintenant le bouton de la souris enfoncé
pendant que vous la faites glisser sur le mot Home .
5 |Tapez le terme Showroom.
6 Cliquez sur une zone vierge du document pour désélectionner le bloc de texte.
7 Répétez les étapes 1 à 6 pour les autres rectangles en vous servant du texte suivant : News and
Events, Owners, Financial Services, Previews, Featured Technology et Search.
Pour du contenu textuel plus long, tel que Financial Services, appuyez sur Entrée (Windows)
ou Retour (Macintosh) après le premier mot et entrez les mots suivants sur la deuxième ligne.
Cliquez en maintenant la touche Maj enfoncée sur le bloc de texte et le rectangle à l’aide de
l’outil Sous-sélection. Réalignez le texte au centre du rectangle en choisissant Centrer dans les
menus déroulants Horizontal et Vertical dans le panneau Aligner et Transformer (Fenêtre >
Aligner).
124
Didacticiel 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
Une fois que vous avez terminé, votre document doit ressembler au diagramme ci-dessous :
Modification du texte du rectangle
125
Ajout de lignes connecteur au document
Vous allez maintenant utiliser le nouvel outil Connecteur dans FreeHand pour ajouter des lignes
connecteur au document. Les lignes connecteur montrent comment la page d’accueil est liée aux
fichiers individuels spécifiés.
1 A partir du panneau Outils, cliquez sur l’Outil Connecteur.
Outil Connecteur
2 Déplacez le pointeur sur la ligne inférieure du rectangle Home.
3 Maintenez le bouton de la souris enfoncée et faites glisser une ligne connecteur sur la ligne
supérieure du rectangle Showroom. Dès que vous commencez à faire glisser la ligne, le rectangle
Home est sélectionné, indiquant qu’il existe un objet à partir duquel une ligne connecteur peut
démarrer. Lorsque vous atteignez le rectangle Showroom, ce dernier devient aussi sélectionné,
indiquant qu’il existe un objet où la ligne connecteur peut s’arrêter.
4 Relâchez le bouton de la souris.
Une ligne connecteur s’affiche entre le rectangle Home et le rectangle Showroom.
Remarque : Si l’espace entre les rectangles n’est pas suffisant pour les flèches par défaut de la
ligne connecteur, l’outil ne peut pas dessiner la ligne correctement. Si vous rencontrez ce
problème, essayez d’augmenter l’espace entre les rectangles.
5 Positionnez le pointeur près du point de départ de la ligne connecteur que vous avez dessinée
lors des étapes précédentes (ligne inférieure du rectangle Home) et maintenez le bouton de la
souris enfoncé de façon à ce que le rectangle Home soit de nouveau sélectionné.
126
Didacticiel 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
6 Faites glisser une autre ligne connecteur vers la ligne supérieure du rectangle News and Events.
L’outil Connecteur peut être sensible. Vous pouvez avoir besoin d’un peu d’entraînement.
Veillez à ce que les deux rectangles soient sélectionnés avant de relâcher le bouton de la souris.
7 Dessinez une troisième ligne connecteur entre la partie inférieure du rectangle Home et la partie
supérieure du rectangle Owners.
8 Dessinez une quatrième ligne connecteur entre la ligne inférieure du rectangle Home et la partie
supérieure du rectangle Financial Services.
9 Déplacez le pointeur sur les poignées au centre de la ligne horizontale que vous avez dessinée à
l’étape 8.
Le pointeur prend la forme d’un pointeur de redimensionnement.
Ajout de lignes connecteur au document
127
10 Faites glisser la ligne horizontale vers le haut jusqu’à ce qu’elle chevauche l’autre ligne
horizontale de la page, tel qu’illustré ci-dessous.
11 Continuez à dessiner des lignes connecteur jusqu’à ce que le rectangle Home soit lié à tous les
autres rectangles de la page. Modifiez la forme des lignes connecteur comme vous le souhaitez
en faisant glisser les poignées de redimensionnement sur les lignes connecteur.
Vous avez maintenant un document FreeHand indiquant un plan de navigation complet. Les
lignes mettent en évidence que la page Home est liée à cinq pages différentes : Showroom, News
and Events, Owners, Financial Services et Previews. Elle est également liée à une page sur les
caractéristiques technologiques ainsi qu’à une page fournissant les résultats d’une application de
recherche que vous allez créer plus tard.
128
Didacticiel 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
Exportation du plan au format SWF
Après avoir fait un dessin de votre navigation sur le site, vous pouvez présenter l’avant-projet à
votre client ou aux membres de votre groupe dans une fenêtre de navigateur. Ceci est
particulièrement pratique si vous souhaitez partager le document avec des personnes ne disposant
pas de FreeHand.
1 Avec votre plan de navigation ouvert dans FreeHand, sélectionnez Fichier > Exporter.
La boîte de dialogue Exporter le document (Windows) ou Exporter (Macintosh) s’affiche.
2 Sélectionnez Macromedia Flash (SWF) dans le menu déroulant Type (Windows) ou Format
(Macintosh).
3 (Facultatif) Si vous voulez que le fichier soit ouvert avec Macromedia Flash Player
immédiatement lors de l’exportation, sélectionnez Ouvrir dans une application externe, puis
Macromedia Flash Player dans la boîte de dialogue Sélection d’une application externe et
cliquez sur Ouvrir.
Exportation du plan au format SWF
129
4 Cliquez sur Enregistrer (Windows) ou sur Exporter (Macintosh).
Le fichier est exporté au format Flash SWF à l’emplacement spécifié dans la boîte de dialogue
Exporter le document (Windows) ou Exporter (Macintosh). Si vous avez sélectionné Ouvrir
dans une application externe, le plan s’ouvre dans Macromedia Flash Player.
Vous pouvez maintenant présenter le plan sur tout ordinateur exécutant un navigateur Web et
Flash Player. Pour visualiser le plan dans une fenêtre de navigateur, faites glisser le fichier
trio_navigation.swf dans un navigateur ouvert, tel qu’Internet Explorer ou Netscape Navigator.
Vous pouvez également présenter le plan uniquement avec Flash Player en cliquant deux fois
sur le fichier.
Remarque : Lorsque vous ouvrez le fichier trio_navigation.swf dans un navigateur, le plan est
automatiquement redimensionné afin qu’il occupe tout l’espace disponible dans la fenêtre du
navigateur.
Des versions terminées des fichiers que vous avez créés tout au long de ce didacticiel sont
disponibles dans le répertoire trio_motors_complete du CD de Macromedia Studio MX 2004.
Pour localiser ce répertoire, insérez votre CD de Macromedia Studio MX 2004, sélectionnez
l’option d’exploration du contenu du CD, puis sélectionnez le dossier d’exemples Samples.
Pour plus d’informations sur les procédures décrites dans ce didacticiel, voir l’aide Utilisation de
FreeHand.
130
Didacticiel 1 : Didacticiel Dessin du plan de navigation sur le site dans FreeHand
DIDACTICIEL 2
Création d’une mise en forme basée sur un tableau
dans Dreamweaver
Ce didacticiel indique comment créer une mise en forme basée sur un tableau dans Macromedia
Dreamweaver MX 2004. La mise en forme détermine la manière dont votre page s’affichera dans le
navigateur, par exemple où seront placés les menus, les images et le contenu de Macromedia
Flash MX 2004.
Avant de poursuivre ce didacticiel, il est conseillé de voir Chapitre 7, Processus de
développement Web. Ce chapitre décrit les différentes fonctions de mise en forme dans
Dreamweaver, dont les cellules de mise en forme et les feuilles de style en cascade (CSS). Pour plus
d’informations, voir Planification de la conception et de la mise en forme de la page, page 100.
Ce didacticiel contient les sections suivantes :
Insertion de tableaux, page 131
Définition des propriétés d’un tableau, page 133
Insertion d’un espace réservé pour l’image, page 136
Ajout de texte de l’espace réservé dans les cellules de tableau, page 136
Insertion de tableaux
Ce didacticiel débute par l’insertion de tableaux qui contiendront des actifs de texte, de
graphiques et d’application. La page correspondra à la page d’index pour Trio Motors, une
entreprise fictive qui vend des automobiles à faible consommation.
1 Dans Dreamweaver, ouvrez le fichier index.cfm que vous avez créé au Chapitre 6, Configuration
d’un exemple de site ColdFusion
Remarque : Si vous n’avez pas procédé à la configuration d’un site Macromedia ColdFusion MX
décrite au chapitre 6, vous devez le faire avant de poursuivre. Les didacticiels Dreamweaver de la
seconde partie du manuel sont créés les uns par rapport aux autres et vous demandent de définir
un site Dreamweaver, de créer des dossiers pour vos actifs et d’établir une connexion à une base
de données.
Si vous ne possédez pas ColdFusion MX, vous pouvez toujours utiliser ce didacticiel avec une
page HTML vide à la place d’une page ColdFusion. Pour créer une page HTML vide, sélectionnez
Fichier > Nouveau. Dans l’onglet Général de la boîte de dialogue Nouveau document, sélectionnez
Page de base dans la liste Catégorie, puis cliquez sur Créer.
2 Cliquez une fois sur la page pour placer le point d’insertion dans l’angle supérieur gauche de la
page.
131
3 Sélectionnez Insertion > Tableau.
La boîte de dialogue Tableau s’affiche.
4 Dans la boîte de dialogue Tableau, procédez de la manière suivante :
■
■
■
■
■
■
■
Entrez 1 dans la zone de texte Lignes.
Entrez 1 dans la zone de texte Colonnes.
Entrez 650 dans la zone de texte Largeur du tableau.
Sélectionnez Pixels dans le menu contextuel Largeur du tableau.
Entrez 0 dans la zone de texte Largeur de la bordure.
Entrez 0 dans la zone de texte Marge intérieure des cellules.
Entrez 0 dans la zone de texte Espacement entre les cellules.
5 Cliquez sur OK.
Un tableau avec une ligne et une colonne s’affiche dans votre document.
6 Cliquez une fois sur la page à droite du tableau pour le désélectionner.
7 Sélectionnez Insertion > Tableau pour insérer un autre tableau.
8 Dans la boîte de dialogue Tableau, procédez de la manière suivante pour le deuxième tableau :
■ Entrez 2 dans la zone de texte Lignes.
■ Entrez 1 dans la zone de texte Colonnes.
■ Entrez 650 dans la zone de texte Largeur du tableau.
■ Sélectionnez Pixels dans le menu contextuel Largeur du tableau.
■ Entrez 0 dans la zone de texte Largeur de la bordure.
■ Entrez 0 dans la zone de texte Marge intérieure des cellules.
■ Entrez 0 dans la zone de texte Espacement entre les cellules.
132
Didacticiel 2 : Création d’une mise en forme basée sur un tableau dans Dreamweaver
Un deuxième tableau avec deux lignes et une colonne s’affiche au-dessous du premier tableau.
9 Cliquez à droite du tableau pour le désélectionner.
10 Insérez un troisième tableau en sélectionnant Insertion > Tableau et en effectuant les opérations
suivantes dans la boîte de dialogue Tableau :
■ Entrez 1 dans la zone de texte Lignes.
■ Entrez 2 dans la zone de texte Colonnes.
■ Entrez 650 dans la zone de texte Largeur du tableau.
■ Sélectionnez Pixels dans le menu contextuel Largeur du tableau.
■ Entrez 0 dans la zone de texte Largeur de la bordure.
■ Entrez 4 dans la zone de texte Marge intérieure des cellules.
■ Entrez 6 dans la zone de texte Espacement entre les cellules.
Un troisième tableau avec une ligne et deux colonnes s’affiche au-dessous du deuxième tableau.
Cliquez à droite du tableau pour le désélectionner. Votre page doit maintenant ressembler à la
page suivante :
Remarque : Le sélecteur de tableau (indiqué par des lignes vertes) s’affiche après l’insertion d’un
tableau. Pour le faire disparaître, cliquez à l’intérieur d’un autre tableau et cliquez à nouveau à
l’extérieur du tableau.
Définition des propriétés d’un tableau
Vous allez maintenant définir les propriétés précises des tableaux à l’aide du mode Tableaux
développés. Le mode Tableaux développés ajoute des marges à l’intérieur des cellules et de
l’espacement dans les tableaux. Il permet également d’augmenter les bordures des tableaux pour
faciliter les opérations de modification. Cela vous permet particulièrement de placer le point
d’insertion de manière précise sans sélectionner accidentellement le mauvais tableau ou tout autre
contenu du tableau.
Remarque : Lorsque vous avez terminé d’apporter vos modifications en mode Tableaux
développés, vous devez toujours revenir au mode Standard. Le mode Tableaux développés n’est pas
un environnement WYSIWYG, certaines opérations, telles que le redimensionnement, ne donneront
donc pas le résultat attendu.
1 Sélectionnez Affichage > Mode Tableau > Mode Tableaux développés.
Remarque : Si vous consultez le guide de démarrage avec la boîte de dialogue Mode Tableaux
développés, cliquez sur OK.
2 Cliquez une fois à l’intérieur du premier tableau.
3 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), tapez 45 dans la zone de texte Hauteur
des cellules et appuyez sur Entrée (Windows) ou Retour (Macintosh).
Définition des propriétés d’un tableau
133
Remarque : Si vous ne voyez pas la zone de texte Hauteur des cellules, cliquez sur la flèche
d’extension dans l’angle inférieur droit de l’inspecteur des propriétés.
4 Cliquez à droite du premier tableau pour placer le point d’insertion à l’extérieur du tableau.
5 Appuyez sur Maj + Entrée (Windows) ou sur Maj + Retour (Macintosh) pour placer un saut de
ligne entre le premier et le deuxième tableau.
6 Cliquez une fois à l’intérieur de la première ligne du deuxième tableau.
7 Dans l’inspecteur des propriétés, effectuez la procédure suivante :
■ Tapez 10 dans la zone de texte Hauteur des cellules et appuyez sur Entrée (Windows) ou
Retour (Macintosh).
■ Choisissez le gris (#CCCCCC) dans le menu contextuel Couleur d’arrière-plan.
Remarque : Vous ne verrez pas la hauteur de la cellule du tableau gris passer à dix pixels car vous
êtes en mode Tableaux développés.
8 Cliquez une fois à l’intérieur de la deuxième ligne du deuxième tableau.
9 Dans l’inspecteur des propriétés, tapez 175 dans la zone de texte Hauteur des cellules et appuyez
sur Entrée (Windows) ou Retour (Macintosh).
10 Cliquez une fois à l’intérieur de la première colonne du troisième tableau.
11 Dans l’inspecteur des propriétés, tapez 308 dans la zone de texte Largeur des cellules et appuyez
sur Entrée (Windows) ou Retour (Macintosh).
134
Didacticiel 2 : Création d’une mise en forme basée sur un tableau dans Dreamweaver
12 Répétez l’étape 11 pour définir la largeur de la deuxième colonne à 308 pixels.
Votre mise en forme doit maintenant ressembler à la suivante :
13 Cliquez sur le lien [quitter] dans la barre intitulée Mode Tableaux développés en haut de la
fenêtre Document pour revenir au mode Standard.
Définition des propriétés d’un tableau
135
Insertion d’un espace réservé pour l’image
Un espace réservé pour une image est un graphique que vous utilisez jusqu’à ce que le dessin final
soit prêt à être ajouté à une page Web. Un espace réservé pour l’image est utile lors de la mise en
forme de pages Web car il permet de placer une image sur une page avant même d’avoir créé
l’image.
1 Dans la fenêtre de document, cliquez une fois à l’intérieur du premier tableau.
2 Sélectionnez Insérer > Objets image > Espace réservé pour l’image.
La boîte de dialogue Espace réservé pour l’image s’affiche.
3 Dans la boîte de dialogue Espace réservé pour l’image, procédez de la manière suivante :
■ Tapez banner_graphic dans la zone de texte Nom.
■ Entrez 650 dans la zone de texte Largeur.
■ Entrez 45 dans la zone de texte Hauteur.
■ Choisissez le bleu clair (#CCCCFF) dans le menu contextuel Couleur.
■ Entrez Bannière Trio Motors dans la zone de texte Autre.
4 Cliquez sur OK.
L’espace réservé pour l’image apparaît à l’intérieur du premier tableau. Il affiche une étiquette
et les attributs de taille de l’image qui sera créée.
Remarque : Lorsqu’ils sont affichés dans un navigateur, le texte de l’étiquette et de la taille d’un
espace réservé pour l’image n’apparaissent pas.
Dans le didacticiel suivant, Didacticiel 3, Création d’une bannière dans Fireworks vous utiliserez
Macromedia Fireworks MX 2004 pour créer une bannière Trio Motors et remplacer l’espace
réservé pour l’image.
Ajout de texte de l’espace réservé dans les cellules de tableau
Vous allez maintenant ajouter le texte de l’espace réservé à votre mise en forme et créer des
styles CSS.
1 Cliquez une fois à l’intérieur de la première colonne du troisième tableau (tableau inférieur) et
saisissez les mots FEATURED TECHNOLOGY en majuscules.
2 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour créer davantage d’espace dans
la cellule de tableau.
3 Sélectionnez la ligne de texte que vous venez d’entrer.
4 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), procédez de la manière suivante :
■
■
■
136
Dans le menu déroulant Police, sélectionnez Arial, Helvetica, sans serif.
Dans le menu contextuel Taille, sélectionnez 14.
Dans le menu contextuel Couleur, sélectionnez le bleu foncé (#000033).
Didacticiel 2 : Création d’une mise en forme basée sur un tableau dans Dreamweaver
Le texte devient défini comme style1.
Vous allez ensuite modifier le style1 de façon à ce que tout votre style1 soit en gras.
5 Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Plus (+) situé près de
la balise <style>, sélectionnez style1 dans la liste de style et cliquez sur le bouton Modifier le
style.
La boîte de dialogue Définition du style CSS s’affiche.
6 Dans la catégorie Type, sélectionnez gras dans le menu contextuel Epaisseur, puis cliquez
sur OK.
Le texte FEATURED TECHNOLOGY devient gras.
7 Cliquez au-dessous du texte style1 pour désélectionner le texte et placez le point d’insertion dans
l’espace que vous avez créé à l’étape 2.
8 Entrez du texte, tel que Table content text.
9 Sélectionnez le texte que vous venez d’entrer et effectuez la procédure suivante dans l’inspecteur
des propriétés :
■ Dans le menu déroulant Police, sélectionnez Arial, Helvetica, sans serif.
■ Dans le menu contextuel Taille, sélectionnez 12.
■ Dans le menu contextuel Couleur, sélectionnez le bleu foncé (#000033).
Le texte est défini comme style2.
10 Cliquez une fois dans la deuxième colonne du troisième tableau (tableau inférieur) et saisissez
les mots LOCATE A TRIO DEALER en majuscules.
11 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour créer davantage d’espace dans
la cellule de tableau.
Ajout de texte de l’espace réservé dans les cellules de tableau
137
12 Sélectionnez le texte que vous venez d’entrer et choisissez style1 dans le menu contextuel Style
dans l’inspecteur des propriétés.
Le nouveau texte est défini comme style1.
13 Cliquez au-dessous du texte style1 pour désélectionner le texte et placez le point d’insertion dans
l’espace que vous avez créé à l’étape 11.
14 Entrez du texte, tel que Table content text, sélectionnez le texte et sélectionnez style2 dans
l’inspecteur des propriétés.
15 Assurez-vous que l’alignement vertical des colonnes de tableau FEATURED TECHNOLOGY
et LOCATE A TRIO DEALER est défini sur Haut. Vous pouvez définir l’alignement vertical
de chaque colonne de tableau en cliquant dans une colonne et en sélectionnant Haut dans le
menu contextuel Alignement vertical (Vert) dans l’inspecteur des propriétés.
16 Cliquez une fois à l’intérieur de la deuxième ligne du tableau du centre (au-dessous de la cellule
de tableau grise) et saisissez les mots FLASH MOVIE FADE-IN en majuscules.
17 Sélectionnez le texte que vous venez d’entrer et effectuez la procédure suivante dans l’inspecteur
des propriétés :
■ Sélectionnez style1 dans le menu contextuel Style.
138
Didacticiel 2 : Création d’une mise en forme basée sur un tableau dans Dreamweaver
■
Sélectionnez Centrer dans le menu contextuel Alignement horizontal (Horz).
Vous avez maintenant une mise en forme avec des tableaux, un espace réservé pour l’image et des
styles CSS prédéfinis. Dans les didacticiels qui suivent, vous allez développer des actifs grâce à
d’autres applications Macromedia Studio MX 2004. Ensuite, vous pourrez assembler ces actifs
dans la page que vous venez de créer.
Pour plus d’informations sur les mises en forme basées sur un tableau, voir Présentation de contenu
à l’aide de tableaux dans l’aide Utilisation de Dreamweaver.
Ajout de texte de l’espace réservé dans les cellules de tableau
139
140
Didacticiel 2 : Création d’une mise en forme basée sur un tableau dans Dreamweaver
DIDACTICIEL 3
Création d’une bannière dans Fireworks
Ce didacticiel vous explique comment créer une bannière Macromedia Fireworks MX 2004
contenant des images et du texte. Le produit fini apparaît dans la partie supérieure de la page
d’accueil du site Web de Trio Motors que vous créez.
Avant de commencer, vous devez copier les exemples de fichiers du didacticiel sur votre
ordinateur. Pour localiser les fichiers d’exemple, insérez le CD de Macromedia Studio MX 2004
dans le lecteur de votre ordinateur, puis sélectionnez l’option d’exploration du contenu du CD
dans le coin inférieur droit de l’écran d’installation. Copiez le dossier d’exemples Samples sur
votre disque dur (par exemple sur votre Bureau ou dans le répertoire principal du site
Dreamweaver que vous avez créé au Chapitre 6, Configuration d’un exemple de site ColdFusion). Le
dossier d’exemples contient tous les fichiers d’exemple dont vous avez besoin pour suivre les
didacticiels restants du présent manuel.
Ce didacticiel contient les sections suivantes :
Création d’un document Fireworks, page 142
Insertion d’une image, page 142
Ajout de texte à la bannière, page 144
Optimisation de la bannière, page 146
Exportation de la bannière dans Dreamweaver, page 147
141
Création d’un document Fireworks
Dans Didacticiel 2, Création d’une mise en forme basée sur un tableau dans Dreamweaver, vous avez
utilisé des tableaux HTML pour mettre en forme votre page index.cfm. Vous avez également
inséré un espace réservé pour une image appelé banner_graphic dans le premier tableau. Vous
pouvez maintenant utiliser cet espace réservé pour l’image pour créer un document dans
Fireworks.
1 Dans Macromedia Dreamweaver MX 2004, ouvrez la page index.cfm que vous avez mise en
forme dans Didacticiel 2, Création d’une mise en forme basée sur un tableau dans Dreamweaver
2 Cliquez une fois sur l’espace réservé pour l’image banner_graphic pour le sélectionner.
3 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur Créer.
Fireworks s’ouvre en mode Edition depuis Dreamweaver. Les dimensions du nouveau
document sont 650 pixels en largeur et 45 pixels en hauteur, les mêmes dimensions que celles
définies pour l’espace réservé pour l’image. Fireworks a également attribué le nom de l’espace
réservé (banner_graphic) au nouveau document.
Remarque : Pour définir une autre application d’édition d’images en tant qu’éditeur principal
d’images, sélectionnez Edition > Préférences, puis la catégorie Types de fichiers / Editeurs. Pour
plus d’informations, voir Définition des préférences pour les éditeurs d’image externes dans l’aide
Utilisation de Dreamweaver.
Lorsque vous créez un document dans Fireworks, vous créez un document PNG (Portable
Network Graphic). PNG est le format de fichier natif de Macromedia Fireworks. Lorsque vous
créez des graphiques avec Fireworks, vous pouvez les exporter sous d’autres formats Web courants,
tels que JPEG, GIF et GIF animé. Vous pouvez également exporter des graphiques vers de
nombreux formats populaires utilisés en dehors du Web, tels que TIFF et BMP. Quels que soient
les paramètres d’optimisation et d’exportation choisis, le fichier PNG Fireworks d’origine est
conservé afin de permettre une modification ultérieure aisée.
Insertion d’une image
Vous pouvez maintenant ajouter l’image d’une voiture au nouveau fichier Fireworks.
1 Une fois le fichier banner_graphic.png ouvert, sélectionnez Fichier > Importer.
2 Dans la boîte de dialogue d’importation qui s’affiche, recherchez le dossier d’exemples que vous
avez copié sur votre disque dur.
Pour plus d’informations, consultez l’introduction relative au présent didacticiel.
3 Sélectionnez le fichier car_banner.jpg, puis cliquez sur Ouvrir. Lorsque vous sélectionnez
l’image, le pointeur prend la forme d’un pointeur d’insertion.
142
Didacticiel 3 : Création d’une bannière dans Fireworks
4 Placez le pointeur d’insertion à l’extrémité gauche du document et cliquez avec la souris.
L’image de la voiture apparaît dans votre document.
Seulement une partie de l’image de la voiture apparaît dans le document, car l’image est plus
grande que le document et est donc placée en dessous de celui-ci. Ceci n’est pas un problème
puisque, dans ce didacticiel, vous n’utiliserez qu’une partie de l’image.
En outre, l’image insérée est entourée d’une bordure bleue comportant des poignées de
redimensionnement (carrés bleus unis dans chaque angle). Faites glisser les poignées pour régler
la largeur et la hauteur de l’image. Toutefois, dans ce didacticiel, vous ne réglerez pas la taille de
l’image.
Ne cliquez pas à l’extérieur de l’image. Vous devez la conserver sélectionnée pour la prochaine
étape.
5 Avec l’image sélectionnée, utilisez l’outil Pointeur pour faire glisser l’image à sa place, tel
qu’illustré.
Ne redimensionnez pas l’image. Pour éviter de redimensionner l’image par accident, placezvous au centre de l’image pour la déplacer, plutôt que sur les côtés.
Vous pouvez également déplacer l’image en utilisant les touches fléchées du clavier. Elles vous
permettent de déplacer l’image vers le haut, le bas, la gauche ou la droite par incrément d’un
pixel.
6 Dans le panneau Calques (Fenêtre > Calques), cliquez deux fois sur l’objet bitmap sélectionné
sous Calque 1, renommez l’objet voiture, puis appuyez sur Entrée (Windows) ou Retour
(Macintosh).
Insertion d’une image
143
7 Cliquez une fois à l’extérieur de l’image pour la désélectionner.
8 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur la case de couleur du
document, puis cliquez une fois avec la pipette dans la zone d’arrière-plan bleu foncé de l’image
de la voiture.
La case de couleur du document affiche alors la même teinte de bleu que l’arrière-plan de
l’image de la voiture.
Remarque : La sélection d’une couleur à l’aide de la pipette ne produit pas toujours des couleurs
Web Safe. De plus, si votre moniteur est configuré pour un affichage en couleurs 16 bits, l’exemple
de couleur peut ne pas correspondre à la couleur de l’image. Vous devez configurer votre moniteur
pour un affichage en couleurs 24 bits au minimum. Un affichage en couleurs 32 bits est nécessaire
pour que Fireworks puisse échantillonner correctement les couleurs à l’écran.
Ajout de texte à la bannière
Vous pouvez maintenant ajouter du texte dans la partie droite de la bannière.
1 Dans le panneau Outils, cliquez sur l’outil Texte et déplacez le pointeur vers la fenêtre du
document.
Outil Texte
Le pointeur prend l’aspect d’un I-beam, et l’inspecteur des propriétés affiche les propriétés du
texte.
2 Dans l’inspecteur des propriétés, exécutez les actions suivantes :
■ Sélectionnez une police dans le menu déroulant Police. Dans cet exemple, la police Arial est
sélectionnée
■ Entrez 15 comme taille de police.
■ Dans le menu déroulant Couleur de remplissage, conservez la couleur sélectionnée par
défaut, le blanc.
■ Cliquez sur le bouton Gras.
Remarque : Si l’option Gras est déjà sélectionnée, vous n’avez pas besoin de cliquer sur le
bouton Gras.
144
Didacticiel 3 : Création d’une bannière dans Fireworks
■
■
Cliquez sur le bouton Alignement à gauche.
Sélectionnez Anticrénelage lissé dans le menu contextuel Niveau d’anticrénelage.
Menu déroulant Police Taille
Remplir Gras
Menu contextuel
Niveau d’anticrénelage
Bouton Alignement à gauche
3 Cliquez une fois entre le milieu et le côté droit du document.
Un bloc de texte vide est créé.
Le cercle vide situé dans le coin supérieur droit du bloc de texte indique que le bloc de texte se
redimensionne automatiquement. Dans Fireworks, un bloc de texte à redimensionnement
automatique ajuste sa largeur en se basant sur la ligne de texte la plus longue du bloc.
4 Tapez TRIO MOTORS en majuscules dans le bloc de texte.
La largeur du bloc de texte augmente lorsque vous tapez.
Remarque : Le texte TRIO MOTORS est différent du texte de la version définitive de la bannière
du site Web Trio Motors. Ne vous en inquiétez pas. Vous modifierez le texte dans un autre
didacticiel.
5 Cliquez une fois en dehors du bloc de texte et du document afin d’appliquer votre saisie de texte.
Le bloc de texte reste sélectionné et l’outil Texte demeure l’outil sélectionné. Le cercle vide du
bloc de texte n’est plus visible. Cet indicateur est visible uniquement lorsque vous saisissez ou
lorsque vous modifiez du texte.
6 Cliquez sur l’outil Pointeur, puis faites glisser le bloc de texte à sa place, tel qu’illustré.
Gardez à l’esprit que vous pouvez également déplacer les objets dans Fireworks à l’aide des
touches fléchées du clavier. Elles vous permettent de déplacer un objet vers le haut, le bas, la
gauche ou la droite par incrément d’un pixel.
7 Cliquez en dehors du bloc de texte pour le désélectionner.
8 Insérez et placez le graphique arrow.gif à côté du texte TRIO MOTORS à l’aide de l’une des
méthodes décrites dans ce didacticiel.
Le graphique arrow.gif se trouve dans le dossier d’exemples que vous avez copié sur votre disque
dur.
Pour plus d’informations, voir Insertion d’une image, page 142.
Ajout de texte à la bannière
145
Optimisation de la bannière
Avant d’exporter un document Fireworks, vous devez toujours l’optimiser. L’optimisation d’un
document assure l’exportation d’un graphique avec la meilleure compression et la
meilleure qualité possibles.
1 Exécutez l’une des actions suivantes pour ouvrir le panneau Optimiser, s’il n’est pas déjà ouvert :
Sélectionnez Fenêtre > Optimiser.
Si le panneau est réduit à droite de l’écran, cliquez sur le mot Optimiser afin de voir
l’intégralité du panneau.
2 Sélectionnez JPEG - Qualité supérieure dans le menu déroulant Paramètres.
Les options du panneau se modifient afin de refléter le nouveau paramètre.
■
■
3 Cliquez sur le bouton Aperçu en haut de la fenêtre du document.
La vue Aperçu affiche votre document tel qu’il apparaîtrait s’il était exporté avec les paramètres
actuels.
Dans l’angle inférieur gauche de la fenêtre Aperçu, Fireworks affiche la taille du fichier exporté
et une estimation du temps nécessaire pour afficher le graphique sur le Web. Dans cet exemple,
il faudra 0 seconde à un ordinateur doté d’un modem 56 Kbps pour télécharger la bannière.
146
Didacticiel 3 : Création d’une bannière dans Fireworks
Exportation de la bannière dans Dreamweaver
Une fois la bannière optimisée, vous pouvez l’exporter en tant que fichier JPEG.
1 Dans la partie supérieure gauche de la fenêtre du document, cliquez sur le bouton Terminé.
Fireworks vous demande de spécifier un emplacement dans lequel enregistrer le fichier
banner_graphic.png.
2 Dans Chapitre 6, Configuration d’un exemple de site ColdFusion, vous avez créé un dossier
appelé png dans votre site Dreamweaver. Enregistrez le fichier banner_graphic.png dans ce
dossier. Il est judicieux de conserver tous vos fichiers PNG dans un emplacement central.
3 Une fois que vous avez enregistré le fichier banner_graphic.png, la boîte de dialogue Exporter
s’affiche. Fireworks vous demande de spécifier un emplacement dans lequel enregistrer le fichier
banner_graphic.jpg (le fichier exporté). Dans Chapitre 6, Configuration d’un exemple de site
ColdFusion, vous avez créé un dossier appelé images dans votre site Dreamweaver. Enregistrez le
fichier banner_graphic.jpg dans ce dossier. A nouveau, il est judicieux de conserver tous vos
fichiers d’image dans un emplacement central.
Lorsque vous exportez le fichier banner_graphic.jpg, Dreamweaver met à jour
automatiquement la fenêtre de document Dreamweaver avec le fichier Fireworks que vous
venez de créer. Le fichier banner_graphic.png réside dans le dossier png de votre site
Dreamweaver et peut être modifié à tout moment.
Des versions terminées des fichiers que vous avez créés tout au long de ce didacticiel sont
disponibles dans le dossier d’exemples que vous avez copié sur votre disque dur à partir du CD de
Macromedia Studio MX 2004. Les versions terminées des fichiers se trouvent dans le répertoire
trio_motors_complete.
Pour plus d’informations sur les procédures décrites dans ce didacticiel, voir l’aide de Fireworks.
Exportation de la bannière dans Dreamweaver
147
148
Didacticiel 3 : Création d’une bannière dans Fireworks
DIDACTICIEL 4
Création d’une barre de navigation avec Fireworks
Ce didacticiel vous montre comment créer une barre de navigation Macromedia
Fireworks MX 2004 que vous pouvez utiliser sur plusieurs pages de votre site Web. Une barre de
navigation est une série de boutons qui apparaissent sur une ou plusieurs pages d’un site Web. En
général, tous les boutons d’une barre de navigation ont la même apparence, mis à part leur texte.
Le produit fini apparaît dans la partie supérieure de la page d’index du site Web de Trio Motors
que vous créez.
Ce didacticiel contient les sections suivantes :
Création d’un document Fireworks, page 150
Création d’un symbole de bouton, page 151
Création des états de bouton, page 154
Création de plusieurs occurrences d’un bouton, page 156
Modification du texte de l’occurrence du bouton, page 157
Affectation des URL et des noms aux boutons, page 158
Optimisation de la barre de navigation, page 159
Définition des préférences HTML, page 160
Exportation du document au format HTML, page 161
Affichage des fichiers exportés dans le panneau Fichiers de Dreamweaver, page 162
Affichage du fichier HTML de Fireworks dans un navigateur, page 163
149
Création d’un document Fireworks
Dans Didacticiel 2, Création d’une mise en forme basée sur un tableau dans Dreamweaver, vous avez
utilisé des tableaux HTML pour mettre en forme votre page index.cfm. Vous avez également
inséré un saut de ligne (espace) entre le premier et le deuxième tableau. Vous allez maintenant
créer un document Fireworks 2004 pour une barre de navigation pouvant être placée entre les
deux tableaux.
1 Dans Fireworks, choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche.
2 Dans la zone de texte Largeur, entrez 650 et choisissez Pixels (paramètre par défaut) dans le
3
4
5
6
7
150
menu contextuel Largeur.
Dans la zone de texte Hauteur, entrez 40 et choisissez Pixels (paramètre par défaut) dans le
menu contextuel Hauteur.
Dans la zone de texte Résolution, entrez 72 et choisissez Pixels/pouce (paramètre par défaut)
dans le menu contextuel Résolution.
Dans Couleur du fond, sélectionnez le bouton radio Blanche s’il n’est pas déjà sélectionné.
Cliquez sur OK.
Un nouveau document Fireworks s’affiche dans l’espace de travail. Son arrière-plan est blanc et
ses dimensions sont 650 pixels en largeur et 40 pixels en hauteur.
Enregistrez le fichier (Fichier > Enregistrer) avec le nom navbar.png.
Dans Chapitre 6, Configuration d’un exemple de site ColdFusion, vous avez créé un dossier
appelé png au sein du site. Lorsque vous enregistrez le nouveau fichier navbar.png, enregistrezle dans le dossier. Il est judicieux de conserver tous vos fichiers PNG dans un emplacement
central.
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
Création d’un symbole de bouton
Vous allez maintenant créer le premier bouton de la barre de navigation. Vous utiliserez ce bouton
pour créer tous les autres boutons dans la barre de navigation, vous voulez donc vous assurer que
le premier bouton que vous créez soit assez grand pour contenir le texte le plus long dans la barre
de navigation. Dans cet exemple, le texte le plus long dans la barre de navigation est Nouveautés et
événements, vous allez donc créer le bouton Nouveautés et événements en premier.
Remarque : Familiarisez-vous avec le panneau Outils et l’inspecteur des propriétés Fireworks avant
de continuer. Pour plus de détails, voir Didacticiel 3, Création d’une bannière dans Fireworks, page 141.
1 Assurez-vous que le fichier navbar.png créé dans la section précédente est bien ouvert dans la
fenêtre de document.
2 A partir du panneau Outils, cliquez sur l’outil Rectangle.
3 Dans l’inspecteur des propriétés, choisissez le bleu clair dans le menu contextuel Couleur de
remplissage. Ce didacticiel utilise une valeur hexadécimale de #CCCCFF.
4 Faites glisser un rectangle sur le fond comme indiqué dans l’exemple.
La taille et la position exactes du rectangle n’ont pas d’importance. Vous modifierez ses
propriétés à l’étape suivante.
5 Le rectangle sélectionné, définissez son trait, sa largeur, sa hauteur et ses coordonnées x et y dans
l’inspecteur des propriétés.
■ Choisissez le blanc (#FFFFFF) dans le menu contextuel Couleur de trait.
■ Entrez 1 comme valeur de trait.
■ Sélectionnez Crayon > Pixel net dans la catégorie Trait.
■ Entrez 131 dans la zone de texte Largeur.
■ Entrez 40 dans la zone de texte Hauteur.
■ Entrez -1 dans la zone de texte X.
■ Entrez 0 dans la zone de texte Y.
Remarque : Si vous ne voyez pas les zones de texte Largeur et Hauteur, cliquez sur la flèche
d’extension dans la partie inférieure droite de l’inspecteur des propriétés.
Création d’un symbole de bouton
151
6 Dans le panneau Outils, cliquez sur l’outil Texte.
7 Dans l’inspecteur des propriétés, effectuez la procédure suivante :
■
■
■
■
■
■
Sélectionnez une police dans le menu déroulant Police. Dans ce didacticiel, la police Arial
est sélectionnée.
Entrez 11 comme taille de police.
Choisissez le bleu foncé (#000033) dans le menu contextuel Couleur de remplissage.
Cliquez sur le bouton Gras.
Cliquez sur le bouton Alignement centré.
Sélectionnez Anticrénelage lissé dans le menu contextuel Niveau d’anticrénelage.
8 Cliquez une fois au centre du rectangle bleu.
Un bloc de texte vide est créé.
9 Entrez les mots FINANCIAL SERVICES en majuscules dans le bloc de texte. La largeur du
bloc de texte augmente lorsque vous saisissez le texte.
10 Cliquez une fois en dehors du bloc de texte afin d’appliquer votre entrée.
11 A l’aide de l’outil Pointeur, centrez le texte près de la partie supérieure du rectangle comme
indiqué dans l’exemple suivant.
Gardez à l’esprit que vous pouvez également déplacer les objets dans Fireworks à l’aide des
touches fléchées du clavier. Vous pouvez utiliser les touches fléchées pour déplacer un objet de
bas en haut ou de gauche vers la droite, d’un pixel à la fois.
Dans l’exemple, l’abscisse x du bloc de texte est 0 et l’ordonnée y est 1.
12 Sélectionnez à la fois le rectangle et le bloc de texte en choisissant Sélectionner tout dans le menu
Sélection.
13 Choisissez Modifier > Symbole > Convertir en symbole.
La boîte de dialogue Propriétés du symbole apparaît.
152
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
14 Entrez Bouton nav trio dans la zone de texte Nom, choisissez Bouton comme type de symbole,
puis cliquez sur OK.
Une découpe apparaît en haut du graphisme du bouton, et une icône raccourci apparaît à
gauche de la découpe. Cela signifie que la sélection dans l’espace de travail est une occurrence
du symbole que vous venez de créer. Les symboles sont comme des copies maître de vos images.
Lorsque vous changez un symbole, toutes les occurrences de ce symbole présentes dans votre
document changent automatiquement. Les symboles se trouvent dans la bibliothèque.
15 Si le panneau Bibliothèque est réduit, cliquez sur le mot Actifs dans le panneau Actifs et cliquez
sur l’onglet Bibliothèque. Si le panneau Actifs n’est pas visible, choisissez Fenêtre >
Bibliothèque.
Votre nouveau symbole de bouton est listé dans le panneau Bibliothèque.
Création d’un symbole de bouton
153
Création des états de bouton
Vous allez ensuite créer différents états pour le symbole du bouton. Les états de bouton
correspondent aux différentes apparences du bouton lorsqu’il apparaît dans un navigateur Web,
lorsque le pointeur le survole ou lorsque vous cliquez dessus.
1 Double-cliquez sur l’instance du bouton que vous venez de créer.
Vous pouvez également double-cliquer sur l’aperçu du bouton dans le panneau Bibliothèque
ou sur l’icône du symbole située à côté de ce dernier, dans la liste des symboles du panneau
Bibliothèque.
L’éditeur de boutons s’ouvre avec l’image du bouton affichée dans la zone de travail.
2 Cliquez sur le document pour vous assurer que tout est désélectionné.
3 Cliquez sur les onglets placés en haut de l’éditeur de boutons.
Les quatre premiers onglets représentent les états de bouton. Le dernier onglet, Zone active,
représente la zone active du bouton, autrement dit la partie qu’un utilisateur doit cliquer avec
le pointeur ou survoler pour activer les états du bouton. La zone active est également la zone
d’inversion du bouton, autrement dit la zone qui change avec chacun des états du bouton.
Pour le moment, le seul état existant pour le symbole du bouton est l’état Relevé, l’état du
bouton avant qu’il ne soit survolé ou que vous ne cliquiez dessus.
4 Cliquez sur l’onglet Au-dessus, en haut de l’éditeur de boutons, puis cliquez sur le bouton
Copier le graphisme Relevé.
Le graphisme du bouton est copié à partir de l’onglet Relevé. L’état Au-dessus d’un bouton est
son apparence lorsque le pointeur le survole. Pour donner à l’utilisateur un effet visuel de
réaction, vous changerez la couleur du rectangle derrière le texte.
154
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
5 Sélectionnez le rectangle. Assurez-vous de sélectionner le rectangle et non le texte. Si vous n’êtes
pas sûr de votre sélection, vérifiez dans le panneau Calques (Fenêtre > calques) lequel des deux
est sélectionné.
6 Cliquez sur la case Couleur de remplissage dans l’inspecteur des propriétés, et choisissez la
couleur grise (#CCCCCC).
Le rectangle devient gris.
Remarque : Il s’agit des mêmes couleurs Web Safe que celles que vous avez choisies pour l’un
des arrière-plans de tableau dans Didacticiel 2, Création d’une mise en forme basée sur un tableau
dans Dreamweaver. Si la modification de couleur n’est pas assez perceptible à l’écran, vous
pouvez sélectionner une autre couleur.
7 Cliquez sur l’onglet Enfoncé en haut de l’éditeur de boutons et cliquez sur le bouton Copier le
graphisme Au-dessus.
L’image du bouton est copiée à partir de l’onglet Au-dessus. L’état Enfoncé d’un bouton est son
apparence après qu’un utilisateur ait cliqué dessus. Cette fois-ci, vous ne changerez pas la
couleur du rectangle, vous le laisserez tel qu’il est.
8 Cliquez sur Terminé dans l’éditeur de boutons pour appliquer vos modifications au symbole du
bouton.
9 Cliquez sur le bouton Aperçu dans le coin supérieur gauche de la fenêtre de document et testez
les états du bouton. Si nécessaire, désactivez les découpes. Vous pouvez désactiver les découpes
en cliquant sur le bouton Masque les découpes et les références dans le panneau Outils.
Bouton Affiche les découpes et les références
Bouton Masque les découpes et les références
10 Cliquez sur l’onglet Original et réactivez les découpes en cliquant sur le bouton Affiche les
découpes et les références.
Création des états de bouton
155
Création de plusieurs occurrences d’un bouton
Vous allez ensuite créer plusieurs occurrences du symbole du bouton.
1 Sélectionnez le bouton dans l’espace de travail, s’il ne l’est pas déjà.
L’inspecteur des propriétés affiche les propriétés des boutons.
2 Choisissez Edition > Cloner.
Une nouvelle occurrence du bouton apparaît en haut du bouton d’origine.
3 Maintenez enfoncée la touche Maj tout en appuyant sur la touche Flèche droite de manière
répétée pour déplacer la nouvelle occurrence vers la droite.
L’occurrence se déplace par incréments de 10 pixels. Si nécessaire, utilisez uniquement les
touches fléchées afin de déplacer la sélection d’un pixel à la fois. Positionnez l’occurrence
directement à droite de l’occurrence d’origine, mais sans le superposer, comme indiqué dans
l’illustration ci-dessous.
4 Clonez trois autres occurrences du bouton, et positionnez-les à droite de la précédente
occurrence.
Conseil : Pour cloner plus rapidement, appuyez sur Alt (Windows) ou Option (Macintosh) tout en
faisant glisser l’occurrence sélectionnée avec l’outil Pointeur afin d’en faire une copie. Une fois que
la nouvelle occurrence est positionnée immédiatement à droite de la précédente occurrence,
choisissez Edition > Répéter Dupliquer pour créer et placer automatiquement une autre copie de
l’occurrence.
5 Dans le panneau Outils, cliquez sur le bouton Masque les découpes et les références, puis utilisez
les touches fléchées de votre clavier pour déplacer les boutons par incréments d’un pixel jusqu’à
ce qu’ils soient séparés de manière uniforme. Il n’existe aucun espace entre les boutons dans la
barre de navigation de cet exemple.
Remarque : De fait, le bord droit de chaque bouton (hormis le dernier) touche le bord gauche du
bouton qui se trouve à ses côtés, donnant l’apparence de deux pixels d’espace blanc entre chaque
bouton. Rappelez-vous que le trait ou le soulignement blanc de chaque rectangle représente un
pixel. Le cinquième bouton, tout comme le premier, doit se trouver hors du document avec un
espacement de quelques pixels. De fait, aucun espace blanc ne doit apparaître aux bords gauche
et droit du document.
6 Cliquez sur le bouton Affiche les découpes et les références pour réactiver les découpes.
156
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
Modification du texte de l’occurrence du bouton
Maintenant que vous avez créé tous les boutons de votre barre de navigation, vous devez assigner
un texte unique à chacun des boutons. Vous pouvez facilement changer le texte de l’occurrence
d’un bouton à l’aide de l’inspecteur des propriétés.
1 Sélectionnez l’occurrence du bouton à l’extrême gauche.
Les propriétés de l’occurrence du bouton apparaissent dans l’inspecteur des propriétés. A
l’exception du menu contextuel Paramètres d’exportation, ces propriétés s’appliquent
uniquement à l’occurrence sélectionnée. Les modifications apportées ici n’affectent pas le
symbole du bouton d’origine dans la Bibliothèque.
2 Dans l’inspecteur des propriétés, remplacez le texte de la zone de Texte par SHOWROOM écrit
en majuscules. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
Le texte du bouton change pour refléter votre saisie.
3 Répétez les étapes 1 et 2 pour les boutons restants.
■
■
■
■
Entrez NEWS AND EVENTS pour le texte du second bouton.
Entrez OWNERS pour le texte du troisième bouton.
Laissez FINANCIAL SERVICES pour le texte du quatrième bouton.
Entrez PREVIEWS pour le texte du cinquième bouton.
4 Cliquez sur l’onglet Aperçu, désactivez les découpes en cliquant sur le bouton Masque les
découpes et les références, puis faites passer le pointeur de la souris sur les boutons dans la barre
de navigation.
Les boutons passent du bleu au gris lorsque vous positionnez le pointeur dessus.
Dans cette section, l’inspecteur des propriétés vous a permis de modifier le texte d’occurrences de
boutons individuelles sans affecter le symbole du bouton d’origine dans la Bibliothèque.
Cependant, si vous souhaitez appliquer la couleur rouge à tous les boutons, vous devez doublecliquer sur le symbole du bouton d’origine dans la Bibliothèque, sélectionner le rectangle,
remplacer la couleur de remplissage par rouge et cliquer sur Terminé. La mise à jour d’un symbole
de bouton dans la bibliothèque met à jour toutes les occurrences de ce symbole dans le document.
Modification du texte de l’occurrence du bouton
157
Affectation des URL et des noms aux boutons
Vous allez ensuite associer une URL unique ou un lien à chaque occurrence de bouton. Une URL,
ou Uniform Resource Locator, est l’adresse ou l’emplacement d’une page sur le Web. Il est très
simple d’associer des URL et des noms à des boutons grâce à l’inspecteur des propriétés.
1 Sélectionnez l’occurrence du bouton nommé SHOWROOM et entrez votre URL préférée dans
le champ Lien de l’inspecteur des propriétés.
Dans le cadre de ce didacticiel, vous pouvez utiliser une URL active quelconque. Dans un
site Web réel, vous entreriez l’URL vers laquelle vous voudriez que le bouton Showroom
renvoie l’utilisateur.
Assurez-vous de saisir l’URL d’un site Web existant, de manière à pouvoir tester les liens des
boutons ultérieurement.
2 Dans la zone de texte du bouton, tapez le mot Showroom.
Le fait d’attribuer un nom à chaque bouton permet de les identifier plus facilement après les
avoir exportés.
3 Associez une URL active et un nom unique à chacune des autres occurrences de bouton.
N’utilisez pas d’espaces ou de caractères ASCII étendus (les caractères ASCII de 129 à 256,
incluant des accents et des symboles mathématiques sont différents selon les ordinateurs)
lorsque vous nommez des occurrences de bouton. Par exemple, vous pouvez nommer
nouveautes_evenements l’occurrence du bouton News and Events.
4 Choisissez Fichier > Aperçu dans le navigateur > Aperçu dans [votre navigateur préféré]. Pour
tester les liens des boutons, vous devez prévisualiser le document dans un navigateur.
Remarque : Si votre navigateur n’est pas listé, vous devez d’abord sélectionner un navigateur en
choisissant Fichier > Aperçu dans le navigateur > Sélectionner le navigateur principal.
Votre barre de navigation est maintenant terminée. Dans les sections suivantes, vous allez
optimiser votre travail et exporter la barre de navigation dans votre site Dreamweaver MX 2004.
158
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
Optimisation de la barre de navigation
Avant d’exporter un document Fireworks, vous devez toujours l’optimiser. L’optimisation d’un
document assure l’exportation d’un graphisme avec la meilleure compression et la meilleure
qualité possibles.
1 Avec le fichier navbar.png ouvert dans la fenêtre de document, effectuez l’une des opérations
suivantes pour ouvrir le panneau Optimiser s’il n’est pas déjà ouvert.
■ Sélectionnez Fenêtre > Optimiser.
■ Si le panneau est réduit à droite de l’écran, cliquez sur le mot Optimiser afin de voir
l’intégralité du panneau.
2 Cliquez dans la fenêtre de document en dehors du document pour être sûr qu’aucun bouton
n’est sélectionné.
3 Sélectionnez l’option GIF Websnap 128 dans le menu déroulant Paramètres si elle n’est pas déjà
sélectionnée.
Les options du panneau se modifient afin de refléter le nouveau paramètre.
4 Cliquez sur le bouton Masque les découpes et les références dans le panneau Outils et cliquez
sur le bouton Aperçu dans l’angle supérieur gauche de la fenêtre de document.
La vue Aperçu affiche votre document tel qu’il apparaîtrait s’il était exporté avec les
paramètres actuels.
Dans l’angle inférieur gauche de la fenêtre Aperçu, Fireworks affiche la taille du fichier exporté
et une estimation du temps nécessaire pour afficher le graphique sur le Web.
Pour plus d’informations, voir Optimisation et exportation dans l’aide de Fireworks.
Optimisation de la barre de navigation
159
Définition des préférences HTML
Le langage HTML, ou Hypertext Markup Language, est la principale méthode utilisée sur
Internet pour créer et afficher des pages Web. Vous n’êtes pas obligé de comprendre le HTML
pour utiliser Fireworks, mais gardez à l’esprit que si des découpes de Fireworks sont exportées,
elles deviennent des cellules dans une table HTML.
Avant d’exporter le document la première fois, vous devez définir les préférences d’exportation
HTML.
1 Choisissez Fichier > Configuration HTML.
La boîte de dialogue Configuration HTML apparaît.
2
3
4
5
6
7
Les options que vous définissez dans cette boîte de dialogue affecteront tous les documents
Fireworks que vous créerez, à l’exception des options de l’onglet Propre au document.
Dans l’onglet Général, sélectionnez Dreamweaver HTML dans le menu déroulant
Style HTML.
Sélectionnez l’extension de fichier .htm.
Cliquez sur l’onglet Table.
L’onglet Table vous permet de changer les propriétés de la table HTML.
Dans le menu contextuel Espace avec, sélectionnez Table unique, pas de séparateurs.
Dans le menu contextuel Contenu, sélectionnez Aucun.
Cliquez sur l’onglet Propre au document.
L’onglet Propre au document vous permet de choisir une variété de préférences spécifiques au
document, y compris une convention de nomination personnalisée pour vos fichiers exportés.
Rappelez-vous que les options que vous définissez ici s’appliquent uniquement au document
Fireworks actif.
Remarque : Vous pouvez appliquer les paramètres de l’onglet Propre au document à tous les
nouveaux documents en cliquant sur le bouton Paramètres par défaut.
160
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
8 Sélectionnez Survol (au-dessus, enfoncé, au-dessus enfoncé) dans le menu contextuel Noms des
images.
9 Cliquez sur OK pour accepter les paramètres de l’onglet Propre au document, et fermez la boîte
de dialogue Configuration HTML.
Pour plus d’informations sur la définition des préférences, voir Exportation du fichier au
format HTML dans l’aide de Fireworks.
Exportation du document au format HTML
Votre document est maintenant prêt pour l’exportation.
1 Créez un dossier appelé navbar dans le dossier images de votre site Dreamweaver Trio Motors.
2 Avec le fichier navbar.png ouvert dans la fenêtre de document Fireworks, sélectionnez Fichier >
Exporter.
La boîte de dialogue Exporter s’affiche.
3 Recherchez le dossier navbar que vous avez créé à l’étape 1. Il doit se trouver dans le dossier
images du site Trio Motors.
4 Assurez-vous que le champ Nom du fichier affiche navbar.htm et que les menus déroulants
Type (Windows) ou Enregistrer sous (Macintosh) contiennent Documents HTML et Images.
Exportation du document au format HTML
161
5 Vérifiez que l’option Exporter le fichier HTML est sélectionnée dans le menu contextuel
HTML et que l’option Exporter les découpes est sélectionnée dans le menu contextuel
Découpes.
6 Sélectionnez Inclure les zones sans découpes et veillez à ce que l’option Placer les images dans
des sous-dossiers ne soit pas sélectionnée.
7 Cliquez sur Enregistrer.
Les fichiers de la barre de navigation sont exportés vers le dossier navbar sur votre
site Dreamweaver.
Rappelez-vous que le fichier PNG est votre fichier source ou fichier de travail. Même si vous
avez exporté votre document au format HTML et GIF, vous devez enregistrer le fichier PNG
de manière à ce que toute modification apportée se reflète également dans le fichier source.
8 Choisissez Fichier > Enregistrer pour enregistrer les modifications dans le fichier PNG.
Affichage des fichiers exportés dans le panneau Fichiers de
Dreamweaver
Maintenant vous pouvez examiner la liste des fichiers exportés par Fireworks. Les nouveaux
fichiers créés pendant le processus d’exportation s’affichent dans le dossier navbar dans votre site
Dreamweaver.
1 Dans Dreamweaver, sélectionnez le site Trio Motors dans le panneau Fichiers.
2 Développez le dossier navbar en cliquant sur le signe Plus (+) à gauche du dossier.
Une longue liste de fichiers de barre de navigation, ainsi qu’un fichier navbar.htm s’affiche.
162
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
Le fichier navbar.htm contient tout le code HTML que vous aurez besoin d’insérer dans votre
page Dreamweaver, y compris le code JavaScript chargé des différents états des boutons de la
barre de navigation. Fireworks a également exporté tous les fichiers graphiques des boutons. La
liste contient plusieurs fichiers GIF, dont un pour chacun des états du bouton.
Affichage du fichier HTML de Fireworks dans un navigateur
Maintenant que vous avez examiné les fichiers exportés, vous êtes prêt à tester la barre de
navigation dans un navigateur.
1 Ouvrez un navigateur Web et choisissez Fichier > Ouvrir (Internet Explorer) ou Fichier >
Ouvrir un fichier (Netscape). Puis, recherchez le fichier navbar.htm que vous avez exporté vers
le dossier navbar de votre site Dreamweaver.
Vous pouvez également rechercher le dossier navbar de votre site Dreamweaver à partir de votre
bureau et faire glisser le fichier navbar.htm vers un navigateur Web ouvert.
Votre barre de navigation s’affiche dans la fenêtre du navigateur.
2 Dans le navigateur, cliquez sur les boutons de la barre de navigation pour tester les liens. Si vous
avez ajouté des liens actifs aux boutons (tels que http://www.macromedia.com/fr/), votre
navigateur Web affiche les pages correspondant au bouton sur lequel vous cliquez.
Affichage du fichier HTML de Fireworks dans un navigateur
163
3 Recherchez et exécutez la commande permettant d’afficher le code source pour la page. La
plupart des navigateurs Web permettent d’afficher le code source avec une commande telle que
Affichage > Source.
4 Parcourez le code source. Si vous connaissez les langages HTML et JavaScript, vous pouvez
analyser le code créé par Fireworks pour voir comment il agit. Si vous ne connaissez pas ces
langages, vous pouvez apprécier le travail que Fireworks a fait pour vous.
Des versions terminées des fichiers que vous avez créés tout au long de ce didacticiel sont
disponibles dans le répertoire trio_motors_complete du CD de Macromedia Studio MX 2004.
Pour localiser ce répertoire, insérez votre CD de Macromedia Studio MX 2004, sélectionnez
l’option d’exploration du contenu du CD, puis sélectionnez le dossier d’exemples Samples. Si
vous avez copié le dossier d’exemples sur votre disque dur pour le didacticiel précédent, les fichiers
terminés se trouvent déjà sur votre ordinateur.
Pour plus d’informations sur les procédures décrites dans ce didacticiel, voir l’aide de Fireworks.
164
Didacticiel 4 : Création d’une barre de navigation avec Fireworks
DIDACTICIEL 5
Création de médias enrichis avec Fireworks
et Flash
Ce didacticiel vous explique comment créer une animation Flash simple à l’aide de Macromedia
Fireworks MX 2004 et de Macromedia Flash MX 2004. Bien que ce didacticiel ait été conçu pour
des personnes n’ayant jamais utilisé ces produits, nous vous conseillons de vous familiariser tout
d’abord avec la scène, le scénario et les outils de Flash. Si vous ne l’avez déjà fait, suivez les leçons
fournies avec Macromedia Flash avant de continuer. Vous trouverez ces leçons dans Flash, en
cliquant sur Aide > Aide et en sélectionnant l’onglet Comment.
Ce didacticiel contient les sections suivantes :
A propos des animations Flash, page 165
Examen des fichiers de téléchargement Fireworks, page 166
Création d’un document Flash, page 167
Importation et conversion du fichier Fireworks, page 168
Création d’un calque de texte et d’un symbole, page 170
Création d’images-clés, page 172
Définition de la transparence alpha, page 172
Création d’interpolations de mouvement, page 174
Publication du fichier FLA final, page 175
A propos des animations Flash
Vous pouvez créer une animation dans un document Flash en modifiant le contenu d’images
successives. Vous pouvez faire pivoter un objet, augmenter ou diminuer sa taille, modifier sa
couleur, modifier sa forme, effectuer des fondus en entrée ou en sortie ou le déplacer sur la scène.
Les modifications peuvent être indépendantes ou combinées. Par exemple, vous pouvez faire
pivoter un objet et effectuer un fondu en entrée lorsqu’il se déplace sur la scène.
Dans Flash, vous pouvez créer une séquence d’animation de deux manières différentes : image par
image ou par interpolation. Dans l’animation interpolée, vous créez l’image de début et l’image de
fin et laissez Flash créer les images intermédiaires. Flash modifie la taille, la rotation, la couleur ou
d’autres attributs de l’objet de façon égale entre la première et la dernière image pour créer une
impression de mouvement. Dans l’animation image par image, vous créez le contenu de chaque
image.
165
Dans ce didacticiel, vous serez amené à créer une animation par interpolation. L’animation
interpolée est un moyen efficace de créer du mouvement et des modifications progressives tout en
conservant la taille de fichier basse. Dans une animation interpolée, Flash stocke uniquement les
valeurs des modifications entre les images.
Chaque scène d’un document Macromedia Flash peut être composée d’autant de calques que
vous le souhaitez. Lorsque vous créez votre animation, vous utilisez des calques et des dossiers de
calques afin d’organiser les composants d’une séquence d’animation et de séparer les objets animés
de sorte qu’ils ne s’effacent pas, ne se connectent pas ou ne se segmentent pas mutuellement. Si
vous voulez que Flash interpole le mouvement de plusieurs groupes ou symboles à la fois, vous
devez mettre chacun d’eux sur un calque différent. En règle générale, le calque d’arrière-plan
contient des illustrations statiques, alors que les autres calques contiennent un objet animé
distinct.
Lorsqu’un document comporte plusieurs calques, il peut être difficile d’assurer le suivi des objets
et de les modifier sur un ou deux de ces calques. Cette tâche est plus facile si vous travaillez avec le
contenu d’un seul calque à la fois. Les dossiers de calques permettent d’organiser les calques en
groupes faciles à gérer, que vous pouvez développer ou réduire afin d’afficher uniquement les
calques concernant la tâche en cours. Au cours de ce didacticiel, vous devrez créer deux calques,
ainsi qu’une interpolation de mouvement dans chacun d’eux.
Pour tout complément d’information, voir Création de mouvement dans l’aide Utilisation de Flash.
Examen des fichiers de téléchargement Fireworks
Examinez attentivement les exemples de fichiers du didacticiel avant d’entamer la création de
votre animation Flash. Les fichiers d’exemple sont disponibles dans le dossier d’exemples Samples
du CD de Macromedia Studio MX 2004.
Si vous avez copié le dossier d’exemples sur votre disque dur lors d’un didacticiel précédent, ces
fichiers se trouvent alors déjà sur votre ordinateur. Si vous n’avez pas encore copié le dossier
d’exemples sur votre disque dur, insérez le CD de Macromedia Studio MX 2004 dans votre
ordinateur et sélectionnez l’option d’exploration du contenu du CD dans l’angle inférieur droit
de l’écran d’installation. Copiez le dossier d’exemples Samples sur votre disque dur (par exemple
sur votre Bureau ou dans le répertoire principal du site Dreamweaver que vous avez créé au
Chapitre 6, Configuration d’un exemple de site ColdFusion).
Ouvrez Fireworks et recherchez le premier exemple de fichier en sélectionnant Fichier > Ouvrir.
Sélectionnez le fichier flash_car.png se trouvant dans le dossier d’exemples, puis cliquez
sur Ouvrir.
166
Didacticiel 5 : Création de médias enrichis avec Fireworks et Flash
Le fichier s’ouvre dans votre fenêtre de document.
Les dimensions de ce document sont de 650 x 175 pixels. Ces dimensions correspondent aux
dimensions que vous avez définies pour la cellule de tableau du fondu de l’animation Flash de la
page index.cfm pour Trio Motors. Pour plus de détails, voir Création d’une mise en forme basée sur
un tableau dans Dreamweaver, page 131.
Le fichier flash_car.png contient du texte, l’image importée d’une voiture et une image d’arrièreplan. Pour vous faire gagner du temps, ce fichier a été préalablement créé. Cependant, si vous
voulez savoir exactement comment créer ce genre de graphique, reportez-vous à la section
Création d’une bannière dans Fireworks, page 141. Ce didacticiel présente les méthodes
d’importation d’images et d’ajout de texte.
En outre, le fichier flash_car.png a été exporté au format GIF et se trouve également dans le
dossier d’exemples. Dans les sections suivantes, vous utiliserez le fichier flash_car.gif pour créer
l’animation Flash de la page index.cfm pour Trio Motors.
Création d’un document Flash
1 Dans Flash, sélectionnez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche.
2 Dans l’onglet Général, sélectionnez Document Flash et cliquez sur OK.
Un nouveau document apparaît sur la scène.
3 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur le bouton Taille.
Création d’un document Flash
167
La boîte de dialogue Propriétés du document apparaît.
4 Dans cette boîte de dialogue, définissez les paramètres suivants :
Entrez 650 px dans la zone de texte de dimension de largeur.
Entrez 175 px dans la zone de texte de dimension de hauteur.
■ Laissez l’option Couleur d’arrière-plan définie sur la couleur par défaut (blanc).
■ Laissez l’option Cadence définie sur 12 images/seconde.
5 Cliquez sur OK.
Le document apparaît avec les dimensions spécifiées (650 x 175 pixels) et avec un arrière-plan
blanc.
6 Si le document n’est pas centré dans la fenêtre de document, utilisez les barres de défilement
situées dans la partie inférieure et à droite de la scène pour centrer le document.
Vous pouvez ainsi visualiser l’intégralité du document. Vous pouvez également changer le
zoom de la zone de document en entrant ou en sélectionnant des niveaux de zoom différents.
Pour ce faire, utilisez le menu déroulant du zoom au niveau du coin supérieur droit de
la fenêtre de document.
7 Enregistrez le nouveau fichier (Fichier > Enregistrer) sous le nom flash_car.fla.
Dans Chapitre 6, Configuration d’un exemple de site ColdFusion, vous avez créé un dossier
appelé flash au sein du site. Enregistrez le nouveau fichier flash_car.fla dans ce dossier. Il est
judicieux de conserver tous les fichiers FLA de votre site dans un emplacement central.
■
■
Importation et conversion du fichier Fireworks
Importez l’exemple de fichier flash_car.gif et convertissez-le en symbole. Un symbole est un
graphique, un bouton ou un clip que vous créez une seule fois dans Macromedia Flash et que vous
pouvez réutiliser dans votre animation ou dans d’autres animations. L’utilisation de symboles
réduit considérablement la taille des fichiers. Tout symbole que vous créez devient
automatiquement un élément de la bibliothèque du document en cours.
1 Une fois votre nouveau fichier flash_car.fla ouvert dans Flash, sélectionnez Fichier > Importer >
Importer dans la scène.
2 Recherchez l’exemple de fichier flash_car.gif, sélectionnez-le et cliquez sur Ouvrir.
Pour plus de détails, voir Examen des fichiers de téléchargement Fireworks, page 166.
168
Didacticiel 5 : Création de médias enrichis avec Fireworks et Flash
Le fichier flash_car.gif apparaît au centre de la scène. Le fichier apparaît également dans la
bibliothèque Flash (Fenêtre > Bibliothèque).
Remarque : Si l’image n’est pas parfaitement centrée sur la scène, utilisez le panneau Aligner
(Fenêtre > Panneaux de conception graphique > Aligner) pour centrer l’image. Avec l’image
sélectionnée, assurez-vous que le bouton Vers la scène est sélectionné dans le panneau Aligner,
puis cliquez sur les boutons Aligner les centres horizontalement et Aligner les centres
verticalement. Vous pouvez également utiliser les touches fléchées de votre clavier pour déplacer
l’image vers le haut, vers le bas, vers la gauche ou vers la droite par incréments d’un pixel.
L’image bitmap importée est sélectionnée sur la scène (entourée d’un trait gris). Prenez garde de
ne pas cliquer sur la scène une fois que vous y avez importé l’image. Pour passer à l’étape
suivante, l’image doit être sélectionnée.
3 Choisissez Modifier > Convertir en symbole.
La boîte de dialogue Convertir en symbole apparaît.
4 Entrez Symbole voiture dans la zone de texte Nom.
5 Sélectionnez Graphique dans la liste de boutons radio Comportement.
6 Cliquez sur OK.
L’image bitmap importée est convertie en symbole sur la scène. Le nouveau symbole apparaît
également dans la Bibliothèque (Fenêtre > Bibliothèque).
Remarque : Si le symbole n’est pas parfaitement centré sur la scène, utilisez le panneau Aligner
(Fenêtre > Panneaux de conception graphique > Aligner) ou les touches fléchées de votre clavier
pour centrer le symbole. Pour plus d’informations, reportez-vous à l’étape 2.
Importation et conversion du fichier Fireworks
169
7 Examinez le scénario (Fenêtre > Scénario).
Le document contient désormais un calque, appelé Calque 1. Ce calque contient le symbole de
la voiture que vous avez créé.
8 Double-cliquez sur « Calque 1 » dans le scénario. Vous pouvez alors modifier le nom du calque.
9 Renommez le calque voiture et appuyez sur la touche Entrée (Windows) ou Retour
(Macintosh).
10 Enregistrez le fichier (Fichier > Enregistrer). Lorsque vous travaillez, il est judicieux
d’enregistrer souvent vos fichiers.
Création d’un calque de texte et d’un symbole
Vous devrez ensuite créer un autre calque destiné à contenir du texte et le convertir en symbole.
Le contenu du calque de texte et du calque de la voiture apparaîtront séparément dans
l’animation Flash.
1 Sélectionnez Insertion > Scénario > Calque.
Un nouveau calque (Calque 2) apparaît au-dessus du calque de la voiture dans le scénario.
2 Cliquez deux fois sur le nom du calque, renommez le calque texte et appuyez sur Entrée
(Windows) ou Retour (Macintosh).
3 Cliquez une fois sur le calque de texte pour sélectionner l’intégralité du calque.
4 Cliquez sur l’outil Texte du panneau Outils.
5 Cliquez une fois sur la scène située sous le texte « ZX2004 ».
Un nouveau bloc de texte accompagné d’une poignée ronde apparaît.
La poignée ronde indique que le bloc de texte peut être agrandi.
6 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), procédez de la manière suivante :
170
Didacticiel 5 : Création de médias enrichis avec Fireworks et Flash
■
■
■
■
■
■
Sélectionnez une police dans le menu déroulant Police. Dans ce didacticiel, la police Arial
est sélectionnée.
Entrez 14 dans la zone de texte Taille de police.
Choisissez bleu sombre (#000033) dans le menu contextuel Couleur.
Assurez-vous que le bouton Gras est désélectionné.
Cliquez sur le bouton Aligner à gauche.
Entrez 1 dans la zone de texte Espacement des caractères.
7 Avant de saisir du texte, cliquez à l’intérieur du bloc de texte si le point d’insertion n’y clignote
pas.
8 Entrez le texte Environmentally smart et un point (.) sur la première ligne du bloc de texte, puis
appuyez sur Entrée (Windows) ou Retour (Macintosh).
9 Entrez le texte Starting at $540/month sur la deuxième ligne du bloc de texte.
Remarque : Le texte du bloc de texte est différent du texte de la version finale de l’animation
Flash. Ne vous en inquiétez pas. Vous le modifierez dans un autre didacticiel.
10 Sélectionnez la deuxième ligne du bloc de texte, entrez 12 dans la zone de texte Taille de police
de l’inspecteur des propriétés, puis appuyez sur Entrée (Windows) ou Retour (Macintosh).
11 Cliquez en dehors du bloc de texte afin d’appliquer votre saisie de texte.
12 Si nécessaire, cliquez sur l’outil Flèche du panneau Outils, sélectionnez le bloc de texte et faites-
le glisser à l’emplacement indiqué sur l’illustration précédente. Vous pouvez également utiliser
les touches fléchées de votre clavier pour le déplacer vers le haut, le bas, la gauche ou la droite
par incréments d’un pixel. Si vous maintenez la touche Maj enfoncée pendant que vous utilisez
les touches fléchées, l’objet se déplace par incréments de 10 pixels.
13 Sélectionnez le bloc de texte, puis choisissez Modifier > Convertir en symbole.
14 Dans la boîte de dialogue Convertir en symbole, entrez Symbole texte dans la zone de texte
Nom, sélectionnez le bouton Graphique dans la liste et cliquez sur OK.
Le bloc de texte est converti en symbole et apparaît dans le panneau Bibliothèque (Fenêtre >
Bibliothèque).
Création d’un calque de texte et d’un symbole
171
Création d’images-clés
Une image-clé est une image, indiquée sur le scénario, dans laquelle vous définissez les
changements d’une animation. Lorsque vous créez une animation image par image, chaque image
est une image-clé. Dans une animation par interpolation, vous définissez les images-clés à certains
points importants de l’animation et laissez Flash créer le contenu des images intermédiaires. Flash
affiche les images interpolées d’une animation interpolée en bleu ou vert clair avec une flèche
tracée entre les images-clés.
Pour le moment, votre fichier FLA contient deux calques : voiture et texte. Ces calques
apparaîtront séparément dans votre animation finale. Les images-clés vous permettent de définir
précisément le moment où chaque calque commence à apparaître. Par défaut, la première image
des deux calques est une image-clé qui présente le contenu que vous y avez ajouté.
Vous allez maintenant ajouter des images-clés qui définiront les points importants de l’animation.
1 Cliquez sur le calque de la voiture dans le scénario afin de le sélectionner.
2 Sélectionnez l’image 24.
3 Procédez de l’une des manières suivantes :
Sélectionnez Insertion > Scénario > Image-clé.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis choisissez Insérer une image-clé.
■ Appuyez sur F6 sur le clavier de votre ordinateur.
Un point, désignant une image-clé, apparaît.
Sélectionnez l’image 36 du calque de la voiture.
Répétez l’étape 3 pour insérer une image-clé.
Cliquez sur le calque de texte dans le scénario afin de le sélectionner.
Répétez l’étape 3 pour insérer des images-clés aux images 16 et 36 du calque de texte.
Votre scénario contient désormais six images-clés.
■
4
5
6
7
Définition de la transparence alpha
Dans Macromedia Flash, vous pouvez faire apparaître ou disparaître lentement une occurrence
d’un symbole en modifiant la valeur alpha de l’occurrence. L’option Alpha ajuste la transparence
d’une occurrence, de transparente (0 %) à complètement saturée ou visible (100 %).
Par exemple, si vous souhaitez que les deux occurrences de la scène (voiture et texte) soient
complètement transparentes au début de l’animation Flash. Les deux occurrences apparaissent
progressivement et séparément lors de la lecture de l’animation. A l’image 24, l’occurrence de la
voiture est complètement visible. A l’image 36, l’occurrence de texte est complètement visible.
172
Didacticiel 5 : Création de médias enrichis avec Fireworks et Flash
Vous allez maintenant définir les propriétés alpha de façon à régler les niveaux de transparence de
l’occurrence aux images-clés individuelles.
1 Sélectionnez l’image 1 du calque de la voiture, puis cliquez une fois sur l’occurrence de la voiture
sur la scène afin de la sélectionner.
L’inspecteur des propriétés affiche les propriétés de l’occurrence du symbole de la voiture.
2 Sélectionnez Alpha dans le menu contextuel Couleur, entrez 0 % comme valeur alpha et
appuyez sur Entrée (Windows) ou Retour (Macintosh).
L’occurrence de la voiture devient transparente.
3 Sélectionnez l’image 24 du calque de la voiture, puis cliquez une fois sur l’occurrence de la
voiture afin de la sélectionner.
4 Sélectionnez Alpha dans le menu contextuel Couleur, entrez 100 % comme valeur alpha et
appuyez sur Entrée (Windows) ou Retour (Macintosh).
L’occurrence de la voiture réapparaît.
5 Sélectionnez l’image 36 du calque de la voiture et assurez-vous que la valeur alpha est définie sur
100 %.
6 Sélectionnez l’image 1 du calque de texte, puis cliquez une fois sur l’occurrence du texte afin de
la sélectionner.
L’inspecteur des propriétés affiche les propriétés de l’occurrence du symbole du texte.
7 Sélectionnez Alpha dans le menu contextuel Couleur, entrez 0 % comme valeur alpha et
appuyez sur Entrée (Windows) ou Retour (Macintosh).
L’occurrence du texte devient transparente.
8 Sélectionnez l’image 16 du calque de texte, puis cliquez une fois sur l’occurrence du texte afin
de la sélectionner.
9 Sélectionnez Alpha dans le menu contextuel Couleur, entrez 0 % comme valeur alpha et
appuyez sur Entrée (Windows) ou Retour (Macintosh).
L’occurrence du texte devient transparente.
10 Sélectionnez l’image 36 du calque de texte, puis cliquez une fois sur l’occurrence du texte afin
de la sélectionner.
11 Sélectionnez Alpha dans le menu contextuel Couleur, entrez 100 % comme valeur alpha et
appuyez sur Entrée (Windows) ou Retour (Macintosh).
L’occurrence du texte réapparaît dans la dernière image du scénario.
Les transparences de vos occurrences sont maintenant définies. L’occurrence de la voiture est
transparente dans les images 1 à 23 et devient visible à l’image 24. L’occurrence du texte est
transparente dans les images 1 à 35 et devient visible à l’image 36. Dans la section suivante, vous
serez amené à créer une interpolation de mouvement de façon à ce que les occurrences de la
voiture et du texte apparaissent progressivement.
Définition de la transparence alpha
173
Création d’interpolations de mouvement
Maintenant que vous avez défini les images de début et de fin de votre animation (de transparente
à visible), vous pouvez créer une interpolation de mouvement et laisser Flash créer toutes les
images qui apparaîtront entre ces images-clés. L’interpolation de mouvement ne se limite pas
uniquement à l’insertion de « mouvements ». Elle consiste également à insérer des transparences.
1 Cliquez sur le calque de la voiture dans le scénario afin de le sélectionner.
2 Cliquez n’importe où sur le scénario entre les deux premières images-clés (images 1 et 24).
3 Procédez de l’une des manières suivantes :
Sélectionnez Insertion > Scénario > Créer une interpolation de mouvement.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis sélectionnez Créer une interpolation de mouvement.
L’arrière-plan devient bleu ou vert clair et une flèche apparaît entre les deux images-clés.
4 Répétez les étapes 1 à 3 pour les parties non interpolées du scénario afin de créer des
interpolations de mouvement entre les images suivantes :
■ images 24 à 36 du calque de la voiture ;
■ images 1 à 16 du calque de texte ;
■ images 16 à 36 du calque de texte.
Lorsque vous avez terminé, votre scénario contient quatre interpolations de mouvement qui
s’étendent entre les images-clés que vous avez insérées auparavant.
■
■
5 Enregistrez le fichier (Fichier > Enregistrer).
6 Testez votre animation en sélectionnant Contrôle > Tester l’animation.
Flash exporte l’animation au format SWF et lance la lecture de l’animation en utilisant
Flash Player.
Une fois la lecture de l’animation terminée, celle-ci se relance une deuxième fois, ou
continuellement « en boucle ». Par défaut, Flash lit toutes les animations en boucle. Ne vous en
inquiétez pas. La section suivante vous explique comment définir l’animation de sorte qu’elle
ne soit lue qu’une seule fois à la publication.
7 Fermez le fichier SWF avant de passer à la section suivante.
174
Didacticiel 5 : Création de médias enrichis avec Fireworks et Flash
Publication du fichier FLA final
Vous pouvez maintenant publier votre animation pour la lecture. Par défaut, la commande
Publier crée le fichier SWF Flash et un document HTML dont le code insère votre
animation Flash dans une fenêtre de navigateur.
1 Choisissez Fichier > Paramètres de publication.
La boîte de dialogue Paramètres de publication apparaît.
2 Acceptez les sélections par défaut de l’onglet Formats (Flash et HTML).
3 Cliquez sur l’onglet Flash.
4 (Facultatif) Dans le menu contextuel Version, sélectionnez Flash Player 5. Cette option permet
aux utilisateurs de Flash Player version 5 ou supérieure de visualiser votre animation.
5 Cliquez sur l’onglet HTML.
6 Assurez-vous que la case à cocher Détecter la version de Flash est désélectionnée.
Publication du fichier FLA final
175
7 Dans la section Lecture, désélectionnez Boucle.
8 Acceptez les autres paramètres par défaut et cliquez sur Publier.
Par défaut, Flash publie les fichiers SWF et HTML dans le même répertoire que le fichier FLA.
Les fichiers SWF et HTML sont alors publiés dans le dossier Flash de votre site Macromedia
Dreamweaver MX 2004.
9 Cliquez sur OK pour fermer la boîte de dialogue Paramètres de publication.
Vous pouvez lancer la lecture de votre animation Flash en cliquant deux fois sur l’icône
flash_car.swf que vous avez publiée dans le dossier Flash de votre site Dreamweaver. Notez,
cependant, que l’animation se lit toujours en boucle. Cela est dû au fait que vous avez défini
l’animation de façon à ce qu’elle ne boucle pas dans le code HTML exporté mais pas dans
l’animation Flash elle-même. Pour visualiser le code, cliquez deux fois sur le fichier flash_car.html
dans le panneau Fichiers de Dreamweaver, cliquez sur le bouton Affichage de code dans l’angle
supérieur gauche de la fenêtre de document de Dreamweaver, puis recherchez la balise EMBED
qui contient le code suivant : loop = “false”
Des versions terminées des fichiers que vous avez créés tout au long de ce didacticiel sont
disponibles dans le dossier d’exemples que vous avez copié sur votre disque dur à partir du CD de
Macromedia Studio MX 2004. Les versions terminées des fichiers se trouvent dans le répertoire
trio_motors_complete.
Pour plus d’informations sur les procédures décrites dans ce didacticiel, voir l’aide Utilisation
de Flash.
176
Didacticiel 5 : Création de médias enrichis avec Fireworks et Flash
DIDACTICIEL 6
Assemblage et modification d’actifs Studio
Ce didacticiel vous explique comment assembler et modifier les actifs d’un site dans
Macromedia Dreamweaver MX 2004. Au cours de ce didacticiel, vous serez amené à ajouter du
contenu à la page index.cfm du site de Trio Motors en utilisant les actifs créés dans Didacticiel 3,
Création d’une bannière dans Fireworks Didacticiel 4, Création d’une barre de navigation avec
Fireworks et Didacticiel 5, Création de médias enrichis avec Fireworks et Flash Si vous n’avez pas
suivi ces didacticiels ni enregistré les produits finis dans votre site Dreamweaver, faites-le avant de
continuer.
Ce didacticiel contient les sections suivantes :
Insertion de la barre de navigation Fireworks, page 177
Modification de la bannière Fireworks, page 179
Insertion de l’animation Flash, page 180
Lecture de l’animation Flash, page 182
Modification de l’animation Flash, page 182
Dernière étape de création de la page, page 184
Insertion de la barre de navigation Fireworks
Une fois les actifs finalisés pour la page index.cfm de Trio Motors, vous pouvez les placer en
suivant la mise en forme créée dans Didacticiel 2, Création d’une mise en forme basée sur un tableau
dans Dreamweaver
Tout d’abord, vous devez insérer la barre de navigation Macromedia Fireworks MX 2004 en
sélectionnant le fichier HTML exporté pour la barre de navigation. Lorsque vous insérez le
fichier HTML dans votre document, Dreamweaver écrit le code HTML et JavaScript requis pour
que la barre de navigation fonctionne.
1 Ouvrez le fichier index.cfm dans la fenêtre de document de Dreamweaver.
2 Placez le point d’insertion dans l’espace que vous avez créé entre la bannière et le
deuxième tableau.
Remarque : La première cellule du deuxième tableau est grise.
3 Sélectionnez Insérer > Objets image > HTML Fireworks.
La boîte de dialogue Insérer du HTML Fireworks s’affiche.
177
4 Cliquez sur le bouton Parcourir et recherchez le fichier navbar.htm dans le dossier images/
navbar de votre site Dreamweaver.
5 Sélectionnez le fichier navbar.htm, puis cliquez sur Ouvrir.
6 Cliquez sur OK dans la boîte de dialogue Insérer du HTML Fireworks.
Dreamweaver insère le HTML Fireworks dans l’espace situé entre le premier et le deuxième
tableau de mise en forme de votre page.
Remarque : Si, après avoir inséré le code HTML Fireworks, un espace supplémentaire apparaît
sous la barre de navigation, placez le point d’insertion en dessous de la barre de navigation et
supprimez l’espace supplémentaire manuellement.
Si vous cliquez sur les boutons de navigation, vous vous apercevrez que Dreamweaver a placé la
barre de navigation dans son propre tableau. Le code de ce tableau provient du fichier HTML
Fireworks que vous avez créé.
178
Didacticiel 6 : Assemblage et modification d’actifs Studio
Modification de la bannière Fireworks
Vous allez ensuite modifier la bannière Fireworks en en modifiant le texte. A l’aide des fonctions
d’intégration de Dreamweaver et de Fireworks, vous pouvez rapidement et facilement apporter
des modifications sans quitter l’espace de travail de Dreamweaver.
1 Avec la page index.cfm ouverte dans la fenêtre de document, sélectionnez la bannière Fireworks.
L’inspecteur des propriétés (Fenêtre > Propriétés) affiche les propriétés de l’image.
2 Cliquez sur le bouton Modifier de l’inspecteur des propriétés.
Dreamweaver lance Fireworks en mode Edition depuis Dreamweaver. Notez que Fireworks
ouvre le fichier source, banner_graphic.png, et non le fichier exporté, banner_graphic.gif.
Remarque : Si une boîte de dialogue Fireworks s’affiche vous demandant de choisir entre la
structure de tableau du document HTML et la structure de tableau PNG, sélectionnez la
structure PNG.
3 Cliquez sur l’outil Pointeur et, en maintenant la touche Maj enfoncée, cliquez sur la flèche et
sur le bloc de texte contenant le texte TRIO MOTORS.
4 Faites glisser les éléments sélectionnés vers la gauche afin que la flèche se trouve au centre de la
5
6
7
8
bannière. Si vous maintenez la touche Maj enfoncée pendant que vous utilisez la touche fléchée
vers la gauche, les éléments sélectionnés se déplacent par incrément de 10 pixels.
Cliquez une fois à l’extérieur du document pour désélectionner les éléments.
Sélectionnez l’outil Texte et cliquez à droite du S du mot MOTORS. Le bloc de texte est ainsi
sélectionné et le point d’insertion est placé à l’emplacement où vous souhaitez apporter une
modification.
Supprimez le S, ajoutez un espace et saisissez COMPANY en majuscules de sorte que le texte
du bloc soit TRIO MOTOR COMPANY.
Cliquez une fois en dehors du bloc de texte afin d’appliquer votre saisie de texte.
9 Utilisez l’outil Pointeur pour à nouveau cliquer tout en maintenant la touche Maj enfoncée sur
la flèche et le bloc de texte.
Modification de la bannière Fireworks
179
10 Si nécessaire, faites glisser les deux éléments sélectionnés vers la droite pour les réaligner avec le
côté droit de la bannière. Gardez à l’esprit que vous pouvez également utiliser les touches
fléchées de votre clavier pour déplacer les éléments vers le haut, vers le bas, vers la gauche ou vers
la droite par incréments d’un pixel. Maintenez la touche Maj enfoncée tout en appuyant sur la
touche fléchée pour déplacer les éléments sélectionnés par incréments de 10 pixels.
11 Cliquez sur Terminé.
Fireworks enregistre et exporte les modifications apportées. Dreamweaver affiche le fichier mis
à jour dans la fenêtre de document.
Insertion de l’animation Flash
Vous allez ensuite insérer l’animation Macromedia Flash MX 2004 de Trio Motors dans la page
index.cfm. Pour insérer l’animation Flash, vous devez insérer le code HTML de l’animation dans
la page Dreamweaver.
Si vous savez utiliser le code HTML, vous pouvez supprimer le texte de l’espace réservé du
FLASH MOVIE FADE-IN, copier le code depuis le fichier flash_car.html et collez le code dans
votre document Dreamweaver. Cependant, la méthode la plus simple pour insérer du contenu
Flash est simplement d’insérer le fichier SWF dans la page. Lorsque vous insérez un fichier SWF
dans Dreamweaver, ce dernier écrit le code HTML de Flash nécessaire.
1 Lorsque la page index.cfm est ouverte dans la fenêtre de document de Dreamweaver,
sélectionnez le texte de l’espace réservé pour Flash et supprimez-le.
2 Sélectionnez Insérer > Supports > Flash.
La boîte de dialogue Sélectionner un fichier s’affiche.
180
Didacticiel 6 : Assemblage et modification d’actifs Studio
3 Recherchez le fichier flash_car.swf dans le dossier Flash de votre site Dreamweaver, sélectionnez
le fichier, puis cliquez sur OK.
Dreamweaver insère le fichier Flash et écrit le code HTML nécessaire pour la lecture du fichier
dans un navigateur.
Un espace réservé pour du contenu Flash, plutôt qu’une séquence de l’animation, s’affiche dans
la fenêtre de document. Le code HTML pointe vers le fichier SWF, flash_car.swf. Lorsqu’un
utilisateur charge la page index.cfm, le navigateur lit le fichier SWF.
4 Une fois l’espace réservé du contenu Flash sélectionné, désélectionnez Boucle dans l’inspecteur
des propriétés.
Par défaut, Dreamweaver ne génère pas le code loop = "false" dans la balise EMBED. Le
fait de désélectionner Boucle dans l’inspecteur des propriétés limite à une fois la lecture de
l’animation dans le navigateur de l’utilisateur.
Remarque : Si vous avez désélectionné Boucle dans la boîte de dialogue Paramètres de
publication de Flash avant de publier votre contenu, le fichier flash_car.html que vous avez publié
contient le code loop = "false" dans la balise embed. Lorsque vous insérez manuellement le
code HTML depuis ce fichier dans Dreamweaver, la case à cocher Boucle est déjà
désélectionnée dans l’inspecteur des propriétés. De plus, tous les paramètres que vous avez
spécifié dans la boîte de dialogue Paramètres de publication de Flash s’affichent dans le code.
Insertion de l’animation Flash
181
Lecture de l’animation Flash
Les fonctions d’intégration de Dreamweaver et de Flash vous permettent de lire votre
contenu Flash dans la fenêtre de document de Dreamweaver.
1 Lorsque la page index.cfm est ouverte dans la fenêtre de document, cliquez sur l’espace réservé
du contenu Flash pour le sélectionner.
2 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur le bouton Lire.
Remarque : Si vous ne voyez pas le bouton Lire, cliquez sur la flèche d’extension dans l’angle
inférieur droit de l’inspecteur des propriétés.
L’animation est lue dans la fenêtre de document de Dreamweaver. L’animation est lue une seule
fois parce que vous avez désélectionné Boucle dans l’inspecteur des propriétés.
Modification de l’animation Flash
Maintenant que vous avez lancé la lecture de l’animation dans Dreamweaver, vous allez
pouvoir la modifier en en changeant le texte. A l’aide des fonctions d’intégration de
Dreamweaver et de Flash, vous pouvez rapidement et facilement modifier votre contenu Flash
sans quitter l’espace de travail de Dreamweaver.
1 Lorsque la page index.cfm est ouverte dans la fenêtre de document, sélectionnez l’espace réservé
du contenu Flash.
2 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur le bouton Modifier.
Dreamweaver lance Flash en mode Edition depuis Dreamweaver.
182
Didacticiel 6 : Assemblage et modification d’actifs Studio
Flash ouvre le fichier source flash_car.fla et non le fichier SWF exporté.
Remarque : Si Dreamweaver vous demande de spécifier un emplacement pour le fichier source
flash_car.fla, recherchez-le dans le dossier Flash de votre site Dreamweaver et sélectionnez-le.
3 Dans le panneau Bibliothèque (Fenêtre > Bibliothèques), double-cliquez sur l’icône Symbole
4
5
6
7
texte.
Le symbole apparaît sur la scène en mode d’édition de symbole.
Cliquez sur l’outil Texte, puis cliquez entre le 5 et le 4 dans « $540 ». Cette opération
sélectionne le bloc de texte et place le point d’insertion à l’endroit où vous voulez apporter les
modifications.
Supprimez le 5 et remplacez-le par un 4 de façon à ce que le texte devienne « $440/month ».
Cliquez une fois en dehors du bloc de texte afin d’appliquer votre saisie de texte.
Cliquez sur le lien Séquence pour revenir à la scène principale.
8 Cliquez sur Terminé.
Flash enregistre les modifications apportées et exporte le nouveau fichier SWF. Vous pouvez
tester la nouvelle animation en sélectionnant l’espace réservé du contenu Flash dans la fenêtre
de document de Dreamweaver, puis en cliquant sur le bouton Lire dans l’inspecteur des
propriétés.
Modification de l’animation Flash
183
Dernière étape de création de la page
Maintenant que vous avez fini d’assembler et de modifier les actifs que vous avez créés, vous allez
terminer la page en ajoutant une ou plusieurs images supplémentaires, en ajoutant du texte et en
définissant les propriétés d’arrière-plan du tableau. Une fois terminée, la page ressemblera à la
suivante :
Avant de commencer cette section, vous devez copier ou déplacer les fichiers d’exemple de ce
didacticiel. Les fichiers d’exemple sont disponibles dans le dossier d’exemples Samples du CD de
Macromedia Studio MX 2004.
Si vous avez copié le dossier d’exemples sur votre disque dur lors d’un didacticiel précédent, ces
fichiers se trouvent alors déjà sur votre ordinateur. Si vous n’avez pas encore copié le dossier
d’exemples sur votre disque dur, insérez le CD de Macromedia Studio MX 2004 dans votre
ordinateur et sélectionnez l’option d’exploration du contenu du CD dans l’angle inférieur droit
de l’écran d’installation. Copiez le dossier d’exemples sur votre disque dur (par exemple sur votre
Bureau ou dans le répertoire principal du site Dreamweaver que vous avez créé dans Chapitre 6,
Configuration d’un exemple de site ColdFusion).
Recherchez les fichiers d’exemple hybrid_label.gif et background.jpg dans le dossier d’exemples,
puis copiez-les ou déplacez-les dans le dossier d’images de votre site Dreamweaver.
Vous êtes maintenant prêt à terminer la page.
184
Didacticiel 6 : Assemblage et modification d’actifs Studio
1 Avec la page index.cfm ouverte dans la fenêtre de document de Dreamweaver, créez davantage
d’espace dans la colonne FEATURED TECHNOLOGY. Pour ce faire, placez le pointeur au
début du texte de l’espace réservé style2 et appuyez sur Entrée (Windows) ou Retour
(Macintosh).
2 Placez le pointeur entre les mots FEATURED TECHNOLOGY et le texte de l’espace réservé
style2 en cliquant dans l’espace que vous venez de créer.
3 Cliquez sur l’onglet Actifs du panneau Fichiers ou sélectionnez Fenêtre > Actifs.
Les actifs du site s’affichent.
Bouton Images
4 Si l’affichage des images n’est pas sélectionné, cliquez sur le bouton Images pour afficher vos
actifs d’image.
5 Dans le panneau Actifs, sélectionnez hybrid_label.gif.
Dreamweaver affiche l’actif dans le panneau Actifs.
Dernière étape de création de la page
185
6 Procédez de l’une des manières suivantes :
Faites glisser le fichier hybrid_label.gif vers le point d’insertion (entre FEATURED
TECHNOLOGY et le texte de l’espace réservé style2).
■ Cliquez sur le bouton Insérer dans la partie inférieure du panneau Actifs.
Le graphique hybrid_label.gif s’affiche sur la page.
■
7 Cliquez une fois à côté du graphique Hybrid Label pour le désélectionner. Assurez-vous que le
point d’insertion se trouve toujours dans la colonne FEATURED TECHNOLOGY.
8 Cliquez sur la balise <tr> dans le sélecteur de balises pour sélectionner l’ensemble de la ligne du
troisième tableau.
9 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur l’icône de dossier situé à côté
de la zone de texte Arrière-plan (Ar-pl.) et recherchez le fichier background.jpg dans le dossier
images.
Remarque : Si vous ne voyez pas les propriétés d’arrière-plan du tableau, cliquez sur la flèche
d’extension dans l’angle inférieur droit de l’inspecteur des propriétés.
10 Sélectionnez le fichier background.jpg, puis cliquez sur OK.
Dreamweaver renseigne la ligne du tableau avec l’image d’arrière-plan.
186
Didacticiel 6 : Assemblage et modification d’actifs Studio
11 Remplacez le texte de l’espace réservé style2 dans la colonne FEATURED TECHNOLOGY
par votre propre texte. Vous pouvez par exemple utiliser comme modèle le texte de la version
finale de la page index.cfm de Trio Motors. La version finale de la page index.cfm se trouve dans
le dossier d’exemples que vous avez copié sur votre disque dur depuis le CD de
Macromedia Studio MX 2004. Le fichier final se trouve dans le répertoire nommé
trio_motors_complete.
12 Dans la colonne LOCATE A TRIO DEALER, sélectionnez le texte de l’espace réservé style2 et
remplacez-le par la phrase suivante : Sélectionnez un état dans le menu contextuel, puis cliquez
sur le bouton RECHERCHE pour trouver le revendeur Trio Motors le plus proche de chez
vous.
13 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur le bouton Centrer pour
centrer la phrase que vous venez de saisir.
Tous les éléments statiques de la page d’accueil de Trio Motors sont terminés. Dans le dernier
didacticiel, vous allez créer une fonction de recherche dans Macromedia ColdFusion MX qui
rendra votre site dynamique.
Dernière étape de création de la page
187
188
Didacticiel 6 : Assemblage et modification d’actifs Studio
DIDACTICIEL 7
Création d’une fonction de recherche dans une
base de données
Ce didacticiel vous montre comment créer une simple fonction application de recherche dans une
base de données avec Macromedia Dreamweaver MX et Macromedia ColdFusion MX.
L’application ColdFusion va rechercher des franchises Trio Motors en utilisant un paramètre de
recherche unique : un Etat américain.
Remarque : Les développeurs ASP, ASP.NET, JSP et PHP pourront eux-mêmes juger ce tutorial
ColdFusion utile, car de nombreuses techniques de développement ASP, ASP.NET, JSP et PHP
sont identiques. Pour plus d’informations sur la configuration de Dreamweaver pour utiliser l’une de
ces technologies de serveur, voir Préparation à la création de sites dynamiques dans l’aide Utilisation
de Dreamweaver.
Vous devriez déjà être connecté à l’exemple de base de données dans Dreamweaver avant de
poursuivre ce didacticiel. Pour plus de détails, voir Chapitre 6, Configuration d’un exemple de site
ColdFusion, page 73.
Ce didacticiel contient les sections suivantes :
A propos des pages de recherche/de résultats, page 189
Création de la page de recherche, page 190
Création de la page de résultats, page 195
Publication et test de vos pages, page 200
A propos des pages de recherche/de résultats
Pour intégrer une nouvelle caractéristique dans votre application Web, un minimum de deux
pages s’impose. La première page contient un formulaire HTML qui va servir à la sélection ou à la
saisie des critères de recherche. Même si aucune recherche n’est véritablement exécutée à ce
niveau, on l’appelle toutefois « page de recherche ».
La deuxième page indispensable à la recherche est la page de résultats, qui n’est autre que le
moteur même du processus. La page de résultats procède à l’exécution des tâches suivantes :
•
•
•
•
Analyse des critères de recherche envoyés par la page de recherche.
Connexion à la base de données et recherche d’enregistrements.
Création d’un jeu composé des enregistrements trouvés.
Affichage du contenu du jeu d’enregistrements.
189
L’insertion d’une page d’informations détaillées est également possible, en option. Une page
d’informations détaillées donne des informations supplémentaires sur un enregistrement
spécifique figurant dans une page de résultats. Vous ne serez pas amené à créer une page
d’informations détaillées dans ce didacticiel. Pour plus d’informations, voir Développement rapide
d’applications dans l’aide Utilisation de Dreamweaver.
Si la recherche se fait sur la base d’un seul critère, ajoutez des fonctions de recherche à votre
application Web sans utiliser de requêtes ni de variables SQL. Contentez-vous de créer vos pages
et de compléter les champs des quelques boîtes de dialogue qui s’affichent à l’écran. Si la recherche
dépend de plusieurs critères, il vous faut rédiger une instruction SQL pour laquelle vous définissez
de multiples variables. Dans ce didacticiel, vous allez créer la fonction de recherche en utilisant un
seul paramètre, le nom d’un Etat américain.
Pour plus d’informations sur le développement d’applications de recherche utilisant plus d’un
paramètre de recherche, voir Développement rapide d’applications dans l’aide de Dreamweaver.
Création de la page de recherche
Une page de recherche sur le Web se compose normalement de champs ou de menus de
formulaire destinés à la saisie de critères particuliers. Lorsque l’utilisateur clique sur le bouton
Rechercher du formulaire, les critères sont envoyés à une page de résultats sur le serveur. La
récupération des enregistrements dans la base de données incombe non pas à la page de recherche
sur le navigateur, mais à la page de résultats.
Vous allez commencer par créer la fonction de recherche pour Trio Motors en créant la page de
recherche. La page index.cfm que vous avez créée en suivant les didacticiels précédents servira de
page de recherche. La fonction de recherche de Trio Motors permettra aux utilisateurs de
rechercher l’emplacement d’une franchise Trio Motors par Etat. Pour créer cette fonction, vous
devez d’abord ajouter les éléments suivants à la page de recherche : un formulaire, un objet de
formulaire qui permet aux utilisateurs de spécifier l’état, ainsi qu’un bouton Rechercher.
Remarque : Même si vous n’avez pas suivi les didacticiels précédents de ce manuel, vous pouvez
créer une fonction de recherche ColdFusion. Créez simplement une page de recherche (index.cfm)
et une page de résultats (results.cfm), puis suivez les étapes de ce didacticiel. Vos résultats seront
différents de ceux du didacticiel, car vous ne disposez pas des actifs de site Trio Motors. Les
fonctionnalités dynamiques de la fonction de recherche sont cependant identiques.
Ajout d’éléments de formulaire à la page de recherche
Vous devrez d’abord ajouter un formulaire HTML, un menu contextuel et un bouton Envoyer
(ou un bouton de recherche) à la page de recherche.
1 La page index.cfm ouverte dans la fenêtre Document, placez le point d’insertion à la fin de la
phrase que vous avez tapée dans la colonne LOCATE A TRIO DEALER de la troisième table.
Pour plus de détails, voir Didacticiel 6, Assemblage et modification d’actifs Studio, page 177.
2 Sélectionnez Insertion > Formulaire > Formulaire.
190
Didacticiel 7 : Création d’une fonction de recherche dans une base de données
Un formulaire vierge est créé sur la page. Il est parfois nécessaire de sélectionner les éléments
invisibles (Affichage > Assistances visuelles > Eléments invisibles) pour afficher les contours du
formulaire, représentés par de fines lignes rouges.
3 Dans l’inspecteur des propriétés (Fenêtre > Propriétés), tapez trio_form dans la zone de texte
Nom du formulaire et appuyez sur Entrée (Windows) ou Retour (Macintosh).
4 Cliquez une fois à l’intérieur du formulaire.
5 Sélectionnez Insertion > Formulaire > Liste/Menu.
Un menu contextuel apparaît à l’intérieur du formulaire.
6 Dans l’inspecteur des propriétés, tapez US_STATE dans la zone de texte Liste/Menu et appuyez
sur Entrée (Windows) ou Retour (Macintosh).
Il s’agit du nom de l’objet de formulaire du menu contextuel. Souvenez-vous en car vous en
aurez besoin lorsque vous allez créer la page de résultats.
7 Cliquez une fois à côté du menu contextuel dynamique pour le désélectionner.
8 Choisissez Insertion > HTML > Caractères spéciaux > Espace insécable.
Un espace insécable apparaît.
9 Sélectionnez Insertion > Formulaire > Bouton.
Un bouton Envoyer apparaît à côté du menu contextuel.
10 (Facultatif) Changez l’étiquette du bouton Envoyer en le sélectionnant et en entrant une
nouvelle valeur dans la zone Etiquette de l’inspecteur des propriétés, puis appuyez sur Entrée
(Windows) ou Retour (Macintosh).
11 Cliquez une fois à côté du bouton de formulaire pour le désélectionner.
12 Dans l’inspecteur des propriétés, cliquez sur le bouton Centrer pour aligner le menu contextuel
et le bouton de recherche au centre du formulaire.
Création de la page de recherche
191
13 Sélectionnez le formulaire à l’aide de la balise <form> dans le sélecteur de balises qui se trouve
dans la partie inférieure gauche de la fenêtre Document, conformément à l’illustration.
14 Entrez results.cfm dans la zone de texte Action de l’inspecteur des propriétés. Il s’agit du nom
de fichier de la page de résultats qui effectuera la recherche dans la base de données.
15 Choisissez GET dans le menu contextuel Méthode de l’inspecteur des propriétés. La sélection de
GET envoie les données en les annexant à l’URL, sous forme de chaîne de requête. Pour plus
d’informations sur les méthodes POST et Default, voir Définition des propriétés de formulaire
dans l’aide Utilisation de Dreamweaver.
16 Enregistrez les modifications (Fichier > Enregistrer).
Définition d’un jeu d’enregistrements pour le menu contextuel
Dans ce didacticiel, vous utiliserez le menu contextuel, inséré lors de la précédente section, pour
permettre à l’utilisateur de choisir un état. Au lien d’entrer manuellement tous les états dans le
menu de formulaire, vous allez utiliser une base de données qui va remplir le menu pour vous.
Pour renseigner le menu, vous créerez un jeu d’enregistrements avec des informations provenant
de la table de recherche LK_STATES (fournie avec l’exemple de base de données Trio Motors). La
table LK_STATES contient le nom des 50 états américains, plus le District of Columbia, dans la
colonne STATE_LABEL. Cette table contient également une liste d’abréviations des noms d’états
dans la colonne STATE_VALUE.
1 Vérifiez que le fichier index.cfm de la page d’accueil de Trio Motors est ouvert dans la fenêtre
Document.
2 Créez un jeu d’enregistrements : ouvrez le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le
bouton Plus (+) et choisissez Jeu d’enregistrements (Requête) dans le menu contextuel.
Remarque : Vous devrez peut-être spécifier vos informations de connexion RDS avant de
pouvoir créer un jeu d’enregistrements. Pour plus de détails, voir Chapitre 6, Configuration d’un
exemple de site ColdFusion, page 73.
192
Didacticiel 7 : Création d’une fonction de recherche dans une base de données
3 Assurez-vous que la boîte de dialogue Jeu d’enregistrements simplifiée s’affiche.
Si la boîte de dialogue avancée s’affiche à la place, cliquez sur le bouton Simple pour ouvrir sa
version simplifiée.
4 Dans la zone de texte Nom, entrez rs_trio.
5 Dans le menu contextuel Source de données, sélectionnez trio.
Remarque : Vous devez terminer Chapitre 6, Configuration d’un exemple de site ColdFusion avant
de pouvoir voir la connexion.
6 Dans le menu contextuel Table, sélectionnez LK_STATES.
7 Sélectionnez le bouton Tout situé à coté de l’option Colonnes.
Création de la page de recherche
193
8 Dans les menus contextuels de tri, sélectionnez STATE_LABEL dans le premier menu
contextuel et Croissant dans le deuxième.
Ces options trient les valeurs de la colonne STATE_LABEL et les affichent par ordre
alphabétique dans le menu dynamique de la page de recherche.
La boîte de dialogue Jeux d’enregistrements terminée devrait avoir l’aspect suivant :
9 (Facultatif) Cliquez sur Tester.
La boîte de dialogue Tester l’instruction SQL affiche la liste des enregistrements du jeu
d’enregistrements défini. Cliquez sur OK pour fermer la boîte de dialogue Tester
l’instruction SQL.
10 Cliquez sur OK pour fermer la boîte de dialogue Jeu d’enregistrements.
Le nouveau jeu d’enregistrements s’affiche dans le panneau Liaisons.
194
Didacticiel 7 : Création d’une fonction de recherche dans une base de données
Liaison du menu contextuel
Vous allez maintenant finaliser la page de recherche en liant les données au menu contextuel à
l’aide du jeu d’enregistrements créé dans la section précédente.
1 Sélectionnez le menu contextuel dans le formulaire, puis cliquez sur le bouton Dynamique dans
l’Inspecteur des propriétés.
La boîte de dialogue Liste/Menu dynamique s’affiche.
2 Dans la boîte de dialogue Liste/Menu dynamique, effectuez les opérations suivantes :
■ Sélectionnez rs_trio dans les options du menu contextuel Jeu d’enregistrements
■ Sélectionnez STATE_VALUE dans le menu contextuel Valeurs.
■ Sélectionnez STATE_LABEL dans le menu contextuel Etiquettes.
■ N’indiquez aucune valeur dans la zone de texte Sélectionner une valeur égale à.
3 Cliquez sur OK.
Le menu contextuel que vous venez d’insérer devient dynamique. Vous ne pouvez pas encore
voir les valeurs dans ce menu contextuel. Les valeurs apparaissent uniquement lorsque vous
testez la page dans un navigateur.
La page de recherche est terminée. Vous allez maintenant créer la page de résultats.
Création de la page de résultats
Une fois que l’utilisateur sélectionne ou entre un paramètre de recherche (ici, un Etat américain),
l’application doit récupérer des enregistrements dans la base de données. Ce travail est en fait
réalisé par la page de résultats.
Pour gagner du temps, utilisez la mise en forme prédéfinie de la page de résultats vierge fournie
dans les fichiers d’exemple Trio Motors. Les fichiers d’exemple sont disponibles dans le dossier
d’exemples Samples du CD de Macromedia Studio MX 2004.
Si vous avez copié le dossier d’exemples sur votre disque dur lors d’un didacticiel précédent, ces
fichiers se trouvent alors déjà sur votre ordinateur. Si vous n’avez pas encore copié le dossier
d’exemples sur votre disque dur, insérez le CD de Macromedia Studio MX 2004 dans votre
ordinateur et sélectionnez l’option d’exploration du contenu du CD dans l’angle inférieur droit
de l’écran d’installation. Copiez le dossier d’exemples sur votre disque dur (par exemple sur votre
Bureau ou dans le répertoire principal du site Dreamweaver que vous avez créé dans Chapitre 6,
Configuration d’un exemple de site ColdFusion).
Recherchez le fichier d’exemple results.cfm dans le dossier Samples, puis copiez-le dans le
répertoire principal du site Trio Motors (le répertoire dans lequel se trouve la page index.cfm).
Copiez le fichier, ne le déplacez pas. Vous conserverez ainsi une copie intacte du fichier d’origine.
Création de la page de résultats
195
Vérifiez que le fichier results.cfm de votre site Dreamweaver n’est pas uniquement accessible en
lecture seule. Vous pourrez ainsi enregistrer les modifications apportées à ce fichier. Les utilisateurs
de Windows peuvent cliquer avec le bouton droit de la souris sur le fichier et sélectionner
Propriétés pour s’assurer que l’attribut Lecture seule est désactivé. Les utilisateurs de Macintosh
peuvent sélectionner le fichier et sélectionner Fichier > Lire les informations pour désactiver
l’option Verrouillé.
La page results.cfm contient déjà l’image banner_graphic.jpg en haut de la page. Vous devrez
cependant insérer manuellement la barre de navigation Macromedia Fireworks MX 2004 que
vous avez créée dans Didacticiel 4, Création d’une barre de navigation avec Fireworks Lorsque vous
insérez cette barre de navigation, suivez les procédures décrites dans Didacticiel 6, Assemblage et
modification d’actifs Studio
Lorsque vous avez terminé, votre page doit ressembler à la suivante :
Vous êtes maintenant prêts à créer la page de résultats.
Définition d’un jeu d’enregistrements pour la page de résultats
1 Dans Dreamweaver, assurez-vous que la page results.cfm est ouverte dans la fenêtre de
document.
2 Créez un jeu d’enregistrements : ouvrez le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le
bouton Plus (+) et choisissez Jeu d’enregistrements (Requête) dans le menu contextuel.
Remarque : Vous devrez peut-être spécifier vos informations de connexion RDS avant de
pouvoir créer un jeu d’enregistrements. Pour plus de détails, voir Chapitre 6, Configuration d’un
exemple de site ColdFusion, page 73.
3 Assurez-vous que la boîte de dialogue Jeu d’enregistrements simplifiée s’affiche.
Si la boîte de dialogue avancée s’affiche à la place, cliquez sur le bouton Simple pour ouvrir sa
version simplifiée.
4 Dans la zone de texte Nom, entrez rs_trio.
5 Dans le menu contextuel Source de données, sélectionnez trio.
Remarque : Vous devez terminer Chapitre 6, Configuration d’un exemple de site ColdFusion avant
de pouvoir voir la connexion.
6 Dans le menu contextuel Table, sélectionnez CONTACT_INFORMATION.
7 Sélectionnez le bouton Tout situé à coté de l’option Colonnes.
196
Didacticiel 7 : Création d’une fonction de recherche dans une base de données
8 Dans le premier menu contextuel de la zone Filtre, sélectionnez la colonne STATE.
9 Dans le menu déroulant situé à côté du premier menu, sélectionnez le signe égal (=) (en
principe, la valeur par défaut).
10 Dans le troisième menu déroulant, choisissez Paramètre d’URL.
11 Dans le quatrième champ, entrez US_STATE.
Il s’agit du nom de l’objet de formulaire acceptant le paramètre de recherche dans la page de
recherche (index.cfm). Pour obtenir ce nom, revenez à la page de recherche, cliquez sur l’objet
de formulaire (menu contextuel) pour le sélectionner et prenez note du nom qui s’affiche dans
l’inspecteur des propriétés. Le paramètre d’URL dans la zone de filtre et le nom de l’objet de
formulaire doivent être identiques.
Une fois les champs renseignés, le filtre devrait avoir l’aspect suivant :
Lorsque l’utilisateur choisit un Etat (valeur) dans le menu contextuel US_STATE dans la page
de recherche et clique sur le bouton Rechercher, le serveur compare cette valeur à toutes les
valeurs de la colonne STATE de la table CONTACT_INFORMATION de la base de
données. Le serveur crée alors un jeu d’enregistrements en filtrant toutes les valeurs ne
correspondant pas de manière précise à la valeur sélectionnée. Par exemple, si un utilisateur
sélectionne Pennsylvanie dans le menu contextuel et clique sur le bouton de recherche, la page
de résultats renvoie un jeu d’enregistrements contenant seulement les enregistrements qui
correspondent à la valeur PA dans la colonne STATE de la table de base de données.
12 Dans les menus contextuels de tri, sélectionnez Ville dans le premier menu contextuel et
Croissant dans le deuxième.
Les résultats de votre recherche sont ainsi triés et répertoriés de manière alphabétique par ville
dans la page de résultats.
La boîte de dialogue Jeux d’enregistrements terminée devrait avoir l’aspect suivant :
Création de la page de résultats
197
13 (Facultatif) Cliquez sur Tester, entrez une valeur test se trouvant dans la base de données, par
exemple PA, et cliquez sur OK pour vous connecter à la base de données et créer une occurrence
du jeu d’enregistrements.
La valeur test est une simulation de la valeur qui sans cela aurait été renvoyée de la page de
recherche. Cliquez sur OK pour fermer le jeu d’enregistrements.
14 Cliquez sur OK pour fermer la boîte de dialogue Jeu d’enregistrements.
Le nouveau jeu d’enregistrements s’affiche dans le panneau Liaisons.
Liaison des données à la page
Après avoir créé un jeu d’enregistrements pour y insérer les résultats de la recherche, affichez les
informations sur la page de résultats. L’affichage des enregistrements est simple : il suffit de faire
glisser des colonnes individuelles du panneau Liaisons sur la page de résultats.
1 Ouvrez le panneau Liaisons en choisissant Fenêtre > Liaisons.
2 Sélectionnez le mot CONTACT sur la page results.cfm.
3 Dans le panneau Liaisons, sélectionnez la source de contenu CONTACT et faites-la glisser sur
le mot sélectionné CONTACT sur la page.
Remarque : Vous pouvez aussi cliquer sur le bouton Insertion dans la partie inférieure du panneau
Liaisons pour insérer une source de contenu.
Un espace réservé pour le contenu dynamique apparaît sur la page.
4 Répétez les étapes 2 et 3 pour les sources de contenu STREET, CITY, STATE, ZIP CODE et
PHONE. Une fois que vous avez fait glisser toutes les sources de contenu sur la page, vous verrez
des espaces réservés dynamiques sur la page à la place du texte statique.
La syntaxe de l’espace réservé pour le contenu d’un jeu d’enregistrements est :
{RecordsetName.ColumnName}, où RecordsetName est le nom du jeu d’enregistrements et
ColumnName, le nom de la colonne choisie dans ce jeu.
198
Didacticiel 7 : Création d’une fonction de recherche dans une base de données
Affichage de plusieurs résultats
Le comportement de serveur Région répétée vous permet d’afficher sur une page plusieurs
enregistrements d’un jeu. Par exemple, si une recherche de franchises Trio Motors dans l’Etat de
Pennsylvanie donne trois résultats, le comportement de serveur Région répétée vous permet
d’afficher les trois résultats de la recherche sur la page de résultat. Sinon, seul le premier
enregistrement est affiché.
Toute sélection de données dynamique peut être convertie en région répétée. Les régions les plus
courantes sont les tableaux, les lignes de tableau et les séries de lignes de tableau. Sur la page
results.cfm que vous avez créée, les données dynamiques sont contenues dans un tableau composé
d’une seule ligne. Vous allez ajouter un comportement de serveur Région répétée à ce tableau.
Lorsque le serveur d’application traite la page, la table est répétée avec un enregistrement différent
inséré dans chaque nouvelle table.
1 Assurez-vous que la page results.cfm est ouverte dans la fenêtre de document.
2 Sélectionnez le tableau comportant le contenu dynamique en cliquant une fois à l’intérieur du
tableau et en cliquant sur la balise <table> dans le sélecteur de balises dans la partie inférieure
de la fenêtre de document.
3 Pour afficher le panneau Comportements de serveur, choisissez Fenêtre > Comportements de
serveur.
4 Cliquez sur le bouton Plus (+) et choisissez Région répétée.
La boîte de dialogue Région répétée s’affiche.
5 Sélectionnez rs_trio dans le menu contextuel Jeu d’enregistrements
6 Sélectionnez l’option Tous les enregistrements.
7 Cliquez sur OK.
Dans la fenêtre Document, un contour fin de couleur grise délimite la région répétée. Lorsque
vous testez votre application dans un navigateur, la page de résultat affiche tous les
enregistrements qui correspondent au paramètre d’URL (Etat américain) spécifié par
l’utilisateur.
Création de la page de résultats
199
Publication et test de vos pages
Une fois vos pages de recherche et de résultats terminées, téléchargez-les sur votre serveur et testezles.
Remarque : Si vous n’avez pas terminé Chapitre 6, Configuration d’un exemple de site ColdFusion
vous devez le faire avant de poursuivre.
1 Dans le panneau Fichiers de Dreamweaver, sélectionnez le répertoire du site Trio Motors situé
tout en haut.
2 Cliquez sur le bouton Placer le(s) fichier(s).
3 Dreamweaver vous demande : « Etes-vous sûr(e) de vouloir placer le site entier ? ». Cliquez
sur OK.
200
Didacticiel 7 : Création d’une fonction de recherche dans une base de données
4 Ouvrez un navigateur Web et chargez la page index.cfm. L’URL est variable selon le type de
serveur Web que vous utilisez. Si vous utilisez le serveur Web intégré ColdFusion, l’URL est
http://localhost:8500/trio_motors/index.cfm.
Si vous utilisez un serveur d’hébergement ColdFusion, entrez l’URL de votre site, suivie de . . ./
trio_motors/index.cfm.
5 Sélectionnez un état dans le menu contextuel, puis cliquez sur le bouton de recherche.
La page de résultat affiche les résultats de votre recherche.
Si plus d’un enregistrement correspondant est trouvé, la page de résultats les affiche tous, à cause
du comportement de serveur Région répétée que vous avez ajouté. Cependant, si aucun
enregistrement correspondant n’est trouvé, la page de résultats est vide.
Remarque : L’exemple de base de données ne contient pas d’enregistrement pour chaque état de la
liste.
Pour voir des résultats de recherche multiples, sélectionnez California, Pennsylvania ou Florida
dans le menu contextuel de la page de recherche, puis cliquez sur le bouton Rechercher.
Des versions terminées des fichiers que vous avez créés tout au long de ce didacticiel sont
disponibles dans le répertoire trio_motors_complete du CD de Macromedia Studio MX 2004.
Pour localiser ce répertoire, insérez votre CD de Macromedia Studio MX 2004, sélectionnez
l’option d’exploration du contenu du CD, puis sélectionnez le dossier d’exemples Samples.
Pour plus d’informations sur les procédures décrites dans ce didacticiel, voir l’aide Utilisation de
Dreamweaver.
Publication et test de vos pages
201
202
Didacticiel 7 : Création d’une fonction de recherche dans une base de données
INDEX
A
Access. Voir Microsoft Access
accessibilité 113–114
activation 18
Active Server Pages. Voir ASP
adresses IP 71
adresses réseau numériques 71
animation
image par image et interpolée 104
applications Internet dynamiques
bases de données 94
HTML 96
applications Web
définition 65
définition des serveurs 96
utilisations courantes 55
vue d’ensemble 55
applications, développement
dans Dreamweaver 106–109
dans Flash 109–111
applications, Web. Voir applications Web
ASP.NET
langages utilisés avec 62
B
balises
côté serveur 59
barres de navigation 149–164
bases de données
à propos 63
affichage de données 58
fichier 60
jeux d’enregistrements 59
pilotes, définition 63
pilotes, vue d’ensemble 59
relationnelles 64
requêtes 59, 63
sélection 60
serveur 60
tables 59
utilisation avec des applications Web 56
bases de données relationnelles, à propos 64
bibliothèques 105–106
C
C# (langage) 62
CFML (ColdFusion Markup Language) 61
ColdFusion
configuration d’un site 73, 87
configuration du système 74, 76
dossier racine, création 75–76
et les utilisateurs de Macintosh 75
installation 74–75
langages utilisés avec 62
RDS (Remote Development Service) 75
serveur Web intégré 75
sources de données 98
sources de données (dans Dreamweaver) 83–87
ColdFusion Administrator 83–86
compatibilité avec les navigateurs 93
conception de pages 100–102
maquettes 100–101
connexions aux bases de données (dans Dreamweaver)
82–87
CSS (feuilles de style en cascade). Voir Dreamweaver
D
définition des termes relatifs aux applications Web 63
définition du site (dans Dreamweaver) 78–82, 97
dépannage
ouverture des pages 69
serveurs 67, 69
données, extraction de bases de données 58
Dreamweaver
203
actifs, assemblage 111–112
Actifs, panneau 111, 185
affichage de données dynamiques 198–199
applications, développement 106–109
connexions aux bases de données 82–87
CSS (Cascading Style Sheets) 136–139
CSS (feuilles de style en cascade) 12, 102
définition d’un jeu d’enregistrements 107, 192–
194, 196–198
définition du site 78–82, 97
déploiement de fichiers 115
dossier Serveur d’évaluation 81–82
éléments de formulaire 190–192
espace de travail 31–34
espace réservé pour l’image 136
fenêtre de document 33
fichiers, archivage et extraction 99
Fichiers, panneau 34, 98, 116
insertion d’animations Flash dans 180–181
insertion de code HTML Fireworks dans 177–178
lecture d’animations Flash 182
Liaisons, panneau 108
MDI (Multiple Document Interface) 32
menu dynamique 190–195
menus, présentation des 34
mises en forme 101–102, 131–139
mode Tableaux développés 133–135
modification d’animations Flash dans 182–183
modification d’images Fireworks 112
modification d’images Fireworks dans 179–180
page de démarrage 33
pages de recherche/de résultats 189–201
panneaux 33
Placer, commande 115
Préfixe de l’URL 81
présentation de l’espace de travail intégré 32
Région répétée, comportement de serveur 199
site distant, définition 79–80
site local, définition 78–79
test de sites 114
test et validation du code 114
E
exemples d’applications Web 55
exportation
à partir de FreeHand 129–130
images (à partir de Fireworks) 147
images (dans Fireworks) 161–162
extraction de données des bases de données 58
204
Index
F
Fireworks
actifs, création 103
actions, refaire 48
annulation d’actions 47
barres de navigation 149–164
boutons 151–158
création d’un document 142, 150
espace de travail 42–48
états de bouton 154–155
exportation 147, 161–162
Exportation rapide, bouton 47
gestion de fichiers (archivage et extraction) 100
Historique, panneau 47
insertion d’images 142–144
Inspecteur des propriétés 44–45
modification d’images (depuis Dreamweaver) 112,
179
navigation dans un document 47
onglets de documents 47
optimisation d’images 146
optimisation des images 159
outils, modification des options 43
Outils, panneau 43
panneaux (organisation) 46
panneaux, présentation 45–46
PNG (Portable Network Graphic) 142
préférences HTML 160–161
Texte, outil 144–145
Flash
affichage de toute la scène 36
affichage du contenu des images 36
Afficher tout, commande 36
Afficher une image, commande 36
animation 104, 165–176
applications Internet dynamiques 109–111
applications, développement 12, 13, 109–111
barre d’outils 41
bibliothèque 105
calques, utilisation 41
composants 110
création d’un document 167–168
espace de travail 35–42
extensions 13
fichiers vidéo 13
Image, commande 39
Image-clé, commande 39
images, utilisation 39, 40
images-clés 172
images-clés, utilisation 39–40
importation d’images Fireworks 168–170
interpolations de mouvement 174
Main, outil 36
médias enrichis, création 103–104
modification d’animations (dans Dreamweaver)
182–183
publication d’animations 175–176
Scénario 37–40
tête de lecture (dans le scénario) 38
Texte, outil 170–171
transparence alpha 172–173
zone de travail, affichage et masquage 36
zoom 35, 36
FreeHand
actifs, création 103
Aligner, panneau 122
Barre d’outils principale 51
barres d’outils, utilisation 51–53
cloner 123
Connecteur, outil 95, 126–128
espace de travail 48–53
exportation 129–130
Fenêtre de document 49
navigation sur le site, dessin 117–130
panneaux, présentation 50
personnalisation 118–119
Rectangle, outil 120
Texte, outil 121
G
gestion et mise à jour de site Web 116
glossaire de termes courants relatifs aux applications
Web 63
H
HTML
langages de programmation intégrés 61
I
IIS
installation 69
IIS (Services d’informations Internet) 62, 68
images
création (avec Fireworks) 13, 103
création (avec FreeHand) 103
insertion (dans Dreamweaver) 111, 186
insertion (dans Fireworks) 142–144
modification (dans Dreamweaver) 179–180
optimisation (dans Fireworks) 146
inscription 18
installation
IIS 69
Macromedia Studio MX 2004 sous Windows 15
Macromedia Studio MX sur Macintosh 17
PWS 68
J
Java 62
JavaScript 62
jeux d’enregistrements
définition 64
Voir aussi bases de données
JRun 62
JSP (JavaServer Pages) 62
L
langages de script côté serveur 62
langages, côté serveur 61, 62
localhost 70
M
Macintosh
Installation de Macromedia Studio MX 2004 17
serveurs 70
Macromedia JRun 62
Macromedia Studio MX 2004
installation sous Macintosh 17
installation sous Windows 15
Microsoft Access 60
Microsoft Internet Information Server (IIS). Voir IIS
Microsoft Personal Web Server (PWS) 65, 68
Microsoft SQL Server 60
mises en forme de pages
création 101–102
mises en forme de pages Web 101–102
modèles 105–106
modèles de serveur. Voir technologies de serveur
MySQL 60
N
navigation
dessin pour les sites Web 95
navigation sur le site 117–130
Netscape Enterprise Server 65
numéro IP 127.0.0.1 71
O
optimisation
Index
205
images (dans Fireworks) 159
Oracle 9i 60
P
pages
affichage de données des bases de données 58
dynamique, traitement 58
dynamiques, création 61
dynamiques, définition de 55
modèles et bibliothèques 105–106
statiques 57
pages de recherche/de résultats 189–201
pages dynamiques
à propos 63
création 61
traitement 58
pages statiques 57
Voir aussi pages
pages Web. Voir pages
PHP
technologie de serveur 62
pilotes pour bases de données 59, 63
planification
sites Web 92
plate-forme .NET 62
PNG (Portable Network Graphic) 142
préfixe d’URL (dans Dreamweaver) 81
PWS 65, 68
installation 68
R
RDS (Remote Development Service) 75
requêtes
base de données 59
définition 63
S
scripts, côté serveur 59
sélection
technologies de serveur 62
serveur d’application Apache Tomcat 63
serveur d’application Tomcat 63
serveur d’application WebSphere d’IBM 63
Serveur Web Apache sur Mac OS X 70
serveurs
adresses IP 71
dépannage 69
HTTP 70
installation 68
206
Index
notions de base 70
sélection 68
serveurs d’application 58
serveurs Web, définis 65
test d’évaluation 69
Voir aussi serveurs Web, serveurs d’application
serveurs d’application
définition 63
vue d’ensemble 58
serveurs d’évaluation 69, 81
serveurs HTTP. Voir serveurs
serveurs Web
configuration 96
définition 65
Voir aussi serveurs, serveurs d’application
SGBD (système de gestion de bases de données). Voir
bases de données
sites Web 111
accessibilité 113
assemblage d’actifs 111–112
commande source de fichiers 99
contenu 103
définition 97
définition des objectifs 92
déploiement 111
dessin de la navigation 95
environnement de développement 96
gestion et mise à jour 116
maquettes 100
planification 92
sources de données requises 94
test d’évaluation 114
test et validation du code 114
sites. Voir sites Web
sources de données (ColdFusion) 83–87, 98
sources de données requises, définition 94
SQL 59
SQL (Structured Query Language) 59
Structured Query Language (SQL) 59
Sun ONE Web Server 65
support technique pour les serveurs 67
systèmes de gestion de bases de données 63
T
tableaux
définition des propriétés 133
insertion (dans Dreamweaver) 131–133
tables
base de données 59
définition des propriétés 135
technologies de serveur
définition 64
prise en charge 62
sélection 62
termes relatifs aux applications Web courants,
définitions 63
terminologie du développement d’applications Web 63
test et validation du code 114
V
variables en langage CFML 61
VBScript 62
Visual Basic 62
W
WebSphere 63
Windows
Installation de Macromedia Studio MX 2004 15
Index
207
208
Index
">