Manuel du propriétaire | MACROMEDIA STUDIO 8-DCOUVERTE DE STUDIO 8 Manuel utilisateur

Ajouter à Mes manuels
384 Des pages
D&eacute;couverte de Studio 8
Marques commerciales
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit,
Studio MX, UltraDev et WebHelp sont soit des marques commerciales, soit des marques d&eacute;pos&eacute;es de Macromedia, Inc. qui
peuvent &ecirc;tre d&eacute;pos&eacute;es aux Etats-Unis ou sous toute juridiction. Les autres noms de produits, logos, graphiques, mises en page,
titres, mots ou phrases mentionn&eacute;s dans cette publication peuvent &ecirc;tre des marques, des marques de service ou des noms de
marque appartenant &agrave; Macromedia, Inc. ou &agrave; d’autres entit&eacute;s et peuvent &ecirc;tre d&eacute;pos&eacute;s dans certains pays, &eacute;tats ou provinces.
Informations de tiers
Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contr&ocirc;l&eacute;s par Macromedia et la soci&eacute;t&eacute; Macromedia ne
saurait en aucun cas &ecirc;tre tenue pour responsable du contenu de ces sites. Si vous acc&eacute;dez &agrave; l’un de ces sites, vous le faites &agrave; 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&eacute;.
Technologie de compression et d&eacute;compression audio utilis&eacute;e sous licence de Nellymoser, Inc. (www.nellymoser.com).
Technologie de compression et d&eacute;compression vid&eacute;o Sorenson™ Spark™ utilis&eacute;e sous licence de
Sorenson Media, Inc.
Navigateur Opera &reg; Copyright &copy; 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits r&eacute;serv&eacute;s.
Macromedia Flash 8 video est mis en oeuvre par la technologie On2 TrueMotion. &copy; 1992-2005 On2 Technologies, Inc. Tous
droits r&eacute;serv&eacute;s. http://www.on2.com.
Visual SourceSafe est une marque d&eacute;pos&eacute;e ou une marque commerciale de Microsoft Corporation aux Etats-Unis et dans d’autres
pays.
Copyright &copy; 2005 Macromedia, Inc. Tous droits r&eacute;serv&eacute;s. Ce manuel ne peut pas &ecirc;tre copi&eacute;, photocopi&eacute;, reproduit,
traduit ou converti sous forme &eacute;lectronique ou informatique, en partie ou en totalit&eacute;, sans l’autorisation &eacute;crite pr&eacute;alable de
Macromedia, Inc. Nonobstant ce qui pr&eacute;c&egrave;de, le propri&eacute;taire ou l’utilisateur autoris&eacute; d’une copie valide du logiciel qui
accompagne ce manuel peut imprimer une copie du manuel &agrave; partir d’une version &eacute;lectronique dudit manuel dans le seul
but que ce propri&eacute;taire ou cet utilisateur autoris&eacute; puisse apprendre &agrave; utiliser ce logiciel, sous r&eacute;serve qu’aucune partie de ce
manuel ne soit imprim&eacute;e, reproduite, distribu&eacute;e, revendue ou transmise &agrave; d’autres fins, notamment &agrave; des fins
commerciales telles que la vente de copies de cette documentation ou la fourniture de services contre r&eacute;mun&eacute;ration.
R&eacute;f&eacute;rence ZWP80M100F
Remerciements
Gestion de projet : Jennifer Rowe, Sheila McGinn
R&eacute;daction : Jay Armstrong, Charles Nadeau, Jennifer Rowe, David Sullivan, Jon Michael Varese
R&eacute;dactrice en chef : Rosana Francescato
Correction : Evelyn Eldridge, Rosana Francescato, Mark Nigara, Anne Szabla
Gestion de production : Patrice O’Neill
Conception et production des supports : Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Masayo
Noda, Paul Rangel, Arena Reed, Mario Reynoso
Remerciements particuliers &agrave; Maureen Keating, Jennifer Taylor, Mike Downey, Greg Clausen, Doug Wolens, Melissa Baerwald,
Alan Musselman, David Acala, Jason Wylie
Premi&egrave;re &eacute;dition : Septembre 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103, Etats-Unis
Table des mati&egrave;res
PARTIE 1 : BIEN D&Eacute;MARRER
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Possibilit&eacute;s offertes par Studio 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Installation de Studio 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Activation de vos produits Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Enregistrement de vos produits Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Chapitre 1 : Apprentissage de Studio . . . . . . . . . . . . . . . . . . . . . . . 21
Avantages de la documentation Studio. . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Utilisation du syst&egrave;me d’aide de Studio. . . . . . . . . . . . . . . . . . . . . . . . . . 38
Chapitre 2 : Notions de base de Studio . . . . . . . . . . . . . . . . . . . . . 51
Notions de base de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Notions de base de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Notions de base de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Notions de base de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
Notions de base de FlashPaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Chapitre 3 : Processus de d&eacute;veloppement Web . . . . . . . . . . . . . 141
A propos du processus de d&eacute;veloppement Web . . . . . . . . . . . . . . . . . 141
Planification de votre site Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142
D&eacute;finition de l’environnement de d&eacute;veloppement . . . . . . . . . . . . . . . .143
Planification de la conception et de la mise en forme de la page . . .145
Cr&eacute;ation d’actifs de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148
Assemblage, test et d&eacute;ploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Gestion et mise &agrave; jour de votre site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155
3
PARTIE 2 : D&Eacute;FINIR VOTRE ENVIRONNEMENT ET
PLANIFIER LA CONCEPTION DE VOS PAGES
Chapitre 4 : Didacticiel : Configuration de votre site et
des fichiers de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Apprenez &agrave; utiliser des sites Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 160
Configurez vos fichiers de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
D&eacute;finissez un dossier local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Chapitre 5 : Didacticiel : Cr&eacute;ation de maquettes de page . . . . . 167
Examen de votre t&acirc;che. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Cr&eacute;ation et sauvegarde d’un nouveau document . . . . . . . . . . . . . . . . . 169
Importation et placement d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Cr&eacute;ation d’une image composite de la zone de contenu . . . . . . . . . . 172
Placement de texte et d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Exportation de l’image pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Chapitre 6 : Didacticiel : Cr&eacute;ation d’une mise en forme
de page bas&eacute;e sur un tableau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Examinez la maquette d&eacute;taill&eacute;e de conception. . . . . . . . . . . . . . . . . . . 190
Cr&eacute;ation et enregistrement d’une nouvelle page . . . . . . . . . . . . . . . . . 192
Ins&eacute;rez des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
D&eacute;finissez les propri&eacute;t&eacute;s des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Ins&eacute;rez un espace r&eacute;serv&eacute; pour l’image . . . . . . . . . . . . . . . . . . . . . . . . 203
Ajoutez des couleurs &agrave; la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
PARTIE 3 : CR&Eacute;ATION D’ACTIFS DE CONTENU
Chapitre 7 : Didacticiel : Traitement des photographies . . . . . . 211
Examen de votre t&acirc;che. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211
Traitement par lots de fichiers d’image de grande taille . . . . . . . . . . . 212
Composition des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Aper&ccedil;u avant exportation et exportation des images . . . . . . . . . . . . . 219
Affichage des images optimis&eacute;es finales . . . . . . . . . . . . . . . . . . . . . . . . 221
Chapitre 8 : Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page . . . 223
Examen de votre t&acirc;che. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223
Ajout d’un arri&egrave;re-plan et placement du logo . . . . . . . . . . . . . . . . . . . .224
Organisation de vos objets &agrave; l’aide de calques . . . . . . . . . . . . . . . . . . .228
Cr&eacute;ation d’un arri&egrave;re-plan contrast&eacute; pour le logo . . . . . . . . . . . . . . . . 230
4
Table des mati&egrave;res
Cr&eacute;ation d’un contour autour de la banni&egrave;re. . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation d’un effet de bord oblique . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout d’une ligne de balise &agrave; la banni&egrave;re . . . . . . . . . . . . . . . . . . . . . . . .
Exportation d’un fichier d’image optimis&eacute; . . . . . . . . . . . . . . . . . . . . . . .
234
237
238
239
Chapitre 9 : Didacticiel : Cr&eacute;ation de votre premi&egrave;re
application Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Examinez votre t&acirc;che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Etude de l’application finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Cr&eacute;ation d’un document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Cr&eacute;ation de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Edition d’un symbole de sc&eacute;nario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Ajout d’actions &agrave; des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Ajout d’&eacute;tiquettes &agrave; des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Ajout d’une interpolation de mouvement . . . . . . . . . . . . . . . . . . . . . . . .261
Edition du sc&eacute;nario principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Cr&eacute;ation de la bordure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajout d’un symbole. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Ajout d’une zone de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Ajout du clip sur la sc&egrave;ne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Ajout d’un composant Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Ajout de code ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Publication de votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Ressources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Chapitre 10 : Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o
(Flash Professionnel uniquement) . . . . . . . . . . . . . . . . . . . . . . . . 287
Examinez votre t&acirc;che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Etude de l’application finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Codage d’un fichier vid&eacute;o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Cr&eacute;ation d’un nouveau document Flash . . . . . . . . . . . . . . . . . . . . . . . . .291
Ajout d’un composant multim&eacute;dia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Publication de votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Etapes suivantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
PARTIE 4 : ASSEMBLAGE ET D&Eacute;PLOIEMENT DE VOTRE
SITE INTERNET
Chapitre 11 : Didacticiel : Ajout de contenu aux pages . . . . . . . .301
Localisez vos fichiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301
Passez votre t&acirc;che en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Table des mati&egrave;res
5
Ins&eacute;rez des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Ins&eacute;rez et lisez un fichier Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Ins&eacute;rez une vid&eacute;o Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Ins&eacute;rez du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Cr&eacute;ez des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Aper&ccedil;u de votre page dans un navigateur . . . . . . . . . . . . . . . . . . . . . . .325
Chapitre 12 : Didacticiel : Mise en forme
de votre page avec CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Passez votre t&acirc;che en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
&Eacute;tude de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
Cr&eacute;ez une nouvelle feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334
Associez une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336
Explorez le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .339
Cr&eacute;ez une nouvelle r&egrave;gle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Appliquez un style de classe &agrave; un texte. . . . . . . . . . . . . . . . . . . . . . . . . .343
Mettez en forme le texte de la barre de navigation . . . . . . . . . . . . . . 344
(En option) Centrez le contenu de la page . . . . . . . . . . . . . . . . . . . . . . .355
Chapitre 13 : Didacticiel : Publication de votre site. . . . . . . . . . 359
Etudiez les sites distants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Configurez un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
T&eacute;l&eacute;chargez vos fichiers locaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .363
R&eacute;solution des probl&egrave;mes de configuration du dossier distant
(en option) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .364
Chapitre 14 : Didacticiel : Param&eacute;trage de votre site Web
pour les utilisateurs de Contribute . . . . . . . . . . . . . . . . . . . . . . . . .367
Passer votre t&acirc;che en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .368
En savoir plus sur les connexions et l’administration
de site Web avec Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .368
Connexion &agrave; un site Web en tant qu’administrateur . . . . . . . . . . . . . .369
D&eacute;finition des param&egrave;tres administratifs . . . . . . . . . . . . . . . . . . . . . . . .370
Cr&eacute;ez un r&ocirc;le utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Modification des param&egrave;tres d’un r&ocirc;le . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Cr&eacute;er une cl&eacute; de connexion et l’envoyer &agrave; des utilisateurs . . . . . . . . . 375
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .377
6
Table des mati&egrave;res
1
PARTIE 1
Bien d&eacute;marrer
Familiarisez-vous avec la suite de produits Macromedia Studio MX 2004
pour apprendre tout ce que vous devez savoir avant de commencer &agrave; cr&eacute;er
votre site Web.
Cette partie du manuel contient les sections suivantes :
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Apprentissage de Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Notions de base de Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Processus de d&eacute;veloppement Web . . . . . . . . . . . . . . . . . . . . . . . . . 141
7
Introduction
Ce manuel pr&eacute;sente Macromedia Studio 8, une suite de d&eacute;veloppement
Web int&eacute;gr&eacute;e comprenant Macromedia Dreamweaver 8, Macromedia
Flash Professional 8, Macromedia Fireworks 8, Macromedia Contribute
3.1 et Macromedia FlashPaper 2.
Ce manuel propose une pr&eacute;sentation g&eacute;n&eacute;rale de ces produits, explique les
concepts du d&eacute;veloppement de sites Web et indique comment cr&eacute;er un site
Web simple mais fonctionnel au travers d’une s&eacute;rie de didacticiels.
Les informations contenues dans ce manuel s’adressent aux utilisateurs
d&eacute;butants, et en particulier &agrave; ceux qui ne connaissent pas encore les
produits de la suite Studio 8. Les utilisateurs de niveau interm&eacute;diaire et
avanc&eacute; peuvent am&eacute;liorer leurs connaissances en &eacute;tudiant les techniques
recommand&eacute;es.
R EM A R QU E
Ce manuel ne constitue pas une r&eacute;f&eacute;rence compl&egrave;te d&eacute;crivant toutes les
fonctions des produits Studio. Pour obtenir des informations d&eacute;taill&eacute;es,
consultez le syst&egrave;me d’aide de chaque produit. Pour utiliser le syst&egrave;me
d’aide d’un produit, dans le menu Aide du produit, s&eacute;lectionnez Utilisation
de Nom de produit.
Ce chapitre contient les sections suivantes :
Possibilit&eacute;s offertes par Studio 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Installation de Studio 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Activation de vos produits Studio. . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Enregistrement de vos produits Studio . . . . . . . . . . . . . . . . . . . . . . . 19
9
Possibilit&eacute;s offertes par Studio 8
La suite Studio 8 comprend cinq produits Macromedia : Dreamweaver,
Flash, Fireworks, Contribute et FlashPaper. Chacun d’eux fait l’objet d’une
rapide pr&eacute;sentation dans cette section.
Cette section aborde les sujets suivants :
■
Possibilit&eacute;s offertes par Dreamweaver, page 10
■
Possibilit&eacute;s offertes par Flash, page 11
■
Possibilit&eacute;s offertes par Fireworks, page 13
■
Possibilit&eacute;s offertes par Contribute, page 13
■
Possibilit&eacute;s offertes par FlashPaper, page 14
Possibilit&eacute;s offertes par Dreamweaver
Les fonctions d’&eacute;dition visuelles de Macromedia Dreamweaver vous
permettent de cr&eacute;er rapidement des pages Web sans &eacute;crire une seule ligne
de code. Vous pouvez afficher tous les &eacute;l&eacute;ments ou actifs de votre site et les
glisser depuis un panneau convivial directement dans un document. Vous
pouvez simplifier le processus de d&eacute;veloppement en cr&eacute;ant et modifiant des
images dans Macromedia Fireworks ou une autre application graphique,
avant de les importer directement dans Dreamweaver. Dreamweaver
comporte &eacute;galement des outils qui facilitent l’ajout d’&eacute;l&eacute;ments
Macromedia Flash dans des pages Web.
Outre la possibilit&eacute; de glisser-d&eacute;poser qui facilite la cr&eacute;ation de pages Web,
Dreamweaver propose un environnement de codage complet, comprenant
des outils d’&eacute;dition de code tels que la coloration du code, la cr&eacute;ation de
balises, une barre d’outils de codage et une fonction de r&eacute;duction du code.
Le programme est accompagn&eacute; &eacute;galement de documents de r&eacute;f&eacute;rence pour
les divers langages : feuilles de style en cascade (CSS), JavaScript, CFML
(ColdFusion Markup Language) et d’autres langages. La technologie
Macromedia Roundtrip HTML importe vos documents HTML cod&eacute;s
manuellement sans reformater le code ; vous pouvez ensuite reformater le
code selon votre style de mise en forme de pr&eacute;dilection.
10
Introduction
Dreamweaver permet &eacute;galement de cr&eacute;er des applications Web
dynamiques, reposant sur des bases de donn&eacute;es &agrave; l’aide de technologies
orient&eacute;es serveur telles que CFML, ASP.NET, ASP, JSP et PHP. Si vous
pr&eacute;f&eacute;rez travailler avec des donn&eacute;es XML, Dreamweaver permet de cr&eacute;er
facilement des pages XSLT, d’associer des fichiers XML &agrave; vos pages Web et
d’y afficher des donn&eacute;es XML.
Dreamweaver est enti&egrave;rement personnalisable. Les nouveaux
comportements des inspecteurs de propri&eacute;t&eacute;s et des rapports de site
permettent de cr&eacute;er vos propres objets et commandes, de modifier les
raccourcis clavier et m&ecirc;me de r&eacute;diger du code JavaScript pour augmenter
les possibilit&eacute;s de Dreamweaver.
Pour en savoir plus sur les sources d’informations disponibles pour
l’apprentissage de Dreamweaver, consultez la section Tirer le meilleur parti
de la documentation Dreamweaver, page 22.
Possibilit&eacute;s offertes par Flash
La grande vari&eacute;t&eacute; de fonctions de Macromedia Flash permet de cr&eacute;er de
nombreux types d’applications. Voici quelques exemples d’applications
Flash que vous pouvez g&eacute;n&eacute;rer :
Banni&egrave;res publicitaires, les cartes de vœux en ligne et les
dessins anim&eacute;s, etc. De nombreux autres types d’applications Flash
comprennent &eacute;galement des &eacute;l&eacute;ments d’animation.
Animations
De nombreux jeux sont &eacute;labor&eacute;s avec Flash. Les jeux associent
g&eacute;n&eacute;ralement les possibilit&eacute;s d’animation offertes par Flash avec les
possibilit&eacute;s logiques d’ActionScript.
Jeux
Interfaces utilisateur De nombreux cr&eacute;ateurs de sites Web ont recours &agrave;
Flash pour cr&eacute;er des interfaces utilisateur. Ces interfaces comprennent de
simples barres de navigation, ou encore des &eacute;l&eacute;ments qui en font des
interfaces beaucoup plus complexes. La page d’accueil de
www.macromedia.com contient dans sa partie sup&eacute;rieure un exemple de
barre de navigation cr&eacute;&eacute;e par Flash.
Possibilit&eacute;s offertes par Studio 8
11
Il
s’agit de zones situ&eacute;es dans des pages que les concepteurs utilisent pour
afficher des informations susceptibles d’&ecirc;tre modifi&eacute;es au fil du temps. Par
exemple, une zone de message flexible (FMA) sur le site Web d’un
restaurant peut afficher des informations relatives aux sp&eacute;cialit&eacute;s du menu
de chaque jour. La page d’accueil du site www.macromedia.com vous
pr&eacute;sente un exemple de FMA. Les proc&eacute;dures figurant dans le Didacticiel :
Cr&eacute;ation de votre premi&egrave;re application Flash, page 245 vous guident tout au
long du processus de cr&eacute;ation d’une FMA.
Zones de messages flexibles (FMA, Flexible messaging areas)
Elles comprennent une large gamme
d’applications offrant une interface utilisateur compl&egrave;te, permettant
d’afficher et de manipuler &agrave; distance des donn&eacute;es stock&eacute;es sur Internet.
Une application Internet dynamique peut &ecirc;tre par exemple une application
de calendrier, une application de recherche de prix, un catalogue d’achats,
une application de formation et de test ou toute autre application
pr&eacute;sentant des donn&eacute;es distantes avec une interface graphique dynamique.
Applications Internet dynamiques
Vous trouverez de nombreux exemples de projets r&eacute;els cr&eacute;&eacute;s par des
utilisateurs de Flash sur le site Web de Macromedia &agrave; l’adresse
www.macromedia.com/cfusion/showcase/.
Pour concevoir une application Flash, vous devez g&eacute;n&eacute;ralement effectuer
les op&eacute;rations de base suivantes :
12
Introduction
1.
Choisir les t&acirc;ches de base ex&eacute;cut&eacute;es par l’application.
2.
Cr&eacute;er et importer des &eacute;l&eacute;ments multim&eacute;dia tels que des images, des
vid&eacute;os, du son et du texte.
3.
Disposer les &eacute;l&eacute;ments multim&eacute;dia sur la sc&egrave;ne et dans le sc&eacute;nario afin de
d&eacute;finir quand et comment les faire appara&icirc;tre dans votre application.
4.
Appliquer des effets sp&eacute;ciaux aux &eacute;l&eacute;ments multim&eacute;dia.
5.
Ecrire du code ActionScript permettant de contr&ocirc;ler la fa&ccedil;on dont les
&eacute;l&eacute;ments multim&eacute;dia se comportent, y compris la fa&ccedil;on dont ils
r&eacute;agissent aux interactions de l’utilisateur.
6.
Tester votre application au long du processus de cr&eacute;ation pour
d&eacute;terminer si elle fonctionne comme pr&eacute;vu et rechercher les &eacute;ventuels
bogues lors de sa construction.
7.
Publier votre fichier FLA sous forme de fichier SWF affichable dans une
page Web et lisible avec Flash Player.
Selon votre projet et votre fa&ccedil;on de travailler, vous pouvez d&eacute;cider de
proc&eacute;der &agrave; ces &eacute;tapes dans un ordre diff&eacute;rent. A mesure que vous vous
familiariserez avec Flash et son flux de travail, vous d&eacute;terminerez la fa&ccedil;on
de proc&eacute;der qui vous convient le mieux.
Possibilit&eacute;s offertes par Fireworks
Avec Macromedia Fireworks, vous pouvez cr&eacute;er, modifier et animer des
graphismes Web, ajouter une interactivit&eacute; avanc&eacute;e et optimiser vos images
dans un environnement professionnel. Dans Fireworks, vous pouvez cr&eacute;er
et modifier des images bitmap et des graphiques vectoriels dans une seule et
m&ecirc;me application. Tout reste enti&egrave;rement modifiable, &agrave; tout moment. En
outre, vous pouvez automatiser le d&eacute;roulement du travail pour simplifier
les mises &agrave; jour et les modifications.
Fireworks s’int&egrave;gre aux autres produits Macromedia, tels que
Dreamweaver, Flash, FreeHand et Director, ainsi qu’&agrave; vos applications
graphiques pr&eacute;f&eacute;r&eacute;es et aux &eacute;diteurs HTML pour offrir une solution Web
r&eacute;ellement int&eacute;gr&eacute;e. Exportez facilement vos graphiques Fireworks avec les
codes HTML et JavaScript qui ont &eacute;t&eacute; personnalis&eacute;s pour l’&eacute;diteur HTML
que vous utilisez.
Possibilit&eacute;s offertes par Contribute
En tant que d&eacute;veloppeur ou concepteur Web, vous utilisez une application
de cr&eacute;ation de site Web, telle que Dreamweaver, pour cr&eacute;er votre site Web.
Cela comprend la plannification, la conception, le d&eacute;veloppement, le test
et la publication du site Web. Une fois ce travail effectu&eacute;, vous pouvez
utiliser Macromedia Contribute pour g&eacute;rer votre site et d&eacute;finir des
utilisateurs pour g&eacute;rer le contenu du site.
En tant qu’administrateur Contribute, vous d&eacute;finissez des utilisateurs
Contribute et vous les aidez &agrave; utiliser Contribute pour g&eacute;rer le site Web.
Vous pouvez d&eacute;finir des dossiers et des autorisations utilisateur, qui
d&eacute;terminent quel utilisateur peut modifier le contenu d’un site Web et ce
qu’il peut modifier.
Possibilit&eacute;s offertes par Studio 8
13
Les utilisateurs Contribute g&egrave;rent le site Web. Le flux de travail affichermodifier-publier de Contribute permet aux utilisateurs de facilement
trouver les pages &agrave; modifier, apporter les modifications n&eacute;cessaires et mettre
&agrave; jour la page sur le site Web. L’utilisateur n’a besoin d’aucune exp&eacute;rience
en mati&egrave;re de fichier HTML ou de conception Web. Contribute
fonctionnant comme un traitement de texte, l’utilisateur modifie les pages
de fa&ccedil;on intuitive et famili&egrave;re. Les utilisateurs peuvent ajouter ou mettre &agrave;
jour du texte, des images, des tables, des liens et des documents Microsoft
Word et Excel.
Possibilit&eacute;s offertes par FlashPaper
Macromedia FlashPaper permet de convertir facilement tout document
imprimable en un document Flash (Fichier SWF ou PDF). Les documents
Flash sont g&eacute;n&eacute;ralement de taille beaucoup plus r&eacute;duite que les autres types
de document et vous pouvez les afficher dans n’importe quel navigateur
prenant en charge Flash, ou directement dans Flash Player.
Vous pouvez afficher des documents Flash sur de nombreuses plate-formes,
conserver la mise en forme, les graphiques, les polices, les caract&egrave;res
sp&eacute;ciaux et les couleurs des documents source, quelles que soient
l’application et la plate-forme utilis&eacute;es lors de la cr&eacute;ation du document. Par
exemple, si vous cr&eacute;ez une feuille de calcul Microsoft Excel sur un
ordinateur fonctionnant sous Windows XP, vous pouvez utiliser FlashPaper
pour la convertir en un document Flash, puis l’envoyer &agrave; un utilisateur
Macintosh.
Vous pouvez int&eacute;grer un document Flash dans une page Web ; publier sur
le Web des types de fichier que la plupart des utilisateurs a encore du mal &agrave;
visionner, par exemple des documents Microsoft Project, Microsoft Visio,
et m&ecirc;me QuarkXPress et AutoCAD. Lorsqu’un utilisateur ouvre votre page
Web, le document Flash s’ouvre instantan&eacute;ment, de sorte que l’utilisateur
peut afficher le fichier sans quitter la page Web.
14
Introduction
Les documents Flash s’ex&eacute;cutent &eacute;galement en tant que fichiers autonomes.
Toute personne &eacute;quip&eacute;e de Flash Player peut afficher des fichiers SWF, et
tout utilisateur d’Adobe Acrobat Reader peut afficher des fichiers PDF.
R E MA R Q UE
Vous ne pouvez pas modifier un document Flash dans FlashPaper, si vous
devez actualiser le document, modifiez le document d’origine, puis
convertissez-le &agrave; nouveau en document Flash.
Installation de Studio 8
Cette section d&eacute;crit la proc&eacute;dure d’installation de Studio 8. Vous pouvez
installer Sudio 8 sur des ordinateurs fonctionnant sous Windows et
Macintosh. Macromedia pr&eacute;conise l’installation en une seule op&eacute;ration de
la suite compl&egrave;te ; vous pouvez cependant installer individuellement
chaque application si vous le souhaitez.
Avant d’installer Studio 8, v&eacute;rifiez que vous disposez de la configuration
mat&eacute;rielle et logicielle minimale requise pour chaque produit Studio. Pour
obtenir une liste des configurations syst&egrave;mes requises et des
recommandations pour les diff&eacute;rents produits, consultez le site
www.macromedia.com/go/sysreqs/.
Installation de Studio 8
15
Pour installer Studio 8 sur les syst&egrave;mes d’exploitation
Windows ou Macintosh :
1.
Ins&eacute;rez le CD de Studio 8 dans le lecteur de CD-ROM de votre
ordinateur, pour afficher l’&eacute;cran d’installation de Studio 8.
Si cet &eacute;cran n’appara&icirc;t pas automatiquement, ou si vous effectuez
l’installation depuis un lecteur r&eacute;seau, ouvrez l’Explorateur Windows
pour rechercher le programme Installer.exe Studio 8 dans le r&eacute;pertoire
Accessibilit&eacute;, puis double-cliquez sur le nom de fichier et suivez les
instructions d’installation. Sur Macintosh, double-cliquez sur l’ic&ocirc;ne
d’installation de Studio 8 situ&eacute;e sur le bureau.
2.
Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Pour installer la suite d’outils Studio 8, cliquez sur Installation.
(option recommand&eacute;e).
Pour installer une application seulement, s&eacute;lectionnez-la &agrave; l’&eacute;cran,
puis cliquez sur Installation.
Vous pouvez r&eacute;p&eacute;ter la proc&eacute;dure pour installer s&eacute;par&eacute;ment les
autres produits.
R E MA R Q UE
16
Introduction
Vous ne pouvez pas installer seulement FlashPaper. Lorsque vous
s&eacute;lectionnez FlashPaper et cliquez sur Installation, le programme
d’installation de Contribute d&eacute;marre. Contribute installe automatiquement
FlashPaper.
3.
Suivez les instructions d’installation.
R EM A R QU E
S’il vous est demand&eacute; un mot de passe, entrez le mot de passe de
connexion de l’administrateur syst&egrave;me et cliquez sur OK.
4.
Cliquez sur Termin&eacute; lorsque le processus d’installation est termin&eacute;.
Les applications Studio 8 sont maintenant disponibles.
5.
Sous Windows, s&eacute;lectionnez Programmes &gt; Macromedia dans le menu
D&eacute;marrer. Sous Macintosh, ouvrez le dossier Applications.
Pour afficher la documentation suppl&eacute;mentaire qui
accompagne Studio 8 :
■
Dans le coin inf&eacute;rieur droit de l’&eacute;cran d’installation, s&eacute;lectionnez
l’option d’exploration du contenu du CD.
Pour d&eacute;sinstaller les applications (Windows) :
■
Choisissez D&eacute;marrer &gt; Param&egrave;tres &gt; Panneau de configuration &gt;
Ajout/Suppression de programmes, puis s&eacute;lectionnez l’application
que vous souhaitez d&eacute;sinstaller.
Pour d&eacute;sinstaller les applications (Macintosh) :
■
Glissez-d&eacute;posez le dossier du produit &agrave; d&eacute;sinstaller depuis le dossier
Applications vers l’ic&ocirc;ne de la corbeille.
Installation de Studio 8
17
Activation de vos produits Studio
Si vous disposez d’une licence pour utilisateur unique, vous devez activer
votre licence pour les produits Macromedia dans un d&eacute;lai de trente jours &agrave;
compter de l’installation du programme. Lorsque vous activez un produit
de la suite Studio 8, tous les autres le sont &eacute;galement.
Cette activation peut &ecirc;tre effectu&eacute;e via Internet ou par t&eacute;l&eacute;phone et ne
prend que quelques minutes. Vous ne devez fournir aucune information
personnelle, uniquement le num&eacute;ro de s&eacute;rie de votre produit.
R EMA R Q U E
Pour plus d’informations sur l’activation du produit, connectez-vous au
site www.macromedia.com/go/activation/.
Pour activer un produit :
1.
Double-cliquez sur l’ic&ocirc;ne du fichier ex&eacute;cutable de Dreamweaver, Flash,
Fireworks ou Contribute pour d&eacute;marrer l’un des produits.
R EM A R QU E
Vous ne pouvez pas activer FlashPaper.
2.
Cliquez sur Continuer pour passer &agrave; l’&eacute;cran suivant.
3.
Saisissez votre num&eacute;ro de s&eacute;rie dans la fen&ecirc;tre Activation des produits
Macromedia et cliquez sur Continuer.
Une fois activ&eacute;s, vos produits Studio 8 sont pr&ecirc;ts &agrave; &ecirc;tre utilis&eacute;s.
18
Introduction
Enregistrement de vos produits
Studio
Il est judicieux d’enregistrer vos produits Studio 8 par voie &eacute;lectronique ou
par courrier. L’enregistrement vous permet de b&eacute;n&eacute;ficier du support
technique de Macromedia. Lorsque vous enregistrez un produit de la suite
Studio 8, tous les autres le sont &eacute;galement.
Lorsque vous vous enregistrez, vous pouvez demander &agrave; recevoir des
informations de derni&egrave;re minute concernant les mises &agrave; niveau et les
nouveaux produits Macromedia. Vous pouvez &eacute;galement demander &agrave; &ecirc;tre
averti par courriel des derni&egrave;res mises &agrave; jour disponibles pour les produits
et &agrave; &ecirc;tre inform&eacute; des nouvelles informations mises en ligne sur
www.macromedia.com.
Pour enregistrer un produit :
■
Dans l’un des produits de la suite Studio 8, ouvrez le menu Aide et
s&eacute;lectionnez soit l’option d’enregistrement en ligne soit par courrier,
avec impression d’un formulaire.
Enregistrement de vos produits Studio
19
20
Introduction
CHAPITRE 1
Apprentissage de Studio
1
Macromedia Studio 8 propose toute une gamme de ressources qui
permettent de se familiariser rapidement avec les programmes Studio. Ce
chapitre passe bri&egrave;vement en revue toutes les ressources de documentation
qui sont &agrave; votre disposition, et vous fournit des informations d&eacute;taill&eacute;es
concernant les syst&egrave;mes d’aide des produits Studio.
Ce chapitre contient les sections suivantes :
Avantages de la documentation Studio . . . . . . . . . . . . . . . . . . . . . . 21
Utilisation du syst&egrave;me d’aide de Studio . . . . . . . . . . . . . . . . . . . . . . 38
Avantages de la documentation
Studio
Cette section d&eacute;crit la documentation des produits Studio. Elle vous
renvoie &eacute;galement vers des ressources en ligne tr&egrave;s utiles.
Cette section contient les rubriques suivantes :
■
Tirer le meilleur parti de la documentation Dreamweaver, page 22
■
Avantages de la documentation Flash, page 26
■
Avantages de la documentation Fireworks, page 32
■
Avantages de la documentation de Contribute et FlashPaper, page 34
21
Tirer le meilleur parti de la documentation
Dreamweaver
Dreamweaver comprend diverses ressources qui vous aideront &agrave; vous
familiariser rapidement avec le programme et &agrave; cr&eacute;er facilement vos propres
pages Web. Le syst&egrave;me d’aide de Dreamweaver comprend plusieurs
documents qui vous aident &agrave; vous familiariser avec Dreamweaver,
Dreamweaver Extensibility et ColdFusion. Vous pouvez &eacute;galement
consulter un certain nombre de ressources en ligne qui vous aideront &agrave;
cr&eacute;er des pages Web.
Acc&egrave;s &agrave; la documentation Dreamweaver
Le tableau suivant r&eacute;pertorie la documentation qui se trouve dans le
syst&egrave;me d’aide de Dreamweaver.
Vous pouvez acheter les versions imprim&eacute;es des titres s&eacute;lectionn&eacute;s. Pour
plus d’informations, visitez www.macromedia.com/go/buy_books.
22
Apprentissage de Studio
Titre
Description/
Public vis&eacute;
Emplacement
D&eacute;marrer avec
Dreamweaver
• Affichage dans Dreamweaver :
Introduction de base
S&eacute;lectionner Aide &gt; Bien
aux concepts et &agrave;
d&eacute;marrer avec Dreamweaver
l’interface de
• Affichage en ligne : http://
Dreamweaver, avec
livedocs.macromedia.com/go/
des didacticiels
livedocs_dreamweaver_fr/
d&eacute;taill&eacute;s pour novices.
• Obtention du fichier PDF :
Con&ccedil;u pour des
www.macromedia.com/go/
utilisateurs d&eacute;butants
dw_documentation_fr
mais convient
&eacute;galement aux
utilisateurs de niveaux
avanc&eacute; ou
interm&eacute;diaire qui
d&eacute;sirent se familiariser
avec les nouvelles
fonctionnalit&eacute;s.
Titre
Description/
Public vis&eacute;
Emplacement
Utilisation de
Dreamweaver
Information compl&egrave;te
sur toutes les
fonctionnalit&eacute;s de
Dreamweaver. A
l’intention de tous les
utilisateurs de
Dreamweaver.
• Affichage dans Dreamweaver :
S&eacute;lectionner Aide &gt; Aide
Dreamweaver ou Aide &gt;
Utilisation de Dreamweaver
• Affichage en ligne : http://
livedocs.macromedia.com/go/
livedocs_dreamweaver_fr/
• Obtention du fichier PDF :
www.macromedia.com/go/
dw_documentation_fr
Extension de
Dreamweaver
• Affichage dans Dreamweaver :
Description du cadre
S&eacute;lectionner Aide &gt; Extensions
de Dreamweaver et
de Dreamweaver
l’interface de
• Affichage en ligne : http://
programmation
livedocs.macromedia.com/go/
d’application (API).
livedocs_dreamweaver_fr/
Con&ccedil;u pour les
• Obtention du fichier PDF :
utilisateurs avanc&eacute;s
www.macromedia.com/go/
qui veulent d&eacute;velopper
dw_documentation_fr
l’interface de
Dreamweaver ou bien
la personnaliser
Guide des API
de
Dreamweaver
Description de
l’utilitaire API et l’API
JavaScript, tous deux
vous venant en aide
quand vous
d&eacute;veloppez des
extensions &agrave;
Dreamweaver. Con&ccedil;u
pour les utilisateurs
avanc&eacute;s qui veulent
d&eacute;velopper l’interface
de Dreamweaver ou
bien la personnaliser
• Affichage dans Dreamweaver :
S&eacute;lectionner Aide &gt; R&eacute;f&eacute;rence
API Dreamweaver
• Affichage en ligne : http://
livedocs.macromedia.com/go/
livedocs_dreamweaver_fr/
• Obtention du fichier PDF :
www.macromedia.com/go/
dw_documentation_fr
Avantages de la documentation Studio
23
24
Apprentissage de Studio
Titre
Description/
Public vis&eacute;
Emplacement
Utilisation de
ColdFusion
• Affichage dans Dreamweaver :
Comprend une
S&eacute;lectionnez Aide &gt; Utilisation
s&eacute;lection des livres les
de ColdFusion
plus importants dans le
• Affichage en ligne : http://
lot de la
livedocs.macromedia.com/go/
documentation
livedocs_coldfusion/
ColdFusion.
(L’ensemble complet • Obtention du fichier PDF :
www.macromedia.com/go/
est disponible sur
cf_documentation
LiveDocs.) Cette
documentation a &eacute;t&eacute;
con&ccedil;ue pour toute
personne int&eacute;ress&eacute;e
par ColdFusion, des
d&eacute;butants aux
d&eacute;veloppeurs
exp&eacute;riment&eacute;s.
R&eacute;f&eacute;rence
HTML, server model, • Affichage dans Dreamweaver :
S&eacute;lectionnez Aide &gt;
et autres types de
R&eacute;f&eacute;rence. Pour une liste
manuel de r&eacute;f&eacute;rence,
compl&egrave;te de manuels, cliquez
principalement publi&eacute;s
sur le menu d&eacute;roulant de Book
chez O’Reilly. Con&ccedil;u
dans le Panneau de
pour quiconque a
r&eacute;f&eacute;rences.
besoin de plus
d’informations sur la
syntaxe de codage, les
concepts, etc.
Acc&eacute;der &agrave; des informations compl&eacute;mentaires sur
Dreamweaver en mode interactif
Le tableau suivant r&eacute;capitule les ressources en ligne suppl&eacute;mentaires
relatives &agrave; l’apprentissage de Dreamweaver.
Ressource
Description/
Public vis&eacute;
Emplacement
Centre de
support de
Dreamweaver
Notes techniques,
ainsi que des
informations de
support et de
r&eacute;solution des
probl&egrave;mes destin&eacute;es
aux utilisateurs de
Dreamweaver.
www.macromedia.com/go/
dreamweaver_support_fr
Centre de
d&eacute;veloppeurs
Dreamweaver
Articles et didacticiels www.macromedia.com/go/
permettant d’am&eacute;liorer dreamweaver_devcenter_fr
vos comp&eacute;tences et
d’en acqu&eacute;rir de
nouvelles.
Centre de
documentation
de
Dreamweaver
Manuels de produits
en format PDF, listes
d’erreurs, didacticiels
et notes
d’accompagnement.
www.macromedia.com/go/
dw_documentation_fr
Forums en ligne Discussions et
Macromedia
solutions propos&eacute;es
par les utilisateurs de
Dreamweaver, les
repr&eacute;sentants du
service de support
technique et l’&eacute;quipe
de d&eacute;veloppement de
Dreamweaver.
www.macromedia.com/go/
dreamweaver_newsgroup
Formation
Macromedia
www.macromedia.com/go/
Cours incluant des
t&acirc;ches pratiques et des dreamweaver_training_fr
sc&eacute;narios r&eacute;alistes.
Avantages de la documentation Studio
25
Avantages de la documentation Flash
Le syst&egrave;me d’aide de Macromedia Flash contient un grand nombre
d’informations et de ressources d&eacute;crivant la gamme compl&egrave;te des
fonctionnalit&eacute;s de cr&eacute;ation de Flash et du langage ActionScript. De
nombreuses ressources sont &eacute;galement disponibles en ligne pour vous aider
&agrave; vous familiariser avec Flash. Ce document est con&ccedil;u pour vous aider &agrave;
naviguer entre ces ressources et &agrave; trouver les informations qui vous aideront
au mieux dans la r&eacute;alisation de vos objectifs avec Flash.
Acc&egrave;s &agrave; la documentation Flash
Les tableaux suivants pr&eacute;sentent les documents figurant dans le syst&egrave;me
d’Aide de Flash.
Vous pouvez acheter les versions imprim&eacute;es des titres s&eacute;lectionn&eacute;s. Pour
plus d’informations, visitez www.macromedia.com/go/buy_books.
Informations concernant les fonctionnalit&eacute;s
26
Apprentissage de Studio
Titre
Description/
Public vis&eacute;
Emplacement
Bien d&eacute;marrer
avec Flash
• Affichage dans Flash :
Introduction de base
Choisissez Aide &gt; Utilisation de
aux concepts et &agrave;
Flash
l’interface de Flash,
•
Affichage en ligne :
avec un didacticiel
livedocs.macromedia.com/go/
d&eacute;taill&eacute; pour les
livedocs_flash
novices. S’adresse aux
• Obtention du fichier PDF :
utilisateurs d&eacute;butants
www.macromedia.com/go/
de Flash.
fl_documentation_fr
Utilisation de
Flash
Informations
compl&egrave;tes sur toutes
les fonctionnalit&eacute;s de
Flash &agrave; l’exception
d’ActionScript.
Destin&eacute; &agrave; tous les
utilisateurs de Flash.
• Affichage dans Flash :
Choisissez Aide &gt; Utilisation de
Flash
• Affichage en ligne :
livedocs.macromedia.com/go/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Titre
Description/
Public vis&eacute;
Aide du codeur Informations
FLV
compl&egrave;tes sur
l’utilisation du codeur
FLV.
Destin&eacute; aux
concepteurs Flash
cr&eacute;ant du contenu
vid&eacute;o.
Emplacement
• Affichage dans Flash :
Choisissez Aide &gt; Utilisation de
Flash
• Affichage en ligne :
livedocs.macromedia.com/go/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Didacticiels et exemples
]
Titre
Description/
Public vis&eacute;
Emplacement
Didacticiels
Flash
• Affichage dans Flash :
Ensemble de
Choisissez Aide &gt; Utilisation de
didacticiels &eacute;tape par
Flash
&eacute;tape qui vous
apprend une vari&eacute;t&eacute; de • Affichage en ligne :
livedocs.macromedia.com/go/
techniques pour
livedocs_flash
l’utilisation de Flash
• Obtention du fichier PDF :
par les d&eacute;butants et les
www.macromedia.com/go/
utilisateurs plus
fl_documentation_fr
avanc&eacute;s. Destin&eacute; &agrave;
tous les utilisateurs de
Flash.
• Affichage dans Flash :
Exemples Flash Ensemble de fichiers
Choisissez Aide &gt; Utilisation de
d’exemple illustrant les
Flash
diff&eacute;rentes techniques
• Affichage en ligne :
et fonctionnalit&eacute;s
livedocs.macromedia.com/go/
Flash, accompagn&eacute;s
livedocs_flash
d’une description
• Obtention du fichier PDF :
d&eacute;taill&eacute;e pour
www.macromedia.com/go/
chacune. Destin&eacute; &agrave;
fl_documentation_fr
tous les utilisateurs de
Flash.
Avantages de la documentation Studio
27
ActionScript
Titre
Description/
Public vis&eacute;
Emplacement
Formation &agrave;
ActionScript
2.0 dans Flash
• Affichage dans Flash :
Une introduction
Choisissez Aide &gt; Utilisation de
d&eacute;taill&eacute;e au codage
Flash
avec ActionScript,
comprenant un grand • Affichage en ligne :
livedocs.macromedia.com/go/
nombre d’exemples de
livedocs_flash
code r&eacute;utilisables.
• Obtention du fichier PDF :
Destin&eacute; aux
www.macromedia.com/go/
utilisateurs novices et
fl_documentation_fr
interm&eacute;diaires de
Flash.
Guide de
r&eacute;f&eacute;rence
ActionScript
2.0
Entr&eacute;es de r&eacute;f&eacute;rence
de style dictionnaire
pour chaque terme du
langage ActionScript.
Destin&eacute; &agrave; tous les
utilisateurs
d’ActionScript.
• Affichage dans Flash :
Choisissez Aide &gt; Utilisation de
Flash
• Affichage en ligne :
livedocs.macromedia.com/go/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Titre
Description/
Public vis&eacute;
Emplacement
Utilisation des
composants
• Affichage dans Flash :
Informations
Choisissez Aide &gt; Utilisation de
concernant l’utilisation
Flash
et la personnalisation
des composants dans • Affichage en ligne :
livedocs.macromedia.com/go/
vos documents Flash.
livedocs_flash
Destin&eacute; &agrave; tous les
•
Obtention du fichier PDF :
utilisateurs de Flash.
www.macromedia.com/go/
fl_documentation_fr
Composants
28
Apprentissage de Studio
Titre
Description/
Public vis&eacute;
Emplacement
R&eacute;f&eacute;rence du
langage des
composants
Entr&eacute;es de r&eacute;f&eacute;rence
de style dictionnaire
pour chaque terme de
l’API du composant
ActionScript.
Destin&eacute; &agrave; tous les
utilisateurs de Flash.
• Affichage dans Flash :
Choisissez Aide &gt; Utilisation de
Flash
• Affichage en ligne :
livedocs.macromedia.com/go/
livedocs_flash
• Obtention du fichier PDF :
www.macromedia.com/go/
fl_documentation_fr
Extension de Flash
Titre
Description/
Public vis&eacute;
Emplacement
Extension de
Flash
• Affichage dans Flash :
Informations
Choisissez Aide &gt; Utilisation de
concernant l’ajout de
Flash
fonctionnalit&eacute; &agrave; l’outil
• Affichage en ligne :
de programmation
livedocs.macromedia.com/go/
Flash JavaScript.
livedocs_flash
Destin&eacute; aux
• Obtention du fichier PDF :
utilisateurs JavaScript
www.macromedia.com/go/
et aux utilisateurs
fl_documentation_fr
Flash avanc&eacute;s.
Flash Lite
Titre
Description/
Public vis&eacute;
Emplacement
Bien d&eacute;marrer
avec Flash Lite
• Affichage dans Flash :
Introduction aux flux
Choisissez Aide &gt; Utilisation de
de travail Flash Lite et
Flash
remarques concernant
• Affichage en ligne :
la programmation.
livedocs.macromedia.com/go/
S’adresse aux
livedocs_flash
d&eacute;veloppeurs de
• Obtention du fichier PDF :
t&eacute;l&eacute;phones et
www.macromedia.com/go/
p&eacute;riph&eacute;riques mobiles
flash_lite_documentation_fr
et aux utilisateurs de
Flash de niveau
interm&eacute;diaire.
Avantages de la documentation Studio
29
Titre
Description/
Public vis&eacute;
Emplacement
• Affichage dans Flash :
D&eacute;veloppement Informations sur la
Choisissez Aide &gt; Utilisation de
cr&eacute;ation de contenu
d’applications
Flash
Flash pour les
Flash Lite
• Affichage en ligne :
t&eacute;l&eacute;phones et
livedocs.macromedia.com/go/
p&eacute;riph&eacute;riques mobiles.
livedocs_flash
S’adresse aux
• Obtention du fichier PDF :
d&eacute;veloppeurs de
www.macromedia.com/go/
t&eacute;l&eacute;phones et
flash_lite_documentation_fr
p&eacute;riph&eacute;riques mobiles
et aux utilisateurs de
Flash de niveau
interm&eacute;diaire.
30
Apprentissage de Studio
Formation &agrave;
ActionScript
Flash Lite 1.x
• Affichage dans Flash :
Informations sur
Choisissez Aide &gt; Utilisation de
l’&eacute;criture de code
Flash
ActionScript pour les
• Affichage en ligne :
t&eacute;l&eacute;phones et
livedocs.macromedia.com/go/
p&eacute;riph&eacute;riques mobiles.
livedocs_flash
S’adresse aux
• Obtention du fichier PDF :
d&eacute;veloppeurs de
www.macromedia.com/go/
t&eacute;l&eacute;phones et
flash_lite_documentation_fr
p&eacute;riph&eacute;riques mobiles
et aux utilisateurs de
Flash de niveau
interm&eacute;diaire.
Guide de
r&eacute;f&eacute;rence
ActionScript
Flash Lite 1.x
Entr&eacute;es de r&eacute;f&eacute;rence • Affichage dans Flash :
Choisissez Aide &gt; Utilisation de
de style dictionnaire
Flash
pour chaque terme du
•
Affichage en ligne :
langage ActionScript
livedocs.macromedia.com/go/
Flash Lite 1.x.
livedocs_flash
S’adresse aux
• Obtention du fichier PDF :
d&eacute;veloppeurs de
www.macromedia.com/go/
t&eacute;l&eacute;phones et
flash_lite_documentation_fr
p&eacute;riph&eacute;riques mobiles
et aux utilisateurs de
Flash de niveau
interm&eacute;diaire.
Acc&egrave;s aux ressources Flash en ligne
suppl&eacute;mentaires
Le tableau suivant r&eacute;pertorie les ressources en ligne suppl&eacute;mentaires
relatives &agrave; l’apprentissage de Flash.
Ressource
Description
Emplacement
Centre de
support de
Flash
Notes techniques,
ainsi que des
informations de
support et de
r&eacute;solution des
probl&egrave;mes.
• www.macromedia.com/go/
flash_support_fr
Centre des
d&eacute;veloppeurs
de Flash
Articles et didacticiels
permettant de
d&eacute;velopper vos
comp&eacute;tences et d’en
acqu&eacute;rir de nouvelles.
• www.macromedia.com/go/
flash_devcenter_fr
Versions PDF et
Centre de
HTML de la
ressources et
documentation Flash.
de
documentation
de Flash
• www.macromedia.com/go/
fl_documentation_fr
Forums en ligne Discussions et
Macromedia
solutions propos&eacute;es
par les utilisateurs de
Flash, les
repr&eacute;sentants du
service de support
technique et l’&eacute;quipe
de d&eacute;veloppement de
Flash.
• www.macromedia.com/go/
flash_forums
Avantages de la documentation Studio
31
Ressource
Description
Emplacement
Formation
Macromedia
Salle de formation et
instructions en ligne
propos&eacute;es par les
partenaires de
formation
Macromedia.
• www.macromedia.com/go/
flash_training_fr
Gestionnaire de
ressources
Flash (Anglais
uniquement)
Autre afficheur pour la • www.macromedia.com/go/
flash_resource_manager
visualisation du
syst&egrave;me d’aide Flash
en dehors de
l’application Flash.
Avantages de la documentation Fireworks
Fireworks propose toute une gamme de supports qui vous aident &agrave; vous
familiariser rapidement avec le programme. Le syst&egrave;me d’aide Fireworks
comprend plusieurs documents qui permettent d’apprendre &agrave; utiliser et &agrave;
d&eacute;velopper Fireworks. Vous pouvez &eacute;galement consulter un certain nombre
de ressources en ligne qui vous aideront &agrave; ma&icirc;triser Fireworks.
Acc&egrave;s &agrave; la documentation Fireworks
Le tableau suivant r&eacute;pertorie la documentation incluse dans le syst&egrave;me
d’aide Fireworks.
32
Apprentissage de Studio
Titre
Description/
Public vis&eacute;
Emplacement
Bien d&eacute;marrer
avec Fireworks
Introduction de base
aux concepts et &agrave;
l’interface de
Fireworks, avec des
didacticiels pour
novices d&eacute;taill&eacute;s.
S’adresse aux
utilisateurs d&eacute;butants
de Fireworks.
• Affichage dans Fireworks :
S&eacute;lectionner Aide &gt; Bien
d&eacute;marrer avec Fireworks
• Affichage en ligne :
www.macromedia.com/go/
livedocs_fireworks_fr
• Obtention du fichier PDF :
www.macromedia.com/go/
fireworks_documentation_fr
Titre
Description/
Public vis&eacute;
Emplacement
Utilisation de
Fireworks
• Affichage dans Fireworks :
Informations
S&eacute;lectionnez Aide &gt; Utilisation
compl&egrave;tes sur toutes
de Fireworks
les fonctionnalit&eacute;s de
Fireworks. S’adresse &agrave; • Affichage en ligne :
www.macromedia.com/go/
tous les utilisateurs de
livedocs_fireworks_fr
Fireworks.
• Obtention du fichier PDF :
www.macromedia.com/go/
fireworks_documentation_fr
Extension de
Fireworks
Informations sur l’ajout • Affichage dans Fireworks :
S&eacute;lectionnez Aide &gt;
de fonctionnalit&eacute;s &agrave;
Extensions de Fireworks
Fireworks par le biais
•
Affichage en ligne :
de JavaScript. Destin&eacute;
www.macromedia.com/go/
aux utilisateurs
livedocs_fireworks_fr
JavaScript et aux
• Obtention du fichier PDF :
utilisateurs Fireworks
www.macromedia.com/go/
avanc&eacute;s.
fireworks_documentation_fr
Acc&egrave;s aux ressources Fireworks en ligne
suppl&eacute;mentaires
Le tableau suivant r&eacute;pertorie les ressources en ligne suppl&eacute;mentaires
relatives &agrave; l’apprentissage de Fireworks.
Ressource
Description
Emplacement
Centre de
ressources
documentaires
de Fireworks
Permet d’obtenir des
manuels de produit,
des errata, des
didacticiels et des
notes de publication.
• www.macromedia.com/go/
fw_documentation_fr
Centre des
d&eacute;veloppeurs
Fireworks
Articles et didacticiels
permettant de
d&eacute;velopper vos
comp&eacute;tences et d’en
acqu&eacute;rir de nouvelles.
• www.macromedia.com/go/
fireworks_devnet_fr
Avantages de la documentation Studio
33
Ressource
Description
Emplacement
Centre de
support
Fireworks
Notes techniques,
ainsi que des
informations de
support et de
r&eacute;solution des
probl&egrave;mes destin&eacute;es
aux utilisateurs de
Fireworks.
• www.macromedia.com/go/
fireworks_support
Forum de
discussions
Fireworks
Discussions et
solutions propos&eacute;es
par les utilisateurs de
Fireworks, les
repr&eacute;sentants du
service de support
technique et l’&eacute;quipe
de d&eacute;veloppement de
Fireworks.
• Affichage dans un lecteur de
news : news://
forums.macromedia.com/
macromedia.fireworks
• Affichage dans un navigateur :
www.macromedia.com/go/
fireworks_forum
Formation
Macromedia
Cours incluant des
t&acirc;ches pratiques et
des sc&eacute;narios
r&eacute;alistes.
• www.macromedia.com/go/
fireworks_training_fr
Avantages de la documentation de
Contribute et FlashPaper
Contribute et FlashPaper proposent toute une gamme de supports qui
permettent de se familiariser rapidement avec les programmes. Les deux
produits comportent plusieurs documents qui peuvent vous aider &agrave; vous
familiariser avec Contribute et FlashPaper. Vous pouvez &eacute;galement
consulter un certain nombre de ressources en ligne qui vous aideront &agrave;
apprendre comment utiliser Contribute et FlashPaper.
34
Apprentissage de Studio
Acc&egrave;s &agrave; la documentation de Contribute et
FlashPaper
Le tableau suivant r&eacute;capitule la documentation incluse dans Contribute et
FlashPaper.
Titre
Description/
Public vis&eacute;
Emplacement
D&eacute;marrage
rapide de
Contribute
Introduction de base &agrave; • Dans Contribute :
S&eacute;lectionnez Aide &gt; Guide de
l’installation de
d&eacute;marrage rapide
Contribute, &agrave; la
• Afficher le format FlashPaper :
connexion du site Web
www.macromedia.com/go/
et &agrave; la r&eacute;alisation
contribute_docs_fr
rapide de certaines
t&acirc;ches &eacute;l&eacute;mentaires.
S’adresse aux
utilisateurs d&eacute;butants
de Contribute.
• Affichage en ligne :
D&eacute;ploiement de Pr&eacute;sentation de ce
livedocs.macromedia.com
Contribute
que l’administrateur
•
Obtention du fichier PDF :
doit savoir lorsqu’il
www.macromedia.com/go/
d&eacute;ploie Contribute au
contribute_docs_fr
sein d’un
• Dans Contribute :
&eacute;tablissement. Les
S&eacute;lectionnez Aide &gt;
sujets abord&eacute;s
Macromedia Contribute, puis
concernent la
Administration de Contribute.
d&eacute;finition des
autorisations au niveau
du serveur et du
r&eacute;seau, la
configuration de
Contribute pour
l’utiliser avec votre site
Web, la gestion des
utilisateurs et
l’explication de la
structure du site.
S’adresse aux
administrateurs de
Contribute.
Avantages de la documentation Studio
35
36
Apprentissage de Studio
Titre
Description/
Public vis&eacute;
Emplacement
Utilisation et
administration
de Contribute
Information compl&egrave;te
sur toutes les
fonctionnalit&eacute;s de
Contribute. S’adresse
&agrave; tous les utilisateurs
et administrateurs de
Contribute
• Dans Contribute :
S&eacute;lectionnez Aide &gt;
Macromedia Contribute
• Affichage en ligne :
livedocs.macromedia.com
• Obtention du fichier PDF :
www.macromedia.com/go/
contribute_docs_fr
Panneau
Comment...
• Dans Contribute :
Instructions rapides
S&eacute;lectionnez Affichage &gt; Zone
&eacute;tape par &eacute;tape pour la
lat&eacute;rale
r&eacute;alisation de
certaines t&acirc;ches
communes de
Contribute. S’adresse
aux utilisateurs et
administrateurs de
Contribute
Didacticiel
Contribute
• Dans Contribute :
Didacticiel &eacute;tape par
S&eacute;lectionnez Aide &gt;
&eacute;tape qui vous guide
Didacticiel Contribute
dans la r&eacute;alisation de
t&acirc;ches repr&eacute;sentatives
de Contribute. Dans ce
didacticiel, vous
mettez &agrave; jour les pages
d’un site Web exemple
et vous vous
familiarisez
rapidement avec les
fonctionnalit&eacute;s de
Contribute. S’adresse
aux utilisateurs
d&eacute;butants de
Contribute.
Utilisation de
FlashPaper
Information compl&egrave;te • Dans Contribute :
S&eacute;lectionnez Aide &gt; Utilisation
sur toutes les
de FlashPaper
fonctionnalit&eacute;s de
FlashPaper. Destin&eacute; &agrave; • www.macromedia.com/go/
flashpaper_documentation_fr
tous les utilisateurs de
FlashPaper.
Acc&egrave;s aux ressources suppl&eacute;mentaires en ligne
de Contribute et FlashPaper
Le tableau suivant r&eacute;pertorie les ressources en ligne suppl&eacute;mentaires
relatives &agrave; l’apprentissage de Contribute et FlashPaper.
Ressource
Description
Emplacement
Centre de
ressources
documentaires
de Contribute
Permet d’obtenir des
manuels de produit,
des errata, des
didacticiels et des
notes de publication.
• www.macromedia.com /go/
contribute_docs_fr
Centre des
d&eacute;veloppeurs
Contribute
Articles et didacticiels
permettant de
d&eacute;velopper vos
comp&eacute;tences et d’en
acqu&eacute;rir de nouvelles.
• www.macromedia.com/go/
contribute_devcenter_fr
Centre de
support de
Contribute
Notes techniques,
ainsi que des
informations de
support et de
r&eacute;solution des
probl&egrave;mes destin&eacute;es
aux utilisateurs de
Contribute.
• www.macromedia.com/go/
contribute_support
Forum
Contribute
Discussions et
informations
permettant de
r&eacute;soudre les
probl&egrave;mes fournies
par les utilisateurs de
Contribute, les
techniciens du centre
d’assistance et
l’&eacute;quipe de
d&eacute;veloppement de
Contribute.
• www.macromedia.com/go/
contribute_forums
Formation
Macromedia
Cours incluant des
t&acirc;ches pratiques et
des sc&eacute;narios
r&eacute;alistes.
• www.macromedia.com/go/
contribute_training
Avantages de la documentation Studio
37
Ressource
Description
Emplacement
Centre de
ressources
documentaires
de FlashPaper
Permet d’obtenir des
manuels de produit,
des errata, des
didacticiels et des
notes de publication.
• www.macromedia.com/go/
flashpaper_documentation_fr
Centre de
support de
FlashPaper
Notes techniques,
ainsi que des
informations de
support et de
r&eacute;solution des
probl&egrave;mes destin&eacute;es
aux utilisateurs de
FlashPaper.
• www.macromedia.com/go/
flashpaper_support
Forum
FlashPaper
Discussions et
solutions propos&eacute;es
par les utilisateurs de
FlashPaper, les
repr&eacute;sentants du
service de support
technique et l’&eacute;quipe
de d&eacute;veloppement de
FlashPaper.
• www.macromedia.com/go/
flashpaper_forums
Utilisation du syst&egrave;me d’aide de
Studio
Les syst&egrave;mes d’aide en ligne des produits Studio sont disponibles dans le
menu Aide de chacun des produits. Chaque syst&egrave;me d’aide propose des
informations d&eacute;taill&eacute;es concernant toutes les t&acirc;ches pouvant &ecirc;tre r&eacute;alis&eacute;es
avec les produits Studio.
Cette section indique comment vous pouvez utiliser les syst&egrave;mes d’aide
Studio pour rechercher les informations dont vous avez besoin.
R EM A R QU E
38
Apprentissage de Studio
Pour voir une liste de documents disponibles dans l’aide de Studio, voir
Avantages de la documentation Studio, page 21.
Cette section contient les rubriques suivantes :
■
Utilisation des syst&egrave;mes d’aide de Dreamweaver, Fireworks, Contribute et
FlashPaper, page 39
■
Utilisation du syst&egrave;me d’aide de Flash, page 43
Utilisation des syst&egrave;mes d’aide de
Dreamweaver, Fireworks, Contribute et
FlashPaper
Les syst&egrave;mes d’aide en ligne disponibles &agrave; partir du menu Aide de chaque
produit Studio fournissent des renseignements d&eacute;taill&eacute;s sur toutes les t&acirc;ches
que vous pouvez accomplir avec le produit. Les syst&egrave;mes d’aide de
Dreamweaver, Fireworks, Contribute et FlashPaper fonctionnent tous de la
m&ecirc;me fa&ccedil;on.
R EM A R QU E
Pour plus d’informations concernant l’utilisation du syst&egrave;me d’aide Flash,
voir Utilisation du syst&egrave;me d’aide de Flash, page 43.
Cette section contient les rubriques suivantes :
■
Ouverture de l’Aide d’un produit, page 40
■
Chercher dans l’Aide, page 40
■
Utilisation de l’index de l’Aide, page 41
■
Utilisation de la page de d&eacute;marrage, page 42
■
Impression de la documentation, page 42
■
Achat de la documentation imprim&eacute;e, page 42
■
Discussion portant sur la documentation de Studio avec LiveDocs, page 42
Utilisation du syst&egrave;me d’aide de Studio
39
Ouverture de l’Aide d’un produit
Vous pouvez acc&eacute;der &agrave; l’Aide du produit pendant que vous travaillez avec le
produit.
Pour ouvrir l’Aide de Dreamweaver :
■
S&eacute;lectionnez Aide &gt; Aide de Dreamweaver.
Pour ouvrir l’Aide de Fireworks :
■
S&eacute;lectionnez Aide &gt; Aide de Fireworks.
Pour ouvrir l’Aide de Contribute :
■
S&eacute;lectionnez Aide &gt; Macromedia Contribute.
Pour ouvrir l’Aide de FlashPaper :
■
S&eacute;lectionnez Aide &gt; Utilisation de FlashPaper
Chercher dans l’Aide
Vous pouvez effectuer une recherche en texte int&eacute;gral dans les syst&egrave;mes
d’aide.
Pour chercher dans l’Aide du produit (Windows) :
1.
Dans le syst&egrave;me d’aide, cliquez sur l’onglet Recherche.
2.
Tapez un mot ou une expression dans la bo&icirc;te de texte, puis cliquez sur
Liste des sujets.
3.
Double-cliquez sur un sujet dans la liste des r&eacute;sultats afin de l’afficher.
CON S EI L
Pour chercher dans l’Aide du produit (Macintosh) :
Pour chercher une
expression
sp&eacute;cifique, l’entourer
de double
guillemets.
40
Apprentissage de Studio
1.
Dans le syst&egrave;me d’aide, tapez un mot ou une expression dans la bo&icirc;te de
texte. Posez une question, puis appuyez sur Retour.
2.
Double-cliquez sur un sujet dans la liste des r&eacute;sultats afin de l’afficher.
Utilisation de l’index de l’Aide
Vous pouvez trouver rapidement des informations dans l’index de l’Aide.
Pour utiliser l’index (Windows) :
1.
Dans le syst&egrave;me d’aide, cliquez sur l’onglet Index.
2.
Faites d&eacute;filer la liste alphab&eacute;tique jusqu’&agrave; l’entr&eacute;e d’index voulue, puis
double-cliquez dessus pour afficher l’information pertinente.
1.
Dans le syst&egrave;me d’aide, cliquez sur le lien Index dans le sommaire.
2.
Cliquez sur une lettre et faites d&eacute;filer la liste jusqu’&agrave; l’entr&eacute;e d’index
recherch&eacute;e.
3.
Cliquez sur un nombre en regard de l’entr&eacute;e afin d’obtenir l’affichage de
l’information index&eacute;e.
C O N S EI L
Pour utiliser l’index (Macintosh) :
Vous pouvez
commencer &agrave; taper
un mot-cl&eacute; dans la
zone de texte pour
atteindre rapidement
l’entr&eacute;e d’index
recherch&eacute;e.
Changement de la taille de police
Vous pouvez modifier la taille de la police utilis&eacute;e par le syst&egrave;me d’aide.
Pour changer la taille de la police dans l’afficheur de l’aide de
Windows :
1.
Ouvrez Internet Explorer.
La taille de la police dans l’afficheur de l’aide de Windows est d&eacute;finie
dans Internet Explorer.
2.
S&eacute;lectionnez Affichage &gt; Taille de texte, puis s&eacute;lectionnez une taille.
Pour changer la taille de la police dans l’afficheur de l’aide
Macintosh :
■
Dans l’aide, s&eacute;lectionnez Edition &gt; R&eacute;duire la taille de la police ou
Edition &gt; Augmenter la taille de la police.
Utilisation du syst&egrave;me d’aide de Studio
41
Utilisation de la page de d&eacute;marrage
Lorsque vous lancez un produit Studio sans ouvrir de document, la page de
d&eacute;marrage s’affiche dans l’environnement de travail. Cette page permet
d’acc&eacute;der rapidement aux didacticiels, aux fichiers r&eacute;cents et &agrave; Exchange
pour le produit, d’o&ugrave; vous pouvez am&eacute;liorer certaines fonctions. Vous
pouvez utiliser la Page de d&eacute;marrage tout comme une page Web. Pour
utiliser une des fonctionnalit&eacute;s que vous voyez, cliquez sur l’une d’elles.
Pour d&eacute;sactiver la Page de d&eacute;marrage :
1.
Ex&eacute;cutez un produit Studio, sans ouvrir de document.
La Page de d&eacute;marrage appara&icirc;t.
2.
Cliquez sur Ne plus afficher.
Impression de la documentation
Les livres suivants sont disponibles en format PDF sur le site Web de
Macromedia sous www.macromedia.com/go/dw_documentation_fr:
Vous pouvez imprimer tout ou partie du PDF sur votre propre imprimante
ou vous pouvez remettre le PDF &agrave; une boutique qui fait des copies.
Achat de la documentation imprim&eacute;e
Vous pouvez acheter les versions imprim&eacute;es des titres Studio s&eacute;lectionn&eacute;s.
Pour plus d’informations, visitez www.macromedia.com/go/buy_books.
Discussion portant sur la documentation de
Studio avec LiveDocs
La documentation est &eacute;galement disponible de mani&egrave;re interactive dans le
format LiveDocs. La version LiveDocs de l’Aide ressemble beaucoup &agrave;
l’aide du produit mais elle permet de faire des commentaires sur le contenu
des pages d’aide individuelles. Vous pouvez ajouter des renseignements
utiles sur un sujet donn&eacute; bas&eacute; sur votre propre exp&eacute;rience ou solliciter l’avis
de coll&egrave;gues utilisateurs.
42
Apprentissage de Studio
Utilisation du syst&egrave;me d’aide de Flash
Le syst&egrave;me d’aide en ligne, disponible dans le menu Aide, fournit des
informations d&eacute;taill&eacute;es sur toutes les t&acirc;ches ex&eacute;cutables avec Flash.
Le syst&egrave;me d’aide de Flash fonctionne diff&eacute;remment des syst&egrave;mes d’aide de
Dreamweaver, Fireworks, Contribute et FlashPaper.
R EM A R QU E
Pour plus d’informations concernant l’utilisation des syst&egrave;mes d’aide des
autres produits Studio, consultez la rubrique Utilisation des syst&egrave;mes
d’aide de Dreamweaver, Fireworks, Contribute et FlashPaper, page 39.
Cette section contient les rubriques suivantes :
■
Ouverture du panneau Aide, page 43
■
Recherche dans le syst&egrave;me d’aide, page 44
■
Utilisation de l’aide contextuelle, page 46
■
Impression de la documentation Flash, page 47
■
Achat de la documentation imprim&eacute;e, page 47
■
Discussion portant sur la documentation de Flash avec LiveDocs, page 48
■
Contr&ocirc;le de l’apparence du panneau d’aide, page 49
■
Obtention des mises &agrave; jour de l’aide Flash, page 50
Ouverture du panneau Aide
Le panneau d’aide de Flash contient l’ensemble des informations
d’assistance aux utilisateurs qui accompagnent l’application Flash.
Pour acc&eacute;der &agrave; l’aide et au sommaire :
1.
Pour ouvrir le panneau Aide, choisissez Aide &gt; Aide ou appuyez sur F.
2.
Si le sommaire n’est pas visible, cliquez sur le bouton Sommaire pour
l’afficher.
La liste des guides disponibles s’affiche.
3.
Cliquez sur un titre de manuel pour l’ouvrir et afficher ses rubriques.
Utilisation du syst&egrave;me d’aide de Studio
43
4.
Cliquez sur un titre de rubrique pour l’afficher.
R EM A R QU E
La hi&eacute;rarchie de rubrique pour la rubrique en cours est affich&eacute;e en haut de
chaque page d’aide.
Recherche dans le syst&egrave;me d’aide
Flash Basic 8 et Flash Professional 8 offrent des possibilit&eacute;s de recherche
&eacute;tendues permettant d’acc&eacute;der facilement aux informations recherch&eacute;es.
Dans le panneau d’aide de Flash, vous pouvez rechercher des pages d’aide
contenant des mots ou des expressions sp&eacute;cifiques.
Vous pouvez effectuer une recherche dans l’aide de Flash de l’une des
mani&egrave;res suivantes:
: renvoie une liste des pages d’aide
contenant le mot sp&eacute;cifi&eacute;. Par exemple, vous pouvez saisir sc&eacute;nario dans le
champ de recherche. Cette recherche renvoie une liste des pages d’aide
contenant le mot sc&eacute;nario ou Sc&eacute;nario.
Recherche sur un mot unique
: renvoie une liste des pages d’aide
contenant chacun des termes de la recherche que vous entrez. Dans ce cas,
le mot et est implicite dans la recherche. Par exemple, vous pouvez saisir
clip d’animation dans le champ de recherche. Cette action renvoie une liste
des pages contenant &agrave; la fois animation et clip—c’est-&agrave;-dire, clip animation,
animation clip ou animation.....clip, etc.
Recherche sur plusieurs mots
Les recherches Explicit AND/OR (ET/OU explicite) utilisent les mots et ou
ou pour affiner les r&eacute;sultats de la recherche. Par exemple, vous pouvez saisir
sc&eacute;nario et image-cl&eacute; ou interpolation dans le champ de recherche. Cette
action renvoie une liste des pages d’aide contenant sc&eacute;nario et image-cl&eacute; et
les pages d’aide contenant sc&eacute;nario et interpolation.
Recherche d’expression exacte : vous avez la possibilit&eacute; d’utiliser des
guillemets pour indiquer que l’aide ne doit renvoyer que les pages
contenant exactement l’expression que vous avez entr&eacute;e. Par exemple, vous
pouvez saisir &laquo; interpolation de mouvement &raquo; dans le champ de recherche.
Cela renverra une liste des pages d’aide contenant l’expression interpolation
de mouvement, et non des pages contenant des occurrences s&eacute;par&eacute;es de
mouvement et interpolation.
44
Apprentissage de Studio
La recherche d’expression exacte avec la pr&eacute;cision explicite de ET/OU
permet d’associer les guillemets aux mots et ou ou pour affiner vos
recherches. Par exemple, vous pouvez saisir &laquo; interpolation de
mouvement &raquo; et &laquo; ActionScript &raquo; dans le champ de recherche. Cette
recherche renverra une liste de pages contenant &agrave; la fois l’expression
interpolation de mouvement et le mot ActionScript.
Pour rechercher un mot ou une expression dans le panneau
Aide :
1.
Dans le menu Cat&eacute;gorie, s&eacute;lectionnez une cat&eacute;gorie de guides &agrave;
rechercher.
Pour rechercher tous les guides, s&eacute;lectionnez Tous les sujets.
2.
Entrez un mot ou une expression dans la zone de texte, puis cliquez sur
Rechercher.
Une liste des rubriques d’aide contenant le mot ou l’expression
s’affiche ; elle est organis&eacute;e par guide.
3.
Cliquez sur une rubrique d’aide pour la s&eacute;lectionner dans la liste.
La rubrique appara&icirc;t dans la table des mati&egrave;res du panneau d’Aide. Le
chemin qui conduit vers la rubrique dans la table des mati&egrave;res appara&icirc;t
en haut de chaque page d’aide.
R E MA R QU E
Cliquez sur Effacer pour revenir &agrave; la vue Table des mati&egrave;res.
Pour trouver des informations de r&eacute;f&eacute;rence concernant un terme sp&eacute;cifique
de ActionScript, utilisez Guide de r&eacute;f&eacute;rence du langage ActionScript 2.0 ou
utilisez la fonction de recherche.
Pour rechercher un mot ou une expression dans une page
d’aide sp&eacute;cifique :
1.
Rep&eacute;rez l’emplacement de la page d’aide dans laquelle vous voulez
effectuer la recherche.
2.
Cliquez sur la page d’aide de fa&ccedil;on &agrave; lui donner le focus.
3.
Appuyez sur Ctrl+F (Windows) ou sur Commande+F (Macintosh).
Utilisation du syst&egrave;me d’aide de Studio
45
4.
Dans la bo&icirc;te de dialogue Rechercher, entrez le mot ou l’expression que
vous voulez rechercher puis cliquez sur Rechercher suivant.
Si le mot ou l’expression existe dans la page d’aide en cours, il est mis
en surbrillance dans le panneau d’Aide.
Utilisation de l’aide contextuelle
Le panneau Aide contient des informations de r&eacute;f&eacute;rence contextuelles
auxquelles il est possible d’acc&eacute;der depuis le panneau Actions. Cliquer sur
un terme ActionScript dans le panneau Actions permet d’afficher les
informations d’aide sur ce terme.
Pour acc&eacute;der &agrave; l’aide contextuelle depuis le panneau Actions :
1.
Pour s&eacute;lectionner un &eacute;l&eacute;ment de r&eacute;f&eacute;rence, effectuez l’une des
op&eacute;rations suivantes:
■
■
■
2.
S&eacute;lectionnez un article dans la bo&icirc;te &agrave; outils du panneau Actions
(dans la partie gauche du panneau Actions).
S&eacute;lectionnez un mot ActionScript dans la fen&ecirc;tre de script du
panneau Actions.
Placez le point d’insertion avant le terme ActionScript dans la
fen&ecirc;tre Script du panneau Actions.
Pour ouvrir la page de r&eacute;f&eacute;rence de l’&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans le
panneau Aide, effectuez l’une des op&eacute;rations suivantes :
■
■
■
Appuyez sur la touche F1.
Cliquez avec le bouton droit de la souris sur l’&eacute;l&eacute;ment et
s&eacute;lectionnez Afficher l’aide.
Cliquez sur R&eacute;f&eacute;rence au-dessus de la fen&ecirc;tre de script.
Pour acc&eacute;der &agrave; l’aide contextuelle depuis le panneau Flash :
■
Cliquez sur le menu contextuel dans le panneau et s&eacute;lectionnez Aide.
Pour acc&eacute;der &agrave; l’aide contextuelle depuis une bo&icirc;te de
dialogue :
■
R EM A R QU E
46
Apprentissage de Studio
Cliquez sur l’ic&ocirc;ne Aide de la bo&icirc;te de dialogue.
Le manuel Didacticiels Flash dans le panneau Aide contient de nombreux
didacticiels constituant une introduction aux fonctions de Flash. Ces
didacticiels permettent de vous entra&icirc;ner sur des exemples isol&eacute;s. Si vous
d&eacute;couvrez Flash ou si vous n’en avez utilis&eacute; que quelques fonctions Flash,
commencez par le manuel Didacticiels Flash.
Impression de la documentation Flash
Les versions imprimables de tous les guides inclus dans le syst&egrave;me d’aide
Flash sont disponibles sur le site Web de Macromedia. Vous pouvez
&eacute;galement imprimer des pages d’aide distinctes depuis le panneau Aide de
Flash.
Pour imprimer un guide ou un chapitre sp&eacute;cifique depuis le site
Web de Macromedia :
1.
Consultez la page de documentation Macromedia Flash &agrave; l’adresse
www.macromedia.com/go/fl_documentation/.
2.
Recherchez le fichier PDF correspondant au guide que vous souhaitez
imprimer.
3.
T&eacute;l&eacute;chargez le fichier PDF.
4.
Ouvrez le fichier PDF dans Adobe Reader.
5.
Imprimez le fichier ou, si vous le pr&eacute;f&eacute;rez, simplement un chapitre &agrave;
partir du fichier.
Le contrat de licence utilisateur final Flash permet d’imprimer les
versions PDF de la documentation aupr&egrave;s des magasins de copie au
d&eacute;tail le cas &eacute;ch&eacute;ant.
Pour imprimer une page individuelle de l’aide:
1.
Cliquez sur Imprimer dans la barre d’outils du panneau Aide.
2.
Dans la bo&icirc;te de dialogue Imprimer, s&eacute;lectionnez l’imprimante et les
autres options d’impression, puis cliquez sur Imprimer.
Vous pouvez &eacute;galement acheter les versions imprim&eacute;es des guides dans le
magasin en ligne de Macromedia &agrave; l’adresse suivante,
www.macromedia.com/go/books_and_training.
Achat de la documentation imprim&eacute;e
Pour acheter des versions imprim&eacute;es de la documentation de Flash, visitez
le site www.macromedia.com/go/books.
Utilisation du syst&egrave;me d’aide de Studio
47
Discussion portant sur la documentation de Flash
avec LiveDocs
En plus d’acc&eacute;der &agrave; la documentation de Flash dans le panneau d’aide de
Flash, vous pouvez obtenir la documentation en ligne au format LiveDocs.
Pour trouver la page &eacute;quivalente sur le site Web LiveDocs, il vous suffit de
cliquer sur Afficher le commentaire dans LiveDocs en bas de la page d’aide
du panneau Aide. Les Flash LiveDocs sont disponibles sur
livedocs.macromedia.com/go/livedocs_flash.
LiveDocs pr&eacute;sente entre autres avantages celui d’afficher des commentaires
permettant de rendre la documentation plus claire, ou de corriger des
erreurs ou des probl&egrave;mes survenus apr&egrave;s la publication d’un logiciel.
LiveDocs n’est pas l’endroit dans lequel vous pouvez demander de l’aide,
poser des questions concernant votre code s’il ne fonctionne pas, ou la
fa&ccedil;on dont effectuer une t&acirc;che sp&eacute;cifique. LiveDocs est l’endroit id&eacute;al pour
exprimer votre avis concernant la documentation (par exemple, si vous
remarquez une phrase ou un paragraphe pouvant &ecirc;tre am&eacute;lior&eacute; par souci de
clart&eacute;).
Lorsque vous cliquez sur le lien pour ajouter un commentaire sur
LiveDocs, vous observez plusieurs points concernant les types de
commentaires acceptables sur le syst&egrave;me. Lisez attentivement ces
instructions, si vous ne vous y conformez pas, votre commentaire sera
supprim&eacute; du site Web.
Si vous avez une question concernant Flash, posez-la sur les forums Web
Macromedia Flash : www.macromedia.com/go/flash_forums. Les forums
Web constituent l’endroit id&eacute;al pour poser des questions, car de nombreux
employ&eacute;s de Macromedia, b&eacute;n&eacute;voles de Team Macromedia, gestionnaires
et membres de groupes d’utilisateurs Macromedia et m&ecirc;me des r&eacute;dacteurs
techniques g&egrave;rent ces forums.
48
Apprentissage de Studio
Contr&ocirc;le de l’apparence du panneau d’aide
Vous pouvez contr&ocirc;ler la fa&ccedil;on dont le panneau d’aide appara&icirc;t dans Flash.
Disposition du panneau Aide dans l’espace de travail de
Flash
Vous pouvez arranger la position du panneau d’aide dans l’espace de travail
pour en optimiser l’utilisation. Vous pouvez facilement contr&ocirc;ler la taille de
la zone d’affichage ainsi que l’endroit et le moment o&ugrave; le panneau Aide
doit &ecirc;tre affich&eacute;. Pour plus d’informations sur l’utilisation des panneaux,
consultez la rubrique Utilisation des panneaux et de l’inspecteur des
propri&eacute;t&eacute;s, page 93.
Pour disposer le panneau Aide en position ancr&eacute;e :
1.
Ancrez le panneau Aide dans la position souhait&eacute;e.
2.
D&eacute;veloppez le panneau Aide s’il n’est pas d&eacute;j&agrave; d&eacute;velopp&eacute;.
3.
Faites glisser la barre de fractionnement entre ce panneau ou groupe de
panneaux et la fen&ecirc;tre Document pour afficher la zone Sc&egrave;ne.
4.
Appuyez sur F1 pour r&eacute;duire et d&eacute;velopper le panneau Aide selon vos
besoins.
Pour disposer le panneau Aide en position d&eacute;sancr&eacute;e
(flottante) :
1.
D&eacute;sancrez le panneau Aide dans la position souhait&eacute;e.
2.
D&eacute;veloppez le panneau Aide s’il n’est pas d&eacute;j&agrave; d&eacute;velopp&eacute;.
3.
Redimensionnez la fen&ecirc;tre du panneau.
4.
Appuyez sur F1 pour fermer et ouvrir le panneau Aide selon vos besoins.
Modification de la taille du texte affich&eacute; dans le panneau
Aide
Si vous utilisez un ordinateur portable, il peut &ecirc;tre utile d’agrandir le texte
affich&eacute; dans le panneau Aide. Vous pouvez modifier la taille du texte dans
le panneau Aide en modifiant la taille du texte dans votre navigateur Web.
Pour modifier la taille du texte affich&eacute; dans le panneau Aide &agrave;
l’aide de votre navigateur:
■
Ouvrez votre navigateur et modifiez les pr&eacute;f&eacute;rences pour agrandir le
texte dans votre navigateur. Vous devez red&eacute;marrer Flash pour que vos
modifications soient prises en compte.
Utilisation du syst&egrave;me d’aide de Studio
49
Obtention des mises &agrave; jour de l’aide Flash
CON S E I L
50
Dans Windows, vous
pouvez modifier la
taille du texte du
panneau d’aide en
cliquant dans la
fen&ecirc;tre table des
mati&egrave;re du panneau
Aide, puis en
appuyant sur Ctrl et
en faisant d&eacute;filer la
molette de la souris.
La taille du texte
dans votre
navigateur est
&eacute;galement modifi&eacute;e.
Apprentissage de Studio
La fonction Mettre &agrave; jour de Flash permet d’actualiser votre syst&egrave;me d’aide
en y ajoutant de nouveaux documents ou les derni&egrave;res modifications en
date, y compris des proc&eacute;dures et des le&ccedil;ons. Pour savoir si de nouvelles
informations sont disponibles, cliquez sur le bouton Mettre &agrave; jour.
Pour mettre &agrave; jour l’aide de Flash :
1.
V&eacute;rifiez que vous &ecirc;tes connect&eacute; &agrave; Internet.
2.
Cliquez sur Mettre &agrave; jour dans la barre d'outils du panneau Aide et
suivez les instructions pour t&eacute;l&eacute;charger la mise &agrave; jour du syst&egrave;me d'aide.
Lorsqu’une mise &agrave; jour de l’aide est disponible, Macromedia cr&eacute;e et envoie
un nouveau fichier PDF de chaque guide mis &agrave; jour sur sa page de
documentation &agrave; l’adresse http://www.macromedia.com/go/
fl_documentation/.
CHAPITRE 2
Notions de base de
Studio
2
Macromedia Studio offre un espace de travail int&eacute;gr&eacute; permettant de passer
tr&egrave;s simplement d’un produit de la suite &agrave; un autre. Vous remarquerez que
les panneaux, les menus, les ic&ocirc;nes de s&eacute;lection et beaucoup d’autres
&eacute;l&eacute;ments d’interface utilisateur sont similaires entre les diff&eacute;rents produits
et faciles &agrave; utiliser. Passant d’un produit &agrave; un autre, vous constaterez &agrave; quel
point l’espace de travail, homog&egrave;ne et familier, contribue &agrave; accro&icirc;tre votre
productivit&eacute;, en vous faisant gagner du temps sur l’apprentissage d’un
nouveau produit.
Ce chapitre contient les sections suivantes :
Notions de base de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Notions de base de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Notions de base de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Notions de base de Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Notions de base de FlashPaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Notions de base de
Dreamweaver
Pour tirer le meilleur parti de votre logiciel Dreamweaver, vous devez
comprendre les &eacute;l&eacute;ments de base de l’espace de travail Dreamweaver. Cette
section vous pr&eacute;sente une vue d’ensemble des fichiers Dreamweaver et vous
pr&eacute;sente les &eacute;l&eacute;ments de l’espace de travail les plus importants et les plus
couramment utilis&eacute;s.
La pr&eacute;sente section contient les rubriques suivantes :
■
Pr&eacute;sentation des fichiers Dreamweaver, page 52
■
Familiarisation avec l’espace de travail Dreamweaver, page 53
51
Pr&eacute;sentation des fichiers Dreamweaver
Vous pouvez travailler avec un grand choix de types de fichiers dans
Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le
plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup
Language) contiennent le langage &agrave; base de balises qui se charge d’afficher
une page Web dans un navigateur. Vous pouvez enregistrer les fichiers
HTML avec l’extension .html ou .htm. Dreamweaver enregistre par d&eacute;faut
les fichiers avec l’extension .html.
Voici quelques autres types de fichiers courants que vous pourriez utiliser
quand vous travaillez avec Dreamweaver.
(ou Cascading Style Sheet) pour des fichiers avec une extension .css.
Ils sont utilis&eacute;s pour mettre en forme le contenu HTML et fixer le
positionnement de divers &eacute;l&eacute;ments de page. Pour plus d’informations sur
l’utilisation de ces types de fichiers, voir Description des feuilles de style en
cascade dans Utilisation de Dreamweaver.
CSS
GIF (ou Graphics Interchange Format) pour des fichiers qui ont une
extension .gif. Ce format graphique est tr&egrave;s utilis&eacute; dans les dessins
humoristiques, les logos, les graphismes pourvus de zones transparentes et
les animations. Les fichiers GIF sont constitu&eacute;s d’un maximum de
256 couleurs.
(ou Joint Photographic Experts Group, du nom de l’organisation
qui a cr&eacute;&eacute; le format) pour des fichiers qui ont une extension .jpg et qui
correspondent g&eacute;n&eacute;ralement &agrave; des photographies ou &agrave; des images tr&egrave;s
color&eacute;es. Ce format est le plus appropri&eacute; pour les photographies
num&eacute;riques ou scann&eacute;es, les images utilisant des textures, les images
pourvues de transitions &agrave; couleurs d&eacute;grad&eacute;es ainsi que toutes les images
exigeant plus de 256 couleurs.
JPEG
XML (pour Extensible Markup Language) pour des fichiers avec une
extension de type .xml. Ils contiennent des donn&eacute;es brutes qui peuvent &ecirc;tre
mises en forme en utilisant XSL (Extensible Stylesheet Language). Pour
plus d’informations sur l’utilisation de ces types de fichiers, voir
Chapitre 36, Affichage de donn&eacute;es XML dans des pages Web, dans Utilisation
de Dreamweaver.
XSL (ou Extensible Stylesheet Language) pour des fichiers avec une
extension de type .xsl ou .xslt. Ils sont utilis&eacute;s pour cr&eacute;er des donn&eacute;es XML
que vous voulez afficher sur une page Web. Pour plus d’informations sur
l’utilisation de ces types de fichiers, voir Chapitre 36, Affichage de donn&eacute;es
XML dans des pages Web, dans Utilisation de Dreamweaver.
52
Notions de base de Studio
(ou ColdFusion Markup Language) pour des fichiers avec une
extension de type .cfm. Ils sont utilis&eacute;s pour traiter des pages dynamiques.
Pour plus d’informations sur l’utilisation de ces types de fichiers, voir
Chapitre 40, Cr&eacute;ation rapide d'applications ColdFusion, dans Utilisation de
Dreamweaver.
CFML
ASPX (ou ASP.NET) pour des fichiers qui ont une extension de type
.aspx. Ils sont utilis&eacute;s pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 41,
Cr&eacute;ation rapide d'applications ASP.NET, dans Utilisation de Dreamweaver.
(ou PHP) : Les fichiers Hypertext Preprocessor ont une extension du
type .php. Ils sont utilis&eacute;s pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 43,
Cr&eacute;ation rapide d'applications PHP, dans Utilisation de Dreamweaver.
PHP
Familiarisation avec l’espace de travail
Dreamweaver
L’espace de travail Dreamweaver vous permet d’afficher des documents et
les propri&eacute;t&eacute;s des objets. Il comporte des barres d’outils donnant acc&egrave;s aux
op&eacute;rations les plus courantes, vous permettant ainsi de modifier
rapidement vos documents.
Cette section vous pr&eacute;sente une vue d’ensemble de l’espace de travail de
Dreamweaver 8. Pour des renseignements plus complets sur l'un des
&eacute;l&eacute;ments de l'espace de travail pr&eacute;sent&eacute; dans cette section, voir Chapitre 1,
Exploration de l’espace de travail, dans Utilisation de Dreamweaver.
La pr&eacute;sente section contient les rubriques suivantes :
■
Pr&eacute;sentation de l’espace de travail, page 54
■
La fen&ecirc;tre de document, page 56
■
Barre d’outils de document, page 57
■
La barre d’&eacute;tat, page 58
■
La barre Ins&eacute;rer, page 59
■
La barre d’outils de codage, page 61
■
Inspecteur des propri&eacute;t&eacute;s, page 62
■
Panneau Fichiers, page 63
■
Panneau Styles CSS, page 64
Notions de base de Dreamweaver
53
Pr&eacute;sentation de l’espace de travail
Sous Windows, Dreamweaver propose une pr&eacute;sentation int&eacute;gr&eacute;e -en- une
seule fen&ecirc;tre. Dans l’espace de travail int&eacute;gr&eacute;, toutes les fen&ecirc;tres et tous les
panneaux sont rassembl&eacute;s dans une grande fen&ecirc;tre d’application.
Barre Ins&eacute;rer
Barre d’outils du document
S&eacute;lecteur de balises
R EM A R QU E
54
Notions de base de Studio
Fen&ecirc;tre de document
Inspecteur des propri&eacute;t&eacute;s
Groupes de panneaux
Panneau Fichiers
L’espace de travail Windows dispose &eacute;galement d’une option Codeur qui
ancre les groupes de panneaux sur le c&ocirc;t&eacute; gauche et affiche par d&eacute;faut la
fen&ecirc;tre de document en mode Code. Pour plus d’informations, voir
Utilisation de l'espace de travail orient&eacute; en mode Code (Windows
uniquement) dans Utilisation de Dreamweaver. Pour l’utilisation de cette
option, voir Choix de la pr&eacute;sentation de l’espace de travail (sous Windows
uniquement) le chapitre Utilisation de Dreamweaver.
Sur Macintosh, Dreamweaver peut afficher de nombreux documents dans
une seule fen&ecirc;tre avec des onglets qui identifient chacun des documents.
Dreamweaver peut aussi appara&icirc;tre sous la forme d’une partie de l’espace de
travail flottant dans laquelle chaque document s’affiche dans sa propre
fen&ecirc;tre. Les groupes de panneaux sont initialement ancr&eacute;s ensemble mais
vous pouvez les s&eacute;parer pour les faire appara&icirc;tre dans leur propre fen&ecirc;tre.
Les fen&ecirc;tres s’alignent automatiquement les unes sur les autres sur les c&ocirc;t&eacute;s
de l’&eacute;cran, et sur la fen&ecirc;tre du document au fur et &agrave; mesure que vous les
faites glisser ou que vous les redimensionnez.
Barre Ins&eacute;rer
S&eacute;lecteur de
balises
Barre d’outils du document
Fen&ecirc;tre de document
Inspecteur des propri&eacute;t&eacute;s
Groupes de panneaux
Panneau Fichiers
Vous pouvez basculer entre diff&eacute;rentes mises en forme &agrave; la fois dans
Windows et Macintosh. Pour plus d’informations, voir Choix de la
pr&eacute;sentation de l’espace de travail (sous Windows uniquement) et Affichage de
documents &agrave; onglet (Macintosh) dans Utilisation de Dreamweaver.
Notions de base de Dreamweaver
55
La fen&ecirc;tre de document
La fen&ecirc;tre de document affiche le document actif. Vous pouvez choisir
parmi les modes d’affichage suivants :
Le mode Cr&eacute;ation est un environnement de cr&eacute;ation pour la mise en
forme visuelle des pages, l’&eacute;dition visuelle et le d&eacute;veloppement rapide
d’applications. Dans ce mode, Dreamweaver affiche une repr&eacute;sentation
visuelle enti&egrave;rement modifiable du document, similaire &agrave; la repr&eacute;sentation
de la page sur un navigateur.
Le mode Code est un environnement de codage manuel pour r&eacute;diger et
modifier du code HTML, JavaScript et du code de langage de-serveur, tel
que le langage PHP ou CFML (ColdFusion Markup Language), ou tout
autre type de code. Pour plus d’informations, voir Chapitre 20, Codage
dans Dreamweaver, dans Utilisation de Dreamweaver.
Les modes Code et Cr&eacute;ation vous permettent d’obtenir l’affichage Code
et l’affichage Cr&eacute;ation du document dans une m&ecirc;me fen&ecirc;tre.
Lorsque la fen&ecirc;tre de document dispose d’une barre de titre, cette derni&egrave;re
affiche le titre de la page et, entre parenth&egrave;ses, le chemin et le nom de
fichier du document. Apr&egrave;s le nom du fichier, Dreamweaver affiche un
ast&eacute;risque &agrave; la suite du nom de fichier si vous avez apport&eacute; des
modifications et que vous ne les avez pas encore enregistr&eacute;es.
Lorsque vous agrandissez la fen&ecirc;tre de document de la pr&eacute;sentation de
l’espace de travail int&eacute;gr&eacute; (sous Windows uniquement), elle s’affiche sans
barre de titre ; le titre de la page, ainsi que le chemin d’acc&egrave;s et le nom du
fichier s’affichent alors dans la barre de titre de la fen&ecirc;tre principale de
l’espace de travail.
En outre, lorsqu’une fen&ecirc;tre de document est agrandie, des onglets
s’affichent en haut de la zone de la fen&ecirc;tre de document indiquant les noms
de fichier de tous les documents ouverts. Pour passer &agrave; un autre document,
cliquez sur son onglet.
Pour plus d’informations sur l’utilisation de la fen&ecirc;tre de document, voir
Chapitre 1, Exploration de l’espace de travail, dans Utilisation de
Dreamweaver.
56
Notions de base de Studio
Barre d’outils de document
La barre d’outils de document est compos&eacute;e de boutons qui permettent
d’acc&eacute;der rapidement aux diff&eacute;rents modes d’affichage : Code, Cr&eacute;ation et
un mode d’affichage partag&eacute; pour afficher les modes Code et Cr&eacute;ation en
m&ecirc;me temps.
La barre d’outils contient &eacute;galement plusieurs commandes et options
courantes permettant d’afficher le document et de le transf&eacute;rer d’un site
local vers un site distant.
Afficher le mode Code
Afficher les modes Code et Cr&eacute;ation
Afficher le mode Cr&eacute;ation
Aucune erreur du navigateur
Valider le marqueur
Gestion de fichiers
Assistances visuelles
D&eacute;bogage du serveur
Titre de document
Options d’affichage
Actualiser le mode Cr&eacute;ation
Aper&ccedil;u/D&eacute;bogage dans le navigateur
Les options suivantes s’affichent dans la barre d’outils du document :
Afficher mode Code
pour afficher uniquement le mode Code dans la
fen&ecirc;tre de document.
Modes Code et Cr&eacute;ation pour afficher les deux modes simultan&eacute;ment
dans deux volets distincts de la fen&ecirc;tre de document. Dans ce cas, l’option
mode Cr&eacute;ation en haut est activ&eacute;e dans le menu Options d’affichage.
Utilisez cette option pour pr&eacute;ciser quel mode doit s’afficher en haut de la
fen&ecirc;tre de document.
pour afficher uniquement le mode Cr&eacute;ation
dans la fen&ecirc;tre de document.
Afficher le mode Cr&eacute;ation
affiche un rapport pour vous aider &agrave; d&eacute;boguer la
page ColdFusion active. Le rapport indique les erreurs &eacute;ventuellement
pr&eacute;sentes sur votre page.
D&eacute;bogage de serveur
pour attribuer un titre &agrave; votre document et l’afficher
dans la barre de titre du navigateur. Si votre document poss&egrave;de d&eacute;j&agrave; un
titre, celui-ci s’affiche dans ce champ.
Titre du document
Aucune erreur du navigateur permet
de v&eacute;rifier la compatibilit&eacute; avec
diff&eacute;rents navigateurs.
Notions de base de Dreamweaver
57
Valider le marqueur
vous permet de valider le document actif ou la balise
s&eacute;lectionn&eacute;e.
Gestion des fichiers
pour afficher le menu d&eacute;roulant correspondant.
pour pr&eacute;visualiser ou d&eacute;boguer un
document dans un navigateur. S&eacute;lectionnez un navigateur dans le menu
d&eacute;roulant.
Aper&ccedil;u/D&eacute;bogage dans le navigateur
pour actualiser le mode Cr&eacute;ation du
document apr&egrave;s avoir apport&eacute; des modifications dans le mode Code. Les
modifications apport&eacute;es dans le mode Code n’apparaissent pas
automatiquement dans le mode Cr&eacute;ation. Vous devez ex&eacute;cuter tout
d’abord certaines op&eacute;rations, comme enregistrer le fichier ou utiliser ce
bouton.
Actualiser le mode cr&eacute;ation
pour d&eacute;finir les options d’affichage des modes Code
et Cr&eacute;ation, notamment le mode devant s’afficher au-dessus de l’autre. Les
options du menu s’appliquent &agrave; l’affichage actuel : Mode Cr&eacute;ation, mode
Code ou les deux.
Options d’affichage
Assistances visuelles pour
utiliser diff&eacute;rentes assistances visuelles de
conception de pages.
Pour plus d’informations sur l’utilisation de la fen&ecirc;tre de document, voir
Chapitre 1, Exploration de l’espace de travail, dans Utilisation de
Dreamweaver.
La barre d’&eacute;tat
La barre d’&eacute;tat, situ&eacute;e au bas de la fen&ecirc;tre de document, fournit des
informations suppl&eacute;mentaires sur le document en cours de cr&eacute;ation.
Taille du document et estimation du
temps de t&eacute;l&eacute;chargement
S&eacute;lecteur de balises
58
Notions de base de Studio
Menu d&eacute;roulant Taille de fen&ecirc;tre
D&eacute;finir le facteur de zoom
Outil Zoom
Outil Main
Outil
Le s&eacute;lecteur de balises affiche la hi&eacute;rarchie des balises entourant la s&eacute;lection
courante. Cliquez sur une balise quelconque dans la hi&eacute;rarchie pour la
s&eacute;lectionner avec tout son contenu. Cliquez sur &lt;corps&gt; pour s&eacute;lectionner
tout le corps du document. Pour d&eacute;finir les attributs classe ou id d’une
balise dans le s&eacute;lecteur de balises, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Option enfonc&eacute;e (Macintosh) sur
la balise et choisissez une classe ou un ID dans le menu d&eacute;roulant. Il est
pr&eacute;f&eacute;rable de faire appel au S&eacute;lecteur de balises pour s&eacute;lectionner des balises
car il garantit avec certitude la bonne s&eacute;lection.
L’outil Main permet de cliquer sur le document et de le faire glisser sur la
fen&ecirc;tre de document. Cliquez sur l’outil S&eacute;lection pour d&eacute;sactiver l’outil
Main.
L’outil Zoom et le menu d&eacute;roulant D&eacute;finir le facteur de zoom permettent
de d&eacute;finir un taux d’agrandissement pour votre document. Pour plus
d’informations, voir Zoom avant et arri&egrave;re dans Utilisation de Dreamweaver.
Le menu d&eacute;roulant Taille de la fen&ecirc;tre (visible en mode Cr&eacute;ation
uniquement) permet de redimensionner la fen&ecirc;tre du document selon des
dimensions pr&eacute;d&eacute;finies ou personnalis&eacute;es. Pour plus d’informations, voir
Redimensionnement de la fen&ecirc;tre de document dans Utilisation de
Dreamweaver.
A droite du menu d&eacute;roulant Taille de fen&ecirc;tre figurent une estimation de la
taille du document et du temps de t&eacute;l&eacute;chargement de la page, ainsi que la
liste de tous les fichiers d&eacute;pendants, tels que les images et autres fichiers de
m&eacute;dias. Pour plus d’informations, voir V&eacute;rification des pr&eacute;f&eacute;rences de dur&eacute;e et
de la taille de t&eacute;l&eacute;chargement dans Utilisation de Dreamweaver.
Pour plus d’informations sur l’utilisation de la barre d’&eacute;tat, voir Chapitre 1,
Exploration de l’espace de travail, dans Utilisation de Dreamweaver.
La barre Ins&eacute;rer
Les boutons qui composent la barre Ins&eacute;rer permettent de cr&eacute;er et d’ins&eacute;rer
des objets, tels que des tableaux, des calques et des images. Lorsque vous
placez le curseur de la souris sur un bouton, une info-bulle indiquant le
nom de ce bouton appara&icirc;t.
Notions de base de Dreamweaver
59
Les boutons sont organis&eacute;s en plusieurs cat&eacute;gories, sur le c&ocirc;t&eacute; gauche de la
barre Ins&eacute;rer. D’autres cat&eacute;gories s’affichent lorsque le document
s&eacute;lectionn&eacute; contient du code serveur, tel que des documents ASP ou
CFML. Au d&eacute;marrage de Dreamweaver, la derni&egrave;re cat&eacute;gorie utilis&eacute;e
s’ouvre.
Certaines cat&eacute;gories disposent de boutons ouvrant des menus d&eacute;roulants.
Lorsque vous s&eacute;lectionnez une option dans l’un d’eux, l’action associ&eacute;e est
attribu&eacute;e par d&eacute;faut au bouton. Par exemple, si vous s&eacute;lectionnez le menu
d&eacute;roulant du bouton Image, puis Espace r&eacute;serv&eacute; pour l’image, la prochaine
fois que vous cliquerez sur le bouton Image, Dreamweaver ins&eacute;rera un
espace r&eacute;serv&eacute; pour l’image. Lorsque vous s&eacute;lectionnez une nouvelle option
dans l’un de ces menus, l’action attribu&eacute;e par d&eacute;faut au bouton change.
La barre Ins&eacute;rer est organis&eacute;e en diff&eacute;rentes cat&eacute;gories, comme suit :
La cat&eacute;gorie Commun permet de cr&eacute;er et d’ins&eacute;rer les objets les plus
couramment utilis&eacute;s, comme les images et les tableaux.
La cat&eacute;gorie Mise en forme permet d’ins&eacute;rer des tableaux, des balises div,
des calques et des cadres. Vous pouvez &eacute;galement choisir parmi trois types
de tableaux : Standard (par d&eacute;faut), Tableaux &eacute;tendus et Mise en forme. Si
le mode Mise en forme est s&eacute;lectionn&eacute;, vous pouvez utiliser les outils de
mise en forme de Dreamweaver : Dessiner la cellule de mise en forme et
Dessiner le tableau de mise en forme.
contient des boutons permettant de cr&eacute;er des
formulaires et d’y ins&eacute;rer des &eacute;l&eacute;ments.
La cat&eacute;gorie Formulaires
La cat&eacute;gorie Texte ins&egrave;re diverses balises de mise en forme de texte et de
liste, telles que b, em, p, h1 et ul.
La cat&eacute;gorie HTML ins&egrave;re des balises HTML pour les r&egrave;gles horizontales,
le contenu de l’en-t&ecirc;te, les tableaux, les cadres et les scripts.
sont disponibles uniquement pour les
pages utilisant un langage serveur sp&eacute;cifique comme ASP, ASP.NET,
CFML Basic, CFML Flow, CFML Advanced, JSP et PHP. Ces cat&eacute;gories
proposent des objets de type code serveur que vous pouvez ins&eacute;rer en mode
Code.
Les cat&eacute;gories de code serveur
60
Notions de base de Studio
La cat&eacute;gorie Application ins&egrave;re des &eacute;l&eacute;ments dynamiques, tels que les jeux
d’enregistrements, les r&eacute;gions r&eacute;p&eacute;t&eacute;es et les formulaires d’insertion
d’enregistrements et de mise &agrave; jour.
La cat&eacute;gorie &eacute;l&eacute;ments Flash
ins&egrave;re des &eacute;l&eacute;ments Macromedia Flash.
permet de regrouper et d’organiser, dans un espace
commun, les boutons de la barre Ins&eacute;rer que vous utilisez le plus
fr&eacute;quemment.
La cat&eacute;gorie Favoris
Pour plus d’informations sur l’utilisation de la barre d’&eacute;tat, voir Chapitre 1,
Exploration de l’espace de travail, dans Utilisation de Dreamweaver.
La barre d’outils de codage
La barre d’outils de codage est compos&eacute;e de boutons qui vous permettent
d’effectuer de nombreuses op&eacute;rations de codage standard (r&eacute;duction et
agrandissement des s&eacute;lections de code, mise en &eacute;vidence de code non
valide, application et suppression de commentaires, mise en retrait de code,
insertion de fragments de code r&eacute;cemment utilis&eacute;s, etc.). La barre d’outils
de codage est visible uniquement en mode Code et appara&icirc;t verticalement
sur le c&ocirc;t&eacute; gauche de la fen&ecirc;tre de document.
Notions de base de Dreamweaver
61
Vous ne pouvez pas d&eacute;tacher ni d&eacute;placer la barre d’outils de codage mais
vous pouvez la masquer. Pour plus d’informations, voir Affichage des barres
d’outils dans Utilisation de Dreamweaver.
Pour plus d’informations sur l’utilisation de la barre d’outils Codage, voir
Insertion rapide de code avec la barre d'outils de codage dans Utilisation de
Dreamweaver.
Inspecteur des propri&eacute;t&eacute;s
L’inspecteur des propri&eacute;t&eacute;s permet d’examiner et de modifier les propri&eacute;t&eacute;s
les plus fr&eacute;quentes de l’&eacute;l&eacute;ment de la page s&eacute;lectionn&eacute;e, tel que le texte ou
un objet ins&eacute;r&eacute;. Le contenu de l’inspecteur des propri&eacute;t&eacute;s varie en fonction
de l’&eacute;l&eacute;ment s&eacute;lectionn&eacute;. Par exemple, si vous s&eacute;lectionnez une image de la
page, l’inspecteur des propri&eacute;t&eacute;s se modifie pour montrer les propri&eacute;t&eacute;s de
l’image (telles que le chemin d’acc&egrave;s au fichier, la largeur et la hauteur de
l’image, la bordure autour de l’image, s’il y a lieu, et ainsi de suite).
Par d&eacute;faut, l’inspecteur des propri&eacute;t&eacute;s se trouve au bas de l’espace de travail,
mais vous pouvez l’ancrer en haut de l’espace de travail si vous le souhaitez.
Vous pouvez aussi le laisser flotter dans l’espace de travail. Pour plus
d’informations sur le d&eacute;placement de l’inspecteur des propri&eacute;t&eacute;s, voir
Ancrage et annulation d’ancrage de panneaux et de groupes de panneaux dans
Utilisation de Dreamweaver.
Pour plus d’informations sur l’utilisation de l’inspecteur des propri&eacute;t&eacute;s, voir
Utilisation de l’inspecteur Propri&eacute;t&eacute;s dans Utilisation de Dreamweaver.
62
Notions de base de Studio
Panneau Fichiers
Vous pouvez utiliser les panneaux Fichiers pour afficher et g&eacute;rer les fichiers
dans votre site Dreamweaver.
Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau
Fichiers, vous pouvez modifier la taille de la zone d’affichage. Vous pouvez
&eacute;galement agrandir ou r&eacute;duire le panneau Fichiers. Dans sa forme r&eacute;duite,
le panneau Fichiers affiche le contenu du site local, du site distant ou du
serveur d’&eacute;valuation sous la forme d’une liste de fichiers. Sous sa forme
d&eacute;velopp&eacute;e, le panneau affiche le site local et soit le site distant, soit le
serveur d’&eacute;valuation. Le panneau Fichiers peut &eacute;galement afficher une carte
d’arborescence du site local.
Pour les sites Dreamweaver, il est &eacute;galement possible de personnaliser le
panneau Fichiers en modifiant la vue (site local ou distant) qui s’affiche par
d&eacute;faut dans le panneau r&eacute;duit.
Pour plus d’informations sur l’utilisation du panneau Fichiers pour g&eacute;rer
votre site, voir Chapitre 4, Gestion des fichiers, dans Utilisation de
Dreamweaver.
Notions de base de Dreamweaver
63
Panneau Styles CSS
Le panneau Styles CSS permet de suivre les r&egrave;gles CSS et les propri&eacute;t&eacute;s qui
affectent un &eacute;l&eacute;ment de page s&eacute;lectionn&eacute; (mode Actuel), ou les r&egrave;gles et les
propri&eacute;t&eacute;s qui affectent l’ensemble d’un document (mode Tous). Un
bouton bascule plac&eacute; en haut du panneau CSS permet de passer d’un mode
&agrave; l’autre. Le panneau Styles CSS permet de modifier les propri&eacute;t&eacute;s CSS
dans les deux modes.
Vous pouvez redimensionner ces volets en faisant glisser leur bordure.
En mode Actuel, le panneau Styles CSS pr&eacute;sente trois volets : le volet
R&eacute;sum&eacute; de la s&eacute;lection qui pr&eacute;sente les propri&eacute;t&eacute;s CSS de la s&eacute;lection en
cours dans le document ; le volet R&egrave;gles qui pr&eacute;cise l’emplacement des
propri&eacute;t&eacute;s s&eacute;lectionn&eacute;es (ou une cascade de r&egrave;gles pour la balise
s&eacute;lectionn&eacute;e, selon votre s&eacute;lection) et un volet Propri&eacute;t&eacute;s qui vous permet
de modifier les propri&eacute;t&eacute;s CSS de la r&egrave;gle d&eacute;finissant la s&eacute;lection.
64
Notions de base de Studio
En mode Tous, le panneau Styles CSS pr&eacute;sente deux volets : un volet
Toutes les r&egrave;gles (en haut) et un volet Propri&eacute;t&eacute;s (en bas). Le volet Toutes
les r&egrave;gles pr&eacute;sente la liste des r&egrave;gles d&eacute;finies dans le document actif, ainsi
que l’ensemble des r&egrave;gles d&eacute;finies dans les feuilles de styles jointes &agrave; ce
document. Le volet Propri&eacute;t&eacute;s permet de modifier les propri&eacute;t&eacute;s CSS de
toute r&egrave;gle s&eacute;lectionn&eacute;e dans le volet Toutes les r&egrave;gles.
Toute modification apport&eacute;e dans le volet Propri&eacute;t&eacute;s s’applique
imm&eacute;diatement, ce qui vous permet d’avoir un aper&ccedil;u direct de votre
travail.
Pour plus d’informations sur le panneau Styles CSS, voir A propos du
panneau Styles CSS dans Utilisation de Dreamweaver.
Notions de base de Flash
Pour tirer le meilleur parti de votre logiciel Flash, vous devez comprendre
les &eacute;l&eacute;ments de base de l’espace de travail Flash. Cette section vous donne
un aper&ccedil;u des fichiers Flash et vous pr&eacute;sente les &eacute;l&eacute;ments de l’espace de
travail les plus importants et les plus couramment utilis&eacute;s, notamment la
sc&egrave;ne, l’inspecteur des propri&eacute;t&eacute;s et le panneau Outils.
La pr&eacute;sente section contient les rubriques suivantes :
■
A propos des fichiers Flash, page 65
■
Familiarisation avec l’espace de travail Flash, page 67
A propos des fichiers Flash
Le type de fichiers Flash primaire, les fichiers FLA, contient 3 types
d’informations de base composant un document Flash. Ces grands types
d’informations sont les suivants :
Les objets multim&eacute;dia repr&eacute;sentent les diff&eacute;rents objets comme les
graphiques, le texte, le son et la vid&eacute;o composant le contenu de votre
document Flash. L’importation ou la cr&eacute;ation de ces &eacute;l&eacute;ments dans Flash
ainsi que leur disposition sur la sc&egrave;ne et dans le sc&eacute;nario vous permet de
d&eacute;terminer le contenu visible par les lecteurs de votre document ainsi que
le moment de son affichage.
Notions de base de Flash
65
permet d’indiquer &agrave; Flash quand faire appara&icirc;tre des objets
multim&eacute;dia sp&eacute;cifiques sur la sc&egrave;ne. Le sc&eacute;nario ressemble &agrave; une feuille de
calcul qui progresse de gauche &agrave; droite et dont les colonnes repr&eacute;sentent le
temps. Les lignes repr&eacute;sentent des calques, le contenu des calques
sup&eacute;rieurs apparaissant au-dessus du contenu des calques inf&eacute;rieurs sur la
sc&egrave;ne.
Le sc&eacute;nario
Le code ActionScript est le code de programmation que vous pouvez
ajouter &agrave; des documents Flash pour les faire r&eacute;pondre aux interactions des
utilisateurs et pour contr&ocirc;ler plus pr&eacute;cis&eacute;ment le comportement de vos
documents Flash. Beaucoup de choses peuvent &ecirc;tre accomplies dans Flash
sans ActionScript mais l’emploi du code ActionScript offre bien plus de
possibilit&eacute;s.
Flash peut &ecirc;tre utilis&eacute; pour travailler sur un grand nombre de types de
fichiers diff&eacute;rents. Chaque type a un objectif distinct. La liste qui suit
d&eacute;crit chaque type de fichier et ses utilisations :
66
Notions de base de Studio
■
Les fichiers FLA sont les principaux fichiers sur lesquels vous
travaillerez dans Flash. Il s’agit de fichiers qui contiennent les
informations m&eacute;dia, le sc&eacute;nario et le script de base pour un document
Flash.
■
Les fichiers SWF sont les versions compress&eacute;es des fichiers FLA. Ce
sont ces fichiers que vous affichez dans une page Web.
■
Les fichiers AS sont des fichiers ActionScript. Vous pouvez utiliser ces
fichiers si vous pr&eacute;f&eacute;rez conserver une partie ou l’int&eacute;gralit&eacute; de votre
code ActionScript en dehors de vos fichiers FLA. Ils peuvent &ecirc;tre utiles
pour l’organisation du code et pour les projets impliquant un grand
nombre de personnes travaillant sur diff&eacute;rentes parties du contenu
Flash.
■
Les fichiers SWC contiennent les composants Flash r&eacute;utilisables.
Chaque fichier SWC contient un clip compil&eacute;, du code ActionScript et
tout autre actif n&eacute;cessaire au composant.
■
Les fichiers ASC sont des fichiers utilis&eacute;s pour stocker du code
ActionScript qui sera ex&eacute;cut&eacute; sur un ordinateur &eacute;quip&eacute; de Flash
Communication Server. Ces fichiers permettent de mettre en œuvre la
logique c&ocirc;t&eacute; serveur qui travaille en association avec le code
ActionScript dans un fichier SWF.
■
Les fichiers JSFL sont des fichiers JavaScript que vous pouvez utiliser
pour ajouter une nouvelle fonction &agrave; l’outil de programmation Flash.
Voir Extension de Flash pour plus d’informations.
■
Les fichiers FLP sont des fichiers Flash Project (Flash Professionnel 8
uniquement). Vous pouvez utiliser Flash Projects pour g&eacute;rer de
nombreux fichiers de document dans un seul projet. Les projets Flash
vous permettent de regrouper plusieurs fichiers associ&eacute;s pour cr&eacute;er des
applications complexes.
Familiarisation avec l’espace de travail
Flash
Les sections suivantes pr&eacute;sentent en d&eacute;tail les outils, panneaux et autres
&eacute;l&eacute;ments de l’espace de travail Flash.
La pr&eacute;sente section contient les rubriques suivantes :
■
Utilisation de la page de d&eacute;marrage, page 68
■
Utilisation de la sc&egrave;ne, page 69
■
Utilisation du sc&eacute;nario, page 71
■
Utilisation des images et des images-cl&eacute;s, page 76
■
Utilisation des calques, page 79
■
A propos de la barre d’outils principale et de la barre d’&eacute;dition, page 86
■
Utilisation du panneau Outils, page 87
■
Utilisation de la grille, des guides et des r&egrave;gles, page 89
■
Utilisation des panneaux et de l’inspecteur des propri&eacute;t&eacute;s, page 93
■
D&eacute;finition des pr&eacute;f&eacute;rences de Flash, page 101
■
Personnalisation des raccourcis clavier, page 107
■
Utilisation des menus contextuels, page 109
■
Accessibilit&eacute; dans l’environnement auteur Flash, page 110
Notions de base de Flash
67
Utilisation de la page de d&eacute;marrage
Lorsque Flash est en cours d’ex&eacute;cution mais qu’aucun document n’est
ouvert, la page de d&eacute;marrage s’affiche. La page de d&eacute;marrage permet
d’acc&eacute;der facilement aux actions fr&eacute;quemment utilis&eacute;es.
La page de d&eacute;marrage contient les quatre zones suivantes :
Ouvrir un &eacute;l&eacute;ment r&eacute;cent vous permet d’ouvrir vos documents les plus
r&eacute;cents. Vous pouvez &eacute;galement afficher la bo&icirc;te de dialogue Ouvrir fichier
en cliquant sur l’ic&ocirc;ne Ouvrir.
donne la liste des types de fichier Flash, comme les
documents Flash et les fichiers ActionScript. Vous pouvez cr&eacute;er rapidement
un nouveau fichier en cliquant sur le type de fichier d&eacute;sir&eacute; dans la liste.
Cr&eacute;er Nouveau
donne la liste des mod&egrave;les les plus
couramment utilis&eacute;s pour cr&eacute;er de nouveaux documents Flash. Vous
pouvez cr&eacute;er un nouveau fichier en cliquant sur le mod&egrave;le d&eacute;sir&eacute; dans la
liste.
Cr&eacute;er &agrave; partir d’un mod&egrave;le
Suppl&eacute;ment vous relie au site web Macromedia Flash Exchange, &agrave; partir
duquel vous pouvez t&eacute;l&eacute;charger des applications d’aide pour Flash, des
extensions de Flash et d’autres informations associ&eacute;es.
La page de d&eacute;marrage permet &eacute;galement d’acc&eacute;der rapidement aux
ressources d’Aide. Vous pouvez suivre une visite guid&eacute;e de Flash, d&eacute;couvrir
les ressources de documentation de Flash et rechercher des utilitaires de
Formations Agr&eacute;&eacute;es Macromedia.
CONS E I L
68
Pour la masquer :
Vous pouvez
commander ou non
l’affichage par Flash
de la page de
d&eacute;marrage.
Notions de base de Studio
■
Sur la page de d&eacute;marrage, s&eacute;lectionnez Ne plus afficher.
Pour afficher &agrave; nouveau la page de d&eacute;marrage, effectuez l’une
des actions suivantes :
■
(Windows) Choisissez Edition &gt; Pr&eacute;f&eacute;rences et s&eacute;lectionnez Afficher la
page de d&eacute;marrage dans l’onglet G&eacute;n&eacute;ral.
■
(Windows) Choisissez Flash &gt; Pr&eacute;f&eacute;rences et s&eacute;lectionnez Afficher la
page de d&eacute;marrage dans l’onglet G&eacute;n&eacute;ral.
Utilisation de la sc&egrave;ne
La sc&egrave;ne est la zone rectangulaire dans laquelle vous placez du contenu
graphique (illustrations vectorielles, zones de texte, boutons, graphiques
bitmap import&eacute;s, clips vid&eacute;o, etc.), lorsque vous cr&eacute;ez des documents
Flash. La sc&egrave;ne de l’environnement auteur de Flash repr&eacute;sente l’espace
rectangulaire de Macromedia Flash Player dans lequel votre document
Flash est affich&eacute; pendant la lecture. Vous pouvez effectuer un zoom
avant/arri&egrave;re pour modifier l’affichage de la sc&egrave;ne.
La grille, les rep&egrave;res et les r&egrave;gles vous permettent de positionner le contenu
avec pr&eacute;cision sur la sc&egrave;ne. Pour plus d’informations, consultez la section
Utilisation de la grille, des guides et des r&egrave;gles, page 89.
Zoom
Pour afficher l’ensemble de la sc&egrave;ne &agrave; l’&eacute;cran ou visualiser une portion
particuli&egrave;re de votre dessin &agrave; fort agrandissement, vous pouvez modifier le
niveau de zoom. Le zoom maximal d&eacute;pend de la r&eacute;solution de votre
moniteur et de la taille du document. La valeur minimale de zoom arri&egrave;re
sur la sc&egrave;ne est de 8 %. La valeur maximale de zoom avant sur la sc&egrave;ne est
de 2 000 %.
Notions de base de Flash
69
Pour agrandir ou r&eacute;duire la vue de la sc&egrave;ne, proc&eacute;dez d’une
des fa&ccedil;ons suivantes :
70
Notions de base de Studio
■
Pour zoomer sur un &eacute;l&eacute;ment particulier, s&eacute;lectionnez l’outil Zoom dans
le panneau Outils et cliquez sur l’&eacute;l&eacute;ment. Pour basculer l’outil Zoom
entre le zoom avant et le zoom arri&egrave;re, utilisez les modificateurs
Agrandir ou R&eacute;duire (situ&eacute;s dans la zone d’options du panneau Outils
lorsque l’outil Zoom est s&eacute;lectionn&eacute;) ou cliquez en maintenant la
touche Alt (Windows) ou Option (Macintosh) enfonc&eacute;e.
■
Pour faire un zoom avant sur une zone sp&eacute;cifique de votre dessin, tracez
un cadre de s&eacute;lection sur la sc&egrave;ne avec l’outil Zoom. Flash d&eacute;finit le
facteur de zoom de sorte que le cadre de s&eacute;lection sp&eacute;cifi&eacute; remplisse la
fen&ecirc;tre.
■
Pour faire un zoom avant ou arri&egrave;re sur l’ensemble de la sc&egrave;ne,
s&eacute;lectionnez Affichage &gt; Zoom avant ou Affichage &gt; Zoom arri&egrave;re.
■
Pour faire un zoom avant ou arri&egrave;re d’un pourcentage sp&eacute;cifique,
s&eacute;lectionnez Affichage &gt; Zoom et s&eacute;lectionnez un pourcentage dans le
sous-menu, ou s&eacute;lectionnez un pourcentage dans la zone de zoom
situ&eacute;e dans le coin sup&eacute;rieur droit du sc&eacute;nario.
■
Pour redimensionner la sc&egrave;ne afin qu’elle occupe tout l’espace
disponible dans la fen&ecirc;tre de l’application, choisissez Affichage &gt;
Zoom &gt; Ajuster &agrave; la fen&ecirc;tre.
■
Pour afficher le contenu de l’image actuelle, s&eacute;lectionnez Affichage &gt;
Zoom &gt; Afficher tout, ou choisissez Afficher tout dans la zone de zoom
de la fen&ecirc;tre de l’application (coin sup&eacute;rieur droit). Si la s&eacute;quence est
vide, toute la sc&egrave;ne s’affiche.
■
Pour afficher toute la sc&egrave;ne, choisissez Affichage &gt; Zoom &gt; Afficher une
image ou choisissez Afficher une image dans le contr&ocirc;le Zoom dans le
coin sup&eacute;rieur droit du sc&eacute;nario.
■
Pour afficher l’espace de travail entourant la sc&egrave;ne, choisissez Affichage
&gt; Zone de travail. L’espace de travail est affich&eacute; en gris clair. Utilisez la
commande Zone de travail pour afficher les &eacute;l&eacute;ments d’une s&eacute;quence
qui sont partiellement ou totalement en dehors de la zone de la sc&egrave;ne.
Par exemple, pour faire en sorte que le vol d’un oiseau passe par une
image, vous devrez d’abord placer l’oiseau en dehors de la sc&egrave;ne dans
l’espace de travail, puis l’animer dans la zone de la sc&egrave;ne.
D&eacute;placement de la vue de la sc&egrave;ne
Il est possible que vous ne puissiez pas voir l’ensemble de la sc&egrave;ne lorsque
vous faites un zoom avant. L’outil Main vous permet de d&eacute;placer la sc&egrave;ne
de mani&egrave;re &agrave; changer la vue sans avoir &agrave; changer le zoom.
Pour d&eacute;placer la vue de la sc&egrave;ne :
1.
Dans le panneau Outils, s&eacute;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&eacute; dans le panneau Outils.
2.
Faites glisser la sc&egrave;ne.
Utilisation du sc&eacute;nario
Le sc&eacute;nario organise et contr&ocirc;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&eacute;riodes de temps en images. Les calques sont semblables &agrave; des
bandes de film empil&eacute;es les unes sur les autres, chacune contenant une
image diff&eacute;rente qui appara&icirc;t sur la sc&egrave;ne. Les principaux composants du
sc&eacute;nario sont les calques, les images et la t&ecirc;te de lecture.
Les calques d’un document sont r&eacute;pertori&eacute;s dans une colonne affich&eacute;e sur
la gauche du sc&eacute;nario. Les images contenues dans chaque calque sont
affich&eacute;es sur une ligne &agrave; droite du nom du calque. L’en-t&ecirc;te du sc&eacute;nario,
situ&eacute; en haut du sc&eacute;nario, affiche le num&eacute;ro des images. La t&ecirc;te de lecture
indique l’image actuellement affich&eacute;e sur la sc&egrave;ne. Lorsqu’un document
Flash est en cours de lecture, la t&ecirc;te de lecture se d&eacute;place de gauche &agrave; droite
tout au long du sc&eacute;nario.
La barre d’&eacute;tat du sc&eacute;nario, affich&eacute;e en bas de ce dernier, indique le num&eacute;ro
de l’image s&eacute;lectionn&eacute;e, la cadence d’image actuelle et le temps &eacute;coul&eacute;
jusqu’&agrave; l’image actuelle.
R EMA R Q U E
Lors de la lecture d’une animation, la cadence r&eacute;elle des images est
indiqu&eacute;e ; elle peut &ecirc;tre diff&eacute;rente du param&eacute;trage de la cadence du
document si l’ordinateur ne peut pas calculer et afficher l’animation assez
rapidement.
Notions de base de Flash
71
Image-cl&eacute; vide
T&ecirc;te de lecture
En-t&ecirc;te du sc&eacute;nario
Menu d&eacute;roulant
d’affichage des
images
Animation image
par image
Animation
interpol&eacute;e
Ic&ocirc;ne de calque guide
Centrer l’image, bouton
Boutons papier pelure
Indicateur de temps &eacute;coul&eacute;
Indicateur de cadence
Indicateur d’image courante
Vous pouvez modifier la mani&egrave;re dont les images sont affich&eacute;es dans le
sc&eacute;nario. Vous pouvez &eacute;galement afficher les vignettes du contenu des
images dans le sc&eacute;nario. Le sc&eacute;nario indique les endroits auxquels un
document contient des effets anim&eacute;s (animation image par image,
animation interpol&eacute;e ou trajectoires de mouvement, par exemple). Pour
plus d’informations sur l’animation, consultez &laquo; Cr&eacute;ation de mouvement &raquo;
dans le guide Utilisation de Flash de l’aide.
Les commandes de la section des calques du sc&eacute;nario vous permettent
d’afficher, de masquer, de verrouiller ou de d&eacute;verrouiller les calques, de
m&ecirc;me qu’en afficher le contenu sous forme de contours. Pour plus
d’informations, consultez la section Modification des calques et dossiers de
calques, page 83.
Vous pouvez ins&eacute;rer, supprimer, s&eacute;lectionner et d&eacute;placer des images dans le
sc&eacute;nario. Vous pouvez &eacute;galement faire glisser des images vers un nouvel
emplacement du m&ecirc;me calque ou d’un calque diff&eacute;rent. Pour plus
d’informations, consultez la section Utilisation d’images dans le sc&eacute;nario,
page 76.
Modification de l’apparence du sc&eacute;nario
Par d&eacute;faut, le sc&eacute;nario est affich&eacute; en haut de la fen&ecirc;tre principale de
l’application, au-dessus de la sc&egrave;ne. Pour changer sa position, vous pouvez
ancrer le sc&eacute;nario en bas ou sur les c&ocirc;t&eacute;s de la fen&ecirc;tre de l’application, ou
encore afficher le sc&eacute;nario dans sa propre fen&ecirc;tre. Vous pouvez &eacute;galement
masquer le sc&eacute;nario.
72
Notions de base de Studio
Vous pouvez redimensionner le sc&eacute;nario de mani&egrave;re &agrave; changer le nombre
de calques et d’images visibles. Lorsque le sc&eacute;nario contient plus de calques
qu’il ne peut en afficher, vous pouvez afficher les calques suppl&eacute;mentaires &agrave;
l’aide des barres de d&eacute;filement situ&eacute;es sur la droite du sc&eacute;nario.
Pour d&eacute;placer le sc&eacute;nario lorsqu’il est ancr&eacute; &agrave; la fen&ecirc;tre de
l’application :
■
Faites glisser la poign&eacute;e d’ancrage situ&eacute;e &agrave; gauche du mot Sc&eacute;nario dans
la barre de titre du panneau.
Pour ancrer un sc&eacute;nario dont l’ancrage est annul&eacute; :
■
Faites glisser la barre de titre du sc&eacute;nario vers un bord de la fen&ecirc;tre de
l’application. Faites-le glisser avec la touche Ctrl enfonc&eacute;e pour
emp&ecirc;cher son ancrage.
Pour agrandir ou r&eacute;duire les champs de nom des calques :
■
Faites glisser la barre s&eacute;parant les noms des calques et les images du
sc&eacute;nario.
Pour redimensionner le sc&eacute;nario, effectuez l’une des
op&eacute;rations suivantes :
■
Si le sc&eacute;nario est ancr&eacute; &agrave; la fen&ecirc;tre principale de l’application, faites
glisser la barre s&eacute;parant le sc&eacute;nario de la zone de la sc&egrave;ne.
■
Si le sc&eacute;nario n’est pas ancr&eacute; &agrave; la fen&ecirc;tre principale de l’application,
faites glisser le coin inf&eacute;rieur droit (Windows) ou la case de
redimensionnement situ&eacute;e dans le coin inf&eacute;rieur droit (Macintosh).
Notions de base de Flash
73
D&eacute;placement de la t&ecirc;te de lecture
La t&ecirc;te de lecture se d&eacute;place dans le sc&eacute;nario lors de la lecture d’un
document pour indiquer l’image actuellement affich&eacute;e sur la sc&egrave;ne. L’ent&ecirc;te du sc&eacute;nario affiche le num&eacute;ro des images de l’animation. Pour afficher
une image sur la sc&egrave;ne, vous devez d&eacute;placer la t&ecirc;te de lecture vers cette
image dans le sc&eacute;nario.
Lorsque vous travaillez avec de nombreuses images qui ne peuvent pas &ecirc;tre
toutes affich&eacute;es en m&ecirc;me temps dans le sc&eacute;nario, vous pouvez d&eacute;placer la
t&ecirc;te de lecture le long du sc&eacute;nario de mani&egrave;re &agrave; facilement localiser une
image particuli&egrave;re.
Pour atteindre une image :
■
Cliquez sur l’emplacement de l’image dans l’en-t&ecirc;te du sc&eacute;nario ou
faites glisser la t&ecirc;te de lecture vers la position souhait&eacute;e.
Pour centrer le sc&eacute;nario sur l’image en cours :
■
74
Notions de base de Studio
Cliquez sur le bouton Centrer l’image en bas du sc&eacute;nario.
Changement de l’affichage des images dans le sc&eacute;nario
Vous pouvez modifier la taille des images dans le sc&eacute;nario et ajouter de la
couleur aux s&eacute;quences d’images afin de les mettre en surbrillance. Vous
pouvez &eacute;galement inclure un aper&ccedil;u du contenu des images sous forme de
vignettes dans le sc&eacute;nario. Ces vignettes sont utiles pour avoir une vue
d’ensemble de l’animation mais n&eacute;cessitent de l’espace &eacute;cran
suppl&eacute;mentaire.
Bouton d’affichage des images
Menu d&eacute;roulant d’affichage des images
Options d’affichage des images Normales et Courtes
Pour changer l’affichage des images dans le sc&eacute;nario :
1.
Cliquez sur le bouton d’affichage des images situ&eacute; dans le coin sup&eacute;rieur
droit du sc&eacute;nario pour afficher le menu d&eacute;roulant d’affichage des
images.
2.
Effectuez votre s&eacute;lection parmi les options suivantes :
■
■
■
■
Pour changer la largeur des cellules des images, s&eacute;lectionnez
Minuscules, Petites, Normales, Moyennes ou Grandes. L’option
Grandes permet de visualiser les d&eacute;tails des courbes audio.
Pour r&eacute;duire la hauteur des lignes de cellules, s&eacute;lectionnez Courtes.
Pour activer ou d&eacute;sactiver la teinte des s&eacute;quences d’images,
s&eacute;lectionnez Images teint&eacute;es.
Pour afficher des vignettes du contenu de chaque image mises &agrave;
l’&eacute;chelle en fonction des images du sc&eacute;nario, s&eacute;lectionnez Aper&ccedil;u.
La taille apparente du contenu peut varier.
Notions de base de Flash
75
■
Pour afficher une vignette de chaque image (y compris l’espace
vide), s&eacute;lectionnez Afficher un aper&ccedil;u dans le contexte. Cette
option permet de visualiser la mani&egrave;re dont les &eacute;l&eacute;ments se
d&eacute;placent au sein de leurs images au cours de l’effet anim&eacute;.
Toutefois, les aper&ccedil;us sont g&eacute;n&eacute;ralement plus petits qu’avec l’option
Afficher un aper&ccedil;u.
Utilisation des images et des images-cl&eacute;s
Une image-cl&eacute; est une image dans laquelle vous d&eacute;finissez la modification
des propri&eacute;t&eacute;s d’un objet pour une animation ou incluez du code
ActionScript pour commander certains aspects de votre document. Flash
peut interpoler ou remplir automatiquement les images situ&eacute;es entre les
images-cl&eacute;s que vous d&eacute;finissez pour produire des animations fluides. Les
images-cl&eacute;s facilitent la cr&eacute;ation des animations car elles &eacute;vitent d’avoir &agrave;
tracer chacune de leurs images. Vous pouvez facilement modifier la
longueur d’un effet anim&eacute; interpol&eacute; en faisant glisser une image-cl&eacute; dans le
sc&eacute;nario.
L’ordre d’apparition des images et des images-cl&eacute;s dans le sc&eacute;nario
d&eacute;termine celui de leur affichage dans une application Flash. Vous pouvez
organiser les images-cl&eacute;s diff&eacute;remment dans le sc&eacute;nario afin de modifier la
s&eacute;quence des &eacute;v&eacute;nements dans l’animation.
Utilisation d’images dans le sc&eacute;nario
Dans le sc&eacute;nario, vous travaillez avec des images et des images-cl&eacute;s en les
pla&ccedil;ant dans l’ordre correspondant &agrave; celui dans lequel vous souhaitez que
les objets apparaissent dans les images. Vous pouvez changer la longueur
d’un effet anim&eacute; interpol&eacute; en faisant glisser une image-cl&eacute; dans le sc&eacute;nario.
Vous pouvez effectuer les modifications suivantes sur les images et les
images-cl&eacute;s :
76
Notions de base de Studio
■
Ins&eacute;rer, s&eacute;lectionner, supprimer et d&eacute;placer des images ou des imagescl&eacute;s.
■
Faire glisser des images et des images-cl&eacute;s vers un nouvel emplacement
du m&ecirc;me calque ou d’un calque diff&eacute;rent.
■
Copier et coller des images et des images-cl&eacute;s.
■
Convertir des images-cl&eacute;s en images.
■
Faire glisser un &eacute;l&eacute;ment du panneau Biblioth&egrave;que vers la sc&egrave;ne de
mani&egrave;re &agrave; l’ajouter &agrave; l’image-cl&eacute; actuelle.
Le sc&eacute;nario affiche les images interpol&eacute;es d’un effet anim&eacute;. Pour plus
d’informations sur la modification des images, consultez &laquo; Cr&eacute;ation de
mouvement &raquo; dans le guide Utilisation de Flash de l’aide.
Flash offre deux m&eacute;thodes distinctes pour s&eacute;lectionner les images dans le
sc&eacute;nario. Avec la s&eacute;lection bas&eacute;e sur images (param&egrave;tre par d&eacute;faut), vous
s&eacute;lectionnez s&eacute;par&eacute;ment les images dans le sc&eacute;nario. Avec la s&eacute;lection bas&eacute;e
sur plages, vous s&eacute;lectionnez toute une s&eacute;quence d’images (d’une image-cl&eacute;
&agrave; la suivante) en cliquant sur n’importe quelle image de cette s&eacute;quence.
Vous pouvez sp&eacute;cifier une s&eacute;lection bas&eacute;e sur plages dans les pr&eacute;f&eacute;rences
Flash.
Pour effectuer une s&eacute;lection bas&eacute;e sur plages :
1.
S&eacute;lectionnez Edition &gt; Pr&eacute;f&eacute;rences.
2.
S&eacute;lectionner l’onglet G&eacute;n&eacute;ral.
3.
Dans la section Sc&eacute;nario, choisissez S&eacute;lection bas&eacute;e sur plages.
4.
Cliquez sur OK.
Pour plus d’informations, consultez la section D&eacute;finition des pr&eacute;f&eacute;rences de
Flash, page 101.
Pour ins&eacute;rer des images dans le sc&eacute;nario, effectuez l’une des
op&eacute;rations suivantes :
■
Pour ins&eacute;rer une nouvelle image, s&eacute;lectionnez Insertion &gt; Image.
■
Pour cr&eacute;er une image-cl&eacute;, choisissez Insertion &gt; Image-cl&eacute;. Vous pouvez
&eacute;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&eacute;, puis choisir Ins&eacute;rer une image-cl&eacute; dans le menu
contextuel.
■
Pour cr&eacute;er une image-cl&eacute; vide, choisissez Insertion &gt; Image-cl&eacute; vide ou
cliquez avec le bouton droit (Windows) ou en appuyant sur la touche
Ctrl (Macintosh) sur l’image dans laquelle placer l’image-cl&eacute;, puis
choisissez Ins&eacute;rer une image-cl&eacute; vide dans le menu contextuel.
Notions de base de Flash
77
Pour s&eacute;lectionner une ou plusieurs images dans le sc&eacute;nario :
■
Pour s&eacute;lectionner une image, cliquez sur l’image. Si vous avez activ&eacute;
l’option S&eacute;lection bas&eacute;e sur plages dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences,
le fait de cliquer sur une image s&eacute;lectionne toute la s&eacute;quence d’images
comprise entre deux images-cl&eacute;s. Pour plus d’informations, consultez la
section D&eacute;finition des pr&eacute;f&eacute;rences de Flash, page 101.
■
Pour s&eacute;lectionner plusieurs images contigu&euml;s, maintenez la touche Maj
enfonc&eacute;e et cliquez sur les autres images.
■
Pour s&eacute;lectionner plusieurs images non contigu&euml;s, maintenez la touche
Ctrl (Windows) ou Commande (Macintosh) enfonc&eacute;e, puis cliquez sur
les autres images.
Pour s&eacute;lectionner toutes les images d’un sc&eacute;nario :
■
Choisissez Edition &gt; Sc&eacute;nario &gt; S&eacute;lectionner toutes les images.
Pour supprimer ou modifier une image ou une image-cl&eacute;,
effectuez l’une des op&eacute;rations suivantes :
78
Notions de base de Studio
■
Pour supprimer une image, une image-cl&eacute; ou une s&eacute;quence d’images,
s&eacute;lectionnez l’image, l’image-cl&eacute; ou la s&eacute;quence, choisissez Edition &gt;
Sc&eacute;nario &gt; Supprimer les images, ou cliquez avec le bouton droit
(Windows) ou en appuyant sur la touche Ctrl (Macintosh) sur l’image,
l’image-cl&eacute; ou la s&eacute;quence et choisissez Supprimer les images &agrave; partir du
menu contextuel. Les images environnantes demeurent inchang&eacute;es.
■
Pour d&eacute;placer une image-cl&eacute; ou une s&eacute;quence d’images et leur contenu,
faites-la glisser vers l’emplacement souhait&eacute;.
■
Pour &eacute;tendre la dur&eacute;e d’une animation &agrave; image-cl&eacute;, faites glisser
l’image-cl&eacute; tout en appuyant sur Alt (Windows) ou Option
(Macintosh) jusqu’&agrave; l’image dont vous souhaitez qu’elle devienne la
derni&egrave;re image de la s&eacute;quence.
■
Pour copier une image-cl&eacute; ou une s&eacute;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&eacute; vers
l’emplacement souhait&eacute;.
■
Pour copier et coller une image ou une s&eacute;quence d’images,
s&eacute;lectionnez-la et choisissez Edition &gt; Sc&eacute;nario &gt; Copier les images.
S&eacute;lectionnez une image ou s&eacute;quence &agrave; remplacer et
choisissez Edition &gt; Sc&eacute;nario &gt; Coller les images.
■
Pour convertir une image-cl&eacute; en image, s&eacute;lectionnez-la et choisissez
Edition &gt; Sc&eacute;nario &gt; Supprimer l’image-cl&eacute;. Vous pouvez &eacute;galement
cliquer avec le bouton droit de la souris (Windows) ou tout en
appuyant sur la touche Ctrl (Macintosh) sur l’image ou la s&eacute;quence et
choisir Supprimer l’image-cl&eacute; dans le menu contextuel. Le contenu de
la sc&egrave;ne de l’’image-cl&eacute; effac&eacute;e et de toutes les images comprises entre
elle et l’image-cl&eacute; suivante est remplac&eacute; par le contenu de la sc&egrave;ne de
l’image pr&eacute;c&eacute;dant l’image-cl&eacute; effac&eacute;e.
■
Pour changer la longueur d’une s&eacute;quence interpol&eacute;e, faites glisser
l’image-cl&eacute; de d&eacute;but ou de fin vers la gauche ou la droite. Pour modifier
la dur&eacute;e d’une s&eacute;quence image par image, consultez &laquo; Cr&eacute;ation
d’animations image par image &raquo;, dans le guide Utilisation de Flash de
l’aide.
■
Pour ajouter un &eacute;l&eacute;ment de la biblioth&egrave;que &agrave; l’image-cl&eacute; en cours, faites
glisser l’&eacute;l&eacute;ment du panneau Biblioth&egrave;que vers la sc&egrave;ne.
Utilisation des calques
Les calques sont similaires &agrave; des feuilles transparentes en ac&eacute;tate empil&eacute;es
les unes sur les autres sur la sc&egrave;ne. Les calques permettent d’organiser les
diff&eacute;rents &eacute;l&eacute;ments 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&icirc;tre les calques situ&eacute;s en dessous.
Pour dessiner, peindre ou encore modifier un calque ou dossier, vous devez
s&eacute;lectionner le calque dans le sc&eacute;nario pour le rendre actif. L’ic&ocirc;ne crayon
en regard du nom d’un calque ou dossier dans le sc&eacute;nario indique que le
calque ou dossier est actif. Vous ne pouvez activer qu’un seul calque &agrave; la fois
(m&ecirc;me si vous pouvez en s&eacute;lectionner plusieurs &agrave; la fois).
Lorsque vous cr&eacute;ez un document Flash, celui-ci contient un seul calque.
Vous pouvez y ajouter d’autres calques de fa&ccedil;on &agrave; organiser le contenu, les
effets anim&eacute;s et les autres &eacute;l&eacute;ments de votre document. Le nombre de
calques que vous pouvez cr&eacute;er n’a de limite que la m&eacute;moire de votre
ordinateur, les calques n’augmentant pas la taille de votre fichier SWF
publi&eacute;. Seuls les objets que vous placez dans des calques accroissent la taille
du fichier. Vous pouvez &eacute;galement masquer, verrouiller ou r&eacute;arranger les
calques.
Notions de base de Flash
79
Vous pouvez &eacute;galement organiser et g&eacute;rer les calques en cr&eacute;ant des dossiers
de calques et en y pla&ccedil;ant des calques. Vous pouvez d&eacute;velopper ou r&eacute;duire
les dossiers de calques dans le sc&eacute;nario sans affecter ce qui est affich&eacute; sur la
sc&egrave;ne. Il est conseill&eacute; d’utiliser des calques ou dossiers distincts pour les
fichiers audio, ActionScript, les &eacute;tiquettes et les commentaires d’image.
Cela vous permet de retrouver plus rapidement ces &eacute;l&eacute;ments lorsque vous
devez les modifier.
En outre, vous pouvez utiliser des calques de guide sp&eacute;ciaux pour faciliter
les op&eacute;rations de dessin et de modification, et masquer les calques pour
mieux cr&eacute;er des effets sp&eacute;ciaux.
Pour afficher une pr&eacute;sentation interactive de l’utilisation des calques dans
Flash, choisissez Aide &gt; Didacticiels Flash &gt; T&acirc;ches de base &gt; Utiliser les
calques.
Cr&eacute;ation de calques ou dossiers de calques
Lorsque vous cr&eacute;ez un calque ou dossier, celui-ci appara&icirc;t au-dessus du
calque s&eacute;lectionn&eacute;. Le calque que vous venez d’ajouter devient le calque
actif.
Pour cr&eacute;er un calque, effectuez l’une des op&eacute;rations
suivantes :
■
Cliquez sur le bouton Ins&eacute;rer un calque, en bas du sc&eacute;nario.
■
Choisissez Insertion &gt; Sc&eacute;nario &gt; Calque.
■
Cliquez avec le bouton droit de la souris (Windows) ou avec la touche
Ctrl enfonc&eacute;e (Macintosh) sur le nom d’un calque dans le sc&eacute;nario,
puis choisissez Ins&eacute;rer un calque dans le menu contextuel.
Pour cr&eacute;er un dossier de calques, effectuez l’une des
op&eacute;rations suivantes :
■
S&eacute;lectionnez un calque ou un dossier dans le sc&eacute;nario, puis choisissez
Insertion &gt; Sc&eacute;nario &gt; Dossier de calques.
■
Cliquez avec le bouton droit de la souris (Windows) ou avec la touche
Ctrl enfonc&eacute;e (Macintosh) sur le nom d’un calque dans le sc&eacute;nario,
puis choisissez Ins&eacute;rer un dossier dans le menu contextuel.
Le nouveau dossier appara&icirc;t au-dessus du calque ou du dossier que vous
avez s&eacute;lectionn&eacute;.
80
Notions de base de Studio
Affichage des calques ou dossiers de calques
Vous pouvez afficher ou masquer les calques ou dossiers au cours de votre
travail. Une croix rouge (X) plac&eacute;e en regard du nom d’un calque ou d’un
dossier dans le sc&eacute;nario indique que celui-ci est masqu&eacute;. Lorsque vous
publiez un fichier Flash SWF, tous les calques masqu&eacute;s dans le document
FLA sont conserv&eacute;s et visibles dans le fichier SWF.
Pour mieux distinguer les calques auxquels appartiennent les objets, vous
pouvez afficher tous les objets des calques sous forme de contours color&eacute;s.
Vous pouvez changer la couleur de contour utilis&eacute;e par chaque calque.
Vous pouvez modifier la hauteur des calques dans le sc&eacute;nario afin d’afficher
plus d’informations (des courbes audio, par exemple) dans le sc&eacute;nario.
Vous avez aussi la possibilit&eacute; de modifier le nombre de calques affich&eacute;s dans
le sc&eacute;nario.
Pour afficher ou masquer un calque ou dossier, effectuez l’une
des op&eacute;rations suivantes :
■
Cliquez dans la colonne Œil, &agrave; droite du nom du calque ou dossier,
pour masquer ce calque ou dossier. Cliquez de nouveau pour l’afficher.
■
Cliquez sur l’ic&ocirc;ne repr&eacute;sentant un œil pour masquer tous les calques et
dossiers dans le sc&eacute;nario. Cliquez de nouveau dessus pour afficher tous
les calques et dossiers.
■
Faites glisser le pointeur de la souris dans la colonne Œil pour afficher
ou masquer plusieurs calques ou dossiers.
■
Cliquez en appuyant sur la touche Alt (Windows) ou Option
(Macintosh) dans la colonne Œil, &agrave; droite du nom du calque ou
dossier, pour masquer tous les autres calques et dossiers. Cliquez de
nouveau en appuyant sur la touche Alt ou Option pour afficher tous les
calques et dossiers.
Pour afficher le contenu d’un calque sous forme de contours,
effectuez l’une des op&eacute;rations suivantes :
■
Cliquez dans la colonne Contours, &agrave; droite du nom du calque, pour
afficher tous les objets pr&eacute;sents sur ce calque sous forme de contours.
Cliquez de nouveau pour d&eacute;sactiver l’affichage des contours.
■
Cliquez sur l’ic&ocirc;ne Contours pour afficher les objets pr&eacute;sents sur tous
les calques sous forme de contours. Cliquez de nouveau dessus pour
d&eacute;sactiver l’affichage des contours sur tous les calques.
Notions de base de Flash
81
■
Cliquez en appuyant sur la touche Alt (Windows) ou Option
(Macintosh) dans la colonne Contours, &agrave; droite du nom du calque,
pour afficher les objets de tous les autres calques sous forme de
contours. Cliquez de nouveau en appuyant sur la touche Alt ou Option
pour d&eacute;sactiver l’affichage des contours pour tous les calques.
Pour changer la couleur du contour d’un calque :
1.
Effectuez l’une des op&eacute;rations suivantes :
■
■
■
Double-cliquez sur l’ic&ocirc;ne du calque (l’ic&ocirc;ne situ&eacute;e &agrave; gauche du
nom du calque) dans le sc&eacute;nario.
Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl
enfonc&eacute;e (Macintosh) sur le nom du calque et choisissez Propri&eacute;t&eacute;s
dans le menu contextuel.
S&eacute;lectionnez le calque dans le sc&eacute;nario et choisissez Modification &gt;
Calque.
2.
Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s du calque, cliquez sur Couleur du
contour et s&eacute;lectionnez une nouvelle couleur, entrez une valeur
hexad&eacute;cimale pour la couleur ou cliquez sur le s&eacute;lecteur de couleur et
choisissez une couleur.
3.
Cliquez sur OK.
Pour changer la hauteur du calque dans le sc&eacute;nario :
1.
Effectuez l’une des op&eacute;rations suivantes :
■
■
■
2.
Double-cliquez sur l’ic&ocirc;ne du calque (l’ic&ocirc;ne situ&eacute;e &agrave; gauche du
nom du calque) dans le sc&eacute;nario.
Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl
enfonc&eacute;e (Macintosh) sur le nom du calque et choisissez Propri&eacute;t&eacute;s
dans le menu contextuel.
S&eacute;lectionnez le calque dans le sc&eacute;nario et choisissez Modification &gt;
Sc&eacute;nario &gt; Propri&eacute;t&eacute;s du calque.
Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s du calque, s&eacute;lectionnez une option
pour Hauteur du calque et cliquez sur OK.
Pour changer le nombre de calques affich&eacute;s dans le sc&eacute;nario :
■
82
Notions de base de Studio
Faites glisser la barre qui s&eacute;pare le sc&eacute;nario de la zone de la sc&egrave;ne.
Modification des calques et dossiers de calques
Vous pouvez renommer, copier et supprimer des calques et dossiers. Vous
pouvez &eacute;galement verrouiller les calques ou les dossiers pour qu’ils ne
puissent pas &ecirc;tre modifi&eacute;s.
Par d&eacute;faut, les nouveaux calques sont nomm&eacute;s dans l’ordre de leur
cr&eacute;ation : Calque 1, Calque 2, etc. Vous pouvez renommer les calques afin
de mieux en refl&eacute;ter le contenu.
Pour s&eacute;lectionner un calque ou dossier, effectuez l’une des
op&eacute;rations suivantes :
■
Cliquez sur le nom du calque ou dossier dans le sc&eacute;nario.
■
Cliquez sur n’importe quelle image du sc&eacute;nario du calque que vous
souhaitez s&eacute;lectionner.
■
S&eacute;lectionnez un objet sur la sc&egrave;ne, dans le calque que vous souhaitez
s&eacute;lectionner.
■
Pour s&eacute;lectionner deux ou plusieurs calques ou dossiers, effectuez l’une
des op&eacute;rations suivantes :
■
■
Pour s&eacute;lectionner des calques ou dossiers contigus, cliquez avec la
touche Maj enfonc&eacute;e sur leurs noms dans le sc&eacute;nario.
Pour s&eacute;lectionner des calques ou dossiers non contigus, cliquez avec
la touche Ctrl enfonc&eacute;e (Windows) ou la touche Commande
(Macintosh) enfonc&eacute;e sur leurs noms dans le sc&eacute;nario.
Pour renommer un calque ou dossier, effectuez l’une des
op&eacute;rations suivantes :
■
Double-cliquez sur le nom du calque ou dossier dans le sc&eacute;nario et
entrez un nouveau nom.
■
Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl
enfonc&eacute;e (Macintosh) sur le nom du calque ou dossier et choisissez
Propri&eacute;t&eacute;s dans le menu contextuel. Entrez le nouveau nom dans Nom
et cliquez sur OK.
■
S&eacute;lectionnez le calque ou le dossier dans le sc&eacute;nario, puis choisissez
Modification &gt; Sc&eacute;nario &gt; Propri&eacute;t&eacute;s du calque. Dans la bo&icirc;te de
dialogue Propri&eacute;t&eacute;s du calque, entrez le nouveau nom dans Nom et
cliquez sur OK.
Notions de base de Flash
83
Pour verrouiller ou d&eacute;verrouiller un ou plusieurs calques ou
dossiers, effectuez l’une des op&eacute;rations suivantes :
■
Cliquez dans la colonne de verrouillage, &agrave; droite du nom du calque ou
dossier, pour verrouiller le calque ou dossier correspondant. Cliquez de
nouveau dans la colonne de verrouillage pour le d&eacute;verrouiller.
■
Cliquez sur l’ic&ocirc;ne de verrouillage pour verrouiller tous les calques et
dossiers. Cliquez de nouveau dessus pour d&eacute;verrouiller tous les calques
et dossiers.
■
Faites glisser le pointeur de la souris dans la colonne de verrouillage
pour verrouiller ou d&eacute;verrouiller plusieurs calques ou dossiers.
■
Cliquez en appuyant sur la touche Alt (Windows) ou Option
(Macintosh) dans la colonne de verrouillage, &agrave; droite du nom du calque
ou de dossier, pour verrouiller tous les autres calques ou dossiers.
Cliquez de nouveau en appuyant sur la touche Alt ou Option dans la
colonne de verrouillage pour d&eacute;verrouiller tous les calques ou dossiers.
Pour copier un calque :
1.
Cliquez sur le nom du calque dans le sc&eacute;nario pour s&eacute;lectionner le calque
tout entier.
2.
Choisissez Edition &gt; Sc&eacute;nario &gt; Copier les images.
3.
Cliquez sur le bouton Ins&eacute;rer un calque pour cr&eacute;er un calque.
4.
Cliquez sur le nouveau calque et choisissez Edition &gt; Sc&eacute;nario &gt; Coller
les images.
Pour copier le contenu d’un dossier de calques :
1.
Cliquez sur le triangle affich&eacute; &agrave; gauche du nom du dossier dans le
sc&eacute;nario pour le r&eacute;duire, si n&eacute;cessaire.
2.
Cliquez sur le nom du dossier pour s&eacute;lectionner le dossier tout entier.
3.
Choisissez Edition &gt; Sc&eacute;nario &gt; Copier les images.
4.
Pour cr&eacute;er un nouveau dossier, choisissez Insertion &gt; Sc&eacute;nario &gt; Dossier
de calques.
5.
Cliquez sur le nouveau dossier et choisissez Edition &gt; Sc&eacute;nario &gt; Coller
les images.
Pour supprimer un calque ou dossier :
1.
84
Notions de base de Studio
S&eacute;lectionnez le calque ou dossier en cliquant sur son nom dans le
sc&eacute;nario ou n’importe quelle image du calque.
2.
Effectuez l’une des op&eacute;rations suivantes :
■
Cliquez sur l’ic&ocirc;ne Supprimer le calque dans le sc&eacute;nario.
■
Faites glisser le calque ou dossier sur l’ic&ocirc;ne Supprimer le calque.
■
Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl
enfonc&eacute;e (Macintosh) sur le nom du calque ou dossier et choisissez
Supprimer le calque dans le menu contextuel.
R EM A R QU E
Lorsque vous supprimez un dossier de calques, tous les calques et leur
contenu sont &eacute;galement supprim&eacute;s.
Organisation des calques et dossiers de calques
Vous pouvez r&eacute;organiser les diff&eacute;rents calques et dossiers dans le sc&eacute;nario
pour mieux organiser votre document.
Les dossiers de calques vous permettent de mieux organiser vos t&acirc;ches en
pla&ccedil;ant les calques dans une structure arborescente. Vous pouvez
d&eacute;velopper ou r&eacute;duire un dossier pour afficher les calques qu’il contient
sans affecter les calques visibles sur la sc&egrave;ne. Les dossiers pouvant contenir
des calques et d’autres dossiers, vous pouvez organiser les calques de la
m&ecirc;me mani&egrave;re que vous organisez les fichiers de votre ordinateur.
Les commandes du sc&eacute;nario relatives aux calques s’appliquent &agrave; tous les
calques d’un m&ecirc;me dossier. Par exemple, le verrouillage d’un dossier de
calques entra&icirc;ne le verrouillage de tous les calques qu’il contient.
Pour d&eacute;placer un calque (ou un dossier de calques) et le placer
dans un dossier de calques :
■
Faites glisser le nom du calque (ou dossier de calques) sur le nom du
dossier de calques de destination.
Le calque (ou dossier de calque) appara&icirc;t &agrave; l’int&eacute;rieur du dossier de
calques de destination dans le sc&eacute;nario.
Pour changer l’ordre des calques ou dossiers :
■
Faites glisser un ou plusieurs calques ou dossiers dans le sc&eacute;nario jusqu’&agrave;
la position souhait&eacute;e au-dessus ou en dessous d’autres calques dans le
sc&eacute;nario.
Notions de base de Flash
85
Pour d&eacute;velopper ou r&eacute;duire un dossier :
■
Cliquez sur le triangle affich&eacute; &agrave; gauche du nom du dossier.
Pour d&eacute;velopper ou r&eacute;duire tous les dossiers :
■
Cliquez avec le bouton droit (Windows) ou avec la touche Ctrl
enfonc&eacute;e (Macintosh), puis choisissez D&eacute;velopper tous les dossiers ou
R&eacute;duire tous les dossiers dans le menu contextuel.
Utilisation des calques de guide
Vous pouvez faciliter l’alignement des objets de vos sc&egrave;nes &agrave; l’aide de
calques de guide. Il vous suffit ensuite d’aligner les objets des autres calques
sur les objets cr&eacute;&eacute;s sur les calques de guide. Les calques de guide ne sont pas
export&eacute;s et n’apparaissent pas dans les fichiers SWF tels que publi&eacute;s. Vous
pouvez utiliser n’importe quel calque comme calque de guide. Les calques
de guide sont signal&eacute;s par une ic&ocirc;ne de guide &agrave; gauche du nom du calque.
Vous pouvez &eacute;galement cr&eacute;er un calque de guide de mouvement pour
contr&ocirc;ler le mouvement des objets d’une animation interpol&eacute;e de
mouvement. Pour plus d’informations, consultez &laquo; Interpolation de
mouvement le long d’une trajectoire &raquo; dans le guide Utilisation de Flash de
l’aide.
R E MA R QU E
Un calque normal plac&eacute; sur un calque de guide convertit le calque de
guide en calque de guide de mouvement. Pour &eacute;viter la conversion
accidentelle d’un calque de guide, placez tous les calques de guide en
dernier dans l’ordre des calques.
Pour d&eacute;signer un calque comme calque de guide :
■
S&eacute;lectionnez le calque et cliquez avec le bouton droit (Windows) ou
avec la touche Ctrl enfonc&eacute;e (Macintosh), puis choisissez Guide dans le
menu contextuel. S&eacute;lectionnez &agrave; nouveau Guide pour convertir le
calque en calque normal.
A propos de la barre d’outils principale et de la
barre d’&eacute;dition
La barre de menus situ&eacute;e en haut de la fen&ecirc;tre de l’application Flash affiche
les menus et les commandes contr&ocirc;lant les diverses fonctionnalit&eacute;s de
Flash. Ces menus sont : Fichier, Edition, Affichage, Insertion,
Modification, Texte, Commandes, Contr&ocirc;le, Fen&ecirc;tre et Aide.
86
Notions de base de Studio
La barre d’&eacute;dition, situ&eacute;e en haut du sc&eacute;nario, comprend les commandes et
informations concernant la modification des sc&egrave;nes et des symboles, ainsi
que la modification du niveau de zoom de la sc&egrave;ne.
Pour plus d’informations sur la modification du niveau de zoom de la
sc&egrave;ne, consultez Zoom, page 69. Pour des informations sur la modification
de symboles, consultez &laquo; Utilisation de symboles, d’occurrences et d’actifs
de biblioth&egrave;que &raquo; dans le guide Utilisation de Flash de l’aide. Pour plus
d’informations sur le travail avec les sc&egrave;nes, voir &laquo; Utilisation des sc&egrave;nes &raquo;
dans le guide Utilisation de Flash de l’aide.
Utilisation du panneau Outils
Les &eacute;l&eacute;ments du panneau Outils vous permettent de dessiner, de peindre,
de s&eacute;lectionner, de modifier une illustration ou de modifier l’affichage de la
sc&egrave;ne. Le panneau Outils est divis&eacute; en quatre sections :
■
La zone Outils contient les outils de dessin, de peinture et de s&eacute;lection.
■
La zone Affichage contient les outils de zoom et de panoramique
utilis&eacute;s dans la fen&ecirc;tre de l’application.
■
La zone Couleurs contient les modificateurs de couleur de trait et de
remplissage.
■
La zone d’options affiche des modificateurs pour l’outil s&eacute;lectionn&eacute;. Les
modificateurs affectent les op&eacute;rations de peinture ou d’&eacute;dition de
l’outil.
Gr&acirc;ce &agrave; la bo&icirc;te de dialogue Personnaliser le panneau Outils, vous pouvez
indiquer quels outils afficher dans l’environnement auteur de Flash. Pour
plus d’informations, consultez la section Personnalisation du panneau
Outils, page 88.
Pour plus d’informations sur l’utilisation des outils de dessin et de peinture,
consultez &laquo; A propos des outils de dessin et de peinture Flash &raquo; dans le
guide Utilisation de Flash de l’aide. Pour plus d’informations sur
l’utilisation des outils de s&eacute;lection, consultez &laquo; S&eacute;lection d’objets &raquo; dans le
guide Utilisation de Flash de l’aide. Pour plus d’informations sur
l’utilisation des outils de modification de l’affichage, consultez la section
D&eacute;placement de la vue de la sc&egrave;ne, page 71.
Pour afficher ou masquer le panneau Outils :
■
S&eacute;lectionnez Fen&ecirc;tre &gt; Outils.
Notions de base de Flash
87
S&eacute;lection des outils
Vous pouvez s&eacute;lectionner les outils en cliquant dans le panneau Outils ou
en utilisant un raccourci clavier.
Pour s&eacute;lectionner un outil, effectuez l’une des op&eacute;rations
suivantes :
■
Cliquez sur l’outil que vous souhaitez utiliser. Un ensemble de
modificateurs peut appara&icirc;tre en bas du panneau Outils en fonction de
l’outil que vous s&eacute;lectionnez.
■
Appuyez sur le raccourci clavier de l’outil. Vous pouvez afficher les
raccourcis clavier en s&eacute;lectionnant Edition &gt; Raccourcis clavier.
■
Pour s&eacute;lectionner un outil situ&eacute; dans le menu d&eacute;roulant comme outil
visible (par exemple, l’outil Rectangle), cliquez sur l’ic&ocirc;ne de l’outil
visible et choisissez un autre outil dans le menu d&eacute;roulant.
Personnalisation du panneau Outils
Vous pouvez personnaliser le panneau Outils afin d’indiquer quels outils
afficher dans l’environnement auteur. Utilisez la bo&icirc;te de dialogue
Personnaliser le panneau Outils pour ajouter ou supprimer des outils du
panneau Outils.
Vous pouvez afficher plusieurs outils &agrave; un seul endroit. Lorsque plusieurs
outils sont affich&eacute;s &agrave; un seul endroit, l’outil ayant &eacute;t&eacute; utilis&eacute; le plus
r&eacute;cemment s’affiche avec une fl&egrave;che dans le coin inf&eacute;rieur droit de son
ic&ocirc;ne. Lorsque vous maintenez le bouton de la souris enfonc&eacute; sur l’ic&ocirc;ne,
les autres outils du groupe apparaissent dans un menu d&eacute;roulant. Vous
pouvez alors s&eacute;lectionner un outil dans le menu.
Pour personnaliser le panneau Outils :
1.
Pour afficher la bo&icirc;te de dialogue Personnaliser le panneau Outils,
proc&eacute;dez comme suit :
■
■
Sous Windows, choisissez Edition &gt; Personnaliser le panneau
Outils.
Sous Macintosh, choisissez Flash &gt; Personnaliser le panneau Outils.
Le menu Outils disponibles indique les outils disponibles dans
Flash. Le menu S&eacute;lection actuelle indique l’outil (ou les outils)
attribu&eacute;(s) &agrave; l’emplacement s&eacute;lectionn&eacute; dans le panneau Outils.
88
Notions de base de Studio
R E MA R Q UE
Si plusieurs outils sont attribu&eacute;s &agrave; un m&ecirc;me emplacement du panneau
Outils, une petite fl&egrave;che appara&icirc;t dans le coin inf&eacute;rieur droit de l’outil. Cette
fl&egrave;che indique que des outils suppl&eacute;mentaires sont disponibles dans un
menu contextuel. Le m&ecirc;me raccourci clavier fonctionne pour tous les
outils du menu contextuel.
2.
Cliquez sur un outil dans l’image du panneau Outils ou utilisez les
fl&egrave;ches pour passer d’un outil &agrave; l’autre et pour indiquer l’emplacement
auquel vous voulez attribuer un autre outil.
3.
Pour ajouter un outil &agrave; l’emplacement s&eacute;lectionn&eacute;, choisissez l’outil dans
la liste Outils disponibles et cliquez sur le bouton Ajouter. Vous pouvez
attribuer un outil &agrave; plusieurs emplacements.
4.
Pour supprimer un outil de l’emplacement s&eacute;lectionn&eacute;, choisissez l’outil
dans la liste d&eacute;roulante S&eacute;lection actuelle, puis cliquez sur le bouton
Supprimer.
5.
Cliquez sur OK pour appliquer vos modifications et fermez la bo&icirc;te de
dialogue Personnaliser le panneau Outils.
Pour restaurer la disposition par d&eacute;faut du panneau Outils :
■
Cliquez sur Restaurer les param&egrave;tres par d&eacute;faut dans la bo&icirc;te de
dialogue Personnaliser le panneau Outils.
Utilisation de la grille, des guides et des r&egrave;gles
Flash peut afficher des r&egrave;gles et des guides destin&eacute;s &agrave; vous aider &agrave; dessiner et
&agrave; positionner les objets avec pr&eacute;cision. Vous pouvez placer les guides dans
un document et y accrocher les objets ou accrocher ces derniers aux grilles
apr&egrave;s les avoir activ&eacute;es.
R EMA R Q U E
Vous pouvez aussi accrocher des objets &agrave; d’autres objets ou pixels. Vous
pouvez &eacute;galement aligner des objets en utilisant les limites de la tol&eacute;rance
&agrave; l’accrochage. Pour plus d’informations, consultez &laquo; Accrochage &raquo; dans
le guide Utilisation de Flash de l’aide.
Notions de base de Flash
89
Utilisation des r&egrave;gles
Lorsque les r&egrave;gles sont affich&eacute;es, elles apparaissent le long des bords
sup&eacute;rieurs ou lat&eacute;raux du document. Vous pouvez changer l’unit&eacute; de
mesure utilis&eacute;e dans les r&egrave;gles (qui est le pixel, par d&eacute;faut) et utiliser une
autre unit&eacute;. Lorsque vous d&eacute;placez un &eacute;l&eacute;ment sur la sc&egrave;ne alors que les
r&egrave;gles sont affich&eacute;es, des lignes indiquant les dimensions des &eacute;l&eacute;ments
apparaissent sur les r&egrave;gles.
Pour afficher ou masquer les r&egrave;gles :
■
Choisissez Affichage &gt; R&egrave;gles.
Pour sp&eacute;cifier l’unit&eacute; de mesure des r&egrave;gles pour un document :
■
S&eacute;lectionnez Modifier &gt; Document, puis choisir une unit&eacute; dans le
menu Unit&eacute;s de la r&egrave;gle sur le c&ocirc;t&eacute; inf&eacute;rieur gauche de la bo&icirc;te de
dialogue.
Utilisation des guides
Vous pouvez faire glisser des guides horizontaux ou verticaux des r&egrave;gles
sur la sc&egrave;ne lorsque les r&egrave;gles sont affich&eacute;es. Vous pouvez d&eacute;placer,
verrouiller, masquer et supprimer les guides. Vous pouvez &eacute;galement
accrocher les objets aux guides, puis modifier la couleur et la tol&eacute;rance &agrave;
l’accrochage (la distance &agrave; laquelle les objets doivent se trouver pour
pouvoir &ecirc;tre accroch&eacute;s) aux guides. Flash vous permet de cr&eacute;er des
sc&eacute;narios imbriqu&eacute;s. Les guides d&eacute;pla&ccedil;ables apparaissent sur la sc&egrave;ne
uniquement lorsque le sc&eacute;nario dans lequel ils sont cr&eacute;&eacute;s est actif.
Vous pouvez effacer tous les guides dans le mode d’&eacute;dition en cours, qu’il
s’agisse du mode d’&eacute;dition de document ou de symbole. En mode d’&eacute;dition
de documents, tous les guides du document sont effac&eacute;s. En mode
d’&eacute;dition de symboles, l’ensemble des guides de tous les symboles sont
effac&eacute;s.
Pour cr&eacute;er des guides personnalis&eacute;s ou irr&eacute;guliers, vous devez utiliser les
calques de guide. Pour plus d’informations, consultez la section Utilisation
des calques de guide, page 86.
90
Notions de base de Studio
Pour afficher ou masquer les guides de dessin :
■
Choisissez Affichage &gt; Guides &gt; Afficher les guides.
R EM A R QU E
Si la grille est d&eacute;j&agrave; visible et que l’option Accrocher &agrave; la grille est activ&eacute;e
lorsque vous cr&eacute;ez les guides, ces derniers sont accroch&eacute;s &agrave; la grille.
Pour activer ou d&eacute;sactiver l’accrochage aux guides :
■
Choisissez Affichage &gt; Accrochage &gt; Accrocher aux guides.
R EM A R QU E
L’accrochage aux guides est prioritaire par rapport &agrave; l’accrochage &agrave; la
grille lorsque les guides sont derri&egrave;re les lignes de grille.
Pour d&eacute;placer un guide :
1.
Assurez-vous que les r&egrave;gles sont visibles en s&eacute;lectionnant Affichage &gt;
R&egrave;gles.
2.
A l’aide de l’outil S&eacute;lection, cliquez &agrave; n’importe quel endroit sur la r&egrave;gle
et faites glisser le guide vers l’endroit d&eacute;sir&eacute; sur la sc&egrave;ne.
Pour supprimer un guide :
■
D&eacute;verrouillez les guides, puis utilisez l’outil S&eacute;lection pour faire glisser
le guide vers la r&egrave;gle horizontale ou verticale. Pour plus d’informations
sur le verrouillage et le d&eacute;verrouillage des guides, consultez la proc&eacute;dure
suivante.
Pour verrouiller les guides :
■
Choisissez Affichage &gt; Guides &gt; Verrouiller les guides.
R E MA R QU E
Vous pouvez &eacute;galement utiliser l’option Verrouiller les guides dans la bo&icirc;te
de dialogue Modifier les guides (Affichage &gt; Guides &gt; Modifier les guides).
Pour plus d’informations, consultez la proc&eacute;dure ci-dessous.
Notions de base de Flash
91
Pour d&eacute;finir les pr&eacute;f&eacute;rences des guides :
1.
S&eacute;lectionnez Affichage &gt; Guides &gt; Modifier les guides et effectuez l’une
des op&eacute;rations suivantes :
■
■
■
■
■
■
■
■
2.
Pour Couleur, cliquez sur le triangle de la puce de couleur et
s&eacute;lectionnez une couleur de guide dans la palette. La couleur par
d&eacute;faut des guides est le vert.
Activez ou d&eacute;sactivez l’option Afficher les guides pour afficher ou
masquer les guides.
Activez ou d&eacute;sactivez l’option Accrocher aux guides pour activer ou
d&eacute;sactiver l’accrochage aux guides.
Activez ou d&eacute;sactivez l’option Verrouiller les guides pour verrouiller
ou d&eacute;verrouiller les guides.
Pour Pr&eacute;cision d’ajustement, s&eacute;lectionnez une option dans le menu
d&eacute;roulant.
Pour supprimer tous les guides, cliquez sur Effacer tout.
L’option Effacer tout supprime tous les guides de la s&eacute;quence
actuelle.
Cliquez sur Enreg. par d&eacute;faut pour enregistrer les param&egrave;tres
courants comme param&egrave;tres par d&eacute;faut.
Cliquez sur OK.
Pour effacer les guides :
■
Choisissez Affichage &gt; Guides &gt; Effacer les guides.
Si vous &ecirc;tes en mode de modification de document, tous les guides du
document seront supprim&eacute;s. Si vous &ecirc;tes en mode de modification de
symboles, seuls les guides utilis&eacute;s dans les symboles sont supprim&eacute;s.
Utilisation de la grille
Lorsque la grille est affich&eacute;e dans un document, elle appara&icirc;t sous la forme
de lignes plac&eacute;es derri&egrave;re les illustrations dans chacune des s&eacute;quences. Vous
pouvez accrocher des objets &agrave; la grille, de m&ecirc;me que changer la taille de la
grille ou la couleur de ses lignes.
Pour afficher ou masquer la grille de dessin, effectuez l’une
des op&eacute;rations suivantes :
92
Notions de base de Studio
■
Choisissez Affichage &gt; Grille &gt; Afficher la grille.
■
Appuyer sur Ctrl+’’ (guillemet) (Windows) ou sur Commande+’’
(guillemet) (Macintosh).
Pour activer ou d&eacute;sactiver l’accrochage &agrave; la grille :
■
Choisissez Affichage &gt; Accrochage &gt; Accrocher &agrave; la grille.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de la grille :
1.
Choisissez Affichage &gt; Grille &gt; Modifier la grille.
2.
Pour Couleur, cliquez sur le triangle de la puce de couleur et
s&eacute;lectionnez une couleur de grille dans la palette.
La couleur par d&eacute;faut des lignes de grille est le gris.
3.
Activez ou d&eacute;sactivez l’option Afficher la grille pour afficher ou masquer
la grille.
4.
Activez ou d&eacute;sactivez l’option Accrocher &agrave; la grille pour activer ou
d&eacute;sactiver l’accrochage &agrave; la grille.
5.
Pour l’espacement de la grille, entrez les valeurs dans les champs affich&eacute;s
&agrave; droite des fl&egrave;ches horizontale et verticale.
6.
Pour Pr&eacute;cision d’ajustement, s&eacute;lectionnez une option dans le menu
d&eacute;roulant.
7.
Cliquez sur Enreg. par d&eacute;faut pour enregistrer les param&egrave;tres courants
comme param&egrave;tres par d&eacute;faut.
Utilisation des panneaux et de l’inspecteur des
propri&eacute;t&eacute;s
Flash vous propose de nombreuses mani&egrave;res de personnaliser l’espace de
travail en fonction de vos besoins. Les panneaux et l’inspecteur des
propri&eacute;t&eacute;s vous permettent d’afficher, d’organiser et de modifier les actifs
multim&eacute;dia et autres et leurs attributs. Vous pouvez afficher, masquer et
redimensionner les panneaux. Vous pouvez &eacute;galement grouper les
panneaux et enregistrer des jeux de panneaux personnalis&eacute;s pour modifier
votre espace de travail en fonction de vos pr&eacute;f&eacute;rences. L’inspecteur des
propri&eacute;t&eacute;s se modifiant en fonction de l’outil ou de l’actif avec lequel vous
travaillez, il vous permet d’acc&eacute;der rapidement aux fonctions fr&eacute;quemment
utilis&eacute;es.
Notions de base de Flash
93
A propos de l’inspecteur des propri&eacute;t&eacute;s
L’inspecteur des propri&eacute;t&eacute;s simplifie la cr&eacute;ation des documents en facilitant
l’acc&egrave;s aux attributs le plus fr&eacute;quemment utilis&eacute;s de la s&eacute;lection actuelle,
que ce soit sur la sc&egrave;ne ou dans le sc&eacute;nario. Vous pouvez modifier les
attributs d’un objet ou document dans l’inspecteur des propri&eacute;t&eacute;s sans
avoir &agrave; acc&eacute;der aux menus ou panneaux qui commandent &eacute;galement ces
attributs.
Selon ce qui est s&eacute;lectionn&eacute;, l’inspecteur des propri&eacute;t&eacute;s affiche les
informations et les param&egrave;tres du document, texte, symbole, forme,
bitmap, vid&eacute;o, groupe, image ou outil actuel. Lorsque plusieurs types
d’objets sont s&eacute;lectionn&eacute;s, il affiche le nombre total d’objets s&eacute;lectionn&eacute;s.
L’inspecteur des propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s de l’outil Texte.
Pour afficher l’inspecteur des propri&eacute;t&eacute;s, effectuez l’une des
op&eacute;rations suivantes :
94
Notions de base de Studio
■
Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s &gt; Propri&eacute;t&eacute;s.
■
Appuyez sur Ctrl+F3 (Windows) ou sur Commande+F3 (Macintosh).
A propos du panneau Biblioth&egrave;que
C’est dans le panneau Biblioth&egrave;que que vous stockez et organisez les
symboles cr&eacute;&eacute;s dans Flash, ainsi que les fichiers import&eacute;s tels que les
graphiques bitmap, les fichiers audio et les clips vid&eacute;o. Le panneau
Biblioth&egrave;que vous permet d’organiser les &eacute;l&eacute;ments de la biblioth&egrave;que dans
des dossiers, de savoir combien de fois un objet est utilis&eacute; dans un
document et de trier les &eacute;l&eacute;ments par type. Pour plus d’informations,
consultez &laquo; Utilisation de la biblioth&egrave;que pour la gestion des ressources
multim&eacute;dia &raquo; dans le guide Utilisation de Flash de l’aide.
Le panneau Biblioth&egrave;que affiche un symbole de clip vid&eacute;o.
Pour afficher le panneau Biblioth&egrave;que, effectuez l’une des
op&eacute;rations suivantes :
■
S&eacute;lectionnez Fen&ecirc;tre &gt; Biblioth&egrave;que.
■
Appuyez sur Ctrl+L (Windows) ou sur Commande+L (Macintosh).
Pr&eacute;sentation du panneau Actions
Le panneau Actions vous permet de cr&eacute;er et de modifier du code
ActionScript pour un objet ou une image. La s&eacute;lection d’une occurrence de
bouton, de clip ou d’image rend le panneau Actions actif. Le titre du
panneau Actions devient Actions – Boutons, Actions – Clips ou Actions –
Images en fonction de votre s&eacute;lection.
Notions de base de Flash
95
Pour plus d’informations sur l’utilisation du panneau Actions et sur
l’&eacute;criture de code ActionScript, y compris sur le basculement entre les
modes d’&eacute;dition, voir Utilisation du panneau Actions et de la fen&ecirc;tre Script
dans Formation &agrave; ActionScript 2.0 dans Flash.
Le panneau Actions affiche une action stop() dans une image.
Pour afficher le panneau Actions, effectuez l’une des
op&eacute;rations suivantes :
■
Choisissez Fen&ecirc;tre &gt; Actions.
■
Appuyez sur la touche F9.
Utilisation des panneaux
Les diff&eacute;rents panneaux dans Flash vous aident &agrave; afficher, organiser et
modifier les &eacute;l&eacute;ments dans un document. Les options des diff&eacute;rents
panneaux contr&ocirc;lent les caract&eacute;ristiques de symboles, d’occurrences, de
couleurs, de types, d’images et d’autres &eacute;l&eacute;ments. Vous pouvez
personnaliser l’interface Flash en affichant les panneaux dont vous avez
besoin pour une t&acirc;che sp&eacute;cifique et masquer les autres panneaux.
Les panneaux vous permettent de travailler avec des objets, des couleurs, du
texte, des occurrences, des images, des s&eacute;quences et des documents tout
entiers. Ainsi, vous utiliserez le panneau M&eacute;langeur pour cr&eacute;er des couleurs
et le panneau Aligner pour aligner des objets les uns par rapport aux autres
ou &agrave; la sc&egrave;ne. La liste compl&egrave;te des panneaux disponibles dans Flash
appara&icirc;t dans le menu Fen&ecirc;tre.
96
Notions de base de Studio
La plupart des panneaux contient un menu d&eacute;roulant comprenant des
options suppl&eacute;mentaires. Ce menu contextuel est indiqu&eacute; par une
commande plac&eacute;e &agrave; l’extr&eacute;mit&eacute; droite de la barre de titre du panneau.
(Si aucune commande de menu contextuel n’appara&icirc;t, c’est qu’il n’y a
aucun menu pour ce panneau.)
Par d&eacute;faut, les panneaux sont regroup&eacute;s en bas &agrave; droite de l’espace de travail
Flash.
Pour ouvrir un panneau :
■
S&eacute;lectionnez le panneau souhait&eacute; dans le menu Fen&ecirc;tre.
Pour fermer un panneau, effectuez l’une des op&eacute;rations
suivantes :
■
S&eacute;lectionnez le panneau souhait&eacute; dans le menu Fen&ecirc;tre.
■
Cliquez avec le bouton droit de la souris (Windows) ou tout en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur la barre de titre du
panneau, puis choisissez Fermer un groupe de panneaux dans le menu
contextuel.
Pour utiliser un menu contextuel du panneau :
1.
Pour afficher le menu contextuel, cliquez sur le contr&ocirc;le &agrave; l’extr&eacute;mit&eacute;
droite de la barre de titre du panneau.
2.
Cliquez sur un &eacute;l&eacute;ment du menu.
Cliquer sur un menu contextuel du panneau :
Pour redimensionner un panneau :
■
Faites glisser la bordure du panneau (Windows) ou la case de
redimensionnement situ&eacute;e dans le coin inf&eacute;rieur droit du panneau
(Macintosh).
Notions de base de Flash
97
Pour d&eacute;velopper un panneau ou le r&eacute;duire &agrave; sa barre de titre :
■
Cliquez sur la fl&egrave;che R&eacute;duire/D&eacute;velopper dans la barre de titre. Cliquez
de nouveau sur cette fl&egrave;che pour r&eacute;tablir la taille pr&eacute;c&eacute;dente du
panneau.
Cliquer sur la fl&egrave;che R&eacute;duire/D&eacute;velopper d’un panneau
Pour fermer tous les panneaux :
■
Choisissez Fen&ecirc;tre &gt; Masquer les panneaux.
Disposition des panneaux
Dans Flash, vous pouvez organiser les panneaux dans des groupes. Vous
pouvez r&eacute;organiser l’ordre dans lequel les panneaux sont affich&eacute;s au sein de
groupes de panneaux. Vous pouvez &eacute;galement cr&eacute;er de nouveaux groupes
de panneaux et ancrer des panneaux &agrave; des groupes existants. Si vous
souhaitez qu’un panneau apparaisse seul, s&eacute;par&eacute; des autres groupes de
panneaux, vous pouvez le faire flotter. Ceci est particuli&egrave;rement utile pour
les panneaux qui doivent &ecirc;tre accessibles en permanence, par exemple le
panneau Aide ou le panneau Actions.
Pour d&eacute;placer un panneau :
■
Faites glisser le panneau par sa poign&eacute;e (situ&eacute;e sur le c&ocirc;t&eacute; gauche de la
barre de titre).
Pour ajouter un panneau &agrave; un groupe de panneaux :
■
Faites glisser le panneau par sa poign&eacute;e pour le placer sur un autre
panneau. Une ligne noire s’affiche &agrave; c&ocirc;t&eacute; du panneau cible pour
indiquer l’endroit o&ugrave; le panneau sera plac&eacute;.
Pour afficher de plusieurs panneaux dans une seule fen&ecirc;tre de
panneaux :
98
Notions de base de Studio
1.
Cliquez sur un menu contextuel du panneau
2.
S&eacute;lectionnez le groupe Nom du panneau avec option.
3.
S&eacute;lectionnez un autre panneau auquel ajouter le panneau actuel &agrave; partir
du sous-menu.
Le premier panneau est ajout&eacute; au deuxi&egrave;me panneau sous forme
d’onglet.
Un panneau transform&eacute; en onglet affichant les panneaux Biblioth&egrave;que et
Explorateur d’animations
Pour faire flotter un panneau :
■
Faites glisser le panneau par sa poign&eacute;e pour l’&eacute;loigner des autres
panneaux.
Pour cr&eacute;er un groupe de panneaux :
■
Faites glisser le panneau par sa poign&eacute;e pour l’&eacute;loigner des autres
panneaux. Ajoutez d’autres panneaux au premier panneau pour
constituer un nouveau groupe.
Utilisation de jeux de panneaux
Vous pouvez cr&eacute;er des regroupements de panneaux personnalis&eacute;s et les
enregistrer sous forme de jeux de panneaux personnalis&eacute;s. Vous pouvez
d&eacute;finir l’affichage du panneau comme disposition par d&eacute;faut (affichant les
panneaux M&eacute;langeur, Actions, Inspecteur des propri&eacute;t&eacute;s et Biblioth&egrave;que)
ou pour personnaliser une disposition que vous avez pr&eacute;c&eacute;demment
enregistr&eacute;e.
Pour enregistrer un jeu personnalis&eacute; de panneaux :
1.
S&eacute;lectionnez Fen&ecirc;tre &gt; Enregistrer la disposition des panneaux...
2.
Entrez le nom de la nouvelle disposition et cliquez sur OK.
Notions de base de Flash
99
Pour s&eacute;lectionner une disposition de panneaux :
1.
S&eacute;lectionnez Fen&ecirc;tre &gt; Disposition de l’epace de travail.
2.
Dans le sous-menu, choisissez Disposition par d&eacute;faut pour r&eacute;tablir la
disposition par d&eacute;faut des panneaux ou s&eacute;lectionnez une disposition
personnalis&eacute;e pr&eacute;c&eacute;demment enregistr&eacute;e.
Pour supprimer les dispositions personnalis&eacute;es :
100 Notions de base de Studio
1.
S&eacute;lectionnez Fen&ecirc;tre &gt; Pr&eacute;sentation de l'espace de travail &gt; G&eacute;rer...
2.
Dans la bo&icirc;te de dialogue G&eacute;rer les pr&eacute;sentations de l’espace de travail,
s&eacute;lectionnez le jeu de panneaux que vous souhaitez supprimer.
3.
Cliquez sur Supprimer.
4.
Cliquez sur Oui pour confirmer la suppression.
5.
Cliquez sur OK.
D&eacute;finition des pr&eacute;f&eacute;rences de Flash
Flash vous permet de d&eacute;finir des pr&eacute;f&eacute;rences pour les op&eacute;rations g&eacute;n&eacute;rales
de l’application, les op&eacute;rations de manipulation et les op&eacute;rations li&eacute;es au
presse-papiers. Pour plus d’informations sur les pr&eacute;f&eacute;rences de dessin,
consultez &laquo; D&eacute;finition des param&egrave;tres de dessin &raquo;, dans le guide Utilisation
de Flash de l’aide.
L’onglet G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences
Pour d&eacute;finir les pr&eacute;f&eacute;rences :
1.
Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Flash &gt; Pr&eacute;f&eacute;rences
(Macintosh).
2.
Dans la liste d’onglets, choisissez l’un des onglets suivants :
■
G&eacute;n&eacute;ral
■
ActionScript
■
Format automatique
■
Presse-papiers
■
Dessin
■
Texte
■
Avertissements
Notions de base de Flash
101
3.
S&eacute;lectionnez l’une des options suivantes comme d&eacute;crit dans les
proc&eacute;dures qui suivent. Pour plus d’informations sur les pr&eacute;f&eacute;rences de
l’&eacute;diteur ActionScript, consultez &laquo; Utilisation de l’&eacute;diteur
ActionScript &raquo;, dans le guide Formation &agrave; ActionScript 2.0 dans Flash.
Pour param&eacute;trer des Pr&eacute;f&eacute;rences g&eacute;n&eacute;rales, faites votre choix
parmi les options suivantes :
102 Notions de base de Studio
■
Pour les options Au d&eacute;marrage, choisissez une option sp&eacute;cifiant le
document Flash &agrave; ouvrir au lancement de l’application. Choisissez
Afficher la page de d&eacute;marrage pour afficher la page de d&eacute;marrage.
S&eacute;lectionnez Nouveau document pour ouvrir un nouveau document
vierge. Choisissez Derniers documents ouverts pour ouvrir les
documents ouverts la derni&egrave;re fois que vous avez quitt&eacute; Flash.
Choisissez Aucun document pour lancer Flash sans ouvrir de
document.
■
Pour Nombre d’annulations, saisissez une valeur entre 2 et 300 pour
param&eacute;trer le nombre d’actions annuler/r&eacute;tablir. Chaque niveau
d’annulation n&eacute;cessite de la m&eacute;moire et, plus ce nombre est &eacute;lev&eacute;, plus
la quantit&eacute; de m&eacute;moire utilis&eacute;e est importante. Le nombre par d&eacute;faut
est 100. Puis s&eacute;lectionnez Annulation au niveau du document ou au
niveau de l’objet. L’annulation au niveau du document conserve une
liste unique de toutes vos actions pour l’int&eacute;gralit&eacute; du document Flash.
L’annulation au niveau de l’objet conserve des listes distinctes de vos
actions pour chaque objet dans votre document Flash. L’annulation au
niveau de l’objet vous offre une plus grande souplesse car vous pouvez
annuler une action sur l’un des objets sans avoir &agrave; annuler &eacute;galement
des actions sur d’autres objets qui ont pu &ecirc;tre modifi&eacute;s plus r&eacute;cemment
que l’objet cible.
■
Dans Options d’impression (Windows uniquement), choisissez
l’option D&eacute;sactiver PostScript pour d&eacute;sactiver la sortie PostScript lors
de l’impression sur une imprimante PostScript. Cette option est
d&eacute;sactiv&eacute;e par d&eacute;faut. Activez cette option en cas de probl&egrave;mes
d’impression avec une imprimante PostScript mais n’oubliez pas que
cela ralentira l’impression.
■
Pour les Options de test de l’animation, choisissez Ouvrir le test de
l’animation dans les onglets pour demander &agrave; Flash d’ouvrir un nouvel
onglet de document dans la fen&ecirc;tre de l’application lorsque vous
s&eacute;lectionnez Contr&ocirc;le &gt; Tester l’animation. Par d&eacute;faut, le test de
l’animation s’ouvre dans sa propre fen&ecirc;tre.
■
Pour les Options de s&eacute;lection, activez ou d&eacute;sactivez l’option S&eacute;lection &agrave;
l’aide de la touche Maj. pour contr&ocirc;ler la fa&ccedil;on dont Flash traite la
s&eacute;lection de plusieurs &eacute;l&eacute;ments. Lorsque l’option S&eacute;lection &agrave; l’aide de la
touche Maj. est activ&eacute;e, le fait de cliquer sur des &eacute;l&eacute;ments
suppl&eacute;mentaires les ajoute &agrave; la s&eacute;lection en cours. Lorsque l’option
S&eacute;lection &agrave; l’aide de la touche Maj. est d&eacute;sactiv&eacute;e, le fait de cliquer sur
des &eacute;l&eacute;ments suppl&eacute;mentaires d&eacute;s&eacute;lectionne les autres &eacute;l&eacute;ments, sauf si
vous maintenez la touche Maj. enfonc&eacute;e.
Activez l’option Afficher les info-bulles pour afficher les info-bulles
lorsque le pointeur passe au-dessus d’une commande. D&eacute;sactivez cette
option si vous ne souhaitez pas afficher les info-bulles.
■
S&eacute;lectionnez Activer au contact pour que les objets soient s&eacute;lectionn&eacute;s
lorsqu’une de leurs parties est incluse dans le rectangle de s&eacute;lection lors
du cliquer-glisser &agrave; l’aide des outils S&eacute;lection ou Lasso. Par d&eacute;faut, les
objets sont uniquement s&eacute;lectionn&eacute;s lorsque le rectangle de s&eacute;lection de
l’outil entoure compl&egrave;tement l’objet.
■
Dans Options de sc&eacute;nario, choisissez S&eacute;lection bas&eacute;e sur plages pour
utiliser la s&eacute;lection bas&eacute;e sur plages dans le sc&eacute;nario, plut&ocirc;t que la
s&eacute;lection bas&eacute;e sur images par d&eacute;faut. Pour plus d’informations sur la
s&eacute;lection bas&eacute;e sur plages et bas&eacute;e sur images, consultez Utilisation
d’images dans le sc&eacute;nario, page 76.
Activez l’option Ancre nomm&eacute;e sur S&eacute;quence pour que Flash
transforme la premi&egrave;re image de chaque s&eacute;quence d’un document en
ancre nomm&eacute;e. Les ancres nomm&eacute;es vous permettent d’utiliser les
boutons Suivant et Pr&eacute;c&eacute;dent des navigateurs pour passer d’une
s&eacute;quence &agrave; l’autre dans une application Flash. Pour plus
d’informations, consultez la section Utilisation du sc&eacute;nario, page 71.
■
Pour la Couleur de surbrillance, choisissez une couleur dans le
panneau, ou choisissez Utiliser la couleur du calque pour utiliser la
couleur de contour du calque s&eacute;lectionn&eacute;.
■
Pour Param&egrave;tres du projet, choisissez Fermer les fichiers ouverts lors de
la fermeture du projet pour que tous les fichiers d’un projet se ferment
lorsque vous fermez le projet.
S&eacute;lectionnez Enregistrer les fichiers du projet lors du test ou de la
publication du projet pour que chaque fichier d’un projet soit
enregistr&eacute; &agrave; chaque fois qu’un projet est test&eacute; ou publi&eacute;.
Pour plus d’informations, consultez &laquo; Cr&eacute;ation et gestion de projets
(Flash Professionnel uniquement) &raquo;, dans le guide Utilisation de Flash
de l’aide.
Notions de base de Flash 103
Pour d&eacute;finir les pr&eacute;f&eacute;rences ActionScript :
■
Voir &laquo; A propos des pr&eacute;f&eacute;rences ActionScript &raquo; dans Formation &agrave;
ActionScript 2.0 dans Flash.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de Format automatique pour
ActionScript :
■
Faites votre choix parmi les options propos&eacute;es. Pour visualiser l’effet de
chaque s&eacute;lection, examinez le panneau Aper&ccedil;u.
Pour d&eacute;finir les pr&eacute;f&eacute;rences du Presse-papiers, faites votre
choix parmi les options suivantes :
104 Notions de base de Studio
■
Pour Bitmaps (Windows uniquement), activez des options pour
Codage des couleurs et la R&eacute;solution de mani&egrave;re &agrave; sp&eacute;cifier ces
param&egrave;tres pour les bitmaps copi&eacute;s dans le presse-papiers. S&eacute;lectionnez
Lisser pour appliquer l’option d’anticr&eacute;nelage. Entrez une valeur pour
Limite de taille de mani&egrave;re &agrave; sp&eacute;cifier la quantit&eacute; de m&eacute;moire vive
utilis&eacute;e lorsqu’un bitmap est plac&eacute; dans le presse-papiers. Augmentez
cette valeur lorsque vous travaillez avec des bitmaps volumineux ou de
r&eacute;solution &eacute;lev&eacute;e. Si votre ordinateur dispose d’une quantit&eacute; limit&eacute;e de
m&eacute;moire, s&eacute;lectionnez Aucun.
■
Dans D&eacute;grad&eacute; (Windows uniquement), choisissez une option de
mani&egrave;re &agrave; sp&eacute;cifier la qualit&eacute; des remplissages d&eacute;grad&eacute;s plac&eacute;s dans le
m&eacute;tafichier Windows. Le choix d’une qualit&eacute; plus &eacute;lev&eacute;e augmente le
temps n&eacute;cessaire &agrave; la copie d’une illustration. Utilisez ce param&egrave;tre
pour sp&eacute;cifier la qualit&eacute; des d&eacute;grad&eacute;s lorsque des &eacute;l&eacute;ments sont coll&eacute;s &agrave;
l’ext&eacute;rieur de Flash. Lorsque vous collez des &eacute;l&eacute;ments dans Flash, la
qualit&eacute; des d&eacute;grad&eacute;s des donn&eacute;es copi&eacute;es est conserv&eacute;e, quelle que soit
la valeur du param&egrave;tre D&eacute;grad&eacute;s dans le presse-papiers.
■
Pour Param&egrave;tres PICT (Macintosh uniquement), s&eacute;lectionnez le type
Objets pour conserver les donn&eacute;es copi&eacute;es dans le presse-papiers en tant
qu’illustrations vectorielles ou s&eacute;lectionnez un des formats de bitmap
pour convertir l’illustration copi&eacute;e en bitmap. Entrez une valeur de
r&eacute;solution. S&eacute;lectionnez Inclure PostScript pour inclure les donn&eacute;es
PostScript. Pour D&eacute;grad&eacute;s, choisissez une option de mani&egrave;re &agrave; sp&eacute;cifier
la qualit&eacute; des d&eacute;grad&eacute;s dans le fichier PICT. Le choix d’une qualit&eacute; plus
&eacute;lev&eacute;e augmente le temps n&eacute;cessaire &agrave; la copie d’une illustration.
Utilisez ce param&egrave;tre pour sp&eacute;cifier la qualit&eacute; des d&eacute;grad&eacute;s lorsque des
&eacute;l&eacute;ments sont coll&eacute;s &agrave; l’ext&eacute;rieur de Flash. Lorsque vous collez des
&eacute;l&eacute;ments dans Flash, la qualit&eacute; des d&eacute;grad&eacute;s des donn&eacute;es copi&eacute;es est
conserv&eacute;e, quelle que soit la valeur du param&egrave;tre D&eacute;grad&eacute;s.
■
Pour Texte FreeHand, activez l’option Conserver le texte en blocs pour
que le texte reste modifiable dans un fichier FreeHand coll&eacute;.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de Dessin :
■
Pour les options d’Outil Plume, consultez &laquo; D&eacute;finition des pr&eacute;f&eacute;rences
de l’outil Plume &raquo; dans le guide Utilisation de Flash de l’aide.
■
Pour Param&egrave;tres de dessin, consultez &laquo; D&eacute;finition des param&egrave;tres de
dessin &raquo;, dans le guide Utilisation de Flash de l’aide.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de texte, s&eacute;lectionnez une des
options suivantes :
■
Pour Mappage des polices par d&eacute;faut, s&eacute;lectionnez la police qui sera
utilis&eacute;e pour remplacer les polices absentes des documents ouverts dans
Flash. Pour plus d’informations, consultez &laquo; Remplacement de polices
absentes &raquo; dans le guide Utilisation de Flash de l’aide.
■
Pour les options Texte vertical, activez l’option Orientation du texte par
d&eacute;faut pour que le texte s’affiche verticalement par d&eacute;faut, ce qui est
pratique pour certaines polices de caract&egrave;res asiatiques. Cette option est
d&eacute;sactiv&eacute;e par d&eacute;faut.
Activez l’option Texte de droite &agrave; gauche pour inverser la direction
d’affichage par d&eacute;faut du texte. Cette option est d&eacute;sactiv&eacute;e par d&eacute;faut.
Activez l’option Pas de cr&eacute;nage pour d&eacute;sactiver le cr&eacute;nage du texte
vertical. Bien qu’elle soit d&eacute;sactiv&eacute;e par d&eacute;faut, cette option permet
d’am&eacute;liorer l’espacement de certaines polices utilisant des tables de
cr&eacute;nage.
■
Dans Param&egrave;tres des langues d’entr&eacute;e, s&eacute;lectionnez la langue
appropri&eacute;e.
Pour d&eacute;finir les pr&eacute;f&eacute;rences d’avertissements, s&eacute;lectionnez
une des options suivantes :
■
Activez l’option Indiquer la compatibilit&eacute; au format Macromedia Flash
8 lors de l’enregistrement pour que Flash vous avertisse lorsque vous
enregistrez en tant que fichier Flash MX 2004 des documents dont le
contenu est sp&eacute;cifique au Flash Basic 8 ou &agrave; l’outil de programmation
Flash Professionnel 8. Cette option est activ&eacute;e par d&eacute;faut.
■
Activez l’option Indiquer l’absence de polices pour que Flash vous
avertisse lorsque vous ouvrez un document utilisant des polices n’ayant
pas &eacute;t&eacute; install&eacute;es sur votre ordinateur. Cette option est activ&eacute;e par
d&eacute;faut.
Notions de base de Flash 105
106 Notions de base de Studio
■
Choisissez Avertir lors des changements d’URL au d&eacute;marrage et lors de
la modification pour que Flash vous avertisse lorsque l’URL d’un
document a chang&eacute; depuis la derni&egrave;re fois que vous l’avez ouvert ou
modifi&eacute;.
■
Activez l’option Avertir lors de la lecture de contenu Generator pour
que Flash affiche une croix rouge (X) sur tous les objets Generator afin
de vous rappeler que ces objets ne sont pas support&eacute;s par FlashMX 8.
■
Activez l’option Avertir lors de l’insertion d’images et d’importation de
contenu pour que Flash vous avertisse lorsqu’il ins&egrave;re des images dans
votre document afin de tenir compte des fichiers audio ou vid&eacute;o que
vous importez.
■
Choisissez Avertir des conflits de codage pendant l’exportation de
fichiers .as pour que Flash vous pr&eacute;vienne lorsque la s&eacute;lection de
l’encodage par d&eacute;faut peut entra&icirc;ner une perte de donn&eacute;es ou une
corruption de caract&egrave;re. (Par exemple, si vous cr&eacute;ez un fichier avec des
caract&egrave;res anglais, japonais et cor&eacute;ens et que vous s&eacute;lectionnez Codage
par d&eacute;faut sur un syst&egrave;me en anglais, les caract&egrave;res japonais et cor&eacute;ens
seront corrompus.)
■
Choisissez Avertir lors de la conversion des objets graphiques d’effets
pour que Flash vous avertisse lorsque vous tentez de modifier un
symbole auquel des effets de sc&eacute;nario sont appliqu&eacute;s.
■
Choisissez Avertir lors de l’exportation vers Flash Player 6 r65 pour que
Flash vous avertisse lorsque vous exportez un document vers la version
pr&eacute;c&eacute;dente de Flash Player.
■
Choisissez Avertir lorsque les dossiers racine des sites se chevauchent
pour que Flash vous avertisse lorsque vous cr&eacute;ez un site dans lequel le
dossier racine local chevauche celui d’un autre site.
■
Choisissez Avertir lors de la conversion d’un comportement en symbole
pour que Flash vous avertisse lorsque vous convertissez un symbole
auquel un comportement est associ&eacute; &agrave; un autre type de symbole ; cela
se produit lorsque vous convertissez un clip en bouton, par exemple.
■
Choisissez Avertir lors de la conversion en symboles pour que Flash
vous avertisse lorsque vous convertissez un symbole en un symbole
d’un autre type.
■
S&eacute;lectionnez Avertir lors de la conversion automatique d’un objet de
dessin en groupe pour que Flash vous pr&eacute;vienne lorsqu’il convertit un
objet graphique dessin&eacute; en groupe gr&acirc;ce au mode Dessin d’objet.
■
Choisissez Afficher les avertissements d’incompatibilit&eacute; des commandes
de fonction pour que Flash affiche des avertissements sur les contr&ocirc;les
de fonctions non prises en charge par la version de Flash Player vis&eacute;e
par le fichier FLA ouvert dans ses Param&egrave;tres de publication.
Personnalisation des raccourcis clavier
Vous pouvez choisir des raccourcis clavier dans Flash pour les faire
correspondre aux raccourcis que vous avez l’habitude d’utiliser dans
d’autres applications ou afin de rationaliser votre flux de travail. Par d&eacute;faut,
Flash utilise les raccourcis clavier int&eacute;gr&eacute;s con&ccedil;us pour l’application. Vous
pouvez &eacute;galement s&eacute;lectionner un jeu de raccourcis clavier int&eacute;gr&eacute;s utilis&eacute;s
dans l’une des applications graphiques tr&egrave;s r&eacute;pandues telles que
Macromedia Fireworks, Adobe Illustrator ou encore Adobe Photoshop.
Pour cr&eacute;er un jeu de raccourcis clavier personnalis&eacute;, vous pouvez dupliquer
un jeu existant, puis y ajouter ou en supprimer des raccourcis. Vous pouvez
aussi supprimer des jeux de raccourcis personnalis&eacute;s.
Pour afficher ou imprimer le jeu de raccourcis clavier
actuellement utilis&eacute; :
1.
Choisissez Edition &gt; Raccourcis clavier.
2.
Dans la bo&icirc;te de dialogue Raccourcis clavier, choisissez le jeu de
raccourcis que vous souhaitez afficher dans le menu d&eacute;roulant Jeu
actuel.
3.
Cliquez sur le bouton Exporter le jeu au format HTML.
Le bouton Exporter le jeu au format HTML.
4.
Dans la bo&icirc;te de dialogue Enregistrer sous qui s’affiche, choisissez un
nom et un emplacement pour le fichier HTML export&eacute;. Le nom de
fichier par d&eacute;faut est le nom du jeu de raccourcis s&eacute;lectionn&eacute;.
5.
Cliquez sur Enregistrer.
Notions de base de Flash 107
6.
Recherchez le fichier export&eacute; dans le dossier que vous avez s&eacute;lectionn&eacute; et
ouvrez-le dans un navigateur Web.
7.
Pour imprimer le fichier, utilisez la commande Imprimer du navigateur.
Pour s&eacute;lectionner un jeu de raccourcis clavier :
1.
Choisissez Edition &gt; Raccourcis clavier (Windows) ou Flash &gt;
Raccourcis claviers (Macintosh).
2.
Dans la bo&icirc;te de dialogue Raccourcis clavier, choisissez un jeu de
raccourcis dans le menu d&eacute;roulant Jeu actuel.
Pour cr&eacute;er un jeu de raccourcis clavier :
1.
S&eacute;lectionnez un jeu de raccourcis clavier, comme d&eacute;crit dans la
proc&eacute;dure pr&eacute;c&eacute;dente.
2.
Cliquez sur le bouton Dupliquer le jeu.
3.
Entrez le nom du nouveau jeu de raccourcis et cliquez sur OK.
Pour renommer un jeu de raccourcis clavier personnalis&eacute; :
1.
Dans la bo&icirc;te de dialogue Raccourcis clavier, choisissez un jeu de
raccourcis dans le menu d&eacute;roulant Jeu actuel.
2.
Cliquez sur le bouton Renommer le jeu.
3.
Dans la bo&icirc;te de dialogue Renommer le jeu, entrez un nouveau nom et
cliquez sur OK.
Pour ajouter ou supprimer un raccourci clavier :
1.
Choisissez Edition &gt; Raccourcis clavier (Windows) ou Flash &gt;
Raccourcis clavier (Macintosh) et s&eacute;lectionnez le jeu que vous voulez
modifier.
2.
Dans le menu d&eacute;roulant Commandes, s&eacute;lectionnez Commandes du
menu Dessin, Outils Dessin, Commandes du menu Tester l’animation
ou Commandes d’accessibilit&eacute; de l’espace de travail pour afficher les
raccourcis de la cat&eacute;gorie s&eacute;lectionn&eacute;e.
3.
Dans la liste des commandes, s&eacute;lectionnez la commande pour laquelle
vous souhaitez ajouter ou supprimer un raccourci.
Une explication de la commande s&eacute;lectionn&eacute;e appara&icirc;t dans la zone
Description de cette bo&icirc;te de dialogue.
108 Notions de base de Studio
4.
Effectuez l’une des op&eacute;rations suivantes :
■
■
5.
Pour ajouter un raccourci, cliquez sur le bouton Ajouter (+).
Pour supprimer un raccourci, cliquez sur le bouton Supprimer (-) et
passez &agrave; l’&eacute;tape 6.
Si vous ajoutez un raccourci, entrez la combinaison de touches du
nouveau raccourci sous Appuyer sur la touche.
R EM A R QU E
Il vous suffit d’appuyer sur les touches du clavier pour entrer la
combinaison de touches. Vous n’avez pas besoin d’entrer le nom des
touches, tel que Ctrl, Option, etc.
6.
Cliquez sur Remplacer.
7.
R&eacute;p&eacute;tez cette proc&eacute;dure pour ajouter ou supprimer des raccourcis
suppl&eacute;mentaires.
8.
Cliquez sur OK.
Pour supprimer un jeu de raccourcis clavier :
1.
Choisissez Edition &gt; Raccourcis clavier (Windows) ou Flash &gt;
Raccourcis clavier (Macintosh). Dans la bo&icirc;te de dialogue Raccourcis
clavier, cliquez sur le bouton Supprimer le jeu.
2.
Dans la bo&icirc;te de dialogue Supprimer le jeu, choisissez un jeu de
raccourcis et cliquez sur Supprimer.
R E MA R Q UE
Vous ne pouvez pas supprimer les jeux de raccourcis clavier int&eacute;gr&eacute;s &agrave;
Flash.
Utilisation des menus contextuels
Les menus contextuels contiennent des commandes sp&eacute;cifiques &agrave; la
s&eacute;lection en cours. Par exemple, lorsque vous s&eacute;lectionnez une image dans
la fen&ecirc;tre Sc&eacute;nario, le menu contextuel contient les commandes permettant
de cr&eacute;er, supprimer ou modifier des images et des images-cl&eacute;s. Des menus
contextuels existent pour de nombreux &eacute;l&eacute;ments et contr&ocirc;les de nombreux
emplacements, tels que la sc&egrave;ne, le sc&eacute;nario, le panneau Biblioth&egrave;que ou le
panneau Actions.
Notions de base de Flash 109
Pour ouvrir un menu contextuel :
■
Cliquez avec le bouton droit de la souris (Windows) ou tout en
appuyant sur la touche Ctrl enfonc&eacute;e (Macintosh) sur un &eacute;l&eacute;ment.
Accessibilit&eacute; dans l’environnement auteur Flash
Les fonctions d’accessibilit&eacute; dans l’environnement auteur Flash offrent des
raccourcis clavier destin&eacute;s &agrave; la navigation et &agrave; l’utilisation des contr&ocirc;les
d’interface comme les panneaux, l’inspecteur des propri&eacute;t&eacute;s, les bo&icirc;tes de
dialogue, la sc&egrave;ne et les objets de la sc&egrave;ne. Vous pouvez ainsi vous servir de
ces &eacute;l&eacute;ments de l’interface sans avoir &agrave; utiliser votre souris.
R E MA R Q UE
Certains raccourcis clavier ne sont disponibles que sous Windows. Pour
plus d’informations, consultez A propos de l’accessibilit&eacute; Flash sous Mac,
page 110.
Vous pouvez personnaliser les raccourcis clavier d’accessibilit&eacute; de
l’environnement auteur dans la section Commandes d’accessibilit&eacute; de
l’espace de travail de la bo&icirc;te de dialogue Raccourcis clavier. Pour plus
d’informations, consultez la section Personnalisation des raccourcis clavier,
page 107.
Certaines fonctions d’accessibilit&eacute; de l’environnement auteur ne sont pas
disponibles sous Mac. Pour plus d’informations, consultez la section
suivante :
A propos de l’accessibilit&eacute; Flash sous Mac
Les limites d’accessibilit&eacute; de l’environnement auteur Flash sous Mac sont
les suivantes :
110
Notions de base de Studio
■
Le raccourci clavier du focus du panneau (Commande+Option+Tab)
n’est pas pris en charge pour l’inspecteur des propri&eacute;t&eacute;s.
■
Le raccourci clavier du focus du contr&ocirc;le du panneau (Tab) est pris en
charge uniquement pour le sc&eacute;nario mais pas pour les autres panneaux,
ni pour l’inspecteur des propri&eacute;t&eacute;s.
S&eacute;lection de panneaux ou de l’inspecteur des propri&eacute;t&eacute;s &agrave;
l’aide de raccourcis clavier
Vous pouvez s&eacute;lectionner un panneau ou l’inspecteur des propri&eacute;t&eacute;s (action
&eacute;galement appel&eacute;e application d’un focus au panneau ou &agrave; l’inspecteur des
propri&eacute;t&eacute;s) en utilisant le raccourci clavier Ctrl+Alt+Tab (Windows) ou
Commande+Option+Tab (Macintosh).
Vous pouvez appliquer un focus &agrave; un panneau ou &agrave; l’inspecteur des
propri&eacute;t&eacute;s uniquement lorsqu’ils sont visibles dans la fen&ecirc;tre de
l’application Flash. Le panneau peut &ecirc;tre d&eacute;velopp&eacute; ou r&eacute;duit.
Lorsque vous utilisez le raccourci clavier pour s&eacute;lectionner des panneaux,
un focus est appliqu&eacute; d’apr&egrave;s les crit&egrave;res suivants :
■
Le focus est appliqu&eacute; en premier aux panneaux ancr&eacute;s.
■
Si le sc&eacute;nario est affich&eacute; et ancr&eacute;, un focus lui est appliqu&eacute; la premi&egrave;re
fois que vous utilisez le raccourci Ctrl+Alt+Tab (Windows) ou
Commande+Option+Tab (Macintosh).
■
S’il n’est ni affich&eacute; ni ancr&eacute;, ou si vous utilisez le raccourci &agrave; nouveau, le
focus se d&eacute;place sur le panneau ancr&eacute; le plus &agrave; droite et le plus haut.
L’utilisation &agrave; r&eacute;p&eacute;tition du raccourci clavier d&eacute;place le focus vers les
autres panneaux ancr&eacute;s dans l’espace de travail, de droite &agrave; gauche et de
haut en bas.
■
Si vous d&eacute;placez le focus vers tous les panneaux ancr&eacute;s, ou si aucun
panneau ancr&eacute; n’est affich&eacute;, le focus se d&eacute;place vers le panneau flottant
le plus &agrave; droite et le plus haut. L’utilisation &agrave; r&eacute;p&eacute;tition du raccourci
clavier d&eacute;place le focus vers les autres panneaux flottants dans l’espace
de travail, de droite &agrave; gauche et de haut en bas.
Utilisation de raccourcis clavier pour s&eacute;lectionner,
d&eacute;s&eacute;lectionner, d&eacute;velopper ou r&eacute;duire des panneaux ou
l’inspecteur des propri&eacute;t&eacute;s :
■
Pour d&eacute;placer le focus vers les panneaux affich&eacute;s dans l’espace de travail,
utilisez le raccourci Ctrl+Alt+Tab (Windows) ou
Commande+Option+Tab (Macintosh). Une ligne pointill&eacute;e entoure le
titre du panneau ayant actuellement le focus.
■
Pour d&eacute;placer le focus vers le panneau s&eacute;lectionn&eacute; pr&eacute;c&eacute;demment,
utilisez le raccourci Ctrl+Maj+Alt+Tab (Windows) ou
Commande+Maj+Option+Tab (Macintosh).
■
Pour d&eacute;s&eacute;lectionner un panneau, appuyez sur Echap, ou d&eacute;placez,
ancrez ou d&eacute;sancrez le panneau.
Notions de base de Flash
111
■
Pour d&eacute;placer le focus vers le panneau sup&eacute;rieur ou inf&eacute;rieur au
panneau actuel dans un groupe, utilisez la fl&egrave;che vers le haut ou la
fl&egrave;che vers le bas.
Utilisation des raccourcis clavier pour d&eacute;velopper ou r&eacute;duire
les panneaux ou l’inspecteur des propri&eacute;t&eacute;s :
1.
Appuyez sur Ctrl+Alt+Tab (Windows) ou Commande+Option+Tab
(Macintosh) jusqu’&agrave; ce que le panneau que vous souhaitez d&eacute;velopper
ou r&eacute;duire ait le focus. Une ligne pointill&eacute;e entoure le titre du panneau
ayant actuellement le focus.
2.
Appuyez sur la barre d’espace pour d&eacute;velopper ou r&eacute;duire le panneau
s&eacute;lectionn&eacute;.
Pour masquer tous les panneaux et l’inspecteur des
propri&eacute;t&eacute;s :
■
Appuyez sur la touche F4. Appuyez sur F4 &agrave; nouveau pour afficher tous
les panneaux et l’inspecteur des propri&eacute;t&eacute;s.
S&eacute;lection de contr&ocirc;les dans un panneau ou dans
l’inspecteur des propri&eacute;t&eacute;s &agrave; l’aide de raccourcis clavier
Lorsque le focus est sur un panneau ou sur l’inspecteur des propri&eacute;t&eacute;s, vous
pouvez utiliser la touche Tab pour le d&eacute;placer vers les contr&ocirc;les du
panneau. Utilisez la barre d’espace pour activer le contr&ocirc;le disposant du
focus actuel (appuyer sur la barre d’espace revient &agrave; cliquer sur un contr&ocirc;le
dans le panneau).
Lorsque vous utilisez un raccourci clavier pour les contr&ocirc;les du panneau,
un focus est appliqu&eacute; &agrave; un contr&ocirc;le. Celui-ci est activ&eacute; d’apr&egrave;s les crit&egrave;res
suivants :
112
Notions de base de Studio
■
Le panneau comportant le focus doit &ecirc;tre d&eacute;velopp&eacute; pour que vous
puissiez s&eacute;lectionner un contr&ocirc;le &agrave; l’aide de la touche Tab. Si le
panneau est r&eacute;duit, la touche Tab n’a aucun effet.
■
Lorsque le panneau comportant le focus actuel est d&eacute;velopp&eacute;, appuyez
une premi&egrave;re fois sur la touche Tab pour d&eacute;placer le focus vers le menu
contextuel du panneau.
■
Utilisez la fl&egrave;che vers la droite et la fl&egrave;che vers la gauche pour d&eacute;placer
le focus entre le menu contextuel et la barre de titre du panneau.
■
Si le focus est sur le menu contextuel, appuyez &agrave; nouveau sur la touche
Tab pour le d&eacute;placer vers les autres contr&ocirc;les du panneau. Appuyez &agrave;
nouveau sur la touche Tab pour ramener le focus vers le menu
contextuel du panneau.
■
Lorsque le menu contextuel re&ccedil;oit le focus, appuyez sur la touche
Entr&eacute;e (Windows uniquement) pour afficher les &eacute;l&eacute;ments du menu
contextuel.
■
Dans des panneaux group&eacute;s, vous pouvez utiliser les fl&egrave;ches vers le haut
et vers le bas pour d&eacute;placer le focus entre les menus contextuels des
panneaux du groupe.
■
D&eacute;placez le focus vers le contr&ocirc;le du panneau uniquement si celui-ci est
actif. Si un contr&ocirc;le est gris&eacute; (inactif ), vous ne pouvez pas lui appliquer
de focus.
Pour d&eacute;placer le focus de la barre de titre d’un panneau &agrave; un
menu contextuel d’un panneau, effectuez les op&eacute;rations
suivantes :
■
Appuyez sur la touche Tab.
■
Appuyez sur la fl&egrave;che vers la droite. Appuyez sur la fl&egrave;che vers la gauche
ou sur Maj+Tab pour ramener le focus vers la barre de titre du
panneau.
■
Si le panneau est dans un groupe, appuyez sur la fl&egrave;che vers le haut
pour d&eacute;placer le focus vers le menu contextuel du panneau
imm&eacute;diatement sup&eacute;rieur &agrave; celui recevant le focus actuel. Appuyez sur
la fl&egrave;che vers le bas pour d&eacute;placer le focus vers le menu contextuel du
panneau imm&eacute;diatement inf&eacute;rieur &agrave; celui recevant le focus actuel.
Pour d&eacute;placer le focus vers les &eacute;l&eacute;ments d’un menu contextuel
de panneau :
1.
Le focus appliqu&eacute; au menu contextuel de panneau, appuyez sur la barre
d’espace pour afficher les &eacute;l&eacute;ments du menu contextuel.
2.
Appuyez sur la fl&egrave;che vers le bas pour faire d&eacute;filer les &eacute;l&eacute;ments du menu
contextuel.
3.
Appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh) pour activer
l’&eacute;l&eacute;ment du menu contextuel s&eacute;lectionn&eacute;.
Notions de base de Flash
113
Pour d&eacute;placer le focus vers les contr&ocirc;les d’un panneau :
1.
Appuyez sur la touche Tab lorsque le focus est appliqu&eacute; au menu
contextuel du panneau. Appuyez de fa&ccedil;on r&eacute;p&eacute;titive sur la touche Tab
afin de d&eacute;placer le focus vers les contr&ocirc;les du panneau.
2.
Appuyez sur Entr&eacute;e (Windows uniquement) pour activer le contr&ocirc;le
s&eacute;lectionn&eacute;.
Parcourir les contr&ocirc;les de la bo&icirc;te de dialogue &agrave; l’aide de
raccourcis clavier (Windows uniquement)
Sous Windows, vous pouvez utiliser les raccourcis clavier pour parcourir les
contr&ocirc;les des bo&icirc;tes de dialogue. Passez d’un contr&ocirc;le &agrave; l’autre, appliquez
des contr&ocirc;les ou annulez et sortez de la bo&icirc;te de dialogue.
Pour parcourir les contr&ocirc;les d’une bo&icirc;te de dialogue &agrave; l’aide
des raccourcis clavier, effectuez les op&eacute;rations suivantes :
114
Notions de base de Studio
■
Appuyez sur la touche Tab pour passer d’un contr&ocirc;le &agrave; l’autre dans la
bo&icirc;te de dialogue.
■
Pour parcourir les contr&ocirc;les d’une section d’une bo&icirc;te de dialogue,
appuyez sur les fl&egrave;ches vers le haut et vers le bas. Par exemple, dans la
bo&icirc;te de dialogue Configuration de la v&eacute;rification orthographique,
appuyez sur les fl&egrave;ches vers le haut et vers le bas pour parcourir les
contr&ocirc;les de la section Options de document.
■
Lorsque le focus est appliqu&eacute; &agrave; un bouton de contr&ocirc;le d’une bo&icirc;te de
dialogue (OK, Annuler ou Appliquer), appuyez sur Entr&eacute;e pour activer
le bouton (cette action revient &agrave; cliquer sur le bouton).
■
Lorsque le focus n’est appliqu&eacute; &agrave; aucun bouton (OK, Annuler ou
Appliquer), appuyez sur Entr&eacute;e pour appliquer les param&egrave;tres actuels et
fermer la bo&icirc;te de dialogue (cette action revient &agrave; cliquer sur OK).
■
Appuyez sur Echap pour fermer la bo&icirc;te de dialogue sans appliquer les
changements (cette action revient &agrave; cliquer sur Annuler).
■
Lorsque le focus est appliqu&eacute; au bouton Aide, appuyez sur Entr&eacute;e ou
sur la barre d’espace pour afficher le contenu de l’aide pour cette bo&icirc;te
de dialogue (cette action revient &agrave; cliquer sur Aide).
S&eacute;lection de la sc&egrave;ne ou d’objets de la sc&egrave;ne &agrave; l’aide de
raccourcis clavier
Vous pouvez s&eacute;lectionner la sc&egrave;ne ou un objet de la sc&egrave;ne &agrave; l’aide des
raccourcis clavier. Utiliser un raccourci clavier pour s&eacute;lectionner la sc&egrave;ne
revient &agrave; cliquer sur la sc&egrave;ne. Tout autre &eacute;l&eacute;ment s&eacute;lectionn&eacute; est
d&eacute;s&eacute;lectionn&eacute; lorsque la sc&egrave;ne est s&eacute;lectionn&eacute;e.
Une fois que la sc&egrave;ne est s&eacute;lectionn&eacute;e, vous pouvez utiliser la touche Tab
pour passer simultan&eacute;ment d’un objet &agrave; l’autre sur tous les calques. Vous
pouvez s&eacute;lectionner des occurrences (symboles graphiques, boutons, clips
vid&eacute;o, bitmaps, vid&eacute;os ou sons), des groupes ou des bo&icirc;tes de texte. Vous ne
pouvez pas s&eacute;lectionner de formes (ex. : des rectangles) &agrave; moins qu’elles
soient des occurrences de symboles. Vous ne pouvez pas s&eacute;lectionner plus
d’un objet &agrave; la fois avec un raccourci clavier. Les objets sont s&eacute;lectionn&eacute;s sur
la sc&egrave;ne &agrave; l’aide des crit&egrave;res suivants :
■
Si un objet est s&eacute;lectionn&eacute;, le raccourci Maj+Tab permet de
s&eacute;lectionner l’objet pr&eacute;c&eacute;dent.
■
Appuyez sur Tab une premi&egrave;re fois pour s&eacute;lectionner le premier objet
cr&eacute;&eacute; sur l’image active dans le calque actif. Lorsque le dernier objet du
calque principal est s&eacute;lectionn&eacute;, appuyez sur Tab pour passer au calque
inf&eacute;rieur et y s&eacute;lectionner le premier objet, et ainsi de suite.
■
Lorsque le dernier objet du dernier calque est s&eacute;lectionn&eacute;, appuyez sur
Tab pour passer &agrave; l’image suivante et s&eacute;lectionner le premier objet sur le
calque principal.
■
Les objets masqu&eacute;s ou verrouill&eacute;s ne peuvent pas &ecirc;tre s&eacute;lectionn&eacute;s avec
la touche Tab.
R EM A R QU E
Si vous entrez du texte dans une zone de texte, vous ne pouvez pas
s&eacute;lectionner d’objet &agrave; l’aide du focus clavier. Vous devez d’abord placer le
focus sur la sc&egrave;ne puis s&eacute;lectionner un objet.
Pour s&eacute;lectionner la sc&egrave;ne :
■
Appuyez sur Ctrl+Alt+Origine (Windows) ou
Commande+Option+Origine (Macintosh).
Pour s&eacute;lectionner un objet de la sc&egrave;ne :
■
S&eacute;lectionnez la sc&egrave;ne, puis appuyez sur la touche Tab.
Notions de base de Flash
115
Navigation dans les contr&ocirc;les d’arborescence &agrave; l’aide des
raccourcis clavier
Vous pouvez parcourir les arborescences, affichage hi&eacute;rarchique des
structures de fichiers dans certains panneaux Flash, &agrave; l’aide de raccourcis
clavier. Vous pouvez d&eacute;velopper et r&eacute;duire les dossiers du contr&ocirc;le
d’arborescence et passer du dossier parent au dossier enfant et inversement.
Pour parcourir les contr&ocirc;les d’arborescence &agrave; l’aide de
raccourcis clavier, effectuez les op&eacute;rations suivantes :
■
Pour d&eacute;velopper un dossier r&eacute;duit, s&eacute;lectionnez-le et appuyez sur la
fl&egrave;che vers la droite.
■
Pour r&eacute;duire un dossier d&eacute;velopp&eacute;, s&eacute;lectionnez-le et appuyez sur la
fl&egrave;che vers la gauche.
■
Pour aller au dossier parent d’un dossier d&eacute;velopp&eacute;, appuyez sur la
fl&egrave;che vers la gauche.
■
Pour aller au dossier enfant d’un dossier d&eacute;velopp&eacute;, appuyez sur la
fl&egrave;che vers la droite.
Utilisation des &eacute;l&eacute;ments de la biblioth&egrave;que &agrave; l’aide des
raccourcis clavier
Vous pouvez couper, copier et coller des &eacute;l&eacute;ments de la biblioth&egrave;que &agrave; l’aide
de raccourcis clavier. Vous pouvez couper ou copier un &eacute;l&eacute;ment de la
biblioth&egrave;que et le coller dans la sc&egrave;ne ou dans une autre biblioth&egrave;que. Vous
pouvez &eacute;galement coller un dossier dans une autre biblioth&egrave;que. Si vous
collez un dossier, chaque &eacute;l&eacute;ment du dossier est inclus.
Utilisez des raccourcis clavier pour s&eacute;lectionner un &eacute;l&eacute;ment de la
biblioth&egrave;que. Pour plus d’informations, consultez la section Navigation
dans les contr&ocirc;les d’arborescence &agrave; l’aide des raccourcis clavier, page 116.
Les &eacute;l&eacute;ments sont coup&eacute;s, copi&eacute;s et coll&eacute;s d’apr&egrave;s les crit&egrave;res suivants :
116
Notions de base de Studio
■
Vous pouvez couper ou copier un ou plusieurs &eacute;l&eacute;ments.
■
Vous ne pouvez pas coller de forme dans la biblioth&egrave;que &agrave; partir de la
sc&egrave;ne.
■
Vous ne pouvez pas coller d’&eacute;l&eacute;ment de la biblioth&egrave;que dans une
biblioth&egrave;que commune car ces derni&egrave;res ne peuvent &ecirc;tre modifi&eacute;es.
Cependant, vous pouvez cr&eacute;er une nouvelle biblioth&egrave;que commune.
Pour plus d’informations, consultez &laquo; Utilisation des biblioth&egrave;ques
communes &raquo; dans le guide Utilisation de Flash de l’aide.
■
Lorsque vous collez un &eacute;l&eacute;ment d’une biblioth&egrave;que dans la sc&egrave;ne, cet
&eacute;l&eacute;ment est centr&eacute;.
■
Pour coller un &eacute;l&eacute;ment d’une biblioth&egrave;que dans un dossier de la
biblioth&egrave;que de destination, cliquez sur le dossier avant de le coller.
■
Vous pouvez coller un &eacute;l&eacute;ment d’une biblioth&egrave;que vers un
emplacement diff&eacute;rent de la m&ecirc;me biblioth&egrave;que d’origine.
■
Si vous essayez de coller un &eacute;l&eacute;ment d’une biblioth&egrave;que dans un
emplacement contenant un autre &eacute;l&eacute;ment du m&ecirc;me nom, vous pouvez
choisir de le remplacer ou non.
Pour couper, copier et coller des &eacute;l&eacute;ments d’une biblioth&egrave;que &agrave;
l’aide de raccourcis clavier :
■
Pour copier ou coller un &eacute;l&eacute;ment s&eacute;lectionn&eacute;, appuyez sur les
touches Ctrl+X (Windows) ou Commande+X (Macintosh) pour le
couper, ou Ctrl+C (Windows) ou Commande+C (Macintosh) pour le
copier.
■
Pour coller un &eacute;l&eacute;ment coup&eacute; ou copi&eacute;, cliquez sur la sc&egrave;ne ou dans une
autre biblioth&egrave;que pour d&eacute;finir le point d’insertion. Appuyez ensuite
sur Ctrl+V (Windows) ou Commande+V (Macintosh) pour le coller au
centre de la sc&egrave;ne. Appuyez sur Ctrl+Maj+C (Windows) ou
Commande+Maj+C (Macintosh) pour le coller &agrave; son emplacement
original.
Notions de base de Fireworks
Pour tirer le meilleur parti de votre logiciel Fireworks, vous devez
comprendre les &eacute;l&eacute;ments de base de l’espace de travail Fireworks. Cette
section vous donne un aper&ccedil;u des fichiers Fireworks et vous pr&eacute;sente les
&eacute;l&eacute;ments de l’espace de travail les plus importants et les plus couramment
utilis&eacute;s.
R EM A R QU E
Lorsque vous installez Fireworks 8, vous obtenez une version du produit
multilingue. Pour obtenir la liste des langues incluses, ainsi que des
instructions sur le changement de langue, consultez
www.macromedia.com/go/b6a0f908.
Cette section contient les rubriques suivantes :
■
A propos des fichiers Fireworks, page 118
■
Familiarisation avec l’espace de travail Fireworks, page 118
Notions de base de Fireworks
117
A propos des fichiers Fireworks
Fireworks vous permet de travailler avec divers types de fichiers. Par
exemple, vous pouvez commencer avec un fichier PNG, puis l’enregistrer
au format JPEG ou GIF. Vous pouvez cr&eacute;er des fichiers HTML contenant
du code JavaScript. Vous pouvez &eacute;galement exporter ou enregistrer une
image sous un format de fichier sp&eacute;cifique &agrave; une autre application, telle que
Photoshop ou Macromedia Flash, si vous voulez continuer &agrave; travailler dans
cette application.
Voici les types de fichiers les plus couramment utilis&eacute;s dans Fireworks :
(Portable Network Graphic) est le format de fichier natif de
Fireworks. Le format PNG est un format de fichier graphique Web
polyvalent pouvant prendre en charge les couleurs 32 bits, inclure une
transparence ou une couche alpha et rendre des images progressives.
PNG
(Graphics Interchange Format) est un format graphique Web tr&egrave;s
utilis&eacute; pour les dessins anim&eacute;s, les logos, les graphiques comportant
des zones transparentes et les animations. Il contient un maximum de
256 couleurs.
GIF
a &eacute;t&eacute; d&eacute;velopp&eacute; par le Joint Photographic Experts Group pour les
besoins sp&eacute;cifiques des images photographiques ou comportant un nombre
tr&egrave;s &eacute;lev&eacute; de couleurs. Le format JPEG est id&eacute;al pour des photographies
num&eacute;riques ou num&eacute;ris&eacute;es, des images comportant des textures ou des
d&eacute;grad&eacute;s, ou toute autre image n&eacute;cessitant plus de 256 couleurs.
JPEG
Pour plus d’informations sur les autres types de fichiers dans Fireworks,
voir &laquo; S&eacute;lection d’un type de fichier &raquo; dans le manuel Utilisation de
Fireworks.
Familiarisation avec l’espace de travail
Fireworks
Lorsque vous ouvrez pour la premi&egrave;re fois un document dans Fireworks,
l’environnement de travail est activ&eacute;, y compris le panneau Outils,
l’Inspecteur des propri&eacute;t&eacute;s, les menus et d’autres panneaux.
118
Notions de base de Studio
Le panneau Outils, &agrave; gauche de l’&eacute;cran, contient des cat&eacute;gories &eacute;tiquet&eacute;es,
incluant les groupes d’outils bitmap, vectoriels et Web. L’Inspecteur des
propri&eacute;t&eacute;s s’affiche au bas du document en pr&eacute;sentant initialement les
propri&eacute;t&eacute;s du document ; les propri&eacute;t&eacute;s changent lorsque vous s&eacute;lectionnez
un nouvel outil ou un objet dans le document. Les panneaux sont
initialement ancr&eacute;s en groupes le long du bord droit de l’&eacute;cran.
Notions de base de Fireworks
119
Utilisation du panneau Outils
Le panneau Outils se divise en six cat&eacute;gories : S&eacute;lection, Bitmap, Vecteur,
Web, Couleurs et Affichage.
A propos des graphiques vectoriels et bitmap
Les ordinateurs affichent des graphiques au format vectoriel ou bitmap.
Comprendre la diff&eacute;rence entre les deux formats vous aidera &agrave; comprendre
Fireworks, qui contient des outils vectoriels et bitmap et qui est capable
d’ouvrir ou d’importer les deux formats.
120 Notions de base de Studio
Les graphiques bitmap sont compos&eacute;s de points, appel&eacute;s pixels, organis&eacute;s
dans une grille. Lorsque vous modifiez un graphique bitmap, vous
modifiez des pixels et non des lignes et des courbes. Les graphiques bitmap
d&eacute;pendent de la r&eacute;solution, ce qui signifie que les donn&eacute;es d&eacute;crivant
l’image sont conditionn&eacute;es par une grille de taille sp&eacute;cifique.
L’agrandissement d’un graphique bitmap modifie la distribution des pixels
dans la grille et produit souvent une image aux bords dentel&eacute;s.
Les graphiques vectoriels reproduisent des images en utilisant des lignes
et des courbes, appel&eacute;es vecteurs, qui incluent des informations de couleur
et de position. Lorsque vous modifiez un graphique vectoriel, vous
modifiez les propri&eacute;t&eacute;s des lignes et des courbes qui en d&eacute;crivent la forme.
Les graphiques vectoriels ne d&eacute;pendent pas de la r&eacute;solution, ce qui signifie
que vous pouvez d&eacute;placer, redimensionner, reformer ou changer la couleur
d’un graphique vectoriel et l’afficher sur des &eacute;crans de diverses r&eacute;solutions,
sans affecter la qualit&eacute; de son aspect.
Vous pouvez vous exercer &agrave; utiliser les outils vectoriels et bitmap sur un
document vierge dans Fireworks afin de voir la diff&eacute;rence entre les deux
formats.
Modification des options des outils
Lorsque vous s&eacute;lectionnez un outil, l’Inspecteur des propri&eacute;t&eacute;s affiche les
options de l’outil. Certaines options restent affich&eacute;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&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s des
objets s&eacute;lectionn&eacute;s. Pour plus d’informations sur l’Inspecteur des
propri&eacute;t&eacute;s, voir &laquo; Utilisation de l’Inspecteur des propri&eacute;t&eacute;s &raquo; dans l’Aide de
Fireworks.
Pour afficher, dans l’Inspecteur des propri&eacute;t&eacute;s, les options
d’un outil que vous &ecirc;tes d&eacute;j&agrave; en train d’utiliser :
■
Cliquez sur S&eacute;lection &gt; D&eacute;s&eacute;lectionner pour d&eacute;s&eacute;lectionner tous les
objets.
Pour plus d’informations sur des options d’outils sp&eacute;cifiques, voir les
sections qui pr&eacute;sentent les diff&eacute;rents outils dans Utilisation de Fireworks.
Notions de base de Fireworks
121
S&eacute;lection d’un outil &agrave; partir d’un groupe d’outils
Un petit triangle dans le coin inf&eacute;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 de formes de base, qui inclut les
outils Rectangle arrondi, Ellipse et Polygone, ainsi que tous les outils de
formes intelligentes figurant sous la ligne de s&eacute;paration.
Pour s&eacute;lectionner un autre outil dans un groupe d’outils :
1.
Cliquez sur l’ic&ocirc;ne de l’outil et maintenez enfonc&eacute; le bouton de la souris.
Un menu contextuel s’affiche avec les ic&ocirc;nes des outils, le nom des
outils et les touches de raccourci. L’outil actuellement s&eacute;lectionn&eacute;
poss&egrave;de une coche &agrave; gauche de son nom.
2.
Faites glisser le pointeur afin de s&eacute;lectionner l’outil souhait&eacute; et rel&acirc;chez
le bouton de la souris.
L’outil s’affiche dans le panneau Outils, et les options de l’outil dans
l’Inspecteur des propri&eacute;t&eacute;s.
Utilisation de l’Inspecteur des propri&eacute;t&eacute;s
L’Inspecteur des propri&eacute;t&eacute;s vous permet de modifier les propri&eacute;t&eacute;s de la
s&eacute;lection, de l’outil ou du document en cours. Par d&eacute;faut, l’Inspecteur des
propri&eacute;t&eacute;s est ancr&eacute; au bas de l’espace de travail.
122 Notions de base de Studio
La fen&ecirc;tre de l’Inspecteur des propri&eacute;t&eacute;s peut s’afficher &agrave; mi-hauteur,
pr&eacute;sentant deux lignes de propri&eacute;t&eacute;s, ou quatre en pleine hauteur. Vous
pouvez &eacute;galement masquer totalement l’Inspecteur des propri&eacute;t&eacute;s tout en le
laissant dans l’espace de travail.
R E MA R Q UE
Dans le manuel Utilisation de Fireworks, la plupart des proc&eacute;dures partent
du principe que la fen&ecirc;tre de l’Inspecteur des propri&eacute;t&eacute;s est affich&eacute;e en
pleine hauteur.
Pour annuler l’ancrage de l’Inspecteur des propri&eacute;t&eacute;s :
■
Faites glisser la poign&eacute;e du coin sup&eacute;rieur gauche vers un autre endroit
de l’espace de travail.
Pour ancrer l’Inspecteur des propri&eacute;t&eacute;s au bas de l’espace de
travail (Windows uniquement) :
■
Faites glisser la barre lat&eacute;rale de l’Inspecteur des propri&eacute;t&eacute;s en bas de
l’&eacute;cran.
Pour agrandir la fen&ecirc;tre mi-hauteur de l’Inspecteur des
propri&eacute;t&eacute;s en pleine hauteur afin d’afficher des options
suppl&eacute;mentaires :
■
Cliquez sur la fl&egrave;che d’extension situ&eacute;e dans le coin inf&eacute;rieur droit de
l’Inspecteur des propri&eacute;t&eacute;s.
■
Cliquez sur l’ic&ocirc;ne en haut &agrave; droite de l’Inspecteur des propri&eacute;t&eacute;s, puis
dans le menu Options de l’Inspecteur des propri&eacute;t&eacute;s, cliquez sur Pleine
hauteur.
R EM A R QU E
Sous Windows, le menu Options est disponible uniquement lorsque
l’Inspecteur des propri&eacute;t&eacute;s est ancr&eacute;.
Pour r&eacute;duire la taille d’affichage de l’Inspecteur des propri&eacute;t&eacute;s
&agrave; mi-hauteur :
■
Cliquez sur la fl&egrave;che d’extension situ&eacute;e dans le coin inf&eacute;rieur droit de
l’Inspecteur des propri&eacute;t&eacute;s.
Notions de base de Fireworks 123
■
Dans le menu Options de l’Inspecteur des propri&eacute;t&eacute;s, cliquez sur
Demi-hauteur.
R EM A R QU E
Sous Windows, le menu Options est disponible uniquement lorsque
l’Inspecteur des propri&eacute;t&eacute;s est ancr&eacute;.
Pour r&eacute;duire l’Inspecteur des propri&eacute;t&eacute;s lorsqu’il est ancr&eacute; :
■
Cliquez sur la fl&egrave;che d’extension ou sur le titre de l’Inspecteur des
propri&eacute;t&eacute;s.
■
Dans le menu Options de l’Inspecteur des propri&eacute;t&eacute;s ancr&eacute;, cliquez sur
R&eacute;duire le groupe de panneaux.
Pour plus d’informations sur des options sp&eacute;cifiques de l’Inspecteur des
propri&eacute;t&eacute;s, voir les sections appropri&eacute;es du manuel Utilisation de Fireworks.
Utilisation des panneaux
Les panneaux permettent de modifier l’aspect d’un objet s&eacute;lectionn&eacute; ou
d’&eacute;l&eacute;ments du document. Ils permettent de travailler sur des images, des
calques, des symboles, etc. Il est possible de faire glisser les panneaux de
fa&ccedil;on &agrave; les regrouper en fonction de vos pr&eacute;f&eacute;rences.
Certains panneaux ne s’affichent pas par d&eacute;faut mais vous pouvez les
afficher si vous le souhaitez. Certains panneaux ne sont pas group&eacute;s avec
d’autres panneaux par d&eacute;faut mais vous pouvez les grouper si vous le
souhaitez. Lorsque vous regroupez des panneaux, tous les noms du groupe
de panneaux s’affichent 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&eacute;rer les param&egrave;tres qui contr&ocirc;lent
la taille et le type de fichier, de travailler avec la palette des couleurs du
fichier ou de la d&eacute;coupe &agrave; exporter.
Le panneau Calques vous permet d’organiser la structure d’un document
et comporte des options de cr&eacute;ation, de suppression et de manipulation des
calques.
Le panneau Images
124 Notions de base de Studio
inclut des options de cr&eacute;ation d’animations.
r&eacute;pertorie les commandes que vous avez utilis&eacute;es
r&eacute;cemment de fa&ccedil;on &agrave; vous permettre de les annuler et de les r&eacute;tablir
rapidement. En outre, vous pouvez s&eacute;lectionner des actions multiples, puis
les enregistrer et les r&eacute;utiliser en tant que commandes. Pour plus
d’informations, voir &laquo; Utilisation du panneau Historique pour annuler ou
r&eacute;p&eacute;ter plusieurs actions &raquo; dans le manuel Utilisation de Fireworks.
Le panneau Historique
Le panneau Formes contient les formes automatiques qui ne s’affichent
pas dans le panneau Outils.
vous permet de stocker et de r&eacute;utiliser des
combinaisons de caract&eacute;ristiques d’objets ou de s&eacute;lectionner un
style stock&eacute;.
Le panneau Styles
comporte des symboles de graphique, de
bouton et d’animation. Vous pouvez facilement faire glisser les occurrences
de ces symboles du panneau Biblioth&egrave;que vers votre document. Vous
pouvez modifier l’ensemble des occurrences en modifiant uniquement le
symbole.
Le panneau Biblioth&egrave;que
Le panneau URL vous permet de cr&eacute;er des biblioth&egrave;ques contenant des
URL fr&eacute;quemment utilis&eacute;es.
Le panneau M&eacute;langeur (Fen&ecirc;tre &gt; M&eacute;langeur) vous permet de cr&eacute;er de
nouvelles couleurs que vous pouvez ensuite ajouter &agrave; la palette de couleurs
du document actif ou appliquer &agrave; des objets s&eacute;lectionn&eacute;s.
Le panneau Nuanciers
(Fen&ecirc;tre &gt; Nuanciers) g&egrave;re la palette de couleurs
du document actif.
Le panneau Info (Fen&ecirc;tre &gt; Info) fournit des informations sur les
dimensions des objets s&eacute;lectionn&eacute;s et les coordonn&eacute;es exactes du pointeur
au cours de son d&eacute;placement dans le document.
(Fen&ecirc;tre &gt; Comportements) g&egrave;re les
comportements qui d&eacute;terminent ce qui se produit lorsque des r&eacute;f&eacute;rences ou
des d&eacute;coupes r&eacute;agissent aux d&eacute;placements de la souris.
Le panneau Comportements
Le panneau Rechercher (Fen&ecirc;tre &gt; Rechercher) vous permet de
rechercher et de remplacer des &eacute;l&eacute;ments, tels que du texte, des URL, des
polices et des couleurs dans un ou plusieurs documents.
(Fen&ecirc;tre &gt; Aligner) contient les commandes
d’alignement et de distribution des objets dans le document.
Le panneau Aligner
Notions de base de Fireworks 125
(Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s de
forme automatique) vous permet de d&eacute;finir les propri&eacute;t&eacute;s de formes
automatiques.
Le panneau Propri&eacute;t&eacute;s de forme automatique
(Fen&ecirc;tre &gt; Modification d’image)
regroupe en un seul endroit les outils les plus fr&eacute;quemment utilis&eacute;s pour la
retouche de photos.
Le panneau Modification d’image
(Fen&ecirc;tre &gt; Caract&egrave;res sp&eacute;ciaux) vous
permet d’ins&eacute;rer des caract&egrave;res sp&eacute;ciaux dans votre texte directement dans
Fireworks, au lieu de devoir les copier et les coller au d&eacute;part d’une autre
source.
Le panneau Caract&egrave;res sp&eacute;ciaux
Organisation des panneaux et des groupes de panneaux
Par d&eacute;faut, certains panneaux Fireworks sont ancr&eacute;s dans la partie droite de
l’espace de travail. Certains panneaux sont organis&eacute;s en groupes de
panneaux. D’autres panneaux ne sont pas affich&eacute;s initialement mais vous
pouvez les ouvrir depuis le menu Fen&ecirc;tre. Vous pouvez annuler l’ancrage
des groupes de panneaux, ajouter des panneaux &agrave; un groupe, annuler
l’ancrage de panneaux individuels, r&eacute;organiser l’ordre des groupes de
panneaux ancr&eacute;s et r&eacute;duire et fermer des groupes de panneaux. Vous
pouvez &eacute;galement ouvrir et fermer des panneaux individuels.
Pour ouvrir un panneau ferm&eacute; :
■
CON S E I L
Une coche &agrave; c&ocirc;t&eacute; du
nom d’un panneau
dans le menu
Fen&ecirc;tre indique que
le panneau est
ouvert.
Dans le menu Fen&ecirc;tre, cliquez sur le nom du panneau.
Pour fermer un panneau, ex&eacute;cutez l’une des actions
suivantes :
■
Dans le menu Fen&ecirc;tre, cliquez sur le nom de panneau.
■
Lorsque le panneau n’est pas ancr&eacute;, cliquez sur le bouton Fermer dans
la barre de titre du panneau.
Pour annuler l’ancrage ou d&eacute;placer un groupe de panneaux :
■
126 Notions de base de Studio
Faites glisser la poign&eacute;e du coin sup&eacute;rieur gauche du panneau et
d&eacute;placez-la hors de la zone d’ancrage des panneaux dans la partie droite
de l’&eacute;cran.
Pour ancrer un groupe de panneaux :
■
Faites glisser la poign&eacute;e du panneau vers la zone d’ancrage des
panneaux.
Lorsque vous faites glisser un panneau ou un groupe de panneaux
au-dessus de la zone d’ancrage des panneaux, une ligne ou un
rectangle d’aper&ccedil;u du placement montre o&ugrave; s’effectuera le
placement au sein des groupes.
Pour r&eacute;duire ou d&eacute;velopper un groupe de panneaux ou un
panneau, ex&eacute;cutez l’une des actions suivantes :
■
Cliquez sur le titre du groupe de panneaux ou du panneau.
R EM A R QU E
La barre de titre est encore visible si le groupe de panneaux ou le panneau
est r&eacute;duit.
■
Cliquez sur la fl&egrave;che d’extension situ&eacute;e dans le coin sup&eacute;rieur gauche
du groupe de panneaux ou du panneau.
Pour annuler l’ancrage d’un panneau dans un groupe de
panneaux :
■
Dans le menu Options de la barre de titre du groupe de panneaux,
cliquez sur Grouper avec &gt; Nouveau groupe de panneaux (Le nom de la
commande Grouper avec change en fonction du nom du panneau
actif ). Le panneau s’affiche dans un nouveau groupe de panneaux
distinct.
Pour ancrer un panneau dans un groupe de panneaux :
■
Cliquez sur le nom d’un groupe de panneaux dans le sous-menu
Grouper avec du menu Options du groupe de panneaux (Le nom de la
commande Grouper avec change en fonction du nom du panneau
actif ).
Pour renommer un groupe de panneaux :
1.
Cliquez sur l’ic&ocirc;ne situ&eacute;e en haut &agrave; droite du groupe de panneaux, puis
sur Renommer le groupe de panneaux dans le menu Options.
2.
Entrez le nouveau nom.
Notions de base de Fireworks 127
Pour r&eacute;tablir les positions par d&eacute;faut des panneaux
correspondant &agrave; votre r&eacute;solution d’&eacute;cran, ex&eacute;cutez l’une des
actions suivantes :
■
Cliquez sur Fen&ecirc;tre &gt; Dispositions d’espace de travail &gt; 1024 x 768.
■
Cliquez sur Fen&ecirc;tre &gt; Dispositions d’espace de travail &gt; 1280 x 1024.
Pour masquer tous les panneaux et l’Inspecteur des
propri&eacute;t&eacute;s :
■
Cliquez sur Fen&ecirc;tre &gt; Masquer les panneaux. Pour afficher des
panneaux masqu&eacute;s, cliquez de nouveau sur Fen&ecirc;tre &gt; Masquer les
panneaux.
R EM A R QU E
Les panneaux qui sont masqu&eacute;s lorsque vous cliquez sur Masquer les
panneaux restent masqu&eacute;s lorsque vous d&eacute;sactivez cette commande.
Bouton Exportation rapide
Le bouton Exportation rapide vous permet d’exporter vos fichiers
Fireworks vers diverses applications Macromedia, telles que Dreamweaver,
Flash, Director et Macromedia FreeHand MX. Vous pouvez en outre
exporter vos fichiers vers Photoshop, FrontPage, Adobe GoLive et
Illustrator, ou en afficher un aper&ccedil;u dans le navigateur de votre choix.
128 Notions de base de Studio
Navigation et affichage d’un document
Vous pouvez contr&ocirc;ler le zoom du document, le nombre de fen&ecirc;tres et le
mode d’affichage. En outre, vous pouvez facilement afficher une vue
panoramique d’un document, ce qui est particuli&egrave;rement utile lorsque,
apr&egrave;s avoir effectu&eacute; un zoom avant, vous ne pouvez plus voir l’ensemble du
document.
Lorsque l’affichage de votre document est en mode plein &eacute;cran dans
Windows, vous pouvez facilement passer d’un document ouvert &agrave; un autre
&agrave; l’aide des onglets figurant dans le haut de la fen&ecirc;tre du document. Le
nom de fichier de chaque document ouvert s’inscrit sur un onglet.
Notions de base de Contribute
Pour tirer le meilleur parti de votre logiciel Contribute, vous devez
comprendre les &eacute;l&eacute;ments de base de l’espace de travail Contribute. Cette
section vous pr&eacute;sente les &eacute;l&eacute;ments de l’espace de travail les plus importants
et les plus couramment utilis&eacute;s.
Notions de base de Contribute 129
Familiarisation avec l’espace de travail
Contribute
L’espace de travail Contribute comporte trois zones principales. La plus
grande zone correspond au navigateur/&eacute;diteur Contribute. Vous pouvez
passer de la navigation &agrave; l’&eacute;dition et vice versa lorsque vous travaillez dans
Contribute.
Rep&eacute;rage des diff&eacute;rentes parties de l’espace de
travail Contribute
Les trois zones principales de l’espace de travail Contribute sont le
navigateur/&eacute;diteur Contribute, la barre d’outils et le panneau de
navigation.
Barre
d’outils
Page de
d&eacute;marrage
dans le
navigateur/
&eacute;diteur
Panneau de
navigation
Le navigateur/&eacute;diteur Contribute
Vous utilisez la fen&ecirc;tre principale dans Contribute pour la navigation et la
modification. Si vous ne savez pas si vous &ecirc;tre en train de naviguer ou de
faire des modifications dans Contribute, consultez la barre d’outils. Les
barres d’outils sont diff&eacute;rentes selon que vous naviguez ou que vous &eacute;ditez
un brouillon (consultez Les barres d’outils Contribute, page 131).
130 Notions de base de Studio
Lorsque vous utilisez le navigateur Contribute, vous pouvez naviguer dans
n’importe quelle page Web, pas seulement dans des pages de votre site
Web. Le navigateur Contribute fonctionne comme un v&eacute;ritable navigateur
Web : vous pouvez cliquer sur les liens figurant dans les pages Web pour
naviguer vers la page que vous souhaitez modifier. Vous pouvez &eacute;galement
cr&eacute;er des favoris des pages que vous consultez fr&eacute;quemment.
Lorsque vous utilisez l’&eacute;diteur Contribute, vous pouvez modifier des pages
dans des sites Web auxquels vous &ecirc;tes connect&eacute; (consultez Connexion &agrave; un
site Web, page 17). Vous pouvez modifier du texte, des images, des tableaux,
des liens et m&ecirc;me des pages comportant des images. Vous pouvez alors
publier vos changements pour que la page Web actualis&eacute;e s’affiche sur votre
site Web.
Vous pouvez naviguer et effectuer des modifications dans Contribute, puis
passer de la navigation &agrave; l’&eacute;dition et inversement. Pour plus d’informations,
voir Basculement entre les modes navigation et modification, page 135.
Les barres d’outils Contribute
Selon le mode qui est actif, navigation ou modification, le contenu de la
barre d’outils de Contribute change. En mode modification, la barre
d’outils de l’&eacute;diteur permet de modifier le texte ou les images, selon le
contenu s&eacute;lectionn&eacute;.
Selon le r&ocirc;le qui vous a &eacute;t&eacute; affect&eacute; par l’administrateur Contribute, certains
boutons peuvent ne pas &ecirc;tre disponibles.
Les boutons de la barre d’outils du navigateur permettent de parcourir
votre site Web ou de cr&eacute;er une nouvelle page.
Les boutons de la barre d’outils de l’&eacute;diteur permettent d’effectuer les
op&eacute;rations courantes &agrave; partir des menus Fichier, Insertion, Format et
Tableau.
Boutons d’action
Ins&eacute;rer du contenu
Ajouter une ligne/colonne
Propri&eacute;t&eacute;s de la page
Notions de base de Contribute
131
Les boutons de la barre d’outils de mise en forme de texte permettent de
mettre le texte en forme.
Aligner &agrave; gauche
Centrer
Menu Style
Menu Police
Couleur du texte
Aligner &agrave; droite
Menu Taille de
police
Couleur de surbrillance
Justifier
Retrait
Italique
Retrait n&eacute;gatif
Gras
Liste &agrave; puces
Liste num&eacute;rot&eacute;e
R EM A R QU E
Si l’administrateur Contribute a limit&eacute; la modification au texte seul,
certaines options de mise en page ne sont pas disponibles. En outre,
certaines options peuvent &ecirc;tre d&eacute;sactiv&eacute;es lorsqu’une feuille de style en
cascade a &eacute;t&eacute; appliqu&eacute;e &agrave; une s&eacute;lection de texte.
Les boutons de la barre d’outils de retouche d’image permettent de
modifier les images.
Aligner &agrave; gauche
Centrer
Aligner &agrave; droite
Redimensionner
Redimensionner
Luminosit&eacute;/Contraste
Accentuer
Recadrer
Pivoter
132 Notions de base de Studio
Justifier
Propri&eacute;t&eacute;s de
l’image
Panneau de navigation de Contribute
Le panneau de navigation de Contribute vous permet de basculer entre la
navigation et la modification, et d’acc&eacute;der rapidement &agrave; vos brouillons.
Vous pouvez &eacute;galement l’utiliser pour acc&eacute;der aux proc&eacute;dures n&eacute;cessaires &agrave;
l’ex&eacute;cution des t&acirc;ches dans Contribute.
Le panneau de navigation est compos&eacute; de deux parties :
■
Le panneau Pages permet d’acc&eacute;der au navigateur Web et &agrave; tous les
brouillons que vous &ecirc;tes en train de modifier. La Console de brouillons,
o&ugrave; est indiqu&eacute; l’&eacute;tat des brouillons, se trouve &eacute;galement sous forme de
lien dans le panneau Pages.
R EMA R Q U E
La Console de brouillons n’est pas disponible lorsque aucun
administrateur n’est affect&eacute; &agrave; votre site Web.
■
Le panneau Comment... fournit les proc&eacute;dures &agrave; suivre pour effectuer
certaines t&acirc;ches courantes de Contribute. Lorsque vous naviguez, il
affiche la liste des t&acirc;ches li&eacute;es &agrave; cette activit&eacute; et, lorsque vous effectuez
des modifications, la liste des t&acirc;ches li&eacute;es &agrave; la modification.
Notions de base de Contribute 133
Dans le panneau Comment... du panneau de navigation, vous pouvez
cliquer sur un lien pour obtenir plus d’informations sur cette t&acirc;che. Si
la t&acirc;che que vous recherchez ne se trouve pas dans la liste, consultez le
guide Utilisation de Contribute (Aide &gt; Aide de Macromedia
Contribute) pour obtenir des informations d&eacute;taill&eacute;es.
R E MA R Q UE
Pour plus d’informations sur l’utilisation des ressources de Contribute et
obtenir de l’aide, voir la section Ressources de Contribute, page 12.
Panneau
Pages
Panneau
Comment...
Barre de s&eacute;paration
Vous pouvez agrandir, r&eacute;duire ou redimensionner les diff&eacute;rentes parties du
panneau de navigation.
Pour agrandir ou r&eacute;duire le panneau de navigation, proc&eacute;dez
de l’une des mani&egrave;res suivantes :
134 Notions de base de Studio
■
Choisissez Affichage &gt; Panneau de navigation.
■
Sous Windows, cliquez sur la fl&egrave;che de la barre de s&eacute;paration situ&eacute;e
entre le panneau de navigation et le navigateur/&eacute;diteur de Contribute.
■
Sur un syst&egrave;me Macintosh, double-cliquez sur l’outil main de la barre
de s&eacute;paration situ&eacute;e entre le panneau de navigation et le navigateur/
&eacute;diteur de Contribute.
Pour redimensionner le panneau de navigation :
■
Faites glisser la barre de s&eacute;paration entre le panneau de navigation et le
navigateur/&eacute;diteur de Contribute.
Pour agrandir ou r&eacute;duire une partie du panneau de navigation :
■
Double-cliquez sur la barre de titre du panneau.
Pour redimensionner verticalement les diff&eacute;rentes parties du
panneau de navigation :
■
Faites glisser la barre de titre du panneau Comment...
Basculement entre les modes navigation et
modification
Vous pouvez utiliser Contribute pour parcourir ou modifier des pages
Web. A tout moment, vous pouvez basculer entre la navigation et la
modification. Lorsque vous quittez un brouillon que vous &ecirc;tes en train de
modifier, Contribute enregistre vos modifications. Ainsi, lorsque vous
retournez dans le brouillon ult&eacute;rieurement, vous pouvez continuer vos
modifications l&agrave; o&ugrave; vous les avez laiss&eacute;es.
Si vous basculez en mode navigation, Contribute ne publie pas votre
brouillon. Pendant que vous parcourez la page, la zone de message vous
informe de l’existence d’un brouillon non publi&eacute; pour cette page.
Si vous ignorez dans quel mode vous &ecirc;tes, navigation ou modification dans
Contribute, observez la barre d’outils. En mode navigation, la barre
d’outils comporte un bouton Modifier la page (ou Cr&eacute;er une connexion).
En mode modification, la barre d’outils de l’&eacute;diteur est affich&eacute;e (voir la
section Les barres d’outils Contribute, page 131).
Pour passer du mode navigation au mode modification,
proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Cliquez sur le bouton Modifier la page de la barre d’outils.
R EM A R QU E
Ce bouton n’est activ&eacute; que sur les pages des sites Web auxquels vous
&ecirc;tes connect&eacute; et que vous &ecirc;tes autoris&eacute; &agrave; modifier.
Notions de base de Contribute 135
■
Dans le panneau Pages du panneau de navigation, cliquez sur le titre
d’un brouillon.
Pour passer du mode modification au mode navigation,
proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Dans le panneau Pages du panneau de navigation, cliquez sur
Navigateur.
■
Cliquez sur le bouton Enregistrer pour plus tard de la barre d’outils.
■
Choisissez Affichage &gt; Navigateur.
Notions de base de FlashPaper
Pour tirer le meilleur parti de votre logiciel FlashPaper, vous devez
comprendre les &eacute;l&eacute;ments de base de l’espace de travail FlashPaper. Cette
section vous pr&eacute;sente une vue d’ensemble des fichiers FlashPaper et vous
pr&eacute;sente les &eacute;l&eacute;ments de l’espace de travail les plus importants et les plus
couramment utilis&eacute;s.
La pr&eacute;sente section contient les rubriques suivantes :
■
A propos des fichiers FlashPaper, page 136
■
Familiarisation avec l’espace de travail FlashPaper, page 137
A propos des fichiers FlashPaper
FlashPaper vous permet de cr&eacute;er des documents Flash (fichiers SWF ou
PDF) &agrave; partir de n’importe quel type de document imprimable tels que
Microsoft Project, Microsoft Visio, et m&ecirc;me QuarkXPress et AutoCAD.
Les documents Flash sont g&eacute;n&eacute;ralement bien moins volumineux que les
autres types de document.
R E MA R Q U E
136 Notions de base de Studio
Les fichiers SWF g&eacute;n&eacute;r&eacute;s par FlashPaper ont le m&ecirc;me format que ceux
g&eacute;n&eacute;r&eacute;s par Macromedia Flash.
Lorsque vous imbriquez des documents Flash dans une page Web, vous
pouvez les visualiser sur des plates-formes dans tout navigateur prenant en
charge le format Flash. Vous pouvez visualiser des fichiers SWF
directement dans Macromedia Flash Player, et afficher des fichiers PDF
directement dans Adobe Acrobat Reader.
Familiarisation avec l’espace de travail
FlashPaper
Lorsque vous cr&eacute;ez un document FlashPaper, vous utilisez l’application
FlashPaper et travaillez dans l’environnement applicatif. Lorsque vous
visualisez un document FlashPaper, vous utilisez Flash Player ou un
navigateur Web et travaillez dans l’environnement d’affichage.
L’espace de travail FlashPaper comprend la barre d’outils FlashPaper, qui est
la m&ecirc;me dans les deux environnements, applicatif et d’affichage. La barre
d’outils FlashPaper vous permet de redimensionner un document pour
l’afficher, naviguer dans ses pages, s&eacute;lectionner du texte, effectuer des
recherches dans le document et imprimer ce dernier.
R EM A R QU E
Le menu Fichier et le menu Aide ne sont visibles que dans
l’environnement applicatif.
Panorama
S&eacute;lectionner
Zoom
Navigation
de page
Rechercher
Ouvrir dans un
nouveau navigateur
Imprimer
Ajuster la largeur
Barre de d&eacute;filement
Ajuster dans la visionneuse
Pour imprimer un document :
■
Cliquez sur l’ic&ocirc;ne Imprimante.
Notions de base de FlashPaper 137
Pour s&eacute;lectionner du texte dans le document :
1.
Cliquez sur le bouton S&eacute;lectionner.
2.
Faites glisser pour s&eacute;lectionner du texte dans la fen&ecirc;tre du document.
Vous pouvez cliquer en maintenant la touche Maj. enfonc&eacute;e pour
s&eacute;lectionner plusieurs mots ou lignes de texte.
3.
Cliquez sur le bouton Panorama pour revenir &agrave; l’affichage du document.
Pour effectuer une recherche dans le document :
1.
Tapez les mots que vous voulez rechercher dans le champ de recherche
de texte, puis cliquez sur le bouton Rechercher.
FlashPaper s&eacute;lectionne la premi&egrave;re occurrence de termes
correspondants.
2.
Pour recherche l’occurrence suivante de termes correspondants, cliquez
de nouveau sur le bouton Rechercher.
R EMA R Q U E
Pour pouvoir utiliser la fonction de recherche, Flash Player 7 doit avoir &eacute;t&eacute;
install&eacute; sur votre ordinateur. Si vous disposez de Flash Player 6 ou d’une
version ant&eacute;rieure, vous ne pouvez pas utiliser la fonction de recherche.
Pour redimensionner le document, effectuez l’une des
op&eacute;rations suivantes :
■
Utilisez le curseur de zoom pour redimensionner de mani&egrave;re
dynamique le document.
Vous pouvez ajuster la plage de zoom du document de 25 % &agrave; 250 %.
La bo&icirc;te de texte du zoom s’actualise lorsque vous utilisez le curseur.
138 Notions de base de Studio
■
Saisissez un chiffre dans la bo&icirc;te de texte du zoom pour redimensionner
le document en utilisant un grossissement particulier.
■
Cliquez sur le bouton Ajuster dans la visionneuse pour visualiser
l’int&eacute;gralit&eacute; de la page dans la visionneuse.
■
Cliquez sur le bouton Ajuster la largeur pour redimensionner le
document de fa&ccedil;on &agrave; ce que la largeur de la page remplisse la
visionneuse.
Pour naviguer ou faire d&eacute;filer les pages dans le document,
effectuez l’une des op&eacute;rations suivantes :
■
Saisissez un chiffre dans la bo&icirc;te de texte Navigation de page pour
consulter une page sp&eacute;cifique.
■
Cliquez sur la fl&egrave;che Pr&eacute;c&eacute;dent ou sur la fl&egrave;che Suivant pour passer &agrave; la
page suivante ou revenir &agrave; la page ant&eacute;rieure d’un document.
■
Faites glisser la bo&icirc;te de d&eacute;filement des pages, situ&eacute;e sur la droite du
document, pour faire d&eacute;filer les documents &agrave; pages multiples.
Pour ouvrir un document dans une fen&ecirc;tre de nouveau
navigateur :
■
Cliquez sur le bouton Ouvrir dans un nouveau navigateur.
R EM A R QU E
Le bouton Ouvrir dans un nouveau navigateur n’appara&icirc;t que dans
l’environnement d’affichage FlashPaper (fichiers SWF enregistr&eacute;s).
Notions de base de FlashPaper 139
140 Notions de base de Studio
CHAPITRE 3
Processus de
d&eacute;veloppement Web
3
Ce chapitre pr&eacute;sente les diff&eacute;rents composants de Macromedia Studio 8,
Macromedia Dreamweaver 8, Macromedia Flash 8, Macromedia Fireworks
8, Macromedia Contribute 3 et Macromedia FlashPaper 2, et la fa&ccedil;on dont
ils forment une suite compl&egrave;te pour offrir un environnement optimal de
conception, de d&eacute;veloppement et de maintenance interactif en ligne, dans
le cadre d’un processus de d&eacute;veloppement Web standard.
Ce chapitre contient les sections suivantes :
A propos du processus de d&eacute;veloppement Web . . . . . . . . . . . . . .141
Planification de votre site Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
D&eacute;finition de l’environnement de d&eacute;veloppement . . . . . . . . . . . . 143
Planification de la conception et de la mise en forme de la page . 145
Cr&eacute;ation d’actifs de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Assemblage, test et d&eacute;ploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Gestion et mise &agrave; jour de votre site . . . . . . . . . . . . . . . . . . . . . . . . . 155
A propos du processus de
d&eacute;veloppement Web
Un processus de d&eacute;veloppement Web standard pr&eacute;sente les &eacute;tapes
suivantes :
■
Planification de site, incluant la d&eacute;finition de la strat&eacute;gie ou des
objectifs du site, le choix du public vis&eacute; et la d&eacute;finition des donn&eacute;es
requises pour le site
■
D&eacute;finition de l’environnement de d&eacute;veloppement, incluant la s&eacute;lection
des serveurs Web et d’applications, la d&eacute;finition d’un site Dreamweaver
et la d&eacute;finition des sources de donn&eacute;es
141
■
Planification de la conception et de la mise en forme de la page,
incluant l’&eacute;laboration de maquettes de vos pages et de vos interfaces
d’application &agrave; l’aide d’un outil de dessin tel que Fireworks et la mise en
forme des pages HTML avec Dreamweaver
■
Cr&eacute;ation d’actifs de contenu, incluant la cr&eacute;ation d’images, de vid&eacute;os,
etc., avec Fireworks et Flash
■
Cr&eacute;ation d’actifs d’application, incluant la cr&eacute;ation de pages et
d’applications Internet dynamiques avec Dreamweaver et Flash
■
Assemblage, test et d&eacute;ploiement de votre site, incluant le formatage du
texte, la compilation de vos actifs, la v&eacute;rification des conditions
d’accessibilit&eacute;, le test de votre code et la publication de votre site sur un
serveur &agrave; l’aide de Dreamweaver
■
La maintenance et l’actualisation de votre site, qui inclut la mise &agrave; jour
de votre contenu avec Dreamweaver et Contribute
Studio 8 offre tous les outils n&eacute;cessaires &agrave; la r&eacute;alisation compl&egrave;te de ce
processus. La combinaison de Dreamweaver, Flash, Fireworks, Contribute
et FlashPaper vous permet de concevoir, de d&eacute;velopper et de g&eacute;rer ais&eacute;ment
des sites Web et des applications &agrave; la fois dans des environnements de code
et de conception.
Ce chapitre pr&eacute;sente un exemple de processus de d&eacute;veloppement Web mais
ce n’est pas le seul possible. Le processus que vous et votre &eacute;quipe d&eacute;ciderez
d’adopter d&eacute;pend de vos ressources, de vos habitudes de travail personnelles
et des besoins de votre site Web.
R EM A R QU E
Pour plus d’informations sur le processus de d&eacute;veloppement Web de
pages dynamiques, voir D&eacute;roulement de la conception de pages
dynamiques dans le chapitre Utilisation de Dreamweaver.
Planification de votre site Web
La planification et l’organisation efficace de votre site ne se limite pas &agrave; la
d&eacute;finition de l’apparence du site et &agrave; l’emplacement de ses fichiers. Vous
devez tenir compte des objectifs du site et du public vis&eacute;. En outre, vous
devez prendre en consid&eacute;ration le plan de navigation de votre site. Une
planification minutieuse avant de proc&eacute;der au d&eacute;veloppement du site vous
permettra de gagner &eacute;norm&eacute;ment de temps par la suite.
142 Processus de d&eacute;veloppement Web
D&eacute;finir les objectifs de votre site Interrogez-vous ou interrogez votre
client sur le site et notez vos objectifs afin de ne pas vous en &eacute;loigner lors de
la conception du site. Une liste d’objectifs vous aide &agrave; distinguer les besoins
particuliers de votre site Web. La navigation sur le site, le support utilis&eacute; et
l’apparence de votre site d&eacute;pendent de la complexit&eacute; de vos objectifs. Par
exemple, l’apparence d’un site Web d&eacute;di&eacute; aux informations arch&eacute;ologiques
et sa navigation seront tr&egrave;s diff&eacute;rentes de celles d’un site d&eacute;di&eacute; &agrave; la vente
d’appareils &eacute;lectrom&eacute;nagers.
D&eacute;terminer le public vis&eacute; Cette &eacute;tape peut ne pas sembler n&eacute;cessaire
puisque vous souhaiteriez que tout le monde visite votre site Web.
N&eacute;anmoins, il s’av&egrave;re tr&egrave;s difficile de cr&eacute;er un tel site Web. Dans le monde
entier, les utilisateurs ont recours &agrave; diff&eacute;rents types de navigateurs, se
connectent &agrave; diff&eacute;rentes vitesses, poss&egrave;dent ou non des plug-ins et utilisent
diff&eacute;rents types de p&eacute;riph&eacute;riques d’affichage de contenu Internet. Tous ces
facteurs ayant des r&eacute;percussions sur l’utilisation de votre site, il est essentiel
de d&eacute;terminer le public cibl&eacute; lors de la phase initiale de la planification.
Le plan de navigation du site
est une comparable &agrave; une carte des liaisons de vos pages Web. Plus
particuli&egrave;rement, il indique comment les utilisateurs naviguent sur votre
site lorsqu’ils cliquent sur les liens et interagissent avec les interfaces
d’applications. Apr&egrave;s avoir &eacute;tabli ce sch&eacute;ma de la navigation sur votre site,
vous pouvez pr&eacute;senter l’avant-projet &agrave; votre client ou aux membres de votre
groupe.
Conception du plan de navigation du site
D&eacute;finition de l’environnement de
d&eacute;veloppement
Que vous d&eacute;veloppiez votre projet seul ou en &eacute;quipe, vous devez d&eacute;finir un
environnement de d&eacute;veloppement avant d’utiliser Studio pour cr&eacute;er votre
site Web.
A la base, votre environnement de d&eacute;veloppement consiste en un serveur
Web et un site Dreamweaver, voire d’un serveur d’application.
D&eacute;finition de l’environnement de d&eacute;veloppement 143
Choix d’un serveur Web et installation sur votre ordinateur local ou sur
Un serveur Web est un logiciel qui transmet
des fichiers en r&eacute;ponse &agrave; des requ&ecirc;tes de navigateurs Web. Lorsque le
serveur Web re&ccedil;oit une requ&ecirc;te pour une page HTML statique, le serveur
lit la requ&ecirc;te, recherche la page et l’envoie au navigateur ayant formul&eacute; la
requ&ecirc;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&eacute; de son propre serveur Web.
Nous vous recommandons d’utiliser ce serveur uniquement dans le cadre
d’op&eacute;rations de d&eacute;veloppement.
un ordinateur en r&eacute;seau
Une fois que votre serveur Web fonctionne correctement, cr&eacute;ez un dossier
racine pour votre application sur l’ordinateur ex&eacute;cutant le serveur Web.
V&eacute;rifiez que le dossier est publi&eacute; par le serveur Web, c’est-&agrave;-dire que le
serveur Web peut transmettre tous les fichiers contenus dans ce dossier ou
chacun de ses sous-dossiers en r&eacute;ponse &agrave; une requ&ecirc;te HTTP d’un
navigateur Web.
Par exemple, sur un ordinateur ex&eacute;cutant Personal Web Server (PWS) ou
IIS, vous devez vous assurer que tous les fichiers du dossier Inetpub/
wwwroot et de chacun de ses sous-dossiers peuvent &ecirc;tre transmis &agrave; un
navigateur Web. Si vous utilisez le serveur Web de ColdFusion pour des
op&eacute;rations de d&eacute;veloppement, tous les fichiers contenus dans le dossier
CFusionMX/wwwroot ou dans chacun de ses sous-dossiers peuvent &ecirc;tre
transmis &agrave; un navigateur Web.
R E MA R Q UE
Pour ex&eacute;cuter des applications Web, vous devez &eacute;galement installer un
serveur d’application qui fonctionnera avec votre serveur Web. Un serveur
d’application est un logiciel qui aide le serveur Web &agrave; traiter les pages
dynamiques avant qu’il ne les envoie aux navigateurs demandeurs. Pour
plus d’informations, voir Configuration d'un serveur d'application dans le
chapitre Utilisation de Dreamweaver.
Dans Dreamweaver, le terme site
peut se rapporter aussi bien &agrave; un site Web qu’au dossier local dans lequel
sont conserv&eacute;s tous les documents appartenant &agrave; un site Web. Vous devez
d&eacute;finir un tel emplacement avant de cr&eacute;er votre site.
D&eacute;finir votre site dans Dreamweaver
144 Processus de d&eacute;veloppement Web
Un site Dreamweaver organise tous les documents associ&eacute;s &agrave; votre site Web
et vous permet de suivre et de g&eacute;rer les liens, de g&eacute;rer les fichiers, de
partager les fichiers et de copier les fichiers de votre site sur un
serveur Web. La m&eacute;thode la plus fiable de cr&eacute;ation d’un site Web &agrave; l’aide de
Dreamweaver consiste &agrave; cr&eacute;er et modifier des pages sur votre disque local,
puis &agrave; charger les copies des fichiers du site vers un serveur Web distant afin
de les mettre &agrave; la disposition d’autres utilisateurs.
Lorsque vous cr&eacute;ez votre site, si vous travaillez en &eacute;quipe, envisagez
d’utilisez la fonction archivage et extraction de fa&ccedil;on &agrave; archiver et &agrave; extraire
des fichiers vers et depuis des serveurs locaux et distants.
Didacticiel associ&eacute;
■
Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de
projet, page 159
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&eacute;veloppeurs. Vous pouvez utiliser Studio 8 pour cr&eacute;er des exemples de
page au fur et &agrave; mesure que vous progressez dans la conception. Une fois
que vous avez un aper&ccedil;u de l’apparence que vous voulez donner &agrave; vos
pages, vous pouvez commencer &agrave; planifier leur mise en forme
dans Dreamweaver.
Cr&eacute;er des maquettes de pages pour
d&eacute;terminer l’apparence de votre site
La planification pr&eacute;alable de la conception et de la mise en forme de vos
pages Web permet de gagner un temps consid&eacute;rable lors du processus de
d&eacute;veloppement. Il est essentiel de v&eacute;rifier la coh&eacute;rence de la conception et
de la mise en forme de vos pages. Donnez aux pages Web du site une
apparence similaire, un m&ecirc;me mod&egrave;le de couleurs, une m&ecirc;me navigation,
etc. Cette approche coh&eacute;rente permet d’orienter vos utilisateurs et de les
faire ainsi b&eacute;n&eacute;ficier d’une meilleure exp&eacute;rience.
Planification de la conception et de la mise en forme de la page 145
Vous pouvez utiliser Fireworks ou Flash pour cr&eacute;er une maquette des pages
principales de votre site Web. Les maquettes des pages repr&eacute;sentent en
g&eacute;n&eacute;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’&eacute;l&eacute;ments.
Par exemple, il faut tenir compte du sch&eacute;ma suivant :
146 Processus de d&eacute;veloppement Web
Une maquette dans Fireworks peut ressembler &agrave; ceci :
Une fois la cr&eacute;ation d’une maquette dans Fireworks termin&eacute;e, vous pouvez
l’exporter sous la forme d’un fichier Flash SWF. Votre travail peut ensuite
&ecirc;tre affich&eacute; par tout ordinateur ex&eacute;cutant Flash Player.
Didacticiel associ&eacute;
■
Chapitre 5, Didacticiel : Cr&eacute;ation de maquettes de page, page 167
Cr&eacute;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&eacute;termine la mani&egrave;re dont
votre page s’affichera dans le navigateur, par exemple o&ugrave; seront plac&eacute;s les
menus, les images et le contenu Flash. Dreamweaver propose diff&eacute;rentes
fa&ccedil;ons de cr&eacute;er et de contr&ocirc;ler la mise en forme de vos pages Web.
Planification de la conception et de la mise en forme de la page 147
Une m&eacute;thode courante pour cr&eacute;er une mise en forme est de positionner les
&eacute;l&eacute;ments en utilisant des tableaux HTML. Un tableau comprend au moins
une ligne ; chaque ligne comporte au moins une cellule. Les tableaux sont
tr&egrave;s utiles pour pr&eacute;senter des donn&eacute;es tabulaires et mettre en forme du texte
et des images dans une page Web.
La mise en forme d’une page cr&eacute;&eacute;e dans Dreamweaver &agrave; l’aide de tableau
peut ressembler &agrave; ceci :
Pour mettre en forme des pages dans Dreamweaver, vous pouvez &eacute;galement
placer des &eacute;l&eacute;ments &agrave; l’aide des feuilles de style en cascade (CSS). Cette
m&eacute;thode est de plus en plus utilis&eacute;e car elle offre un meilleur contr&ocirc;le et
une plus grande flexibilit&eacute; que les tableaux. Si vous savez correctement vous
servir des feuilles de style en cascade (CSS), vous pouvez utiliser les
balises &lt;div&gt; pour cr&eacute;er des blocs de mise en forme de CSS, puis placer ces
blocs sur la page &agrave; l’aide des styles.
Didacticiel associ&eacute;
■
Chapitre 6, Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur
un tableau, page 189
Cr&eacute;ation d’actifs de contenu
Une fois que vous savez &agrave; quoi va ressembler votre site, vous pouvez cr&eacute;er et
regrouper les actifs dont vous aurez besoin pour votre site Web. Les actifs
peuvent &ecirc;tre des &eacute;l&eacute;ments tels que des images (notamment des boutons, des
banni&egrave;res, des logos, des photos, etc.), du texte, des animations Flash ou
autres m&eacute;dias.
148 Processus de d&eacute;veloppement Web
Travail sur des graphiques et des photos
Vous pouvez utiliser Fireworks pour cr&eacute;er des graphiques et traiter des
photos destin&eacute;s &agrave; votre site Web. Tout &eacute;l&eacute;ment contenu dans Fireworks est
enti&egrave;rement modifiable, &agrave; tout moment.
Fireworks dispose d’outils de modification de bitmap, ainsi que d’outils de
modification vectorielle. Gr&acirc;ce &agrave; Fireworks, vous pouvez am&eacute;liorer vos
graphiques en appliquant des biseaux, des estampes, des ombres port&eacute;es,
des effets n&eacute;on ou autres aux objets vectoriels, aux bitmaps et aux textes.
Fireworks g&eacute;n&egrave;re &eacute;galement du code JavaScript, ce qui facilite
consid&eacute;rablement la cr&eacute;ation de survols, de boutons et de menus
contextuels. En outre, ses fonctions d’optimisation r&eacute;duisent la taille des
fichiers graphiques Web sans sacrifier la qualit&eacute;. Fireworks vous facilite le
travail des images en int&eacute;grant le traitement par lots et des outils de
retouche des photos, notamment la suppression de l’œil rouge.
Par exemple, vous pourriez cr&eacute;er la banni&egrave;re suivante dans Fireworks :
Fireworks s’int&egrave;gre aux autres produits Studio pour vous permettre
d’optimiser votre travail. Une fois que vous avez inclus vos images dans
votre site, vous pouvez les ouvrir, les modifier et travailler dans Fireworks
sans jamais quitter l’espace de travail de Dreamweaver ou de Flash.
Didacticiels associ&eacute;s
■
Chapitre 7, Didacticiel : Traitement des photographies, page 211
■
Chapitre 8, Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page, page 223
Cr&eacute;ation d’actifs de contenu 149
Cr&eacute;ation de contenu et de vid&eacute;o Flash
Votre contenu Flash peut comprendre des graphiques, du texte, des effets
anim&eacute;s et des applications destin&eacute;s aux sites Web. Les contenus Flash sont
principalement compos&eacute;s de graphiques vectoriels mais peuvent &eacute;galement
contenir des graphiques bitmap, de la vid&eacute;o et du son. Etant donn&eacute; que le
contenu Flash utilise des graphiques vectoriels compacts, il se t&eacute;l&eacute;charge
rapidement et s’adapte &agrave; la taille de l’&eacute;cran de l’utilisateur.
Flash vous permet d’animer des objets pour donner une impression de
mouvement sur la sc&egrave;ne et pour en modifier la forme, la taille, la couleur,
l’opacit&eacute;, la rotation et d’autres propri&eacute;t&eacute;s. Vous pouvez cr&eacute;er une
animation image par image dans laquelle vous d&eacute;signez une image distincte
pour chaque plan. Vous pouvez aussi cr&eacute;er une animation par interpolation
dans laquelle vous d&eacute;finissez la premi&egrave;re et la derni&egrave;re image et laissez Flash
cr&eacute;er les images interm&eacute;diaires.
Vous pouvez utiliser Flash pour inclure une vid&eacute;o dans une page Web dans
un format que presque tous les utilisateurs peuvent visualiser. Dans Flash,
vous pouvez int&eacute;grer en toute transparence des vid&eacute;os dans votre site Web,
et vous pouvez cr&eacute;er un habillage personnalis&eacute; comportant des commandes
uniques pour votre vid&eacute;o. Vous pouvez d&eacute;terminer la taille et l’aspect de
votre vid&eacute;o, qui peut &ecirc;tre modifi&eacute;e de mani&egrave;re dynamique en fonction
d’une source de donn&eacute;es.
150 Processus de d&eacute;veloppement Web
Par exemple, c’est ainsi qu’un lecteur vid&eacute;o cr&eacute;&eacute; dans Flash peut avoir
l’apparence d’une page Web :
Flash traite Flash Video simplement comme un autre type de m&eacute;dia de
sorte que vous pouvez calquer, programmer et commander une vid&eacute;o
comme le feriez avec n’importe quel autre objet dans un fichier SWF.
Didacticiel associ&eacute;
■
Chapitre 9, Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash,
page 245
■
Chapitre 10, Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel
uniquement), page 287
Assemblage, test et d&eacute;ploiement
La derni&egrave;re phase du processus de d&eacute;veloppement Web comprend
l’assemblage de vos pages, le test et le d&eacute;ploiement de votre site vers un
serveur pour le rendre disponible &agrave; tous.
Assemblage, test et d&eacute;ploiement
151
Assemblage de votre page Web dans
Dreamweaver
Gr&acirc;ce &agrave; Dreamweaver, vous pouvez ajouter facilement plusieurs types de
contenu &agrave; vos pages Web. Vous pouvez ajouter du texte, des actifs et des
&eacute;l&eacute;ments de conception, par exemple des images, des couleurs, des
animations, du son et d’autres formes de donn&eacute;es.
Vous pouvez simplement d&eacute;placer des actifs enregistr&eacute;s vers la page, ou
effectuer l’une des op&eacute;rations suivantes pour cr&eacute;er votre page Web dans
Dreamweaver :
■
Saisir directement du texte dans un document Dreamweaver, ou
l’importer &agrave; partir d’autres documents, puis mettre en forme ce texte
avec des styles de CSS.
■
Ins&eacute;rer des images, y compris des images pour les survols, des
cartes-image et des d&eacute;coupes pour Fireworks.
■
Ins&eacute;rer d’autres types de ressources dans une page Web, comme des
animations Flash, Shockwave ou QuickTime, du son, des applets et des
vid&eacute;os.
■
Ecrire votre propre code HTML, JavaScript, CFML, PHP, Visual
Basic, C# et CSS.
■
Cr&eacute;er des liens HTML standard, y compris des liens vers des ancres et
des adresses &eacute;lectroniques, ou configurer facilement des syst&egrave;mes de
navigation graphiques, notamment des menus de reroutage et des
barres de navigation.
■
Appliquer du contenu r&eacute;utilisable dans l’ensemble de votre site en
utilisant les mod&egrave;les et les biblioth&egrave;ques de Dreamweaver.
Apr&egrave;s avoir assembl&eacute; votre page, vous pouvez la modifier directement dans
l’espace de travail de Dreamweaver. Vous pouvez r&eacute;aliser un certain nombre
de t&acirc;ches simples de modification d’images, notamment rogner, modifier le
contraste, optimiser et accentuer la nettet&eacute;, sans avoir recours &agrave; une
application de retouche d’images. Pour des t&acirc;ches plus complexes, vous
pouvez lancer Fireworks pour modifier les images ins&eacute;r&eacute;es dans un
document Dreamweaver.
152 Processus de d&eacute;veloppement Web
Vous pouvez &eacute;galement modifier des fichiers Flash en s&eacute;lectionnant l’espace
r&eacute;serv&eacute; au contenu Flash dans le document Dreamweaver et en cliquant sur
le bouton Modifier de Flash dans l’inspecteur des propri&eacute;t&eacute;s. Dreamweaver
ouvre le fichier Flash (FLA) et enregistre toutes les modifications que vous
y avez apport&eacute;es dans le fichier SWF.
Didacticiel associ&eacute;
■
Chapitre 11, Didacticiel : Ajout de contenu aux pages, page 301
■
Chapitre 9, Didacticiel : Cr&eacute;ation d'une mise en forme de page bas&eacute;e sur
CSS, page 153
Test de votre site dans Dreamweaver
Avant de charger le site sur un serveur et de le d&eacute;clarer pr&ecirc;t &agrave; &ecirc;tre publi&eacute;,
il convient de le tester localement. En fait, il est judicieux de tester et de
r&eacute;soudre les probl&egrave;mes de votre site fr&eacute;quemment au cours de son
&eacute;laboration, afin de traiter les probl&egrave;mes avant qu’ils ne s’aggravent et de
les emp&ecirc;cher de se r&eacute;p&eacute;ter.
Vous devez vous assurer que vos pages ont l’apparence et le fonctionnement
souhait&eacute;s dans les navigateurs cibl&eacute;s, que tous les liens fonctionnent et que
les pages ne sont pas trop longues &agrave; t&eacute;l&eacute;charger. Vous pouvez &eacute;galement
tester et d&eacute;panner l’ensemble du site en ex&eacute;cutant un rapport de site avant
de publier votre site.
Les instructions suivantes vous permettront d’&eacute;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.
■
Assurez-vous que les pages fonctionnent comme pr&eacute;vu dans les
navigateurs cibl&eacute;s. V&eacute;rifiez &eacute;galement qu’elles fonctionnent ou qu’elles
&eacute;chouent &eacute;l&eacute;gamment dans les autres navigateurs. Vos pages doivent
&ecirc;tre lisibles et fonctionnelles dans les navigateurs qui ne prennent pas
en charge les styles, les calques, les plug-ins ou les &eacute;l&eacute;ments JavaScript.
■
V&eacute;rifiez que le site ne contient pas de liens rompus (liens qui ne
fonctionnent pas) et r&eacute;parez-les le cas &eacute;ch&eacute;ant. Les autres sites &eacute;tant
parfois modifi&eacute;s et r&eacute;organis&eacute;s, il peut arriver que certaines pages vers
lesquelles vos liens pointent soient d&eacute;plac&eacute;es ou supprim&eacute;es.
Assemblage, test et d&eacute;ploiement 153
■
Contr&ocirc;lez la taille de vos pages et leur dur&eacute;e de t&eacute;l&eacute;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&egrave;rement
t&eacute;l&eacute;charg&eacute;. Envisagez de fragmenter les grands tableaux ; si c’est
impossible, envisagez de placer quelques donn&eacute;es, par exemple un
message de bienvenue ou une banni&egrave;re publicitaire, en dehors du
tableau, en haut de la page, de mani&egrave;re &agrave; ce que les utilisateurs puissent
au moins voir ce contenu pendant le t&eacute;l&eacute;chargement du tableau.
■
V&eacute;rifiez l’int&eacute;gralit&eacute; du site pour vous assurer que tous les probl&egrave;mes
ont &eacute;t&eacute; r&eacute;solus, tel que des documents sans nom, des balises vides ou
des balises imbriqu&eacute;es redondantes, en ex&eacute;cutant des rapports de site
dans Dreamweaver.
■
A l’aide de Dreamweaver Validator, v&eacute;rifiez que votre code ne contient
pas d’erreurs de balise ou de syntaxe.
■
V&eacute;rifiez que votre contenu Flash ne comporte pas d’erreurs lorsqu’il est
ex&eacute;cut&eacute; par Flash Player. Vous pouvez utiliser le d&eacute;bogueur Flash en
mode de test sur des fichiers locaux ou l’utiliser pour tester des fichiers
sur un serveur Web &agrave; un emplacement distant.
Rubriques connexes
Chapitre 4, Test de votre site, dans le chapitre Utilisation de
Dreamweaver
■
■
Chapitre 21, Optimisation et d&eacute;bogage de code, dans le chapitre
Utilisation de Dreamweaver
D&eacute;ploiement de vos fichiers de site vers un
serveur avec Dreamweaver
Apr&egrave;s avoir cr&eacute;&eacute; un site Web fonctionnel, vous pouvez utiliser
Dreamweaver pour le publier en chargeant les fichiers vers un serveur Web
distant.
Avant de poursuivre, vous devez pouvoir acc&eacute;der &agrave; un serveur Web distant
(le serveur de votre fournisseur d’acc&egrave;s Internet, un serveur appartenant &agrave;
un client pour lequel vous travaillez ou un serveur intranet de votre
soci&eacute;t&eacute;). Si vous ne pouvez acc&eacute;der &agrave; un serveur de ce type, contactez votre
fournisseur d’acc&egrave;s Internet ou votre client.
154 Processus de d&eacute;veloppement Web
Didacticiel associ&eacute;
■
Chapitre 13, Didacticiel : Publication de votre site, page 359
Gestion et mise &agrave; jour de votre
site
Une fois la majeure partie du site publi&eacute;e, vous devez le mettre &agrave; jour
r&eacute;guli&egrave;rement et en assurer la maintenance. La publication d’un site,
c’est-&agrave;-dire son d&eacute;ploiement vers un serveur et son activation, constitue
un processus continu.
Dreamweaver poss&egrave;de de nombreux outils qui vous aideront &agrave; g&eacute;rer votre
site, &agrave; transf&eacute;rer vos fichiers vers et depuis un serveur distant, &agrave; configurer
un processus d’archivage/extraction pour emp&ecirc;cher l’&eacute;crasement des
fichiers et &agrave; synchroniser les fichiers sur vos sites locaux et distants.
Vous pouvez &eacute;galement utiliser Contribute pour assurer la maintenance de
votre site Web. L’utilisation de Contribute permet &agrave; d’autres utilisateurs
d’actualiser le contenu du site Web de sorte que celui-ci reste &agrave; jour.
Contribute dispose de commandes qui vous permettent de limiter les
modifications que les utilisateurs peuvent apporter au site Web afin de
garantir l’int&eacute;grit&eacute; de ce dernier. Contribute est int&eacute;gr&eacute; &agrave; Dreamweaver de
fa&ccedil;on &agrave; pr&eacute;venir les risque de conflits lors du processus d’archivage/
extraction des fichiers. Vous pouvez &eacute;galement lancer et g&eacute;rer Contribute &agrave;
partir de Dreamweaver.
Didacticiel associ&eacute;
■
Chapitre 14, Didacticiel : Param&eacute;trage de votre site Web pour les
utilisateurs de Contribute, page 367
Gestion et mise &agrave; jour de votre site 155
156 Processus de d&eacute;veloppement Web
2
PARTIE 2
D&eacute;finir votre environnement et planifier
la conception de vos pages
Dans cette partie, vous commencerez &agrave; construire l’exemple de site Internet
du Cafe Townsend.
Avant de commencer, vous devez copier les fichiers d’exemple et cr&eacute;er votre
projet. Puis, vous utiliserez Macromedia Fireworks 8 et Macromedia
Dreamweaver 8 pour cr&eacute;er une conception de page Web pour la page
d’accueil du Cafe Townsend.
Cette partie du manuel contient les sections suivantes :
Didacticiel : Configuration de votre site et des fichiers de
projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Didacticiel : Cr&eacute;ation de maquettes de page . . . . . . . . . . . . 167
Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur
un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
157
CHAPITRE 4
Didacticiel : Configuration de
votre site et des fichiers de projet
4
Ce didacticiel va vous pr&eacute;senter le concept d’un site Macromedia
Dreamweaver 8 et vous expliquer comment configurer les fichiers de projet
pour l’exemple de site Web Cafe Townsend. Dans Dreamweaver, un site se
compose g&eacute;n&eacute;ralement de deux parties : un ensemble de fichiers stock&eacute;s sur
un ordinateur local (le site local) et un emplacement situ&eacute; sur un serveur
Web distant vers lequel vous pouvez t&eacute;l&eacute;charger ces fichiers afin de les
mettre, le moment venu, &agrave; la disposition d’autres utilisateurs (le site
distant). Vous pouvez utiliser les panneaux Fichiers de Dreamweaver pour
afficher et exploiter les fichiers dans votre site.
En g&eacute;n&eacute;ral, les personnes cr&eacute;ant un site Web &agrave; l’aide de Dreamweaver
cr&eacute;ent et modifient des pages sur leur disque local et en t&eacute;l&eacute;chargent un
exemplaire sur un serveur Web afin de permettre leur visualisation sur le
Web. Dans ce didacticiel, vous apprendrez uniquement &agrave; configurer le site
local, de mani&egrave;re &agrave; entamer imm&eacute;diatement la cr&eacute;ation de pages Web. Par
la suite, quand vous aurez termin&eacute; le site Web, vous apprendrez &agrave; cr&eacute;er un
site distant de mani&egrave;re &agrave; envoyer vos fichiers sur un serveur Web.
Dans ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Apprenez &agrave; utiliser des sites Dreamweaver . . . . . . . . . . . . . . . . . . 160
Configurez vos fichiers de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . .161
D&eacute;finissez un dossier local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
159
Apprenez &agrave; utiliser des sites
Dreamweaver
Dans Dreamweaver, le terme &laquo; site &raquo; peut se rapporter aussi bien &agrave; un site
Web qu’&agrave; un lieu de stockage local dans lequel sont conserv&eacute;s tous les
documents appartenant &agrave; un site Web. Vous devez d&eacute;finir un tel
emplacement avant de cr&eacute;er votre site. Un site Dreamweaver organise tous
les documents associ&eacute;s &agrave; votre site Web et vous permet de suivre et de g&eacute;rer
les liens, de g&eacute;rer et de partager les fichiers, ainsi que de transf&eacute;rer vos
fichiers de site vers un serveur Web.
R EM A R QU E
Les utilisateurs de Macromedia HomeSite et de ColdFusion Studio
peuvent consid&eacute;rer un site Dreamweaver comme un projet HomeSite ou
Studio.
Un site Dreamweaver se compose de trois parties, selon votre
environnement de travail et le type de site Web en cours de
d&eacute;veloppement :
Le dossier local correspond &agrave; votre r&eacute;pertoire de travail. Dreamweaver
d&eacute;signe ce dossier comme votre site local. Le dossier local est g&eacute;n&eacute;ralement
un dossier qui se trouve sur votre disque dur.
Le dossier distant est le r&eacute;pertoire dans lequel sont stock&eacute;s les fichiers,
selon votre environnement, que vous r&eacute;servez aux &eacute;valuations, &agrave; la
production, &agrave; la collaboration et &agrave; la publication. Dreamweaver consid&egrave;re
ce dossier comme votre site distant. Le dossier distant est un dossier qui se
trouve sur l’ordinateur qui fait tourner le serveur Web. Cet ordinateur est
souvent (mais pas toujours) celui qui rend votre site disponible au grand
public sur le Web.
Le dossier des pages dynamiques (dossier du serveur d’&eacute;valuation) est
l’emplacement dans lequel Dreamweaver traite les pages dynamiques. Ce
dossier est g&eacute;n&eacute;ralement le m&ecirc;me que le dossier distant. Ne vous souciez
pas de ce dossier, sauf si vous d&eacute;veloppez une application Web. Pour plus
d’informations sur le dossier du serveur d’&eacute;valuation, voir D&eacute;finition du
dossier de traitement des pages dynamiques dans Utilisation de Dreamweaver.
160 Didacticiel : Configuration de votre site et des fichiers de projet
Vous pouvez d&eacute;finir un site Dreamweaver &agrave; l’aide de l’assistant de
d&eacute;finition d’un site, qui vous guide tout au long de la proc&eacute;dure de
configuration, ou &agrave; l’aide des param&egrave;tres avanc&eacute;s de d&eacute;finition du site, qui
vous permettent de configurer individuellement des dossiers locaux,
distants et d’&eacute;valuation, si n&eacute;cessaire. Dans ce didacticiel, vous allez utiliser
les param&egrave;tres avanc&eacute;s de la bo&icirc;te de dialogue de Configuration du site afin
de configurer un dossier local pour vos fichiers de projet. Plus loin dans ce
manuel, vous apprendrez &agrave; configurer un dossier distant de mani&egrave;re &agrave;
publier vos pages sur un serveur Web et &agrave; les rendre accessibles au public.
Pour plus d’informations sur l’utilisation de l’assistant de Configuration du
site, voir Configuration d'un nouveau site Dreamweaver dans Utilisation de
Dreamweaver.
Pour plus d’informations sur la configuration d’un site distant, voir
Chapitre 13, Didacticiel : Publication de votre site.
Pour plus d’informations sur les sites Dreamweaver en g&eacute;n&eacute;ral, voir
&laquo; Configuration d’un site Dreamweaver &raquo; dans l’aide Utilisation de
Dreamweaver.
Configurez vos fichiers de projet
Lorsque vous cr&eacute;ez un site local, vous pouvez placer les actifs existants
(images ou autres &eacute;l&eacute;ments de contenu) dans le dossier racine du site local
(le dossier &laquo; principal &raquo; du site). Puis, lorsque vous serez dispos&eacute; &agrave; ajouter
du contenu &agrave; vos pages, les actifs seront &agrave; cet endroit, pr&ecirc;ts &agrave; l’emploi.
Les exemples de fichiers inclus avec Dreamweaver contiennent des actifs
pour l’exemple de site &agrave; construire avec les didacticiels du guide Bien
d&eacute;marrer avec Dreamweaver. La premi&egrave;re &eacute;tape dans la cr&eacute;ation d’un site est
la copie des exemples de fichiers du dossier de l’application Dreamweaver
vers un dossier appropri&eacute; sur votre disque dur.
Configurez vos fichiers de projet
161
1.
Cr&eacute;ez un nouveau dossier nomm&eacute; local_sites sur votre disque dur.
Par exemple, cr&eacute;ez un dossier nomm&eacute; local_sites &agrave; l’un des deux
endroits suivants :
■
■
Sous Windows :
C:\Documents and Settings\votre_nom_d’utilisateur\Mes documen
ts\local_sites.
Sur Macintosh : DD Macintosh/Users/votre_nom_d’utilisateur/
Documents/local_sites.
R EM A R QU E
Sur un Macintosh, votre dossier d’utilisateur contient d&eacute;j&agrave; un dossier
intitul&eacute; Sites. N’utilisez pas le dossier Sites en tant que dossier local ; le
dossier Sites correspond au dossier de stockage des pages que vous
souhaitez diffuser lors de l’utilisation du Macintosh comme serveur Web.
2.
Recherchez le dossier cafe_townsend sur le disque 2 de Studio 8 ou
t&eacute;l&eacute;chargez-le depuis www.macromedia.com/go/st_documentation_fr.
3.
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine
(principal) de votre site Dreamweaver.
A S A VOI R . . .
Pr&eacute;sentation des dossiers locaux et distants &laquo; racines &raquo; Le dossier racine local de votre site
Dreamweaver est souvent le dossier principal, ou le dossier de niveau sup&eacute;rieur, de votre site Web.
Il correspond g&eacute;n&eacute;ralement &agrave; un dossier identique sur le site distant (serveur Web). En outre, le
dossier racine d&eacute;finit g&eacute;n&eacute;ralement la premi&egrave;re partie de l’URL de votre site Web, celle qui pr&eacute;c&egrave;de
le nom de domaine. Par exemple, si votre dossier racine local se nomme monsiteweb et que vous
avez d&eacute;fini un dossier racine identique sur le site distant, l’URL de votre site Web pourrait &ecirc;tre de
type &laquo; http://www.yahoo.com/monsiteweb &raquo;.
Dans certains cas, le dossier racine local peut ne pas avoir un nom absolument identique &agrave; celui se
trouvant sur le site distant. Par exemple, si vous &ecirc;tes le propri&eacute;taire du nom de domaine
www.monsiteweb.com, avec un r&eacute;pertoire racine distant public_html, votre dossier racine local pourrait
quand m&ecirc;me s’appeler monsiteweb. Les fichiers dans les r&eacute;pertoires racines locaux et distants seraient
identiques; il n’y a que les noms de dossiers (public_html sur le site distant et monsiteweb sur l’ordinateur
local) qui seraient diff&eacute;rents.
162 Didacticiel : Configuration de votre site et des fichiers de projet
D&eacute;finissez un dossier local
Vous devez d&eacute;finir un dossier local Dreamweaver pour chaque site Web
cr&eacute;&eacute;. Ce dossier local est le dossier du disque dur dans lequel seront
stock&eacute;es les copies de travail des fichiers du site. Ce dossier local est
indispensable au bon fonctionnement de certaines fonctions de
Dreamweaver.
La d&eacute;finition d’un dossier local vous permet &eacute;galement de g&eacute;rer vos fichiers
et de les transf&eacute;rer vers ou depuis le serveur Web &agrave; l’aide de m&eacute;thodes
diff&eacute;rentes de transfert de fichiers.
Vous allez &agrave; pr&eacute;sent d&eacute;finir comme dossier local le dossier cafe_townsend
que vous avez copi&eacute; dans le dossier local_sites.
1.
Lancez Dreamweaver, puis s&eacute;lectionnez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2.
Cliquez sur le bouton Nouveau, puis s&eacute;lectionnez Site.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3.
Si l’assistant (onglet El&eacute;mentaire) s’affiche, cliquez sur l’onglet Avanc&eacute;
et s&eacute;lectionnez Infos locales dans la liste Cat&eacute;gorie (s&eacute;lection par d&eacute;faut).
4.
Dans la zone de texte Nom du site, tapez Cafe Townsend en tant que
nom du site.
5.
Dans la zone de texte Dossier racine local, indiquez le dossier
cafe_townsend que vous avez copi&eacute; dans le dossier local_sites selon les
instructions de la section pr&eacute;c&eacute;dente.
Vous pouvez cliquer sur l’ic&ocirc;ne du dossier pour rechercher le dossier et
le s&eacute;lectionner, ou entrer son chemin d’acc&egrave;s dans la zone de texte
Dossier racine local.
D&eacute;finissez un dossier local 163
6.
Dans la zone de texte Dossier des images par d&eacute;faut, indiquez le dossier
d’images qui figure d&eacute;j&agrave; dans le dossier cafe_townsend.
Vous pouvez cliquer sur l’ic&ocirc;ne du dossier pour rechercher le dossier et
le s&eacute;lectionner, ou entrer son chemin d’acc&egrave;s dans la zone de texte
Dossier des images par d&eacute;faut.
La bo&icirc;te de dialogue D&eacute;finition d’un site s’affiche comme suit :
7.
Cliquez sur OK.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche et pr&eacute;sente votre nouveau
site.
8.
Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites.
Le panneau Fichiers affiche maintenant le nouveau dossier racine local du
site actuel. La liste de fichiers du panneau Fichiers tiendra lieu de
gestionnaire de fichiers et vous permettra de copier, de coller, de supprimer,
de d&eacute;placer et d’ouvrir des fichiers tout comme vous le feriez sur le Bureau
de votre ordinateur.
164 Didacticiel : Configuration de votre site et des fichiers de projet
Pour plus d’informations sur le fonctionnement du panneau Fichiers, voir
Panneau Fichiers, page 38.
Un dossier racine local est d&eacute;sormais d&eacute;fini pour votre site. C’est dans le
dossier racine local de votre ordinateur local que vous conservez les copies
de travail de vos pages Web. Plus tard, si vous d&eacute;sirez publier vos pages et
les rendre disponibles au grand public, il vous faudra d&eacute;finir un dossier
distant, c’est-&agrave;-dire un emplacement sur un ordinateur distant qui fait
tourner un serveur Web et qui contiendra des copies des pages publi&eacute;es de
vos fichiers locaux.
Vous pouvez suivre les autres didacticiels de ce guide pour cr&eacute;er l’exemple
du site Cafe Townsend ou choisir de travailler sur vos propres pages. Apr&egrave;s
avoir cr&eacute;&eacute; et &eacute;dit&eacute; vos pages, d&eacute;finissez un dossier distant sur un serveur et
publiez vos pages. Pour plus d’informations, consultez le Chapitre 13,
Didacticiel : Publication de votre site.
D&eacute;finissez un dossier local 165
166 Didacticiel : Configuration de votre site et des fichiers de projet
CHAPITRE 5
Didacticiel : Cr&eacute;ation de
maquettes de page
5
Le pr&eacute;sent didacticiel vous guide dans les t&acirc;ches de base li&eacute;es &agrave; la cr&eacute;ation
d’une maquette de page Web &agrave; l’aide de Macromedia Fireworks 8. Les
maquettes de page sont g&eacute;n&eacute;ralement utilis&eacute;es pour pr&eacute;senter des projets de
pages &agrave; des coll&egrave;gues ou des clients. Une fois un projet approuv&eacute;, les
concepteurs Web peuvent utiliser la maquette comme &eacute;bauche pour cr&eacute;er
leur page.
Dans le cadre de ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Examen de votre t&acirc;che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Cr&eacute;ation et sauvegarde d’un nouveau document . . . . . . . . . . . . . 169
Importation et placement d’images . . . . . . . . . . . . . . . . . . . . . . . . . 170
Cr&eacute;ation d’une image composite de la zone de contenu. . . . . . . 172
Placement de texte et d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Exportation de l’image pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . 186
Examen de votre t&acirc;che
Caf&eacute; Townsend, un restaurant fictif, a engag&eacute; votre &eacute;quipe pour concevoir
et cr&eacute;er son site Web. Lors des &eacute;tapes initiales de planification du projet,
des membres de votre &eacute;quipe ont rencontr&eacute; des repr&eacute;sentants de Caf&eacute;
Townsend afin de d&eacute;gager des id&eacute;es pour le site Web. Durant la r&eacute;union,
votre &eacute;quipe a &eacute;bauch&eacute; des projets possibles sur des serviettes de table (la
r&eacute;union s’est tenue dans le restaurant Caf&eacute; Townsend).
167
De retour au bureau, l’&eacute;quipe vous a inform&eacute; que le client avait
particuli&egrave;rement appr&eacute;ci&eacute; deux projets, esquiss&eacute;s sur les serviettes de table
suivantes :
168 Didacticiel : Cr&eacute;ation de maquettes de page
La t&acirc;che qui vous a &eacute;t&eacute; attribu&eacute;e est de cr&eacute;er une maquette de page &agrave; partir
du second projet, afin de la pr&eacute;senter au client. La maquette ressemble &agrave;
une v&eacute;ritable page Web, mais n’en a pas les fonctionnalit&eacute;s.
Cr&eacute;ation et sauvegarde d’un
nouveau document
Apr&egrave;s avoir pr&eacute;visualis&eacute; la maquette termin&eacute;e, vous &ecirc;tes pr&ecirc;t &agrave; entamer
l’&eacute;laboration du projet.
Vous devez d&eacute;finir un dossier de travail avant de commencer, si ce n’est pas
d&eacute;j&agrave; fait. Pour plus d’informations, consultez la section Configuration de
votre site et de vos fichiers de projet.
1.
Dans Fireworks, cliquez sur Fichier &gt; Nouveau.
2.
Dans la bo&icirc;te de dialogue Nouveau document, entrez 700 pour la valeur
de largeur et 600 pour la valeur de hauteur. Assurez-vous que les deux
mesures sont exprim&eacute;es en pixels.
3.
D&eacute;finissez la valeur de Couleur du fond sur Personnalis&eacute;e, puis
s&eacute;lectionnez la couleur noire dans le menu des couleurs personnalis&eacute;es.
La bo&icirc;te de dialogue Nouveau document doit s’afficher comme suit :
Cr&eacute;ation et sauvegarde d’un nouveau document 169
4.
Cliquez sur OK pour cr&eacute;er le document.
Une fen&ecirc;tre Document, ayant comme titre Sans Titre-1.png
(Windows) ou Sans Titre-1 (Macintosh), s’affiche.
Si la fen&ecirc;tre Document n’est pas agrandie, c’est-&agrave;-dire si elle n’occupe
pas toute la surface centrale de l’&eacute;cran, agrandissez-la en cliquant sur le
bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh)
dans le haut de la fen&ecirc;tre Document. Cette op&eacute;ration agrandit
consid&eacute;rablement votre espace de travail.
5.
Cliquez sur Fichier &gt; Enregistrer, puis acc&eacute;dez au dossier suivant de
votre disque dur :
local_sites/cafe_townsend/fireworks_assets/
6.
Nommez le fichier homepage-mockup.
R E MA R Q UE
Sur Macintosh, s&eacute;lectionnez l’option Ajouter l’extension du nom de fichier,
si ce n’est pas d&eacute;j&agrave; fait.
7.
Cliquez sur Enregistrer.
La barre de titre affiche le nouveau nom de fichier avec une
extension .png. PNG est le format de fichier natif de Fireworks. Le
fichier PNG est votre fichier source. Il s’agit de l’emplacement o&ugrave; vous
effectuez tout votre travail dans Fireworks. A la fin de ce didacticiel,
vous apprendrez &agrave; exporter votre document vers un autre format
compatible avec le Web.
Importation et placement
d’images
Ensuite, importez des images et positionnez-les sur le document Fireworks
afin de voir comment elles sont dispos&eacute;es sur la page Web finale.
170 Didacticiel : Cr&eacute;ation de maquettes de page
Importation du graphique de banni&egrave;re
Le graphique de banni&egrave;re est une maquette de la banni&egrave;re que vous allez
utiliser sur la page r&eacute;elle. Vous allez produire la version finale de la banni&egrave;re
dans le cadre du Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page, page 223.
1.
Cliquez sur Fichier &gt; Importer, puis acc&eacute;dez au dossier suivant de votre
disque dur :
local_sites/cafe_townsend/fireworks_assets/
2.
S&eacute;lectionnez le fichier banner-mockup.jpg, puis cliquez sur Ouvrir.
Un pointeur d’insertion s’affiche, indiquant la position du coin
sup&eacute;rieur gauche du graphique.
3.
Alignez le pointeur sur le coin sup&eacute;rieur gauche du document, puis
cliquez pour ins&eacute;rer le graphique de banni&egrave;re.
Le graphique de banni&egrave;re s’affiche entour&eacute; d’un cadre bleu indiquant
qu’il s’agit de l’objet actuellement s&eacute;lectionn&eacute;.
4.
Utilisez les touches fl&eacute;ch&eacute;es du clavier pour aligner pr&eacute;cis&eacute;ment le
graphique de banni&egrave;re sur le haut du document.
La banni&egrave;re est correctement align&eacute;e si les valeurs de ses coordonn&eacute;es X
et Y dans l’Inspecteur des propri&eacute;t&eacute;s sont &eacute;gales &agrave; 0. L’Inspecteur des
propri&eacute;t&eacute;s se trouve au bas de la fen&ecirc;tre Document. S’il n’est pas visible,
cliquez sur Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s.
5.
Cliquez n’importe o&ugrave; en dehors du graphique de banni&egrave;re s&eacute;lectionn&eacute;
pour le d&eacute;s&eacute;lectionner.
6.
Enregistrez votre travail.
Importation et placement d’images
171
Importez l’image d’espace r&eacute;serv&eacute; du
diaporama
Ensuite, importez une image d’espace r&eacute;serv&eacute; repr&eacute;sentant la taille et la
position d’un diaporama photo de type Flash qui figurera sur la page Web
finale. Les images d’espace r&eacute;serv&eacute; sont pr&eacute;cieuses pour repr&eacute;senter l’aspect
d’un &eacute;l&eacute;ment de composition sans devoir g&eacute;rer la grande taille de fichier ni
devoir cr&eacute;er l’&eacute;l&eacute;ment complexe sous sa forme finale.
1.
Cliquez sur Fichier &gt; Importer, puis acc&eacute;dez au dossier suivant de votre
disque dur :
local_sites/cafe_townsend/fireworks_assets/
2.
Double-cliquez sur slideshow-placeholder.jpg.
3.
Positionnez le pointeur d’insertion environ 6 pixels sous le graphique de
banni&egrave;re import&eacute; pr&eacute;c&eacute;demment, puis cliquez pour ins&eacute;rer l’espace
r&eacute;serv&eacute; du diaporama.
4.
Tandis que l’image de l’espace r&eacute;serv&eacute; est s&eacute;lectionn&eacute;e, utilisez les
touches fl&eacute;ch&eacute;es du clavier pour ajuster sa position sur le document.
L’image d’espace r&eacute;serv&eacute; est correctement align&eacute;e si les valeurs de ses
coordonn&eacute;es X et Y dans l’Inspecteur des propri&eacute;t&eacute;s sont &eacute;gales
respectivement &agrave; 0 et &agrave; 98.
5.
Cliquez n’importe o&ugrave; en dehors de l’image s&eacute;lectionn&eacute;e pour la
d&eacute;s&eacute;lectionner.
6.
Enregistrez votre travail.
Cr&eacute;ation d’une image composite
de la zone de contenu
Vous &ecirc;tes d&eacute;sormais pr&ecirc;t &agrave; cr&eacute;er une maquette de la zone de contenu de la
page Web. Vous allez tracer des objets vectoriels Fireworks afin de
repr&eacute;senter graphiquement les zones de la page Web.
172 Didacticiel : Cr&eacute;ation de maquettes de page
Avant de commencer, examinez l’esquisse sur la serviette de table afin de
vous rafra&icirc;chir la m&eacute;moire concernant le projet.
Cr&eacute;ation et modification d’un rectangle
arrondi
Le premier objet &agrave; cr&eacute;er est un rectangle arrondi repr&eacute;sentant les barres
sup&eacute;rieure et inf&eacute;rieure de la zone de contenu. Vous d&eacute;cidez de cr&eacute;er un
grand rectangle arrondi d&eacute;finissant l’&eacute;tendue totale de la zone de contenu.
1.
Dans la section Vecteur du panneau Outils, s&eacute;lectionnez l’outil
Rectangle arrondi.
Cr&eacute;ation d’une image composite de la zone de contenu 173
L’outil Rectangle arrondi est un outil de forme. Cliquez sur l’ic&ocirc;ne
d’extension sur l’ic&ocirc;ne de forme pour la s&eacute;lectionner.
2.
Dans la fen&ecirc;tre Document, positionnez le pointeur en forme de croix
sur le document, puis faites-le glisser vers le bas et vers la droite afin de
cr&eacute;er la forme.
Vous pouvez tracer le rectangle arrondi n’importe o&ugrave; sur le document.
A ce stade, ne vous pr&eacute;occupez pas de la taille et de la position de la
forme ; vous pourrez la redimensionner et la positionner plus tard au
cours de la proc&eacute;dure.
174 Didacticiel : Cr&eacute;ation de maquettes de page
3.
Lorsque vous rel&acirc;chez le bouton de la souris, un rectangle arrondi
s’affiche, s&eacute;lectionn&eacute;, dans la zone que vous avez d&eacute;finie.
Vous pouvez voir qu’un objet est s&eacute;lectionn&eacute; gr&acirc;ce &agrave; des points bleus
qui s’affichent dans les coins. La plupart des objets poss&egrave;dent &eacute;galement
une surbrillance bleue autour de leurs bords ext&eacute;rieurs, mais les
rectangles sont des exceptions. Une forme de rectangle arrondi
comporte &eacute;galement des points de contr&ocirc;le qui s’affichent sous la forme
de losanges jaunes. Ces points de contr&ocirc;le vous permettent de modifier
la taille et l’arrondi des angles du rectangle.
4.
Tandis que le rectangle arrondi est s&eacute;lectionn&eacute;, dans l’Inspecteur des
propri&eacute;t&eacute;s, activez la case Couleur de remplissage &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du pot
de peinture.
La fen&ecirc;tre contextuelle Couleur de remplissage s’affiche.
5.
Entrez 6B1101 dans la zone de texte situ&eacute;e dans le haut de la fen&ecirc;tre,
puis appuyez sur Entr&eacute;e.
6.
Activez la case Couleur de trait &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du crayon, puis cliquez
sur le bouton Transparent dans le haut de la fen&ecirc;tre contextuelle
Couleur de trait (il n’est pas s&eacute;lectionn&eacute; par d&eacute;faut).
D&eacute;sormais, le rectangle arrondi pr&eacute;sente un remplissage rouge fonc&eacute; et
aucun trait.
Vous devez ensuite redimensionner et positionner le rectangle arrondi.
Vous d&eacute;cidez de le faire pr&eacute;cis&eacute;ment &agrave; l’aide de l’Inspecteur des propri&eacute;t&eacute;s.
Cr&eacute;ation d’une image composite de la zone de contenu 175
1.
Tandis que le rectangle arrondi est s&eacute;lectionn&eacute;, dans l’Inspecteur des
propri&eacute;t&eacute;s, entrez 700 dans la case de largeur (L), 340 dans la case de
hauteur (H), 0 pour la position X, 255 pour la position Y, puis appuyez
sur Entr&eacute;e pour appliquer la derni&egrave;re valeur.
R E MA R Q UE
La position Y n’est qu’une approximation. Vous pouvez &eacute;galement utiliser les
touches fl&eacute;ch&eacute;es pour d&eacute;placer le rectangle arrondi vers le haut ou vers le
bas, jusqu’&agrave; ce qu’il se trouve environ 6 pixels sous l’image de l’espace
r&eacute;serv&eacute; du diaporama.
Une fois le rectangle arrondi redimensionn&eacute;, vous constatez que les bords
arrondis apparaissent distordus. Vous souhaitez les ajuster afin de cr&eacute;er les
angles arrondis de fa&ccedil;on appropri&eacute;e.
Le rectangle arrondi est une forme automatique de Fireworks. Vous pouvez
donc utiliser le panneau Propri&eacute;t&eacute;s de forme automatique pour ajuster
l’arrondi des angles.
1.
Tandis que le rectangle arrondi est s&eacute;lectionn&eacute;, ouvrez le panneau
Propri&eacute;t&eacute;s de forme automatique en cliquant sur Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s de
forme automatique (pas sur Fen&ecirc;tre &gt; Formes automatiques).
2.
Entrez 20 pour l’arrondi du premier angle, puis appuyez sur Entr&eacute;e.
Comme les valeurs sont verrouill&eacute;es, la modification de la valeur d’un
arrondi entra&icirc;ne la modification de toutes les autres valeurs.
176 Didacticiel : Cr&eacute;ation de maquettes de page
En m&ecirc;me temps, Fireworks ajuste les angles de la forme sur le
document.
3.
Fermez le panneau Propri&eacute;t&eacute;s de forme automatique, puis cliquez en
dehors du document pour d&eacute;s&eacute;lectionner le rectangle arrondi.
4.
Enregistrez votre travail.
Cr&eacute;ation d’une zone de barre lat&eacute;rale de
navigation
Ensuite, vous d&eacute;cidez de cr&eacute;er un rectangle afin de d&eacute;finir la barre lat&eacute;rale
de navigation pour la page Web.
1.
Dans la section Vecteur du panneau Outils, s&eacute;lectionnez l’outil
Rectangle.
2.
Positionnez le pointeur en forme de croix dans le rectangle arrondi trac&eacute;
pr&eacute;c&eacute;demment, puis faites-le glisser vers le bas et vers la droite afin de
cr&eacute;er un rectangle vertical pour la barre lat&eacute;rale.
Vous pouvez tracer le rectangle n’importe o&ugrave; sur le document. Vous le
redimensionnerez et le positionnerez ult&eacute;rieurement.
Lorsque vous rel&acirc;chez le bouton de la souris, un rectangle s’affiche,
s&eacute;lectionn&eacute;, dans la zone que vous avez d&eacute;finie.
Vous devez ensuite attribuer au rectangle un remplissage orange.
1.
Tandis que le rectangle est s&eacute;lectionn&eacute;, dans l’Inspecteur des propri&eacute;t&eacute;s,
activez la case Couleur de remplissage &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du pot de
peinture.
La fen&ecirc;tre contextuelle Couleur de remplissage s’affiche.
2.
Entrez A3210A dans la zone de texte situ&eacute;e dans le haut de la fen&ecirc;tre,
puis appuyez sur Entr&eacute;e.
3.
Activez la case Couleur de trait &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du crayon, puis cliquez
sur le bouton Transparent dans le haut de la fen&ecirc;tre contextuelle
Couleur de trait.
D&eacute;sormais, le rectangle pr&eacute;sente un remplissage orange et aucun trait.
Cr&eacute;ation d’une image composite de la zone de contenu 177
Vous devez ensuite redimensionner et positionner le rectangle. Vous
d&eacute;cidez de le faire pr&eacute;cis&eacute;ment &agrave; l’aide de l’Inspecteur des propri&eacute;t&eacute;s.
1.
Tandis que le rectangle est s&eacute;lectionn&eacute;, dans l’Inspecteur des propri&eacute;t&eacute;s,
entrez 140 dans la case de largeur (L), 295 dans la case de hauteur (H),
0 pour la position X, 278 pour la position Y, puis appuyez sur Entr&eacute;e
pour appliquer la derni&egrave;re valeur.
R EM A R QU E
La position Y n’est qu’une approximation. Vous pouvez &eacute;galement utiliser les
touches fl&eacute;ch&eacute;es pour d&eacute;placer le rectangle vers le haut ou vers le bas,
jusqu’&agrave; ce qu’il soit centr&eacute; verticalement par rapport au rectangle arrondi
trac&eacute; pr&eacute;c&eacute;demment. La diff&eacute;rence de hauteur entre les deux objets est de
45 pixels, de sorte que le haut du rectangle orange doit se trouver 22 ou
23 pixels sous le haut du rectangle arrondi rouge fonc&eacute;.
2.
Enregistrez votre travail.
Cr&eacute;ation de la zone de copie
Enfin, vous devez cr&eacute;er un rectangle blanc cass&eacute; pour repr&eacute;senter la zone
dans laquelle s’affichera le texte de la page Web.
1.
Dans la section Vecteur du panneau Outils, s&eacute;lectionnez l’outil
Rectangle.
2.
Positionnez le pointeur en forme de croix dans le rectangle arrondi trac&eacute;
pr&eacute;c&eacute;demment, puis faites-le glisser vers le bas et vers la droite afin de
cr&eacute;er un rectangle horizontal pour la zone de copie.
Vous pouvez tracer le rectangle n’importe o&ugrave; sur le document. Vous le
redimensionnerez et le positionnerez ult&eacute;rieurement.
Lorsque vous rel&acirc;chez le bouton de la souris, un rectangle s’affiche,
s&eacute;lectionn&eacute;, dans la zone que vous avez d&eacute;finie.
Vous devez &agrave; pr&eacute;sent attribuer au rectangle un remplissage blanc cass&eacute;.
1.
Tandis que le rectangle est s&eacute;lectionn&eacute;, dans l’Inspecteur des propri&eacute;t&eacute;s,
activez la case Couleur de remplissage &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du pot de
peinture.
La fen&ecirc;tre contextuelle Couleur de remplissage s’affiche.
2.
Entrez F7EEDF dans la zone de texte situ&eacute;e dans le haut de la fen&ecirc;tre,
puis appuyez sur Entr&eacute;e.
178 Didacticiel : Cr&eacute;ation de maquettes de page
3.
Activez la case Couleur de trait &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du crayon, puis cliquez
sur le bouton Transparent dans le haut de la fen&ecirc;tre contextuelle
Couleur de trait.
D&eacute;sormais, le rectangle pr&eacute;sente un remplissage blanc cass&eacute; et aucun trait.
Vous devez ensuite redimensionner et positionner le rectangle arrondi.
Vous d&eacute;cidez de le faire pr&eacute;cis&eacute;ment &agrave; l’aide de l’Inspecteur des propri&eacute;t&eacute;s.
1.
Tandis que le rectangle est s&eacute;lectionn&eacute;, dans l’Inspecteur des propri&eacute;t&eacute;s,
entrez 560 dans la case de largeur (L), 295 dans la case de hauteur (H),
140 pour la position X, 278 pour la position Y, puis appuyez sur Entr&eacute;e
pour appliquer la derni&egrave;re valeur.
R EMA R Q U E
La position Y doit &ecirc;tre identique &agrave; la position Y du rectangle de la barre
lat&eacute;rale.
Placement de texte et d’images
Apr&egrave;s avoir cr&eacute;&eacute; la maquette de la zone de contenu, vous d&eacute;cidez de cr&eacute;er
des zones de texte pour repr&eacute;senter le contenu et les liens de navigation,
puis d’importer des images afin de repr&eacute;senter les autres fonctions de la
zone de contenu.
Placement du texte d’espace r&eacute;serv&eacute; pour
les liens
Le premier &eacute;l&eacute;ment &agrave; cr&eacute;er est le texte repr&eacute;sentant les liens de navigation.
1.
Dans la section Vecteur du panneau Outils, s&eacute;lectionnez l’outil Texte,
puis d&eacute;placez le pointeur sur la fen&ecirc;tre Document.
Placement de texte et d’images 179
Le pointeur prend l’aspect d’un rayon laser et l’Inspecteur des
propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s du texte.
Police
Taille
Echelle
horizontale
2.
Interlignage
Couleur de
remplissage
Boutons de style
Boutons d’alignement
Dans l’Inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les propri&eacute;t&eacute;s d’outil
suivantes :
■
Dans le menu contextuel Police, cliquez sur TrebuchetMS.
R E MA R Q UE
Si vous ne disposez pas de la police TrebuchetMS, cliquez sur la police
Verdana ou une police similaire &agrave; la place.
■
Cliquez sur le bouton Gras.
■
Entrez 14 pour la taille de la police.
■
S&eacute;lectionnez Anticr&eacute;nelage liss&eacute; comme niveau d’anticr&eacute;nelage.
■
■
■
3.
Cliquez sur l’ic&ocirc;ne Couleur &agrave; c&ocirc;t&eacute; du menu de la taille de police,
puis s&eacute;lectionnez la nuance blanche.
Cliquez sur le bouton Alignement &agrave; gauche.
Entrez 200 comme pourcentage d’interlignage &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne de
fl&egrave;che verticale &agrave; deux pointes.
Avec le pointeur en forme de rayon laser, cliquez une fois pr&egrave;s du coin
sup&eacute;rieur gauche du rectangle de barre lat&eacute;rale.
Cette op&eacute;ration cr&eacute;e un bloc de texte vide.
4.
Entrez Cuisine dans le bloc de texte, puis appuyez sur Entr&eacute;e pour
entamer une nouvelle ligne.
La largeur du bloc de texte augmente &agrave; mesure que vous entrez du
texte.
180 Didacticiel : Cr&eacute;ation de maquettes de page
5.
Entrez les &eacute;l&eacute;ments suivants, en appuyant chaque fois sur Entr&eacute;e pour
entamer une nouvelle ligne :
■
Chef Ipsum
■
Articles
■
Special Events
■
Location
■
Menu
■
Contact us
Une fois cette &eacute;tape termin&eacute;e, vous disposez d’un bloc de texte
repr&eacute;sentant les liens de navigation.
6.
Dans le panneau Outils, cliquez sur l’outil Pointeur afin de
d&eacute;s&eacute;lectionner la zone de texte.
7.
Enregistrez votre travail.
Placement d’une image d’espace r&eacute;serv&eacute;
pour la vid&eacute;o
Ensuite, vous ajoutez une image d’espace r&eacute;serv&eacute; dans la zone de contenu
principale afin de repr&eacute;senter une vid&eacute;o qui s’affichera sur la page Web
finale. Voir Examen de votre t&acirc;che, page 167.
1.
Cliquez sur Fichier &gt; Importer, puis acc&eacute;dez au dossier suivant de votre
disque dur :
local_sites/cafe_townsend/fireworks_assets/
2.
S&eacute;lectionnez video-placeholder.jpg, puis cliquez sur Ouvrir.
Placement de texte et d’images
181
3.
Positionnez le pointeur d’insertion environ 6 pixels en dessous et &agrave;
droite du coin sup&eacute;rieur gauche de la zone de copie blanc cass&eacute;, puis
cliquez pour ins&eacute;rer l’image.
4.
Tandis que l’image de l’espace r&eacute;serv&eacute; est s&eacute;lectionn&eacute;e, utilisez les
touches fl&eacute;ch&eacute;es du clavier pour ajuster sa position.
5.
Cliquez n’importe o&ugrave; en dehors de l’image s&eacute;lectionn&eacute;e pour la
d&eacute;s&eacute;lectionner.
6.
Enregistrez votre travail.
Placement d’une image d’espace r&eacute;serv&eacute;
pour l’&eacute;l&eacute;ment pr&eacute;sent&eacute;
Ensuite, vous ajoutez une image d’espace r&eacute;serv&eacute; dans la zone de contenu
principale afin de repr&eacute;senter un &eacute;l&eacute;ment de menu pr&eacute;sent&eacute; &agrave; afficher sur la
page Web finale. Voir Examen de votre t&acirc;che, page 167.
1.
Cliquez sur Fichier &gt; Importer, puis acc&eacute;dez au dossier suivant de votre
disque dur :
local_sites/cafe_townsend/fireworks_assets/
2.
S&eacute;lectionnez feature-placeholder.jpg, puis cliquez sur Ouvrir.
3.
Positionnez le pointeur d’insertion environ 6 pixels sous l’image
d’espace r&eacute;serv&eacute; de la vid&eacute;o, puis cliquez pour ins&eacute;rer l’image.
182 Didacticiel : Cr&eacute;ation de maquettes de page
4.
Tandis que l’image de l’espace r&eacute;serv&eacute; est s&eacute;lectionn&eacute;e, utilisez les
touches fl&eacute;ch&eacute;es du clavier pour ajuster sa position.
Vous souhaitez positionner l’image de fa&ccedil;on &agrave; ce que son bord gauche
soit align&eacute; sur le bord gauche de l’image d’espace r&eacute;serv&eacute; de la vid&eacute;o.
5.
Cliquez n’importe o&ugrave; en dehors de l’image s&eacute;lectionn&eacute;e pour la
d&eacute;s&eacute;lectionner.
6.
Enregistrez votre travail.
Ajout d’un texte d’espace r&eacute;serv&eacute; pour la
copie de page
Enfin, vous allez tracer une zone de texte vide et y importer du texte
d’espace r&eacute;serv&eacute; afin de repr&eacute;senter la copie de page.
1.
Dans la section Vecteur du panneau Outils, cliquez sur l’outil Texte.
2.
Dans l’Inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les propri&eacute;t&eacute;s d’outil
suivantes :
■
Dans le menu contextuel Police, cliquez sur Verdana.
■
Entrez 11 pour la taille de la police.
■
Assurez-vous que le bouton Gras n’est pas s&eacute;lectionn&eacute;.
■
Cliquez sur la zone Couleur, entrez 240E0A dans la zone de texte
situ&eacute;e dans le haut de la fen&ecirc;tre Couleur, puis appuyez sur Entr&eacute;e.
Placement de texte et d’images 183
■
3.
Entrez 200 comme pourcentage d’interlignage &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne de
fl&egrave;che verticale &agrave; deux pointes.
Positionnez le pointeur en forme de rayon laser environ &agrave; 6 pixels du
coin sup&eacute;rieur droit de l’image d’espace r&eacute;serv&eacute; de la vid&eacute;o, puis faitesle glisser vers le bas et vers la droite pour tracer une zone de texte.
Assurez-vous qu’il y a une marge d’environ 6 pixels tout autour.
4.
Entrez ou collez environ deux paragraphes de texte d’espace r&eacute;serv&eacute; dans
la zone de texte.
Comme le texte repr&eacute;sente l’emplacement o&ugrave; le texte doit &ecirc;tre ins&eacute;r&eacute;
pour la page Web, il ne doit pas n&eacute;cessairement avoir de sens. Vous
pouvez coller le texte du fichier loremipsum.txt situ&eacute; dans le dossier
suivant :
local_sites/cafe_townsend/fireworks_assets/
A pr&eacute;sent que vous avez cr&eacute;&eacute; les blocs de texte de base, vous d&eacute;cidez de
modifier une partie du texte de fa&ccedil;on &agrave; ce que les paragraphes commencent
par du texte en surbrillance et qu’il y ait du texte simulant des liens &agrave; la fin
de chacun d’eux.
1.
Dans la section Vecteur du panneau Outils, cliquez sur l’outil Texte,
puis s&eacute;lectionnez les trois premiers mots du premier paragraphe.
2.
Dans l’Inspecteur des propri&eacute;t&eacute;s, ex&eacute;cutez les actions suivantes :
■
Cliquez sur le bouton Gras.
184 Didacticiel : Cr&eacute;ation de maquettes de page
■
3.
Activez la case Couleur, entrez 6B1101 dans la zone de texte situ&eacute;e
dans le haut de la fen&ecirc;tre Couleur, puis appuyez sur Entr&eacute;e.
R&eacute;p&eacute;tez cette proc&eacute;dure pour les trois premiers mots du second
paragraphe.
Vous ajoutez &agrave; pr&eacute;sent une ligne de texte &agrave; la fin de chaque paragraphe et
faites en sorte qu’elle ressemble &agrave; un lien Web.
1.
Cliquez sur le pointeur en forme de rayon laser &agrave; la fin du premier
paragraphe, puis appuyez sur la barre d’espace du clavier.
2.
Entrez En savoir plus, puis s&eacute;lectionnez le texte que vous venez d’entrer.
3.
Dans l’Inspecteur des propri&eacute;t&eacute;s, ex&eacute;cutez les actions suivantes :
■
■
Cliquez sur le bouton Soulign&eacute;.
Activez la case Couleur, entrez 32596E dans la zone de texte situ&eacute;e
dans le haut de la fen&ecirc;tre Couleur, puis appuyez sur Entr&eacute;e.
4.
Cliquez sur le pointeur en forme de rayon laser &agrave; la fin du second
paragraphe, puis appuyez sur la barre d’espace du clavier.
5.
Entrez Faire une r&eacute;servation, puis s&eacute;lectionnez le texte que vous venez
d’entrer.
6.
Dans l’Inspecteur des propri&eacute;t&eacute;s, ex&eacute;cutez les actions suivantes :
■
■
Cliquez sur le bouton Soulign&eacute;.
Activez la case Couleur, entrez 32596E dans la zone de texte situ&eacute;e
dans le haut de la fen&ecirc;tre Couleur, puis appuyez sur Entr&eacute;e.
7.
Dans le panneau Outils, cliquez sur l’outil Pointeur afin de
d&eacute;s&eacute;lectionner le texte.
8.
Enregistrez votre travail.
Placement de texte et d’images 185
Exportation de l’image pour le
Web
La maquette de la page d’accueil de Caf&eacute; Townsend que vous avez cr&eacute;&eacute;e
doit ressembler &agrave; ceci :
Ensuite, vous d&eacute;cidez d’exporter le fichier PNG au format JPEG afin de
pouvoir l’afficher sur un site Web interne ou dans un message &eacute;lectronique
adress&eacute; &agrave; vos coll&egrave;gues ou au client.
186 Didacticiel : Cr&eacute;ation de maquettes de page
1.
Cliquez sur Fichier &gt; Aper&ccedil;u de l’image.
2.
Dans le menu contextuel Format, cliquez sur JPEG.
3.
Dans la zone de texte Qualit&eacute;, entrez 90 ou utilisez le curseur Qualit&eacute;.
Comme cette image ne sera pas utilis&eacute;e sur une page Web accessible au
public, vous ne devez pas vous pr&eacute;occuper de la taille du fichier ni du
temps de t&eacute;l&eacute;chargement. Autrement, un param&egrave;tre de qualit&eacute; 90
pourrait &ecirc;tre trop &eacute;lev&eacute;.
Dans la zone situ&eacute;e au-dessus de l’image d’aper&ccedil;u, vous pouvez voir la
mani&egrave;re dont vos param&egrave;tres affectent la taille de fichier et le temps de
t&eacute;l&eacute;chargement.
4.
Cliquez sur Exporter.
La bo&icirc;te de dialogue Exporter s’affiche.
5.
Ouvrez le dossier suivant :
local_sites/cafe_townsend/fireworks_assets/
6.
Cliquez sur Exporter.
Fireworks cr&eacute;e une version JPEG de votre maquette de page dans le
dossier fireworks_assets. Votre fichier PNG existe encore et vous devez
l’utiliser pour modifier la maquette suite &agrave; un commentaire. Apr&egrave;s
avoir apport&eacute; les modifications n&eacute;cessaires, exportez-le de nouveau.
Exportation de l’image pour le Web 187
Dans le cadre de ce didacticiel, vous avez cr&eacute;&eacute; une maquette de page. Vous
avez appris &agrave; cr&eacute;er et enregistrer des fichiers Fireworks, &agrave; importer et placer
des images, &agrave; tracer des formes vectorielles, &agrave; placer du texte et des images
et &agrave; exporter des images.
Pour plus d’informations sur certaines des fonctions mentionn&eacute;es dans ce
didacticiel et sur d’autres fonctions de Fireworks, voir le manuel Utilisation
de Fireworks.
188 Didacticiel : Cr&eacute;ation de maquettes de page
CHAPITRE 6
Didacticiel : Cr&eacute;ation d’une mise en
forme de page bas&eacute;e sur un tableau
6
Ce didacticiel indique comment cr&eacute;er dans Macromedia Dreamweaver 8
une mise en forme de page bas&eacute;e sur un tableau. La mise en forme
d&eacute;termine la mani&egrave;re dont votre page s’affichera dans le navigateur, par
exemple o&ugrave; seront plac&eacute;s les menus, les images et le contenu de
Macromedia Flash.
Les tableaux sont tr&egrave;s utiles pour pr&eacute;senter des donn&eacute;es tabulaires et mettre
en forme du texte et des images dans une page HTML. Vous pouvez
utiliser des tableaux pour cr&eacute;er une mise en forme de mani&egrave;re rapide et
ais&eacute;e. Dans ce didacticiel, vous allez cr&eacute;er plusieurs tableaux dans un
nouveau document Dreamweaver. Les lignes et les cellules des tableaux
font office de &laquo; conteneurs &raquo; pour le contenu que vous ajouterez plus tard.
Dans ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Examinez la maquette d&eacute;taill&eacute;e de conception . . . . . . . . . . . . . . . 190
Cr&eacute;ation et enregistrement d’une nouvelle page. . . . . . . . . . . . . . 192
Ins&eacute;rez des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
D&eacute;finissez les propri&eacute;t&eacute;s des tableaux . . . . . . . . . . . . . . . . . . . . . . 197
Ins&eacute;rez un espace r&eacute;serv&eacute; pour l’image . . . . . . . . . . . . . . . . . . . . 203
Ajoutez des couleurs &agrave; la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
189
Examinez la maquette d&eacute;taill&eacute;e
de conception
En r&egrave;gle g&eacute;n&eacute;rale, vous n’entamerez pas la cr&eacute;ation d’un site Web en
ouvrant Dreamweaver puis en mettant imm&eacute;diatement des pages en forme.
Les premi&egrave;res &eacute;tapes de la cr&eacute;ation d’un site Web se d&eacute;roulent sur une
feuille de papier ou dans une application de graphisme telle que
Macromedia Fireworks. Les concepteurs graphiques cr&eacute;ent g&eacute;n&eacute;ralement
une maquette d&eacute;taill&eacute;e du site Web de mani&egrave;re &agrave; la pr&eacute;senter au client et &agrave;
s’assurer que celui-ci approuve les id&eacute;es initiales relatives au site.
Une maquette d&eacute;taill&eacute;e se compose d’un certain nombre d’&eacute;l&eacute;ments de
page que le client a demand&eacute;s pour son site Web. Par exemple, le client
peut demander &agrave; avoir un logo en haut de la page, une section de
navigation avec des liens vers les autres pages, une section contenant un
magasin en ligne et un endroit o&ugrave; ins&eacute;rer des clips vid&eacute;o. Selon ces
desiderata, le concepteur entame la planification de la mise en forme du
site et cr&eacute;e des esquisses de pages r&eacute;pondant aux attentes du client.
190 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
Dans ce didacticiel, vous disposerez de la maquette d&eacute;taill&eacute;e compl&egrave;te et
approuv&eacute;e de Cafe Townsend, un restaurant fictif qui d&eacute;sire disposer d’un
site Web. En tant que concepteur Web, vous &ecirc;tes charg&eacute; de transformer
cette maquette d&eacute;taill&eacute;e en une page Web fonctionnelle (dans la plupart des
cas, en collaboration avec d’autres concepteurs graphiques et des
d&eacute;veloppeurs Flash).
Vous remarquerez que le concepteur graphique vous a fourni une maquette
d&eacute;taill&eacute;e de page Web qui comprend un certain nombre de zones de
contenu et quelques id&eacute;es concernant les graphismes. Dans les sections
suivantes, vous allez employer Dreamweaver pour mettre ce concept en
forme.
Examinez la maquette d&eacute;taill&eacute;e de conception
191
Vous pouvez &eacute;galement ouvrir le fichier original de la maquette d&eacute;taill&eacute;e
que vous avez cr&eacute;&eacute; au Chapitre 5, Didacticiel : Cr&eacute;ation de maquettes de page
si vous d&eacute;sirez le voir s’afficher sur l’&eacute;cran de l’ordinateur. Si vous n’avez pas
cr&eacute;&eacute; la maquette d&eacute;taill&eacute;e, vous pouvez soit revenir en arri&egrave;re et terminer le
didacticiel, soit visualiser une version termin&eacute;e du didacticiel dans le
dossier cafe_townsend/completed_files/fireworks.
Cr&eacute;ation et enregistrement d’une
nouvelle page
Apr&egrave;s avoir configur&eacute; un site et consult&eacute; les maquettes d&eacute;taill&eacute;es, vous
pouvez entamer la cr&eacute;ation de pages Web. Vous allez tout d’abord cr&eacute;er une
nouvelle page et l’enregistrer dans le dossier racine local cafe_townsend de
votre site Web. Cette page va devenir la page d’accueil du Cafe Townsend,
un restaurant fictif.
Si vous n’avez pas cr&eacute;&eacute; ce dossier, il faut absolument le faire avant de
poursuivre. Pour toutes instructions, voir Chapitre 4, Didacticiel :
Configuration de votre site et des fichiers de projet.
1.
Dans Dreamweaver, choisissez Fichier &gt; Nouveau.
2.
Dans l’onglet G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Nouveau document,
s&eacute;lectionnez Page de base dans la liste Cat&eacute;gorie, puis cliquez sur Cr&eacute;er.
3.
S&eacute;lectionnez Fichier &gt; Enregistrer sous.
4.
Dans la bo&icirc;te de dialogue Enregistrer sous, acc&eacute;dez au dossier
cafe_townsend que vous avez d&eacute;fini comme dossier racine local du site.
Dans le Chapitre 4, Didacticiel : Configuration de votre site et des fichiers
de projet, vous avez cr&eacute;&eacute; ce dossier dans un dossier nomm&eacute; local_sites.
5.
Tapez index.html dans la zone de texte Nom de fichier puis cliquez sur
Enregistrer.
Le nom du fichier para&icirc;t maintenant dans la barre de titre dans la partie
sup&eacute;rieure de la fen&ecirc;tre de l’application.
192 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
6.
Dans la zone texte Titre du document, dans le haut de votre nouveau
document, entrez Cafe Townsend.
Il s’agit du titre de votre page (qui est diff&eacute;rent du nom de fichier). Les
visiteurs de votre site verront ce titre dans la barre de titre de la fen&ecirc;tre
du navigateur lorsqu’ils afficheront la page dans un navigateur Web.
7.
Choisissez Fichier &gt; Enregistrer pour enregistrer votre page.
Ins&eacute;rez des tableaux
Vous allez ensuite ajouter un tableau qui contiendra du texte, des
graphismes et des actifs Macromedia Flash.
1.
Cliquez sur la page pour placer le point d’insertion dans l’angle
sup&eacute;rieur gauche de la page.
2.
Choisissez Insertion &gt; Tableau.
3.
Dans la bo&icirc;te de dialogue Tableau, proc&eacute;dez de la mani&egrave;re suivante :
■
Entrez 3 dans la zone de texte Lignes.
■
Entrez 1 dans la zone de texte Colonnes.
■
Saisissez 700 dans la zone de texte Largeur du tableau.
■
S&eacute;lectionnez Pixels dans le menu d&eacute;roulant Largeur du tableau.
■
Entrez 0 dans la zone de texte Largeur de la bordure.
■
Saisissez 0 dans la zone de texte Marge int&eacute;rieure des cellules.
■
Saisissez 0 dans la zone de texte Espacement entre les cellules.
Ins&eacute;rez des tableaux 193
4.
Cliquez sur OK.
Un tableau comportant trois lignes et une colonne s’affiche dans votre
document. Ce tableau fait 700 pixels de large, ne poss&egrave;de pas de
bordure et ses cellules n’ont pas de marge int&eacute;rieure ni d’espacement.
194 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
A S A VOI R . . .
Compl&eacute;ments sur les tableaux Les tableaux sont tr&egrave;s utiles pour pr&eacute;senter des donn&eacute;es tabulaires et
mettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ;
chaque ligne comporte au moins une cellule. Quand vous cr&eacute;ez de multiples lignes avec de multiples
cellules, ces derni&egrave;res forment des colonnes. Techniquement parlant, une cellule est une s&eacute;paration dans
une ligne horizontale et une colonne est un cumul vertical de ces s&eacute;parations de cellules.
Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau dans le S&eacute;lecteur de tableau
(mat&eacute;rialis&eacute; par des lignes vertes) lorsque le tableau est s&eacute;lectionn&eacute; ou que le point d’insertion se trouve
dedans.
En regard des largeurs se trouvent les fl&egrave;ches du menu des en-t&ecirc;tes de tableau et des menus des ent&ecirc;tes de colonne. Vous pouvez utiliser les menus pour acc&eacute;der rapidement &agrave; des commandes standard
relatives aux tableaux. Vous pouvez activer ou d&eacute;sactiver l’affichage des largeurs et des menus en
s&eacute;lectionnant Affichage &gt; Assistance visuelle &gt; Largeurs de tableau.
Un tableau peut poss&eacute;der des bordures et ses cellules peuvent comporter une marge int&eacute;rieure, un
espacement ou les deux &agrave; la fois. La marge int&eacute;rieure repr&eacute;sente le nombre de pixels entre le contenu de
la cellule et les limites de celle-ci. L’espacement entre les cellules repr&eacute;sente le nombre de pixels entre les
cellules contigu&euml;s d’un tableau.
Si vous n’attribuez pas de fa&ccedil;on explicite de valeurs pour les marges int&eacute;rieures et l’espacement des
cellules, la plupart des navigateurs affichent le tableau comme si les marges des cellules &eacute;taient fix&eacute;es &agrave; 1
et leur espacement &agrave; 2. Pour vous assurer que les navigateurs affichent le tableau sans aucune marge ou
espacement, fixez &agrave; 0 la marge int&eacute;rieure des cellules et l’espacement entre les cellules.
Pour plus d’informations sur les tableaux, voir Chapitre 8, Pr&eacute;sentation de contenu &agrave; l'aide de tableaux
dans Utilisation de Dreamweaver.
5.
Cliquez &agrave; droite du tableau pour le d&eacute;s&eacute;lectionner.
6.
S&eacute;lectionnez Ins&eacute;rer &gt; tableau pour ins&eacute;rer un autre tableau.
7.
Dans la bo&icirc;te de dialogue Tableau, proc&eacute;dez de la mani&egrave;re suivante pour
le deuxi&egrave;me tableau :
■
Entrez 1 dans la zone de texte Lignes.
■
Entrez 3 dans la zone de texte Colonnes.
■
Saisissez 700 dans la zone de texte Largeur du tableau.
■
S&eacute;lectionnez Pixels dans le menu d&eacute;roulant Largeur du tableau.
■
Saisissez 0 dans la zone de texte Largeur de la bordure.
■
Entrez 0 dans la zone de texte Marge int&eacute;rieure des cellules.
■
Entrez 0 dans la zone de texte Espacement entre les cellules.
Ins&eacute;rez des tableaux 195
8.
Cliquez sur OK.
Un deuxi&egrave;me tableau comportant une ligne et trois colonnes s’affiche
sous le premier tableau.
9.
Cliquez &agrave; droite du tableau pour le d&eacute;s&eacute;lectionner.
10. Ins&eacute;rez un troisi&egrave;me
tableau en s&eacute;lectionnant Insertion &gt; Tableau et en
entrant les valeurs suivantes dans la bo&icirc;te de dialogue Tableau :
11.
■
Entrez 1 dans la zone de texte Lignes.
■
Saisissez 1 dans la zone de texte Colonnes.
■
Tapez 700 dans la zone de texte Largeur du tableau.
■
S&eacute;lectionnez Pixels dans le menu contextuel Largeur du tableau.
■
Saisissez 0 dans la zone de texte Largeur de la bordure.
■
Saisissez 0 dans la zone de texte Marge int&eacute;rieure des cellules.
■
Saisissez 0 dans la zone de texte Espacement entre les cellules.
Cliquez sur OK.
Un troisi&egrave;me tableau avec une ligne et une colonne s’affiche sous le
deuxi&egrave;me tableau.
Cliquez &agrave; droite du tableau pour le d&eacute;s&eacute;lectionner. Votre page doit
maintenant ressembler &agrave; la page suivante :
R EM A R QU E
Le s&eacute;lecteur de tableau (indiqu&eacute; par des lignes vertes) s’affiche apr&egrave;s
l’insertion d’un tableau. Vous pouvez masquer le s&eacute;lecteur de tableau en
cliquant en dehors du tableau. Vous pouvez &eacute;galement d&eacute;sactiver le
S&eacute;lecteur de tableau en choisissant Affichage &gt; Assistances visuelles &gt;
Largeurs des tableaux.
196 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
D&eacute;finissez les propri&eacute;t&eacute;s des
tableaux
Vous allez &agrave; pr&eacute;sent d&eacute;finir les propri&eacute;t&eacute;s pr&eacute;cises des tableaux &agrave; l’aide du mode
Tableaux d&eacute;velopp&eacute;s. Cette fonctionnalit&eacute; ajoute temporairement une marge
int&eacute;rieure et un espacement aux cellules et &eacute;largit les bordures des tableaux afin
de faciliter leur manipulation. Cela vous permet particuli&egrave;rement de placer le
point d’insertion de mani&egrave;re pr&eacute;cise sans s&eacute;lectionner accidentellement le
mauvais tableau ou tout autre contenu du tableau.
R EMA R Q U E
Lorsque vous avez termin&eacute; de d&eacute;finir les propri&eacute;t&eacute;s des tableaux en mode
Tableaux d&eacute;velopp&eacute;s, vous devez toujours revenir au mode Standard. Le
mode Tableaux d&eacute;velopp&eacute;s n’est pas un environnement WYSIWYG
(&laquo; what you see is what you get &raquo; ou affichage et impression non
identiques) de sorte que certaines op&eacute;rations, telles que le
redimensionnement, ne donneront pas le r&eacute;sultat attendu.
1.
S&eacute;lectionnez Affichage &gt; Mode Tableau&gt; Mode Tableaux d&eacute;velopp&eacute;s.
R EM A R QU E
Si vous consultez le guide de d&eacute;marrage avec la bo&icirc;te de dialogue Mode
Tableaux d&eacute;velopp&eacute;s, cliquez sur OK.
D&eacute;finissez les propri&eacute;t&eacute;s des tableaux 197
2.
Cliquez &agrave; l’int&eacute;rieur de la premi&egrave;re ligne du premier tableau.
3.
Dans l’inspecteur des propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), tapez 90 dans la
zone de texte Hauteur des cellules et appuyez sur Entr&eacute;e (Windows) ou
Retour (Macintosh).
R E MA R Q UE
Si vous ne voyez pas la zone de texte Hauteur des cellules, cliquez sur la
fl&egrave;che d’extension dans l’angle inf&eacute;rieur droit de l’inspecteur des
propri&eacute;t&eacute;s.
4.
Cliquez &agrave; l’int&eacute;rieur de la deuxi&egrave;me ligne du premier tableau.
198 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
5.
Dans l’inspecteur des propri&eacute;t&eacute;s, tapez 166 dans la zone de texte
Hauteur des cellules et appuyez sur Entr&eacute;e (Windows) ou Retour
(Macintosh).
6.
Cliquez &agrave; l’int&eacute;rieur de la troisi&egrave;me ligne du premier tableau.
7.
Dans l’inspecteur des propri&eacute;t&eacute;s, tapez 24 dans la zone de texte Hauteur
des cellules et appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh).
Le premier tableau doit &agrave; pr&eacute;sent comporter trois lignes de hauteurs
diff&eacute;rentes.
Vous allez &agrave; pr&eacute;sent d&eacute;finir les propri&eacute;t&eacute;s du deuxi&egrave;me tableau (celui
qui contient trois colonnes).
D&eacute;finissez les propri&eacute;t&eacute;s des tableaux 199
8.
Cliquez &agrave; l’int&eacute;rieur de la premi&egrave;re colonne du deuxi&egrave;me tableau.
9.
Dans l’inspecteur des propri&eacute;t&eacute;s, tapez 140 dans la zone de texte Largeur
des cellules et appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh).
10. Cliquez
&agrave; l’int&eacute;rieur de la deuxi&egrave;me colonne du deuxi&egrave;me tableau.
200 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
11.
Dans l’inspecteur des propri&eacute;t&eacute;s, tapez 230 dans la zone de texte Largeur
des cellules et appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh).
12. Fixez
la largeur de la troisi&egrave;me colonne &agrave; 330 pixels.
Si le S&eacute;lecteur de tableau est activ&eacute; (Affichage &gt; Assistances visuelles &gt;
Largeurs des tableaux), les valeurs en pixels que vous venez de saisir
s’afficheront au-dessus des colonnes du tableau.
Vous n’allez entrer aucune valeur de hauteur pour les cellules de ce
tableau, car leur hauteur variera en fonction du contenu que vous
ajouterez par la suite.
13.
Enfin, cliquez dans le dernier tableau (celui qui contient une ligne et une
colonne).
D&eacute;finissez les propri&eacute;t&eacute;s des tableaux 201
14. Dans l’inspecteur des propri&eacute;t&eacute;s, tapez 24 dans la zone de texte Hauteur
des cellules et appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh).
Votre mise en forme doit maintenant ressembler &agrave; la suivante :
15. Cliquez
sur le lien [quitter] dans la barre intitul&eacute;e Mode Tableaux
d&eacute;velopp&eacute;s en haut de la fen&ecirc;tre de document pour revenir au mode
Standard. 7
16.
Enregistrez votre page.
202 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
Ins&eacute;rez un espace r&eacute;serv&eacute; pour
l’image
Un espace r&eacute;serv&eacute; pour image est un graphisme que vous utilisez jusqu’&agrave; ce
que le dessin final soit pr&ecirc;t &agrave; &ecirc;tre ajout&eacute; &agrave; une page Web. L’espace r&eacute;serv&eacute;
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&ecirc;me d’avoir cr&eacute;&eacute; l’image.
1.
Dans la fen&ecirc;tre de document, cliquez &agrave; l’int&eacute;rieur de la premi&egrave;re ligne
du premier tableau.
2.
S&eacute;lectionnez Ins&eacute;rer &gt; Objets image &gt; Espace r&eacute;serv&eacute; pour l’image.
3.
Dans la bo&icirc;te de dialogue Espace r&eacute;serv&eacute; pour l’image, proc&eacute;dez de la
mani&egrave;re suivante :
■
Tapez graphique_banni&egrave;re dans la zone de texte Nom.
■
Entrez 700 dans la zone de texte Largeur.
■
Entrez 90 dans la zone de texte Hauteur.
■
■
Cliquez sur la case de couleur puis choisissez une couleur dans le
s&eacute;lecteur. Pour ce didacticiel, nous allons choisir un brun rouge&acirc;tre
(#993300).
Laissez vide la zone de texte Autre texte.
A S A VOI R . . .
Une note sur le texte de remplacement Un texte de remplacement est la description textuelle d’une
image sur une page Web. Il fait partie du code HTML et n’est pas visible sur la page. Il est important de
fournir un texte de remplacement pour la plupart de vos images pour que les personnes qui utilisent des
lecteurs d’&eacute;crans ou des navigateurs &agrave; texte puissent recevoir l’information fournie par l’image. Dans le
cas d’un graphisme repr&eacute;sentant une banni&egrave;re, qui se borne &agrave; afficher un logo pour un site Web, il n’est
pas essentiel de fournir un tel texte. Si vous ne remplissez pas la zone Autre texte dans la zone de
dialogue Espace r&eacute;serv&eacute; pour l’image, Dreamweaver ajoute un attribut alt=&quot;&quot; &agrave; la balise img. Si vous
voulez par la suite ajouter un texte de remplacement &agrave; une image, il suffit de la s&eacute;lectionner et d’entrer le
texte d&eacute;sir&eacute; dans l’inspecteur de propri&eacute;t&eacute;s. Par exemple, si vous changez le logo plus tard pour inclure
un num&eacute;ro de t&eacute;l&eacute;phone ou une adresse, il est souhaitable de fournir cette information sous forme de
texte de remplacement.
Ins&eacute;rez un espace r&eacute;serv&eacute; pour l’image 203
A S A VOI R . . .
Pr&eacute;sentation des espaces r&eacute;serv&eacute;s pour l’image Un espace r&eacute;serv&eacute; pour l’image est un graphisme
que vous emploierez jusqu’&agrave; ce que le graphisme d&eacute;finitif soit pr&ecirc;t &agrave; &ecirc;tre ajout&eacute; &agrave; la page Web. Il ne s’agit
pas d’une image qui s’affiche dans un navigateur. Avant de publier votre site, remplacez tous les espaces
r&eacute;serv&eacute;s pour une image que vous avez ajout&eacute;s par des fichiers graphiques adapt&eacute;s au Web, tels que des
images GIF ou JPEG.
Si vous poss&eacute;dez Macromedia Fireworks, vous pouvez cr&eacute;er un nouveau graphisme &agrave; partir d’un espace
r&eacute;serv&eacute; pour l’image dans Dreamweaver. Lorsque vous s&eacute;lectionnez l’espace r&eacute;serv&eacute; pour l’image et que
vous cliquez sur le bouton Cr&eacute;er de l’inspecteur de propri&eacute;t&eacute;s, Fireworks d&eacute;marre et pr&eacute;sente un nouveau
document. La nouvelle image reprend la m&ecirc;me taille que celle de l’espace r&eacute;serv&eacute; pour l’image. Vous
pouvez ensuite cr&eacute;er et modifier l’image comme bon vous semble, puis remplacer l’espace r&eacute;serv&eacute; pour
l’image dans Dreamweaver. Pour obtenir des informations sur la cr&eacute;ation d’une image dans Fireworks &agrave;
partir d’un espace r&eacute;serv&eacute; pour l’image, voir Utilisation de Fireworks pour modifier les espaces r&eacute;serv&eacute;s
pour les images Dreamweaver dans Utilisation de Dreamweaver
4.
Cliquez sur OK.
L’espace r&eacute;serv&eacute; pour l’image appara&icirc;t &agrave; l’int&eacute;rieur du premier tableau.
Il affiche une &eacute;tiquette et les attributs de taille de l’image que vous
placerez &agrave; cet endroit.
R E MA R Q U E
Lorsqu’ils sont affich&eacute;s dans un navigateur, le texte de l’&eacute;tiquette et de la
taille d’un espace r&eacute;serv&eacute; pour l’image n’apparaissent pas.
5.
Enregistrez votre page.
204 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
Ajoutez des couleurs &agrave; la page
Vous allez &agrave; pr&eacute;sent ajouter de la couleur &agrave; la page en d&eacute;finissant les
couleurs de certaines cellules du tableau et de l’arri&egrave;re-plan de la page.
1.
Cliquez &agrave; l’int&eacute;rieur de la premi&egrave;re cellule du tableau &agrave; trois colonnes.
2.
Cliquez sur la balise &lt;td&gt; (balise de cellule) dans le s&eacute;lecteur de balises
afin de s&eacute;lectionner la cellule.
3.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez dans la
zone de texte Couleur d’arri&egrave;re-plan.
Cette zone se trouve juste &agrave; c&ocirc;t&eacute; de la zone de couleur Couleur d’ar-pl.
R EM A R QU E
Si vous ne voyez pas la zone de texte Couleur d’arri&egrave;re-plan, cliquez sur la
fl&egrave;che d’extension dans l’angle inf&eacute;rieur droit de l’inspecteur des
propri&eacute;t&eacute;s.
Ajoutez des couleurs &agrave; la page 205
4.
Dans la zone de texte Couleur d’arri&egrave;re-plan, entrez la valeur
hexad&eacute;cimale #993300 puis appuyez sur la touche Entr&eacute;e (Windows)
ou Retour (Macintosh).
La cellule du tableau prend une couleur brun rouge&acirc;tre.
5.
Cliquez &agrave; l’int&eacute;rieur de la deuxi&egrave;me cellule du tableau &agrave; trois colonnes.
6.
Cliquez sur la balise &lt;td&gt; (balise de cellule) dans le s&eacute;lecteur de balises
afin de s&eacute;lectionner la cellule.
7.
Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez dans la zone de texte Couleur
d’arri&egrave;re-plan, entrez la valeur hexad&eacute;cimale #F7EEDF puis appuyez sur
la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
La cellule du tableau prend une couleur brun clair.
8.
R&eacute;p&eacute;tez les &eacute;tapes 5 &agrave; 7 pour appliquer &eacute;galement la couleur brun clair
&agrave; la troisi&egrave;me cellule du tableau.
9.
Lorsque les trois couleurs sont d&eacute;finies, cliquez une fois en dehors du
tableau pour le d&eacute;s&eacute;lectionner.
Vous allez ensuite modifier la couleur d’arri&egrave;re-plan de la page enti&egrave;re en
modifiant les propri&eacute;t&eacute;s de la page. La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la
page permet de d&eacute;finir diverses propri&eacute;t&eacute;s, comme la taille et la couleur des
polices de la page, les couleurs des liens visit&eacute;s, les marges de la page, etc.
206 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
1.
Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page.
2.
Dans la cat&eacute;gorie Apparence de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la
page, cliquez sur la zone de couleur Couleur d’arri&egrave;re-plan et choisissez
le noir (#000000) dans le s&eacute;lecteur de couleur.
A S A VOI R . . .
En HTML, les couleurs sont exprim&eacute;es par leur valeur hexad&eacute;cimale (par exemple, #FF0000) ou, pour
les principales, par leur nom en anglais (red). Une couleur s&eacute;curis&eacute;e pour le Web est une couleur qui, en
mode 256 couleurs, reste toujours la m&ecirc;me dans Netscape Navigator et Microsoft Internet Explorer, sous
Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur
hexad&eacute;cimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux
niveaux RVB 0, 51, 102, 153, 204 et 255) repr&eacute;sente une couleur s&eacute;curis&eacute;e pour le Web.
Vous pouvez s&eacute;lectionner des couleurs dans Dreamweaver en entrant des valeurs hexad&eacute;cimales dans
les zones de texte appropri&eacute;es ou en s&eacute;lectionnant une couleur au moyen du s&eacute;lecteur. Le s&eacute;lecteur de
couleur emploie la palette s&eacute;curis&eacute;e de 216 couleurs ; la s&eacute;lection d’une couleur dans cette palette
entra&icirc;ne l’affichage de la valeur hexad&eacute;cimale correspondante. Pour utiliser le s&eacute;lecteur de couleur,
cliquez sur la zone de couleur et utilisez la pipette pour s&eacute;lectionner une couleur.
Vous pouvez &eacute;galement utiliser le s&eacute;lecteur de couleur pour faire correspondre des couleurs. Par
exemple, si une image de votre page contient une nuance de bleu pr&eacute;cise que vous voulez &eacute;galement
appliquer &agrave; l’arri&egrave;re-plan d’une cellule de tableau, vous pouvez s&eacute;lectionner cette cellule, cliquer sur la
zone de couleur pour ouvrir le s&eacute;lecteur de couleur, amener la pipette au-dessus de la couleur bleue de
l’image puis cliquer. Le s&eacute;lecteur de couleur remplira la zone s&eacute;lectionn&eacute;e de la couleur la plus proche de
celle sur laquelle vous avez cliqu&eacute; &agrave; l’aide de la pipette. Toutefois, si vous s&eacute;lectionnez des couleurs en
proc&eacute;dant de cette mani&egrave;re, il peut arriver que le s&eacute;lecteur de couleur ne choisisse pas une couleur
s&eacute;curis&eacute;e pour le Web.
Ajoutez des couleurs &agrave; la page 207
3.
Cliquez sur OK.
L’arri&egrave;re-plan de la page devient noir.
4.
Enregistrez votre travail.
La mise en forme de votre page est maintenant termin&eacute;e. La mise en forme
contient un certain nombre de tableaux qui contiennent des actifs tels que
des images, du texte et des fichiers vid&eacute;o Flash (FLV).
208 Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau
3
PARTIE 3
Cr&eacute;ation d’actifs de contenu
Dans cette partie, vous construirez des actifs pour l’exemple de site Internet
du Cafe Townsend.
Vous utiliserez Macromedia Fireworks 8 pour traiter des images et pour
concevoir une banni&egrave;re pour le site Internet du Cafe Townsend. Vous
utiliserez Macromedia Flash 8 pour construire une zone de message
facilement modifiable et un lecteur vid&eacute;o pour le site Internet du Cafe
Townsend.
Cette partie du manuel contient les sections suivantes :
Didacticiel : Traitement des photographies . . . . . . . . . . . . . . . . . . 211
Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page . . . . . . . . . . . . . . . 223
Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash . . . . 245
Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel
uniquement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
209
CHAPITRE 7
Didacticiel : Traitement
des photographies
7
Le pr&eacute;sent didacticiel vous guide dans les t&acirc;ches de base li&eacute;es &agrave;
l’optimisation de photographies &agrave; l’aide de Macromedia Fireworks 8. Il
explique comment traiter les fichiers par lots et composer et exporter un
groupe d’images.
Dans le cadre de ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Examen de votre t&acirc;che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211
Traitement par lots de fichiers d’image de grande taille . . . . . . . 212
Composition des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Aper&ccedil;u avant exportation et exportation des images. . . . . . . . . . 219
Affichage des images optimis&eacute;es finales . . . . . . . . . . . . . . . . . . . . 221
Examen de votre t&acirc;che
Conform&eacute;ment &agrave; la maquette de page que vous avez cr&eacute;&eacute;e pr&eacute;c&eacute;demment,
le site Web de Caf&eacute; Townsend inclut un diaporama photo de type Flash.
211
Vous recevez six photographies num&eacute;riques de plats figurant au menu du
restaurant. Votre t&acirc;che est de pr&eacute;parer les images pour le diaporama. Ces
clich&eacute;s doivent &ecirc;tre de bonne qualit&eacute; mais suffisamment petits pour que
leur t&eacute;l&eacute;chargement s’effectue rapidement. De m&ecirc;me, la taille de chaque
image doit &ecirc;tre de 700 sur 150 pixels pour &ecirc;tre adapt&eacute;e aux dimensions du
diaporama.
R E MA R Q UE
Pour acc&eacute;der &agrave; un didacticiel sur la cr&eacute;ation du diaporama dans Flash, voir
les didacticiels de Macromedia Flash 8.
Traitement par lots de fichiers
d’image de grande taille
Si la source de vos fichiers d’image est un appareil photo num&eacute;rique, vous
ne pouvez probablement pas utiliser les images directement comme
graphiques Web. La taille et la r&eacute;solution sont beaucoup trop importantes.
Il se peut &eacute;galement que vous souhaitiez modifier la composition de fa&ccedil;on &agrave;
n’utiliser que certaines parties des photographies.
Si tous les fichiers d’image n&eacute;cessitent les m&ecirc;mes ajustements, vous pouvez
faire l’&eacute;conomie du processus laborieux d’ouverture et de modification de
chaque fichier en traitant les fichiers d’image par lots.
Pour le projet Caf&eacute; Townsend, vous d&eacute;cidez de traiter par lots les six
fichiers JPEG t&eacute;l&eacute;charg&eacute;s &agrave; partir d’un appareil photo num&eacute;rique. Vous
souhaitez effectuer les actions suivantes sur tous les fichiers :
■
Comme les images ont des dimensions diff&eacute;rentes, vous souhaitez les
redimensionner de fa&ccedil;on &agrave; ce qu’elles aient toutes la m&ecirc;me largeur.
■
Comme les noms de fichiers sont peu parlants, vous souhaitez leur
ajouter le pr&eacute;fixe &laquo; plat_ &raquo; afin de mieux d&eacute;crire les images.
La premi&egrave;re &eacute;tape consiste &agrave; s&eacute;lectionner les fichiers que vous souhaitez
traiter.
Vous devez d&eacute;finir un dossier de travail avant de commencer, si ce n’est pas
d&eacute;j&agrave; fait. Pour plus d’informations, consultez la section Configuration de
votre site et de vos fichiers de projet.
212 Didacticiel : Traitement des photographies
1.
Dans Fireworks, cliquez sur Fichier &gt; Traitement par lots.
La bo&icirc;te de dialogue Lots s’affiche.
2.
Ouvrez le dossier suivant de votre disque dur :
local_sites/cafe_townsend/fireworks_assets/camera_files
Le dossier contient six images JPEG t&eacute;l&eacute;charg&eacute;es &agrave; partir d’un appareil
photo num&eacute;rique.
3.
Pour s&eacute;lectionner rapidement tous les fichiers composant le lot, cliquez
sur Ajouter tout, puis sur Suivant.
La bo&icirc;te de dialogue Traitement par lots s’affiche. Cette bo&icirc;te de
dialogue vous permet de sp&eacute;cifier les actions que vous souhaitez
effectuer sur un lot de fichiers. Dans ce cas, vous devez mettre &agrave;
l’&eacute;chelle et renommer vos fichiers.
4.
Sous Options de traitement par lots, s&eacute;lectionnez Mise &agrave; l’&eacute;chelle, puis
cliquez sur Ajouter pour inclure l’action dans le traitement par lots.
5.
Dans la zone Mise &agrave; l’&eacute;chelle, au bas de la bo&icirc;te de dialogue, s&eacute;lectionnez
Mise &agrave; l’&eacute;chelle avec cette taille dans la liste, puis d&eacute;finissez les
dimensions comme suit :
■
Entrez 750 dans la case de la largeur.
■
Pour la hauteur, s&eacute;lectionnez Variable dans la liste.
6.
Sous Options de traitement par lots, s&eacute;lectionnez Renommer, puis
cliquez sur Ajouter pour inclure l’action dans le traitement par lots.
7.
Dans la zone Renommer au bas de la bo&icirc;te de dialogue, s&eacute;lectionnez
l’option Ajouter un pr&eacute;fixe, puis entrez plat_ dans la zone de texte.
8.
Cliquez sur Suivant pour passer &agrave; l’&eacute;cran suivant.
Traitement par lots de fichiers d’image de grande taille 213
9.
Assurez-vous que l’option M&ecirc;me emplacement que le fichier d’origine
est s&eacute;lectionn&eacute;e, puis cliquez sur Lots pour lancer le traitement par lots.
Fireworks met &agrave; l’&eacute;chelle toutes les images et ajoute le pr&eacute;fixe plat_ &agrave;
chaque nom de fichier. Lorsque vous y &ecirc;tes invit&eacute;, cliquez sur OK pour
terminer le traitement.
En examinant les fichiers figurant dans le dossier camera_files, vous
pouvez constater que Fireworks a plac&eacute; les fichiers d’image originaux
dans un dossier nomm&eacute; Original Files. Vous pouvez &eacute;galement
constater que l’op&eacute;ration de mise &agrave; l’&eacute;chelle a sensiblement r&eacute;duit la
taille des fichiers.
Composition des images
L’&eacute;tape suivante consiste &agrave; composer les images qui doivent s’afficher dans
le diaporama. La taille de chaque image doit &ecirc;tre de 700 sur 150 pixels
pour &ecirc;tre adapt&eacute;e aux dimensions du diaporama. Toutefois, comme les
images que vous avez trait&eacute;es par lots sont d’une taille sup&eacute;rieure aux
dimensions du diaporama, vous devez s&eacute;lectionner ou composer une
portion int&eacute;ressante de 700 x 150 pixels de l’image.
Une option possible consiste &agrave; ouvrir chaque image, la recadrer, puis
l’exporter. Vous d&eacute;cidez n&eacute;anmoins d’adopter une approche plus efficace
en cr&eacute;ant un seul fichier d’image contenant les six images dans lequel vous
pouvez composer et exporter les images &agrave; tout moment.
214 Didacticiel : Traitement des photographies
Vous commencez par cr&eacute;er le fichier source de l’image. Dans la section
suivante, vous allez ajouter des cadres au fichier, placer une image dans
chaque cadre, puis composer les images. Vous pouvez ensuite exporter les
six images en une seule op&eacute;ration.
1.
Dans Fireworks, cliquez sur Fichier &gt; Nouveau.
2.
Dans la bo&icirc;te de dialogue Nouveau document, entrez 700 pour la valeur
de largeur et 150 pour la valeur de hauteur.
Assurez-vous que les deux mesures sont exprim&eacute;es en pixels.
3.
D&eacute;finissez la couleur du document sur Blanc, puis cliquez sur OK pour
cr&eacute;er le fichier source de l’image.
4.
Si la fen&ecirc;tre Document n’est pas agrandie, c’est-&agrave;-dire si elle n’occupe
pas toute la surface centrale de l’&eacute;cran, agrandissez-la en cliquant sur le
bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh)
dans le haut de la fen&ecirc;tre Document. Cette op&eacute;ration agrandit
consid&eacute;rablement votre espace de travail.
5.
Cliquez sur Fichier &gt; Enregistrer.
6.
Ouvrez le dossier suivant de votre disque dur :
local_sites/cafe_townsend/fireworks_assets/
7.
Nommez le fichier ImageSource.png, puis cliquez sur Enregistrer.
Cr&eacute;ation et d&eacute;nomination de cadres
Ensuite, vous cr&eacute;ez plusieurs cadres dans le fichier ImageSource.png pour y
ins&eacute;rer les fichiers d’image que vous avez trait&eacute;s ant&eacute;rieurement.
Les cadres sont une fonction de Fireworks g&eacute;n&eacute;ralement utilis&eacute;e pour cr&eacute;er
des animations et des survols. Dans ce cas, vous utilisez des cadres pour
ins&eacute;rer les photos individuelles avant de les exporter simultan&eacute;ment dans
des fichiers distincts.
1.
Assurez-vous que le fichier ImageSource.png est ouvert dans Fireworks.
2.
Cliquez sur Fen&ecirc;tre &gt; Cadres pour ouvrir le panneau Cadres.
CO NS E I L
Pendant l’ex&eacute;cution du didacticiel, pensez &agrave; enregistrer fr&eacute;quemment votre
travail en cliquant sur Fichier &gt; Enregistrer.
Pendant l’ex&eacute;cution
du didacticiel, il peut
&ecirc;tre utile d’annuler
une partie de vos
modifications.
Fireworks peut
annuler plusieurs de
vos modifications
r&eacute;centes, en fonction
du nombre
d’annulations d&eacute;fini
dans la bo&icirc;te de
dialogue
Pr&eacute;f&eacute;rences. Pour
annuler la
modification la plus
r&eacute;cente, cliquez sur
Edition &gt; Annuler.
Composition des images 215
3.
Cliquez sur le menu contextuel dans le coin sup&eacute;rieur droit du panneau,
puis s&eacute;lectionnez Ajouter des images.
4.
Dans la bo&icirc;te de dialogue Ajouter des images, entrez le chiffre 5, assurezvous que l’option Apr&egrave;s l’image courante est s&eacute;lectionn&eacute;e, puis cliquez
sur OK.
216 Didacticiel : Traitement des photographies
Fireworks ajoute les cinq nouveaux cadres au cadre existant, pour un
total de six.
Par d&eacute;faut, Fireworks nomme les nouveaux cadres Frame 2, Frame 3,
etc. Vous souhaitez renommer les cadres afin que leurs noms
correspondent aux noms de fichiers des images que vous exporterez
ult&eacute;rieurement dans le cadre de ce didacticiel.
5.
Dans le panneau Cadres, double-cliquez sur Frame 1.
6.
Entrez Image0 dans la zone de texte qui s’affiche, puis appuyez sur
Entr&eacute;e pour valider le nouveau nom.
R EM A R QU E
Le d&eacute;veloppeur Flash charg&eacute; de cr&eacute;er le diaporama vous a demand&eacute; de
commencer la num&eacute;rotation &agrave; 0 pour des raisons d’encodage.
7.
Continuez &agrave; renommer les cadres Image 1, Image 2, etc.
Lorsque vous exporterez les images ult&eacute;rieurement dans ce didacticiel,
Fireworks nommera automatiquement les fichiers export&eacute;s &agrave; l’aide des
noms de cadres.
8.
Enregistrez votre travail.
Composition des images 217
Placement et composition d’une image
dans chaque cadre
A pr&eacute;sent que vous avez cr&eacute;&eacute; six cadres, vous souhaitez importer les fichiers
que vous avez cr&eacute;&eacute;s pr&eacute;c&eacute;demment dans chaque cadre. Une fois les images
import&eacute;es, vous pouvez ais&eacute;ment les composer en les faisant glisser sur le
document. L’utilisation de cadres pour stocker et manipuler les images vous
permet &eacute;galement d’exporter toutes celles-ci simultan&eacute;ment &agrave; l’aide des
param&egrave;tres de fichier de votre choix.
1.
Dans le panneau Cadres, s&eacute;lectionnez le premier cadre.
2.
Cliquez sur Fichier &gt; Importer, puis acc&eacute;dez au dossier suivant de votre
disque dur :
local_sites/cafe_townsend/fireworks_assets/camera_files
3.
S&eacute;lectionnez plat_1013.jpg, puis cliquez sur Ouvrir.
4.
Alignez le pointeur d’insertion l&eacute;g&egrave;rement &agrave; l’ext&eacute;rieur du coin
sup&eacute;rieur gauche du document, comme dans l’illustration suivante, puis
cliquez pour ins&eacute;rer l’image.
L’image s’affiche, s&eacute;lectionn&eacute;e, sur le document.
L’image est plus grande que le document, comme l’indique le contour
bleu. Au lieu de recadrer l’image, vous la d&eacute;placez jusqu’&agrave; ce que la
portion d’image souhait&eacute;e figure dans la &laquo; fen&ecirc;tre &raquo; cr&eacute;&eacute;e par le
document. Lorsque vous exporterez l’image ult&eacute;rieurement dans le
cadre de ce didacticiel, elle sera recadr&eacute;e de fa&ccedil;on &agrave; ce que sa hauteur et
sa largeur correspondent &agrave; la taille du document (700 x 150 pixels).
218 Didacticiel : Traitement des photographies
5.
Pour composer l’image, faites-la glisser jusqu’&agrave; afficher la portion
souhait&eacute;e dans la fen&ecirc;tre cr&eacute;&eacute;e par le document.
6.
Cliquez n’importe o&ugrave; en dehors de l’image s&eacute;lectionn&eacute;e pour la
d&eacute;s&eacute;lectionner.
7.
R&eacute;p&eacute;tez les &eacute;tapes 1 &agrave; 6 pour les cinq images restantes, en veillant &agrave;
s&eacute;lectionner un nouveau cadre vide avant d’importer chaque image.
8.
Enregistrez votre travail.
Aper&ccedil;u avant exportation et
exportation des images
Le fichier source de l’image contient six cadres dans lesquels figurent six
images. Le maintien des images dans les cadres vous permet de les exporter
toutes en m&ecirc;me temps avec les param&egrave;tres de fichier de votre choix, comme
suit.
Aper&ccedil;u avant exportation et exportation des images 219
1.
Cliquez sur Fichier &gt; Aper&ccedil;u de l’image.
2.
Dans la bo&icirc;te de dialogue Aper&ccedil;u de l’image, ex&eacute;cutez les actions
suivantes :
■
Dans le menu contextuel Format, cliquez sur JPEG.
Le format JPEG est id&eacute;al pour des photographies num&eacute;riques ou
num&eacute;ris&eacute;es, des images comportant des textures ou des d&eacute;grad&eacute;s, ou
toute autre image n&eacute;cessitant plus de 256 couleurs. Pour plus
d’informations sur la s&eacute;lection des formats, voir Fichiers graphiques,
page 27.
■
3.
Dans la zone de texte Qualit&eacute;, entrez 75 ou utilisez le curseur
Qualit&eacute;.
■
S&eacute;lectionnez l’option Bords couleur plus nets.
■
Cliquez sur Exporter.
Dans la bo&icirc;te de dialogue Exporter qui s’affiche, ouvrez le dossier
suivant de votre disque dur :
local_sites/cafe_townsend/images/
4.
Dans le menu contextuel Exporter, cliquez sur Images vers fichiers.
5.
Assurez-vous que l’option Rogner les images n’est pas s&eacute;lectionn&eacute;e.
6.
Cliquez sur Exporter.
Fireworks exporte chaque cadre dans un fichier d’image distinct du
dossier images en lui attribuant le nom que vous avez attribu&eacute; au cadre.
220 Didacticiel : Traitement des photographies
Affichage des images optimis&eacute;es
finales
Apr&egrave;s avoir export&eacute; les images, vous pouvez voir leur aspect en les ouvrant
dans Fireworks.
Vous pouvez observer ce qui suit :
■
Toutes les images sont recadr&eacute;es afin d’afficher la composition que vous
avez cr&eacute;&eacute;e en positionnant les images sur le document.
■
Toutes les images ont une largeur de 700 pixels, une hauteur de 150
pixels et une r&eacute;solution de 72 pixels par pouce.
Les tableaux ci-apr&egrave;s montrent comment les images finales diff&egrave;rent des
fichiers JPEG originaux cr&eacute;&eacute;s &agrave; l’aide de l’appareil photo num&eacute;rique :
Fichiers originaux de l’appareil photo num&eacute;rique
Nom de fichier
Dimensions du
fichier
Taille du fichier
1013.jpg
1679 x 1170 pixels
402 Ko
1088.jpg
2920 x 1876 pixels
1732 Ko
1095.jpg
2063 x 1444 pixels
753 Ko
1111.jpg
3040 x 1840 pixels
2831 Ko
1320.jpg
3284 x 1855 pixels
1364 Ko
1396.jpg
3346 x 2000 pixels
1435 Ko
Nom de fichier
Dimensions du
fichier
Taille du fichier
Image0
700 x 150 pixels
12 Ko
Image1
700 x 150 pixels
16 Ko
Image2
700 x 150 pixels
23 Ko
Image3
700 x 150 pixels
19 Ko
Image4
700 x 150 pixels
21 Ko
Image5
700 x 150 pixels
14 Ko
Images finales
Affichage des images optimis&eacute;es finales 221
Les images finales ont les dimensions uniformes dont vous avez besoin et
leur taille est beaucoup plus petite, ce qui est essentiel pour les sites Web
publics.
Dans le cadre de ce didacticiel, vous avez appris &agrave; traiter par lots des fichiers
d’image volumineux, &agrave; cr&eacute;er et nommer des cadres, &agrave; placer des images
dans des cadres, ainsi qu’&agrave; pr&eacute;visualiser et exporter des fichiers. Pour plus
d’informations sur certaines des fonctions mentionn&eacute;es dans ce didacticiel
et sur d’autres fonctions de Fireworks, voir le manuel Utilisation de
Fireworks.
222 Didacticiel : Traitement des photographies
CHAPITRE 8
Didacticiel : Cr&eacute;ation
d’une banni&egrave;re de page
8
Le pr&eacute;sent didacticiel vous guide dans la t&acirc;che de conception d’une
banni&egrave;re de page avec Macromedia Fireworks 8. Vous allez apprendre &agrave;
importer des actifs d’image, &agrave; manipuler des calques, des formes, des
masques et du texte, ainsi qu’&agrave; optimiser et exporter le graphique de
banni&egrave;re termin&eacute;.
Dans le cadre de ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Examen de votre t&acirc;che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Ajout d’un arri&egrave;re-plan et placement du logo . . . . . . . . . . . . . . . . 224
Organisation de vos objets &agrave; l’aide de calques . . . . . . . . . . . . . . 228
Cr&eacute;ation d’un arri&egrave;re-plan contrast&eacute; pour le logo . . . . . . . . . . . . 230
Cr&eacute;ation d’un contour autour de la banni&egrave;re . . . . . . . . . . . . . . . . 234
Cr&eacute;ation d’un effet de bord oblique . . . . . . . . . . . . . . . . . . . . . . . . .237
Ajout d’une ligne de balise &agrave; la banni&egrave;re . . . . . . . . . . . . . . . . . . . . 238
Exportation d’un fichier d’image optimis&eacute; . . . . . . . . . . . . . . . . . . 239
Examen de votre t&acirc;che
Durant les &eacute;tapes de planification du site Caf&eacute; Townsend, plusieurs projets
de graphiques de banni&egrave;re possibles ont &eacute;t&eacute; discut&eacute;s. Voici une esquisse du
projet approuv&eacute; par les repr&eacute;sentants de Caf&eacute; Townsend :
Vous recevez un ensemble d’actifs. Votre t&acirc;che consiste &agrave; cr&eacute;er la banni&egrave;re
finale pour le site Web en vous basant sur l’esquisse du projet.
223
Ajout d’un arri&egrave;re-plan et
placement du logo
Apr&egrave;s avoir cr&eacute;&eacute; un nouveau fichier PNG pour la banni&egrave;re, vous souhaitez
importer une photo devant servir d’image d’arri&egrave;re-plan pour le graphique.
Vous souhaitez &eacute;galement importer le logo de Caf&eacute; Townsend.
Vous commencez par cr&eacute;er un nouveau fichier PNG pour la banni&egrave;re.
Vous devez d&eacute;finir un dossier de travail avant de commencer, si ce n’est pas
d&eacute;j&agrave; fait. Pour plus d’informations, consultez la section Configuration de
votre site et de vos fichiers de projet.
1.
Dans Fireworks, cliquez sur Fichier &gt; Nouveau.
2.
Dans la bo&icirc;te de dialogue Nouveau document, ex&eacute;cutez les actions
suivantes :
■
■
3.
Entrez 700 pour la largeur et 92 pour la hauteur. Assurez-vous que
les deux mesures sont exprim&eacute;es en pixels.
D&eacute;finissez la valeur de Couleur du fond sur Personnalis&eacute;e, puis
s&eacute;lectionnez la couleur noire dans le menu des couleurs
personnalis&eacute;es.
Cliquez sur OK pour cr&eacute;er le document.
Si la fen&ecirc;tre Document n’est pas agrandie, c’est-&agrave;-dire si elle n’occupe
pas toute la surface centrale de l’&eacute;cran, agrandissez-la en cliquant sur le
bouton Agrandir (Windows) ou en activant la case Zoom (Macintosh)
dans le haut de la fen&ecirc;tre Document. Cette op&eacute;ration agrandit
consid&eacute;rablement votre espace de travail.
4.
Cliquez sur Fichier &gt; Enregistrer, puis ouvrez le dossier suivant de votre
disque dur :
local_sites/cafe_townsend/images/
5.
Nommez le fichier banner_graphic.png.
R E MA R Q UE
Sur Macintosh, s&eacute;lectionnez l’option Ajouter l’extension du nom de fichier,
si ce n’est pas d&eacute;j&agrave; fait.
6.
Cliquez sur Enregistrer.
224 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
Importation de l’image d’arri&egrave;re-plan
L’arri&egrave;re-plan du graphique de banni&egrave;re consiste en une photographie de
l’int&eacute;rieur d’un restaurant Caf&eacute; Townsend. Vous pouvez importer la
photographie dans votre document, puis l’ajuster pour qu’elle corresponde
aux dimensions de la banni&egrave;re.
1.
Tandis que le fichier banner_graphic.png est ouvert dans Fireworks,
cliquez sur Fichier &gt; Importer, puis ouvrez le dossier suivant de votre
disque dur :
local_sites/cafe_townsend/fireworks_assets/
2.
S&eacute;lectionnez cafePhoto.jpg, puis cliquez sur Ouvrir.
3.
Alignez le pointeur d’insertion sur le coin sup&eacute;rieur gauche du
document, comme dans l’illustration suivante, puis cliquez pour ins&eacute;rer
l’image.
L’image s’affiche, s&eacute;lectionn&eacute;e, sur le document. L’image est plus grande
que le document, comme l’indique le contour bleu. Pour l’ins&eacute;rer
comme vous le souhaitez, mettez &agrave; l’&eacute;chelle et positionnez la photo.
4.
Tandis que l’image est s&eacute;lectionn&eacute;e, cliquez sur l’outil Mise &agrave; l’&eacute;chelle
dans le panneau Outils (ou appuyez sur Q).
Ajout d’un arri&egrave;re-plan et placement du logo 225
5.
Effectuez un zoom arri&egrave;re pour afficher la photo tout enti&egrave;re en utilisant
le menu contextuel de d&eacute;finition du grossissement figurant dans le coin
inf&eacute;rieur droit de la fen&ecirc;tre Document.
6.
A l’aide de l’outil Mise &agrave; l’&eacute;chelle, r&eacute;duisez la taille de la photo d’environ
25 pour cent en cliquant sur le point de s&eacute;lection dans le coin inf&eacute;rieur
droit de la photo, puis en faisant glisser la souris vers le coin sup&eacute;rieur
gauche.
Le d&eacute;placement d’un point de s&eacute;lection d’angle &agrave; l’aide de l’outil Mise &agrave;
l’&eacute;chelle permet de redimensionner la photo en pr&eacute;servant ses
proportions.
.
226 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
7.
Cliquez sur la photo, puis faites-la glisser de fa&ccedil;on &agrave; ce que le document
affiche la portion de la photo qui doit &ecirc;tre visible dans la banni&egrave;re.
D&eacute;placez la photo afin de composer une image int&eacute;ressante pour
l’arri&egrave;re-plan du graphique de banni&egrave;re.
8.
Lorsque l’image vous convient, enregistrez votre travail.
Importation du logo
Vous importez ensuite un graphique vectoriel du logo Caf&eacute; Townsend. Les
graphiques vectoriels sont l’un des types de graphiques que vous cr&eacute;ez,
importez ou modifiez dans Fireworks. Pour plus d’informations, voir
Graphiques vectoriels et bitmap, page 17.
Le fichier que vous importez a &eacute;t&eacute; cr&eacute;&eacute; comme graphique vectoriel dans
Fireworks et enregistr&eacute; au format Adobe Illustrator (fichier AI),
couramment utilis&eacute; pour les travaux de conception graphique.
1.
Tandis que le fichier banner_graphic.png est ouvert dans Fireworks,
effectuez un zoom avant jusqu’&agrave; l’afficher dans la taille d’origine en
s&eacute;lectionnant la valeur 100 % dans le menu contextuel de d&eacute;finition du
grossissement si vous ne l’avez pas encore fait.
2.
Cliquez sur Fichier &gt; Importer, puis acc&eacute;dez au dossier suivant de votre
disque dur :
local_sites/cafe_townsend/fireworks_assets/
Ajout d’un arri&egrave;re-plan et placement du logo 227
3.
S&eacute;lectionnez cafeLogo.ai, puis cliquez sur Ouvrir.
La bo&icirc;te de dialogue Options de fichier vectoriel s’affiche. Vous pouvez
y d&eacute;finir le mode d’importation d’un fichier vectoriel.
4.
Cliquez sur OK pour accepter les options par d&eacute;faut.
5.
Positionnez le pointeur d’insertion &agrave; l’int&eacute;rieur du coin sup&eacute;rieur
gauche de la banni&egrave;re, puis cliquez pour ins&eacute;rer le graphique.
A ce stade, le logo n’est pas clairement visible parce qu’il s’affiche en
noir et transparent sur une image d’arri&egrave;re-plan sombre. Vous le
mettrez en surbrillance ult&eacute;rieurement afin qu’il se d&eacute;tache mieux.
6.
Enregistrez votre travail.
Organisation de vos objets &agrave;
l’aide de calques
A pr&eacute;sent que vous avez import&eacute; deux graphiques dans votre document,
vous souhaitez les organiser en calques de fa&ccedil;on &agrave; pouvoir plus ais&eacute;ment
composer la banni&egrave;re et manipuler ses &eacute;l&eacute;ments.
228 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
Vous souhaitez en particulier organiser les &eacute;l&eacute;ments sur trois calques ; un
pour l’arri&egrave;re-plan, un second pour le logo et un troisi&egrave;me pour d’autres
graphiques. Pour mieux identifier les &eacute;l&eacute;ments de chaque calque, vous
souhaitez attribuer aux calques un nom indiquant clairement leur contenu.
1.
Assurez-vous que le fichier banner_graphic.png est ouvert dans
Fireworks.
2.
Si le panneau Calques n’est pas d&eacute;j&agrave; ouvert, cliquez sur Fen&ecirc;tre &gt;
Calques.
A ce stade, le graphique de banni&egrave;re contient un seul calque nomm&eacute;
Calque 1.
3.
Au bas du panneau, cliquez sur le bouton Nouveau calque/Dupliquer &agrave;
deux reprises pour cr&eacute;er deux calques suppl&eacute;mentaires.
4.
Renommez les calques en double-cliquant sur chacun d’eux, puis en
entrant les noms suivants dans la zone de texte Nom du calque qui
s’affiche :
Pour Calque 3, Graphiques
■
Pour Calque 2, Logo
■
Pour Calque 1, Arri&egrave;re-plan
C ONS E I L
5.
■
Modifiez l’ordre d’empilage des calques en cliquant sur le calque
Graphiques et en le faisant glisser sous le calque Logo.
Il est toujours
judicieux de nommer
vos calques afin de
les identifier
facilement par la
suite. Lorsqu’un
document prend du
volume et contient
de nombreux
calques et objets, il
peut devenir difficile
de les g&eacute;rer s’ils ne
portent pas de noms
uniques.
Une ligne sombre indique l’endroit o&ugrave; l’objet sera d&eacute;pos&eacute; si vous
rel&acirc;chez le bouton de la souris &agrave; ce moment pr&eacute;cis. Pour placer un
&eacute;l&eacute;ment sur un calque, rel&acirc;chez le bouton de la souris lorsque la ligne
sombre s’affiche au bas du calque.
Organisation de vos objets &agrave; l’aide de calques 229
y
A S A VOI R . . .
En savoir plus sur les calques Les calques divisent un document Fireworks en plusieurs plans
distincts. Un document peut &ecirc;tre compos&eacute; de nombreux calques pouvant chacun contenir de nombreux
objets. Dans Fireworks, le panneau Calques r&eacute;pertorie les calques d’un document et les objets que
chacun d’eux contient.
Les objets et les calques figurant dans le panneau Calques indiquent l’ordre d’empilage de ces &eacute;l&eacute;ments
dans la composition. Les calques et les objets situ&eacute;s dans la partie sup&eacute;rieure du panneau recouvrent les
calques et les objets situ&eacute;s en dessous dans le panneau. En modifiant l’ordre d’empilage des calques ou
des objets &agrave; l’int&eacute;rieur d’un calque, vous pouvez cr&eacute;er l’effet d’objets masquant d’autres objets.
6.
Faites glisser l’image du logo (nomm&eacute;e &laquo; Groupe : 3 objets &raquo;) du calque
Arri&egrave;re-plan vers le calque Logo.
Le panneau Calques doit ressembler &agrave; ceci :
7.
Enregistrez votre travail.
Cr&eacute;ation d’un arri&egrave;re-plan
contrast&eacute; pour le logo
Le logo Caf&eacute; Townsend n’est pas clairement visible parce qu’il s’affiche en
noir et transparent sur un arri&egrave;re-plan sombre. Vous d&eacute;cidez de placer un
rectangle de couleur plus claire derri&egrave;re le logo afin de le faire ressortir
davantage.
1.
Dans le panneau Calques, cliquez sur le calque Logo.
230 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
2.
Dans le panneau Outils, cliquez sur l’outil Rectangle.
3.
Dans l’Inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les propri&eacute;t&eacute;s suivantes pour
l’outil :
a.
Activez la case Cat&eacute;gorie de remplissage, puis cliquez sur D&eacute;grad&eacute; &gt;
Lin&eacute;aire.
.
Cr&eacute;ation d’un arri&egrave;re-plan contrast&eacute; pour le logo 231
b.
Activez le s&eacute;lecteur de couleur de remplissage situ&eacute; &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne
du pot de peinture, puis cliquez sur le bouton juste au-dessus de
l’&eacute;tiquette Pr&eacute;d&eacute;fini dans la bo&icirc;te de dialogue qui s’affiche.
Une fen&ecirc;tre contextuelle s’affiche, qui vous permet de s&eacute;lectionner
la premi&egrave;re couleur de d&eacute;grad&eacute;.
232 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
c.
Entrez F7EFE3 dans la zone de texte situ&eacute;e dans le haut de la
fen&ecirc;tre, puis appuyez sur Entr&eacute;e.
La couleur initiale du d&eacute;grad&eacute; change en fonction de votre choix.
d.
Cliquez sur le second bouton de couleur de d&eacute;grad&eacute; (dans la partie
droite de la bo&icirc;te de dialogue), puis cliquez sur la nuance blanche
avec le pointeur de la pipette.
La couleur finale du d&eacute;grad&eacute; change en fonction de votre choix.
e.
Cliquez sur le bouton Opacit&eacute; correspondant &agrave; la seconde couleur
de d&eacute;grad&eacute; dans le coin sup&eacute;rieur droit de la bo&icirc;te de dialogue :
La fen&ecirc;tre contextuelle Opacit&eacute; s’affiche.
f.
Utilisez le curseur pour d&eacute;finir l’opacit&eacute; de la seconde couleur de
d&eacute;grad&eacute; sur 50 %.
Cr&eacute;ation d’un arri&egrave;re-plan contrast&eacute; pour le logo 233
4.
Appuyez sur Entr&eacute;e pour accepter les param&egrave;tres, puis tracez un
rectangle sur le logo Caf&eacute; Townsend dans la banni&egrave;re.
Lorsque vous rel&acirc;chez le bouton de la souris, un rectangle semitransparent s’affiche sur le logo.
CON S EI L
5.
Augmentez le
grossissement du
document afin de
fignoler votre travail.
S&eacute;lectionnez l’outil Pointeur (ou appuyez sur V), puis faites glisser les
points d’angle bleus du rectangle afin de positionner et de
redimensionner celui-ci de fa&ccedil;on &agrave; ce qu’il s’inscrive &agrave; l’int&eacute;rieur du
logo.
Le rectangle masque partiellement le logo situ&eacute; en dessous. Vous
souhaitez modifier l’ordre d’empilage des deux objets de fa&ccedil;on &agrave; ce que
le rectangle se trouve sous le logo.
6.
Dans le calque Logo du panneau Calques, faites glisser l’objet rectangle de
fa&ccedil;on &agrave; ce qu’il se trouve sous l’objet logo (nomm&eacute; &laquo; Groupe : 3 objets &raquo;).
Le logo s’affiche &agrave; pr&eacute;sent correctement, avec le rectangle mettant en
&eacute;vidence au lieu de masquer partiellement le logo.
7.
Enregistrez votre travail.
Cr&eacute;ation d’un contour autour de
la banni&egrave;re
Vous souhaitez cr&eacute;er un contour noir autour de la banni&egrave;re. Pour cr&eacute;er cet
effet, vous d&eacute;cidez d’utiliser un rectangle arrondi comme masque vectoriel.
Un masque vectoriel recadre ou d&eacute;coupe l’objet sous-jacent en fonction de
la forme de son trajet, en cr&eacute;ant un effet d’emporte-pi&egrave;ce.
1.
Cliquez sur le calque Arri&egrave;re-plan dans le panneau Calques.
234 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
2.
Dans la section Vecteur du panneau Outils, s&eacute;lectionnez l’outil
Rectangle arrondi.
3.
Dans l’Inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les propri&eacute;t&eacute;s suivantes pour
l’outil :
■
■
■
Dans le menu contextuel Cat&eacute;gorie de remplissage, cliquez sur
Aucune.
Activez le s&eacute;lecteur de couleur &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du crayon, puis
d&eacute;finissez la couleur de trait sur une nuance de gris clair, telle que
#666666.
D&eacute;finissez la pointe de trait sur 1 et la cat&eacute;gorie de trait sur 1 pixel
adouci.
Cr&eacute;ation d’un contour autour de la banni&egrave;re 235
4.
Sur le document, tracez et positionnez le rectangle arrondi &agrave; l’int&eacute;rieur
de la banni&egrave;re.
La zone &agrave; l’ext&eacute;rieur du rectangle arrondi s’affiche en noir, formant le
contour de la banni&egrave;re.
Utilisez les points de s&eacute;lection bleus pour ajuster la taille de la forme.
Utilisez les points de contr&ocirc;le en forme de losange jaune pour ajuster
l’arrondi des angles.
5.
Tandis que le rectangle arrondi est s&eacute;lectionn&eacute;, cliquez sur Edition &gt;
Couper.
6.
Dans le panneau Calques, cliquez sur la photo d’arri&egrave;re-plan (appel&eacute;e
&laquo; Bitmap &raquo;) sur le calque Arri&egrave;re-plan.
Vous souhaitez appliquer le masque &agrave; cet objet.
7.
Cliquez sur Edition &gt; Coller en tant que masque pour appliquer le
masque &agrave; la photo.
Sur le document, la zone couverte par le rectangle arrondi est visible. La
zone ext&eacute;rieure est masqu&eacute;e.
Dans le panneau Calques, une vignette de masque s’affiche &agrave; c&ocirc;t&eacute; de la
photo d’arri&egrave;re-plan. La surbrillance verte autour de la vignette du
masque indique qu’elle est s&eacute;lectionn&eacute;e.
8.
Enregistrez votre travail.
236 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
Cr&eacute;ation d’un effet de bord
oblique
Vous souhaitez cr&eacute;er un effet de bord oblique dans la banni&egrave;re, comme
illustr&eacute; dans l’esquisse de banni&egrave;re (voir Examen de votre t&acirc;che, page 223).
Pour produire cet effet, vous d&eacute;cidez de cr&eacute;er une forme et de l’utiliser
comme masque.
1.
Dans le panneau Calques, cliquez sur le calque Graphiques.
2.
Dans le panneau Outils, cliquez sur l’outil Plume.
3.
Dans l’Inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les propri&eacute;t&eacute;s suivantes pour
l’outil Plume :
■
■
■
4.
Activez le s&eacute;lecteur de couleur de trait &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du crayon,
puis cliquez sur le bouton Transparent.
Dans le menu contextuel Cat&eacute;gorie de remplissage, cliquez sur
Unie.
Activez le s&eacute;lecteur de couleur de remplissage &agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne du
pot de peinture, puis s&eacute;lectionnez la nuance noire &agrave; l’aide du
pointeur de la pipette.
Dans la fen&ecirc;tre Document &agrave; l’ext&eacute;rieur du document, cliquez quatre fois
pour tracer une forme rectangulaire, puis cliquez sur le premier point
pour fermer la forme.
Votre rectangle doit &ecirc;tre un peu plus haut que le graphique de banni&egrave;re
et doit avoir environ un tiers de sa longueur.
Cr&eacute;ation d’un effet de bord oblique 237
5.
S&eacute;lectionnez l’outil Pointeur (ou appuyez sur V), puis d&eacute;placez la forme
de fa&ccedil;on &agrave; ce qu’elle couvre le c&ocirc;t&eacute; gauche de la banni&egrave;re.
R EM A R QU E
Comme la forme se trouve sur le calque Graphiques, elle masque
partiellement l’image d’arri&egrave;re-plan mais pas le logo. Conform&eacute;ment &agrave; l’ordre
d’empilage indiqu&eacute; dans le panneau Calques, le calque Logo se trouve audessus du calque Graphiques tandis que le calque Arri&egrave;re-plan se trouve en
dessous.
6.
Cliquez sur l’outil Sous-s&eacute;lection (ou appuyez sur A), puis sur les points
d’ancrage de la forme afin de l’ajuster de fa&ccedil;on &agrave; ce que son c&ocirc;t&eacute; droit
soit oblique, comme suit.
7.
Enregistrez votre travail.
Ajout d’une ligne de balise &agrave; la
banni&egrave;re
Ensuite, vous ajoutez la ligne de balise de la soci&eacute;t&eacute;, Nouveau World
Cuisine, &agrave; la banni&egrave;re.
1.
Dans le panneau Calques, cliquez sur le calque Graphiques.
2.
Dans le panneau Outils, cliquez sur l’outil Texte.
3.
Dans l’Inspecteur des propri&eacute;t&eacute;s, d&eacute;finissez les propri&eacute;t&eacute;s suivantes pour
l’outil :
■
Dans le menu contextuel Police, cliquez sur Arial.
■
Entrez 14 pour la taille de la police.
■
Cliquez sur le bouton Gras.
■
■
Activez la zone Couleur, entrez F7EFE3 comme couleur de texte,
puis appuyez sur Entr&eacute;e.
Cliquez sur le bouton Alignement &agrave; gauche.
238 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
4.
Cliquez sous le graphique du logo, puis entrez Nouveau World Cuisine.
5.
Cliquez une fois en dehors du bloc de texte pour appliquer votre entr&eacute;e
de texte.
Fireworks cr&eacute;e un nouvel objet texte sur le calque Graphiques, dont le
nom par d&eacute;faut correspond au texte que vous avez entr&eacute;. Cette fonction
vous offre la possibilit&eacute; d’identifier rapidement les objets texte que vous
utilisez dans votre composition.
6.
Enregistrez votre travail.
Exportation d’un fichier d’image
optimis&eacute;
A pr&eacute;sent que vous avez termin&eacute; le graphique de banni&egrave;re, vous &ecirc;tes pr&ecirc;t &agrave;
optimiser et exporter l’image comme fichier JPEG.
y
A S A VOI R . . .
La gageure de la conception de graphiques Web consiste &agrave; cr&eacute;er des images sophistiqu&eacute;es pouvant &ecirc;tre
charg&eacute;es le plus vite possible. Pour ce faire, vous devez r&eacute;duire la taille de fichier de votre image, tout en
pr&eacute;servant le plus possible la qualit&eacute;. Cette recherche du meilleur compromis est appel&eacute;e optimisation :
elle consiste &agrave; trouver les valeurs les mieux adapt&eacute;es pour le nombre de couleurs, le niveau de
compression et la qualit&eacute;.
Exportation d’un fichier d’image optimis&eacute; 239
Optimisation et aper&ccedil;u de l’image
Avant d’exporter un document Fireworks, vous devez toujours commencer
par l’optimiser. L’optimisation permet d’exporter une image avec le
meilleur compromis possible entre compression et qualit&eacute;.
1.
Si le panneau Optimiser n’est pas encore ouvert, cliquez sur Fen&ecirc;tre &gt;
Optimiser pour l’ouvrir.
2.
Dans le menu contextuel Param&egrave;tres, cliquez sur JPEG – Qualit&eacute;
sup&eacute;rieure.
Les options du panneau se modifient afin de refl&eacute;ter le nouveau
param&egrave;tre.
Il est possible de modifier ces param&egrave;tres mais, pour ce didacticiel, vous
utiliserez les param&egrave;tres par d&eacute;faut.
240 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
3.
Cliquez sur le bouton Aper&ccedil;u en haut &agrave; gauche de la fen&ecirc;tre Document.
Fireworks affiche le document tel qu’il se pr&eacute;sentera apr&egrave;s exportation
avec les param&egrave;tres actuels.
En bas &agrave; gauche de la fen&ecirc;tre, Fireworks affiche la taille du fichier
export&eacute; et l’estimation du temps n&eacute;cessaire pour afficher l’image sur le
Web.
R E MA R Q UE
Lors de l’aper&ccedil;u de l’image, vous pouvez essayer diff&eacute;rents param&egrave;tres de
qualit&eacute; dans le panneau Optimiser et voir leur effet sur l’image.
Exportation de l’image
Apr&egrave;s avoir s&eacute;lectionn&eacute; vos param&egrave;tres d’optimisation, exportez l’image
comme fichier JPEG.
1.
Cliquez sur Fichier &gt; Exporter.
Le nom de fichier r&eacute;pertori&eacute; poss&egrave;de une extension .jpg. Fireworks a
choisi ce format de fichier car vous l’avez s&eacute;lectionn&eacute; dans le panneau
Optimiser.
2.
Ouvrez le dossier suivant de votre disque dur :
local_sites/cafe_townsend/images/
Exportation d’un fichier d’image optimis&eacute; 241
3.
Assurez-vous que le menu contextuel Type (Windows) ou Enregistrer
sous (Macintosh) indique Images uniquement, puis cliquez sur
Exporter.
Le fichier JPEG est export&eacute; vers le dossier images.
Rappelez-vous que le fichier PNG est votre fichier source ou fichier de
travail. Bien que vous ayez export&eacute; votre document au format JPEG,
vous devez &eacute;galement enregistrer le fichier PNG de mani&egrave;re &agrave; ce que
toute modification apport&eacute;e par vos soins se refl&egrave;te &eacute;galement dans le
fichier source.
4.
Cliquez sur Fichier &gt; Enregistrer pour enregistrer les modifications dans
le fichier PNG.
Affichage de l’image export&eacute;e
Votre graphique de banni&egrave;re est termin&eacute;. Comparez le fichier JPEG cr&eacute;&eacute;
durant le processus d’exportation au fichier PNG sur lequel vous avez
travaill&eacute;.
■
Dans Fireworks, cliquez sur Fichier &gt; Ouvrir, ouvrez le dossier images,
puis double-cliquez sur le fichier banner_graphic.jpg.
R EM A R QU E
Si le fichier ne figure pas dans le dossier images, dans le menu contextuel
Fichiers de type, cliquez sur JPEG.
242 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
L’image JPEG s’ouvre dans Fireworks. Comme les images JPEG sont des
bitmaps, l’ensemble des objets et des calques sont fusionn&eacute;s dans le
panneau Calques.
L’Inspecteur des propri&eacute;t&eacute;s n’affiche que quelques propri&eacute;t&eacute;s. Toutes les
propri&eacute;t&eacute;s disponibles dans le fichier PNG ne sont plus disponibles dans
un fichier JPEG.
Vous disposez toujours de votre fichier PNG source de sorte que, si vous
devez travailler davantage sur le projet, vous pouvez modifier le fichier
PNG et l’exporter de nouveau. Il est toujours possible de modifier un
fichier PNG, m&ecirc;me si vous exportez l’image sous un autre format, tel que
JPEG.
Dans le cadre de ce didacticiel, vous avez accompli le travail requis pour
cr&eacute;er un graphique de banni&egrave;re dans Fireworks. Vous avez appris &agrave; cr&eacute;er un
nouveau document et &agrave; importer des images. Vous avez &eacute;galement
manipul&eacute; des calques, des formes, des masques et du texte. Enfin, vous avez
optimis&eacute; et export&eacute; l’image termin&eacute;e.
Pour plus d’informations sur certaines des fonctions mentionn&eacute;es dans ce
didacticiel et sur d’autres fonctions de Fireworks, voir le manuel Utilisation
de Fireworks.
Exportation d’un fichier d’image optimis&eacute; 243
244 Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page
CHAPITRE 9
Didacticiel : Cr&eacute;ation de votre
premi&egrave;re application Flash
9
Ce didacticiel va vous apprendre &agrave; cr&eacute;er une application simple &agrave; l’aide de
quelques fonctions de programmation de Macromedia Flash Basic 8 et
Flash Professionnel 8. Une application Flash peut aller du plus simple et
contenir un contenu interactif, au plus complexe, telle une application
&eacute;labor&eacute;e qui interagit avec diff&eacute;rentes sources de donn&eacute;es.
Si ce n’est d&eacute;j&agrave; fait, Macromedia vous recommande, avant de suivre ce
didacticiel, de lire Notions de base de Flash, page 65.
Vous pouvez imprimer ce didacticiel en t&eacute;l&eacute;chargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible &agrave; l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les t&acirc;ches suivantes :
Examinez votre t&acirc;che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Etude de l’application finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Cr&eacute;ation d’un document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Cr&eacute;ation de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Edition d’un symbole de sc&eacute;nario . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Ajout d’actions &agrave; des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Ajout d’&eacute;tiquettes &agrave; des images . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Ajout d’une interpolation de mouvement . . . . . . . . . . . . . . . . . . . . 261
Edition du sc&eacute;nario principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Cr&eacute;ation de la bordure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajout d’un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Ajout d’une zone de texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272
Ajout du clip sur la sc&egrave;ne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275
Ajout d’un composant Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275
Ajout de code ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276
Publication de votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
245
Examinez votre t&acirc;che
Dans ce didacticiel, vous allez cr&eacute;er un type d’application portant le nom
de Zone de message flexible ou FMA pour le site Web d’un restaurant fictif
nomm&eacute; Cafe Townsend. Une FMA est un type courant d’application Flash
permettant d’afficher du contenu communiquant un message de type
informatif ou marketing au public. Dans le cas pr&eacute;sent, la FMA affiche des
photographies d’&eacute;l&eacute;ments extraits d’un menu de restaurant. Le site Web de
Macromedia utilise une FMA pour afficher des informations relatives aux
nouveaux produits logiciels ou d’autres messages publicitaires. Leur nom
de zone de messagerie flexible vient du fait qu’elles occupent g&eacute;n&eacute;ralement
une partie de la page Web qui est r&eacute;serv&eacute;e au contenu susceptible de
changer en fonction des besoins de l’entreprise ou du site Web. Par
exemple, si le restaurant fictif Caf&eacute; Townsend a pr&eacute;vu un &eacute;v&eacute;nement
particulier, sa FMA pourra &ecirc;tre modifi&eacute;e de mani&egrave;re &agrave; afficher les
informations d&eacute;taill&eacute;es de cet &eacute;v&eacute;nement &agrave; la place des &eacute;l&eacute;ments du menu
du restaurant.
Dans ce didacticiel, vous allez d’abord vous familiariser avec une FMA,
puis vous cr&eacute;erez votre propre document Flash avant de publier
l’application pour le web. Le didacticiel dure environ 30 minutes.
La FMA termin&eacute;e
Etude de l’application finale
En examinant la version termin&eacute;e de l’application que vous &ecirc;tes sur le point
de cr&eacute;er, vous d&eacute;couvrirez &eacute;galement l’espace de travail Flash.
Les sections suivantes de ce didacticiel pr&eacute;sentent les &eacute;tapes &agrave; suivre pour
cr&eacute;er l’application vous-m&ecirc;me.
246 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Ex&eacute;cution de l’application finale
Pour mieux comprendre le type d’application que vous allez cr&eacute;er dans le
cadre de ce didacticiel, vous pouvez examiner une version finale de fichier
FLA de l’application dans l’outil de programmation de Flash. Les fichiers
FLA repr&eacute;sentent le type de fichiers utilis&eacute;s dans Flash. Vous pouvez
&eacute;galement lire la version SWF du fichier dans Flash Player. La version SWF
repr&eacute;sente la version du fichier que vous publierez dans une page web.
Pour lire la version SWF du fichier dans Flash Player :
1.
Dans Flash, choisissez Fichier &gt; Ouvrir.
2.
Localisez le fichier final en utilisant l’un des chemins suivants :
■
Acc&eacute;dez au fichier termin&eacute; dans le dossier lo
cal_sites\cafe_townsend\completed files\flash que vous avez copi&eacute;
sur votre disque dur dans le Chapitre 4, Didacticiel : Configuration
de votre site et des fichiers de projet et double-cliquez sur
video_pod_finished.swf.
L’application finale s’ex&eacute;cute dans Flash Player. Cliquez sur Suivant
pour voir changer les images de plats sous l’effet de l’animation.
3.
Apr&egrave;s avoir affich&eacute; l’application, fermez la fen&ecirc;tre Flash Player.
Ouverture du document de programmation
Il est utile d’examiner le fichier FLA correspondant au document de
programmation final pour comprendre comment l’auteur a con&ccedil;u
l’application.
Pour afficher la version de programmation du fichier dans
Flash :
1.
Dans Flash, choisissez Fichier &gt; Ouvrir.
2.
Localisez le document de programmation en utilisant un des chemins
suivants :
■
Acc&eacute;dez au fichier termin&eacute; dans le dossier lo
cal_sites\cafe_townsend\completed files\flash que vous avez copi&eacute;
sur votre disque dur dans le Chapitre 4, Didacticiel : Configuration
de votre site et des fichiers de projet et double-cliquez sur
video_pod_finished.swf.
L’application finale du didacticiel est affich&eacute;e dans l’environnement de
programmation Flash.
Etude de l’application finale 247
3.
Une fois le fichier ouvert, vous pouvez examiner la sc&egrave;ne, le panneau
Biblioth&egrave;que et le sc&eacute;nario.
■
■
■
■
La sc&egrave;ne comporte de nombreuses formes graphiques que vous
apprendrez &agrave; cr&eacute;er ult&eacute;rieurement dans ce didacticiel.
Le panneau Biblioth&egrave;que contient une liste de symboles ou
ressources r&eacute;utilisables utilis&eacute;s par le document.
Quant au sc&eacute;nario, il d&eacute;crit quand et comment faire appara&icirc;tre ces
symboles sur la sc&egrave;ne.
Le panneau Actions contient du code ActionScript qui contr&ocirc;le la
navigation dans le document Flash et importe des fichiers d’image &agrave;
afficher lors de la lecture de ce document.
Vous en apprendrez davantage sur le r&ocirc;le de chacun de ces &eacute;l&eacute;ments de
Flash tout au long de ce didacticiel.
4.
Lorsque vous avez examin&eacute; le document termin&eacute;, fermez-le en &eacute;vitant
d’enregistrer la moindre modification.
Cr&eacute;ation d’un document
Maintenant que l’application finale que vous &ecirc;tes sur le point de cr&eacute;er vous
a &eacute;t&eacute; pr&eacute;sent&eacute;e, vous pouvez cr&eacute;er votre propre document Flash.
Vous devez d&eacute;finir un dossier de travail avant de commencer, si ce n’est pas
d&eacute;j&agrave; fait. Pour plus d’informations, consultez la section Configuration de
votre site et de vos fichiers de projet.
Pour savoir comment cr&eacute;er une application dans Flash, vous devez
commencer par la toute premi&egrave;re &eacute;tape du processus : la cr&eacute;ation d’un
fichier.
Ouverture d’un nouveau document
Vous &ecirc;tes pr&ecirc;t &agrave; cr&eacute;er votre propre version de la FMA.
Pour cr&eacute;er un document :
1.
Choisissez Fichier &gt; Nouveau.
2.
Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez Document
Flash et cliquez sur OK.
3.
Choisissez Fichier &gt; Enregistrer.
248 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
4.
Entrez un nom pour le ficher flash_fma.fla puis enregistrez-le dans le
dossier cafe_townsend que vous avez copi&eacute; dans le dossier local_sites sur
votre disque dur.
R E MA R Q UE
Pensez &agrave; enregistrer votre fichier r&eacute;guli&egrave;rement tout au long de ce
didacticiel.
D&eacute;finition des propri&eacute;t&eacute;s du document
La configuration des propri&eacute;t&eacute;s du document est la premi&egrave;re &eacute;tape du
processus de cr&eacute;ation dans Flash. Vous pouvez modifier les propri&eacute;t&eacute;s du
document &agrave; tout moment, mais il est recommand&eacute; de prendre certaines
d&eacute;cisions au d&eacute;but du processus, comme par exemple le choix de la taille de
la sc&egrave;ne ou de la couleur de l’arri&egrave;re-plan.
Les propri&eacute;t&eacute;s du document correspondent aux propri&eacute;t&eacute;s qui s’appliquent
&agrave; l’ensemble du document Flash, telles que la taille de la sc&egrave;ne ou la couleur
d’arri&egrave;re-plan. Vous pouvez utiliser l’inspecteur des propri&eacute;t&eacute;s pour
sp&eacute;cifier ces param&egrave;tres.
Cr&eacute;ation d’un document 249
Pour d&eacute;finir les propri&eacute;t&eacute;s du document :
1.
S’il n’est pas d&eacute;j&agrave; ouvert, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s &gt; Propri&eacute;t&eacute;s.
Par d&eacute;faut, l’inspecteur des propri&eacute;t&eacute;s se trouve dans le bas de la fen&ecirc;tre
de l’application Flash.
L’inspecteur des propri&eacute;t&eacute;s
R EM A R QU E
Si l’inspecteur des propri&eacute;t&eacute;s n’est pas compl&egrave;tement d&eacute;velopp&eacute;, cliquez
sur le triangle blanc dans le coin inf&eacute;rieur droit.
2.
Entrez 60 dans la zone de texte Cadence de l’inspecteur des propri&eacute;t&eacute;s.
L’application lira les animations &agrave; une cadence de 60 images par
seconde, soit la cadence optimale de lecture fluide d’une animation sur
le web.
3.
Cliquez sur Taille pour fixer la taille de la sc&egrave;ne.
A S A VO I R . ..
Pr&eacute;sentation de l’inspecteur des propri&eacute;t&eacute;s L’inspecteur des propri&eacute;t&eacute;s permet d’afficher et de
modifier les propri&eacute;t&eacute;s des objets s&eacute;lectionn&eacute;s. Ces propri&eacute;t&eacute;s d&eacute;pendent du type d’objet s&eacute;lectionn&eacute;.
Par exemple, si vous choisissez un objet texte, l’inspecteur des propri&eacute;t&eacute;s affiche les param&egrave;tres
d’affichage et de modification des attributs de texte. Dans le cas pr&eacute;sent, vous venez d’ouvrir un nouveau
document, ce qui explique que l’inspecteur des propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s d’un document.
250 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
4.
Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s du document, entrez 700 pour la
largeur et 150 pour la hauteur, puis cliquez sur OK.
Flash ins&egrave;re automatiquement l’indication px (c.-&agrave;-d. pixel) apr&egrave;s ces
nombres.
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s du document
5.
Dans le sc&eacute;narion, cliquez sur la valeur dans le menu Zoom et entrez
75%.
De la sorte, il est plus facile de voir votre document entier dans la
fen&ecirc;tre de document.
Appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
6.
Enregistrez votre travail.
Pour plus d’informations sur la d&eacute;finition des propri&eacute;t&eacute;s d’un document,
consultez la section Cr&eacute;ation et ouverture d'un document et d&eacute;finition de ses
propri&eacute;t&eacute;s du guide Utilisation de Flash.
Cr&eacute;ation d’un document 251
Cr&eacute;ation de symboles
Vous allez &agrave; pr&eacute;sent cr&eacute;er quelques symboles, c’est-&agrave;-dire des actifs
r&eacute;utilisables. Les symboles permettent d’utiliser la m&ecirc;me ressource
plusieurs fois sans avoir &agrave; en enregistrer plusieurs copies dans votre fichier
FLA. Stockez le symbole dans le panneau Biblioth&egrave;que, puis faites glisser
des occurrences de ce symbole sur la sc&egrave;ne lorsque n&eacute;cessaire.
Pour cr&eacute;er le symbole :
1.
S&eacute;lectionnez Insertion &gt; Nouveau symbole.
2.
Dans la bo&icirc;te de dialogue Cr&eacute;er un nouveau symbole, tapez
imageHolder dans le champ de texte Nom.
La valeur par d&eacute;faut du Comportement est Animation. Ne la modifiez
pas.
3.
Cliquez sur OK.
Le nouveau symbole est ajout&eacute; au panneau Biblioth&egrave;que (Fen&ecirc;tre &gt;
Biblioth&egrave;que) et Flash passe en mode d’&eacute;dition de symbole.
R E MA R Q UE
En mode d’&eacute;dition de symbole, la sc&egrave;ne dispara&icirc;t et la partie principale de
la fen&ecirc;tre de l’application Flash devient une zone de dessin o&ugrave; vous
pouvez tracer et modifier le symbole.
4.
En mode d’&eacute;dition de symbole, s&eacute;lectionnez l’outil Rectangle du
panneau Outils (Fen&ecirc;tre &gt; Outils).
A S A VOI R . . .
Pr&eacute;sentation des symboles et du panneau Biblioth&egrave;que Les symboles sont des ressources
r&eacute;utilisables qui vous permettent d’utiliser une seule ressource plusieurs fois dans votre document Flash
sans avoir &agrave; la dupliquer dans le fichier. En ne stockant qu’un exemplaire du symbole dans le document
Flash, vous faites en sorte que sa taille soit r&eacute;duite.
Un symbole peut &ecirc;tre simple, par exemple un bouton ou un graphique, ou plus complexe, par exemple un
clip. Lorsque vous avez cr&eacute;&eacute; un symbole, vous le stockez dans le panneau Biblioth&egrave;que. Le panneau
Biblioth&egrave;que sert &agrave; stocker et organiser tous les symboles de votre document. Pour r&eacute;utiliser un symbole,
il suffit de le faire glisser du panneau Biblioth&egrave;que sur la sc&egrave;ne. Ce faisant, Flash cr&eacute;e une nouvelle
occurrence du symbole sur la sc&egrave;ne. Une occurrence n’est rien d’autre qu’une r&eacute;f&eacute;rence au symbole
d’origine, qui indique &agrave; Flash qu’il soit &laquo; dessiner une copie du symbole sp&eacute;cifi&eacute; &agrave; cet endroit &raquo;.
L’emploi de symboles et d’occurrences vous permet d’organiser vos actifs et de r&eacute;duire la taille de votre
fichier Flash. En outre, vous pouvez mettre &agrave; jour l’apparence ou le comportement de toutes les
occurrences d’un symbole pr&eacute;cis en modifiant le symbole. Les modifications s’appliqueront &agrave; toutes les
occurrences du symbole dans votre document.
252 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
5.
S&eacute;lectionnez la couleur blanc (#FFFFFF) dans le s&eacute;lecteur de couleur de
trait du panneau Outils.
6.
S&eacute;lectionnez la couleur gris clair (#CCCCCC) dans le s&eacute;lecteur de
couleur de remplissage du panneau Outils.
7.
D&eacute;placez la souris dans la zone de dessin tout en maintenant le bouton
enfonc&eacute;, de mani&egrave;re &agrave; dessiner un large rectangle aplati.
8.
Cliquez sur l’outil de s&eacute;lection dans le panneau Outils.
9.
Double-cliquez sur le rectangle que vous avez dessin&eacute; afin de
s&eacute;lectionner son remplissage et son trait.
R E MA R Q UE
Le trait repr&eacute;sente la ligne qui constitue la bordure d’une forme.
0 dans les deux zones de texte X et Y de l’inspecteur des
propri&eacute;t&eacute;s.
10. Entrez
Le coin sup&eacute;rieur gauche du symbole est ainsi plac&eacute; dans le coin
sup&eacute;rieur gauche de la sc&egrave;ne.
11.
Tapez 700 dans la zone Largeur (L) et 150 dans la zone Hauteur (H),
puis appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh).
L’inspecteur des propri&eacute;t&eacute;s affichant les valeurs correctes pour X, Y, la
largeur et la hauteur
R EM A R QU E
Lorsque vous entrez des valeurs dans les zones de texte d’un panneau,
vous devez appuyer soit sur la touche Tab, soit sur la touche Entr&eacute;e
(Windows) ou la touche Retour (Macintosh) pour permettre &agrave; Flash de
reconna&icirc;tre la valeur.
Cr&eacute;ation de symboles 253
Des occurrences distinctes de ce premier symbole que vous venez de cr&eacute;er
deviendront les conteneurs des diff&eacute;rentes images que votre FMA affichera.
C’est pourquoi vous l’avez appel&eacute; imageHolder. Vous allez ensuite cr&eacute;er un
autre symbole qui contiendra un groupe de 5 occurrences du symbole
imageHolder. Par la suite, vous animerez de nouveau symbole &agrave; la verticale
de mani&egrave;re &agrave; modifier l’image qui appara&icirc;t sur la partie visible de la sc&egrave;ne.
Pour cr&eacute;er le symbole suivant avec 5 occurrences
d’imageHolder :
1.
S&eacute;lectionnez Insertion &gt; Nouveau symbole.
2.
Dans la bo&icirc;te de dialogue Cr&eacute;er un nouveau symbole, tapez diapositives
dans le champ de texte Nom puis cliquez sur OK.
Vous restez en mode d’&eacute;dition de symbole.
3.
S&eacute;lectionnez 25% dans le menu Zoom du sc&eacute;nario.
4.
Dans le panneau Biblioth&egrave;que (Fen&ecirc;tre &gt; Biblioth&egrave;que), tirez le symbole
imageHolder dans la zone de dessin.
Vous venez de cr&eacute;er une occurrence du symbole imageHolder. Cette
occurrence fait partie du symbole des nouvelles diapositives en cours de
cr&eacute;ation.
5.
La nouvelle occurrence &eacute;tant toujours s&eacute;lectionn&eacute;e sur la sc&egrave;ne, tapez
holder0 dans la zone Nom de l’occurrence de l’inspecteur des
propri&eacute;t&eacute;s.
L’occurrence dispose ainsi de son propre nom qui est diff&eacute;rent de celui
du symbole.
6.
Entrez &eacute;galement 0 dans les deux zones de texte X et Y de l’inspecteur
des propri&eacute;t&eacute;s puis appuyez sur Entr&eacute;e (Windows) ou Retour
(Macintosh).
Le coin sup&eacute;rieur gauche de l’occurrence holder0 est ainsi plac&eacute; dans le
coin sup&eacute;rieur gauche du symbole des diapositives.
7.
Tirez le symbole imageHolder dans la zone de dessin &agrave; partir du
panneau Biblioth&egrave;que, puis placez-le juste sous l’occurrence holder0.
8.
Dans l’inspecteur des propri&eacute;t&eacute;s, entrez holder1 dans la zone de texte
Nom de l’occurrence.
9.
Entrez 0 dans la zone X et 150 dans la zone Y, puis appuyez sur Entr&eacute;e
ou Retour.
254 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
10. R&eacute;p&eacute;tez
la proc&eacute;dure pour les troisi&egrave;me, quatri&egrave;me et cinqui&egrave;me
occurrences du symbole imageHolder.
Dans l’inspecteur des propri&eacute;t&eacute;s, attribuez les propri&eacute;t&eacute;s suivantes aux
nouvelles occurrences :
Troisi&egrave;me occurrence :
■
Nom d’occurrence = holder2
■
X=0
■
Y = 300
Quatri&egrave;me occurrence :
■
Nom d’occurrence = holder3
■
X=0
■
Y = 450
Cinqui&egrave;me occurrence :
■
Nom d’occurrence = holder4
■
X=0
■
Y = 600
Vous avez termin&eacute; la cr&eacute;ation du symbole nomm&eacute; &laquo; slides &raquo;. Vous allez
ensuite cr&eacute;er un troisi&egrave;me symbole qui contiendra une occurrence du
symbole &laquo; slides &raquo;. Comme vous pouvez le constater, l’imbrication
d’occurrences de symboles &agrave; l’int&eacute;rieur d’autres symboles est une technique
courante de programmation Flash.
Le symbole &laquo; slides &raquo; termin&eacute;
Cr&eacute;ation de symboles 255
Pour cr&eacute;er le troisi&egrave;me symbole :
1.
S&eacute;lectionnez Insertion &gt; Nouveau symbole.
2.
Dans la bo&icirc;te de dialogue Cr&eacute;er un nouveau symbole, tapez slideShow
dans le champ de texte Nom puis cliquez sur OK.
3.
Tirez le symbole slides, que vous avez cr&eacute;&eacute; dans la section pr&eacute;c&eacute;dente, du
panneau Biblioth&egrave;que vers la zone de dessin du nouveau symbole
slideShow.
Une occurrence du symbole diapositives est ainsi cr&eacute;&eacute;e &agrave; l’int&eacute;rieur du
nouveau symbole diaporama.
Le panneau Biblioth&egrave;que avec les symboles slides et slideShow
4.
L’occurrence du symbole &eacute;tant toujours s&eacute;lectionn&eacute;e, entrez 0 dans les
zones X et Y de l’inspecteur des propri&eacute;t&eacute;s.
5.
Entrez slides_mc dans la zone de texte Nom de l’inspecteur des
propri&eacute;t&eacute;s.
Edition d’un symbole de sc&eacute;nario
Une fois ces 3 symboles cr&eacute;&eacute;s, vous allez modifier le symbole slideShow en
ajoutant une animation &agrave; son sc&eacute;nario. Cette animation provoquera, dans
le document termin&eacute;, le glissement vers le haut des images de plats lorsque
l’utilisateur cliquera sur un bouton que vous ajouterez ult&eacute;rieurement.
256 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Pour modifier le symbole diaporama :
1.
Sans quitter le mode d’&eacute;dition de symbole, cliquez sur le bouton Ins&eacute;rer
un calque dans le sc&eacute;nario.
Le bouton Ins&eacute;rer un calque dans le sc&eacute;nario du symbole slideShow
Un calque est ainsi ajout&eacute; au sc&eacute;nario du symbole slideShow.
2.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 20 des calques 1 et 2.
S&eacute;lection de l’image 20 des calques 1 et 2
A S A V OI R . ..
Pr&eacute;sentation des clips et des sc&eacute;narios imbriqu&eacute;s Chaque symbole de clip peut poss&eacute;der son propre
sc&eacute;nario, qui permet au clip de contenir une animation ou du code ActionScript sp&eacute;cifique. C’est la raison
pour laquelle le nom du symbole que vous &ecirc;tes en train de modifier s’affiche en haut du sc&eacute;nario lorsque
vous &ecirc;tes en mode d’&eacute;dition de symbole.
L’emploi de symboles et de sc&eacute;narios imbriqu&eacute;s vous offre une grande flexibilit&eacute; dans la mani&egrave;re de cr&eacute;er
votre document Flash et d’organiser ses fonctionnalit&eacute;s. Un exemple classique d’une telle situation
consiste en une voiture qui traverse la sc&egrave;ne et dont les roues tournent. L’animation de la voiture
traversant la sc&egrave;ne pourra &ecirc;tre plac&eacute;e dans le sc&eacute;nario principal du document Flash. Chacune des roues
en mouvement devra correspondre &agrave; une occurrence d’un symbole du clip poss&eacute;dant son propre
sc&eacute;nario. L’animation de rotation des roues sera mise en oeuvre dans le sc&eacute;nario du clip. Cette approche
est bien plus facile &agrave; d&eacute;ployer que la cr&eacute;ation d’une animation dans le sc&eacute;nario principal des roues, qui
tournent et traversent toutes les deux la sc&egrave;ne.
Edition d’un symbole de sc&eacute;nario 257
3.
Choisissez Modification &gt; Sc&eacute;nario &gt; Convertir en images-cl&eacute;s.
Vous ajoutez ainsi des images au sc&eacute;nario et des images-cl&eacute;s aux images
s&eacute;lectionn&eacute;es (image 20).
Le sc&eacute;nario avec les images-cl&eacute;s ajout&eacute;es &agrave; l’image 20
4.
R&eacute;p&eacute;tez l’op&eacute;ration en s&eacute;lectionnant les calques 1 et 2 &agrave; l’image 40 puis
en choisissant Modification &gt; Sc&eacute;nario &gt; Convertir en images-cl&eacute;s.
5.
R&eacute;p&eacute;tez l’op&eacute;ration aux images 60 et 80.
Utilisez au besoin la barre de d&eacute;filement situ&eacute;e en bas du sc&eacute;nario pour
afficher ces images.
Ajout d’actions &agrave; des images
Dans cette section, vous ajouterez une petite quantit&eacute; de code ActionScript
pour contr&ocirc;ler le d&eacute;placement de la t&ecirc;te de lecture dans le sc&eacute;nario du clip
slideShow. En ajoutant des m&eacute;thodes stop(), vous forcez la t&ecirc;te de
lecture &agrave; s’arr&ecirc;ter &agrave; attendre &agrave; certaines images. Vous ajouterez par la suite
du code ActionScript pour faire de nouveau bouger la t&ecirc;te de lecture.
Pour ajouter le code ActionScript :
1.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 1 du calque 2.
2.
Choisissez Modification &gt; Sc&eacute;nario &gt; Convertir en images-cl&eacute;s.
Une image-cl&eacute; est ainsi ajout&eacute;e &agrave; l’image, si bien qu’il existe des
images-cl&eacute;s dans les images 1 et 2 du calque 2.
3.
S&eacute;lectionnez l’image 1 du calque 2.
258 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
4.
Ouvrez le panneau Actions (Fen&ecirc;tre &gt; Actions).
Dans le panneau Actions, le mode Assistant de script est activ&eacute; : vous
verrez la mention &laquo; Double-cliquez sur l’&eacute;l&eacute;ment que vous souhaitez
ajouter ou faites-le glisser sur la fen&ecirc;tre des scripts &raquo;, et il vous sera
impossible de taper dans la fen&ecirc;tre des scripts. Cliquez sur le bouton
Assistant de script du panneau Actions pour quitter le mode Assistant
de script.
5.
Dans le panneau Actions, tapez le code ActionScript suivant :
stop();
Ce code entra&icirc;ne l’arr&ecirc;t de la t&ecirc;te de lecture lisant le clip slideShow
chaque fois qu’il atteindra l’image 1. La lettre a minuscule appara&icirc;t
dans l’image 1 du calque 1 du sc&eacute;nario. Elle indique que cette image
contient du code ActionScript.
6.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 20 du calque 2.
7.
Choisissez Modification &gt; Sc&eacute;nario &gt; Convertir en images-cl&eacute;s.
8.
S&eacute;lectionnez l’image 20 du calque 2.
9.
Dans le panneau Actions, tapez le code ActionScript stop();.
10. Dans
11.
le sc&eacute;nario, s&eacute;lectionnez l’image 40 du calque 2.
Choisissez Modification &gt; Sc&eacute;nario &gt; Convertir en images-cl&eacute;s.
12. S&eacute;lectionnez
13.
l’image 40 du calque 2.
Dans le panneau Actions, tapez le code ActionScript stop();.
14. Dans
le sc&eacute;nario, s&eacute;lectionnez l’image 60 du calque 2.
15. Choisissez
Modification &gt; Sc&eacute;nario &gt; Convertir en images-cl&eacute;s.
16.
S&eacute;lectionnez l’image 60 du calque 2.
17.
Dans le panneau Actions, tapez le code ActionScript stop();.
18.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 80 du calque 2.
19. Dans
le panneau Actions, tapez le code ActionScript stop();.
Ajout d’actions &agrave; des images 259
Ajout d’&eacute;tiquettes &agrave; des images
Vous allez maintenant ajouter des &eacute;tiquettes &agrave; des images sp&eacute;cifiques.
Ajouter une &eacute;tiquette &agrave; une image vous permet de faire r&eacute;f&eacute;rence &agrave; cette
image dans ActionScript. Vous pouvez ainsi r&eacute;diger du code ActionScript
effectuant des actions sur ces images. Vous ajouterez ult&eacute;rieurement du
code ActionScript permettant &agrave; la t&ecirc;te de lecture de passer &agrave; ces images
&eacute;tiquet&eacute;es.
Pour ajouter des &eacute;tiquettes d’images :
1.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 2 du calque 2.
2.
Entrez slide0 dans la zone de texte Etiquette de l’image de l’inspecteur
des propri&eacute;t&eacute;s.
Dans le sc&eacute;nario, une ic&ocirc;ne repr&eacute;sentant un drapeau et le libell&eacute; de
l’image s’affichent dans l’image 2 du calque 2.
3.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 21 du calque 2.
4.
Entrez slide1 dans la zone de texte Etiquette de l’image de l’inspecteur
des propri&eacute;t&eacute;s.
5.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 41 du calque 2.
6.
Entrez slide2 dans la zone de texte Etiquette de l’image de l’inspecteur
des propri&eacute;t&eacute;s.
7.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 61 du calque 2.
8.
Entrez slide3 dans la zone de texte Etiquette de l’image de l’inspecteur
des propri&eacute;t&eacute;s.
Le sc&eacute;nario avec les libell&eacute;s des images
260 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Ajout d’une interpolation de
mouvement
Une interpolation de mouvement repr&eacute;sente un type d’animation dans
laquelle un objet se d&eacute;place d’une position &agrave; une autre. Dans ce projet,
vous allez faire se d&eacute;placer les images de plats vers le haut lorsque
l’utilisateur cliquera sur un bouton que vous ajouterez ult&eacute;rieurement.
Pour ajouter les interpolations de mouvement :
1.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 1 du calque 1.
2.
Dans l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez Mouvement dans le menu
Interpolation.
Les images 1 &agrave; 19 du calque 1 deviennent une interpolation de
mouvement. Une fl&egrave;che s’affiche dans ces images dans le sc&eacute;nario.
3.
Dans l’inspecteur des propri&eacute;t&eacute;s, tirez la glissi&egrave;re &agrave; c&ocirc;t&eacute; de la zone
Acc&eacute;l&eacute;ration jusqu’&agrave; ce que cette zone contienne 100.
Cette valeur force l’interpolation &agrave; d&eacute;c&eacute;l&eacute;rer &agrave; la fin du mouvement
Ainsi, le mouvement d&eacute;bute brusquement et se termine plus
lentement.
4.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 20 du calque 1.
A S A VOI R . . .
Pr&eacute;sentation des interpolations de mouvement Le terme d’interpolation de mouvement vient du fait
que l’animation inclut du mouvement ainsi que de la mani&egrave;re dont ce mouvement est cr&eacute;&eacute;. Le terme
interpolation (tween) est une abr&eacute;viation d’&laquo; interm&eacute;diaire (in between) &raquo;. Vous d&eacute;finissez des animations
&agrave; interpolation de mouvement en d&eacute;finissant les positions de d&eacute;but et de fin de l’objet anim&eacute;, puis en
laissant Flash calculer toutes les positions interm&eacute;diaires de l’objet. De la sorte, vous pouvez cr&eacute;er des
animations de mouvements en d&eacute;finissant simplement les positions de d&eacute;but et de fin de l’objet que vous
animez.
A S A VOI R . . .
Pr&eacute;sentation de l’acc&eacute;l&eacute;ration des animations Le comportement par d&eacute;faut de l’interpolation de
mouvement est d&eacute;fini pour que l’animation d&eacute;file &agrave; la m&ecirc;me vitesse durant toute la dur&eacute;e de la lecture. Un
tel comportement est toutefois rarement plaisant pour le regard. Une voiture ne passe pas de 0 &agrave; 50
instantan&eacute;ment ; vos animations ne devraient pas non plus le faire. Acc&eacute;l&eacute;rer une animation revient au
m&ecirc;me qu’augmenter doucement la vitesse d’une voiture. Le terme acc&eacute;l&eacute;ration peut &ecirc;tre compar&eacute; au
concept de d&eacute;marrage progressif et de d&eacute;c&eacute;l&eacute;ration d’une voiture en vue de l’arr&ecirc;ter. En ajoutant une
valeur d’acc&eacute;l&eacute;ration, vous pouvez forcer vos interpolations de mouvement &agrave; d&eacute;buter ou se terminer de
mani&egrave;re plus graduelle.
Ajout d’une interpolation de mouvement 261
5.
Dans l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez Mouvement dans le menu
Interpolation.
6.
Tirez la glissi&egrave;re d’acc&eacute;l&eacute;ration vers le haut jusqu’&agrave; ce que la zone
Acc&eacute;l&eacute;ration contienne 100.
7.
Cliquez sur l’occurrence du clip slides_mc situ&eacute;e sur la sc&egrave;ne pour la
s&eacute;lectionner.
8.
Entrez -150 dans la zone de texte Y de l’inspecteur des propri&eacute;t&eacute;s.
L’occurrence du clip slideShow est ainsi d&eacute;plac&eacute;e de 150 pixels dans
l’image-cl&eacute; de l’image 20. L’interpolation de mouvement de l’image 1 &agrave;
l’image 20 permettra un glissement fluide du clip vers le haut plut&ocirc;t
que de le faire simplement passer d’une position &agrave; une autre.
9.
Dans le sc&eacute;nario, s&eacute;lectionnez l’image 40 du calque 1.
10. Dans l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez Mouvement dans le menu
Interpolation.
11.
Tirez la glissi&egrave;re d’acc&eacute;l&eacute;ration vers le haut jusqu’&agrave; ce que la zone
Acc&eacute;l&eacute;ration contienne 100.
12. Cliquez
sur l’occurrence du clip slides_mc situ&eacute;e sur la sc&egrave;ne pour la
s&eacute;lectionner.
13.
Entrez -300 dans la zone de texte Y de l’inspecteur des propri&eacute;t&eacute;s.
14. Dans
le sc&eacute;nario, s&eacute;lectionnez l’image 60 du calque 1.
15. Dans l’inspecteur des propri&eacute;t&eacute;s, s&eacute;lectionnez Mouvement dans le menu
Interpolation.
16.
Tirez la glissi&egrave;re d’acc&eacute;l&eacute;ration vers le haut jusqu’&agrave; ce que la zone
Acc&eacute;l&eacute;ration contienne 100.
17.
Cliquez sur l’occurrence du clip slides_mc situ&eacute;e sur la sc&egrave;ne pour la
s&eacute;lectionner.
18.
Entrez -450 dans la zone de texte Y de l’inspecteur des propri&eacute;t&eacute;s.
19. Dans
le sc&eacute;nario, s&eacute;lectionnez l’image 80 du calque 1.
20.Cliquez
sur l’occurrence du clip slides_mc situ&eacute;e sur la sc&egrave;ne pour la
s&eacute;lectionner.
21. Entrez
-600 dans la zone de texte Y de l’inspecteur des propri&eacute;t&eacute;s.
262 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
22.Dans le sc&eacute;nario, cliquez sur le nombre 1 dans la barre Num&eacute;ro d’image.
23.Appuyez
sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
Un aper&ccedil;u de l’animation s’affiche sur la sc&egrave;ne. Le code ActionScript
stop(); que vous avez entr&eacute; pr&eacute;c&eacute;demment est ignor&eacute; en mode
aper&ccedil;u.
Vous avez termin&eacute; la cr&eacute;ation du symbole slideShow qui contient son
propre sc&eacute;nario interne complexe. Vous allez ensuite modifier le sc&eacute;nario
principal de votre fichier FLA.
Le sc&eacute;nario avec les interpolations de mouvement termin&eacute;es
Edition du sc&eacute;nario principal
Vous allez &agrave; pr&eacute;sent revenir au sc&eacute;nario principal de votre document Flash
afin d’ajouter des d&eacute;tails qui influent sur le document entier.
Pour ajouter des calques au sc&eacute;nario principal :
1.
Cliquez sur l’ic&ocirc;ne S&eacute;quence 1 en haut du sc&eacute;nario.
Vous quittez le mode d’&eacute;dition de symbole et vous revenez au sc&eacute;nario
principal de votre fichier FLA.
2.
Cliquez sur le bouton Ins&eacute;rer un calque, en bas du sc&eacute;nario.
Dans le sc&eacute;nario, un nouveau calque s’affiche au-dessus du calque
existant.
3.
Cliquez encore trois fois sur Ins&eacute;rer un calque afin d’ins&eacute;rer trois autres
calques.
Le sc&eacute;nario principal contient &agrave; pr&eacute;sent cinq calques.
4.
Double-cliquez sur le libell&eacute; Calque 5 afin de le rendre modifiable.
5.
Entrez actions comme nouveau nom de calque et appuyez sur la touche
Entr&eacute;e (Windows) ou Retour (Macintosh).
6.
Double-cliquez sur le libell&eacute; Calque 4 et renommez ce calque
nextButton.
Edition du sc&eacute;nario principal 263
7.
Double-cliquez sur le libell&eacute; Calque 3 et renommez ce calque border.
8.
Double-cliquez sur le libell&eacute; Calque 2 et renommez ce calque blueArea.
9.
Double-cliquez sur le libell&eacute; Calque 1 et renommez ce calque
slideShow.
Les cinq calques, nomm&eacute;s correctement, dans le sc&eacute;nario
Apr&egrave;s avoir ajout&eacute; des calques au sc&eacute;nario principal, vous &ecirc;tes pr&ecirc;t &agrave;
ajouter le clip slideShow sur la sc&egrave;ne.
Pour ajouter le clip slideShow sur la sc&egrave;ne :
1.
Cliquez sur le nom du calque slideShow de mani&egrave;re &agrave; rendre ce calque
actif.
2.
Faites glisser le symbole slideShow du panneau Biblioth&egrave;que vers la
sc&egrave;ne, puis alignez son coin sup&eacute;rieur gauche sur le coin sup&eacute;rieur
gauche de la sc&egrave;ne.
3.
La nouvelle occurrence du clip &eacute;tant toujours s&eacute;lectionn&eacute;e sur la sc&egrave;ne,
acc&eacute;dez &agrave; l’inspecteur des propri&eacute;t&eacute;s et fixez les valeurs X et Y &agrave; 0 de
mani&egrave;re &agrave; aligner pr&eacute;cis&eacute;ment le coin sup&eacute;rieur gauche du clip sur le
coin de la sc&egrave;ne.
4.
Dans l’inspecteur des propri&eacute;t&eacute;s, tapez slideShow_mc comme nom
d’occurrence du clip.
5.
Enregistrez votre travail.
264 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Cr&eacute;ation de la bordure
Vous allez ensuite cr&eacute;er une bordure autour de la sc&egrave;ne, ce qui rendra la
FMA plus attrayante lorsqu’elle sera visualis&eacute;e dans une page Web.
Pour cr&eacute;er la bordure :
1.
Dans le sc&eacute;nario, s&eacute;lectionnez 100% dans le menu Zoom.
2.
Dans le sc&eacute;nario, cliquez sur le nom du calque border pour le
s&eacute;lectionner.
3.
Choisissez l’outil Rectangle dans le panneau Outils.
4.
Dans le panneau Outils, s&eacute;lectionnez &laquo; aucune couleur &raquo; dans le
s&eacute;lecteur de couleur de trait.
S&eacute;lection d’une absence de couleur dans le s&eacute;lecteur de couleur de trait
5.
Choisissez le noir (#000000) dans le s&eacute;lecteur de couleur de remplissage.
S&eacute;lection du noir dans le s&eacute;lecteur de couleur de remplissage.
Cr&eacute;ation de la bordure 265
6.
Tracez sur la sc&egrave;ne un rectangle d’une forme &agrave; peu pr&egrave;s similaire &agrave; celle
de la sc&egrave;ne.
Dessin d’un rectangle noir de forme similaire &agrave; celle de la sc&egrave;ne
7.
Dans le panneau Outils, s&eacute;lectionnez l’outil S&eacute;lection.
8.
Sur la sc&egrave;ne, cliquez sur le rectangle que vous venez de dessiner afin de
le s&eacute;lectionner.
9.
Choisissez Fen&ecirc;tre &gt; Aligner pour ouvrir le panneau Aligner.
10. Dans
le panneau Aligner, cliquez sur l’option Vers la sc&egrave;ne pour la
s&eacute;lectionner.
Cette option permet au panneau Aligner d’aligner le rectangle
s&eacute;lectionn&eacute; sur la sc&egrave;ne.
Le panneau Aligner avec l’option Vers la sc&egrave;ne s&eacute;lectionn&eacute;e
C ONS E I L
11.
Lorsque l’option
Vers la sc&egrave;ne est
d&eacute;sactiv&eacute;e, le
panneau Aligner
aligne plusieurs
objets s&eacute;lectionn&eacute;s
les uns sur les autres.
Dans le panneau Aligner, cliquez sur le bouton M&ecirc;mes largeur et
hauteur de la section Ajuster la taille.
266 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
La taille de votre rectangle s’adapte &agrave; celle de la sc&egrave;ne.
Clic sur le bouton M&ecirc;mes largeur et hauteur
12. En maintenant le rectangle s&eacute;lectionn&eacute;, cliquez sur le bouton Aligner les
centres verticalement dans le panneau Aligner.
Utilisez les infobulles pour rechercher le bouton appropri&eacute; dans le
panneau Aligner.
Clic sur le bouton Aligner les centres verticalement
13.
Toujours dans ce panneau, cliquez maintenant sur Aligner les centres
horizontalement.
Clic sur le bouton Aligner les centres horizontalement
Cr&eacute;ation de la bordure 267
Le rectangle est d&eacute;sormais parfaitement centr&eacute; sur la sc&egrave;ne.
Le rectangle noir centr&eacute; sur la sc&egrave;ne.
14. Cliquez
15. Dans
en dehors de la sc&egrave;ne pour d&eacute;s&eacute;lectionner le rectangle noir.
le panneau Outils, s&eacute;lectionnez l’outil Rectangle.
16.
Toujours dans ce panneau, s&eacute;lectionnez la couleur bleu ayant pour
valeur hexad&eacute;cimale #0000FF dans le s&eacute;lecteur de couleur de
remplissage.
17.
Dans le panneau Outils, double-cliquez sur l’outil Rectangle.
268 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
18.
Dans la bo&icirc;te de dialogue Param&egrave;tres du rectangle, tapez 16 dans la zone
Rayon d’angle, puis cliquez sur OK.
19. Choisissez
Affichage &gt; Accrochage &gt; Accrocher aux pixels pour activer
l’accrochage aux pixels.
Ce faisant, les bords des formes que vous dessinerez s’accrocheront au
pixel le plus proche.
20.L’outil
Rectangle &eacute;tant toujours s&eacute;lectionn&eacute; dans le panneau Outils,
tracez un rectangle sur la sc&egrave;ne, d’une taille aussi proche que possible de
celle de la sc&egrave;ne.
Le rectangle bleu aux coins arrondis sur la sc&egrave;ne
21. Dans
le panneau Outils, cliquez sur l’outil de s&eacute;lection.
22.Cliquez
sur le rectangle bleu pour le s&eacute;lectionner.
23.En
maintenant le rectangle bleu s&eacute;lectionn&eacute;, ouvrez le panneau de
l’inspecteur des propri&eacute;t&eacute;s et entrez les valeurs suivantes dans les zones
de texte :
■
L : 700
■
H : 150
■
X:0
■
Y:0
Le rectangle bleu, de dimensions correctes, sur la sc&egrave;ne
Cr&eacute;ation de la bordure 269
24.Double-cliquez
25.Appuyez
&agrave; nouveau sur le rectangle bleu pour le s&eacute;lectionner.
sur Suppr pour supprimer le rectangle bleu.
Un rectangle blanc s’affiche au milieu du rectangle noir que vous avez
dessin&eacute; pr&eacute;c&eacute;demment. Le rectangle bleu a fait office de masque lors de
cette &eacute;tape. D&eacute;sormais, une bordure noire se trouve en haut et en bas de
la sc&egrave;ne.
La sc&egrave;ne ne comportant plus que des coins noirs
Ajout d’un symbole
Dans cette section, vous allez ajouter une zone de couleur bleue sur le c&ocirc;t&eacute;
droit de la sc&egrave;ne. C’est &agrave; cet endroit que figurera le texte d&eacute;crivant chaque
plat ainsi que le bouton permettant de changer de plat.
Pour ajouter un nouveau symbole de forme bleue :
1.
Cliquez sur le calque nomm&eacute; blueArea dans le sc&eacute;nario.
2.
S&eacute;lectionnez Insertion &gt; Nouveau symbole.
3.
Dans la bo&icirc;te de dialogue Cr&eacute;er un nouveau symbole, tapez menu dans
le champ de texte Nom puis cliquez sur OK.
Vous acc&eacute;dez au mode d’&eacute;dition de symbole. Le panneau Sc&eacute;nario
affiche le sc&eacute;nario du nouveau clip blueArea.
4.
Dans le panneau Outils, s&eacute;lectionnez l’outil Rectangle.
5.
S&eacute;lectionnez &laquo; aucune couleur &raquo; dans le s&eacute;lecteur de couleur de trait.
6.
Cliquez sur la couleur de remplissage pour en afficher le s&eacute;lecteur.
7.
Dans le s&eacute;lecteur de couleur de remplissage, entrez 80 dans la zone
Alpha.
8.
Dans ce s&eacute;lecteur, entrez ensuite 343469 dans la zone Couleur, puis
appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh).
Une couleur gris bleu est ainsi cr&eacute;&eacute;e.
9.
Dans le panneau Outils, double-cliquez sur l’outil Rectangle.
270 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
10. Dans la bo&icirc;te de dialogue Param&egrave;tres du rectangle, tapez 0
dans la zone
Rayon d’angle, puis cliquez sur OK.
11.
A l’aide de l’outil Rectangle, dessinez un rectangle large et plat sur la
sc&egrave;ne.
12. Dans
13.
le panneau Outils, cliquez sur l’outil de s&eacute;lection.
Sur la sc&egrave;ne, cliquez sur le rectangle que vous venez de dessiner afin de
le s&eacute;lectionner.
14. Dans
le panneau de l’inspecteur des propri&eacute;t&eacute;s, entrez les valeurs
suivantes pour la forme rectangulaire :
■
L : 415
■
H : 150
■
X:0
■
Y:0
15. Appuyez
sur Entr&eacute;e ou Retour.
16.
Dans le panneau Outils, cliquez sur l’outil Sous-s&eacute;lection.
17.
Amenez le pointeur de la souris au-dessus du coin inf&eacute;rieur gauche du
rectangle, jusqu’&agrave; ce qu’une petite case blanche s’affiche &agrave; c&ocirc;t&eacute; du
pointeur.
Pointeur indiquant que le coin du rectangle peut &ecirc;tre tir&eacute;
Ajout d’un symbole 271
18.
Tirez le coin du rectangle vers la droite, de mani&egrave;re &agrave; ce que le c&ocirc;t&eacute;
gauche du rectangle devienne une ligne oblique faisant un angle
d’environ 30 degr&eacute;s.
19. Dans
le panneau Outils, cliquez sur l’outil de s&eacute;lection.
Les points de contr&ocirc;le du rectangle sont ainsi d&eacute;s&eacute;lectionn&eacute;s.
Ajout d’une zone de texte
Maintenant que vous avez ajout&eacute; l’arri&egrave;re-plan bleu au clip menu, vous &ecirc;tes
pr&ecirc;t &agrave; ajouter le texte de description de chaque &eacute;l&eacute;ment de menu. Vous
allez ajouter deux zones de texte. Le code ActionScript que vous ajouterez
plus tard ins&eacute;rera le texte dans ces zones de texte.
Pour ajouter la zone de texte pour le titre des plats :
1.
Dans le panneau Outils, cliquez sur l’outil Texte.
2.
Dans l’inspecteur des propri&eacute;t&eacute;s, choisissez Texte dynamique dans le
menu Type de texte.
3.
Toujours dans l’inspecteur des propri&eacute;t&eacute;s, entrez 14 dans la zone Taille
de police.
4.
A l’aide de l’outil Texte, dessinez un rectangle de texte large et plat dans
la partie sup&eacute;rieure de la forme gris bleu que vous venez de cr&eacute;er.
272 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Le rectangle doit faire pratiquement la m&ecirc;me largeur que la forme
bleue. Nous vous inqui&eacute;tez pas de l’emplacement pr&eacute;cis du rectangle.
Vous pourrez le modifier plus tard.
5.
Dans le panneau Outils, cliquez sur l’outil de s&eacute;lection.
6.
Cliquez sur la zone de texte que vous venez de dessiner afin de la
s&eacute;lectionner.
7.
Dans le panneau de l’inspecteur des propri&eacute;t&eacute;s, entrez les valeurs
suivantes :
■
Type de texte : Texte dynamique
■
Nom de l'occurrence : title_txt
■
X : 60
■
Y : 10
■
Police : Verdana
■
Taille de police : 14
■
Couleur (de remplissage) du texte : Blanc
■
Style : Gras
■
Type de ligne : Une seule ligne
L’inspecteur des propri&eacute;t&eacute;s contenant les valeurs appropri&eacute;es
8.
Enregistrez votre document.
Ajout de la deuxi&egrave;me zone de texte
Vous allez maintenant ajouter la deuxi&egrave;me zone de texte qui contiendra le
texte de description de chaque &eacute;l&eacute;ment du menu.
Pour ajouter une zone de texte pour les descriptions :
1.
Cliquez en dehors de la sc&egrave;ne afin de d&eacute;s&eacute;lectionner la zone de texte
cr&eacute;&eacute;e dans la section pr&eacute;c&eacute;dente.
2.
Dans le panneau Outils, cliquez sur l’outil Texte.
3.
Entrez 12 dans la zone Taille de texte de l’inspecteur des propri&eacute;t&eacute;s.
4.
Toujours dans l’inspecteur des propri&eacute;t&eacute;s, d&eacute;sactivez l’ic&ocirc;ne Gras.
Ajout d’une zone de texte 273
5.
S&eacute;lectionnez Multiligne dans le menu Type de ligne.
6.
A l’aide de l’outil Texte, tracez un autre rectangle de texte sur la sc&egrave;ne,
afin de remplir la partie inf&eacute;rieure de la forme bleue que vous avez cr&eacute;&eacute;e
pr&eacute;c&eacute;demment, sous le rectangle trac&eacute; &agrave; la section Pour ajouter la zone de
texte pour le titre des plats, page 272.
7.
Dans le panneau Outils, cliquez sur l’outil de s&eacute;lection.
8.
En maintenant le deuxi&egrave;me rectangle de texte s&eacute;lectionn&eacute;, ouvrez le
panneau de l’inspecteur des propri&eacute;t&eacute;s et entrez les valeurs suivantes :
Type de texte : Texte dynamique
Nom de l’occurrence : description_txt
X : 85
Y : 45
Police : Verdana
Taille de police : 12
Couleur : Blanc
L’inspecteur des propri&eacute;t&eacute;s contenant les valeurs appropri&eacute;es
9.
Dans le panneau Outils, cliquez sur l’outil de s&eacute;lection.
10. Cliquez
sur la sc&egrave;ne en dehors des formes que vous avez dessin&eacute;es pour
les d&eacute;s&eacute;lectionner.
11.
Dans le sc&eacute;nario, cliquez sur le lien S&eacute;quence 1 pour quitter le mode
d’&eacute;dition de symbole et revenir dans le sc&eacute;nario principal du document
Flash.
Vous quittez le mode d’&eacute;dition de symbole et la sc&egrave;ne avec les bordures
noires r&eacute;appara&icirc;t.
12. Enregistrez
votre document.
274 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Ajout du clip sur la sc&egrave;ne
Maintenant que vous avez termin&eacute; le clip menu, vous &ecirc;tes pr&ecirc;t &agrave; l’ajouter &agrave;
la sc&egrave;ne dans le sc&eacute;nario principal.
Pour ajouter le clip menu sur la sc&egrave;ne :
1.
Dans le panneau Outils, cliquez sur l’outil S&eacute;lection afin de vous assurer
que l’outil est activ&eacute;.
2.
Dans le panneau Biblioth&egrave;que (Fen&ecirc;tre &gt; Biblioth&egrave;que), tirez le clip
menu et placez-le sur le c&ocirc;t&eacute; droit de la sc&egrave;ne.
3.
En maintenant le clip menu s&eacute;lectionn&eacute; sur la sc&egrave;ne, ouvrez l’inspecteur
des propri&eacute;t&eacute;s et entrez les valeurs suivantes :
Nom de l’occurrence : menu_mc
L : 415
H : 150
X : 285
Y:0
4.
En maintenant toujours le clip menu s&eacute;lectionn&eacute;, ouvrez l’inspecteur des
propri&eacute;t&eacute;s et s&eacute;lectionnez Alpha dans le menu Couleur.
5.
Tirez la glissi&egrave;re Quantit&eacute; alpha jusqu’&agrave; ce que la valeur atteigne 90%.
Ajout d’un composant Button
Vous &ecirc;tes maintenant pr&ecirc;t &agrave; ajouter le bouton permettant &agrave; l’utilisateur de
passer d’une diapositive &agrave; une autre dans le diaporama.
Pour ajouter le bouton Suivant :
1.
Dans le sc&eacute;nario, cliquez sur le nom du calque nextButton pour le
rendre actif.
C’est ce calque qui contient le composant de bouton que vous &ecirc;tes sur
le point d’ajouter.
2.
Ouvrez le panneau Composants s’il n’est pas d&eacute;j&agrave; visible en
s&eacute;lectionnant Fen&ecirc;tre &gt; Composants.
3.
Dans le panneau Composants, d&eacute;veloppez la cat&eacute;gorie User Interface en
cliquant sur le signe plus (+) en regard de son nom.
Ajout d’un composant Button 275
4.
Faites glisser le composant Button du panneau Composants vers la
partie inf&eacute;rieure du rectangle bleu sur la sc&egrave;ne.
Le bouton reste s&eacute;lectionn&eacute; sur la sc&egrave;ne, sauf si vous cliquez ailleurs.
5.
En maintenant le bouton s&eacute;lectionn&eacute;, ouvrez le panneau de l’inspecteur
des propri&eacute;t&eacute;s et entrez les valeurs suivantes :
Nom de l’occurrence : next_btn
X : 590
Y : 120
6.
Dans le panneau de l’inspecteur des propri&eacute;t&eacute;s, cliquez sur l’onglet
Param&egrave;tres.
7.
Dans la zone de libell&eacute;, remplacez le mot Button par Suivant puis
appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh).
Le libell&eacute; du bouton devient Suivant.
8.
Enregistrez votre document.
Ajout de code ActionScript
Vous venez d’ajouter tous les &eacute;l&eacute;ments graphiques et de texte requis par
votre FMA. La derni&egrave;re &eacute;tape consiste &agrave; ajouter le code ActionScript qui
affichera le texte et l’image appropri&eacute;s de chaque diapositive dans le clip
slideShow.
R EMA R Q U E
Si vous n’avez pas suivi les instructions du Chapitre 7, Didacticiel :
Traitement des photographies, vous devez vous procurer les images
requises pour ce didacticiel. Pour ce faire, ouvrez le dossier
cafe_townsend/completed_files/flash/images que vous avez copi&eacute; sur
votre disque dur dans le Chapitre 4, Didacticiel : Configuration de votre site
et des fichiers de projet, puis copiez les fichiers image0.jpg, image1.jpg,
image2.jpg et image3.jpg dans le dossier cafe_townsend/images.
276 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Test d’un exemple de code ActionScript
Vous allez tout d’abord ajouter du code ActionScript simple pour en
&eacute;tudier le fonctionnement.
Pour ajouter le code de test ActionScript :
1.
Dans le sc&eacute;nario, cliquez sur le nom du calque actions afin de l’activer.
2.
Choisissez Fen&ecirc;tre &gt; Actions pour ouvrir le panneau Actions.
3.
Dans le panneau Actions, tapez le code ActionScript suivant. Vous
pouvez copier et coller ce code depuis le panneau aide de Flash :
// add the event listener for the button
next_btn.addEventListener(&quot;click&quot;, testFunc);
Ce code ActionScript ajoute du texte dans les zones de texte du titre et
de la description que vous avez pr&eacute;c&eacute;demment ajout&eacute;es au clip menu.
4.
Choisissez Contr&ocirc;le &gt; Tester l’animation.
Le document Flash s’ouvre et lit l’animation dans une nouvelle fen&ecirc;tre.
5.
Dans la fen&ecirc;tre de test d’animation, cliquez sur Suivant.
La description et le titre de test que vous avez entr&eacute;s dans le code
ActionScript apparaissent dans le rectangle bleu sur le c&ocirc;t&eacute; droit du
document.
6.
Enregistrez votre document.
Saisie de code ActionScript pour le
diaporama
CON S E I L
function testFunc(eventObj:Object) {
menu_mc.title_txt.text = &quot;Testing the title&quot;;
menu_mc.description_txt.text = &quot;Testing the
description&quot;;
}
Pour ajouter le texte
(entre guillemets),
ActionScript fait
r&eacute;f&eacute;rence aux zones
de texte en indiquant
le nom de
l’occurrence du clip
menu qui se trouve
sur la sc&egrave;ne
(menu_mc) puis le
nom de la zone de
texte elle-m&ecirc;me
dans l’occurrence du
clip, comme dans :
menu_mc.description
Cette syntaxe est
baptis&eacute;e syntaxe &agrave;
point. Elle est utilis&eacute;e
dans ActionScript
pour faire r&eacute;f&eacute;rence
&agrave; des objets
imbriqu&eacute;s dans
d’autres objets.
Vous allez &agrave; pr&eacute;sent entrer le code ActionScript qui permettra la mise en
place des nouvelles diapositives du diaporama lorsque l’utilisateur cliquera
sur le bouton Suivant. Quand vous aurez ajout&eacute; le code, votre document
Flash sera termin&eacute;.
Pour ajouter le code ActionScript au document Flash :
1.
Dans le sc&eacute;nario, v&eacute;rifiez que l’image 1 du calque actions est toujours
s&eacute;lectionn&eacute;e.
Ajout de code ActionScript 277
2.
Dans le panneau Actions, effacez tout le code que vous avez entr&eacute; dans
la section Test d’un exemple de code ActionScript, page 277.
Le panneau Actions ne doit plus contenir de code.
3.
Copiez le code suivant et collez-le dans le panneau Actions.
/*The following four sections contain the data
/*for each menu item.
/* 0 */
var image0title:String = &quot;Summer salad&quot;;
var image0desc:String = &quot;Butter lettuce with apples,
blood orange segments, gorgonzola, and raspberry
vinaigrette.&quot;;
var image0uri:String = &quot;images/image0.jpg&quot;;
/* 1 */
var image1title:String = &quot;Turkey and Sun-dried Tomato
Sandwich&quot;;
var image1desc:String = &quot;Fresh roasted turkey with sundried tomatoes, garlic aioli, and havarti.&quot;;
var image1uri:String = &quot;images/image1.jpg&quot;;
/* 2 */
var image2title:String = &quot;Seared Salmon&quot;;
var image2desc:String = &quot;Filet of wild salmon with
caramelized onions, new potatoes, and caper and tomato
salsa.&quot;;
var image2uri:String = &quot;images/image2.jpg&quot;;
/* 3 */
var image3title:String = &quot;New York Cheesecake&quot;;
var image3desc:String = &quot;Creamy traditional cheesecake
served with chocolate sauce and strawberries.&quot;;
var image3uri:String = &quot;images/image3.jpg&quot;;
var currImage:Number = 0;
var totalImages:Number = 4;
menu_mc.title_txt.text = this[&quot;image&quot;+currImage+&quot;title&quot;];
menu_mc.description_txt.text =
this[&quot;image&quot;+currImage+&quot;desc&quot;];
for (var i:Number = 0; i&lt;totalImages; i++) {
slideShow_mc.slides_mc[&quot;holder&quot;+i].loadMovie(this[&quot;image&quot;
+(i)+&quot;uri&quot;],slideShow_mc.slides_mc.getNextHighestDepth
());
}
278 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
slideShow_mc.slides_mc[&quot;holder4&quot;].loadMovie(this[&quot;image0u
ri&quot;],slideShow_mc.slides_mc.getNextHighestDepth());
// fonction du bouton Suivant
function nextMenuItem(eventObj:Object) {
slideShow_mc.gotoAndPlay(&quot;slide&quot;+(currImage));
if ((currImage+1)&gt;=totalImages) {
currImage = 0;
} else {
currImage++;
}
menu_mc.title_txt.text =
this._parent[&quot;image&quot;+currImage+&quot;title&quot;];
menu_mc.description_txt.text =
this._parent[&quot;image&quot;+currImage+&quot;desc&quot;];
}
// add the event listener for the button
next_btn.addEventListener(&quot;click&quot;, nextMenuItem);
La section Examen du code ActionScript, page 279 explique ce code de
mani&egrave;re d&eacute;taill&eacute;e.
4.
Enregistrez votre document.
5.
Choisissez Contr&ocirc;le &gt; Tester l’animation.
6.
Dans la fen&ecirc;tre Tester l’animation, cliquez sur Suivant pour afficher
l’animation des images de plats et observer les titres et descriptions mis
&agrave; jour pour chaque diapositive.
7.
Fermez la fen&ecirc;tre de test d’animation.
Examen du code ActionScript
Cette section explique &agrave; quoi sert le code ActionScript que vous venez
d’ajouter dans le panneau Actions. Si vous le souhaitez, vous pouvez passer
cette section et passer &agrave; la publication de votre document en vue de
l’afficher dans un navigateur Web.
Pour obtenir des informations compl&egrave;tes sur l’utilisation d’ActionScript,
consultez le manuel Formation &agrave; ActionScript 2.0 dans Flash.
La premi&egrave;re section du code contient des variables qui stockent des
informations au sujet des images qui appara&icirc;tront dans chaque section du
clip slideShow.
/* 0 */
var image0title:String = &quot;Summer salad&quot;;
Ajout de code ActionScript 279
var image0desc:String = &quot;Butter lettuce with apples, blood
orange segments, gorgonzola, and raspberry vinaigrette.&quot;;
var image0uri:String = &quot;images/image0.jpg&quot;;
/* 1 */
var image1title:String = &quot;Turkey and Sun-dried Tomato
Sandwich&quot;;
var image1desc:String = &quot;Fresh roasted turkey with sun-dried
tomatoes, garlic aioli, and havarti.&quot;;
var image1uri:String = &quot;images/image1.jpg&quot;;
/* 2 */
var image2title:String = &quot;Seared Salmon&quot;;
var image2desc:String = &quot;Filet of wild salmon with
caramelized onions, new potatoes, and caper and tomato
salsa.&quot;;
var image2uri:String = &quot;images/image2.jpg&quot;;
/* 3 */
var image3title:String = &quot;New York Cheesecake&quot;;
var image3desc:String = &quot;Creamy traditional cheesecake
served with chocolate sauce and strawberries.&quot;;
var image3uri:String = &quot;images/image3.jpg&quot;;
Ce code d&eacute;clare quatre ensembles comportant chacun trois variables.
Chaque ensemble de trois variables repr&eacute;sente l’une des quatre images que
votre document Flash affiche. La seule diff&eacute;rence entre le nom des variables
pour les quatre images diff&eacute;rentes est le chiffre que ces noms contiennent.
La num&eacute;rotation commence par 0 au lieu de 1, les listes dans ActionScript
&eacute;tant bas&eacute;es sur z&eacute;ro. Ceci signifie que le premier &eacute;l&eacute;ment d’une liste est
toujours d&eacute;sign&eacute; par 0 au lieu de 1.
Les trois variables d&eacute;clar&eacute;es pour chaque image sont les suivantes.
N’oubliez pas que le chiffre au milieu de chaque nom change pour chaque
image :
image0title contient une cha&icirc;ne correspondant au nom du plat qui
s’affichera dans la zone title_txt du clip menu.
image0desc contient
une cha&icirc;ne correspondant &agrave; la description du plat
qui s’affichera dans la zone description_txt du clip menu.
image0uri contient une cha&icirc;ne qui est l’identificateur de ressource
universel (Universal Resource Identifier, URI) du fichier d’image qui est
charg&eacute; et affich&eacute; dans chaque section du clip slides.
Les deux lignes de code suivantes d&eacute;clarent deux autres variables.
280 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
var currImage:Number = 0;
var totalImages:Number = 4;
La premi&egrave;re variable, currImage, stocke le num&eacute;ro de l’image actuellement
affich&eacute;e dans le clip slides. La seconde variable, totalImages, stocke le
nombre total d’images disponibles pour l’affichage. Stocker ce dernier
nombre dans une variable en facilite la modification, notamment si vous
voulez ajouter de nouvelles images au diaporama ult&eacute;rieurement. Dans ce
cas, vous devrez &eacute;galement modifier le clip slideShow.
La ligne de code suivante attribue &agrave; la zone de texte du titre le texte se
trouvant dans la variable dont le nom correspond au nombre de l’image
courante.
menu_mc.title_txt.text = this[&quot;image&quot;+currImage+&quot;title&quot;];
Ce code utilise une syntaxe &agrave; point pour attribuer &agrave; la propri&eacute;t&eacute; texte de la
zone de texte title_txt de l’occurrence du clip menu_mc la valeur d’une
variable. Dans ce cas, le nom de la variable est construit &agrave; partir du mot
image plus la valeur de la variable currImage, plus le mot title. Le nom de
variable devient image0title ou l’un des autres noms de variable
similaires, en fonction du nombre contenu dans la variable currImage. Le
mot this indique &agrave; Flash que la variable a &eacute;t&eacute; d&eacute;clar&eacute;e dans ce m&ecirc;me script.
La ligne de code suivante est similaire &agrave; la pr&eacute;c&eacute;dente :
menu_mc.description_txt.text =
this[&quot;image&quot;+currImage+&quot;desc&quot;];
Cette ligne de code attribue &agrave; la zone de texte de description de
l’occurrence du clip menu_mc le texte de la variable desc correspondant au
num&eacute;ro de l’image courante.
Les lignes de code suivantes d&eacute;finissent une boucle for permettant de
charger des fichiers image JPG externes dans les occurrences de clips
holder, qui se trouvent dans le clip slides du clip slideShow. Les
chemins d’acc&egrave;s &agrave; chaque fichier JPG externe sont stock&eacute;s dans les variables
image*uri d&eacute;clar&eacute;es au d&eacute;but de ce bloc de code ActionScript, comme
suit :
for (var i:Number = 0; i&lt;totalImages; i++) {
slideShow_mc.slides_mc[&quot;holder&quot;+i].loadMovie(this[&quot;image&quot;+(i
)+&quot;uri&quot;],slideShow_mc.slides_mc.getNextHighestDepth());
}
Ajout de code ActionScript 281
Une boucle for est un bloc de code entour&eacute; par une paire d’accolades { } et
qui est r&eacute;p&eacute;t&eacute; pour chaque incr&eacute;ment de la variable i. Dans ce cas, la
variable i incr&eacute;mente de 0 &agrave; 4, la valeur de totalImages &eacute;tant 4. La
m&eacute;thode loadMovie() peut &ecirc;tre utilis&eacute;e pour charger un fichier Flash ou
un fichier d’image dans le clip. Dans ce cas, elle charge les fichiers JPG
externes.
La ligne de code suivante charge la premi&egrave;re image, stock&eacute;e dans la variable
image0uri, dans l’occurrence du clip holder4, comme suit :
slideShow_mc.slides_mc[&quot;holder4&quot;].loadMovie(this[&quot;image0uri&quot;
],slideShow_mc.slides_mc.getNextHighestDepth());
Les lignes de code suivantes mettent en oeuvre la fonctionnalit&eacute; du bouton
Suivant :
function nextMenuItem(eventObj:Object) {
slideShow_mc.gotoAndPlay(&quot;slide&quot;+(currImage));
if ((currImage+1)&gt;=totalImages) {
currImage = 0;
} else {
currImage++;
}
menu_mc.title_txt.text =
this._parent[&quot;image&quot;+currImage+&quot;title&quot;];
menu_mc.description_txt.text =
this._parent[&quot;image&quot;+currImage+&quot;desc&quot;];
}
Le code du bouton Suivant est contenu dans la fonction nextMenuItem.
Une fonction est un bloc de code configur&eacute; pour s’ex&eacute;cuter lorsqu’un
&eacute;v&eacute;nement particulier se produit. Dans ce cas, la fonction s’ex&eacute;cutera
chaque fois que l’utilisateur rel&acirc;che le bouton de la souris au-dessus du
bouton Suivant sur la sc&egrave;ne.
La fonction comprend la m&eacute;thode gotoAndPlay(), qui indique &agrave; la t&ecirc;te de
lecture de passer &agrave; un libell&eacute; d’image pr&eacute;cis dans le sc&eacute;nario. Le libell&eacute;
d’image sp&eacute;cifi&eacute; dans ce cas se compose du mot slide et de la valeur actuelle
de la variable currImage.
La ligne suivante contient une instruction if qui v&eacute;rifie si la valeur de la
variable currImage plus 1 est &eacute;gale &agrave; la valeur de la variable totalImages.
Si c’est le cas, le code fixe la valeur de currImage &agrave; 0. Dans le cas contraire,
le code augmente la valeur de currImage de 1.
282 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Les deux derni&egrave;res lignes de la fonction attribuent, comme texte pour les
zones de texte de titre et de description, les cha&icirc;nes stock&eacute;es dans les
variables image*title et image*desc correspondant &agrave; la valeur de la
variable currImage.
La ligne de code qui suit imm&eacute;diatement la d&eacute;finition de fonction ordonne
&agrave; Flash d’ex&eacute;cuter la fonction nextMenuItem lorsque l’occurrence next_btn
re&ccedil;oit un clic de souris.
next_btn.addEventListener(&quot;click&quot;, nextMenuItem);
Comme la fonction nextMenuItem est d&eacute;sormais configur&eacute;e pour d&eacute;tecter
les clics de souris, elle est baptis&eacute;e &eacute;couteur d’&eacute;v&eacute;nements. C’est pour cette
raison que la m&eacute;thode addEventListener() est utilis&eacute;e pour ordonner &agrave;
Flash d’ex&eacute;cuter la fonction lorsque l’&eacute;v&eacute;nement de clic de souris se
produit.
Si le code d&eacute;crit dans cette section est relativement simple, il s’appuie
n&eacute;anmoins sur un certain nombre de concepts d’ActionScript dont la
description d&eacute;passe le cadre de ce didacticiel. Vous trouverez une
pr&eacute;sentation compl&egrave;te de ces concepts et des didacticiels ActionScript
suppl&eacute;mentaires dans les guides Formation &agrave; ActionScript 2.0 dans Flash et
Didacticiels Flash.
Publication de votre document
Maintenant que votre document Flash est termin&eacute;, vous &ecirc;tes pr&ecirc;t &agrave; le
publier dans une page web. La premi&egrave;re &eacute;tape de ce processus consiste &agrave;
enregistrer la version FLA de votre document sous forme de fichier SWF
compress&eacute;. Cette version SWF est de taille nettement plus r&eacute;duite, ce qui
facilite son chargement dans un navigateur Web.
Pour publier votre document sous forme de fichier SWF :
1.
Choisissez Fichier &gt; Param&egrave;tres de publication.
2.
Dans l’onglet Formats de la bo&icirc;te de dialogue Param&egrave;tres de
publication, v&eacute;rifiez que seules les cases &agrave; cocher Flash et HTML sont
s&eacute;lectionn&eacute;es.
Flash ne publiera ainsi que le fichier SWF et un fichier HTML &agrave;
afficher dans un navigateur web.
Publication de votre document 283
3.
Toujours dans la bo&icirc;te de dialogue Param&egrave;tres de publication,
s&eacute;lectionnez l’onglet Flash puis v&eacute;rifiez que Flash Player 8 est s&eacute;lectionn&eacute;
dans le menu Version.
Flash exportera alors le fichier SWF au format Flash 8.
4.
S&eacute;lectionnez l’onglet HTML puis v&eacute;rifiez que l’option Flash
uniquement est s&eacute;lectionn&eacute;e dans le menu Mod&egrave;le.
Ce faisant, Flash ne g&eacute;n&eacute;rera qu’un fichier HTML simple pour afficher
le document Flash dans un navigateur.
5.
Cliquez sur Publier.
Flash enregistre une copie de votre document sous la forme d’un fichier
SWF ainsi qu’un fichier HTML dans le dossier qui contient votre
fichier FLA de travail. Il doit s’agir du dossier cafe_townsend.
6.
Fermez la bo&icirc;te de dialogue Param&egrave;tres de publication en cliquant sur le
bouton OK.
Vous avez termin&eacute; le fichier FMA Flash qui sera utilis&eacute; dans le site Web
cafe_townsend. Vous pouvez passer au Chapitre 10, Didacticiel : Cr&eacute;ation
d’un lecteur vid&eacute;o (Flash Professionnel uniquement), page 287.
Ressources
Macromedia met &agrave; votre disposition des ressources pr&eacute;cieuses qui vous
permettront d’approfondir vos connaissances de Flash, de recevoir une
assistance et d’envoyer vos avis &agrave; l’&eacute;quipe.
Inscription
Vous pouvez vous inscrire pour &ecirc;tre inform&eacute; des mises &agrave; jour les plus
r&eacute;centes et les nouveaux produits, recevoir une assistance technique
et bien plus encore. Pour vous inscrire en ligne, acc&eacute;dez &agrave; l’adresse
http://www.macromedia.com/fr/software/register/ puis choisissez
Aide &gt; Enregistrement en ligne. Vous pouvez aussi imprimer le
formulaire d’inscription &agrave; partir du menu Aide.
284 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
Notes d’accompagnement
Vous trouverez les informations les plus r&eacute;centes, ainsi qu’une description
des probl&egrave;mes actuellement identifi&eacute;s dans Flash, dans les notes
d’accompagnement disponibles dans le centre de support de Flash, &agrave;
l’adresse http://www.macromedia.com/support/documentation/fr/flash/
releasenotes.html.
Assistance de Flash
Les ing&eacute;nieurs qui assurent le support de Flash mettent leur exp&eacute;rience
et un service hors pair &agrave; votre disposition pour vous apporter les
r&eacute;ponses dont vous avez besoin, 24 heures sur 24. Pour en apprendre
davantage, consultez le centre de support de Flash &agrave; l’adresse
www.macromedia.com/support/flash/.
Formation et certification Flash
Effectuez un maximum d’exercices pour accro&icirc;tre vos connaissances
sur Flash gr&acirc;ce &agrave; des op&eacute;rations pratiques et des sc&eacute;narios r&eacute;els. Vous
pouvez opter pour une formation en salle ou en ligne, voire conjuguer
les deux. A vous de choisir la voie qui vous convient le mieux. Pour en
savoir plus, acc&eacute;dez &agrave; la section Formation Macromedia &agrave; l’adresse
http://www.macromedia.com/go/flash_training_fr.
Macromedia Flash Development Center
Tenez-vous au courant des tendances et des techniques de programmation
Macromedia Flash les plus r&eacute;centes. Des didacticiels, des articles et des
exemples d’applications vous donnent toutes les informations dont vous
avez besoin pour rester comp&eacute;titif, innovateur et performant. Pour en
apprendre davantage, consultez le centre de d&eacute;veloppement Flash &agrave;
l’adresse http://www.macromedia.com/go/developer_fl_fr.
Ressources 285
S&eacute;minaires On Demand
Il n’est pas toujours facile d’&eacute;valuer un nouveau produit, d’autant que
chaque version propose de nouvelles fonctions &agrave; d&eacute;couvrir. Les s&eacute;minaires
On Demand de Macromedia vous permettent de vous am&eacute;liorer
rapidement. Les s&eacute;minaires Macromedia comprennent des pr&eacute;sentations
multim&eacute;dias et des d&eacute;mos destin&eacute;es &agrave; vous permettre de maximiser votre
exp&eacute;rience d’&eacute;valuation de produits Macromedia. Pour en savoir plus,
acc&eacute;dez au site Macromedia On Demand &agrave; l’adresse
www.macromedia.com/macromedia/events/online/ondemand/index.html.
Exemples d’applications
Flash inclut des fichiers d’exemple que vous pouvez examiner afin de
d&eacute;couvrir diff&eacute;rents concepts de d&eacute;veloppement et de conception. Pour
consulter des versions FLA et SWF des fichiers d’exemple, ainsi qu’une
description, consultez les exemples Flash dans l’aide de Flash (dans
l’application Flash, choisissez Aide &gt; Aide de Flash). Certains exemples
sont des applications compl&egrave;tes ; d’autres, plus simples, ont pour but de
vous faire d&eacute;couvrir un concept de base. Pour afficher la version de
programmation (fichier FLA) d’un exemple, ouvrez le fichier en
question dans Flash. Les fichiers d’exemples r&eacute;sident dans le dossier
Samples, qui se trouve dans le r&eacute;pertoire de l’application Flash. Vous
trouverez d’autres exemples dans le centre de d&eacute;veloppement Flash, &agrave;
l’adresse http://www.macromedia.com/go/developer_fl_fr.
Ressources suppl&eacute;mentaires
Les pages web suivantes de Macromedia incluent des informations de
r&eacute;f&eacute;rence et des liens vers des &eacute;diteurs de Flash :
■
Vous trouverez des sites Web consacr&eacute;s &agrave;
Macromedia Flash et aux d&eacute;veloppeurs Flash &agrave;
l’adresse http://www.macromedia.com/go/tn_12046.
■
Macromedia Press (la division d’&eacute;dition de Macromedia) est accessible
&agrave; l’adresse http://www.macromedia.com/support/mmpress/.
286 Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash
CHAPITRE 10
Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o
(Flash Professionnel uniquement)
10
Ce didacticiel va vous apprendre &agrave; cr&eacute;er un lecteur vid&eacute;o simple &agrave; l’aide de
quelques fonctions de programmation de Macromedia Flash Basic 8 et
Flash Professionnel 8. Apr&egrave;s sa cr&eacute;ation, vous pourrez mettre le lecteur
vid&eacute;o en oeuvre dans une page Web.
Si ce n’est d&eacute;j&agrave; fait, Macromedia vous recommande, avant de suivre ce
didacticiel, de lire Notions de base de Flash, page 65.
Dans ce didacticiel, vous accomplirez les t&acirc;ches suivantes :
Examinez votre t&acirc;che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288
Etude de l’application finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288
Codage d’un fichier vid&eacute;o. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Cr&eacute;ation d’un nouveau document Flash . . . . . . . . . . . . . . . . . . . . . 291
Ajout d’un composant multim&eacute;dia . . . . . . . . . . . . . . . . . . . . . . . . . 294
Publication de votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
287
Examinez votre t&acirc;che
Ce didacticiel vous permettra de cr&eacute;er un type d’application appel&eacute;e Zone
de message flexible ou FMA. Une FMA est un type courant d’application
Flash permettant d’afficher du contenu communiquant un message de type
informatif ou marketing au public. Dans le cas pr&eacute;sent, la FMA affiche des
photographies d’&eacute;l&eacute;ments extraits d’un menu de restaurant. Le site Web de
Macromedia utilise une FMA pour afficher des informations relatives aux
nouveaux produits logiciels ou d’autres messages publicitaires. Leur nom
de zone de messagerie flexible vient du fait qu’elles occupent g&eacute;n&eacute;ralement
une partie de la page Web qui est r&eacute;serv&eacute;e au contenu susceptible de
changer en fonction des besoins de l’entreprise ou du site Web. Par
exemple, si le restaurant Caf&eacute; Townsend a pr&eacute;vu un &eacute;v&eacute;nement particulier,
sa FMA pourra &ecirc;tre modifi&eacute;e de mani&egrave;re &agrave; afficher les informations
d&eacute;taill&eacute;es de cet &eacute;v&eacute;nement &agrave; la place des &eacute;l&eacute;ments du menu du restaurant.
Dans ce didacticiel, vous allez d’abord vous familiariser avec un document
Flash, puis vous cr&eacute;erez votre propre document Flash avant de publier
l’application pour le web. Le didacticiel dure environ de 20 &agrave; 30 minutes.
Etude de l’application finale
En examinant la version termin&eacute;e de l’application que vous &ecirc;tes sur le point
de cr&eacute;er, vous d&eacute;couvrirez &eacute;galement l’espace de travail Flash.
Les sections suivantes pr&eacute;sentent les &eacute;tapes &agrave; suivre pour cr&eacute;er l’application
vous-m&ecirc;me.
Ex&eacute;cution de l’application finale
Pour mieux comprendre le type d’application que vous allez cr&eacute;er dans le
cadre de ce didacticiel, vous pouvez examiner une version finale de fichier
FLA de l’application dans l’outil de programmation de Flash. Les fichiers
FLA correspondent aux fichiers utilis&eacute;s dans Flash. Vous pouvez &eacute;galement
lire la version SWF du fichier dans Flash Player. La version SWF repr&eacute;sente
la version du fichier que vous publierez dans une page web.
288 Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel uniquement)
Pour lire la version SWF du fichier dans Flash Player :
1.
Dans Flash, choisissez Fichier &gt; Ouvrir.
2.
Acc&eacute;dez au fichier termin&eacute; dans le dossier lo
cal_sites\cafe_townsend\completed files\flash que vous avez copi&eacute; sur
votre disque dur dans le Chapitre 4, Didacticiel : Configuration de votre
site et des fichiers de projet et double-cliquez sur video_pod_finished.swf.
L’application finale s’ex&eacute;cute dans Flash Player. Cliquez sur les
contr&ocirc;les de lecture en bas de la fen&ecirc;tre pour visionner la vid&eacute;o.
3.
Apr&egrave;s avoir affich&eacute; l’application, fermez la fen&ecirc;tre Flash Player.
Ouverture du document de programmation
Il est utile d’examiner le fichier FLA correspondant au document de
programmation final pour comprendre comment l’auteur a con&ccedil;u
l’application.
Pour afficher la version de programmation du fichier dans
Flash :
1.
Dans Flash, choisissez Fichier &gt; Ouvrir.
2.
Acc&eacute;dez au fichier termin&eacute; dans le dossier lo
cal_sites\cafe_townsend\completed files\flash que vous avez copi&eacute; sur
votre disque dur dans le Chapitre 4, Didacticiel : Configuration de votre
site et des fichiers de projet et double-cliquez sur video_pod_finished.swf.
L’application finale du didacticiel est affich&eacute;e dans l’environnement de
programmation Flash.
3.
Une fois le fichier ouvert, vous pouvez examiner la sc&egrave;ne, le panneau
Biblioth&egrave;que et le sc&eacute;nario.
■
■
■
La sc&egrave;ne comporte un composant FLVPlayback que vous &eacute;tudierez
ult&eacute;rieurement dans ce didacticiel.
Le panneau Biblioth&egrave;que contient une liste de symboles ou
ressources r&eacute;utilisables utilis&eacute;s par le document.
Quant au sc&eacute;nario, il d&eacute;crit quand et comment faire appara&icirc;tre ces
symboles sur la sc&egrave;ne.
Vous en apprendrez davantage sur le r&ocirc;le de chacun de ces &eacute;l&eacute;ments de
Flash tout au long de ce didacticiel. Pour plus d’informations sur
chacun de ces &eacute;l&eacute;ments, consultez la section Bases de Flash, page 51.
Etude de l’application finale 289
Codage d’un fichier vid&eacute;o
En premier lieu, vous devez convertir un fichier vid&eacute;o QuickTime (MOV)
en fichier vid&eacute;o Flash (FLV).
Pour convertir le fichier vid&eacute;o :
1.
D&eacute;marrez l’application Flash Video Encoder.
2.
Tirez le fichier cafe_townsend_chef.mov depuis le dossier
cafe_townsend folder dans la fen&ecirc;tre de l’application Flash Video
Encoder.
La fen&ecirc;tre de Flash Video Encoder
3.
Cliquez sur Param&egrave;tres.
290 Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel uniquement)
4.
Dans la fen&ecirc;tre Param&egrave;tres de codage des vid&eacute;os Flash, s&eacute;lectionnez
Flash 8 - Medium Quality (400kbps). Il s’agit du param&egrave;tre par d&eacute;faut.
De cette mani&egrave;re, le taux de compression appliqu&eacute; au fichier sera faible.
5.
Fermez la bo&icirc;te de dialogue Param&egrave;tres en cliquant sur le bouton OK.
6.
Cliquez sur Activer la file d’attente.
Le codeur vid&eacute;o de Flash convertit le fichier et l’enregistre dans le
m&ecirc;me dossier que celui du fichier original cafe_townsend_chef.mov.
Vous &ecirc;tes maintenant pr&ecirc;t &agrave; utiliser le fichier FLV dans un document
Flash.
7.
Fermez l’application Flash Video Encoder.
Cr&eacute;ation d’un nouveau document
Flash
Maintenant que l’application finale que vous &ecirc;tes sur le point de cr&eacute;er vous
a &eacute;t&eacute; pr&eacute;sent&eacute;e, vous pouvez cr&eacute;er votre propre document Flash.
Vous devez d&eacute;finir un dossier de travail avant de commencer, si ce n’est pas
d&eacute;j&agrave; fait. Pour plus d’informations, consultez la section Configuration de
votre site et de vos fichiers de projet.
Pour savoir comment cr&eacute;er une application dans Flash, vous devez
commencer par la toute premi&egrave;re &eacute;tape du processus : la cr&eacute;ation d’un
fichier.
Cr&eacute;ation d’un nouveau document Flash 291
Ouverture d’un nouveau document
Vous &ecirc;tes pr&ecirc;t &agrave; cr&eacute;er votre propre version de la FMA.
Pour cr&eacute;er un document :
1.
D&eacute;marrez Flash.
2.
Choisissez Fichier &gt; Nouveau.
3.
Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez Document
Flash et cliquez sur OK.
4.
Choisissez Fichier &gt; Enregistrer.
5.
Entrez un nom pour le ficher video_pod.fla puis enregistrez-le dans le
dossier cafe_townsend que vous avez copi&eacute; sur votre disque dur.
R E MA R Q UE
Pensez &agrave; enregistrer votre fichier r&eacute;guli&egrave;rement tout au long de ce
didacticiel.
D&eacute;finition des propri&eacute;t&eacute;s du document
La configuration des propri&eacute;t&eacute;s du document est la premi&egrave;re &eacute;tape du
processus de cr&eacute;ation. Vous pouvez modifier les propri&eacute;t&eacute;s du document &agrave;
tout moment, mais il est recommand&eacute; de prendre certaines d&eacute;cisions au
d&eacute;but du processus, comme par exemple le choix de la taille de la sc&egrave;ne ou
de la couleur de l’arri&egrave;re-plan.
Les propri&eacute;t&eacute;s du document correspondent aux propri&eacute;t&eacute;s qui s’appliquent
&agrave; l’ensemble du document Flash. Vous pouvez utiliser l’inspecteur des
propri&eacute;t&eacute;s pour sp&eacute;cifier ces param&egrave;tres.
Pour d&eacute;finir les propri&eacute;t&eacute;s du document :
1.
S’il n’est pas d&eacute;j&agrave; ouvert, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s &gt; Propri&eacute;t&eacute;s.
R EMA R Q U E
Si l’inspecteur des propri&eacute;t&eacute;s n’est pas compl&egrave;tement d&eacute;velopp&eacute;, cliquez
sur le triangle blanc dans le coin inf&eacute;rieur droit.
2.
Dans l’inspecteur des propri&eacute;t&eacute;s, cliquez sur Taille.
292 Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel uniquement)
3.
Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s du document, entrez les valeurs
suivantes :
■
Largeur : 360
■
Hauteur : 240
4.
Cliquez sur OK.
5.
Enregistrez votre travail.
Pour plus d’informations sur la d&eacute;finition des propri&eacute;t&eacute;s d’un document,
consultez la section Cr&eacute;ation et ouverture d'un document et d&eacute;finition de ses
propri&eacute;t&eacute;s du guide Utilisation de Flash.
Cr&eacute;ation d’un nouveau document Flash 293
Ajout d’un composant
multim&eacute;dia
Vous allez ajouter un composant de lecture multim&eacute;dia sur la sc&egrave;ne. Ce
composant contiendra l’&eacute;cran vid&eacute;o ainsi que les contr&ocirc;les de lecture.
Pour ajouter un composant multim&eacute;dia :
1.
Choisissez Fen&ecirc;tre &gt; Composants pour ouvrir le panneau Composants.
2.
Dans ce panneau, cliquez sur le signe plus (+) &agrave; c&ocirc;t&eacute; de la cat&eacute;gorie FLV
Playback - Player 8.
3.
Faites glisser un composant FLVPlayback sur la sc&egrave;ne.
A S A VOI R . . .
Pr&eacute;sentation des composants Les composants de Flash sont des objets pr&eacute;d&eacute;finis que vous pouvez
employer dans vos documents Flash. La plupart des composants sont des &eacute;l&eacute;ments d’interface
utilisateur, comme des boutons, des menus, etc. Certains ne sont pas destin&eacute;s &agrave; &ecirc;tre visibles sur la
sc&egrave;ne ; ils servent &agrave; accomplir des fonctions de traitement de donn&eacute;es. L’emploi d’un composant vous
&eacute;vite d’avoir &agrave; cr&eacute;er des &eacute;l&eacute;ments complexes d’interface utilisateur. Les composants sont mis en oeuvre,
dans Flash, sous la forme de clips poss&eacute;dant leur propre code ActionScript interne.
Le panneau Composants sert &agrave; d&eacute;finir les propri&eacute;t&eacute;s du composant. Ces propri&eacute;t&eacute;s indiquent &agrave; Flash le
comportement que vous aimeriez appliquer au composant. Pour le composant FLVPlayback, vous
indiquerez &agrave; Flash l’emplacement du fichier FLV que vous voulez lire et la mani&egrave;re dont les contr&ocirc;les de
lecture doivent se pr&eacute;senter.
294 Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel uniquement)
Par d&eacute;faut, le nouveau composant reste s&eacute;lectionn&eacute; sur la sc&egrave;ne.
4.
En maintenant le nouveau composant s&eacute;lectionn&eacute; sur la sc&egrave;ne, entrez les
valeurs suivantes dans l’inspecteur des propri&eacute;t&eacute;s :
■
L : 360
■
H : 240
■
X:0
■
Y:0
Le composant poss&egrave;de ainsi la m&ecirc;me taille que la sc&egrave;ne, sur laquelle il
est centr&eacute;.
L’inspecteur des propri&eacute;t&eacute;s contenant les valeurs appropri&eacute;es
5.
En maintenant le nouveau composant s&eacute;lectionn&eacute; sur la sc&egrave;ne,
s&eacute;lectionnez Fen&ecirc;tre &gt; Inspecteur de composants pour ouvrir
l’inspecteur de composants.
6.
Dans l’onglet Param&egrave;tres de l’inspecteur des propri&eacute;t&eacute;s, cliquez sur le
param&egrave;tre contentPath.
Ajout d’un composant multim&eacute;dia 295
7.
Cliquez sur l’ic&ocirc;ne en forme de loupe affich&eacute;e en regard du param&egrave;tre.
8.
Dans la bo&icirc;te de dialogue Chemin du contenu, entrez
cafe_townsend_chef.flv et cliquez sur OK.
9.
Toujours dans l’inspecteur des propri&eacute;t&eacute;s, donnez au param&egrave;tre
autoRewind la valeur false.
10. Enregistrez
11.
votre travail.
Pour tester votre document, s&eacute;lectionnez Contr&ocirc;le &gt; Tester l’animation.
Le document est lu dans la fen&ecirc;tre Tester l’animation. Vous pouvez
contr&ocirc;ler la lecture du fichier vid&eacute;o &agrave; l’aide des contr&ocirc;les situ&eacute;s en bas
de la sc&egrave;ne.
Publication de votre document
La prochaine &eacute;tape consiste &agrave; publier votre fichier FLA sous forme de
fichier SWF affichable dans un navigateur web.
Pour publier votre document Flash :
1.
S&eacute;lectionnez Fichier &gt; Publier.
Flash enregistre une version SWF de votre fichier ainsi qu’un simple
fichier HTML dans le dossier cafe_townsend o&ugrave; vous avez enregistr&eacute; le
fichier video_pod.fla. Flash enregistre &eacute;galement un fichier SWF
nomm&eacute; ClearOverPlaySeekMute.swf, qui contient les graphismes du
contr&ocirc;leur vid&eacute;o qui est superpos&eacute; &agrave; la vid&eacute;o. Ce fichier SWF doit se
trouver dans le m&ecirc;me dossier que le fichier video_pod.swf pour que les
contr&ocirc;les vid&eacute;o soient visibles lors de la lecture du fichier SWF.
296 Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel uniquement)
Vous pouvez personnaliser l’apparence de ces contr&ocirc;les vid&eacute;o. Pour plus
d’informations, consultez la section A propos de l'application
d'enveloppes aux composants de Utilisation des composants.
2.
Dans votre navigateur web, choisissez Fichier &gt; Ouvrir.
3.
Acc&eacute;dez au dossier cafe_townsend et ouvrez le fichier video_pod.html.
Le fichier HTML s’ouvre dans le navigateur web et affiche votre
document Flash.
Etapes suivantes
Vous avez termin&eacute; le lecteur vid&eacute;o Flash. Normalement, vous allez &agrave;
pr&eacute;sent ins&eacute;rer le fichier SWF dans une v&eacute;ritable page Web.
Cette illustration montre l’apparence potentielle d’une page Web
contenant le fichier video_pod.swf.
Le fichier video_pod.swf ins&eacute;r&eacute; dans une page Web
Etapes suivantes 297
298 Didacticiel : Cr&eacute;ation d’un lecteur vid&eacute;o (Flash Professionnel uniquement)
PARTIE 4
Assemblage et d&eacute;ploiement
de votre site Internet
4
Dans cette partie, vous assemblerez l’exemple de site Internet du Cafe
Townsend et ajouterez les touches finales avant de publier ce site Web.
Puis, vous apprendrez comment assurer facilement la maintenance d’un
site.
Vous utiliserez Macromedia Dreamweaver 8 pour associer tous les
morceaux que vous avez cr&eacute;&eacute;s pour donner naissance au site Web du Cafe
Townsend et vous formaterez le site &agrave; l’aide de CSS. Puis, vous apprendrez
comment utiliser Dreamweaver pour publier le site Web du Cafe
Townsend vers un serveur distant. Enfin, une fois le site du Cafe Townsend
termin&eacute;, vous verrez comment utiliser Macromedia Contribute pour en
assurer la maintenance.
Cette partie du manuel contient les sections suivantes :
Didacticiel : Ajout de contenu aux pages . . . . . . . . . . . . . . . . . . . . 301
Didacticiel : Mise en forme de votre page avec CSS . . . . . . . . . 329
Didacticiel : Publication de votre site . . . . . . . . . . . . . . . . . . . . . . . 359
Didacticiel : Param&eacute;trage de votre site Web pour les utilisateurs de
Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
299
CHAPITRE 11
Didacticiel : Ajout de
contenu aux pages
11
Ce didacticiel vous explique comment ajouter des pages Web &agrave; l’aide de
Macromedia Dreamweaver 8. Vous pouvez ajouter des &eacute;l&eacute;ments de tous
ordres &agrave; ces pages comme des graphismes, des fichiers Macromedia Flash,
des fichiers Macromedia Flash Video, et du texte, pour ne citer que ceux-l&agrave;.
Lorsque vous avez ajout&eacute; du contenu &agrave; vos pages, vous pouvez consulter un
aper&ccedil;u de votre travail dans un navigateur de mani&egrave;re &agrave; voir &agrave; quoi il
ressemblera sur le Web.
Dans ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Passez votre t&acirc;che en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Ins&eacute;rez des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Ins&eacute;rez et lisez un fichier Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Ins&eacute;rez une vid&eacute;o Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Ins&eacute;rez du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Cr&eacute;ez des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Aper&ccedil;u de votre page dans un navigateur . . . . . . . . . . . . . . . . . . 325
Localisez vos fichiers
Dans ce didacticiel, vous commencerez par la mise en forme bas&eacute;e sur un
tableau (index.html) que vous avez cr&eacute;&eacute;e au Chapitre 6, Didacticiel :
Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau. Si vous n’&ecirc;tes pas
all&eacute; jusqu’au bout de ce didacticiel, vous pouvez le faire avant d’aller plus
loin ou vous pouvez &eacute;galement ouvrir la version termin&eacute;e du didacticiel et
commencer par l&agrave;.
301
La version termin&eacute;e du didacticiel, table_layout.html, se trouve dans le
dossier tutorials_completed du dossier cafe_townsend que vous avez copi&eacute;
sur votre disque dur au Chapitre 4, Didacticiel : Configuration de votre site
et des fichiers de projet.
Il est &eacute;galement n&eacute;cessaire d’utiliser les actifs que vous avez cr&eacute;&eacute;s au
Chapitre 8, Didacticiel : Cr&eacute;ation d’une banni&egrave;re de page et au Chapitre 9,
Didacticiel : Cr&eacute;ation de votre premi&egrave;re application Flash. Si vous n’avez pas
termin&eacute; ces didacticiels, vous pouvez trouver les actifs termin&eacute;s dans les
dossiers completed_files/flash et completed_files/fireworks situ&eacute;s dans le
dossier cafe_townsend. Les chemins de fichier dans les instructions qui
suivent diff&egrave;rent l&eacute;g&egrave;rement si vous utilisez des actifs en provenance du
dossier completed_files. Par exemple, si vous avez termin&eacute; le didacticiel
relatif &agrave; la cr&eacute;ation d’une banni&egrave;re dans Fireworks, l’actif termin&eacute;,
banner_graphic.jpg, se trouvera dans le dossier cafe_townsend/images.
Dans le cas contraire, vous devrez rechercher l’actif termin&eacute; dans le dossier
cafe_townsend/completed_files/fireworks/.
R EM A R QU E
Si vous entamez ce didacticiel avec le fichier table_layout.html termin&eacute;, au
lieu du fichier index.html du Chapitre 6, Didacticiel : Cr&eacute;ation d’une mise en
forme de page bas&eacute;e sur un tableau, certaines &eacute;tapes et illustrations du
didacticiel ne correspondront pas &agrave; ce que vous verrez &agrave; l’&eacute;cran.
302 Didacticiel : Ajout de contenu aux pages
Passez votre t&acirc;che en revue
Dans ce didacticiel, vous ajouterez des actifs &agrave; la page d’accueil du Cafe
Townsend, un restaurant fictif. Vous apprendrez &agrave; ajouter des images, un
fichier Macromedia Flash, un fichier Macromedia Flash Video et du texte.
Quand vous aurez termin&eacute;, la page aura l’aspect suivant :
Vous remarquerez que le texte dans la page n’est pas encore mis en forme.
C’est le cas parce que vous apprendrez &agrave; le mettre en forme &agrave; l’aide de
Cascading Style Sheets (CSS) dans le prochain didacticiel.
Passez votre t&acirc;che en revue 303
Si vous avez termin&eacute; les didacticiels pr&eacute;c&eacute;dents de ce manuel, les actifs
n&eacute;cessaires &agrave; ce didacticiel sont enregistr&eacute;s dans votre dossier racine
cafe_townsend. Si vous n’avez pas suivi les didacticiels dans l’ordre,
consultez Localisez vos fichiers, page 301 pour en savoir plus sur la recherche
des fichiers requis.
Ins&eacute;rez des images
Apr&egrave;s avoir cr&eacute;&eacute; la mise en forme de votre page, vous &ecirc;tes pr&ecirc;t &agrave; ajouter des
actifs &agrave; la page. Vous allez commencer par ajouter des images. Vous pouvez
faire appel &agrave; plusieurs m&eacute;thodes pour ajouter des images &agrave; une page Web
dans Dreamweaver. Dans cette section, vous allez ajouter quatre images
diff&eacute;rentes &agrave; la page d’index de Cafe Townsend, au moyen de diff&eacute;rentes
m&eacute;thodes.
Remplacez l’espace r&eacute;serv&eacute; pour l’image
1.
Dans Dreamweaver, ouvrez le fichier index.html que vous avez cr&eacute;&eacute; au
Chapitre 6, Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un
tableau
R EMA R Q U E
Si vous n’avez pas termin&eacute; le Chapitre 6, Didacticiel : Cr&eacute;ation d’une mise
en forme de page bas&eacute;e sur un tableau voir Localisez vos fichiers, page 301
pour savoir comment poursuivre.
304 Didacticiel : Ajout de contenu aux pages
2.
Double-cliquez sur l’espace r&eacute;serv&eacute; pour l’image, banner_graphic, dans
le haut de la page.
3.
Dans la bo&icirc;te de dialogue S&eacute;lectionnez la source de l’image, acc&eacute;dez au
dossier images du dossier cafe_townsend que vous avez d&eacute;fini comme
dossier racine de votre site.
4.
S&eacute;lectionnez le fichier banner_graphic.jpg, puis cliquez sur OK.
R E MA R QU E
Si vous n’avez pas termin&eacute; le didacticiel permettant de cr&eacute;er une banni&egrave;re de
page, ouvrez le fichier banner_graphic.jpg du dossier completed_files/fireworks
dans le dossier racine cafe_townsend.
Ins&eacute;rez des images 305
Dreamweaver remplace l’espace r&eacute;serv&eacute; pour l’image par la banni&egrave;re de
Cafe Townsend.
5.
Cliquez une fois &agrave; l’ext&eacute;rieur du tableau pour le d&eacute;s&eacute;lectionner.
6.
Enregistrez la page (Fichier &gt; Enregistrer).
Ins&eacute;rez une image &agrave; l’aide du menu Ins&eacute;rer.
1.
Cliquez &agrave; l’int&eacute;rieur de la troisi&egrave;me ligne du premier tableau (deux lignes
sous la banni&egrave;re que vous venez d’ins&eacute;rer, juste au-dessus des cellules en
couleur).
2.
Choisissez Insertion &gt; Image.
3.
Dans la bo&icirc;te de dialogue S&eacute;lectionnez la source de l’image, acc&eacute;dez au
dossier images du dossier cafe_townsend, s&eacute;lectionnez le fichier
body_main_header.gif puis cliquez sur OK.
R EM A R QU E
Si la bo&icirc;te de dialogue Attributs d’accessibilit&eacute; &agrave; des balises appara&icirc;t,
cliquez sur OK.
306 Didacticiel : Ajout de contenu aux pages
Un long graphisme de couleur s’affiche dans la ligne du tableau. M&ecirc;me
s’il ressemble davantage &agrave; une couleur d’arri&egrave;re-plan du tableau qu’&agrave; un
graphisme, examinez-le de plus pr&egrave;s : vous constaterez qu’il poss&egrave;de des
coins arrondis. Ainsi, l’effet de coin arrondi donnera &agrave; la partie
inf&eacute;rieure de votre page un aspect int&eacute;ressant lorsque vous aurez ajout&eacute;
tous les autres actifs.
Ins&eacute;rez une image par glissement
1.
Cliquez dans la derni&egrave;re ligne du dernier tableau de la page (juste en
dessous des cellules en couleur).
Ins&eacute;rez des images 307
2.
Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), recherchez le fichier
body_main_footer.gif (qui se trouve dans le dossier images) et faites-le
glisser jusqu’au point d’insertion dans le dernier tableau.
R E MA R Q UE
Si la bo&icirc;te de dialogue Attributs d’accessibilt&eacute; &agrave; des balises appara&icirc;t,
cliquez sur OK.
3.
Cliquez en dehors du tableau puis enregistrez la page (Fichier &gt;
Enregistrer).
308 Didacticiel : Ajout de contenu aux pages
Ins&eacute;rez une image &agrave; partir du panneau
Actifs
1.
Cliquez dans la colonne centrale du tableau &agrave; trois colonnes (la premi&egrave;re
cellule de couleur brun clair).
2.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), s&eacute;lectionnez
Centre dans le menu contextuel Alignement horizontal et s&eacute;lectionnez
Haut dans le menu contextuel Alignement vertical. Cette action aligne
le contenu de chaque cellule du tableau au centre de la partie sup&eacute;rieure
de la cellule.
R EM A R QU E
Si vous ne voyez pas les menus d&eacute;roulants Alignement vertical et
Alignement horizontal, cliquez sur la fl&egrave;che d’extension dans l’angle
inf&eacute;rieur droit de l’inspecteur des propri&eacute;t&eacute;s.
3.
Appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh) pour cr&eacute;er
davantage de place.
Ins&eacute;rez des images 309
A S A VOI R . . .
Le panneau Actifs Vous pouvez utiliser le panneau Actifs pour afficher et g&eacute;rer les actifs de votre site
actif. Ce dernier pr&eacute;sente les actifs du site associ&eacute;s au document actif dans la fen&ecirc;tre du document.
Vous devez d&eacute;finir un site local avant d’afficher les actifs dans le panneau Actifs. Pour plus
d’informations, voir Chapitre 4, Didacticiel : Configuration de votre site et des fichiers de projet ou Utilisation
de Dreamweaver.
Deux vues sont disponibles pour le panneau Actifs :
La liste Site pr&eacute;sente tous les actifs de votre site, y compris les couleurs et adresses URL utilis&eacute;es dans
les documents de votre site.
La liste Favoris affiche uniquement les actifs explicitement s&eacute;lectionn&eacute;s. Pour ajouter un actif &agrave; la liste
Favoris, s&eacute;lectionnez-le dans la liste Site puis cliquez sur Ajouter aux favoris dans le menu Options, situ&eacute;
dans le coin sup&eacute;rieur droit du panneau Fichiers.
Lorsque vous cliquez sur un actif dans le panneau Actifs, il s’affiche dans la zone d’aper&ccedil;u. Pour modifier
la taille de la zone d’aper&ccedil;u, faites glisser la ligne qui la s&eacute;pare des en-t&ecirc;tes des colonnes d’actifs.
Pour plus d’informations, voir Utilisation des actifs dans Utilisation de Dreamweaver.
4.
Cliquez sur l’onglet Actifs du panneau Fichiers ou s&eacute;lectionnez
Fen&ecirc;tre &gt; Actifs.
Les actifs du site s’affichent.
Bouton Images
5.
Si l’affichage des images n’est pas s&eacute;lectionn&eacute;, cliquez sur le bouton
Images pour afficher vos actifs d’image.
6.
Dans le panneau Actifs, s&eacute;lectionnez le fichier street_sign.jpg.
310 Didacticiel : Ajout de contenu aux pages
7.
Effectuez l’une des t&acirc;ches suivantes :
■
■
Faites glisser le fichier sign.jpg jusqu’au point d’insertion de la
cellule centrale du tableau.
Cliquez sur le bouton Ins&eacute;rer dans la partie inf&eacute;rieure du panneau
Actifs.
R E MA R Q UE
Si la bo&icirc;te de dialogue Attributs d’accessibilt&eacute; &agrave; des balises appara&icirc;t,
cliquez sur OK.
Le graphisme street_sign.jpg s’affiche sur la page.
8.
Cliquez une fois &agrave; l’ext&eacute;rieur du tableau pour d&eacute;s&eacute;lectionner l’image.
9.
Enregistrez la page.
Ins&eacute;rez des images
311
Ins&eacute;rez et lisez un fichier Flash
Vous allez ensuite ins&eacute;rer un fichier Flash qui affiche un diaporama de
photos des plats mis en vedette du Cafe Townsend. Le fichier Flash que
vous allez ins&eacute;rer est un fichier de zone de messagerie variable — ou FMA.
Un FMA est une application Flash tr&egrave;s commune qui affiche un message
d’information au public. Le message peut varier en fonction des besoins de
l’entreprise. Par exemple, si le Cafe Townsend organise une manifestation,
le FMA pourrait &ecirc;tre ais&eacute;ment modifi&eacute; (sans affecter le reste de la page
Web) pour afficher des informations &agrave; son sujet, en lieu et place des plats
mis en vedette.
Pour ins&eacute;rer le fichier Flash, vous devez ins&eacute;rer le code HTML
correspondant dans la page Dreamweaver. La m&eacute;thode la plus rapide pour
ce faire consiste &agrave; ins&eacute;rer le fichier SWF (fichier d’animation Flash export&eacute;)
sur la page. Lorsque vous ins&eacute;rez un fichier SWF dans Dreamweaver, ce
dernier &eacute;crit le code HTML Flash n&eacute;cessaire &agrave; votre place.
1.
Lorsque la page index.html est ouverte dans la fen&ecirc;tre de document
Dreamweaver, cliquez une fois dans la deuxi&egrave;me ligne du premier
tableau.
Il s’agit de la ligne juste en dessous de la banni&egrave;re que vous avez ins&eacute;r&eacute;e
dans la section pr&eacute;c&eacute;dente.
2.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), s&eacute;lectionnez
Centre dans le menu contextuel Alignement horizontal et s&eacute;lectionnez
Haut dans le menu contextuel Alignement vertical.
Le contenu de la cellule du tableau est ainsi plac&eacute; au milieu de celle-ci.
R E MA R Q UE
Si vous ne voyez pas les menus d&eacute;roulants Alignement vertical et
Alignement horizontal, cliquez sur la fl&egrave;che d’extension dans l’angle
inf&eacute;rieur droit de l’inspecteur des propri&eacute;t&eacute;s.
312 Didacticiel : Ajout de contenu aux pages
A S A VOI R . . .
Pr&eacute;sentation des fichiers Lorsque vous cr&eacute;ez des actifs dans Macromedia Flash, vous travaillez dans
des fichiers FLA, c’est-&agrave;-dire le type de fichier par d&eacute;faut pour l’application Flash. Les fichiers FLA
poss&egrave;dent l’extension .fla. Par exemple, si vous travaillez sur un logo anim&eacute; pour un site Web, le fichier
Flash pourrait se nommer animated_logo.fla.
Lorsque vous avez termin&eacute; votre travail sur un fichier FLA dans Flash, vous devez l’exporter vers un
format qui pourra &ecirc;tre lu dans FlashPlayer sur le Web. Quand vous exportez vos fichiers FLA dans Flash,
ils sont convertis en des fichiers SWF et identifi&eacute;s par une extension .swf. Ce sont les fichiers SWF (pas
les fichiers FLA) qui lisent le contenu Flash dans un navigateur Web. C’est le type de fichier que vous
devez ins&eacute;rer dans une page Web que vous &ecirc;tes en train de construire avec Dreamweaver.
3.
S&eacute;lectionnez Ins&eacute;rer &gt; Supports &gt; Flash.
Dans la bo&icirc;te de dialogue S&eacute;lectionner un fichier, acc&eacute;dez au fichier
flash_fma.swf (il se trouve dans le dossier racine de cafe_townsend de
votre site), s&eacute;lectionnez ce fichier, puis cliquez sur OK.
Si la bo&icirc;te de dialogue Attributs d’accessibilt&eacute; &agrave; des balises objet
appara&icirc;t, cliquez sur OK.
R E MA R Q U E
Si vous n’avez pas termin&eacute; le Didacticiel : Cr&eacute;ation de votre premi&egrave;re
application Flash, page 245, recherchez le fichier flash_fma_finished.swf
dans le dossier completed_files/flash du dossier racine cafe_townsend.
Ins&eacute;rez et lisez un fichier Flash 313
Un espace r&eacute;serv&eacute; pour du contenu Flash, plut&ocirc;t qu’une s&eacute;quence du
FMA lui-m&ecirc;me, s’affiche dans la fen&ecirc;tre de document. Cela se produit
parce que le code HTML pointe vers le fichier SWF flash_fma.swf.
Lorsqu’un utilisateur charge la page index.html, le navigateur lit le
fichier SWF.
4.
L’espace r&eacute;serv&eacute; pour le contenu Flash doit toujours &ecirc;tre s&eacute;lectionn&eacute;
apr&egrave;s l’insertion du fichier SWF, pour autant que vous ne cliquiez nulle
part ailleurs sur la page.
Si l’espace r&eacute;serv&eacute; pour le contenu Flash n’est pas s&eacute;lectionn&eacute;, cliquez
dessus.
5.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur le
bouton Lire.
R E MA R Q UE
Si vous ne voyez pas le bouton Lire, cliquez sur la fl&egrave;che d’extension dans
l’angle inf&eacute;rieur droit de l’inspecteur des propri&eacute;t&eacute;s.
314 Didacticiel : Ajout de contenu aux pages
Dreamweaver lit le fichier Flash dans la fen&ecirc;tre de document et vous
montre ce que les visiteurs du site verront lorsqu’ils afficheront la page
dans un navigateur.
6.
Dans l’inspecteur de propri&eacute;t&eacute;, cliquez sur Arr&ecirc;t pour interrompre la
lecture du fichier Flash.
7.
Enregistrez la page.
Ins&eacute;rez une vid&eacute;o Flash
Ensuite, vous allez ins&eacute;rer un fichier vid&eacute;o Flash en utilisant un actif qui
vous sera fourni.
1.
Lorsque la page index.html est ouverte dans la fen&ecirc;tre Document de
Dreamweaver, cliquez au-dessus du graphisme que vous avez plac&eacute; dans
la colonne centrale du tableau &agrave; trois colonnes.
Dans la section pr&eacute;c&eacute;dente, vous avez cr&eacute;&eacute; de l’espace avant d’ins&eacute;rer le
graphisme; c’est &agrave; cet endroit que vous devez cliquer.
2.
S&eacute;lectionnez Ins&eacute;rer &gt; Supports &gt; Vid&eacute;o Flash.
Ins&eacute;rez une vid&eacute;o Flash 315
3.
Dans la bo&icirc;te de dialogue Ins&eacute;rer un fichier Flash vid&eacute;o, choisissez Vid&eacute;o
&agrave; t&eacute;l&eacute;chargement progressif dans le menu Type de vid&eacute;o.
A S A VOI R . . .
Pr&eacute;sentation de Vid&eacute;o Flash
La commande Ins&eacute;rer un fichier Flash Video de Dreamweaver permet
d’ins&eacute;rer des vid&eacute;os Flash dans vos pages Web sans employer Flash l’outil de cr&eacute;ation. La commande
ins&egrave;re dans ces pages un Flash composant vid&eacute;o Flash (qui prend en charge l’affichage du contenu vid&eacute;o
Flash que vous s&eacute;lectionnez) ainsi qu’un ensemble de contr&ocirc;le de lecture qui apparaissent dans le
navigateur.
La commandeIns&eacute;rer un fichier Flash Video dispose des options suivantes pour la fourniture de contenu
vid&eacute;o aux visiteurs de votre site :
Vid&eacute;o en t&eacute;l&eacute;chargement progressif t&eacute;l&eacute;charge le fichier vid&eacute;o Flash (FLV) sur le disque dur des
visiteurs du site, puis entame sa lecture. Contrairement aux m&eacute;thodes traditionnelles de diffusion vid&eacute;o
par t&eacute;l&eacute;chargement et lecture, le t&eacute;l&eacute;chargement progressif permet de lancer la lecture du fichier vid&eacute;o
avant la fin de son t&eacute;l&eacute;chargement.
Vid&eacute;o &agrave; diffusion en direct diffuse le contenu vid&eacute;o Flash et le lit imm&eacute;diatement sur la page Web. Pour
permettre la diffusion en direct de vid&eacute;o sur vos pages Web, vous devez toutefois disposer d’un acc&egrave;s &agrave;
Macromedia Serveur de communication Flash, le seul serveur de diffusion en direct capable de diffuser
du contenu vid&eacute;o Flash.
Pour plus d’informations sur l’utilisation de la fen&ecirc;tre de document, voir Insertion de contenu Flash Vid&eacute;o
dans Utilisation de Dreamweaver.
4.
Dans la zone de texte URL, entrez un chemin d’acc&egrave;s relatif au fichier
cafe_townsend_home.flv en cliquant sur le bouton Parcourir, en
acc&eacute;dant au fichier cafe_townsend_home.flv (qui se trouve dans le
dossier racine cafe_townsend de votre site) puis en le s&eacute;lectionnant.
5.
S&eacute;lectionnez Halo Skin 2 dans le menu d&eacute;roulant Apparence.
Un aper&ccedil;u de l’habillage s&eacute;lectionn&eacute; appara&icirc;t sous le menu d&eacute;roulant
Skin. L’option Skin indique l’aspect et le comportement du composant
vid&eacute;o Flash qui contiendra le contenu vid&eacute;o Flash.
316 Didacticiel : Ajout de contenu aux pages
Pour plus d’informations sur la s&eacute;lection d’habillages pour
les composants vid&eacute;o Flash, consultez le site
www.macromedia.com/go/flv_tutorial_fr.
6.
Dans les zones de texte Largeur et Hauteur, ex&eacute;cutez les op&eacute;rations
suivantes :
■
■
Dans la zone de texte Largeur, saisissez 180.
Dans la zone de texte Hauteur, saisissez 135 et appuyez sur Entr&eacute;e
(Windows) ou Retour (Macinstosh).
R EM A R QU E
‘Total avec habillage’ indique la largeur et la hauteur du fichier FLV plus la
largeur et la hauteur de l’habillage s&eacute;lectionn&eacute;.
7.
Conservez les valeurs par d&eacute;faut des autres options :
permet de pr&eacute;server le rapport d’aspect entre la largeur et
la hauteur du composant vid&eacute;o Flash. Cette option est s&eacute;lectionn&eacute;e par
d&eacute;faut.
Contraindre
Lecture auto d&eacute;termine si la vid&eacute;o doit &ecirc;tre lue automatiquement &agrave;
l’ouverture de la page Web. Cette option est d&eacute;s&eacute;lectionn&eacute;e par d&eacute;faut.
C O N S EI L
Les valeurs affich&eacute;es dans Largeur et Hauteur indiquent la largeur et la
hauteur du fichier FLV exprim&eacute;es en pixels. Vous pouvez modifier ces
valeurs &agrave; votre guise pour changer la taille du Vid&eacute;o Flash sur votre
page Web. Quand vous augmentez les dimensions d’une animation, la
qualit&eacute; de l’image d&eacute;cro&icirc;t g&eacute;n&eacute;ralement.
Vous pouvez cliquer
sur D&eacute;tecter la taille
pour d&eacute;terminer
avec exactitude la
largeur et la hauteur
du fichier FLV.
Cependant, il peut
arriver que
Dreamweaver ne
puisse pas &eacute;tablir les
dimensions du
fichier FLV. Dans
ces cas-l&agrave;, il vous
faut saisir vousm&ecirc;me les valeurs de
la largeur et de la
hauteur.
Ins&eacute;rez une vid&eacute;o Flash 317
Rembobinage automatique d&eacute;termine si le contr&ocirc;le de lecture doit
revenir en position de d&eacute;part au terme de la lecture de la vid&eacute;o. Cette
option est d&eacute;s&eacute;lectionn&eacute;e par d&eacute;faut.
8.
Cliquez sur OK pour fermer la bo&icirc;te de dialogue et ajouter le contenu
vid&eacute;o Flash &agrave; votre page Web.
La commande Ins&eacute;rer une vid&eacute;o Flash g&eacute;n&egrave;re un fichier SWF de lecteur
vid&eacute;o et un fichier SWF d’habillage qui serviront &agrave; afficher votre
contenu vid&eacute;o Flash sur une page Web. Il peut &ecirc;tre n&eacute;cessaire de cliquer
sur le bouton Actualiser du panneau Fichiers pour voir les nouveaux
fichiers. Ces fichiers sont stock&eacute;s dans le m&ecirc;me r&eacute;pertoire que le fichier
HTML auquel vous ajoutez du contenu vid&eacute;o Flash (dans le cas
pr&eacute;sent, le dossier racine cafe_townsend). Quand vous t&eacute;l&eacute;chargez vers
le serveur la page HTML qui ench&acirc;sse le contenu vid&eacute;o Flash, les
fichiers ainsi t&eacute;l&eacute;charg&eacute;s sont d&eacute;pendants les uns des autres (&agrave; condition
que vous ayez cliqu&eacute; Oui dans la Bo&icirc;te de dialogue Placer les fichiers
d&eacute;pendants).
9.
Enregistrez la page.
Ins&eacute;rez du texte
Vous allez &agrave; pr&eacute;sent ajouter du texte &agrave; la page. Vous pouvez taper
directement le texte dans la fen&ecirc;tre Document de Dreamweaver ou le
copier et le coller &agrave; partir d’autres sources (comme un fichier
Microsoft Word ou un fichier texte). Par la suite, vous mettrez le texte en
forme &agrave; l’aide de feuilles de style en cascade (CSS).
318 Didacticiel : Ajout de contenu aux pages
Insertion du corps de texte
1.
Dans le panneau Fichiers, localisez le fichier sample_text.txt (dans le
dossier racine cafe_townsend root) puis double-cliquez sur l’ic&ocirc;ne du
fichier pour l’ouvrir dans Dreamweaver.
Cette fen&ecirc;tre s’affiche en mode Code ; il est impossible de passer en
mode Cr&eacute;ation (le mode dans lequel vous avez travaill&eacute; jusqu’ici), parce
que ce fichier n’est pas un fichier HTML.
2.
Dans la fen&ecirc;tre de document sample_text.txt, appuyez sur Ctrl+A
(Windows) ou Commande+A (Macintosh) pour s&eacute;lectionner la totalit&eacute;
du texte, puis s&eacute;lectionnez Edition &gt; copier pour copier le texte.
3.
Fermez le fichier sample_text.txt en cliquant sur le X dans le coin
sup&eacute;rieur droit du document.
4.
Dans la fen&ecirc;tre de document index.html, cliquez dans la troisi&egrave;me
cellule du tableau &agrave; trois colonnes (celle qui se trouve &agrave; droite de la
colonne contenant le graphisme et la vid&eacute;o Flash).
5.
S&eacute;lectionnez Edition &gt; Coller.
Le texte du fichier texte appara&icirc;t dans la cellule s&eacute;lectionn&eacute;e du tableau.
Ins&eacute;rez du texte 319
Suivant la r&eacute;solution de votre &eacute;cran, le tableau &agrave; trois colonnes s’&eacute;largit
pour tenir compte du texte. Ne vous souciez pas de son apparence pour
l’instant. Dans le didacticiel suivant, vous apprendrez &agrave; mettre le texte
en forme &agrave; l’aide de CSS de mani&egrave;re &agrave; ce que tout tienne sans difficult&eacute;
dans le tableau.
6.
Assurez-vous que le point d’insertion reste dans la cellule du tableau o&ugrave;
vous venez de coller le texte. Si ce n’est pas le cas, cliquez &agrave; l’int&eacute;rieur de
cette cellule.
7.
Dans l’inspecteur des propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), choisissez Haut
dans le menu Alignement vertical. Le texte que vous venez de taper est
ainsi align&eacute; sur le haut de la cellule du tableau. Si vous ne voyez pas le
menu Alignement vertical, cliquez sur la fl&egrave;che d’extension dans l’angle
inf&eacute;rieur droit de l’inspecteur des propri&eacute;t&eacute;s.
320 Didacticiel : Ajout de contenu aux pages
8.
Enregistrez la page.
Ins&eacute;rez du texte pour une barre de
navigation
Vous allez &agrave; pr&eacute;sent ins&eacute;rer le texte d’une barre de navigation. Toutefois, le
texte ne se pr&eacute;sentera pas comme une barre de navigation tant que vous
n’aurez pas d&eacute;fini sa mise en forme, dans le didacticiel suivant.
1.
Cliquez dans la premi&egrave;re colonne du tableau &agrave; trois colonnes (la colonne
de couleur brun rouge&acirc;tre).
2.
Tapez le terme Cuisine.
3.
Appuyez sur la barre d’espace puis tapez Chef Ipsum.
Ins&eacute;rez du texte 321
4.
R&eacute;p&eacute;tez l’&eacute;tape pr&eacute;c&eacute;dente jusqu’&agrave; ce que vous ayez entr&eacute; les mots
suivants, s&eacute;par&eacute;s l’un de l’autre par un espace : Articles, Special Events,
Location, Menu, Contact Us.
N’appuyez pas sur Entr&eacute;e (Windows) ou Retour (Macintosh) en cours
de frappe. N’employez que la barre d’espace pour s&eacute;parer les mots et
laissez ceux-ci aller &agrave; la ligne naturellement. La largeur fixe de la cellule
du tableau d&eacute;termine le nombre de mots qui tiendront sur une ligne.
5.
Tout en maintenant le point d’insertion dans la premi&egrave;re cellule du
tableau &agrave; trois colonnes, cliquez sur la balise &lt;td&gt; du s&eacute;lecteur de balises.
322 Didacticiel : Ajout de contenu aux pages
6.
Dans l’inspecteur des propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), choisissez Haut
dans le menu Alignement vertical.
Le texte que vous venez de taper est ainsi align&eacute; sur le haut de la cellule
du tableau.
R E MA R QU E
Si vous ne voyez pas le menu Alignement vertical, cliquez sur la fl&egrave;che
d’extension dans l’angle inf&eacute;rieur droit de l’inspecteur des propri&eacute;t&eacute;s.
7.
Enregistrez votre page.
Cr&eacute;ez des liens
Un lien est une r&eacute;f&eacute;rence, ins&eacute;r&eacute;e dans une page Web, qui pointe sur un
autre document. Vous pouvez transformer pratiquement un actif
quelconque en un lien bien que le lien le plus courant soit un lien de texte.
Vous pouvez cr&eacute;er des liens &agrave; tout moment du processus de cr&eacute;ation d’un
site. Dans cette section, vous allez cr&eacute;er des liens pour la barre de
navigation, m&ecirc;me si le texte n’est pas encore mis en forme pour ressembler
&agrave; une barre de navigation.
Le dossier racine du site cafe_townsend contient une page HTML
termin&eacute;e que vous pouvez lier &agrave; (une page de menu pour Cafe Townsend).
Vous emploierez cette page pour tous les liens de la barre de navigation. Si
vous &eacute;tiez en train de cr&eacute;er un vrai site, chacun de ces liens acc&eacute;derait &agrave; une
page diff&eacute;rente.
Cr&eacute;ez des liens 323
1.
Dans la page index.html ouverte de la fen&ecirc;tre de document, s&eacute;lectionnez
le terme Cuisine que vous avez saisi dans la premi&egrave;re cellule du tableau &agrave;
trois colonnes. Prenez garde de ne saisir que le terme Cuisine sans
l’espace qui le suit.
2.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur
l’ic&ocirc;ne de dossier situ&eacute;e en regard de la zone de texte Lien.
3.
Dans la bo&icirc;te de dialogue S&eacute;lectionner un fichier, acc&eacute;dez au fichier
menu.html (qui se trouve dans le m&ecirc;me dossier que le fichier
index.html) puis cliquez sur OK (Windows) ou Choisir (Macintosh).
4.
Cliquez sur la page pour d&eacute;s&eacute;lectionner le mot Cuisine. Le texte
&laquo; Cuisine &raquo; est soulign&eacute; et s’affiche en bleu, ce qui indique qu’il s’agit
d&eacute;sormais d’un lien.
324 Didacticiel : Ajout de contenu aux pages
5.
R&eacute;p&eacute;tez les &eacute;tapes pr&eacute;c&eacute;dentes pour lier chaque mot ou ensemble de
mots que vous avez saisis pour la navigation. Vous voulez cr&eacute;er plus de
six liens : un pour Chef Ipsum, Articles, Special Events, Location,
Menu, et Contact Us.
Liez chaque mot ou groupe de mots &agrave; la page menu.html et prenez
garde de ne laisser aucun espace avant et apr&egrave;s les mots ou groupes de
mots quand vous cr&eacute;ez des liens. Il ne s’agit ici que de liens factices; en
r&eacute;alit&eacute;, il faudrait lier chaque mot de la navigation &agrave; une page qui lui
soit propre.
R EMA R Q U E
Les liens ne fonctionnent pas lorsque vous cliquez dessus dans la fen&ecirc;tre
de document dans Dreamweaver. Ils ne fonctionnent que dans un
navigateur. Pour vous assurer que votre lien fonctionne correctement,
vous devez afficher votre page dans un navigateur. Pour obtenir des
instructions sur la mani&egrave;re de proc&eacute;der, poursuivez avec Aper&ccedil;u de votre
page dans un navigateur, page 325.
6.
Enregistrez votre page.
Aper&ccedil;u de votre page dans un
navigateur
Le mode Cr&eacute;ation vous donne une vague id&eacute;e de l’apparence de votre page
sur le Web, mais il vous faut obtenir un aper&ccedil;u de la page dans le
navigateur pour vous rendre compte du r&eacute;sultat effectif. Bien que les
navigateurs fournissent les m&ecirc;mes r&eacute;sultats en r&egrave;gle g&eacute;n&eacute;rale, chaque
version de navigateur peut afficher des pages HTML plus ou moins
diff&eacute;rentes. Dreamweaver fait de son mieux pour pr&eacute;senter des HTML qui
seront semblables quel que soit le navigateur utilis&eacute;. Mais il est difficile
d’&eacute;viter des diff&eacute;rences. D&egrave;s lors, la consultation d’un aper&ccedil;u de votre
travail dans un navigateur est la seule mani&egrave;re dont vous disposez pour voir
ce que verront les visiteurs de votre site apr&egrave;s la publication de vos pages.
Aper&ccedil;u de votre page dans un navigateur 325
1.
Assurez-vous que le fichier index.html soit ouvert dans la fen&ecirc;tre du
document.
2.
Appuyez sur la touche F12 (Windows) ou Commande+F12
(Macintosh).
Votre navigateur principal est lanc&eacute; s’il n’est pas d&eacute;j&agrave; actif et il affiche la
page index.
R EM A R QU E
Dreamweaver doit automatiquement d&eacute;tecter votre navigateur principal et
l’utiliser pour afficher un aper&ccedil;u de votre page. Si aucun aper&ccedil;u de la page
ne s’affiche dans le navigateur de votre choix, repassez &agrave; Dreamweaver (si
cela est n&eacute;cessaire) et s&eacute;lectionnez Fichier &gt; Aper&ccedil;u dans le navigateur &gt;
Editer la liste des navigateurs. La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences appara&icirc;t
et vous pouvez ajouter le navigateur de votre choix dans la liste. Pour plus
d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences.
326 Didacticiel : Ajout de contenu aux pages
3.
(En option) Revenez &agrave; Dreamweaver pour faire les modifications
n&eacute;cessaires.
Enregistrez ensuite votre travail et appuyez de nouveau sur la touche
F12 pour vous assurer que vos modifications aient &eacute;t&eacute; prises en compte.
Vous avez maintenant une page Web avec un contenu au complet. L’&eacute;tape
suivante consiste &agrave; mettre en forme une partie du contenu pour le rendre
plus attrayant. Dans le didacticiel suivant, vous apprendrez &agrave; utiliser CSS
pour mettre en forme le texte que vous avez ajout&eacute;.
Aper&ccedil;u de votre page dans un navigateur 327
328 Didacticiel : Ajout de contenu aux pages
CHAPITRE 12
Didacticiel : Mise en forme de
votre page avec CSS
12
Ce didacticiel vous montre comment mettre du texte en forme dans votre
page en utilisant CSS (Cascading Style Sheets ou Feuilles de style en
cascade) dans Dreamweaver. CSS vous donne une plus grande ma&icirc;trise sur
l’aspect de votre page en vous permettant de mettre en forme et de
positionner le texte avec des moyens dont HTML ne dispose pas.
Dans ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Passez votre t&acirc;che en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
&Eacute;tude de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Cr&eacute;ez une nouvelle feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . 334
Explorez le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Associez une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Cr&eacute;ez une nouvelle r&egrave;gle CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Appliquez un style de classe &agrave; un texte . . . . . . . . . . . . . . . . . . . . . 343
Mettez en forme le texte de la barre de navigation . . . . . . . . . . . 344
(En option) Centrez le contenu de la page . . . . . . . . . . . . . . . . . . 355
329
Localisez vos fichiers
Dans ce didacticiel, vous commencerez par la page index de Cafe
Townsend &agrave; laquelle vous avez ajout&eacute; un contenu au Chapitre 11,
Didacticiel : Ajout de contenu aux pages. Si vous n’&ecirc;tes pas all&eacute; jusqu’au bout
de ce didacticiel, vous pouvez le faire avant d’aller plus loin ou bien vous
pouvez ouvrir la version termin&eacute;e du didacticiel et commencer par l&agrave;. La
version termin&eacute;e du didacticiel, add_content.html, se trouve dans le dossier
completed_files/dreamweaver, dans le dossier cafe_townsend que vous avez
copi&eacute; sur votre disque dur au Chapitre 4, Didacticiel : Configuration de
votre site et des fichiers de projet
R E MA R Q UE
Si vous entamez ce didacticiel avec le fichier add_content.html termin&eacute;, au
lieu du fichier index.html du Chapitre 11, Didacticiel : Ajout de contenu
aux pages, certaines &eacute;tapes et illustrations du didacticiel ne
correspondront pas &agrave; ce que vous verrez &agrave; l’&eacute;cran.
Passez votre t&acirc;che en revue
dans ce didacticiel, vous utiliserez des Feuilles de style en cascade (CSS)
pour mettre en forme le texte sur la page d’accueil de Cafe Townsend, un
restaurant fictif. Vous allez cr&eacute;er diff&eacute;rentes sortes de r&egrave;gles CSS pour
mettre en forme le texte du corps. Vous allez &eacute;galement mettre en forme le
texte de lien sur le c&ocirc;t&eacute; gauche de la page afin de cr&eacute;er une barre de
navigation. Quand vous aurez termin&eacute;, la page ressemblera &agrave; l’exemple
suivant :
330 Didacticiel : Mise en forme de votre page avec CSS
Pour plus d’informations sur CSS, passez &agrave; la section suivante. Pour
commencer &agrave; cr&eacute;er CSS tout de suite, passez &agrave; Cr&eacute;ez une nouvelle feuille de
style, page 334
Passez votre t&acirc;che en revue 331
&Eacute;tude de CSS
Les feuilles de style en cascade (.CSS) regroupent des r&egrave;gles de mise en
forme qui d&eacute;terminent l’aspect du contenu d’une page Web. Quand vous
utilisez CSS pour mettre une page en forme, vous s&eacute;parez le contenu de la
pr&eacute;sentation. Le contenu de votre page, c’est-&agrave;-dire, le code HTML, se
trouve dans le fichier HTML lui-m&ecirc;me tandis que les r&egrave;gles CSS qui
d&eacute;finissent la pr&eacute;sentation du code est dans un autre fichier (une feuille de
style externe) ou dans une autre partie du document HTML (g&eacute;n&eacute;ralement
la &lt;head&gt; section). CSS vous permet de g&eacute;rer en souplesse l’aspect d’une
page, tant en termes de pr&eacute;cision de l’emplacement des &eacute;l&eacute;ments qu’en
termes de choix de polices et de styles sp&eacute;cifiques.
Par ailleurs, CSS permet de contr&ocirc;ler de nombreuses propri&eacute;t&eacute;s que
HTML seul est incapable de g&eacute;rer. Par exemple, pour un texte donn&eacute;, vous
pouvez sp&eacute;cifier diff&eacute;rentes tailles et unit&eacute;s (pixels, points, et ainsi de suite)
de police. En utilisant CSS et en d&eacute;finissant les tailles de police en pixels,
vous garantissez un traitement plus homog&egrave;ne de la pr&eacute;sentation et de
l’aspect de votre page dans diff&eacute;rents navigateurs.
Une r&egrave;gle de style CSS se compose de deux entit&eacute;s: le s&eacute;lecteur et la
d&eacute;claration. Le s&eacute;lecteur est un terme (tel que P, H1, un nom de classe ou
un identifiant) qui identifie l’&eacute;l&eacute;ment mis en forme tandis que la
d&eacute;claration d&eacute;finit quels sont les &eacute;l&eacute;ments de style. Dans l’exemple suivant,
H1 correspond au s&eacute;lecteur tandis que tout ce qui est plac&eacute; entre les
crochets ({}) correspond &agrave; la d&eacute;claration :
H1 {
taille de police : 16 pixels;
famille de polices : Helvetica;
graisse de police : gras;
}
La d&eacute;claration est compos&eacute;e de deux entit&eacute;s : la propri&eacute;t&eacute; (par exemple,
famille de polices) et la valeur (par exemple, Helvetica). L’exemple
pr&eacute;c&eacute;dent cr&eacute;e un style pour des balises H1 : Le texte de toutes les balises H1
li&eacute;es &agrave; ce style sera associ&eacute; &agrave; une police Helvetica, d’une taille de 16 pixels et
en gras.
332 Didacticiel : Mise en forme de votre page avec CSS
Le terme &laquo; en cascade &raquo; signifie qu’il est possible d’appliquer plusieurs
feuilles de style &agrave; un m&ecirc;me &eacute;l&eacute;ment ou &agrave; une m&ecirc;me page Web. Vous
pouvez, par exemple, cr&eacute;er une r&egrave;gle CSS pour d&eacute;finir la couleur et une
autre pour les marges, puis les appliquer toutes les deux au texte d’une
m&ecirc;me page. Les styles d&eacute;finis sont appliqu&eacute;s en cascade aux &eacute;l&eacute;ments de
votre page Web, cr&eacute;ant en fin de compte la conception d&eacute;sir&eacute;e.
CSS pr&eacute;sente l’avantage majeur d’&ecirc;tre facilement mis &agrave; jour. Lorsque vous
modifiez une r&egrave;gle CSS en un emplacement, la mise en forme de tous les
documents utilisant ce style refl&egrave;te automatiquement le nouveau style.
Vous pouvez d&eacute;finir les types de styles suivants dans Dreamweaver :
■
Les r&egrave;gles CSS personnalis&eacute;es, &eacute;galement appel&eacute;es styles de classe,
d&eacute;finissent les attributs de styles d’une plage ou d’un bloc de texte.
Tous les styles de classe sont pr&eacute;c&eacute;d&eacute;s d’un point (.). Par exemple, vous
pourriez cr&eacute;er un style de classe appel&eacute; .rouge, attribuer le rouge &agrave; la
propri&eacute;t&eacute; de la couleur de la r&egrave;gle et l’appliquer &agrave; du texte dans une
partie de paragraphe d&eacute;j&agrave; pourvu d’un style.
■
Les styles appliqu&eacute;s aux balises HTML red&eacute;finissent la mise en forme
de ces balises, par exemple p ou h1. Lorsque vous cr&eacute;ez ou modifiez une
r&egrave;gle CSS pour la balise h1, tout le texte mis en forme &agrave; l’aide de cette
balise h1 est imm&eacute;diatement modifi&eacute; en cons&eacute;quence.
■
Les r&egrave;gles du s&eacute;lecteur CSS (styles avanc&eacute;s) red&eacute;finissent la mise en
forme pour une combinaison particuli&egrave;re d’&eacute;l&eacute;ments ou pour d’autres
formes du s&eacute;lecteur admises par CSS (par exemple, le s&eacute;lecteur td h2
s’applique chaque fois qu’un en-t&ecirc;te h2 appara&icirc;t dans une cellule de
tableau. Les styles avanc&eacute;s peuvent &eacute;galement red&eacute;finir la mise en forme
pour des balises qui contiennent un attribut id (identifiant) (par
exemple, les styles d&eacute;finis par #myStyle s’appliquent &agrave; toutes les balises
qui contiennent la paire valeur-attribut id=&quot;myStyle&quot;).
Pour plus d’informations, voir A propos du formatage de texte dans
Dreamweaver dans Utilisation de Dreamweaver.
&Eacute;tude de CSS 333
Cr&eacute;ez une nouvelle feuille de
style
D’abord, vous allez cr&eacute;er une feuille de style externe qui contient une r&egrave;gle
CSS d&eacute;finissant un style pour du texte de paragraphe. Quand vous cr&eacute;ez
des styles dans une feuille de style externe, vous pouvez contr&ocirc;ler l’aspect
de pages Web multiples &agrave; partir d’un m&ecirc;me emplacement au lieu d’avoir &agrave;
d&eacute;finir des styles pour chacune des pages.
1.
Choisissez Fichier&gt; Nouveau.
2.
Dans la bo&icirc;te de dialogue Nouveau document, S&eacute;lectionnez Page de
base dans la colonne Cat&eacute;gorie, s&eacute;lectionnez CSS dans la colonne Page
de base et cliquez sur Cr&eacute;er.
Une feuille de style vierge appara&icirc;t dans la fen&ecirc;tre de document. Les
boutons pour les modes Cr&eacute;ation et Code sont d&eacute;sactiv&eacute;s. Les feuilles
de style CSS sont des fichiers de texte uniquement, c’est-&agrave;-dire que leur
contenu n’est pas pr&eacute;vu pour &ecirc;tre affich&eacute; dans un navigateur.
334 Didacticiel : Mise en forme de votre page avec CSS
A S A VOI R . . .
Compl&eacute;ments sur les r&egrave;gles CSS
Les r&egrave;gles CSS peuvent se trouver aux emplacements suivants :
Les feuilles de style CSS externes regroupent des r&egrave;gles CSS enregistr&eacute;es dans un fichier .css externe
distinct (pas dans un fichier HTML). Ce fichier est li&eacute; &agrave; une ou plusieurs pages d’un site Web &agrave; l’aide d’un
lien situ&eacute; dans la head section d’un document.
Les feuilles de style CSS internes (ou incorpor&eacute;es) regroupent les r&egrave;gles CSS incluses dans une balise
style dans la headsection d’un document HTML. Ainsi, l’exemple suivant d&eacute;finit la taille de police pour
l’ensemble du texte dans le document mis en forme &agrave; l’aide de la balise paragraphe :
&lt;premier&gt;
&lt;style&gt;
p{
taille de police : 80px
}
&lt;/style&gt;
&lt;/premier&gt;
Les styles en ligne sont d&eacute;finis avec des instances sp&eacute;cifiques de balises dans un document HTML. Par
exemple, &lt;p style=“taille de police : 9px”&gt; d&eacute;finit la taille de la police uniquement pour le
paragraphe mis en forme avec la balise qui contient le style incorpor&eacute;.
Dreamweaver restitue la plupart des attributs de style appliqu&eacute;s directement dans la fen&ecirc;tre de
document. Vous pouvez &eacute;galement afficher un aper&ccedil;u des styles appliqu&eacute;s au document dans une
fen&ecirc;tre de navigateur. Certains attributs de style CSS sont repr&eacute;sent&eacute;s diff&eacute;remment dans Microsoft
Internet Explorer, Netscape Navigator, Opera et Apple Safari.
3.
Enregistrez la page (Fichier &gt; Enregistrer) sous le nom
cafe_townsend.css.
Quand vous enregistrez la feuille de style, assurez-vous que vous le
faites dans le dossier cafe_townsend (le dossier racine de votre site
Web).
4.
Saisissez le code suivant dans la feuille de style :
p{
famille de polices : Verdana, sans-serif;
taille de police : 11px;
couleur : #000000;
Hauteur de ligne : 18px;
bourrage : 3px;
}
Au fur et &agrave; mesure que vous tapez, Dreamweaver vous propose des
options de code pour vous aider &agrave; terminer votre saisie. Appuyez sur
Entr&eacute;e (Windows) ou Retour (Macintosh) quand vous apercevez le
code que Dreamweaver vous propose pour terminer la saisie &agrave; votre
place.
Cr&eacute;ez une nouvelle feuille de style 335
N’oubliez pas d’inclure un point-virgule &agrave; la fin de chaque ligne, apr&egrave;s
les valeurs de propri&eacute;t&eacute;.
Quand vous aurez termin&eacute;, le code devrait avoir l’aspect suivant :
CON S EI L
5.
Pour plus
d’informations sur
une quelconque
propri&eacute;t&eacute; CSS,
reportez-vous au
guide de r&eacute;f&eacute;rence
O’Reilly qui est livr&eacute;
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide &gt; R&eacute;f&eacute;rence et
s&eacute;lectionnez O’Reilly
- R&eacute;f&eacute;rence CSS
dans le menu
d&eacute;roulant du
panneau R&eacute;f&eacute;rence.
Enregistrez la feuille de style.
Ensuite, vous allez associer la feuille de style &agrave; la page index.html.
Associez une feuille de style
Quand vous associez une feuille de style &agrave; une page web, les r&egrave;gles d&eacute;finies
dans la feuille sont appliqu&eacute;es aux &eacute;l&eacute;ments correspondants de la page. Par
exemple, quand vous associez la feuille de style de cafe_townsend.css &agrave; la
page index.html, tout texte de paragraphe (texte mis en forme avec la balise
&lt;p&gt; dans le code HTML) est mis en forme suivant la r&egrave;gle CSS que vous
avez d&eacute;finie.
336 Didacticiel : Mise en forme de votre page avec CSS
1.
Dans la fen&ecirc;tre de document, ouvrez le fichier index.html de Cafe
Townsend. (Vous pouvez cliquer sur sa balise si elle est d&eacute;j&agrave; ouverte.)
2.
S&eacute;lectionnez le texte du premier paragraphe que vous avez coll&eacute; dans la
page au Chapitre 11, Didacticiel : Ajout de contenu aux pages.
3.
Regardez dans l’inspecteur de propri&eacute;t&eacute; et assurez-vous que le
paragraphe est mis en forme avec la balise paragraphe.
Si le menu d&eacute;roulant Mise en forme dans l’inspecteur de propri&eacute;t&eacute;
indique &laquo; Paragraphe &raquo;, alors le paragraphe est mis en forme avec la
balise paragraphe. Si le menu d&eacute;roulant Mise en forme dans
l’inspecteur de propri&eacute;t&eacute; indique &laquo; Aucun &raquo;, s&eacute;lectionnez Paragraphe
pour mettre le paragraphe en forme.
4.
R&eacute;p&eacute;tez l’&eacute;tape 3 pour le deuxi&egrave;me paragraphe.
Associez une feuille de style 337
5.
Dans l’angle inf&eacute;rieur droit du panneau Styles CSS (Fen&ecirc;tre &gt; Styles
CSS), cliquez sur le bouton Attachez une feuille de style.
6.
Dans la bo&icirc;te de dialogue Associer feuille de style externe, cliquez sur
Naviguer et naviguez jusqu’au fichier cafe_townsend.css que vous avez
cr&eacute;&eacute; &agrave; la section pr&eacute;c&eacute;dente.
7.
Cliquez sur OK.
Le texte dans fen&ecirc;tre de document est mis en forme suivant la r&egrave;gle
CSS de la feuille de style externe.
338 Didacticiel : Mise en forme de votre page avec CSS
Explorez le panneau Styles CSS
Il vous permet de suivre les r&egrave;gles CSS et les propri&eacute;t&eacute;s qui affectent un
&eacute;l&eacute;ment de page s&eacute;lectionn&eacute; (mode Current (ou S&eacute;lection)), ou les r&egrave;gles et
les propri&eacute;t&eacute;s qui affectent l’ensemble d’un document (mode All (ou
Tout)). Il vous permet &eacute;galement de modifier les propri&eacute;t&eacute;s CSS sans ouvrir
une feuille de style externe.
1.
Assurez-vous que la page index.html est ouverte dans la fen&ecirc;tre de
document.
2.
Dans le panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), cliquez sur Tout
dans la partie sup&eacute;rieure du panneau et v&eacute;rifiez vos r&egrave;gles CSS.
En mode Tout, le panneau CSS vous affiche toutes les r&egrave;gles CSS qui
s’appliquent au document actif, qu’elles soient dans une feuille de style
externe ou dans le document lui-m&ecirc;me. Vous devriez apercevoir deux
cat&eacute;gories principales dans le volet Toutes les r&egrave;gles : une cat&eacute;gorie de
balise &lt;style&gt; et une cat&eacute;gorie cafe_townsend.css.
3.
Cliquez sur plus (+) pour d&eacute;velopper la cat&eacute;gorie de balise &lt;style&gt; si elle
est r&eacute;duite.
4.
Cliquez sur la r&egrave;gle de corps.
La propri&eacute;t&eacute; couleur d’arri&egrave;re-plan avec une valeur de #000000
appara&icirc;t en bas dans le volet Propri&eacute;t&eacute;s.
Explorez le panneau Styles CSS 339
R E MA R Q UE
Il vous faudra peut-&ecirc;tre r&eacute;duire un autre panneau, tel que le panneau
Fichiers, pour voir le panneau Styles CSS in extenso. Vous pouvez aussi
modifier la longueur du panneau des Styles CSS en faisant glisser les
bordures entre les volets.
Vous d&eacute;finissez la couleur d’arri&egrave;re-plan pour la page dans Chapitre 6,
Didacticiel : Cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un tableau en
utilisant la bo&icirc;te de dialogue Modifier propri&eacute;t&eacute;s de page. Quand vous
d&eacute;finissez ainsi des propri&eacute;t&eacute;s de page, Dreamweaver r&eacute;dige un style
CSS qui est interne au document.
5.
Cliquez sur plus (+) pour d&eacute;velopper la cat&eacute;gorie cafe_townsend.css.
6.
Cliquez sur la r&egrave;gle p.
Toutes les propri&eacute;t&eacute;s et valeurs que vous avez d&eacute;finies dans la feuille de
style externe pour la r&egrave;gle p apparaissent au bas du volet Propri&eacute;t&eacute;s.
7.
Dans le document de fen&ecirc;tre, cliquez une fois en un endroit quelconque
dans l’un ou l’autre des paragraphes que vous venez de mettre en forme.
8.
Dans le panneau Styles CSS, cliquez sur S&eacute;lection dans la partie
sup&eacute;rieure du panneau et v&eacute;rifiez vos styles CSS. En mode S&eacute;lection, le
panneau CSS affiche un r&eacute;capitulatif des propri&eacute;t&eacute;s pour la s&eacute;lection
active. Les propri&eacute;t&eacute;s affich&eacute;es correspondent aux propri&eacute;t&eacute;s pour la
r&egrave;gle p dans la feuille de style externe.
340 Didacticiel : Mise en forme de votre page avec CSS
Dans la prochaine section, vous utiliserez le panneau Styles CSS pour cr&eacute;er
une nouvelle r&egrave;gle. Utiliser le panneau Styles CSS pour cr&eacute;er une nouvelle
r&egrave;gle est beaucoup plus facile que saisir la r&egrave;gle &agrave; la main, comme vous
l’avez fait quand vous avez cr&eacute;&eacute; une feuille de style externe au d&eacute;part.
Cr&eacute;ez une nouvelle r&egrave;gle CSS
Dans cette section, vous allez utiliser le panneau Styles CSS pour cr&eacute;er une
r&egrave;gle CSS personnalis&eacute;e ou un style de classe. Les styles de classe vous
permettent de d&eacute;finir des attributs de style pour une plage ou un bloc de
texte quelconques. Ils peuvent &ecirc;tre appliqu&eacute;s &agrave; n’importe quelle balise
HTML. Pour plus d’informations sur diff&eacute;rents types de r&egrave;gles CSS, voir
&Eacute;tude de CSS, page 332.
1.
Dans le panneau Styles CSS, cliquez sur Nouvelle r&egrave;gle de CSS dans
l’angle inf&eacute;rieur droit du panneau.
2.
Dans la bo&icirc;te de dialogue Nouvelle r&egrave;gle CSS, S&eacute;lectionnez Classe &agrave;
partir des options du S&eacute;lecteur de types. Il doit &ecirc;tre s&eacute;lectionn&eacute; par
d&eacute;faut.
3.
Tapez .gras dans la zone de texte Nom.
Assurez-vous de saisir le point (.) devant le mot &laquo; gras &raquo;. Tous les styles
de classe sont pr&eacute;c&eacute;d&eacute;s d’un point (.).
Cr&eacute;ez une nouvelle r&egrave;gle CSS 341
4.
S&eacute;lectionnez cafe_townsend.css du menu d&eacute;roulant D&eacute;finir dans. Il doit
&ecirc;tre s&eacute;lectionn&eacute; par d&eacute;faut.
5.
Cliquez sur OK.
La bo&icirc;te de dialogue D&eacute;finir une r&egrave;gle CSS appara&icirc;t, vous indiquant
ainsi que vous &ecirc;tes en train de cr&eacute;er un style de classe appel&eacute; .gras dans
le fichier cafe_townsend.css.
6.
Dans la bo&icirc;te de dialogue D&eacute;finition de r&egrave;gle CSS, proc&eacute;dez de la
mani&egrave;re suivante :
■
Dans la zone de texte Police, tapez Verdana, sans-serif.
■
Dans la zone de texte Taille, tapez 11 et s&eacute;lectionnez pixels du menu
d&eacute;roulant tout de suite &agrave; droite.
■
Dans la zone de texte Hauteur de ligne, tapez 18 et s&eacute;lectionnez pixels
du menu d&eacute;roulant tout de suite &agrave; droite.
■
S&eacute;lectionnez gras dans le menu d&eacute;roulant Graisse.
■
Saisissez #990000 dans la zone de texte Couleur.
.
342 Didacticiel : Mise en forme de votre page avec CSS
Cliquez sur OK.
8.
Cliquez sur All (Tout), situ&eacute; en haut du panneau Styles CSS.
9.
Cliquez sur le bouton plus (+) en regard de la cat&eacute;gorie
cafe_townsend.css si celle-ci n’est pas d&eacute;velopp&eacute;e.
C ONS E I L
7.
Vous vous apercevrez que Dreamweaver a ajout&eacute; le style de classe .gras &agrave;
la liste des r&egrave;gles d&eacute;finies dans la feuille de style externe. Si vous cliquez
sur la r&egrave;gle .gras dans le volet Toutes les r&egrave;gles, les propri&eacute;t&eacute;s de la r&egrave;gle
apparaissent dans le volet Propri&eacute;t&eacute;s. La nouvelle r&egrave;gle appara&icirc;t aussi
dans le menu d&eacute;roulant Style dans l’inspecteur de propri&eacute;t&eacute;s.
Appliquez un style de classe &agrave; un
texte
Pour plus
d’informations sur
une quelconque
propri&eacute;t&eacute; CSS,
reportez-vous au
guide de r&eacute;f&eacute;rence
O’Reilly qui est livr&eacute;
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide &gt; R&eacute;f&eacute;rence et
s&eacute;lectionnez O’Reilly
- R&eacute;f&eacute;rence CSS
dans le menu
d&eacute;roulant du
panneau R&eacute;f&eacute;rence.
Maintenant que vous avez cr&eacute;&eacute; une r&egrave;gle de classe, vous allez l’appliquer &agrave;
un texte de paragraphe.
1.
Dans la fen&ecirc;tre de document, s&eacute;lectionnez les six premiers mots dans le
texte du premier paragraphe : Caf&eacute; Townsend's visionary chef.
2.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), choisissez gras
dans le menu d&eacute;roulant Style.
Le style de classe gras est appliqu&eacute; &agrave; votre texte.
Appliquez un style de classe &agrave; un texte 343
3.
R&eacute;p&eacute;tez l’&eacute;tape 2 pour appliquer le style de classe gras aux six premiers
mots du deuxi&egrave;me paragraphe.
4.
Enregistrez votre page.
Mettez en forme le texte de la
barre de navigation
Ensuite, vous utiliserez CSS pour appliquer des styles au texte de lien pour
la barre de navigation. Beaucoup de pages Web utilisent les images de
rectangles color&eacute;s avec du texte &agrave; l’int&eacute;rieur pour cr&eacute;er une barre de
navigation, mais avec CSS vous n’avez besoin que de texte de lien et un peu
de mise en forme. Utilisation de l’affichage : propri&eacute;t&eacute; de bloc et
en d&eacute;finissant une largeur pour le bloc, vous pouvez effectivement cr&eacute;er des
rectangles sans faire appel &agrave; des images s&eacute;par&eacute;es.
Cr&eacute;ez une nouvelle r&egrave;gle pour la navigation
1.
Ouvrez le fichier cafe_townsend.css s’il ne l’est pas d&eacute;j&agrave; ou cliquez sur
son onglet pour le voir.
2.
D&eacute;finissez une nouvelle r&egrave;gle en saisissant le code suivant dans le fichier,
apr&egrave;s le style de classe .gras :
.navigation {
}
Il s’agit d’une r&egrave;gle vide.
344 Didacticiel : Mise en forme de votre page avec CSS
Le code dans le fichier devrait ressembler &agrave; l’exemple suivant :
3.
Enregistrez le fichier cafe_townsend.css.
Ensuite, vous utiliserez le panneau de styles CSS pour ajouter des
propri&eacute;t&eacute;s &agrave; la r&egrave;gle.
4.
Ouvrez le fichier index.html s’il ne l’est pas d&eacute;j&agrave;.
Mettez en forme le texte de la barre de navigation 345
5.
Dans le panneau CSS, assurez-vous que le mode Tous est s&eacute;lectionn&eacute;,
s&eacute;lectionnez la nouvelle r&egrave;gle .navigation et cliquez sur Modifier le style
dans l'angle inf&eacute;rieur droit du panneau.
6.
Dans la bo&icirc;te de dialogue D&eacute;finition de r&egrave;gle CSS, proc&eacute;dez de la
mani&egrave;re suivante :
■
■
Dans la zone de texte Police, tapez Verdana, sans-serif.
S&eacute;lectionnez 16 dans le menu d&eacute;roulant Taille et pixels dans le
menu d&eacute;roulant juste &agrave; droite du menu Taille.
■
S&eacute;lectionnez Normal dans le menu d&eacute;roulant Style.
■
S&eacute;lectionnez Aucune dans la liste D&eacute;coration.
■
S&eacute;lectionnez Gras dans le menu d&eacute;roulant Graisse.
■
Entrez #FFFFFF dans la zone de texte Couleur.
346 Didacticiel : Mise en forme de votre page avec CSS
Cliquez sur OK.
Ensuite, vous utiliserez le panneau de styles CSS pour ajouter quelques
autres propri&eacute;t&eacute;s &agrave; la r&egrave;gle .navigation.
CON SE IL
7.
Pour plus
d’informations sur
une quelconque
propri&eacute;t&eacute; CSS,
reportez-vous au
guide de r&eacute;f&eacute;rence
O’Reilly qui est livr&eacute;
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide &gt; R&eacute;f&eacute;rence et
s&eacute;lectionnez O’Reilly
- R&eacute;f&eacute;rence CSS
dans le menu
d&eacute;roulant du
panneau R&eacute;f&eacute;rence.
Mettez en forme le texte de la barre de navigation 347
8.
Dans le panneau Styles CSS, assurez-vous que la r&egrave;gle .navigation est
s&eacute;lectionn&eacute;e et cliquez sur mode Afficher liste.
Le mode Liste r&eacute;organise le volet Propri&eacute;t&eacute;s pour afficher une liste
alphab&eacute;tique de toutes les propri&eacute;t&eacute;s disponibles, &agrave; la diff&eacute;rence du
mode D&eacute;finir propri&eacute;t&eacute;s, le mode pr&eacute;c&eacute;dent, qui n’affiche que celles
que vous avez d&eacute;j&agrave; d&eacute;finies.
9.
Cliquez sur la colonne &agrave; la droite de la propri&eacute;t&eacute; couleur d’arri&egrave;replan.
Pour voir le libell&eacute; entier d’une propri&eacute;t&eacute;, placez la souris au-dessus de
la propri&eacute;t&eacute;.
348 Didacticiel : Mise en forme de votre page avec CSS
#993300 comme valeur hexad&eacute;cimale et appuyez sur Entr&eacute;e
(Windows) ou sur Retour (Macintosh).
10. Tapez
Localisez la propri&eacute;t&eacute; affichage (il faudra peut-&ecirc;tre faire d&eacute;filer votre
curseur vers le bas), cliquez une fois sur la colonne de droite et
s&eacute;lectionnez bloc dans le menu d&eacute;roulant.
12. Localisez
la propri&eacute;t&eacute; bourrage, cliquez sur la colonne de droite, tapez
8px comme valeur et appuyez sur Entr&eacute;e (Windows) ou sur Retour
(Macintosh).
13.
CON S E I L
11.
Pour voir l’effet de
votre travail sur la
feuille de style
externe, laissez le
fichier
cafe_townsend.css
ouvert dans la
fen&ecirc;tre de document
pendant que vous
travaillez. Quand
vous faites une
s&eacute;lection dans le
panneau Styles
CSS, vous vous
apercevrez que
Dreamweaver &eacute;crit
du code CSS dans la
feuille de style en
m&ecirc;me temps.
Localisez la propri&eacute;t&eacute; largeur, cliquez sur la colonne de droite, tapez
140 dans la premi&egrave;re zone de texte, s&eacute;lectionnez pixels dans le menu
d&eacute;roulant et appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
Mettez en forme le texte de la barre de navigation 349
14. Cliquez sur Afficher propri&eacute;t&eacute;s d&eacute;finies pour que les propri&eacute;t&eacute;s que vous
avez d&eacute;finies apparaissent dans le volet Propri&eacute;t&eacute;s.
15. Cliquez sur le fichier cafe_townsend.css pour l’afficher. Vous verrez que
Dreamweaver a ajout&eacute; au fichier toutes les propri&eacute;t&eacute;s que vous avez
d&eacute;finies.
16.
Enregistrez le fichier afe_townsend.css et fermez-le.
Vous avez maintenant cr&eacute;&eacute; une r&egrave;gle pour mettre le texte de la barre de
navigation en forme. Ensuite, vous appliquerez la r&egrave;gle aux liens
s&eacute;lectionn&eacute;s.
350 Didacticiel : Mise en forme de votre page avec CSS
Appliquez la r&egrave;gle
1.
La page index.html &eacute;tant ouverte dans la fen&ecirc;tre de document, cliquez
sur le mot cuisine de telle sorte que le point d’insertion soit quelque part
dans le mot.
2.
Dans le s&eacute;lecteur de balises, cliquez sur la balise &lt;a&gt; la plus &agrave; droite.
Cette op&eacute;ration s&eacute;lectionne la totalit&eacute; du texte pour la balise &lt;a&gt;
sp&eacute;cifi&eacute;e, ou le lien.
3.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), choisissez
navigation dans le menu d&eacute;roulant Style.
Dans la fen&ecirc;tre de document, l’aspect du texte cuisine change
compl&egrave;tement. Le texte a la forme d’un bouton de barre de navigation
&agrave; pr&eacute;sent, conform&eacute;ment aux propri&eacute;t&eacute;s de la r&egrave;gle .navigation que
vous avez d&eacute;finie dans la section pr&eacute;c&eacute;dente.
Mettez en forme le texte de la barre de navigation 351
4.
R&eacute;p&eacute;tez les &eacute;tapes 1 &agrave; 3 pour chacun des liens individuels dans la barre
de navigation.
Vous devez affecter un style de classe de navigation &agrave; chacune des
balises &lt;a&gt; ou du lien, de sorte qu’il est important d’utiliser le s&eacute;lecteur
de balises pour s&eacute;lectionner chaque lien individuellement et puis
affecter les styles de classe un &agrave; un.
Si vous avez des difficult&eacute;s dans la mise en forme de texte de lien,
assurez-vous qu’un espace (pas un &laquo; retour de chariot &raquo;) existe entre
chaque mot du lien. Assurez-vous &eacute;galement que l’espace entre deux
liens n’est pas lui-m&ecirc;me li&eacute;. Si c’est le cas, s&eacute;lectionnez soigneusement
l’espace li&eacute;, videz la zone de texte Lien dans l’inspecteur de propri&eacute;t&eacute;s et
appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
5.
Quand vous aurez fini de mettre en forme tous les mots de la barre de
navigation, enregistrez la page et obtenez un aper&ccedil;u de votre travail dans
un navigateur (Fichier &gt; Aper&ccedil;u dans navigateur).
Vous pouvez cliquer sur les liens pour vous assurer qu’ils fonctionnent.
352 Didacticiel : Mise en forme de votre page avec CSS
Ajoutez un effet de survol
&Agrave; pr&eacute;sent, vous ajouterez un effet de survol pour que la couleur d’arri&egrave;replan des blocs de la barre de navigation change toutes les fois que le
pointeur de la souris passe par-dessus l’un des liens. Pour ajouter un effet de
survol, cr&eacute;ez une nouvelle r&egrave;gle qui contient la pseudo-classe :survol
1.
Ouvrez le fichier cafe_townsend.css.
2.
S&eacute;lectionnez la r&egrave;gle .navigation enti&egrave;re.
3.
Copiez le texte (Editer &gt; copier).
A S A VOI R . . .
Pr&eacute;sentation de la pseudo-classe :survol Une pseudo-classe est un moyen d’avoir un effet sur
certains &eacute;l&eacute;ments dans un document HTML, bas&eacute; non pas sur le code HTML du document lui-m&ecirc;me,
mais sur des conditions ext&eacute;rieures appliqu&eacute;es par le navigateur Web. Les pseudo-classes peuvent &ecirc;tre
dynamiques dans le sens o&ugrave; un &eacute;l&eacute;ment de la page peut acqu&eacute;rir ou perdre la pseudo-classe tandis qu’un
utilisateur &laquo; dialogue &raquo; avec le document.
La pseudo-classe :survol cr&eacute;e un changement dans l’&eacute;l&eacute;ment de page mis en forme quand l’utilisateur
passe la souris par-dessus l’&eacute;l&eacute;ment. Par exemple, quand la pseudo-classe :survol est ajout&eacute;e au style de
classe .navigation (.navigation:survol) pour cr&eacute;er une nouvelle r&egrave;gle, tous les &eacute;l&eacute;ments de texte que la
r&egrave;gle .navigation met en forme changent conform&eacute;ment aux propri&eacute;t&eacute;s de la r&egrave;gle .navigation:survol.
Mettez en forme le texte de la barre de navigation 353
4.
Cliquez une fois &agrave; la fin de la r&egrave;gle et appuyez sur Entr&eacute;e (Windows) ou
sur Retour (Macintosh) plusieurs fois pour cr&eacute;er des espaces.
5.
Coller (Editer &gt; coller) le texte copi&eacute; dans l’espace que vous venez de
cr&eacute;er.
6.
Ajouter la pseudo-classe :survol au s&eacute;lecteur .navigation coll&eacute;, comme
suit :
354 Didacticiel : Mise en forme de votre page avec CSS
7.
Dans la nouvelle r&egrave;gle .navigation:survol, remplacez la couleur d’arri&egrave;replan active (#993300) par #D03D03.
8.
Enregistrez le fichier et fermez-le.
9.
Ouvrez le fichier index.html dans la fen&ecirc;tre de document et obtenez un
aper&ccedil;u de la page dans un navigateur (Fichier &gt; Aper&ccedil;u dans navigateur).
Quand vous placez la souris par-dessus un lien quelconque, vous
pouvez voir le nouvel effet de survol.
(En option) Centrez le contenu
de la page
Enfin, vous utiliserez le s&eacute;lecteur de balises pour s&eacute;lectionner tout le
HTML du document et centrer son contenu.
R E MA R Q UE
Quelques navigateurs, comme l’Explorateur Internet 6, centre le texte de
la page dans le contexte des cellules du tableau quand vous utilisez la
m&eacute;thode utilis&eacute;e dans cette section. Si le contenu dans l’aper&ccedil;u de la page
dans le navigateur ne vous pla&icirc;t pas, vous pouvez sauter cette section et
laisser le contenu de la page align&eacute; &agrave; gauche.
(En option) Centrez le contenu de la page 355
1.
Avec la page index.html ouverte dans la fen&ecirc;tre de document, cliquez
sur la balise &lt;corps&gt; dans le s&eacute;lecteur de balises.
En cliquant sur cette balise, on s&eacute;lectionne tout entre l’ouverture et la
fermeture des balises &lt;corps&gt; de la fen&ecirc;tre de document. Pour voir la
s&eacute;lection, cliquez sur mode Code dans la partie sup&eacute;rieure de la fen&ecirc;tre
de document.
356 Didacticiel : Mise en forme de votre page avec CSS
2.
Dans l’inspecteur des propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur le
bouton Aligner au centre.
Dreamweaver ins&egrave;re des balises CSS &lt;div&gt; qui centrent l’ensemble du
contenu de la page. En mode Cr&eacute;ation, des pointill&eacute;s entourent la zone
qui fait l’objet du centrage des balises &lt;div&gt;.
3.
Enregistrez la page.
Votre page est maintenant termin&eacute;e. La derni&egrave;re t&acirc;che dans la construction
de votre site Web consiste &agrave; publier la page. Pour ce faire, vous devez
d&eacute;finir un dossier sur un site distant et t&eacute;l&eacute;charger vos fichiers dans ce
dossier vers ce serveur. Pour obtenir des instructions, passez au didacticiel
suivant.
(En option) Centrez le contenu de la page 357
358 Didacticiel : Mise en forme de votre page avec CSS
CHAPITRE 13
Didacticiel : Publication
de votre site
13
Ce didacticiel vous montre comment configurer un site distant avec
Macromedia Dreamweaver 8 et publier vos pages web. Un site distant est
souvent un emplacement dans un ordinateur distant qui fait tourner un
serveur Web et qui conserve des copies de vos fichiers locaux. Les
utilisateurs acc&egrave;dent au site distant qui tourne sur le serveur Web quand ils
visualisent vos pages dans un explorateur.
Dans ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Etudiez les sites distants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Configurez un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
T&eacute;l&eacute;chargez vos fichiers locaux . . . . . . . . . . . . . . . . . . . . . . . . . 363
R&eacute;solution des probl&egrave;mes de configuration du dossier distant
(en option) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Etudiez les sites distants
L’&eacute;tape suivante de cr&eacute;ation d’un site consiste &agrave; le publier en t&eacute;l&eacute;chargeant
les fichiers vers un dossier distant. Un dossier distant est l’emplacement
dans lequel vous conservez vos fichiers, selon votre environnement, que
vous r&eacute;servez aux &eacute;valuations, &agrave; la production, &agrave; la collaboration et &agrave; la
publication. Dreamweaver consid&egrave;re ce dossier comme votre site distant.
Avant de poursuivre, vous devez pouvoir acc&eacute;der &agrave; un serveur Web distant
(le serveur de votre fournisseur d’acc&egrave;s Internet, un serveur appartenant &agrave;
un client pour lequel vous travaillez, un serveur intranet de votre soci&eacute;t&eacute; ou
un serveur IIS sur un ordinateur Windows). Si vous ne pouvez acc&eacute;der &agrave; un
serveur de ce type, contactez votre fournisseur d’acc&egrave;s Internet, votre client
ou votre administrateur syst&egrave;me.
359
Vous pouvez &eacute;galement choisir d’ex&eacute;cuter un serveur Web sur votre
ordinateur local, par exemple, IIS (Windows) ou Apache (Macintosh).
Pour plus d’informations sur la configuration d’un serveur Web sur votre
ordinateur local, voir Installation d'un serveur Web dans l’Aide ou le PDF
&eacute;tendu Bien d&eacute;marrer avec Dreamweaver . Le PDF est disponible sur le site
Web Macromedia www.macromedia.com/go/dw_documentation_fr.
Vous pouvez &eacute;galement choisir d’ex&eacute;cuter un serveur Web sur votre
ordinateur local, par exemple, IIS (Windows) ou Apache (Macintosh).
Pour plus d’informations sur la configuration d’un serveur Web sur votre
ordinateur local, voir Appendix B, Installation d'un serveur Web, page 233.
Les marches &agrave; suivre d&eacute;crites dans ce didacticiel aboutissent &agrave; de meilleurs
r&eacute;sultats si votre dossier racine distant est vide. S’il contient d&eacute;j&agrave; des
fichiers, cr&eacute;ez un dossier vide dans votre site distant (sur le serveur) et
utilisez ce dernier comme dossier racine distant.
Vous aurez &eacute;galement besoin d’un site local configur&eacute; avant de poursuivre.
Pour plus d’informations, consultez le Didacticiel : Configuration de votre
site et des fichiers de projet, page 159.
Pour plus d’informations sur les sites Dreamweaver, voir Chapitre 2,
Configuration d'un site Dreamweaver dans Utilisation de Dreamweaver.
Configurez un dossier distant
Vous allez maintenant configurer un dossier distant pour pouvoir publier
vos pages Web. Il porte le m&ecirc;me nom que le dossier local car votre site
distant sera une copie conforme de votre site local. Cela signifie que les
fichiers et les sous-dossiers que vous transf&eacute;rerez dans votre dossier distant
seront des copies des fichiers et des sous-dossiers cr&eacute;&eacute;s localement.
1.
Dans votre site distant (sur le serveur), cr&eacute;ez un dossier vide dans le
dossier racine Web pour le serveur.
Appelez-le cafe_townsend (du m&ecirc;me nom que votre dossier racine
local).
360 Didacticiel : Publication de votre site
A S A VO I R . ..
Cr&eacute;ation d’un dossier distant avec Dreamweaver Si Dreamweaver constitue votre seul moyen
d’acc&egrave;s au serveur distant, vous ne serez pas en mesure de cr&eacute;er un fichier vide dessus tant que vous
n’aurez pas termin&eacute; les r&eacute;glages dans Dreamweaver et &eacute;tabli une connexion. Si c’est le cas, vous pouvez
soit d&eacute;finir votre r&eacute;pertoire h&ocirc;te comme &eacute;tant votre dossier distant, soit cr&eacute;er un dossier distant apr&egrave;s
avoir &eacute;tabli une connexion avec le serveur. Dans un cas comme dans l’autre, continuez &agrave; suivre les
instructions de ce didacticiel jusqu’&agrave; ce que vous soyez connect&eacute; au serveur distant. Une fois la
connexion obtenue, vous pouvez utiliser le panneau Fichiers Dreamweaver pour cr&eacute;er un nouveau
dossier distant.
Quand vous avez cette connexion avec un serveur distant, le panneau Fichiers affiche tous les fichiers sur
ce serveur en Mode distant (tout comme le Mode local avec les fichiers locaux de votre ordinateur). Pour
afficher le Mode distant, s&eacute;lectionnez-le dans le menu d&eacute;roulant dans la partie sup&eacute;rieure du panneau
Fichiers ou cliquez sur D&eacute;velopper/R&eacute;duire dans la barre d’outils du panneau Fichiers. En cliquant sur
D&eacute;velopper/R&eacute;duire, le panneau Fichiers affiche &agrave; la fois le Mode local et le Mode distant.
Pour ajouter un fichier vide dans le Mode distant, affichez d’abord le Mode distant en utilisant l’une des
m&eacute;thodes d&eacute;crites auparavant. (Si vous ne voyez pas votre connexion, cliquez sur Actualiser dans la
barre d’outils du panneau Fichiers.) Quand vous avez constat&eacute; que vous &ecirc;tes connect&eacute; au serveur Web,
cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfonc&eacute;e
(Macintosh) dans le Mode distant et s&eacute;lectionnez Nouveau dossier.
Bouton Actualiser
D&eacute;velopper/R&eacute;duire
Pour plus d’informations, voir Chapitre 4, Gestion des fichiers dans Utilisation de Dreamweaver.
2.
Dans Dreamweaver, s&eacute;lectionnez Site &gt; G&eacute;rer les sites.
3.
Dans la bo&icirc;te de dialogue G&eacute;rer les sites, s&eacute;lectionnez le site Cafe
Townsend.
Si vous n’avez pas d&eacute;fini le site Cafe Townsend, cr&eacute;ez un dossier local
pour le site avant de poursuivre. Pour plus d’informations, consultez le
Didacticiel : Configuration de votre site et des fichiers de projet, page 159.
4.
Cliquez sur Edition.
5.
Dans la bo&icirc;te de dialogue D&eacute;finition de site, cliquez sur l’onglet Avanc&eacute;
si les r&eacute;glages correspondants ne paraissent pas.
6.
S&eacute;lectionnez la cat&eacute;gorie Info distante dans la liste de gauche.
Configurez un dossier distant 361
7.
S&eacute;lectionnez une option d’acc&egrave;s.
Les m&eacute;thodes les plus courantes de connexion &agrave; un serveur sur Internet
sont le FTP et le SFTP. La m&eacute;thode la plus courante de connexion &agrave; un
serveur sur votre intranet ou &agrave; votre ordinateur local (si celui-ci est
utilis&eacute; comme serveur Web) est Local/R&eacute;seau. Dans l’incertitude,
demandez &agrave; l’administrateur syst&egrave;me du serveur.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de
dialogue.
8.
Si vous s&eacute;lectionnez FTP, utilisez les options suivantes :
■
■
Saisissez le nom d’h&ocirc;te du serveur (par exemple,
ftp.macromedia.com).
Dans la zone de texte du r&eacute;pertoire h&ocirc;te, saisissez le chemin d’acc&egrave;s
sur le serveur du dossier racine FTP &agrave; celui du site distant
(cafe_townsend). En cas de doute, consultez votre administrateur
syst&egrave;me.
Dans bien des cas, cette zone de texte doit rester vierge.
■
■
Indiquez votre nom d’utilisateur et votre mot de passe dans les
zones appropri&eacute;es.
Si votre serveur prend en charge le SFTP, s&eacute;lectionnez l’option
Utiliser Secure FTP (SFTP).
■
Cliquez sur Tester pour tester vos param&egrave;tres de connexion.
■
En cas d’&eacute;chec, consultez votre administrateur syst&egrave;me.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de
dialogue.
9.
Si vous s&eacute;lectionnez Local/R&eacute;seau, cliquez sur l’ic&ocirc;ne de dossier se
trouvant pr&egrave;s de la zone de texte pour rechercher le dossier racine du site
distant.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de
dialogue.
10. Cliquez
sur OK.
Dreamweaver cr&eacute;e une connexion avec le dossier distant.
11.
362 Didacticiel : Publication de votre site
Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites.
T&eacute;l&eacute;chargez vos fichiers locaux
Apr&egrave;s avoir d&eacute;fini vos dossiers locaux et distants, vous pouvez transf&eacute;rer vos
fichiers du dossier local vers le serveur Web. Il est imp&eacute;ratif de t&eacute;l&eacute;charger
vos pages pour les rendre accessibles, m&ecirc;me si le serveur Web est ex&eacute;cut&eacute;
sur votre ordinateur local.
1.
Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez le dossier
racine local du site (cafe_townsend).
2.
Cliquez sur l’ic&ocirc;ne repr&eacute;sentant une fl&egrave;che bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers.
.
3.
Quand Dreamweaver vous demande si vous voulez placer le site entier,
cliquez sur OK.
Dreamweaver copie tous les fichiers dans le dossier distant d&eacute;fini dans
Configurez un dossier distant, page 360. Cette op&eacute;ration peut prendre
quelque temps puisque Dreamweaver doit t&eacute;l&eacute;charger tous les fichiers
du site vers le serveur distant.
4.
Ouvrez votre site distant dans un navigateur pour vous assurer que le
transfert s’est bien d&eacute;roul&eacute;.
T&eacute;l&eacute;chargez vos fichiers locaux 363
R&eacute;solution des probl&egrave;mes de
configuration du dossier distant
(en option)
Un serveur Web peut &ecirc;tre configur&eacute; de diff&eacute;rentes fa&ccedil;ons. La liste suivante
vise &agrave; vous expliquer certains probl&egrave;mes courants que vous pouvez avoir en
configurant un dossier distant et &agrave; vous aider &agrave; les r&eacute;soudre :
■
La mise en œuvre FTP de Dreamweaver peut ne pas fonctionner
correctement avec certains serveurs proxy, pare-feu multiniveaux et
autres formes d’acc&egrave;s indirect &agrave; un serveur.
Si vous avez des probl&egrave;mes d’acc&egrave;s en FTP, demandez l’aide de votre
administrateur syst&egrave;me.
■
Pour la mise en œuvre FTP de Dreamweaver, il est indispensable de se
connecter au dossier racine du syst&egrave;me distant (Dans de nombreuses
applications, vous pouvez vous connecter &agrave; n’importe quel r&eacute;pertoire
distant, puis naviguer dans le syst&egrave;me de fichiers distants pour
rechercher un r&eacute;pertoire).
Veillez &agrave; indiquer le dossier racine du syst&egrave;me distant comme r&eacute;pertoire
h&ocirc;te.
Si vous avez des probl&egrave;mes de connexion et avez sp&eacute;cifi&eacute; le r&eacute;pertoire
h&ocirc;te avec une seule barre oblique (/), c’est peut-&ecirc;tre qu’il vous faut
sp&eacute;cifier un chemin relatif entre le r&eacute;pertoire auquel vous vous
connectez et le dossier racine distant.
Si, par exemple, le dossier racine distant est un r&eacute;pertoire de niveau
sup&eacute;rieur, vous devez parfois sp&eacute;cifier ../../ pour le r&eacute;pertoire h&ocirc;te.
■
Par ailleurs, les noms de dossiers et de fichiers qui contiennent des
espaces ou des caract&egrave;res sp&eacute;ciaux peuvent souvent occasionner des
probl&egrave;mes &agrave; l’occasion d’un transfert sur un site distant.
Utilisez des traits de soulignement &agrave; la place des espaces, et &eacute;vitez, dans
la mesure du possible, d’utiliser des caract&egrave;res sp&eacute;ciaux pour les noms
de fichiers et de dossiers. En particulier, les deux points (:), barres
obliques, virgules et apostrophes sont &agrave; &eacute;viter dans les noms de fichiers
et de dossiers. Il arrive que la pr&eacute;sence de caract&egrave;res sp&eacute;ciaux dans les
noms de fichiers ou de dossiers emp&ecirc;che Dreamweaver de cr&eacute;er un plan
du site.
364 Didacticiel : Publication de votre site
■
En cas de probl&egrave;me avec un nom de fichier long, raccourcissez ce nom.
Sur Macintosh, les noms de fichiers ne peuvent pas compter plus de
31 caract&egrave;res.
■
Notez que certains serveurs utilisent ce qui est appel&eacute;, suivant le
syst&egrave;me d’exploitation, des liens symboliques (Unix), des raccourcis
(Windows) ou des alias (Macintosh), pour connecter un dossier situ&eacute;
en un point du disque du serveur &agrave; un autre dossier situ&eacute; ailleurs.
Par exemple, le sous-r&eacute;pertoire public_html de votre r&eacute;pertoire
principal sur le serveur peut n’&ecirc;tre qu’un simple lien pointant sur une
toute autre partie du serveur. Dans la plupart des cas, ces alias n’ont pas
d’effet n&eacute;gatif sur votre capacit&eacute; &agrave; vous connecter au dossier ou
r&eacute;pertoire appropri&eacute;, mais si vous ne pouvez vous connecter qu’&agrave; une
partie du serveur, il s’agit peut-&ecirc;tre d’un probl&egrave;me d’alias.
■
Si vous d&eacute;couvrez un message d’erreur du type &laquo; impossible de placer le
fichier &raquo;, votre dossier distant peut &ecirc;tre satur&eacute;. Pour plus
d’informations, consultez le journal FTP.
R E MA R Q UE
En r&egrave;gle g&eacute;n&eacute;rale, si vous avez un probl&egrave;me avec un transfert FTP,
consultez le journal FTP en s&eacute;lectionnant Site &gt; Avanc&eacute;&gt; Journal FTP.
R&eacute;solution des probl&egrave;mes de configuration du dossier distant (en option) 365
366 Didacticiel : Publication de votre site
CHAPITRE 14
Didacticiel : Param&eacute;trage de votre site
Web pour les utilisateurs de Contribute
14
Macromedia Contribute vous permet, ainsi qu’&agrave; vos utilisateurs, de g&eacute;rer,
r&eacute;partir et contr&ocirc;ler un contenu plac&eacute; sur le Web. Vous pouvez facilement
vous connecter au site Web avec Contribute, et envoyer des cl&eacute;s de
connexion pour attribuer &agrave; vos utilisateurs des param&egrave;tres qui leur
permettent de modifier le site Web. En d&eacute;terminant des r&ocirc;les utilisateur,
vous pouvez accorder &agrave; vos utilisateurs plus ou moins de pouvoir de
modification.
Dans ce didacticiel, vous allez accomplir les t&acirc;ches suivantes :
Passer votre t&acirc;che en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
En savoir plus sur les connexions et l’administration de site Web
avec Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Connexion &agrave; un site Web en tant qu’administrateur. . . . . . . . . . 369
Cr&eacute;ez un r&ocirc;le utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Modification des param&egrave;tres d’un r&ocirc;le . . . . . . . . . . . . . . . . . . . . . .372
D&eacute;finition des param&egrave;tres administratifs . . . . . . . . . . . . . . . . . . . .370
Cr&eacute;er une cl&eacute; de connexion et l’envoyer &agrave; des utilisateurs . . . . .375
367
Passer votre t&acirc;che en revue
CON S EI L
Si vous ne pouvez
pas acc&eacute;der &agrave; un
serveur Web, vous
pouvez toujours
apprendre &agrave; utiliser
Contribute.
Consultez une
d&eacute;monstration de
modification d’un
site Web,
d’attribution
d’autorisations et de
cr&eacute;ation de cl&eacute; de
communication sur
le site
www.macromedia.c
om/go/
captivate_demo.
CO NS E I L
Avant de vous
connecter &agrave; votre
site Web, il est
judicieux de v&eacute;rifier
les autorisations
associ&eacute;es &agrave; votre
r&eacute;seau et votre
serveur ainsi que la
structure de
r&eacute;pertoires de votre
site Web. Pour plus
d’informations, voir
D&eacute;ploiement de
Contribute en
entreprises et dans
les services dans
Utilisation et
administration de
Contribute.
Dans ce didacticiel vous allez utiliser Contribute pour vous connecter &agrave;
votre site Web et envoyer des cl&eacute;s de connexion pour permettre aux autres
de modifier le site Web. Vous allez &eacute;galement d&eacute;finir des r&ocirc;les utilisateur et
modifier les param&egrave;tres associ&eacute;s aux r&ocirc;les afin de contr&ocirc;ler le niveau de
modification du site Web pour lequel vous autorisez ces utilisateurs.
Si vous n’avez pas encore d&eacute;fini un site distant dans Dreamweaver et charg&eacute;
vos fichiers locaux, vous devez le faire avant de d&eacute;marrer. Le site distant que
vous d&eacute;finissez doit &ecirc;tre sur un serveur Web. Pour toutes instructions,
reportez-vous aux sections Configurez un dossier distant, page 360 et
T&eacute;l&eacute;chargez vos fichiers locaux, page 363.
En savoir plus sur les connexions
et l’administration de site Web
avec Contribute
Une connexion de site Web Contribute est d&eacute;finie lorsque vous entrez
l’adresse Web et le chemin pointant Contribute vers le dossier contenant
votre site Web. Un site Web Contribute est constitu&eacute; du dossier auquel
vous vous connectez et de tous les dossiers et fichiers qu’il contient. Vous
pouvez &eacute;tablir de multiples connexions &agrave; diff&eacute;rents sites Web ou au sein du
m&ecirc;me site Web physique. Chaque connexion que vous cr&eacute;ez est trait&eacute;e
comme un site Web s&eacute;par&eacute; dans Contribute.
Lorsque vous &eacute;tablissez manuellement une connexion &agrave; un site Web, vous
pouvez devenir l’administrateur de ce site Web. En tant
qu’administrateurContribute, vous d&eacute;finissez des utilisateurs Contribute et
vous les aidez &agrave; utiliser Contribute pour g&eacute;rer le site Web. Vous pouvez
d&eacute;finir des dossiers et des autorisations utilisateur, qui d&eacute;terminent qui
peut modifier le contenu d’un site Web et ce qu’il peut modifier.
Les utilisateurs de Contribute g&egrave;rent le site Web &agrave; l’aide en appliquant un
flux de travail de type afficher-modifier-publier. Vous pouvez int&eacute;grer les
param&egrave;tres de connexion &agrave; votre site Web dans un fichier de cl&eacute;s de
connexion &agrave; envoyer aux utilisateurs pour leur permettre de se connecter
facilement au site Web sans avoir besoin de conna&icirc;tre les informations
techniques concernant l’emplacement physique du site Web.
368 Didacticiel : Param&eacute;trage de votre site Web pour les utilisateurs de Contribute
Connexion &agrave; un site Web en tant
qu’administrateur
Une fois que vous avez cr&eacute;&eacute; le site web Cafe Townsend, vous pouvez utiliser
Contribute pour vous connecter le site web.
R EM A R QU E
Pour plus d’informations sur les site Web Contribute, consultez la section
En savoir plus sur les connexions et l’administration de site Web avec
Contribute, page 368.
1.
Dans Contribute, s&eacute;lectionnez Edition &gt; Mes connexions ou
Contribute &gt; Mes connexions (Macintosh).
La bo&icirc;te de dialogue Mes connexions vous permet de cr&eacute;er et de g&eacute;rer
vos connexions Contribute.
R EMA R Q U E
Si vous n’avez pas encore d&eacute;fini un site distant dans Dreamweaver et
charg&eacute; vos fichiers locaux, vous devez le faire avant de d&eacute;marrer. Pour
toutes instructions, reportez-vous aux sections Configurez un dossier
distant, page 360 et T&eacute;l&eacute;chargez vos fichiers locaux, page 363.
2.
Dans la bo&icirc;te de dialogue Mes connexions, cliquez sur le bouton Cr&eacute;er .
3.
Dans l’assistant de connexion, cliquez sur Suivant.
4.
Entrez l’adresse du site Web Cafe Townsend, puis cliquez sur Suivant.
Il s’agit de l’URL que vous entrez dans un navigateur pour afficher le
site Web - par exemple, www.monsite.com
5.
Choisissez une m&eacute;thode d’acc&egrave;s pour vous connecter au site Web.
6.
Entrez le chemin au serveur sur lequel vous avez cr&eacute;&eacute; le site distant pour
le site Web Cafe Townsend, puis cliquez sur Suivant.
7.
Entrez votre nom et votre adresse &eacute;lectronique, puis cliquez sur Suivant.
8.
Dans l’&eacute;cran R&eacute;sum&eacute;, v&eacute;rifiez que les param&egrave;tres de connexion sont
corrects, puis cliquez sur Terminer pour achever la cr&eacute;ation de la
connexion.
CO NS E I L
Cet assistant vous guide au long des &eacute;tapes de configuration d’une
nouvelle connexion &agrave; un site Web.
Si n&eacute;cessaire, vous
pouvez &agrave; tout
moment cliquer sur
Retour ou Pr&eacute;c&eacute;dent
pour revenir &agrave; l’&eacute;cran
pr&eacute;c&eacute;dent. Si vous
avez besoin de plus
d’informations
concernant la
r&eacute;alisation d’un
&eacute;cran, cliquez sur le
bouton Aide.
Contribute cr&eacute;e une connexion au site Web Cafe Townsend.
Connexion &agrave; un site Web en tant qu’administrateur 369
Une fois que Contribute a r&eacute;ussi &agrave; cr&eacute;er une connexion au site Web,
l’assistant de connexion se ferme et la page principale du site Web
s’affiche dans le navigateur Contribute.
D&eacute;finition des param&egrave;tres
administratifs
Maintenant que vous &ecirc;tes connect&eacute; au site Web Cafe Townsend et que
vous vous &ecirc;tes d&eacute;fini en tant qu’administrateur, vous pouvez d&eacute;finir
certains param&egrave;tres administratifs. Les param&egrave;tres administratifs de
Contribute rassemblent les param&egrave;tres qui s’appliquent &agrave; l’ensemble des
utilisateurs de votre site Web, et pas uniquement &agrave; des r&ocirc;les sp&eacute;cifiques.
1.
S&eacute;lectionnez Edition &gt; Administrer les sites Web (Windows) ou
Contribute &gt; Administrer les sites (Macintosh), puis s&eacute;lectionnez le site
Web Cafe Townsend dans le sous-menu.
2.
Cliquez sur Oui dans la bo&icirc;te de dialogue vous invitant &agrave; devenir
l’administrateur du site Web, entrez un mot de passe administrateur
pour le site Web, confirmez-le, puis cliquez sur OK.
3.
Dans la bo&icirc;te de dialogue Administrer le site Web, s&eacute;lectionnez la
cat&eacute;gorie Restaurations &agrave; gauche.
4.
S&eacute;lectionnez Activer les restaurations pour activer les restaurations.
Les pages de restauration sont des versions de restauration de chaque
page Web que vous publiez avec Contribute.
370 Didacticiel : Param&eacute;trage de votre site Web pour les utilisateurs de Contribute
5.
Augmentez le nombre de versions que vous voulez conserver de chaque
page entre 3 et 5.
Dans ce didacticiel, vous ne modifiez que les param&egrave;tres de restauration,
mais il existe plusieurs autres cat&eacute;gories associ&eacute;s &agrave; davantage de param&egrave;tres
administratifs.
Pour le moment, laissez ouverte la bo&icirc;te de dialogue Administrer le site
Web. Ensuite, vous allez cr&eacute;er un r&ocirc;le utilisateur.
Cr&eacute;ez un r&ocirc;le utilisateur
Lorsque les utilisateurs Contribute se connectent &agrave; un site Web, ils sont
invit&eacute;s &agrave; indiquer &agrave; quel r&ocirc;le ils appartiennent. Vous allez cr&eacute;er un r&ocirc;le
pour les personnes qui ont besoin de mettre &agrave; jour le menu du site web
exemple Cafe Townsend.
1.
S&eacute;lectionnez Edition &gt; Administrer les sites Web (Windows) ou
Contribute &gt; Administrer les sites (Macintosh), puis s&eacute;lectionnez le site
Web Cafe Townsend dans le sous-menu.
2.
Cliquez sur Oui dans la bo&icirc;te de dialogue vous invitant &agrave; devenir
l’administrateur du site Web, entrez un mot de passe administrateur
pour le site Web, confirmez-le, puis cliquez sur OK.
Dans la bo&icirc;te de dialogue Administrer le site Web, vous voyez que trois
r&ocirc;les par d&eacute;faut sont d&eacute;finis pour Contribute : Administrateur, Editeur
et Auteur.
Vous allez cr&eacute;er un nouveau r&ocirc;le pour les chefs du Cafe Townsend.
3.
Cliquez sur le bouton Cr&eacute;er un nouveau r&ocirc;le.
Cr&eacute;ez un r&ocirc;le utilisateur 371
4.
Dans la bo&icirc;te de dialogue Cr&eacute;er un nouveau r&ocirc;le, s&eacute;lectionnez le r&ocirc;le
Editeur dans la liste Cr&eacute;er un nouveau r&ocirc;le &agrave; partir de la copie de.
La s&eacute;lection d’un r&ocirc;le existant comme base d’un nouveau r&ocirc;le vous
permet de r&eacute;utiliser les param&egrave;tres du r&ocirc;le s&eacute;lectionn&eacute;. Vous pouvez
modifier les param&egrave;tres du nouveau r&ocirc;le selon vos besoins.
5.
Dans le champ textuel, entrez Chef comme nom de votre nouveau r&ocirc;le,
puis cliquez sur OK.
Le r&ocirc;le Chef appara&icirc;t d&eacute;sormais dans la liste des noms de r&ocirc;les de la
bo&icirc;te de dialogue Administrer le site Web.
Laissez cette bo&icirc;te de dialogue ouverte. Ensuite, vous allez modifier les
param&egrave;tres du r&ocirc;le Chef.
Modification des param&egrave;tres
d’un r&ocirc;le
Vous &ecirc;tes maintenant sur le point de d&eacute;terminer &agrave; quels dossiers les
utilisateurs poss&eacute;dant le r&ocirc;le Chef peuvent acc&eacute;der et quel genre de
modifications les utilisateurs peuvent apporter au site Web Cafe Townsend.
1.
Dans la bo&icirc;te de dialogue Administrer le site Web, s&eacute;lectionnez le r&ocirc;le
Chef dans la liste des noms de r&ocirc;le.
2.
Cliquez sur le bouton Modifier les param&egrave;tres de r&ocirc;le.
372 Didacticiel : Param&eacute;trage de votre site Web pour les utilisateurs de Contribute
3.
Dans la bo&icirc;te de dialogue de modification des param&egrave;tres du r&ocirc;le Chef,
dans la cat&eacute;gorie G&eacute;n&eacute;ral, effectuez les op&eacute;rations suivantes :
a.
S&eacute;lectionnez Autoriser des utilisateurs &agrave; publier des fichiers pour
permettre au chef de publier le menu apr&egrave;s y avoir apport&eacute; des
modifications.
b.
Dans la bo&icirc;te de texte de description du r&ocirc;le, entrez Les utilisateurs
de ce r&ocirc;le peuvent modifier et publier ce menu.
4.
S&eacute;lectionnez la cat&eacute;gorie Acc&egrave;s au dossier/fichier dans la liste situ&eacute;e sur
la gauche.
5.
S&eacute;lectionnez Autoriser la modification uniquement dans ces dossiers.
Dans la bo&icirc;te de dialogue d’avertissement, cliquez sur OK pour
poursuivre.
6.
Cliquez sur le bouton Ajouter un dossier.
7.
Dans la bo&icirc;te de dialogue Choisir un dossier, double-cliquez sur le
dossier Cafe Townsend dans la fen&ecirc;tre, double-cliquez sur le dossier des
images, puis double-cliquez sur le dossier menu_images.
8.
Cliquez sur le bouton Choisir &laquo; menu_images &raquo; en bas.
Modification des param&egrave;tres d’un r&ocirc;le 373
9.
C ONS E I L
Vous allez autoriser
les Chefs &agrave; ajouter
des images au site,
mais si vous vouliez
limiter les utilisateurs
&agrave; la modification de
texte uniquement,
vous pouviez
s&eacute;lectionner l’option
Autoriser
uniquement la
modification et la
mise en forme du
texte dans la section
Restrictions de
modification
g&eacute;n&eacute;rales.
Dans la bo&icirc;te de dialogue de modification des param&egrave;tres du r&ocirc;le
&laquo; Chef &raquo;, s&eacute;lectionnez la cat&eacute;gorie Modification dans la liste situ&eacute;e &agrave;
gauche.
10. Dans
la section Autres options de modification, s&eacute;lectionnez N&eacute;cessite
le texte ALT pour les images.
11.
S&eacute;lectionnez la cat&eacute;gorie Actifs partag&eacute;s dans la liste situ&eacute; sur la gauche.
Les actifs partag&eacute;s sont des images, du contenu Macromedia Flash ou
des articles de la biblioth&egrave;que Macromedia Dreamweaver
commun&eacute;ment utilis&eacute;s. Si ces &eacute;l&eacute;ments sont des actifs partag&eacute;s, les
utilisateurs b&eacute;n&eacute;ficiant du r&ocirc;le Chef pourront les trouver et les ins&eacute;rer &agrave;
leurs menus plus facilement.
12. Cliquez
sur le bouton Ajouter et choisissez Image dans le menu
contextuel.
13.
Dans la bo&icirc;te de dialogue Choisir une image, double-cliquez sur le
dossier Cafe Townsend dans la fen&ecirc;tre, double-cliquez sur le dossier des
images, puis double-cliquez sur le dossier menu_images.
14. Cliquez
sur le bouton S&eacute;lectionner tous les fichiers du dossier.
15. Cliquez
sur OK.
16.
Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de l’actif partag&eacute;, ex&eacute;cutez les
actions suivantes :
a.
Cliquez sur la colonne de texte ALT &agrave; c&ocirc;t&eacute; de l’image special_pasta.
b.
Entrez Entrez Image of Friday pasta special.
c.
Ensuite, cliquez colonne de texte ALT sous l’image special_salmonl.
d.
Entrez Image du saumon sp&eacute;cial du samedi.
374 Didacticiel : Param&eacute;trage de votre site Web pour les utilisateurs de Contribute
17.
e.
Ensuite, cliquez colonne de texte ALT sous l’image
special_vegetarian.
f.
Entrez Image du plat sp&eacute;cial v&eacute;g&eacute;tarien du samedi.
g.
Cliquez sur OK.
Dans la bo&icirc;te de dialogue de modification des param&egrave;tres du r&ocirc;le Chef,
cliquez sur OK pour sauvegarder vos modifications pour le r&ocirc;le Chef.
La bo&icirc;te de dialogue se ferme et vous renvoie &agrave; la bo&icirc;te de dialogue
Administrer le site Web.
Laissez cette bo&icirc;te de dialogue ouverte. Ensuite, vous allez cr&eacute;er une cl&eacute; de
connection permettant aux utilisateurs dont le r&ocirc;le est Chef de se connecter
au site Web et de lui apporter des modifications.
Cr&eacute;er une cl&eacute; de connexion et
l’envoyer &agrave; des utilisateurs
Contribute vous permet d’int&eacute;grer des informations de connexion au site
Web dans une cl&eacute; de connexion que vous pouvez envoyer &agrave; d’autres
utilisateurs. Les utilisateurs doivent simplement double-cliquer sur le
fichier de cl&eacute; de connexion pour vous connecter au site Web et commencer
&agrave; modifier.
1.
Dans la bo&icirc;te de dialogue Administrer le site Web, cliquez sur le bouton
Envoyer la cl&eacute; de connexion.
2.
Dans l’assistant Connexion, s&eacute;lectionnez Oui pour cr&eacute;er un cl&eacute; de
connexion avec les m&ecirc;mes informations de connexion que votre
connexion en cours.
3.
Cliquez sur Suivant.
4.
S&eacute;lectionnez le r&ocirc;le Chef, puis cliquez sur Suivant.
5.
S&eacute;lectionnez Enregistrer sur l’ordinateur local.
Pour les besoins de ce didacticiel, vous allez enregistrer la cl&eacute; de
connexion sans l’envoyer r&eacute;ellement aux utilisateurs. Si vous
s&eacute;lectionnez l’option messagerie &eacute;lectronique, Contribute ouvre
l’application de messagerie &eacute;lectronique pour vous permettre d’envoyer
la cl&eacute; aux utilisateurs.
Cr&eacute;er une cl&eacute; de connexion et l’envoyer &agrave; des utilisateurs 375
6.
Entrez un mot de passe dont vous vous souviendrez, puis entrez le mot
de passe &agrave; nouveau.
Si vous vouliez r&eacute;ellement rendre cette cl&eacute; disponible aux utilisateurs,
vous devriez leur faire conna&icirc;tre ce mot de passe.
7.
Cliquez sur Suivant.
8.
V&eacute;rifier l’&eacute;cran r&eacute;capitulatif, puis cliquez sur Terminer.
9.
Dans la bo&icirc;te de dialogue Exporter la connexion de cl&eacute;, acc&eacute;dez &agrave; votre
bureau.
10. Cliquez
11.
sur Enregistrer.
Dans la bo&icirc;te de dialogue Administrer le site Web, cliquez sur Fermer
pour quitter la bo&icirc;te de dialogue et enregistrer vos modifications.
Vous avez ainsi configur&eacute; Contribute pour la modification du site Web
Cafe Townsend et cr&eacute;&eacute; un r&ocirc;le utilisateur. Et vous avez constat&eacute; &agrave; quel
point il est facile de cr&eacute;er des cl&eacute;s de connexion pour l’envoyer aux
utilisateurs pour qu’ils vous aident &agrave; g&eacute;rer votre site Web.
376 Didacticiel : Param&eacute;trage de votre site Web pour les utilisateurs de Contribute
Index
A
acc&egrave;s &agrave; la documentation
Contribute 35
Contribute et FlashPaper 34
Dreamweaver 22
Fireworks 32
Flash 26
accessibilit&eacute; de l’environnement auteur Flash 110
accrochage
&agrave; la grille 93
aux guides 91
Accrocher &agrave; la grille, commande (dans Flash) 93
Accrocher aux guides, commande (dans Flash) 91
achat de manuels d’aide imprim&eacute;s 47
actifs FreeHand, cr&eacute;ation 149
actifs, ajout &agrave; un site 161
activation des produits Studio 18
Affichage des images, bouton (dans Flash) 75
Affichage des images, menu (dans Flash) 75
Afficher la grille, commande (dans Flash) 92
Afficher les guides, commande (dans Flash) 91
Afficher les info-bulles, pr&eacute;f&eacute;rences (dans Flash) 103
Afficher tout, commande (dans Flash) 70
Afficher une image, commande (dans Flash) 70
aide
acc&egrave;s 40
achat de versions imprim&eacute;es 47
changement de la taille de police 41
contextuelle 46
discussion dans LiveDocs 48
impression 47
impression d’une page 47
index, dans 41
recherche 40
aide contextuelle 46
Aide, panneau
disposition 49
mise &agrave; jour 50
ouverture 43
recherche 44, 45
table des mati&egrave;res 43
taille du texte 49
Ancre nomm&eacute;e sur S&eacute;quence, pr&eacute;f&eacute;rences 103
animation, image par image et interpol&eacute;e 150
Aper&ccedil;u dans un navigateur
&agrave; propos 325
modification des pr&eacute;f&eacute;rences 326
aper&ccedil;u des images, vignettes 75
applications, exemple 286
avertissements, pr&eacute;f&eacute;rences 105
B
barre d’&eacute;dition (dans Flash) 86
barre d’&eacute;tat
&agrave; propos 58
Menu d&eacute;roulant Taille de fen&ecirc;tre 59
Barre d’outils Codage (dans Dreamweaver) 61
Barre d’outils de document (dans Dreamweaver) 57
barre d’outils principale (dans Flash) 86
barres d’outils
&agrave; propos 131
Codage 61
Document 57
&eacute;diteur 131
mise en forme du texte 132
navigateur 131
personnalisation 88
retouche d’image 132
basculement
modification vers navigation 135
navigation vers modification 135
377
biblioth&egrave;que, raccourcis clavier pour &eacute;l&eacute;ments 116
Bitmaps dans l’onglet Presse-papiers, pr&eacute;f&eacute;rences
(Windows uniquement) 104
C
Calque, commande (dans Flash) 80
calques
affichage 81
affichage sous forme de contours 81
calques de guide 86
changement de l’ordre 85
changement de la couleur de contour 82
changement de la hauteur 82
changement du nom 83
changement du nombre de calques affich&eacute;s 82
copie 84
cr&eacute;ation 80
Ins&eacute;rer un calque, bouton 80
modification 83
organisation 85
pr&eacute;sentation 79
s&eacute;lection 83
suppression 84
verrouillage 84
calques de guide 86
calques, dossiers
ajout 80
changement de l’ordre 85
changement du nom 83
copie du contenu 84
cr&eacute;ation 80
modification 83
organisation 85
suppression 84
verrouillage 84
Cat&eacute;gories de la barre Ins&eacute;rer 60
Centrer l’image, bouton 74
certification et formation 285
changement du nom des calques et dossiers de calques
83
chercher dans l’Aide 40
chercher de l’aide 44, 45
Coller les images, commande (dans Flash) 78
conception de pages 145
cr&eacute;ation de mises en forme 147–??
maquettes 145
378
Index
contours
affichage du contenu des calques sous forme de 81
changement de la couleur pour les calques 82
Contribute
barre d’outils de l’&eacute;diteur 131
barre d’outils de mise en forme du texte 132
barre d’outils de retouche d’image 132
barre d’outils du navigateur 131
barres d’outils 131
didacticiel 367
espace de travail 130
Panneau Comment... 133
panneau de navigation 133
Panneau Pages 133
contr&ocirc;les d’arborescence, raccourcis clavier 116
copie
calques 84
contenu d’un dossier de calques 84
Copier les images, commande (dans Flash) 78
Couleur de surbrillance, pr&eacute;f&eacute;rences 103
couleurs d’arri&egrave;re-plan, d&eacute;finition 205
cr&eacute;ation d’une application, didacticiel 287
CSS (feuilles de style en cascade)
association 336
cr&eacute;ation 334
Mise en forme avec 329–357
pr&eacute;sentation 332
Styles CSS, panneau 64
CSS VoirFeuilles de style en cascade
D
D&eacute;grad&eacute;s dans le presse-papiers, pr&eacute;f&eacute;rences
(dans Flash) 104
didacticiels
ajout de contenu dans les pages 301
cr&eacute;ation d’une mise en forme de page bas&eacute;e sur un
tableau 189
Didacticiel sur les bases de la conception graphique
223
Didacticiel sur les bases de la conception Web 211
mise en forme de votre page avec CSS 329
param&eacute;trage des sites Web pour les utilisateurs de
Contribute 367
publication de votre site 359
didacticiels, cr&eacute;ation d’une application 287
discussion sur l’aide dans LiveDocs 48
disposition du panneau Aide 49
Disposition par d&eacute;faut, commande,
pour les panneaux 100
document, cr&eacute;ation 248, 291
Documentation Flash, acc&egrave;s 26
documents
enregistrement 192
dossiers distants 360
Cr&eacute;ation avec Dreamweaver 361
d&eacute;pannage de configuration 364
dossiers locaux
d&eacute;finition 163–165
dossiers racines 144
Dreamweaver
actifs, assemblage 152
d&eacute;ploiement de fichiers 154
espace de travail 53
Feuilles de style en cascade (CSS) 148
fichiers 52
mises en forme 147–148
modification d’images Fireworks 152
panneau Actifs 152
test de sites 153
E
&eacute;diteurs, autres 286
effectuer une recherche dans des fichiers SWF
FlashPaper 138
enregistrement du produit 19
environnement de travail 119
espace de travail 119
&agrave; propos 53
Contribute 130
Dreamweaver 53
Fireworks 118
Flash 67
FlashPaper 137
pr&eacute;sentation flottante 54
espace r&eacute;serv&eacute; pour image
cr&eacute;ation d’images 305
espaces r&eacute;serv&eacute;s pour l’image
insertion 203
pr&eacute;sentation 204
exportation 241
F
Fen&ecirc;tre de document
barre d’&eacute;tat 58
barre de titre 56
Menu d&eacute;roulant Taille de fen&ecirc;tre 59
notions de base 56
s&eacute;lecteur de balises 59
taille de la page et temps de t&eacute;l&eacute;chargement 59
fichiers
Dreamweaver 52
FlashPaper 136
T&eacute;l&eacute;chargement du dossier local vers le serveur
distant 363
Fichiers SWF FlashPaper
impression 137
navigation 139
ouverture dans un nouveau navigateur 139
rechercher 138
redimensionnement 138
s&eacute;lection de texte 138
Voir aussi fichiers SWF
fichiers texte en mode Code 319
Fireworks
actifs, cr&eacute;ation 149
Document, onglets 129
espace de travail 118
Exportation rapide, bouton 128
Inspecteur des propri&eacute;t&eacute;s 122–124
modification d’images (depuis Dreamweaver) 152
navigation dans un document 129
outils, modification des options 121
panneau Outils 120
panneaux (organisation) 126
panneaux, vue d’ensemble 124–126
Flash
animation 150
espace de travail 67
fichiers SWF, insertion 312
inspecteur des propri&eacute;t&eacute;s 93
lecture de contenu dans Dreamweaver 314
m&eacute;dias enrichis, cr&eacute;ation 150
Sc&eacute;nario 71–79
FlashPaper
espace de travail 137
fichiers, pr&eacute;sentation 136
fonctions 137
FMA (Zones de messages flexibles) 12
formation et certification 285
Index
379
G
gestion et mise &agrave; jour de site Web 155
grilles
accrochage 93
affichage 92
modification 93
guides
accrochage 91
affichage 91
d&eacute;finition des pr&eacute;f&eacute;rences 92
d&eacute;placement 91
effacement 92
retrait 91
verrouillage 91
impression de fichiers SWF FlashPaper 137
impression de l’aide 47
inscription 284
Ins&eacute;rer un Calque, commande (dans Flash) 80
Ins&eacute;rer une image-cl&eacute; vide, commande (dans Flash) 77
Ins&eacute;rer une image-cl&eacute;, commande (dans Flash) 77
Inspecteur des propri&eacute;t&eacute;s
raccourcis clavier 111
inspecteur des propri&eacute;t&eacute;s
pr&eacute;sentation 94
utilisation des panneaux et 93
installation de Macromedia Studio 16
J
Jeux de panneaux, commande (dans Flash) 100
I
Image, commande (dans Flash) 77
Image-cl&eacute; vide, commande (dans Flash) 77
Image-cl&eacute;, commande (dans Flash) 77
images 304–311
affichage 74
affichage de vignettes 75
affichage du contenu 70
affich&eacute;es dans le sc&eacute;nario 71
centrage de la t&ecirc;te de lecture dans 74
changement de l’affichage 75
conversion d’images-cl&eacute;s en 79
copie et collage 78
copie par d&eacute;placement 78
cr&eacute;ation avec Fireworks 149
cr&eacute;ation avec FreeHand 149
d&eacute;placement dans le sc&eacute;nario 78
espaces r&eacute;serv&eacute;s 203
insertion 77, 306, 307, 309
insertion dans Dreamweaver 152
manipulation dans le sc&eacute;nario 76
retrait 78
images bitmap, anticr&eacute;nelage 104
images interpol&eacute;es, d&eacute;placement d’images-cl&eacute;s dans 79
images-cl&eacute;s
conversion en images 79
d&eacute;placement dans des s&eacute;quences interpol&eacute;es 79
insertion 77
retrait 78
vides 77
importation
images 225
380
Index
L
liens, cr&eacute;ation 323
LiveDocs 48
M
Macromedia Flash Development Center 285
Macromedia Studio, installation 16
Main, outil 71
Mappage des polices par d&eacute;faut, pr&eacute;f&eacute;rences 105
masques 234
Menu d&eacute;roulant Taille de fen&ecirc;tre 59
menu des en-t&ecirc;tes de colonne 195
menu des en-t&ecirc;tes de tableau 195
menus contextuels 109
Mise &agrave; jour du panneau Aide 50
mise en forme
bas&eacute;e sur un tableau 189–208
mise en page
de pages Web. 147–??
Mode Code
Mode Cr&eacute;ation et basculement entre 57
mode Code
affichage de fichiers texte 319
Mode Cr&eacute;ation 57
mode d’&eacute;dition de document 90
mode d’&eacute;dition de symbole 90
modification
basculement vers le mode navigation depuis 135
calques et dossiers de calques 83
N
navigation
basculement vers le mode modification depuis 135
pages 135
navigation dans les fichiers SWF FlashPaper 139
Notes d’accompagnement 285
O
optimisation 240
Options d’impression, pr&eacute;f&eacute;rence (Windows
uniquement) 102
Outil Main 59
Outil Zoom (dans Flash) 70
outils
affichage dans Flash 87
Main 71
personnalisation du panneau Outils dans Flash 88
s&eacute;lection dans Flash 88
Zoom 70
Outils, panneau
Flash 87
ouverture de fichier SWF FlashPaper dans un nouveau
navigateur 139
ouvrir Aide 43
P
page de d&eacute;marrage 68
panneau Actifs 310
panneau Actions (dans Flash) 95
panneau Biblioth&egrave;que (dans Flash) 95
Panneau Comment... (dans Contribute) 133
Panneau de navigation de Contribute
agrandissement et r&eacute;duction 133
Panneau Comment... 134
Panneau Pages 133
panneaux 133
redimensionnement 133
panneau Outils
Fireworks 118, 120
Panneau Pages (dans Contribute) 133
panneaux
Actifs 310
Actions 95
ancrage 98, 99
Biblioth&egrave;que 95
cr&eacute;ation d’un groupe 99
d&eacute;placement 98
d&eacute;veloppement 98
disposition 98
disposition par d&eacute;faut 100
enregistrement d’un jeu personnalis&eacute; 99
fermeture 97, 98
groupement 98, 99
jeux 99
liste des 96
menu d’options dans 97
ouverture 96
pr&eacute;sentation 96
raccourcis clavier 111
raccourcis clavier pour les contr&ocirc;les
d’arborescence 116
redimensionnement 97
r&eacute;duction 98
r&eacute;initialisation de la disposition 100
s&eacute;lection d’une disposition 100
s&eacute;paration 99
suppression d’une disposition personnalis&eacute;e 100
Personnalisation des raccourcis, bo&icirc;te de dialogue 108
Personnaliser la barre d’outils, commande (dans Flash)
88
PICT dans le presse-papiers, pr&eacute;f&eacute;rences
(Macintosh uniquement) 104
planification des sites Web 142
polices, changement de la taille dans l’aide 41
Pr&eacute;f&eacute;rence du nombre d’annulations dans Flash 102
pr&eacute;f&eacute;rences
Afficher les info-bulles 103
Ancre nomm&eacute;e sur S&eacute;quence 103
avertissements 105
avertissements (dans Flash) 105
Bitmaps dans l’onglet Presse-papiers
(Windows uniquement) 104
Couleur de surbrillance 103
d&eacute;finition (dans Flash) 101
D&eacute;grad&eacute;s dans le Presse-papiers
(Windows uniquement) 104
dessin 105
g&eacute;n&eacute;ral (dans Flash) 102
Mappage des polices par d&eacute;faut 105
Nombre d’annulations 102
Options Au d&eacute;marrage 102
Options d’impression (Windows uniquement) 102
PICT dans le Presse-papiers (Macintosh
uniquement) 104
Presse-papiers 104
S&eacute;lection &agrave; l’aide de la touche Maj. 103
S&eacute;lection bas&eacute;e sur plages 103
Index
381
Texte FreeHand dans le Presse-papiers 105
Pr&eacute;f&eacute;rences Au d&eacute;marrage dans Flash 102
Pr&eacute;f&eacute;rences, commande (dans Flash) 101
Presse-papiers, pr&eacute;f&eacute;rences (dans Flash) 104
publication 359–365
R
raccourcis clavier
ajout et suppression 108
de l’inspecteur des propri&eacute;t&eacute;s 111
des panneaux 111
personnalisation 107
pour la sc&egrave;ne 115
pour les contr&ocirc;les d’arborescence 116
pour les contr&ocirc;les de l’inspecteur des propri&eacute;t&eacute;s 112
pour les contr&ocirc;les de la bo&icirc;te de dialogue 114
pour les contr&ocirc;les de panneau 112
pour les &eacute;l&eacute;ments de la biblioth&egrave;que 116
suppression 109
redimensionnement de fichiers SWF FlashPaper 138
r&egrave;gles
affichage et masquage 90
unit&eacute; de mesure 90
ressources 284, 286
Ressources en ligne, acc&egrave;s 31
Ressources Flash en ligne, acc&egrave;s 31
S
Sc&eacute;nario
affichage de vignettes 75
affichage des calques sous forme de contours 81
affichage des images, changement 75
ancrage &agrave; la fen&ecirc;tre d’application 73
Aper&ccedil;u en contexte, option 75
apparence de, modification 72
centrage de la t&ecirc;te de lecture dans 74
Centrer l’image, bouton 74
conversion d’images-cl&eacute;s en images 79
copie et collage d’images 78
d&eacute;placement 73
d&eacute;placement d’images 78
hauteur de calque, changement 82
images 76
images-cl&eacute;s 76
insertion d’images 77
manipulation d’images 76
masquage des calques dans 81
382
Index
nombre de calques affich&eacute;s, changement 82
noms des calques dans 73
option Aper&ccedil;u 75
ordre des calques, changement 85
ordre des dossiers de calques, changement 85
redimensionnement 73
suppression d’images ou images-cl&eacute;s 78
t&ecirc;te de lecture 74
utilisation 71
verrouillage des calques 84
verrouillage des dossiers de calques 84
sc&eacute;nario
utilisation d’images 71
Sc&egrave;ne
affichage complet 70
raccourcis clavier pour s&eacute;lectionner 115
zoom 69
s&eacute;lecteur de balises 322
s&eacute;lecteur de couleur 207
S&eacute;lection &agrave; l’aide de la touche Maj. pr&eacute;f&eacute;rences
(dans Flash) 103
S&eacute;lection bas&eacute;e sur plages, pr&eacute;f&eacute;rences 103
s&eacute;lection de calques 83
s&eacute;lection de texte dans des fichiers SWF
FlashPaper 138
s&eacute;minaires 286
serveurs
options d’acc&egrave;s 362
t&eacute;l&eacute;chargement de fichiers vers le serveur
distant 363
sites
&agrave; propos 160
actifs, ajout 161
d&eacute;finition 163–165
distant 160, 360
local 160
Voir &eacute;galement sites Web
sites Web 151
assemblage d’actifs 152
contenu 148
d&eacute;ploiement 151
environnement de d&eacute;veloppement pour 143
gestion et mise &agrave; jour 155
maquettes 145
planification 142
test d’&eacute;valuation 153
Styles CSS, panneau 64, 339
support Macromedia Flash 285
suppression
calques et dossiers de calques 84
images ou images-cl&eacute;s 78
Supprimer l’image-cl&eacute;, commande (dans Flash) 79
Supprimer les images, commande (dans Flash) 78
SWF, fichier 14
T
table des mati&egrave;res 43
tableaux
cr&eacute;ation d’une mise en forme 189–208
d&eacute;finition des propri&eacute;t&eacute;s 197–202
insertion 193–197
pr&eacute;sentation 195
Tableaux d&eacute;velopp&eacute;s 197
Tableaux d&eacute;velopp&eacute;s 197
t&eacute;l&eacute;chargement, fixer le temps &agrave; lui attribuer 59
Tester la connexion, bouton 362
t&ecirc;te de lecture, d&eacute;placement 74
texte
insertion 319
s&eacute;lection 319
texte de remplacement 203
Texte FreeHand dans le presse-papiers, pr&eacute;f&eacute;rences 105
V
verrouillage des calques et dossiers de calques 84
Vid&eacute;o Flash, insertion 315
Z
zone de travail, affichage et masquage 70
zoom 69, 70
Index
383
384
Index
Manuel du propriétaire | MACROMEDIA STUDIO 8-DCOUVERTE DE STUDIO 8 Manuel utilisateur

Manuels associés

MACROMEDIA

FIREWORKS 8-UTILISATION DE FIREWORKS

MACROMEDIA

DREAMWEAVER 8-BIEN DMARRER AVEC DREAMWEAVER

MACROMEDIA

DREAMWEAVER MX 6

Adobe

Fireworks MX

MACROMEDIA

DREAMWEAVER MX 2004-BIEN DMARRER AVEC DREAMWEAVER

MACROMEDIA

DREAMWEAVER 8-UTILISATION DE DREAMWEAVER

MACROMEDIA

FIREWORKS 2004-UTILISATION DE FIREWORKS

TRIMBLE

Business Center

MACROMEDIA

STUDIO MX 2004-A LA DCOUVERTE DE STUDIO MX

MACROMEDIA

FLASH 8-BIEN DMARRER AVEC FLASH

MACROMEDIA

CONTRIBUTE 3-UTILISATION ET ADMINISTRATION DE CONTRIBUTE

MACROMEDIA

FIREWORKS MX 2004-BIEN DMARRER AVEC FIREWORKS
