MACROMEDIA DREAMWEAVER MX 2004-UTILISATION DE DREAMWEAVER Manuel utilisateur

PDF
ドキュメント
Utilisation de Dreamweaver
Marques commerciales
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, Cold Fusion, Contribute, Design in Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite,
JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live
Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo &amp; Design,
Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo
and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip HTML, Shockwave, Sitespring,
SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be et Xtra sont des marques ou des marques d&eacute;pos&eacute;es de
Macromedia, Inc. et peuvent &ecirc;tre d&eacute;pos&eacute;es aux Etats-Unis ou dans d’autres pays. Les autres noms de produit, logos, concepts,
titres, mots ou phrases mentionn&eacute;s dans cette publication peuvent &ecirc;tre des marques commerciales, des marques de service ou des
noms commerciaux de Macromedia, Inc. ou d’autres entit&eacute;s et peuvent &ecirc;tre d&eacute;pos&eacute;s dans certaines juridictions ou certains pays.
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 Macromedia ne peut en aucun
cas &ecirc;tre tenu 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 propose ces liens dans un but pratique uniquement et ne peut en aucun cas endosser ou accepter la responsabilit&eacute; du
contenu de ces sites tiers.
Vous trouverez des informations sur les logiciels tiers et/ou d’autres conditions g&eacute;n&eacute;rales &agrave; l’adresse suivante :
http://www.macromedia.com/go/thirdparty_fr/.
Navigateur Opera &reg; Copyright &copy; 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits r&eacute;serv&eacute;s.
D&eacute;n&eacute;gation de responsabilit&eacute; d’Apple
APPLE COMPUTER, INC. N’ASSUME AUCUNE GARANTIE, IMPLICITE OU EXPLICITE, SUR LE LOGICIEL
INFORMATIQUE CI-INCLUS, SA COMMERCIABILITE OU SON ADEQUATION A UN OBJECTIF PARTICULIER.
L’EXCLUSION DES GARANTIES IMPLICITES N’ETANT PAS AUTORISEE DANS CERTAINS ETATS,
L’EXCLUSION CI-DESSUS PEUT DONC NE PAS S’APPLIQUER A VOTRE CAS. CETTE GARANTIE VOUS OFFRE
DES DROITS JURIDIQUES SPECIFIQUES. VOUS POUVEZ DISPOSER DE CERTAINS AUTRES DROITS, QUI
VARIENT SELON LES ETATS.
Copyright &copy; 2003 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. Num&eacute;ro de r&eacute;f&eacute;rence ZDW70M200F
Remerciements
Direction : Sheila McGinn
Gestion de projet : Charles Nadeau
R&eacute;daction : Jed Hartman, Jennifer Rowe, Chris Bedford, Charles Nadeau
Mise en forme : Lisa Stanziano, Mary Ferguson, Noreen Maher
Gestion de la production : Patrice O’Neill
Conception et production : Adam Barnett, Aaron Begley, Chris Basmajian, John Francis, Jeff Harmon
Remerciements : Jay London, Alain Dumesny, Lori Hylan-Cho, Jack Herrington, Vic Mitnick, Rebecca Hyatt, Russ Helfand, Erik
Bergman, Luciano Arruda, Sho Kuwamoto, Ken Karleskint, Scott Richards, Bonnie Loo, David Deming, Jennifer Taylor, Rosana
Francescato, Randy Nielsen, Gwenael Cossoul, Masayo Noda, Richard Clairicia, Scott Richards, Seungmin Lee, Vincent Truong,
Birnou S&eacute;barte, Julien Levadoux, les &eacute;valuateurs de la version b&ecirc;ta et l’ensemble des &eacute;quipes techniques et AQ de Dreamweaver.
Premi&egrave;re &eacute;dition : Septembre 2003
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
TABLE DES MATIERES
PARTIE I : Notions de base de Dreamweaver
INTRODUCTION : Bienvenue dans Dreamweaver . . .
. . . . . . . . . . . . . . . . . . . . . 17
Nouveaut&eacute;s de Dreamweaver MX 2004. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Par o&ugrave; d&eacute;buter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Processus de cr&eacute;ation de sites Web dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . . 23
Utilisation de Dreamweaver avec d’autres applications. . . . . . . . . . . . . . . . . . . . . . 26
Dreamweaver et l’accessibilit&eacute; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Guide des supports de formation &agrave; Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 28
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Ressources sur le langage HTML et les technologies Web . . . . . . . . . . . . . . . . . . . 30
CHAPITRE 1 : Exploration de l’espace de travail . . . . .
. . . . . . . . . . . . . . . . . . . . . 33
A propos de l’espace de travail de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de la fen&ecirc;tre de document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des barres d’outils, des inspecteurs et des menus contextuels. . . . . . . . .
Utilisation des panneaux et des groupes de panneaux . . . . . . . . . . . . . . . . . . . . . .
Utilisation des fonctions d’accessibilit&eacute; de Dreamweaver . . . . . . . . . . . . . . . . . . . .
Optimisation de l’espace de travail pour la conception de pages accessibles . . . . . .
Utilisation de guides visuels dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . .
Dreamweaver personnalisation, notions de base . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 2 : Configuration d’un site Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . 63
A propos des sites Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configuration d’un nouveau site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des param&egrave;tres avanc&eacute;s pour configurer un site Dreamweaver . . . . . . .
Modification des param&egrave;tres d’un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . .
Modification de sites Web existants dans Dreamweaver . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 3 : Cr&eacute;ation et ouverture de documents
33
41
44
49
52
56
57
58
64
66
67
72
72
. . . . . . . . . . . . . . . . . . . . . . . 75
Cr&eacute;ation de nouveaux documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Enregistrement d’un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
D&eacute;finition d’un nouveau type de document par d&eacute;faut . . . . . . . . . . . . . . . . . . . . . 79
Ouverture de documents existants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Importation d’un fichier HTML Microsoft Word . . . . . . . . . . . . . . . . . . . . . . . . . 80
3
PARTIE II : Utilisation de sites Dreamweaver
CHAPITRE 4 : Gestion des fichiers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
A propos de la gestion de site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux . . . . . . . . . . . . . . . . . . . . . . . . . 88
Affichage de fichiers et de dossiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Gestion de fichiers et de dossiers dans le panneau Fichiers . . . . . . . . . . . . . . . . . . . 94
Utilisation d’une carte visuelle de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Importation et exportation de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Suppression d’un site Dreamweaver de votre liste de sites . . . . . . . . . . . . . . . . . . 106
Archivage et extraction de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Acquisition et placement de fichiers depuis ou vers votre serveur . . . . . . . . . . . . . 109
Synchronisation des fichiers entre le site local et le site distant . . . . . . . . . . . . . . . 112
Voilage des dossiers et des fichiers du site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Stockage des informations sur les fichiers dans des Design Notes. . . . . . . . . . . . . 116
Test de votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
CHAPITRE 5 : Gestion des actifs de site et des biblioth&egrave;ques
. . . . . . . . . . . . . . 125
A propos des &eacute;l&eacute;ments de biblioth&egrave;que . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Cr&eacute;ation et gestion d’une liste d’actifs favoris. . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
CHAPITRE 6 : Gestion des sites Contribute avec Dreamweaver
. . . . . . . . . . . . 143
A propos de la gestion des sites Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Pr&eacute;paration d’un site &agrave; utiliser avec Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Administration d’un site Contribute &agrave; l’aide de Dreamweaver . . . . . . . . . . . . . . . 148
D&eacute;pannage d’un site Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Gestion des fichiers Contribute dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 150
PARTIE III : Mise en forme des pages
CHAPITRE 7 : Mise en forme des pages avec les styles CSS . . . . .
. . . . . . . . . . 155
A propos des calques de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Insertion de blocs de contenu pour la mise en forme . . . . . . . . . . . . . . . . . . . . . . 157
Modification de la couleur de surbrillance des blocs de contenu . . . . . . . . . . . . . 158
Utilisation des blocs de contenu pour la mise en forme . . . . . . . . . . . . . . . . . . . . 159
Insertion d’un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
D&eacute;finition des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s de calques. . . . . . . . . . . . . . . . . . . . . 162
Gestion des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Conversion des calques en tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages . . . . . . . . . . . 170
Utilisation du trac&eacute; de l’image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
4
Table des mati&egrave;res
CHAPITRE 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
. . . . . . . . . . . . . . . 173
A propos des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’un tableau et ajout de contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Importation et exportation de donn&eacute;es tabulaires . . . . . . . . . . . . . . . . . . . . . . . .
S&eacute;lection d’&eacute;l&eacute;ments de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation du mode Tableaux d&eacute;velopp&eacute;s pour une modification
de tableau plus simple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mise en forme des tableaux et des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Redimensionnement des tableaux, des colonnes et des lignes. . . . . . . . . . . . . . . .
Ajout et suppression de lignes et de colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fractionnement et fusion de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Copie, collage et suppression de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Imbrication de tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tri des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
174
175
176
177
180
181
183
187
189
190
192
192
CHAPITRE 9 : Mise en forme des pages avec le mode Mise en forme . . . . . . . .
193
A propos du mode Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Basculement du mode Standard au mode Mise en forme. . . . . . . . . . . . . . . . . . . 197
R&eacute;alisation de dessins en mode Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Ajout de contenu dans une cellule de Mise en forme . . . . . . . . . . . . . . . . . . . . . . 201
Suppression automatique des hauteurs de cellule . . . . . . . . . . . . . . . . . . . . . . . . . 202
Redimensionnement et d&eacute;placement de cellules et tableaux de Mise en forme . . . 202
Formatage de cellules et de tableaux de Mise en forme . . . . . . . . . . . . . . . . . . . . 204
D&eacute;finition de la largeur des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
D&eacute;finition de pr&eacute;f&eacute;rences pour le mode Mise en forme . . . . . . . . . . . . . . . . . . . . 207
CHAPITRE 10 : Utilisation de cadres .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
A propos des cadres et des jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des jeux de cadres dans la fen&ecirc;tre de document . . . . . . . . . . . . . . . . .
Cr&eacute;ation de cadres et de jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
S&eacute;lection de cadres et de jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ouverture d’un document dans un cadre. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Enregistrement des fichiers du cadre et du jeu de cadres . . . . . . . . . . . . . . . . . . .
Affichage et d&eacute;finition des propri&eacute;t&eacute;s et attributs de cadre . . . . . . . . . . . . . . . . . .
Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux de cadres . . . . . . . . . . . . . . . . . . .
D&eacute;finition des contenus de cadre avec liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestion des navigateurs qui ne peuvent pas afficher les cadres . . . . . . . . . . . . . . .
Utilisation des comportements JavaScript avec les cadres . . . . . . . . . . . . . . . . . . .
CHAPITRE 11 : Gestion des mod&egrave;les .
209
213
214
216
218
219
220
221
222
223
223
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
A propos des mod&egrave;les Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation d’un mod&egrave;le Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de mod&egrave;les pour un site Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de r&eacute;gions modifiables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des r&eacute;gions facultatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
D&eacute;finition d’attributs de balise modifiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des mati&egrave;res
226
238
241
243
245
248
250
5
Cr&eacute;ation d’un mod&egrave;le imbriqu&eacute;. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Modification et mise &agrave; jour des mod&egrave;les . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Gestion des mod&egrave;les . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Exportation et importation du contenu XML d’un mod&egrave;le . . . . . . . . . . . . . . . . . 256
Exportation d’un site sans marqueur de mod&egrave;le. . . . . . . . . . . . . . . . . . . . . . . . . . 257
Application ou suppression d’un mod&egrave;le depuis un document existant . . . . . . . . 257
Modification du contenu d’un document bas&eacute; sur un mod&egrave;le . . . . . . . . . . . . . . . 259
PARTIE IV : Ajout de contenu aux pages
CHAPITRE 12 : Utilisation des pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
A propos de l’utilisation des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Enregistrement de pages Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Sp&eacute;cification de balises HTML au lieu de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 270
D&eacute;finition des propri&eacute;t&eacute;s de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Utilisation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
S&eacute;lection d’&eacute;l&eacute;ments dans la fen&ecirc;tre de document . . . . . . . . . . . . . . . . . . . . . . . . 274
Utilisation du panneau Historique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Automatisation des t&acirc;ches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Utilisation de comportements JavaScript pour d&eacute;tecter le type et
la version des navigateurs et des plug-ins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Aper&ccedil;u et test de page dans les navigateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
V&eacute;rification des pr&eacute;f&eacute;rences de dur&eacute;e et de la taille de t&eacute;l&eacute;chargement . . . . . . . . . 284
CHAPITRE 13 : Insertion et mise en forme de texte
. . . . . . . . . . . . . . . . . . . . . . 287
A propos du formatage de texte dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 287
Insertion de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Mise en forme de paragraphes et structure du document . . . . . . . . . . . . . . . . . . . 296
Mise en forme de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Utilisation des feuilles de style en cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Mise &agrave; jour de feuilles de style CSS dans un site Contribute . . . . . . . . . . . . . . . . 314
V&eacute;rification orthographique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Recherche et remplacement de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
CHAPITRE 14 : Insertion d’images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
A propos des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Insertion d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Redimensionnement d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Recadrage d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Optimisation d’une image &agrave; l’aide de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . 324
Ajustement de la luminosit&eacute; et du contraste d’une image. . . . . . . . . . . . . . . . . . . 325
Accentuation d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Cr&eacute;ation d’une image survol&eacute;e. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Utilisation d’un &eacute;diteur d’image externe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Application decomportements aux images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
6
Table des mati&egrave;res
CHAPITRE 15 : Liens et navigation .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Description des emplacements et chemins d’acc&egrave;s des documents . . . . . . . . . . . .
Menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A propos des cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestion des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion de menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Association de comportements JavaScript &agrave; des liens . . . . . . . . . . . . . . . . . . . . . .
Recherche de liens bris&eacute;s, externes et orphelins . . . . . . . . . . . . . . . . . . . . . . . . . .
Correction des liens bris&eacute;s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ouverture des documents li&eacute;s dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 16 : Utilisation d’autres applications
330
332
333
334
334
340
344
346
347
349
350
351
352
. . . . . . . . . . . . . . . . . . . . . . . . . 353
A propos de l’int&eacute;gration de Fireworks et Flash . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimisation de votre environnement de travail pour Fireworks et Flash. . . . . . .
Utilisation de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
. . . . . . . . . . . . . . . . 367
A propos des fichiers multim&eacute;dia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion et modification d’objets multim&eacute;dia . . . . . . . . . . . . . . . . . . . . . . . . . . .
Lancement d’un &eacute;diteur externe pour des fichiers multim&eacute;dia . . . . . . . . . . . . . . .
Utilisation des Design Notes (Notes de conception) avec les objets multim&eacute;dia. .
Insertion et modification d’un objet de bouton Flash . . . . . . . . . . . . . . . . . . . . .
Insertion d’un objet texte Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
T&eacute;l&eacute;chargement et installation des &eacute;l&eacute;ments Flash . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’&eacute;l&eacute;ments Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification des attributs d’un &eacute;l&eacute;ment Flash . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’animations Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout d’une vid&eacute;o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout de son &agrave; une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion du contenu d’un plug-in Netscape Navigator . . . . . . . . . . . . . . . . . . . .
Insertion d’un contr&ocirc;le ActiveX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’une applet Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de comportements pour contr&ocirc;ler les objets multim&eacute;dias . . . . . . . . . .
CHAPITRE 18 : Utilisation des comportements JavaScript
354
354
355
363
368
369
371
373
373
375
375
376
376
377
377
378
378
379
381
381
381
. . . . . . . . . . . . . . . . 383
Utilisation du panneau Comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A propos des &eacute;v&eacute;nements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Application d’un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Association d’un comportement &agrave; du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification d’un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Actualisation d’un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des mati&egrave;res
384
384
385
386
387
387
7
Cr&eacute;ation de nouvelles actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
T&eacute;l&eacute;chargement et installation de comportements cr&eacute;&eacute;s par
des d&eacute;veloppeurs tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver . . . . . . . . . . . 388
PARTIE V : Utilisation du code de page
CHAPITRE 19 : Configuration d’un environnement de codage . . . .
. . . . . . . . . . 415
Affichage du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Utilisation de l’espace de travail orient&eacute; en mode Code (Windows uniquement) . 417
D&eacute;finition des pr&eacute;f&eacute;rences d’affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
D&eacute;finition des pr&eacute;f&eacute;rences de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Personnalisation des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Ouverture de fichiers en mode Code par d&eacute;faut. . . . . . . . . . . . . . . . . . . . . . . . . . 420
D&eacute;finition des pr&eacute;f&eacute;rences du programme de validation . . . . . . . . . . . . . . . . . . . 420
Gestion des biblioth&egrave;ques de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Importation de balises personnalis&eacute;es dans Dreamweaver . . . . . . . . . . . . . . . . . . 424
Utilisation d’un &eacute;diteur HTML externe avec Dreamweaver . . . . . . . . . . . . . . . . 426
CHAPITRE 20 : Codage dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . 429
A propos du codage dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
R&eacute;daction et modification de code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Recherche et remplacement de balises et d’attributs . . . . . . . . . . . . . . . . . . . . . . . 443
Modification rapide d’une s&eacute;lection de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Utilisation des documents de r&eacute;f&eacute;rence sur les langages . . . . . . . . . . . . . . . . . . . . 445
Impression du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
CHAPITRE 21 : Optimisation et d&eacute;bogage de code
. . . . . . . . . . . . . . . . . . . . . . 447
Nettoyage du code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
V&eacute;rification de l’&eacute;quilibre des balises et des accolades . . . . . . . . . . . . . . . . . . . . . . 448
V&eacute;rification de la compatibilit&eacute; du navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Validation de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Conformit&eacute; des pages avec le langage XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Utilisation du d&eacute;bogueur ColdFusion (Windows uniquement) . . . . . . . . . . . . . . 453
CHAPITRE 22 : Modification du code en mode Cr&eacute;ation .
. . . . . . . . . . . . . . . . . 455
Modification du code avec l’inspecteur de propri&eacute;t&eacute;s . . . . . . . . . . . . . . . . . . . . . . 455
Modification d’attributs dans l’inspecteur de balises . . . . . . . . . . . . . . . . . . . . . . 456
Modification du code avec Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Modification du code &agrave; l’aide du s&eacute;lecteur de balises . . . . . . . . . . . . . . . . . . . . . . 460
Modification des scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Utilisation des inclusions c&ocirc;t&eacute; serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Affichage et modification du contenu de l’en-t&ecirc;te . . . . . . . . . . . . . . . . . . . . . . . . 463
8
Table des mati&egrave;res
PARTIE VI : Pr&eacute;paration &agrave; la cr&eacute;ation de sites dynamiques
CHAPITRE 23 : Configuration d’une application Web
. . . . . . . . . . . . . . . . . . . . 467
El&eacute;ments n&eacute;cessaires &agrave; la cr&eacute;ation d’applications Web . . . . . . . . . . . . . . . . . . . . .
Configuration d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configuration d’un serveur d’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation d’un dossier racine pour l’application . . . . . . . . . . . . . . . . . . . . . . . . . .
D&eacute;finition d’un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion &agrave; une base de donn&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 24 : Connexions &agrave; des bases de donn&eacute;es pour les d&eacute;veloppeurs
ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
467
467
468
471
473
475
. . 477
Connexion &agrave; une base de donn&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Modification ou suppression d’une connexion &agrave; une base de donn&eacute;es . . . . . . . . . 478
CHAPITRE 25 : Connexions &agrave; des bases de donn&eacute;es pour
les d&eacute;veloppeurs ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 479
Connexion &agrave; une base de donn&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Modification ou suppression d’une connexion &agrave; une base de donn&eacute;es . . . . . . . . . 483
CHAPITRE 26 : Connexions &agrave; des bases de donn&eacute;es pour
les d&eacute;veloppeurs ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 485
A propos des connexions &agrave; des bases de donn&eacute;es dans ASP . . . . . . . . . . . . . . . . .
Cr&eacute;ation d’une connexion DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation d’une connexion sans DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion &agrave; une base de donn&eacute;es via un fournisseur d’acc&egrave;s . . . . . . . . . . . . . . . .
Modification ou suppression d’une connexion &agrave; une base de donn&eacute;es . . . . . . . . .
CHAPITRE 27 : Connexions &agrave; des bases de donn&eacute;es pour
les d&eacute;veloppeurs JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 495
A propos des connexions &agrave; des bases de donn&eacute;es dans JSP . . . . . . . . . . . . . . . . . .
Connexion &agrave; une base de donn&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion via un pilote ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification ou suppression d’une connexion &agrave; une base de donn&eacute;es . . . . . . . . .
CHAPITRE 28 : Connexions &agrave; des bases de donn&eacute;es pour
les d&eacute;veloppeurs PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
485
487
490
491
494
495
497
498
501
. . . . . . . . . . . . . . . . 503
Connexion &agrave; une base de donn&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Modification ou suppression d’une connexion &agrave; une base de donn&eacute;es . . . . . . . . . 504
CHAPITRE 29 : R&eacute;solution des probl&egrave;mes de connexion
&agrave; des bases de donn&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 505
R&eacute;solution des probl&egrave;mes d’autorisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
R&eacute;solution des messages d’erreur Microsoft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
Table des mati&egrave;res
9
PARTIE VII : Ajout de contenu dynamique aux pages Web
CHAPITRE 30 : Optimisation de l’espace de travail pour tirer
parti des fonctions de d&eacute;veloppement visuel . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 515
Affichage de panneaux de d&eacute;veloppement d’applications Web . . . . . . . . . . . . . . .
Affichage de votre base de donn&eacute;es dans Dreamweaver . . . . . . . . . . . . . . . . . . . .
Affichage des donn&eacute;es dynamiques en mode Cr&eacute;ation . . . . . . . . . . . . . . . . . . . .
Travail en mode Cr&eacute;ation sans donn&eacute;es dynamiques . . . . . . . . . . . . . . . . . . . . . .
Aper&ccedil;u des pages dynamiques dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . .
Limitation des informations de base de donn&eacute;es affich&eacute;es dans Dreamweaver . . .
516
518
518
523
524
524
CHAPITRE 31 : D&eacute;roulement de la conception de pages dynamiques . . . . . . . .
527
Conception de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Cr&eacute;ation d’une source de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Ajout d’un contenu dynamique &agrave; une page Web . . . . . . . . . . . . . . . . . . . . . . . . . 530
Am&eacute;lioration des fonctionnalit&eacute;s d’une page dynamique . . . . . . . . . . . . . . . . . . . 530
Test et d&eacute;bogage d’une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
CHAPITRE 32 : R&eacute;cup&eacute;ration des donn&eacute;es sp&eacute;cifiques &agrave; une page
. . . . . . . . . 535
Utilisation d’une base de donn&eacute;es pour stocker un contenu . . . . . . . . . . . . . . . . . 536
Collecte de donn&eacute;es envoy&eacute;es par les utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . 537
Acc&egrave;s &agrave; des donn&eacute;es stock&eacute;es dans des variables de session . . . . . . . . . . . . . . . . . . 541
CHAPITRE 33 : D&eacute;finition de sources de contenu dynamique . . . .
. . . . . . . . . . 547
A propos des sources de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
D&eacute;finition d’un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
D&eacute;finition de param&egrave;tres d’URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
D&eacute;finition de param&egrave;tres de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
D&eacute;finition de variables de session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
D&eacute;finition de variables d’application dans ASP et ColdFusion. . . . . . . . . . . . . . . 559
Utilisation d’une variable comme source de donn&eacute;es pour un jeu
d’enregistrements de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
D&eacute;finition de variables de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
Mise en m&eacute;moire cache de sources de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Modification ou suppression de sources de contenu. . . . . . . . . . . . . . . . . . . . . . . 565
Copie d’un jeu d’enregistrements d’une page &agrave; une autre. . . . . . . . . . . . . . . . . . . 566
CHAPITRE 34 : Ajout d’un contenu dynamique &agrave; une page Web
. . . . . . . . . . . 567
A propos de l’ajout de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568
Ajout d’un texte dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Cr&eacute;ation d’images dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Cr&eacute;ation d’attributs HTML dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Cr&eacute;ation de param&egrave;tres d’objet (ActiveX, Flash, etc.) dynamiques . . . . . . . . . . . . 572
Modification du contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573
Suppression d’un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573
Cr&eacute;ation de pages dynamiques dans un site Contribute . . . . . . . . . . . . . . . . . . . . 574
10
Table des mati&egrave;res
CHAPITRE 35 : Affichage des enregistrements de base de donn&eacute;es
. . . . . . . . 575
A propos de l’affichage des enregistrements de base de donn&eacute;es . . . . . . . . . . . . . .
Utilisation de formats de donn&eacute;es pr&eacute;d&eacute;finis . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de liens de navigation de jeu d’enregistrements . . . . . . . . . . . . . . . . . .
Affichage et masquage des r&eacute;gions en fonction des r&eacute;sultats du jeu
d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Affichage de plusieurs r&eacute;sultats d’un jeu d’enregistrements . . . . . . . . . . . . . . . . .
Cr&eacute;ation d’un tableau &agrave; l’aide du comportement de serveur R&eacute;gion r&eacute;p&eacute;t&eacute;e. . . . .
Cr&eacute;ation d’un compteur d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de contr&ocirc;les Web Grille de donn&eacute;es et Liste de donn&eacute;es ASP.NET . . . .
CHAPITRE 36 : Utilisation des composants ColdFusion
596
596
597
598
599
. . . . . . . . . . . . . . . . . . . . . . . . . . . 601
A propos des services Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configuration d’un g&eacute;n&eacute;rateur de proxy destin&eacute; &agrave; &ecirc;tre utilis&eacute;
avec Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout d’un proxy de services Web &agrave; l’aide de la description WSDL . . . . . . . . . . .
Ajout d’un service Web &agrave; une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification de la liste de sites des services Web UDDI . . . . . . . . . . . . . . . . . . .
CHAPITRE 38 : Ajout de comportements de serveur personnalis&eacute;s
602
605
607
608
609
. . . . . . . . . 611
A propos des comportements de serveur personnalis&eacute;s. . . . . . . . . . . . . . . . . . . . .
Installation de comportements de serveur cr&eacute;&eacute;s par des d&eacute;veloppeurs tiers . . . . .
Utilisation du Cr&eacute;ateur de comportements de serveur . . . . . . . . . . . . . . . . . . . . .
Utilisation de param&egrave;tres dans des comportements de serveur . . . . . . . . . . . . . . .
Positionnement des blocs de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation d’une bo&icirc;te de dialogue sp&eacute;cifique &agrave; un comportement de serveur
personnalis&eacute; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification d’un comportement de serveur. . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 39 : Cr&eacute;ation de formulaires .
587
587
588
589
591
. . . . . . . . . . . . . . . . . . 595
A propos des composants ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation visuelle d’un composant dans Dreamweaver . . . . . . . . . . . . . . . . . . . . .
Affichage de composants ColdFusion dans Dreamweaver . . . . . . . . . . . . . . . . . .
Modification de composants ColdFusion dans Dreamweaver . . . . . . . . . . . . . . .
Cr&eacute;ation de pages Web utilisant des composants ColdFusion . . . . . . . . . . . . . . .
CHAPITRE 37 : Utilisation des services Web
576
583
584
612
620
621
624
625
626
628
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
A propos des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de formulaires HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’objets de formulaire HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’objets de formulaire HTML dynamiques. . . . . . . . . . . . . . . . . . . . . .
Validation des donn&eacute;es de formulaire HTML . . . . . . . . . . . . . . . . . . . . . . . . . . .
Liaison de comportements JavaScript &agrave; des objets de formulaire HTML . . . . . . .
Liaison de scripts personnalis&eacute;s &agrave; des boutons de formulaire HTML . . . . . . . . . .
Cr&eacute;ation de formulaires HTML accessibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cr&eacute;ation de formulaires ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des mati&egrave;res
632
635
636
640
644
644
645
645
646
11
PARTIE VIII : D&eacute;veloppement rapide d’applications
CHAPITRE 40 : Cr&eacute;ation rapide d’applications ColdFusion . . . . . .
. . . . . . . . . . 653
A propos du d&eacute;veloppement rapide d’applications (tous les serveurs). . . . . . . . . . 653
Cr&eacute;ation d’un ensemble de pages Principale-D&eacute;tails (ColdFusion). . . . . . . . . . . . 658
Cr&eacute;ation de pages de recherche/r&eacute;sultats (ColdFusion, ASP, JSP, PHP) . . . . . . . . 665
Cr&eacute;ation d’une page d’insertion d’enregistrement (tous les serveurs) . . . . . . . . . . 671
Cr&eacute;ation de pages pour mettre &agrave; jour un enregistrement (ColdFusion) . . . . . . . . 674
Cr&eacute;ation de pages de suppression d’un enregistrement (ColdFusion) . . . . . . . . . . 679
Modification d’une base de donn&eacute;es &agrave; l’aide de proc&eacute;dures stock&eacute;es
(ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
Cr&eacute;ation de pages limitant l’acc&egrave;s &agrave; votre site (ColdFusion, ASP, JSP, PHP). . . . . 688
CHAPITRE 41 : Cr&eacute;ation rapide d’applications ASP.NET .
. . . . . . . . . . . . . . . . . 699
Cr&eacute;ation d’un ensemble de pages Principale-D&eacute;tails (ASP.NET) . . . . . . . . . . . . . 699
Cr&eacute;ation d’une page de recherche dans une base de donn&eacute;es (ASP.NET) . . . . . . . 705
Cr&eacute;ation d’une page d’insertion d’enregistrements (ASP.NET) . . . . . . . . . . . . . . 710
Cr&eacute;ation de pages de mise &agrave; jour d’un enregistrement (ASP.NET) . . . . . . . . . . . . 710
Cr&eacute;ation de pages de suppression d’un enregistrement (ASP.NET) . . . . . . . . . . . 717
Modification d’une base de donn&eacute;es &agrave; l’aide de proc&eacute;dures stock&eacute;es
(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725
Cr&eacute;ation de pages limitant l’acc&egrave;s &agrave; votre site (ASP.NET) . . . . . . . . . . . . . . . . . . 726
CHAPITRE 42 : Cr&eacute;ation rapide d’applications ASP et JSP
. . . . . . . . . . . . . . . 727
Cr&eacute;ation d’un ensemble de pages Principale-D&eacute;tails (ASP et JSP) . . . . . . . . . . . . 727
Cr&eacute;ation de pages de recherche/r&eacute;sultats (ASP et JSP) . . . . . . . . . . . . . . . . . . . . . 731
Cr&eacute;ation d’une page d’insertion d’enregistrements (ASP et JSP) . . . . . . . . . . . . . 731
Cr&eacute;ation de pages de mise &agrave; jour d’un enregistrement (ASP et JSP) . . . . . . . . . . . 731
Cr&eacute;ation de pages de suppression d’un enregistrement (ASP et JSP) . . . . . . . . . . 736
Cr&eacute;ation de pages comportant des objets de manipulation de donn&eacute;es avanc&eacute;s
(ASP et JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739
Cr&eacute;ation de pages limitant l’acc&egrave;s &agrave; votre site (ASP et JSP) . . . . . . . . . . . . . . . . . 743
CHAPITRE 43 : Cr&eacute;ation rapide d’applications PHP
. . . . . . . . . . . . . . . . . . . . . 745
Cr&eacute;ation de pages Principale-D&eacute;tails (PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745
Cr&eacute;ation de pages de recherche/de r&eacute;sultats (PHP) . . . . . . . . . . . . . . . . . . . . . . . 751
Cr&eacute;ation d’une page d’insertion d’enregistrements (PHP) . . . . . . . . . . . . . . . . . . 751
Cr&eacute;ation de pages pour mettre &agrave; jour un enregistrement (PHP). . . . . . . . . . . . . . 752
Cr&eacute;ation de pages de suppression d’un enregistrement (PHP) . . . . . . . . . . . . . . . 757
Cr&eacute;ation de pages limitant l’acc&egrave;s &agrave; votre site (PHP) . . . . . . . . . . . . . . . . . . . . . . 765
12
Table des mati&egrave;res
PARTIE IX : Annexes
ANNEXE A : Guide du d&eacute;butant en base de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . 769
A propos des bases de donn&eacute;es. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769
Principes fondamentaux pour la conception d’une base de donn&eacute;es. . . . . . . . . . . 770
Description des connexions aux bases de donn&eacute;es . . . . . . . . . . . . . . . . . . . . . . . . 776
ANNEXE B : Initiation &agrave; SQL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781
Notions de syntaxe &eacute;l&eacute;mentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
D&eacute;finition des colonnes d’un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . .
Limite du nombre d’enregistrements dans un jeu . . . . . . . . . . . . . . . . . . . . . . . .
Tri des enregistrements d’un jeu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Relations entre tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
INDEX
781
782
783
786
786
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789
Table des mati&egrave;res
13
14
Table des mati&egrave;res
Apprenez &agrave; utiliser la documentation de Macromedia Dreamweaver MX 2004 et d’autres
ressources, puis configurez l’espace de travail de Dreamweaver en fonction de votre style de travail
pr&eacute;f&eacute;r&eacute;. Ensuite, planifiez et configurez un site et commencez &agrave; cr&eacute;er des pages.
Cette partie du manuel contient les chapitres suivants :
Introduction, Bienvenue dans Dreamweaver, page 17
Chapitre 1, Exploration de l’espace de travail, page 33
Chapitre 2, Configuration d’un site Dreamweaver, page 63
Chapitre 3, Cr&eacute;ation et ouverture de documents, page 75
PARTIE I
PARTIE I
Notions de base de Dreamweaver
INTRODUCTION
Bienvenue dans Dreamweaver
Macromedia Dreamweaver MX 2004 est un &eacute;diteur HTML professionnel destin&eacute; &agrave; la
conception, au codage et au d&eacute;veloppement de sites, de pages et d’applications Web. Quel que
soit l’environnement de travail utilis&eacute; (codage manuel HTML ou environnement d’&eacute;dition
visuel), Dreamweaver propose des outils qui vous aideront &agrave; cr&eacute;er des applications Web.
Les fonctions d’&eacute;dition visuelles de Dreamweaver vous permettent de cr&eacute;er rapidement des pages
sans r&eacute;diger une seule ligne de code. Vous pouvez afficher tous les &eacute;l&eacute;ments ou actifs de votre site
et les faire glisser directement d’un panneau convivial dans un document. Rationalisez les t&acirc;ches
de d&eacute;veloppement en cr&eacute;ant et en modifiant des images dans Macromedia Fireworks ou toute
autre application graphique, puis en les important directement dans Dreamweaver, ou en
ajoutant des objets Flash Macromedia.
Dreamweaver propose &eacute;galement un environnement de codage complet comprenant des outils de
modification du code (comme la coloration du code et la cr&eacute;ation de balises) ainsi que des
documents de r&eacute;f&eacute;rence sur le langage HTML, les feuilles de style en cascade (CSS - Cascading
Style Sheets), JavaScript, ColdFusion Markup Language (CFML), Microsoft Active Server Pages
(ASP) et JavaServer Pages (JSP). La technologie Roundtrip HTML de Macromedia permet
d’importer des documents HTML cod&eacute;s manuellement sans en modifier le code pour que vous
puissiez ensuite reformater ce dernier avec le style de formatage de votre choix.
Dreamweaver permet &eacute;galement de cr&eacute;er des applications Web reposant sur des bases de donn&eacute;es
dynamiques au moyen de technologies serveur comme CFML, ASP.NET, ASP, JSP et PHP.
Dreamweaver est enti&egrave;rement personnalisable. Vous pouvez cr&eacute;er vos propres objets et commandes,
modifier les raccourcis clavier ou encore r&eacute;diger un code JavaScript pour int&eacute;grer de nouveaux
comportements, inspecteurs de propri&eacute;t&eacute;s et rapports de site aux fonctionnalit&eacute;s de Dreamweaver.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
Nouveaut&eacute;s de Dreamweaver MX 2004, page 18
Par o&ugrave; d&eacute;buter, page 20
Processus de cr&eacute;ation de sites Web dans Dreamweaver, page 23
Utilisation de Dreamweaver avec d’autres applications, page 26
Dreamweaver et l’accessibilit&eacute;, page 27
Guide des supports de formation &agrave; Dreamweaver, page 28
Conventions typographiques, page 30
Ressources sur le langage HTML et les technologies Web, page 30
17
Nouveaut&eacute;s de Dreamweaver MX 2004
Dreamweaver MX 2004 contient une nouvelle interface simplifi&eacute;e et est plus performant. Il
propose &eacute;galement de nombreuses nouvelles fonctions qui en am&eacute;liorent la convivialit&eacute; et vous
aident &agrave; cr&eacute;er des pages, que vous travailliez dans les environnements de cr&eacute;ation ou de codage.
Simplification du produit et de l’interface de d&eacute;veloppement
L’interface de Dreamweaver est plus intuitive pour vous aider &agrave; am&eacute;liorer votre productivit&eacute; et la
qualit&eacute; de votre travail.
gr&acirc;ce &agrave; sa pr&eacute;sentation plus simple, la barre Ins&eacute;rer prend
moins de place dans l’environnement de travail. Une nouvelle cat&eacute;gorie de favoris vous permet en
outre de la personnaliser en regroupant les objets que vous utilisez le plus souvent. Pour plus
d’informations, voir Barre Ins&eacute;rer, page 39.
Am&eacute;lioration de la barre Ins&eacute;rer :
ces commandes vous
permettent de copier et de coller un document Microsoft Word ou Excel directement dans
Dreamweaver. Lorsque vous collez un document Word ou Excel, Dreamweaver en conserve la
mise en forme et g&eacute;n&egrave;re du code HTML de bonne qualit&eacute;. Pour plus d’informations, voir Copie et
collage de texte &agrave; partir de documents MS Office, page 295.
Commandes Copier/Coller pour Microsoft Word et Microsoft Excel :
cette fonction vous permet de voir l’impact des
op&eacute;rations de redimensionnement de colonnes sur vos tableaux. Elle simplifie &eacute;galement la
s&eacute;lection d’&eacute;l&eacute;ments dans les tableaux. Pour plus d’informations sur le redimensionnement, voir
Redimensionnement des tableaux, des colonnes et des lignes, page 183. Pour plus d’informations sur
l’utilisation du mode Tableaux d&eacute;velopp&eacute;s pour s&eacute;lectionner des &eacute;l&eacute;ments, voir Utilisation du
mode Tableaux d&eacute;velopp&eacute;s pour une modification de tableau plus simple, page 180.
Affichage visuel des modifications de tableau :
Modification de l’interface utilisateur : l’interface utilisateur a &eacute;t&eacute; repens&eacute;e pour optimiser
l’espace de travail utilisable et afficher le contexte et les &eacute;l&eacute;ments actifs de mani&egrave;re plus claire.
D&eacute;sormais, l’interface est plus logique et intuitive. Pour plus d’informations sur l’espace de travail
de Dreamweaver, voir A propos de l’espace de travail de Dreamweaver, page 33.
Page de d&eacute;marrage : cette page vous permet d’acc&eacute;der rapidement aux derniers fichiers utilis&eacute;s,
de cr&eacute;er de nouveaux fichiers et d’acc&eacute;der aux didacticiels de Dreamweaver. Elle s’affiche lorsque
vous d&eacute;marrez Dreamweaver ou lorsque aucun document n’est ouvert. Pour plus d’informations
sur la fa&ccedil;on de masquer ou d’afficher la Page de d&eacute;marrage, voir Affichage et masquage de la page de
d&eacute;marrage, page 59.
Bureau enregistr&eacute; : cette option vous permet d’indiquer &agrave; Dreamweaver de rouvrir les
documents sur lesquels vous travailliez lorsque vous red&eacute;marrez Dreamweaver. Pour plus
d’informations sur la configuration de cette option, voir D&eacute;finition des pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de
Dreamweaver, page 59.
sous Windows, Dreamweaver prend en charge tous les
encodages de texte pris en charge par Internet Explorer. Dans Dreamweaver, vous pouvez vous
servir de la quasi-totalit&eacute; des polices de caract&egrave;res install&eacute;es sur votre syst&egrave;me en ayant la certitude
que Dreamweaver en assurera correctement le rendu et l’enregistrement. Pour plus d’informations
sur la configuration des codages de polices, voir D&eacute;finition des pr&eacute;f&eacute;rences de police pour l’affichage
Dreamweaver, page 60.
Prise en charge int&eacute;grale d’Unicode :
18
Introduction : Bienvenue dans Dreamweaver
Secure FTP : cette fonction vous permet de crypter int&eacute;gralement tous les transferts de fichiers et
d’emp&ecirc;cher les utilisateurs non autoris&eacute;s d’acc&eacute;der &agrave; vos donn&eacute;es, fichiers, noms d’utilisateur et
mots de passe. Pour plus d’informations sur la configuration d’une connexion &agrave; distance avec
FTP, voir Configuration d’un dossier distant, page 70.
Actualisation de la mise en page et de l’environnement de cr&eacute;ation
Dreamweaver s’enrichit des nouvelles fonctions CSS pr&eacute;sent&eacute;es ci-dessous, qui vous permettent
de rendre vos projets dynamiques et interactifs de mani&egrave;re plus sophistiqu&eacute;e. Il permet &eacute;galement
d’afficher imm&eacute;diatement les modifications apport&eacute;es pour am&eacute;liorer l’&eacute;dition visuelle.
Validation dynamique entre navigateurs : cette fonction permet de v&eacute;rifier automatiquement la
compatibilit&eacute; du document ouvert avec diff&eacute;rents navigateurs lors de chaque enregistrement.
Sp&eacute;cifiez les navigateurs &agrave; v&eacute;rifier et Dreamweaver s’assure que les pages ne contiennent pas de
balises ou d’&eacute;l&eacute;ments CSS non pris en charge par ces navigateurs. Pour plus d’informations, voir
V&eacute;rification de la compatibilit&eacute; du navigateur, page 448.
CSS pertinents : cet onglet affiche les r&egrave;gles CSS appliqu&eacute;es &agrave; la s&eacute;lection en cours en mode
Code ou Cr&eacute;ation. Cliquez sur une r&egrave;gle pour conna&icirc;tre les attributs qu’elle g&egrave;re (style de bordure,
marge, marge int&eacute;rieure, taille de texte, etc.). Les attributs ignor&eacute;s sont mis en &eacute;vidence. Des
modifications rapides peuvent &ecirc;tre apport&eacute;es directement et s’affichent instantan&eacute;ment en mode
Cr&eacute;ation. Pour plus d’informations, voir L’onglet Propri&eacute;t&eacute;s CSS, page 293.
Visualisation de mise en forme CSS : la mise en forme de pages &agrave; l’aide de feuilles de style en
cascade (CSS) est d&eacute;sormais beaucoup plus simple. Vous pouvez facilement s&eacute;lectionner des
balises div et d’autres blocs de contenu en mode Cr&eacute;ation, puis en modifier les propri&eacute;t&eacute;s sous
l’onglet Propri&eacute;t&eacute;s CSS. Pour plus d’informations, voir Chapitre 7, Mise en forme des pages avec les
styles CSS, page 155.
Dreamweaver peut afficher les mises en forme complexes reposant
sur les styles CSS avec plus de pr&eacute;cision. L’am&eacute;lioration du rendu vous permet de r&eacute;aliser des
mises en forme plus sophistiqu&eacute;es et d’effectuer des manipulations visuelles pouss&eacute;es &agrave; l’aide des
outils de cr&eacute;ation de Dreamweaver.
Am&eacute;lioration du rendu CSS :
le panneau propose d&eacute;sormais davantage d’options de
modification des styles dans le document. A pr&eacute;sent, vous pouvez &eacute;galement appliquer
directement des styles depuis l’inspecteur de propri&eacute;t&eacute;s de texte. Pour plus d’informations, voir
Utilisation des feuilles de style en cascade, page 304.
Am&eacute;lioration du panneau Styles CSS :
cet
inspecteur dresse la liste de tous les styles disponibles applicables au texte et comprend une
fonction d’aper&ccedil;u permettant de conna&icirc;tre l’aspect du texte apr&egrave;s application du style. Pour plus
d’informations, voir Inspecteur de propri&eacute;t&eacute;s et formatage de texte, page 292.
Inspecteur de propri&eacute;t&eacute;s de texte reposant sur des feuilles de style en cascade (CSS) :
ces propri&eacute;t&eacute;s vous
offrent un meilleur contr&ocirc;le des propri&eacute;t&eacute;s de page (affichage des en-t&ecirc;tes et des liens, par
exemple) &agrave; l’aide d’&eacute;l&eacute;ments de codage CSS r&eacute;cents. Pour plus d’informations, voir A propos de la
d&eacute;finition des propri&eacute;t&eacute;s de page, page 266.
Propri&eacute;t&eacute;s de page reposant sur des feuilles de style en cascade (CSS) :
Barre d’outils de retouche d’image int&eacute;gr&eacute;e : cette fonction vous permet d’effectuer des
retouches d’image simples dans Dreamweaver &agrave; l’aide de la technologie Macromedia Fireworks.
Vous avez la possibilit&eacute; de recadrer, de redimensionner ou encore de r&eacute;&eacute;chantillonner des images
sans quitter Dreamweaver. Pour plus d’informations, voir Modification d’images dans
Dreamweaver, page 318.
Nouveaut&eacute;s de Dreamweaver MX 2004
19
Environnement de codage puissant et ouvert
Dreamweaver offre aux r&eacute;dacteurs de code les nouvelles fonctions pr&eacute;sent&eacute;es ci-dessous, qui
concernent notamment le mode Cr&eacute;ation et la possibilit&eacute; de modifier des fichiers sans cr&eacute;er de site
Dreamweaver. Dreamweaver prend &eacute;galement en charge les technologies de serveur actuelles.
Am&eacute;lioration de l’inspecteur de balises : cet inspecteur affiche la liste des propri&eacute;t&eacute;s disponibles
applicables &agrave; la s&eacute;lection en cours et vous permet d’effectuer des modifications rapides et
compl&egrave;tes. Pour plus d’informations, voir Modification d’attributs dans l’inspecteur de balises,
page 456.
Modification de fichiers sans site : cette fonction vous permet de travailler directement sur un
serveur FTP ou RDS sans cr&eacute;er de site Dreamweaver. Pour plus d’informations sur la
configuration de Dreamweaver pour travailler sur un serveur, voir Configuration de Dreamweaver
pour fonctionner sans avoir &agrave; d&eacute;finir de site, page 90. Pour plus d’informations sur la configuration
d’un site Dreamweaver, voir Configuration d’un nouveau site Dreamweaver, page 66.
Comportements de serveur PHP : ces comportements vous permettent de cr&eacute;er un ensemble de
pages Principale-D&eacute;tails et des pages d’authentification des utilisateurs. Pour plus d’informations,
voir Cr&eacute;ation de pages Principale-D&eacute;tails (PHP), page 745 et Cr&eacute;ation de pages limitant l’acc&egrave;s &agrave;
votre site (PHP), page 765.
de nouvelles
m&eacute;thodes plus perfectionn&eacute;es (notamment de nouveaux inspecteurs de propri&eacute;t&eacute;s) vous sont
propos&eacute;es pour cr&eacute;er et modifier des formulaires Web ASP.NET en mode Cr&eacute;ation. Pour plus
d’informations, voir Chapitre 42, Cr&eacute;ation rapide d’applications ASP et JSP, page 727.
Am&eacute;lioration de la prise en charge des contr&ocirc;les de formulaire ASP.NET :
ce menu vous permet de modifier rapidement la mise en
forme du code s&eacute;lectionn&eacute;. Pour plus d’informations, voir Modification rapide d’une s&eacute;lection de
code, page 444.
Menu contextuel en mode Code :
Par o&ugrave; d&eacute;buter
La documentation de Dreamweaver contient des informations destin&eacute;es &agrave; des lecteurs ayant divers
niveaux d’exp&eacute;rience. Pour tirer le meilleur parti de cette documentation, commencez par lire les
sections qui correspondent le mieux &agrave; votre situation.
Pour plus d’informations sur les ressources de Dreamweaver, voir Guide des supports de formation &agrave;
Dreamweaver, page 28.
Concepteurs d&eacute;butants
Si vous &ecirc;tes novice dans le domaine de la conception de sites Web, cette section vous guidera vers
les points essentiels de la documentation Dreamweaver pour approfondir vos connaissances.
Pour les concepteurs Web qui d&eacute;butent :
1 Commencez par lire les didacticiels de cr&eacute;ation d’un site statique dans le guide Bien d&eacute;marrer
avec Dreamweaver, accessible via le menu Aide.
2 Dans Utilisation de Dreamweaver (Aide &gt; Utilisation de Dreamweaver), lisez les Chapitre 1,
Exploration de l’espace de travail, page 33, Chapitre 2, Configuration d’un site Dreamweaver,
page 63, Chapitre 4, Gestion des fichiers, page 85 et Chapitre 3, Cr&eacute;ation et ouverture de
documents, page 75.
3 Lisez le Chapitre 9, Mise en forme des pages avec le mode Mise en forme, page 193 pour en savoir
plus sur la mise en forme de pages.
20
Introduction : Bienvenue dans Dreamweaver
4 Lisez le Chapitre 13, Insertion et mise en forme de texte, page 287 et le Chapitre 14, Insertion
d’images, page 317 pour en savoir plus sur le formatage de texte et l’ajout d’images &agrave; vos pages.
5 C’est tout ce dont vous avez besoin pour commencer &agrave; r&eacute;aliser des sites Web de qualit&eacute; ; lorsque
vous vous sentirez pr&ecirc;t &agrave; utiliser des outils plus sophistiqu&eacute;s, lisez les autres chapitres concernant
les pages statiques dans Utilisation de Dreamweaver. Si vous le souhaitez, vous pouvez d’abord
vous familiariser avec la cr&eacute;ation de pages Web avant de lire ces chapitres.
Concepteurs exp&eacute;riment&eacute;s
Si vous &ecirc;tes un concepteur de sites Web exp&eacute;riment&eacute;, cette section vous guidera vers les points
essentiels de la documentation Dreamweaver correspondant &agrave; vos connaissances. Deux approches
diff&eacute;rentes sont propos&eacute;es : une pour les concepteurs qui n’ont jamais ou peu utilis&eacute; Dreamweaver
et une pour les concepteurs qui connaissent d&eacute;j&agrave; bien Dreamweaver mais qui veulent en savoir
plus sur la cr&eacute;ation de pages dynamiques.
Pour les concepteurs Web exp&eacute;riment&eacute;s qui utilisent Dreamweaver pour la premi&egrave;re fois :
1 Commencez par lire les didacticiels de cr&eacute;ation d’un site statique dans le guide Bien d&eacute;marrer
2
3
4
5
6
avec Dreamweaver, accessible via le menu Aide.
Dans Utilisation de Dreamweaver, lisez le Chapitre 1, Exploration de l’espace de travail, page 33
pour en savoir plus sur l’interface utilisateur de Dreamweaver.
Bien que vous connaissiez la plupart des sujets abord&eacute;s dans le Chapitre 2, Configuration d’un
site Dreamweaver, page 63 et le Chapitre 4, Gestion des fichiers, page 85, parcourez ces chapitres
pour savoir comment ces concepts sont impl&eacute;ment&eacute;s dans Dreamweaver. Attachez-vous
particuli&egrave;rement aux sections traitant de la configuration d’un site Dreamweaver.
Pour obtenir des informations utiles sur la cr&eacute;ation de pages HTML simples dans Dreamweaver,
lisez le Chapitre 13, Insertion et mise en forme de texte, page 287 et le Chapitre 14, Insertion
d’images, page 317.
Pour plus d’informations sur le codage dans Dreamweaver, voir Configuration d’un
environnement de codage, page 415, Codage dans Dreamweaver, page 429, Optimisation et
d&eacute;bogage de code, page 447 et Modification du code en mode Cr&eacute;ation, page 455.
Lisez la pr&eacute;sentation au d&eacute;but des autres chapitres de Utilisation de Dreamweaver pour savoir
si les sujets abord&eacute;s sont susceptibles de vous int&eacute;resser.
Pour les concepteurs Web exp&eacute;riment&eacute;s qui connaissent bien Dreamweaver et souhaitent
en apprendre davantage sur la cr&eacute;ation de pages dynamiques :
1 Commencez par lire &laquo; Description des applications Web &raquo; et le didacticiel de d&eacute;veloppement
2
3
4
5
6
d’une application Web dans le guide Bien d&eacute;marrer avec Dreamweaver accessible via le menu
Aide.
Dans Utilisation de Dreamweaver, parcourez le Chapitre 1, Exploration de l’espace de travail,
page 33 pour en savoir plus sur les nouveaux aspects de l’interface utilisateur de Dreamweaver,
puis lisez Optimisation de l’espace de travail pour tirer parti des fonctions de d&eacute;veloppement visuel,
page 515.
Familiarisez-vous avec la conception de pages dynamiques dans Dreamweaver en lisant
D&eacute;roulement de la conception de pages dynamiques, page 527.
Configurez un serveur Web et un serveur d’application (voir Chapitre 23, Configuration d’une
application Web, page 467).
Connectez-vous &agrave; une base de donn&eacute;es (voir Connexion &agrave; une base de donn&eacute;es, page 475).
Lisez la pr&eacute;sentation au d&eacute;but de chaque chapitre de Utilisation de Dreamweaver pour savoir si
les sujets abord&eacute;s sont susceptibles de vous int&eacute;resser.
Par o&ugrave; d&eacute;buter
21
7 Si vous souhaitez personnaliser Dreamweaver manuellement, consultez la section
&laquo; Customizing Dreamweaver &raquo; du centre de support de Macromedia &agrave; l’adresse suivante :
www.macromedia.com/go/customizing_dreamweaver_fr. Si vous voulez &eacute;crire des extensions
pour Dreamweaver, lisez Extension de Dreamweaver.
Codeurs manuels exp&eacute;riment&eacute;s
Si vous &ecirc;tes un codeur manuel exp&eacute;riment&eacute;, cette section vous guidera vers les points essentiels de
la documentation Dreamweaver correspondant &agrave; vos connaissances.
Pour les codeurs manuels exp&eacute;riment&eacute;s :
1 Commencez par lire &laquo; Didacticiel : Modification de code &raquo; dans Bien d&eacute;marrer avec
2
3
4
5
Dreamweaver accessible via le menu Aide.
Dans Utilisation de Dreamweaver, lisez le Chapitre 1, Exploration de l’espace de travail, page 33
pour en savoir plus sur l’interface utilisateur de Dreamweaver.
Bien que vous connaissiez la plupart des sujets abord&eacute;s dans le Chapitre 2, Configuration d’un
site Dreamweaver, page 63 et le Chapitre 4, Gestion des fichiers, page 85, parcourez ces chapitres
pour savoir comment ces concepts sont impl&eacute;ment&eacute;s dans Dreamweaver. Attachez-vous
particuli&egrave;rement aux sections traitant de la configuration d’un site Dreamweaver.
Lisez le Chapitre 19, Configuration d’un environnement de codage, page 415, le Chapitre 20,
Codage dans Dreamweaver, page 429, le Chapitre 21, Optimisation et d&eacute;bogage de code, page 447
et le Chapitre 22, Modification du code en mode Cr&eacute;ation, page 455 pour en savoir plus sur le
codage dans Dreamweaver.
Lisez la pr&eacute;sentation au d&eacute;but de chaque chapitre de Utilisation de Dreamweaver pour savoir si
les sujets abord&eacute;s sont susceptibles de vous int&eacute;resser.
D&eacute;veloppeurs d’applications Web
Si vous &ecirc;tes un d&eacute;veloppeur d’applications Web exp&eacute;riment&eacute;, cette section vous guidera vers les
points essentiels de la documentation Dreamweaver correspondant &agrave; vos connaissances. Deux
approches diff&eacute;rentes sont propos&eacute;es, selon que vous avez d&eacute;j&agrave; utilis&eacute; Dreamweaver ou non.
Pour les d&eacute;veloppeurs d’applications Web n’ayant jamais utilis&eacute; Dreamweaver :
1 Commencez par parcourir le guide Bien d&eacute;marrer avec Dreamweaver pour vous familiariser
2
3
4
5
6
avec les notions de base de Dreamweaver.
Dans Utilisation de Dreamweaver, lisez le Chapitre 1, Exploration de l’espace de travail, page 33
pour en savoir plus sur l’interface utilisateur de Dreamweaver.
Bien que vous connaissiez la plupart des sujets abord&eacute;s dans le Chapitre 2, Configuration d’un
site Dreamweaver, page 63 et le Chapitre 4, Gestion des fichiers, page 85, parcourez ces chapitres
pour savoir comment ces concepts sont impl&eacute;ment&eacute;s dans Dreamweaver. Attachez-vous
particuli&egrave;rement aux sections traitant de la configuration d’un site Dreamweaver.
Configurez un serveur Web et un serveur d’application &agrave; l’aide de Dreamweaver (voir
Chapitre 23, Configuration d’une application Web, page 467).
Connectez-vous &agrave; une base de donn&eacute;es (voir Connexion &agrave; une base de donn&eacute;es, page 475).
Lisez la pr&eacute;sentation au d&eacute;but de chaque chapitre de Utilisation de Dreamweaver pour savoir si
les sujets abord&eacute;s sont susceptibles de vous int&eacute;resser.
Pour les d&eacute;veloppeurs d’applications Web ayant d&eacute;j&agrave; utilis&eacute; Dreamweaver :
1 Commencez par lire Nouveaut&eacute;s de Dreamweaver MX 2004, page 18.
22
Introduction : Bienvenue dans Dreamweaver
2 Dans Utilisation de Dreamweaver, parcourez le Chapitre 1, Exploration de l’espace de travail,
page 33 pour en savoir plus sur les nouveaux aspects de l’interface utilisateur de Dreamweaver.
3 Si vous souhaitez personnaliser Dreamweaver manuellement, consultez la section
&laquo; Customizing Dreamweaver &raquo; du centre de support de Macromedia &agrave; l’adresse suivante :
www.macromedia.com/go/customizing_dreamweaver_fr. Si vous voulez &eacute;crire des extensions
pour Dreamweaver, lisez Extension de Dreamweaver.
Processus de cr&eacute;ation de sites Web dans Dreamweaver
Vous pouvez cr&eacute;er un site Web de plusieurs fa&ccedil;ons. Le processus pr&eacute;sent&eacute; ici commence par la
d&eacute;finition de la strat&eacute;gie ou des objectifs d’un site. Si vous d&eacute;veloppez des applications Web, vous
devez configurer les serveurs et bases de donn&eacute;es en fonction de votre syst&egrave;me. Vous devez ensuite
d&eacute;finir l’aspect g&eacute;n&eacute;ral du site. Ensuite, vous devez cr&eacute;er le site et coder les pages pour ajouter un
contenu et d&eacute;finir l’interactivit&eacute; du site. Vous allez ensuite lier les pages les unes aux autres et
tester la fonctionnalit&eacute; du site pour savoir s’il remplit les objectifs fix&eacute;s. Vous pouvez &eacute;galement
inclure des pages dynamiques &agrave; votre site. Enfin, vous allez publier le site sur un serveur. De
nombreux d&eacute;veloppeurs programment &eacute;galement une maintenance r&eacute;guli&egrave;re pour s’assurer que le
site reste &agrave; jour et est op&eacute;rationnel.
Planification de votre site
Organisez avec soin votre site : cela vous fera gagner beaucoup de temps par la suite.
L’organisation d’un site ne se r&eacute;duit pas &agrave; d&eacute;terminer l’emplacement des fichiers : elle inclut
&eacute;galement l’analyse des besoins du site, des profils de ses utilisateurs et de ses objectifs. Il convient
&eacute;galement d’examiner les conditions techniques requises, notamment l’acc&egrave;s utilisateur et les
restrictions en mati&egrave;re de navigateurs, de plug-ins ou de t&eacute;l&eacute;chargement.
Apr&egrave;s avoir organis&eacute; vos informations et d&eacute;fini une structure, vous pouvez commencer la cr&eacute;ation
du site.
• Utilisez le panneau Fichiers de Dreamweaver pour configurer la structure organisationnelle de
•
votre site. Dans le panneau Fichiers, vous pouvez facilement ajouter, supprimer et renommer
des fichiers et des dossiers afin de modifier l’organisation en fonction de vos besoins (voir
Chapitre 2, Configuration d’un site Dreamweaver, page 63 et Chapitre 4, Gestion des fichiers,
page 85).
Vous pouvez commencer par cr&eacute;er des pages simples qui deviendront plus complexes au fur et
&agrave; mesure de leur conception. Cr&eacute;ez de nouvelles pages vierges ou des pages bas&eacute;es sur des pages
pr&eacute;d&eacute;finies (voir Chapitre 3, Cr&eacute;ation et ouverture de documents, page 75).
Si vous travaillez au sein d’une &eacute;quipe de d&eacute;veloppement Web, les sujets suivants sont &eacute;galement
susceptibles de vous int&eacute;resser :
• Configuration d’un syst&egrave;me pour emp&ecirc;cher les membres de l’&eacute;quipe d’&eacute;craser les fichiers (voir
•
Archivage et extraction de fichiers, page 106).
Utilisation de Design Notes pour communiquer avec les membres de l’&eacute;quipe Web (voir
Stockage des informations sur les fichiers dans des Design Notes, page 116).
Gestion des fichiers du site
Les panneaux Fichiers et Actifs de Dreamweaver facilitent la gestion des fichiers de votre site.
Processus de cr&eacute;ation de sites Web dans Dreamweaver
23
• Dans le panneau Fichiers de Dreamweaver, vous trouverez 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 (voir Gestion des fichiers, page 85).
Utilisez le panneau Actifs pour organiser facilement les actifs sur un site ; vous pouvez ensuite
faire glisser la plupart des actifs directement du panneau vers un document Dreamweaver (voir
Chapitre 5, Gestion des actifs de site et des biblioth&egrave;ques, page 125).
Dreamweaver vous permet de g&eacute;rer certains aspects de vos sites Contribute (voir Chapitre 6,
Gestion des sites Contribute avec Dreamweaver, page 143).
Mise en forme de pages Web
Dreamweaver vous permet de progresser &agrave; votre rythme et selon vos envies dans la mise en forme
de vos pages. S&eacute;lectionnez la technique de mise en forme de votre choix ou combinez les options
de mise en forme de Dreamweaver pour d&eacute;finir la pr&eacute;sentation de votre site.
• Vous pouvez utiliser des calques ou des styles de positionnement CSS Dreamweaver pour
•
•
•
d&eacute;finir la mise en forme (voir Chapitre 7, Mise en forme des pages avec les styles CSS, page 155).
Les outils de cr&eacute;ation de tableaux et le mode Mise en forme de Dreamweaver vous permettent
de concevoir rapidement des pages Web en dessinant, puis en r&eacute;organisant la structure des
pages (voir Chapitre 8, Pr&eacute;sentation de contenu &agrave; l’aide de tableaux, page 173 et Chapitre 9,
Mise en forme des pages avec le mode Mise en forme, page 193).
Si vous souhaitez afficher plusieurs documents simultan&eacute;ment dans un navigateur Web, vous
pouvez d&eacute;finir leur mise en forme en utilisant des cadres (voir Chapitre 10, Utilisation de
cadres, page 209).
Les mod&egrave;les Dreamweaver permettent d’appliquer facilement un contenu r&eacute;utilisable et des
conceptions de page dans votre site. Vous pouvez cr&eacute;er de nouvelles pages &agrave; partir d’un mod&egrave;le
Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le mod&egrave;le change
(voir Chapitre 11, Gestion des mod&egrave;les, page 225).
Ajout de contenu dans les pages
Avec Dreamweaver, vous pouvez sans difficult&eacute; ajouter des contenus vari&eacute;s &agrave; vos pages Web.
Ajoutez des actifs et des &eacute;l&eacute;ments de conception, par exemple des textes, des images, des couleurs,
des animations, des sons et autres formes de donn&eacute;es.
• Les fonctions de cr&eacute;ation de pages offertes par Dreamweaver vous permettent de sp&eacute;cifier des
•
24
propri&eacute;t&eacute;s de page Web, par exemple, le titre d’une page ou encore des images et couleurs
d’arri&egrave;re-plan. De plus, Dreamweaver comprend des outils vous permettant d’optimiser les
performances de votre site Web et de tester les pages pour garantir leur compatibilit&eacute; avec
diff&eacute;rents navigateurs Web (voir Chapitre 12, Utilisation des pages, page 265).
Tapez directement du texte dans un document Dreamweaver ou importez du texte &agrave; partir
d’autres documents, puis formatez-le avec l’inspecteur de propri&eacute;t&eacute;s de Dreamweaver. Vous
pouvez &eacute;galement cr&eacute;er facilement vos propres feuilles de style en cascade (voir Chapitre 13,
Insertion et mise en forme de texte, page 287).
Introduction : Bienvenue dans Dreamweaver
• Ins&eacute;rez des images telles que des images survol&eacute;es, des cartes graphiques et des images
•
•
•
Fireworks d&eacute;coup&eacute;es, et positionnez-les sur la page &agrave; l’aide des outils d’alignement. Vous
pouvez &eacute;galement redimensionner directement les images dans Dreamweaver (voir
Chapitre 14, Insertion d’images, page 317 et Chapitre 16, Utilisation d’autres applications,
page 353).
Avec Dreamweaver, vous pouvez cr&eacute;er des liens HTML standard, y compris des ancres et des liens
de messagerie, ou configurer facilement des syst&egrave;mes de navigation graphiques, notamment des
menus de reroutage et des barres de navigation (voir Chapitre 15, Liens et navigation, page 329).
Ins&eacute;rez d’autres types de ressources dans une page Web : animations Flash, Shockwave ou
QuickTime, sons, applets (voir Chapitre 17, Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs,
page 367).
Utilisez les comportements pour ex&eacute;cuter des t&acirc;ches en r&eacute;ponse &agrave; des &eacute;v&eacute;nements sp&eacute;cifiques,
par exemple l’illumination d’un bouton lorsque le visiteur le survole avec la souris, la validation
d’un formulaire lorsque le visiteur clique sur le bouton Envoyer ou l’ouverture d’une deuxi&egrave;me
fen&ecirc;tre lorsque la page principale a fini de se charger (voir Chapitre 18, Utilisation des
comportements JavaScript, page 383).
Codage manuel
Le codage manuel de pages Web constitue une autre m&eacute;thode de cr&eacute;ation de pages. Dreamweaver
dispose d’outils d’&eacute;dition visuelle conviviaux ainsi que d’un environnement de codage sophistiqu&eacute;.
Vous pouvez utiliser l’une ou l’autre de ces m&eacute;thodes (ou bien les deux) pour cr&eacute;er et modifier vos
pages.
• Vous pouvez travailler dans un environnement de codage sans faire appel aux outils visuels. En
•
effet, les outils de codage permettent de cr&eacute;er, de modifier et de formater du code et de v&eacute;rifier
sa conformit&eacute; aux normes (voir Chapitre 19, Configuration d’un environnement de codage,
page 415, Chapitre 20, Codage dans Dreamweaver, page 429 et Chapitre 21, Optimisation et
d&eacute;bogage de code, page 447).
Vous pouvez &eacute;galement utiliser des outils de codage Dreamweaver en mode Cr&eacute;ation
(environnement de conception visuel) (voir Chapitre 22, Modification du code en mode
Cr&eacute;ation, page 455).
Configuration d’une application Web
De nombreux sites Web contiennent des pages dynamiques qui permettent aux visiteurs d’afficher
les informations stock&eacute;es dans des bases de donn&eacute;es, voire d’ajouter ou de modifier des donn&eacute;es dans
certains cas. Pour cr&eacute;er ces pages, vous devez d’abord suivre les &eacute;tapes pr&eacute;paratoires suivantes :
• Configurez un serveur Web et un serveur d’application, puis cr&eacute;ez ou modifiez un site
•
Dreamweaver (voir Chapitre 23, Configuration d’une application Web, page 467).
Connectez-vous &agrave; une base de donn&eacute;es. (Voir Connexion &agrave; une base de donn&eacute;es, page 475).
Cr&eacute;ation de pages dynamiques
Dans Dreamweaver, vous pouvez d&eacute;finir diverses sources de contenu dynamique, y compris des
jeux d’enregistrements extraits de bases de donn&eacute;es, des param&egrave;tres de formulaire et des
composants JavaBeans. Pour ajouter le contenu dynamique &agrave; une page, il suffit de le faire glisser
vers cette derni&egrave;re.
Processus de cr&eacute;ation de sites Web dans Dreamweaver
25
Vous pouvez d&eacute;finir une configuration de page qui affiche un ou plusieurs enregistrements &agrave; la
fois (ou plusieurs pages d’enregistrements), ajoute des liens sp&eacute;ciaux permettant de passer d’une
page d’enregistrements &agrave; une autre et cr&eacute;e des compteurs d’enregistrements pour faciliter la
gestion de ces derniers.
• Pour savoir comment d&eacute;velopper des applications Web dans Dreamweaver, apprenez &agrave; utiliser
•
•
•
Dreamweaver et &agrave; cr&eacute;er des pages dynamiques (voir Chapitre 30, Optimisation de l’espace de
travail pour tirer parti des fonctions de d&eacute;veloppement visuel, page 515 et Chapitre 31,
D&eacute;roulement de la conception de pages dynamiques, page 527).
D&eacute;finissez et affichez un contenu dynamique dans vos pages (voir Chapitre 32, R&eacute;cup&eacute;ration
des donn&eacute;es sp&eacute;cifiques &agrave; une page, page 535, Chapitre 33, D&eacute;finition de sources de contenu
dynamique, page 547, Chapitre 34, Ajout d’un contenu dynamique &agrave; une page Web, page 567 et
Chapitre 35, Affichage des enregistrements de base de donn&eacute;es, page 575).
Encapsulez la logique d’application ou d’entreprise en faisant appel aux technologies de pointe,
telles que les composants Macromedia ColdFusion et les services Web (voir Chapitre 36,
Utilisation des composants ColdFusion, page 595 et Chapitre 37, Utilisation des services Web,
page 601).
Cr&eacute;ez vos propres comportements de serveur et formulaires interactifs (voir Chapitre 38, Ajout
de comportements de serveur personnalis&eacute;s, page 611 et Chapitre 39, Cr&eacute;ation de formulaires,
page 631).
D&eacute;veloppement rapide d’applications
Dreamweaver propose diff&eacute;rents outils de d&eacute;veloppement rapide d’applications, notamment les
comportements de serveur et les objets d’application qui permettent de cr&eacute;er des applications
Web sophistiqu&eacute;es sans avoir &agrave; r&eacute;diger du code c&ocirc;t&eacute; serveur.
• Vous pouvez ainsi cr&eacute;er rapidement des pages qui recherchent et modifient des bases de
donn&eacute;es, puis affichent les r&eacute;sultats Restreignez l’acc&egrave;s &agrave; vos pages pour garantir la s&eacute;curit&eacute; des
informations (voir Cr&eacute;ation rapide d’applications ColdFusion, page 653, Cr&eacute;ation rapide
d’applications ASP.NET, page 699, Cr&eacute;ation rapide d’applications ASP et JSP, page 727 et
Cr&eacute;ation rapide d’applications PHP, page 745).
Utilisation de Dreamweaver avec d’autres applications
Dreamweaver s’adapte &agrave; votre m&eacute;thode de conception et de d&eacute;veloppement de site Web en vous
permettant de travailler ais&eacute;ment avec d’autres applications. Pour plus d’informations sur le travail
en collaboration avec d’autres applications (navigateurs, &eacute;diteurs HTML, programmes de
retouche d’image et d’animation), voir les rubriques suivantes :
• Pour plus d’informations sur l’utilisation de Dreamweaver avec d’autres &eacute;diteurs HTML, tels
•
•
•
26
que HomeSite ou BBEdit, voir Utilisation d’un &eacute;diteur HTML externe avec Dreamweaver,
page 426.
Vous pouvez sp&eacute;cifier vos navigateurs favoris pour l’affichage de votre site (voir Aper&ccedil;u et test de
page dans les navigateurs, page 283).
Vous pouvez lancer un &eacute;diteur d’image externe, tel que Macromedia Fireworks ou Adobe
Photoshop depuis Dreamweaver (voir Utilisation d’un &eacute;diteur d’image externe, page 327).
Vous pouvez configurer Dreamweaver pour qu’il lance un &eacute;diteur diff&eacute;rent pour chaque type
de fichier (voir Lancement d’un &eacute;diteur externe pour des fichiers multim&eacute;dia, page 371).
Introduction : Bienvenue dans Dreamweaver
• Pour plus d’informations sur l’ajout d’interactivit&eacute; &agrave; votre site &agrave; l’aide de Macromedia Flash,
•
•
voir Insertion et modification d’un objet de bouton Flash, page 373, Insertion d’un objet texte
Flash, page 375 ou T&eacute;l&eacute;chargement et installation des &eacute;l&eacute;ments Flash, page 376.
Pour savoir comment rendre votre site interactif &agrave; l’aide d’animations Macromedia Shockwave,
voir Insertion d’animations Shockwave, page 377.
Pour plus d’informations sur l’utilisation de ColdFusion, consulter l’aide de ColdFusion de
Dreamweaver (Aide &gt; Utilisation de ColdFusion).
Dreamweaver et l’accessibilit&eacute;
L’accessibilit&eacute; consiste &agrave; faire en sorte que les sites ou les produits Web que vous cr&eacute;ez puissent &ecirc;tre
utilis&eacute;s par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Les fonctions
d’accessibilit&eacute; de produits logiciels et de sites Web peuvent &ecirc;tre : la prise en charge de lecteurs
d’&eacute;cran, des &eacute;quivalents textuels pour les graphiques, des raccourcis clavier, des modifications dans
les couleurs d’affichage pour augmenter le contraste, etc.
Remarque : Pour en savoir plus sur deux de ces importantes initiatives, consultez le site de la World
Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) et la Section 508 du Federal
Rehabilitation Act (www.section508.gov).
Dreamweaver inclut des outils qui facilitent son utilisation et vous permettent de cr&eacute;er un
contenu accessible :
Utilisation des fonctions d’accessibilit&eacute; de Dreamweaver Pour les concepteurs Web utilisant
Dreamweaver qui doivent faire appel aux fonctions d’accessibilit&eacute;, Dreamweaver prend en charge
des lecteurs d’&eacute;cran, la navigation avec le clavier et les fonctions d’accessibilit&eacute; de votre syst&egrave;me
d’exploitation.
Pour plus d’informations, voir Utilisation des fonctions d’accessibilit&eacute; de Dreamweaver, page 52.
Pour les concepteurs Web utilisant Dreamweaver qui
souhaitent cr&eacute;er du contenu accessible, Dreamweaver vous aide &agrave; cr&eacute;er des pages accessibles au
contenu utile pour les lecteurs d’&eacute;cran et en conformit&eacute; avec les directives gouvernementales.
Cr&eacute;ation de pages Web accessibles
Dreamweaver propose des bo&icirc;tes de dialogue vous invitant &agrave; entrer les attributs d’accessibilit&eacute; lors
de l’insertion d’&eacute;l&eacute;ments de page (voir Optimisation de l’espace de travail pour la conception de pages
accessibles, page 56). Par exemple, la bo&icirc;te de dialogue d’accessibilit&eacute; aux images vous invite &agrave;
entrer une description textuelle de chaque image. Ainsi, lorsque l’image s’affiche sur le syst&egrave;me
d’un utilisateur ayant des probl&egrave;mes de vue, le lecteur d’&eacute;cran lit la description.
Dreamweaver propose &eacute;galement des pages Web mod&egrave;les con&ccedil;ues dans un souci d’accessibilit&eacute;
optimale (voir Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception Dreamweaver, page 76) et
dispose d’un rapport d’accessibilit&eacute; que vous pouvez ex&eacute;cuter pour v&eacute;rifier si votre page ou votre
site est conforme aux directives d’accessibilit&eacute; de la Section 508 (voir Test de votre site, page 119).
Remarque : N&eacute;anmoins, aucun outil de cr&eacute;ation Web ne peut automatiser enti&egrave;rement le processus
de d&eacute;veloppement. Pour concevoir des sites Web accessibles, vous devez comprendre les
exigences li&eacute;es &agrave; l’accessibilit&eacute; et devez prendre de nombreuses d&eacute;cisions faisant appel &agrave; votre
subjectivit&eacute;. Les concepteurs de sites Web ne doivent pas oublier de penser &agrave; la fa&ccedil;on dont les
personnes souffrant d’un handicap peuvent interagir avec les pages Web. La meilleure fa&ccedil;on de
s’assurer qu’un site Web est accessible est de respecter toutes les proc&eacute;dures de pr&eacute;paration, de
d&eacute;veloppement, de tests et d’&eacute;valuation.
Dreamweaver et l’accessibilit&eacute;
27
Fonction de validation d’accessibilit&eacute; de Dreamweaver
La fonction de validation d’accessibilit&eacute; de Dreamweaver MX utilise la technologie de UsableNet.
UsableNet est l’un des principaux d&eacute;veloppeurs de logiciels simples d’utilisation permettant
d’automatiser les tests de fonctionnalit&eacute; et d’accessibilit&eacute; et les corrections. Pour une assistance
suppl&eacute;mentaire concernant les tests d’accessibilit&eacute;, essayez le service UsableNet LIFT pour
Macromedia Dreamweaver, une solution compl&egrave;te pour le d&eacute;veloppement de sites Web
fonctionnels et accessibles. UsableNet Lift pour Macromedia Dreamweaver comprend un
assistant de correction pour les tableaux, les formulaires et les images complexes, un &eacute;diteur ALT
global, la g&eacute;n&eacute;ration de rapports personnalis&eacute;s et un nouveau mode de contr&ocirc;le actif qui assure
l’accessibilit&eacute; du contenu pendant la construction des pages. Demandez une version d&eacute;mo de Lift
pour Macromedia Dreamweaver &agrave; l’adresse www.usablenet.com.
Guide des supports de formation &agrave; Dreamweaver
Dreamweaver comprend diverses ressources qui vous aideront &agrave; vous familiariser rapidement avec
le programme et &agrave; cr&eacute;er facilement vos propres sites et pages Web.
• Syst&egrave;mes d’aide Dreamweaver, page 28
• Ressources du site Web Macromedia, page 29
• Ouvrages et formations suppl&eacute;mentaires, page 29
Pour tirer le meilleur parti des ressources de Dreamweaver, voir Par o&ugrave; d&eacute;buter, page 20.
Remarque : Pour obtenir une liste des ressources HTML et Web, voir Ressources sur le langage
HTML et les technologies Web, page 30.
Syst&egrave;mes d’aide Dreamweaver
Les syst&egrave;mes d’aide Dreamweaver sont accessibles via le menu Aide. L’aide de Dreamweaver
s’affiche dans le visualisateur d’aide fourni avec votre syst&egrave;me d’exploitation : Microsoft HTML
Help (Windows) ou Aide Apple (Macintosh).
L’aide de Dreamweaver comprend les syst&egrave;mes d’aide suivants :
Le guide Bien d&eacute;marrer avec Dreamweaver a &eacute;t&eacute; con&ccedil;u pour vous assister dans la cr&eacute;ation d’un
site Web simple mais fonctionnel &agrave; l’aide de Dreamweaver. Il s’adresse aux utilisateurs qui ont
d&eacute;j&agrave; cr&eacute;&eacute; des pages Web, mais qui ne connaissent que certains aspects de Dreamweaver. Il
comporte des didacticiels sur la cr&eacute;ation et la modification de pages statiques simples, la
modification manuelle du code et la cr&eacute;ation d’applications Web dynamiques. Ce guide existe
sous forme de manuel imprim&eacute;, d’aide en ligne et de fichier PDF.
optimis&eacute;e pour une utilisation en ligne, fournit des informations
compl&egrave;tes sur toutes les fonctionnalit&eacute;s de Dreamweaver.
L’aide de Dreamweaver,
Extension de Dreamweaver fournit
des informations relatives au mod&egrave;le d’objet de document
de Dreamweaver.
Le Guide des API de Dreamweaver fournit des informations sur les API (interfaces de
programmation d’applications) qui permettent aux d&eacute;veloppeurs JavaScript et C de cr&eacute;er des
extensions pour Dreamweaver.
28
Introduction : Bienvenue dans Dreamweaver
Rubriques connexes
• Ouvrages et formations suppl&eacute;mentaires, page 29
Ressources du site Web Macromedia
Le site Web Macromedia contient les ressources suivantes pour assister les utilisateurs de
Dreamweaver :
du centre de support de vous permet d’optimiser votre utilisation de
Dreamweaver. Le site Web du centre de support de Dreamweaver (www.macromedia.com/go/
dreamweaver_support_fr/) est actualis&eacute; r&eacute;guli&egrave;rement. Il propose des informations &agrave; jour sur
Dreamweaver, ainsi que des conseils donn&eacute;s par des utilisateurs exp&eacute;riment&eacute;s, des exemples, des
conseils g&eacute;n&eacute;raux, des mises &agrave; jour et des informations sur des sujets plus techniques. Consultez
r&eacute;guli&egrave;rement ce site Web pour trouver les toutes derni&egrave;res informations sur Dreamweaver et
apprendre &agrave; en tirer le meilleur parti.
Le site Web Dreamweaver
Le Centre des d&eacute;veloppeurs de Macromedia, disponible &agrave; l’adresse www.macromedia.com/go/
developer_fr, propose entre autres des outils et des didacticiels pour tous les produits Macromedia.
Les forums en ligne de Dreamweaver vous permettent de discuter de probl&egrave;mes techniques et
d’&eacute;changer des informations utiles avec d’autres utilisateurs de Dreamweaver. Pour savoir
comment acc&eacute;der aux forums, consultez le site Web de Macromedia &agrave; l’adresse suivante :
www.macromedia.com/go/dreamweaver_newsgroup.
Des tableaux de raccourcis clavier relatifs
&agrave; la configuration de Dreamweaver par d&eacute;faut sont
disponibles sur le site Web de Macromedia &agrave; l’adresse suivante : www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Rubriques connexes
• Syst&egrave;mes d’aide Dreamweaver, page 28
Ouvrages et formations suppl&eacute;mentaires
Vous pouvez consulter d’autres ouvrages ou participer &agrave; d’autres formations pour vous aider &agrave;
ma&icirc;triser encore mieux Dreamweaver ; vous trouverez &eacute;galement une documentation
Dreamweaver au format PDF et imprim&eacute;, disponibles en ligne :
Les livres Macromedia Press permettent d’acqu&eacute;rir une meilleure ma&icirc;trise de Dreamweaver.
Consultez les ouvrages les plus r&eacute;cents r&eacute;dig&eacute;s par des experts sur le site Web de Macromedia &agrave;
l’adresse www.macromedia.com/go/dw2004_help_mmp.
Macromedia Dreamweaver Training and Certification propose des t&acirc;ches pratiques et des
sc&eacute;narios r&eacute;els. Vous avez le choix entre une formation avec un professeur ou une formation en
ligne. Vous pouvez m&ecirc;me combiner les deux solutions de fa&ccedil;on &agrave; cr&eacute;er une v&eacute;ritable formation
personnalis&eacute;e. D&eacute;veloppez vos connaissances sur le site Web Macromedia &agrave; l’adresse
www.macromedia.com/go/dreamweaver_training_fr.
Les fichiers PDF relatifs &agrave; Dreamweaver sont disponibles sur le CD fourni avec le produit et
regroupent l’ensemble de la documentation de Dreamweaver. Certains sujets de r&eacute;f&eacute;rence ne sont
pas compris dans la version PDF de Utilisation de Dreamweaver ; pour plus d’informations sur
ces sujets, voir Utilisation de Dreamweaver accessible via le menu Aide.
Guide des supports de formation &agrave; Dreamweaver
29
Les manuels Dreamweaver,
non fournis avec le produit, sont disponibles &agrave; l’achat en ligne.
Pour acheter des exemplaires imprim&eacute;s de la documentation de Dreamweaver, consultez le site
Web de Macromedia &agrave; l’adresse suivante : www.macromedia.com/go/books_and_training/.
Rubriques connexes
• Syst&egrave;mes d’aide Dreamweaver, page 28
• Ressources du site Web Macromedia, page 29
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
• Les &eacute;l&eacute;ments de menus sont indiqu&eacute;s de la mani&egrave;re suivante : nom du menu &gt; nom de
•
•
•
l’&eacute;l&eacute;ment de menu. Les &eacute;l&eacute;ments de sous-menus sont indiqu&eacute;s de la mani&egrave;re suivante : nom du
menu &gt; nom du sous-menu &gt; nom de l’&eacute;l&eacute;ment de menu.
Police de code indique les noms des balises et attributs HTML, ainsi que le texte utilis&eacute;
litt&eacute;ralement dans les exemples.
Police de code en italique indique les &eacute;l&eacute;ments rempla&ccedil;ables (parfois appel&eacute;s
m&eacute;tasymboles) dans le code.
Texte en gras indique le texte que vous devez saisir exactement &agrave; l’identique.
Pour obtenir une liste compl&egrave;te des ressources propos&eacute;es par Dreamweaver, voir Guide des supports
de formation &agrave; Dreamweaver, page 28.
Ressources sur le langage HTML et les technologies Web
Voici quelques ressources utiles disponibles sur le Web :
Remarque : Pour obtenir une liste des ressources propos&eacute;es par Dreamweaver, voir Guide des
supports de formation &agrave; Dreamweaver, page 28.
Les sp&eacute;cifications Cascading Style Sheets, niveau 1 (CSS1) (www.w3.org/TR/REC-CSS1) et
niveau 2 (CSS2) (www.w3.org/TR/REC-CSS2/) sont des sp&eacute;cifications officielles des feuilles de
style CSS, d&eacute;finies par le World Wide Web Consortium.
La sp&eacute;cification HTML 4.01 (www.w3.org/TR/REC-html40/) est la sp&eacute;cification officielle du
code HTML du World Wide Web Consortium.
Index DOT HTML (www.blooberry.com/indexdot/html/)
affiche une liste compl&egrave;te des balises,
attributs et valeurs HTML, ainsi que leur compatibilit&eacute; respective avec les divers navigateurs.
La sp&eacute;cification XHTML 1.0 (www.w3.org/TR/xhtml1/)
est la sp&eacute;cification officielle du langage
XHTML (Extensible HyperText Markup Language).
Le site O’Reilly XML.com (www.xml.com) propose des informations, des didacticiels et des
conseils sur le langage XML (Extensible Markup Language) et sur d’autres technologies Web.
(http://msdn.microsoft.com/workshop/server/asp/ASPover.asp)
proposent des informations sur les pages de serveur actives ASP (Active Server Pages).
Les pages ASP de Microsoft
La page ASP.NET de Microsoft
(www.asp.net/) propose des informations sur ASP.NET.
La page JSP de Sun (http://java.sun.com/products/jsp/) propose des informations sur les pages
JSP (pages JavaServer).
30
Introduction : Bienvenue dans Dreamweaver
Le site Web PHP (www.php.net/)
Le site MySQL
propose des informations sur la technologie PHP.
(www.mysql.com/) propose des informations sur MySQL.
Entities Table (www.bbsinc.com/iso8859.html) pr&eacute;sente la liste des noms d’entit&eacute;s utilis&eacute;es dans
le codage ISO 8859-1 (Latin-1).
La page sur le produit ColdFusion de Macromedia (www.macromedia.com/go/coldfusion/)
propose des informations sur ColdFusion.
La page sur le produit JRun Server de Macromedia (www.macromedia.com/go/jrun_fr/
)
propose des informations sur le serveur d’application JRun Java.
La page WebSphere d’IBM (www.ibm.com/software/webservers/appserv/)
propose des
informations sur le serveur d’application WebSphere.
La page sur le produit Sun ONE (www.Chilisoft.com/products/) propose des informations sur le
serveur d’application Sun ONE ASP.
Web Services Demystified (www.sitepoint.com/article/692)
propose des informations sur les
services Web et sur leur fonctionnement.
JavaScript Bible,
par Danny Goodman (IDG Books), couvre de fa&ccedil;on exhaustive le langage
JavaScript 1.2.
JavaScript : The Definitive Guide,
par David Flanagan (O’Reilly &amp; Associates), propose des
informations de r&eacute;f&eacute;rence sur chaque fonction, objet, m&eacute;thode, propri&eacute;t&eacute; et gestionnaire
d’&eacute;v&eacute;nements de JavaScript.
(www.cgi-resources.com/) est un site de r&eacute;f&eacute;rence sur tout ce qui
concerne les scripts CGI, avec des scripts pr&ecirc;ts &agrave; l’emploi, de la documentation, des manuels et
m&ecirc;me des programmeurs &agrave; votre disposition.
Le site CGI Resource Index
Le site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)
comporte une
pr&eacute;sentation des scripts CGI.
Ressources sur le langage HTML et les technologies Web
31
32
Introduction : Bienvenue dans Dreamweaver
CHAPITRE 1
Exploration de l’espace de travail
Pour utiliser au mieux Macromedia Dreamweaver MX 2004, vous devez bien comprendre les
concepts de base du fonctionnement de l’espace de travail de Dreamweaver afin de pouvoir
s&eacute;lectionner les options, utiliser les inspecteurs et les panneaux et d&eacute;finir les pr&eacute;f&eacute;rences qui
conviennent le mieux &agrave; votre fa&ccedil;on de travailler.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
•
•
•
•
A propos de l’espace de travail de Dreamweaver, page 33
Utilisation de la fen&ecirc;tre de document, page 41
Utilisation des barres d’outils, des inspecteurs et des menus contextuels, page 44
Utilisation des panneaux et des groupes de panneaux, page 49
Utilisation des fonctions d’accessibilit&eacute; de Dreamweaver, page 52
Optimisation de l’espace de travail pour la conception de pages accessibles, page 56
Utilisation de guides visuels dans Dreamweaver, page 57
Dreamweaver personnalisation, notions de base, page 58
Rubriques connexes
• Optimisation de l’espace de travail pour tirer parti des fonctions de d&eacute;veloppement visuel, page 515
A propos de l’espace de travail de Dreamweaver
L’espace de travail de Dreamweaver 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.
33
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;lection de
balise
Fen&ecirc;tre de document
Inspecteur de
propri&eacute;t&eacute;s
Groupes de panneaux
Panneau Fichiers
Remarque : 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 du document en mode Code.
Pour plus d’informations, voir Utilisation de l’espace de travail orient&eacute; en mode Code (Windows
uniquement), page 417. Pour l’utilisation de cette option, voir Choix de la pr&eacute;sentation de l’espace de
travail (sous Windows uniquement), page 58.
34
Chapitre 1 : Exploration de l’espace de travail
Sous Macintosh, Dreamweaver propose une pr&eacute;sentation flottante, o&ugrave; chaque document se
trouve dans une fen&ecirc;tre distincte. 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 d’outils du document
Fen&ecirc;tre de document
Barre Ins&eacute;rer
Groupes de panneaux
Panneau Fichiers
Inspecteur de propri&eacute;t&eacute;s
S&eacute;lecteur de balises
Rubriques connexes
• El&eacute;ments de l’espace de travail de Dreamweaver, page 35
• Utilisation des barres d’outils, des inspecteurs et des menus contextuels, page 44
• Utilisation des panneaux et des groupes de panneaux, page 49.
El&eacute;ments de l’espace de travail de Dreamweaver
Cette section d&eacute;crit rapidement quelques &eacute;l&eacute;ments de l’espace de travail de Dreamweaver.
Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fen&ecirc;tres. Pour
ouvrir les panneaux, inspecteurs et fen&ecirc;tres Dreamweaver, utilisez le menu Fen&ecirc;tre. Si vous n’arrivez
pas &agrave; localiser un panneau, un inspecteur ou une fen&ecirc;tre indiqu&eacute;s comme ouverts, choisissez
Fen&ecirc;tre &gt; R&eacute;organiser Panneaux pour pr&eacute;senter tous les panneaux ouverts &agrave; l’&eacute;cran.
A propos de l’espace de travail de Dreamweaver
35
La page de d&eacute;marrage permet d’ouvrir un document r&eacute;cent ou de cr&eacute;er un nouveau document.
Vous pouvez &eacute;galement, &agrave; partir de la page de d&eacute;marrage, survoler Dreamweaver ou acc&eacute;der &agrave; un
didacticiel.
contient des boutons permettant d’ins&eacute;rer divers types d’&laquo; objets &raquo;, tels que des
images, tableaux et calques dans un document. Chaque objet est une portion de code HTML
vous permettant de d&eacute;finir diff&eacute;rents attributs lors de son insertion. Vous pouvez, par exemple,
ins&eacute;rer un tableau en cliquant sur le bouton Tableau de la barre Ins&eacute;rer. Si vous le pr&eacute;f&eacute;rez, vous
pouvez ins&eacute;rer les objets &agrave; partir du menu Insertion.
La barre Ins&eacute;rer
contient des boutons permettant d’acc&eacute;der aux diff&eacute;rents modes
d’affichage de la fen&ecirc;tre du document (tels que le mode Cr&eacute;ation ou le mode Code), de d&eacute;finir les
diff&eacute;rentes options d’affichage et d’effectuer certaines op&eacute;rations courantes, telles que la
pr&eacute;visualisation dans un navigateur.
La barre d’outils du document
La barre d’outils standard (non affich&eacute;e par d&eacute;faut dans l’espace de travail) contient des boutons
correspondant aux op&eacute;rations courantes des menus Fichier et Edition : Nouveau, Ouvrir,
Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et R&eacute;p&eacute;ter. Pour afficher la barre
d’outils standard, choisissez Affichage &gt; Barres d’outils &gt; Standard.
La fen&ecirc;tre de document
affiche le document que vous cr&eacute;ez et modifiez.
L’inspecteur de propri&eacute;t&eacute;s permet de visualiser et de modifier diverses propri&eacute;t&eacute;s de l’objet ou
du texte s&eacute;lectionn&eacute;. Chaque objet contient des propri&eacute;t&eacute;s diff&eacute;rentes. L’inspecteur de propri&eacute;t&eacute;s
n’est pas d&eacute;velopp&eacute; par d&eacute;faut dans la pr&eacute;sentation de l’espace de travail Codeur.
qui se trouve dans la barre d’&eacute;tat, en bas de la fen&ecirc;tre de document,
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 son contenu.
Le s&eacute;lecteur de balises,
sont des ensembles de panneaux associ&eacute;s regroup&eacute;s sous un m&ecirc;me
titre. Pour d&eacute;velopper un groupe de panneaux, cliquez sur la fl&egrave;che d’agrandissement situ&eacute;e &agrave;
gauche du nom du groupe ; pour d&eacute;tacher un groupe de panneaux, faites glisser la poign&eacute;e
d’ancrage sur le c&ocirc;t&eacute; gauche de la barre de titre du groupe.
Les groupes de panneaux
vous permet de g&eacute;rer vos fichiers et dossiers, qu’ils fassent partie d’un site
Dreamweaver ou qu’ils se trouvent sur un serveur distant. Il permet &eacute;galement d’acc&eacute;der &agrave; tous les
fichiers situ&eacute;s sur votre disque local, tout comme l’Explorateur Windows (Windows) ou le Finder
(Macintosh).
Le panneau Fichiers
Rubriques connexes
•
•
•
•
36
Utilisation de la fen&ecirc;tre de document, page 41
Utilisation des barres d’outils, des inspecteurs et des menus contextuels, page 44
Utilisation des panneaux et des groupes de panneaux, page 49
Gestion de fichiers et de dossiers dans le panneau Fichiers, page 94
Chapitre 1 : Exploration de l’espace de travail
Fen&ecirc;tre de document
La fen&ecirc;tre de document affiche le document actif. Vous pouvez choisir parmi les modes
d’affichage suivants :
: 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. Vous pouvez configurer le mode Cr&eacute;ation pour qu’il affiche le contenu
dynamique pendant que vous travaillez sur le document (voir Affichage des donn&eacute;es dynamiques en
mode Cr&eacute;ation, page 518).
Mode Cr&eacute;ation
Mode Code : environnement de codage manuel pour r&eacute;diger et modifier du code HTML,
JavaScript et 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, page 429.
Mode Code et Cr&eacute;ation : environnement mixte affichant les modes Cr&eacute;ation et Code 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. 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 et le nom du fichier s’affichent dans la barre de titre de la fen&ecirc;tre principale de l’espace de
travail.
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.
Rubriques connexes
• Utilisation de la fen&ecirc;tre de document, page 41
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 divis&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.
Mode Code
Modes Code et Cr&eacute;ation
Aucune erreur du navigateur
Gestion de fichiers
Mode Cr&eacute;ation
Aper&ccedil;u/D&eacute;bogage dans le navigateur
Options d’affichage
D&eacute;bogage du serveur
Titre du document
Actualiser mode Cr&eacute;ation
A propos de l’espace de travail de Dreamweaver
37
Les options suivantes s’affichent dans la barre d’outils de document :
Mode Code
pour afficher uniquement le mode Code dans la fen&ecirc;tre de document.
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.
Modes Code et Cr&eacute;ation
Mode Cr&eacute;ation
pour afficher uniquement le mode Cr&eacute;ation dans la fen&ecirc;tre de document.
D&eacute;bogage de serveur affiche un rapport pour vous aider &agrave; d&eacute;boguer la page ColdFusion en
cours. Le rapport indique les erreurs &eacute;ventuellement pr&eacute;sentes sur votre page.
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
Aucune erreur du navigateur
Gestion des fichiers
permet de v&eacute;rifier la compatibilit&eacute; avec diff&eacute;rents navigateurs.
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
Actualiser le mode Cr&eacute;ation 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.
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. Pour plus d’informations sur les
options du mode Code, voir D&eacute;finition des pr&eacute;f&eacute;rences d’affichage, page 417. Pour plus
d’informations sur les options d’affichage du mode Cr&eacute;ation, voir S&eacute;lection d’&eacute;l&eacute;ments dans la
fen&ecirc;tre de document, page 274, Affichage et modification du contenu de l’en-t&ecirc;te, page 463 et
Utilisation de guides visuels dans Dreamweaver, page 57.
Options d’affichage
Rubriques connexes
• Affichage des barres d’outils, page 44
Barre d’outils standard
La barre d’outils standard contient des boutons correspondant aux op&eacute;rations courantes des
menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller,
Annuler et R&eacute;p&eacute;ter. Utilisez ces boutons comme vous utiliseriez les commandes de menu
&eacute;quivalentes.
Pour plus d’informations sur les op&eacute;rations telles que Ouvrir et Enregistrer, voir Chapitre 3,
Cr&eacute;ation et ouverture de documents, page 75.
Rubriques connexes
• Affichage des barres d’outils, page 44
38
Chapitre 1 : Exploration de l’espace de travail
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
Menu d&eacute;roulant Taille de fen&ecirc;tre
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 son contenu. Cliquez sur
&lt;body&gt; pour s&eacute;lectionner tout le corps du document. Pour d&eacute;finir les attributs class 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 contextuel.
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, page 42.
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 donn&eacute;es. 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, page 284.
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences de la barre d’&eacute;tat, page 43
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.
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.
Remarque : Si vous pr&eacute;f&eacute;rez afficher les cat&eacute;gories sous forme d’onglets en haut de la barre Ins&eacute;rer,
vous pouvez changer la pr&eacute;sentation de cette barre (voir D&eacute;finition des pr&eacute;f&eacute;rences de police pour
l’affichage Dreamweaver, page 60).
Certaines cat&eacute;gories disposent de boutons ouvrant des menus d&eacute;roulants. Lorsque vous
s&eacute;lectionnez une option dans l’un de ces menus d&eacute;roulants, 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 d&eacute;roulants, l’action attribu&eacute;e par d&eacute;faut au bouton change.
A propos de l’espace de travail de Dreamweaver
39
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 couches 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.
La cat&eacute;gorie Formulaires 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 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.
Les cat&eacute;gories de code serveur 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.
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 Flash.
La cat&eacute;gorie Favoris 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.
Vous pouvez modifier les objets de la barre Ins&eacute;rer ou cr&eacute;er vos propres objets (voir &laquo; Customizing
Dreamweaver &raquo; sur le centre de support Macromedia, &agrave; l’adresse www.macromedia.com/go/
customizing_dreamweaver_fr).
Rubriques connexes
• Utilisation de la barre Ins&eacute;rer, page 45
Rapports dans Dreamweaver
Dans Dreamweaver, vous pouvez ex&eacute;cuter des rapports afin de rechercher ou de tester des
contenus ou encore de corriger des erreurs. Vous pouvez g&eacute;n&eacute;rer les types de rapports suivants :
Recherche permet de rechercher des balises, des attributs ou une portion de texte sp&eacute;cifique dans
les balises. Pour effectuer une recherche de code, voir Recherche et remplacement de balises et
d’attributs, page 443.
permet de rechercher les erreurs de code ou de syntaxe. Pour effectuer une validation
de code, voir Validation de balises, page 451.
Validation
permet de tester le code HTML de vos documents afin de
d&eacute;terminer s’il contient des balises ou des attributs non pris en charge par les navigateurs cibles.
Pour effectuer une v&eacute;rification du navigateur cible, voir V&eacute;rification de la compatibilit&eacute; du
navigateur, page 448.
V&eacute;rification du navigateur cible
40
Chapitre 1 : Exploration de l’espace de travail
V&eacute;rificateur de lien permet de rechercher et de corriger les liens bris&eacute;s, externes et orphelins. Pour
effectuer une v&eacute;rification des liens, voir Recherche de liens bris&eacute;s, externes et orphelins, page 350.
Rapports du site permet d’am&eacute;liorer le d&eacute;roulement du travail et de tester les attributs HTML
dans votre site. Les rapports sur le d&eacute;roulement du travail incluent les fonctions Extrait par,
Modifi&eacute;s r&eacute;cemment et Design Notes ; les rapports HTML incluent les balises de polices
imbriqu&eacute;es combinables, l’accessibilit&eacute;, les textes secondaires manquants, les balises imbriqu&eacute;es
redondantes, les balises vides amovibles et les documents sans nom. Pour ex&eacute;cuter des rapports de
site, voir Test de votre site, page 119.
Journal FTP permet d’avoir une vue d’ensemble des transferts de fichiers en FTP. Pour consulter
le journal FTP, voir Acquisition de fichiers depuis un serveur distant, page 109 ou Placement de
fichiers sur un site distant, page 111.
permet d’obtenir les informations n&eacute;cessaires au d&eacute;bogage d’une
application ColdFusion. Pour consulter les informations de d&eacute;bogage, voir Utilisation du
d&eacute;bogueur ColdFusion (Windows uniquement), page 453.
D&eacute;bogage du serveur
A propos de la personnalisation de Dreamweaver dans les syst&egrave;mes
multiutilisateurs
Dreamweaver peut &ecirc;tre personnalis&eacute; selon les besoins, m&ecirc;me dans les syst&egrave;mes multiutilisateurs
tels que Windows XP ou MacOS X.
Dreamweaver emp&ecirc;che que la configuration personnalis&eacute;e d’un utilisateur n’affecte celle d’un
autre. Pour ce faire, la premi&egrave;re fois que vous ex&eacute;cutez Dreamweaver sur l’un des syst&egrave;mes
multiutilisateurs reconnus, l’application cr&eacute;e des copies de divers fichiers de configuration &agrave; votre
intention. Ces fichiers sont enregistr&eacute;s dans un dossier vous appartenant.
Par exemple, sous Windows XP, ils sont situ&eacute;s dans le r&eacute;pertoire C:\Documents and
Settings\nom_utilisateur\Application Data\Macromedia\Dreamweaver MX\Configuration (qui
peut se trouver dans un dossier cach&eacute;).
Sous Mac OS X, ils sont situ&eacute;s dans votre dossier personnel, dans Utilisateurs/nom_utilisateur/
Biblioth&egrave;que/Application Support/Macromedia/Dreamweaver MX/Configuration.
Remarque : Sur des syst&egrave;mes d’exploitation plus anciens (Windows 98, Windows ME et Mac OS
9.x), un seul groupe de fichiers de configuration Dreamweaver est partag&eacute; par tous les utilisateurs,
m&ecirc;me si la configuration du syst&egrave;me d’exploitation prend en charge plusieurs utilisateurs.
Si vous r&eacute;installez ou mettez &agrave; niveau Dreamweaver, Dreamweaver cr&eacute;e automatiquement des
copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnalis&eacute;
manuellement ces fichiers, vos modifications restent disponibles.
Rubriques connexes
• Dreamweaver personnalisation, notions de base
Utilisation de la fen&ecirc;tre de document
La fen&ecirc;tre de document affiche le document actif. Vous pouvez afficher un document en mode
Cr&eacute;ation, en mode Code ou en mode Code et Cr&eacute;ation. La barre d’&eacute;tat de la fen&ecirc;tre de document
affiche des informations sur le document actuel.
Utilisation de la fen&ecirc;tre de document
41
Rubriques connexes
• Fen&ecirc;tre de document, page 37
• Barre d’&eacute;tat, page 39
Basculement d’un mode &agrave; un autre dans la fen&ecirc;tre de document
Vous pouvez afficher un document dans la fen&ecirc;tre de document en mode Code, en mode
Cr&eacute;ation ou en mode Code et cr&eacute;ation.
Pour passer d’un mode &agrave; l’autre dans la fen&ecirc;tre de document, proc&eacute;dez de l’une des fa&ccedil;ons
suivantes :
• Utilisez le menu Affichage :
Choisissez Affichage &gt; Code.
■ Choisissez Affichage &gt; Cr&eacute;ation.
■ Choisissez Affichage &gt; Code et cr&eacute;ation.
Utilisez la barre d’outils de document :
■ Cliquez sur le bouton Afficher le mode Code.
■
•
■
Cliquez sur le bouton Afficher les modes Code et Cr&eacute;ation.
■
Cliquez sur le bouton Afficher le mode Cr&eacute;ation.
Pour basculer entre les modes Code et Cr&eacute;ation :
• Appuyez sur les touches Ctrl+tilde (~) (Windows) ou Commande+guillemet simple
d’ouverture (‘) (Macintosh).
Remarque : Si les deux modes sont affich&eacute;s simultan&eacute;ment dans la fen&ecirc;tre de document, ce
raccourci clavier permet d’activer tour &agrave; tour les deux modes.
Rubriques connexes
• Fen&ecirc;tre de document, page 37
Redimensionnement de la fen&ecirc;tre de document
La barre d’&eacute;tat affiche les dimensions de la fen&ecirc;tre de document s&eacute;lectionn&eacute;e (en pixels). Pour
qu’une page s’affiche de fa&ccedil;on optimale &agrave; une taille sp&eacute;cifique, vous pouvez r&eacute;gler la fen&ecirc;tre de
document sur l’une des tailles pr&eacute;d&eacute;termin&eacute;es, modifier ces tailles pr&eacute;d&eacute;termin&eacute;es ou cr&eacute;er de
nouvelles tailles.
Pour redimensionner la fen&ecirc;tre de document selon une taille pr&eacute;d&eacute;termin&eacute;e :
• Choisissez l’une des tailles affich&eacute;es dans le menu d&eacute;roulant Taille de fen&ecirc;tre qui se trouve dans
la barre d’&eacute;tat de la fen&ecirc;tre de document.
42
Chapitre 1 : Exploration de l’espace de travail
Remarque : Sous Windows, vous pouvez agrandir la fen&ecirc;tre de document pour qu’elle occupe
tout l’espace de la zone de document de la fen&ecirc;tre int&eacute;gr&eacute;e. Vous ne pouvez pas redimensionner
une fen&ecirc;tre de document agrandie.
La taille de la fen&ecirc;tre correspond aux dimensions internes de la fen&ecirc;tre de navigateur, bordures
exclues ; la r&eacute;solution de l’&eacute;cran est indiqu&eacute;e entre parenth&egrave;ses. Optez, par exemple, pour le
format &laquo; 536 x 196 (640 x 480, valeur par d&eacute;faut) &raquo; si les visiteurs de votre site utilisent Microsoft
Internet Explorer ou Netscape Navigator par d&eacute;faut sur un moniteur de 640 x 480.
Conseil : Pour un redimensionnement moins pr&eacute;cis des fen&ecirc;tres, utilisez les m&eacute;thodes standard de
votre syst&egrave;me d’exploitation, par exemple, en faisant glisser le coin inf&eacute;rieur droit d’une fen&ecirc;tre.
Pour modifier les valeurs figurant dans le menu d&eacute;roulant Taille de fen&ecirc;tre :
1 Cliquez sur Modifier les tailles dans le menu d&eacute;roulant Taille de fen&ecirc;tre.
2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fen&ecirc;tre, puis entrez une
nouvelle valeur.
Pour que la fen&ecirc;tre de document adopte uniquement une largeur sp&eacute;cifique sans que sa
hauteur change, s&eacute;lectionnez une valeur de hauteur et supprimez-la.
3 Cliquez sur la zone de texte Description pour saisir un texte d&eacute;crivant la taille sp&eacute;cifique.
4 Cliquez sur OK pour enregistrer la modification et revenir &agrave; la fen&ecirc;tre de document.
Pour ajouter un nouveau format d’affichage au menu d&eacute;roulant Taille de fen&ecirc;tre :
1 Cliquez sur Modifier les tailles dans le menu d&eacute;roulant Taille de fen&ecirc;tre.
2 Cliquez dans l’espace vierge qui appara&icirc;t sous la derni&egrave;re valeur de la colonne Largeur.
3 Indiquez les valeurs d&eacute;sir&eacute;es pour Largeur et Hauteur.
Pour d&eacute;finir soit la largeur, soit la hauteur, laissez l’un des champs vide.
4 Cliquez dans le champ Description pour saisir un texte d&eacute;crivant la taille ajout&eacute;e.
5 Cliquez sur OK pour enregistrer la modification et revenir &agrave; la fen&ecirc;tre de document.
Par exemple, vous pouvez entrer SVGA ou PC standard &agrave; c&ocirc;t&eacute; de l’entr&eacute;e correspondant &agrave; un
moniteur d’une r&eacute;solution de 800 x 600 pixels, et Mac 17 &agrave; c&ocirc;t&eacute; de l’entr&eacute;e correspondant &agrave; un
moniteur d’une r&eacute;solution de 832 x 624 pixels. Diverses r&eacute;solutions peuvent &ecirc;tre r&eacute;gl&eacute;es sur la
plupart des moniteurs.
D&eacute;finition des pr&eacute;f&eacute;rences de la barre d’&eacute;tat
Vous pouvez d&eacute;finir les pr&eacute;f&eacute;rences de la barre d’&eacute;tat dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de la barre d’&eacute;tat :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
Utilisation de la fen&ecirc;tre de document
43
2 S&eacute;lectionnez la cat&eacute;gorie Barre d’&eacute;tat dans la liste de gauche.
3 D&eacute;finissez les options de pr&eacute;f&eacute;rence.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Rubriques connexes
• Barre d’&eacute;tat, page 39
Utilisation des barres d’outils, des inspecteurs et des menus
contextuels
Dreamweaver comporte plusieurs outils permettant d’effectuer des modifications rapides lors de
la cr&eacute;ation ou de la modification d’un document.
Les barres d’outils du document et standard permettent de modifier et de manipuler le document
actuel. La barre Ins&eacute;rer comporte des boutons permettant de cr&eacute;er et d’ins&eacute;rer des objets tels que
des tableaux, des calques et des images. En outre, l’inspecteur de propri&eacute;t&eacute;s permet de modifier les
propri&eacute;t&eacute;s de ces objets.
Remarque : Vous pouvez &eacute;galement utiliser l’inspecteur de balises pour afficher et modifier les
propri&eacute;t&eacute;s (voir Modification d’attributs dans l’inspecteur de balises, page 456). L’inspecteur de balises
permet d’afficher et de modifier chaque attribut associ&eacute; &agrave; une balise, alors que l’inspecteur de
propri&eacute;t&eacute;s n’affiche que les attributs les plus fr&eacute;quents.
Les menus contextuels repr&eacute;sentent une alternative aux fonctions de cr&eacute;ation et de modification
d’objets de la barre Ins&eacute;rer et de l’inspecteur de propri&eacute;t&eacute;s.
Affichage des barres d’outils
Les barres d’outils du document et standard permettent d’effectuer des op&eacute;rations de
modification standard ou en rapport avec le document. Vous pouvez afficher ou masquer ces
barres selon qu’elles vous sont utiles ou non. Le param&egrave;tre d’affichage des barres d’outils choisi est
sp&eacute;cifique &agrave; un document ; ce param&egrave;tre ne s’applique qu’au document actuel.
Pour afficher ou masquer la barre d’outils de document, proc&eacute;dez de l’une des fa&ccedil;ons
suivantes :
• Choisissez Fen&ecirc;tre &gt; Barres d’outils &gt; Document.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) dans la barre Ins&eacute;rer ou la barre d’outil standard ou de document, puis choisissez
Barre d’outils du document.
Pour afficher ou masquer la barre d’outils standard, proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
• Choisissez Fen&ecirc;tre &gt; Barres d’outils &gt; Standard.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) dans la barre Ins&eacute;rer ou la barre d’outil standard ou de document, puis choisissez
Barre d’outils standard.
Rubriques connexes
• Barre d’outils de document, page 37
• Barre d’outils standard, page 38
44
Chapitre 1 : Exploration de l’espace de travail
Utilisation de 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 et des images. Ces boutons sont organis&eacute;s en plusieurs cat&eacute;gories. Lorsque vous placez le
curseur de la souris sur un bouton, une info-bulle indiquant le nom de ce bouton appara&icirc;t.
Rubriques connexes
• Barre Ins&eacute;rer, page 39
Affichage de la barre Ins&eacute;rer et des cat&eacute;gories et menus associ&eacute;s
Vous pouvez afficher, masquer, d&eacute;velopper ou r&eacute;duire la barre Ins&eacute;rer selon qu’elle vous est utile
ou non. De m&ecirc;me, vous pouvez afficher ou masquer les diff&eacute;rentes cat&eacute;gories de cette barre.
Certaines cat&eacute;gories de la barre Ins&eacute;rer comportent des boutons dont les menus permettent
d’ex&eacute;cuter des commandes courantes.
Si vous pr&eacute;f&eacute;rez afficher les cat&eacute;gories sous forme d’onglets en haut de la barre Ins&eacute;rer, changez la
pr&eacute;sentation de la barre Ins&eacute;rer.
Pour masquer ou afficher la barre Ins&eacute;rer, proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
• Choisissez Fen&ecirc;tre &gt; Ins&eacute;rer.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) dans la barre Ins&eacute;rer ou la barre d’outil standard ou de document, puis choisissez
Barre Ins&eacute;rer.
Pour afficher les boutons d’une cat&eacute;gorie :
• Cliquez sur la fl&egrave;che du menu d&eacute;roulant situ&eacute;e pr&egrave;s du nom de la cat&eacute;gorie, &agrave; l’extr&eacute;mit&eacute;
gauche de la barre Ins&eacute;rer, puis choisissez une autre cat&eacute;gorie dans le menu d&eacute;roulant.
Utilisation des barres d’outils, des inspecteurs et des menus contextuels
45
Pour afficher le menu d&eacute;roulant d’un bouton :
• Cliquez sur le bouton fl&eacute;ch&eacute; pointant vers le bas situ&eacute; pr&egrave;s de l’ic&ocirc;ne du bouton.
Pour afficher les cat&eacute;gories de la barre Ins&eacute;rer sous forme d’onglets :
• Cliquez sur la fl&egrave;che du menu d&eacute;roulant situ&eacute;e pr&egrave;s du nom de la cat&eacute;gorie, &agrave; l’extr&eacute;mit&eacute;
gauche de la barre Ins&eacute;rer, puis choisissez Afficher en tant qu’onglets.
La barre Ins&eacute;rer affiche les cat&eacute;gories sous forme d’onglets apparaissant le long de la barre Ins&eacute;rer,
en haut.
Remarque : Si vous le souhaitez, vous pouvez cliquer sur le titre de la barre Ins&eacute;rer pour la rouvrir.
Pour afficher les cat&eacute;gories de la barre Ins&eacute;rer sous forme de menus :
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e Macintosh)
dans la barre Ins&eacute;rer, puis choisissez Afficher en tant que menu.
La barre Ins&eacute;rer affiche les cat&eacute;gories sous forme de menus plut&ocirc;t que d’onglets.
Rubriques connexes
• Personnalisation et utilisation de la cat&eacute;gorie Favoris dans la barre Ins&eacute;rer, page 47
Utilisation de la barre Ins&eacute;rer pour ins&eacute;rer des objets
La barre Ins&eacute;rer repr&eacute;sente un moyen pratique de cr&eacute;er et d’ins&eacute;rer des objets.
Pour ins&eacute;rer un objet :
1 S&eacute;lectionnez une cat&eacute;gorie dans la partie gauche de la barre Ins&eacute;rer.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Cliquez sur un bouton d’objet ou faites glisser l’ic&ocirc;ne du bouton dans la fen&ecirc;tre de
document.
Cliquez sur la fl&egrave;che du menu d&eacute;roulant d’un bouton, puis s&eacute;lectionnez une option dans le
menu.
Selon le type d’objet que vous s&eacute;lectionnez, une bo&icirc;te de dialogue d’insertion d’objet s’affiche, le
cas &eacute;ch&eacute;ant, et vous invite &agrave; rechercher un fichier ou &agrave; sp&eacute;cifier les param&egrave;tres d’un objet
sp&eacute;cifique. En outre, Dreamweaver vous permet d’ins&eacute;rer du code dans le document ou d’ouvrir
un &eacute;diteur de balises (voir Modification de balises avec des &eacute;diteurs de balises, page 441) ou un
panneau vous permettant de sp&eacute;cifier les informations avant l’insertion du code.
46
Chapitre 1 : Exploration de l’espace de travail
Dans le cas de certains objets, aucune bo&icirc;te de dialogue ne s’affiche si vous ins&eacute;rez les objets en
mode Cr&eacute;ation, mais un &eacute;diteur de balises s’affiche si vous ins&eacute;rez les objets en mode Code. Pour
d’autres objets, lorsque vous essayez d’ins&eacute;rer des objets en mode Cr&eacute;ation, Dreamweaver passe en
mode Code avant de r&eacute;aliser l’insertion.
Remarque : Certains objets, tels que les ancres nomm&eacute;es, ne sont pas visibles lorsque vous visualisez
la page dans la fen&ecirc;tre d’un navigateur. Pour afficher des ic&ocirc;nes en mode Cr&eacute;ation indiquant
l’emplacement de ces objets invisibles, voir Affichage et masquage des &eacute;l&eacute;ments invisibles, page 275.
Pour contourner cette bo&icirc;te de dialogue et ins&eacute;rer un espace r&eacute;serv&eacute; vide :
• Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris
sur le bouton correspondant &agrave; l’objet.
Par exemple, pour ins&eacute;rer un espace r&eacute;serv&eacute; d’image sans sp&eacute;cifier de fichier d’image, appuyez
sur la touche Ctrl ou Option tout en cliquant avec la souris sur le bouton Image.
Remarque : Cette proc&eacute;dure ne contourne pas toutes les bo&icirc;tes de dialogue d’insertion d’objet.
De nombreux objets, y compris les barres de navigation, calques, boutons Flash et jeux de cadres,
n’ins&egrave;rent pas d’espaces r&eacute;serv&eacute;s ni d’objets avec des valeurs par d&eacute;faut.
Pour modifier les pr&eacute;f&eacute;rences de la barre Ins&eacute;rer :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences contenant la cat&eacute;gorie de pr&eacute;f&eacute;rences g&eacute;n&eacute;rales s’affiche.
2 D&eacute;sactivez l’option Afficher la bo&icirc;te de dialogue lors de l’insertion d’objets pour supprimer les
bo&icirc;tes de dialogue lors de l’insertion d’objets, tels que des images, des tableaux, des scripts ou
des &eacute;l&eacute;ments d’en-t&ecirc;te. Vous pouvez &eacute;galement maintenir la touche Ctrl (Windows) ou Option
(Macintosh) enfonc&eacute;e tandis que vous cr&eacute;ez l’objet.
Conseil : Si cette option est d&eacute;sactiv&eacute;e lorsque vous ins&eacute;rez un objet, celui-ci aura des valeurs par
d&eacute;faut. Utilisez l’inspecteur de propri&eacute;t&eacute;s pour modifier les propri&eacute;t&eacute;s de l’objet apr&egrave;s l’avoir ins&eacute;r&eacute;.
3 Cliquez sur OK.
Rubriques connexes
• Affichage de la barre Ins&eacute;rer et des cat&eacute;gories et menus associ&eacute;s, page 45
Personnalisation et utilisation de la cat&eacute;gorie Favoris dans la barre Ins&eacute;rer
La cat&eacute;gorie Favoris de la barre Ins&eacute;rer permet de grouper et d’organiser les boutons fr&eacute;quemment
utilis&eacute;s de la barre Ins&eacute;rer. Vous pouvez ajouter, g&eacute;rer ou supprimer des boutons de la cat&eacute;gorie
Favoris.
Pour ajouter, supprimer ou g&eacute;rer les boutons de la cat&eacute;gorie Favoris :
1 S&eacute;lectionnez l’une des cat&eacute;gories de la barre Ins&eacute;rer.
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh)
dans la zone o&ugrave; apparaissent les boutons (ne cliquez pas sur le nom de la cat&eacute;gorie), puis
s&eacute;lectionnez Personnaliser les objets favoris.
La bo&icirc;te de dialogue Personnaliser les objets favoris s’affiche.
3 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Les modifications que vous avez effectu&eacute;es sont appliqu&eacute;es &agrave; la cat&eacute;gorie Favoris.
Utilisation des barres d’outils, des inspecteurs et des menus contextuels
47
Conseil : Si la cat&eacute;gorie Favoris n’est pas la cat&eacute;gorie active, s&eacute;lectionnez-la afin de voir les
modifications apport&eacute;es.
Pour ins&eacute;rer des objets &agrave; l’aide des boutons de la cat&eacute;gorie Favoris :
• S&eacute;lectionnez la cat&eacute;gorie Favoris dans la partie gaude de la barre Ins&eacute;rer, puis cliquez sur le
bouton correspondant &agrave; un objet Favori que vous avez ajout&eacute;.
Remarque : La cat&eacute;gorie Favoris ne contient des boutons qu’une fois que vous l’avez
personnalis&eacute;e de fa&ccedil;on &agrave; ajouter des objets.
Rubriques connexes
• Affichage de la barre Ins&eacute;rer et des cat&eacute;gories et menus associ&eacute;s, page 45
• Utilisation de la barre Ins&eacute;rer pour ins&eacute;rer des objets, page 46
Utilisation de l’inspecteur de propri&eacute;t&eacute;s
L’inspecteur de 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 de
propri&eacute;t&eacute;s varie en fonction de l’&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
Remarque : Utilisez l’inspecteur de balises pour afficher et modifier les attributs associ&eacute;s &agrave; des
propri&eacute;t&eacute;s de balises (voir Modification d’attributs dans l’inspecteur de balises, page 456).
Conseil : Par d&eacute;faut, l’inspecteur de 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 de propri&eacute;t&eacute;s,
voir Ancrage et annulation d’ancrage de panneaux et de groupes de panneaux, page 50.
Pour afficher ou masquer l’inspecteur de propri&eacute;t&eacute;s :
• Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s.
Pour d&eacute;velopper ou r&eacute;duire l’inspecteur de propri&eacute;t&eacute;s :
• Cliquez sur la fl&egrave;che d’agrandissement dans l’angle inf&eacute;rieur droit de l’inspecteur de propri&eacute;t&eacute;s.
Pour afficher les propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de page :
• S&eacute;lectionnez l’&eacute;l&eacute;ment de la page dans la fen&ecirc;tre de document.
Remarque : Si n&eacute;cessaire, agrandissez l’inspecteur de propri&eacute;t&eacute;s afin que toutes les propri&eacute;t&eacute;s de
l’&eacute;l&eacute;ment s&eacute;lectionn&eacute; puissent appara&icirc;tre.
Pour modifier les propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de page :
1 S&eacute;lectionnez l’&eacute;l&eacute;ment de la page dans la fen&ecirc;tre de document.
2 Modifiez les propri&eacute;t&eacute;s de votre choix dans l’inspecteur de propri&eacute;t&eacute;s.
Remarque : Pour obtenir des informations sur des propri&eacute;t&eacute;s particuli&egrave;res, s&eacute;lectionnez un
&eacute;l&eacute;ment dans la fen&ecirc;tre de document, puis cliquez sur l’ic&ocirc;ne Aide (?) dans le coin sup&eacute;rieur droit
de l’inspecteur de propri&eacute;t&eacute;s.
La plupart des changements apport&eacute;s &agrave; une propri&eacute;t&eacute; sont imm&eacute;diatement appliqu&eacute;s dans la
fen&ecirc;tre de document.
48
Chapitre 1 : Exploration de l’espace de travail
3 Si les changements ne s’appliquent pas imm&eacute;diatement, effectuez l’une des actions suivantes :
■
■
■
Cliquez hors des champs de texte de modification des propri&eacute;t&eacute;s.
Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Appuyez sur la touche de tabulation pour passer &agrave; une autre propri&eacute;t&eacute;.
Utilisation des menus contextuels
Dreamweaver comporte beaucoup de menus contextuels, qui vous permettent d’acc&eacute;der
rapidement aux commandes et propri&eacute;t&eacute;s les plus utiles relatives &agrave; l’objet ou &agrave; la fen&ecirc;tre avec
lesquels vous travaillez. Les menus contextuels r&eacute;pertorient uniquement les commandes en
rapport avec la s&eacute;lection en cours.
Pour utiliser un menu contextuel :
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur l’objet ou la fen&ecirc;tre qui vous int&eacute;resse.
Le menu contextuel associ&eacute; &agrave; l’objet ou &agrave; la fen&ecirc;tre s&eacute;lectionn&eacute;(e) s’affiche.
2 Choisissez une commande dans le menu contextuel.
Utilisation des panneaux et des groupes de panneaux
Dans Dreamweaver, les panneaux sont li&eacute;s entre eux pour former dans des groupes de panneaux.
Un panneau s&eacute;lectionn&eacute; dans un groupe de panneaux appara&icirc;t comme un onglet. Vous pouvez
d&eacute;velopper ou r&eacute;duire les groupes de panneaux, les ancrer ou les d&eacute;tacher des autres groupes.
Vous pouvez &eacute;galement les ancrer dans la fen&ecirc;tre de l’application int&eacute;gr&eacute;e (Windows
uniquement). Cela vous permet d’acc&eacute;der ais&eacute;ment aux panneaux n&eacute;cessaires sans encombrer
votre espace de travail.
Remarque : Lorsqu’un groupe de panneaux est flottant (d&eacute;tach&eacute;), une &eacute;troite barre vide appara&icirc;t audessus du groupe. Dans cette documentation, le terme &laquo; barre de titre du groupe de panneaux &raquo; fait
r&eacute;f&eacute;rence &agrave; la zone o&ugrave; s’affiche le nom du groupe de panneaux, plut&ocirc;t qu’&agrave; cette &eacute;troite barre vide.
Utilisation des panneaux et des groupes de panneaux
49
Affichage des panneaux et des groupes de panneaux
Vous pouvez afficher ou masquer les panneaux et groupes de panneaux dans l’espace de travail
selon qu’ils vous sont utiles ou non.
Pour d&eacute;velopper ou r&eacute;duire un groupe de panneaux, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Cliquez sur la fl&egrave;che d’agrandissement dans le coin gauche de la barre de titre du groupe de
panneaux.
• Cliquez sur la barre de titre du groupe de panneaux.
Pour fermer un groupe de panneaux afin qu’il ne soit plus visible &agrave; l’&eacute;cran :
• Choisissez Fermer le groupe de panneaux dans le menu Options de la barre de titre du groupe
de panneaux.
Le groupe de panneaux dispara&icirc;t de l’&eacute;cran.
Pour ouvrir un groupe de panneaux ou un panneau qui n’est pas visible &agrave; l’&eacute;cran :
• Choisissez le menu Fen&ecirc;tre, puis s&eacute;lectionnez un nom de panneau.
Une coche en regard d’un &eacute;l&eacute;ment dans le menu Fen&ecirc;tre indique que l’&eacute;l&eacute;ment est ouvert (il est
possible qu’il n’apparaisse pas &agrave; l’&eacute;cran s’il est masqu&eacute; derri&egrave;re d’autres fen&ecirc;tres).
Conseil : Si vous n’arrivez pas &agrave; localiser un panneau, un inspecteur ou une fen&ecirc;tre indiqu&eacute;s
comme ouverts, choisissez Fen&ecirc;tre &gt; R&eacute;organiser Panneaux pour pr&eacute;senter tous les panneaux
ouverts &agrave; l’&eacute;cran.
Pour s&eacute;lectionner un panneau &agrave; l’int&eacute;rieur d’un groupe de panneaux agrandi :
• Cliquez sur le nom du panneau.
Pour afficher le menu d’options d’un groupe de panneaux, s’il ne l’est pas d&eacute;j&agrave; :
• Cliquez sur le nom du groupe de panneaux ou sur sa fl&egrave;che d’agrandissement pour d&eacute;velopper
le groupe de panneaux.
Le menu Options est visible uniquement lorsque le groupe de panneaux est d&eacute;velopp&eacute;.
Conseil : Plusieurs options sont disponibles dans le menu contextuel du groupe de panneaux
m&ecirc;me lorsque celui-ci est r&eacute;duit ; cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh), sur la barre de titre du groupe de panneaux pour
afficher le menu contextuel.
Ancrage et annulation d’ancrage de panneaux et de groupes de panneaux
Vous pouvez d&eacute;placer les panneaux et groupes de panneaux et les r&eacute;organiser afin qu’ils flottent ou
qu’ils soient ancr&eacute;s dans l’espace de travail.
La plupart des panneaux ne peuvent &ecirc;tre ancr&eacute;s que sur le c&ocirc;t&eacute; gauche ou droit de la fen&ecirc;tre de
document dans l’espace de travail int&eacute;gr&eacute;, tandis que d’autres (l’inspecteur de propri&eacute;t&eacute;s et la barre
Ins&eacute;rer, par exemple) ne peuvent &ecirc;tre ancr&eacute;s qu’en haut ou en bas dans la fen&ecirc;tre int&eacute;gr&eacute;e.
Pour d&eacute;tacher un groupe de panneaux :
• Faites glisser le groupe de panneaux en le saisissant par sa poign&eacute;e d’ancrage (sur le c&ocirc;t&eacute; gauche
de la barre de titre) jusqu’&agrave; ce que son contour indique qu’il n’est plus ancr&eacute;.
50
Chapitre 1 : Exploration de l’espace de travail
Pour ancrer un groupe de panneaux &agrave; d’autres groupes de panneaux (espace de travail
flottant) ou &agrave; la fen&ecirc;tre int&eacute;gr&eacute;e (sous Windows uniquement) :
• Faites glisser le groupe de panneaux en le saisissant par sa poign&eacute;e d’ancrage jusqu’&agrave; ce que son
contour indique qu’il est ancr&eacute;.
Pour d&eacute;tacher un panneau d’un groupe de panneaux :
• Dans le menu Options de la barre de titre du groupe de panneaux, s&eacute;lectionnez Associer &agrave; &gt;
Nouveau groupe de panneaux (le nom de la commande Associer &agrave; peut varier selon le nom du
panneau actif ).
Le panneau s’affiche dans son propre groupe de panneaux.
Pour ancrer un panneau &agrave; un groupe de panneaux :
• S&eacute;lectionnez le nom d’un groupe de panneaux dans le sous-menu Associer &agrave; du menu Options
du groupe de panneaux (le nom de la commande Associer &agrave; peut varier selon le nom du
panneau actif ).
Pour faire glisser un groupe de panneaux flottant (d&eacute;tach&eacute;) sans l’ancrer :
• Faites glisser le groupe de panneaux par la barre situ&eacute;e au-dessus de sa barre de titre. Le groupe
de panneaux se s’ancre pas tant que vous ne le faites pas glisser par sa poign&eacute;e d’ancrage.
Redimensionnement et changement de nom des groupes de panneaux
Vous pouvez modifier la taille et le nom des groupes de panneaux selon vos besoins.
Pour modifier la taille des groupes de panneaux :
• Panneaux flottants : afin de redimensionner l’ensemble des groupes de panneaux, faites-les
•
glisser tout comme vous le faites pour redimensionner une fen&ecirc;tre quelconque de votre syst&egrave;me
d’exploitation.
Par exemple, en faisant glisser la zone de redimensionnement dans le coin inf&eacute;rieur droit de
l’ensemble de groupes de panneaux.
Panneaux ancr&eacute;s : faites glisser la barre de s&eacute;paration entre les panneaux et la fen&ecirc;tre de
document.
Pour d&eacute;velopper un groupe de panneaux, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Agrandir le groupe de panneaux dans le menu Options de la barre de titre du
•
groupe de panneaux.
Double-cliquez &agrave; n’importe quel endroit dans la barre de titre du groupe de panneaux.
Le groupe de panneaux s’affiche verticalement et remplit tout l’espace vertical disponible.
Utilisation des panneaux et des groupes de panneaux
51
Pour renommer un groupe de panneaux :
1 Dans le menu Options de la barre de titre du groupe de panneaux, choisissez Renommer le
groupe de panneaux.
2 Entrez le nouveau nom et cliquez sur OK.
D&eacute;finition des pr&eacute;f&eacute;rences des panneaux
Vous pouvez d&eacute;finir les pr&eacute;f&eacute;rences pour indiquer les panneaux et les inspecteurs que vous voulez
toujours afficher au premier plan dans la fen&ecirc;tre de document, et ceux qui peuvent &ecirc;tre masqu&eacute;s
par la fen&ecirc;tre de document.
Pour d&eacute;finir les pr&eacute;f&eacute;rences des panneaux :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Panneaux dans la liste de gauche.
3 S&eacute;lectionnez les options.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Utilisation des fonctions d’accessibilit&eacute; de Dreamweaver
Dreamweaver inclut des fonctions qui le rendent accessible aux utilisateurs souffrant d’un
handicap. Il prend notamment en charge les lecteurs d’&eacute;cran, les fonctions d’accessibilit&eacute; du
syst&egrave;me d’exploitation et la navigation avec le clavier.
Rubriques connexes
• Dreamweaver et l’accessibilit&eacute;, page 27
Utilisation de lecteurs d’&eacute;cran avec Dreamweaver
Un lecteur d’&eacute;cran r&eacute;cite le texte qui s’affiche sur l’&eacute;cran de l’ordinateur. Il lit aussi les
informations non textuelles, tels que les &eacute;tiquettes de boutons ou les descriptions d’images dans
l’application, fournis dans les balises ou les attributs d’accessibilit&eacute; lors de la cr&eacute;ation.
En tant qu’utilisateur de Dreamweaver, vous pouvez utiliser un lecteur d’&eacute;cran pour vous assister
dans la cr&eacute;ation de vos pages Web. Le lecteur d’&eacute;cran commence sa lecture par le coin sup&eacute;rieur
gauche de la fen&ecirc;tre de document.
Dreamweaver prend en charge les lecteurs d’&eacute;cran JAWS pour Windows de Freedom Scientific
(www.freedomscientific.com) et Window Eyes de GW Micro (www.gwmicro.com).
Rubriques connexes
• Utilisation du clavier pour naviguer dans Dreamweaver, page 53
Prise en charge des fonctions d’accessibilit&eacute; du syst&egrave;me d’exploitation
(Windows uniquement)
Dreamweaver prend en charge le param&egrave;tre de contraste &eacute;lev&eacute; du syst&egrave;me d’exploitation
Windows. Vous pouvez activer cette option &agrave; l’aide du panneau de configuration de Windows.
Lorsque le contraste &eacute;lev&eacute; est activ&eacute;, cela affecte Dreamweaver de la fa&ccedil;on suivante :
52
Chapitre 1 : Exploration de l’espace de travail
• Les bo&icirc;tes de dialogue et les panneaux utilisent des param&egrave;tres de couleurs syst&egrave;me.
•
•
Par exemple, si vous d&eacute;finissez les couleurs sur Blanc sur Noir, les bo&icirc;tes de dialogue et les
panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en
arri&egrave;re-plan.
La coloration de la syntaxe en mode Code est d&eacute;sactiv&eacute;e.
Le mode Code utilise les couleurs syst&egrave;me des fen&ecirc;tres et du texte de fen&ecirc;tres et ignore les
param&egrave;tres de couleurs d&eacute;finis dans Pr&eacute;f&eacute;rences. Par exemple, si vous avez d&eacute;fini les couleurs
syst&egrave;me sur Blanc sur Noir et que vous changez les couleurs de texte dans Pr&eacute;f&eacute;rences &gt;
Coloration du Code, Dreamweaver ignore les couleurs d&eacute;finies dans Pr&eacute;f&eacute;rences et affiche le
texte de code avec du blanc comme couleur de premier plan et du noir en arri&egrave;re-plan.
Le mode Cr&eacute;ation utilise les couleurs d’arri&egrave;re-plan et de texte que vous avez d&eacute;fini dans
Modifier &gt; Propri&eacute;t&eacute;s de la page pour que les pages que vous cr&eacute;ez aient un rendu des couleurs
similaire &agrave; celui d’un navigateur.
Rubriques connexes
• Utilisation de lecteurs d’&eacute;cran avec Dreamweaver, page 52
Utilisation du clavier pour naviguer dans Dreamweaver
Vous pouvez utiliser le clavier pour parcourir les panneaux, les inspecteurs, les bo&icirc;tes de dialogue,
les cadres et les tableaux Dreamweaver sans utiliser de souris.
Rubriques connexes
• Utilisation de lecteurs d’&eacute;cran avec Dreamweaver, page 52
• Prise en charge des fonctions d’accessibilit&eacute; du syst&egrave;me d’exploitation (Windows uniquement),
page 52
Navigation dans les panneaux
Vous pouvez utiliser le clavier pour naviguer dans les panneaux.
Remarque : L’utilisation de la touche de tabulation et des touches fl&eacute;ch&eacute;es n’est prise en charge que
sous Windows.
Pour naviguer dans les panneaux :
1 Dans la fen&ecirc;tre de document, appuyez sur Ctrl+Alt+Tab pour activer un panneau.
Un contour blanc autour de la barre de titre du panneau indique que le panneau est actif. Le
lecteur d’&eacute;cran lit la barre de titre du panneau actif.
2 Appuyez sur Ctrl+Alt+Tab de nouveau pour activer le panneau suivant.
Continuez jusqu’&agrave; ce que le panneau dans lequel vous voulez travailler soit actif.
3 Appuyez sur Ctrl+Alt+Maj+Tab pour activer le panneau pr&eacute;c&eacute;dent, si n&eacute;cessaire.
4 Si le panneau dans lequel vous voulez travailler n’est pas ouvert, utilisez les raccourcis clavier
r&eacute;pertori&eacute;s dans le menu Fen&ecirc;tre pour afficher le panneau appropri&eacute;, puis appuyez sur
Ctrl+Alt+Tab pour l’activer.
Si le panneau dans lequel vous voulez travailler est ouvert, mais affich&eacute; sous sa forme r&eacute;duite,
activez la barre de titre du panneau et appuyez sur la barre d’espace. Appuyez sur la barre
d’espace de nouveau pour r&eacute;duire le panneau.
Utilisation des fonctions d’accessibilit&eacute; de Dreamweaver
53
5 Appuyez sur la touche de tabulation pour passer d’une option &agrave; une autre dans le panneau.
Un contour en pointill&eacute; indique que l’option est active.
6 Utilisez les touches fl&eacute;ch&eacute;es de fa&ccedil;on appropri&eacute;e :
■
■
Si une option comporte des choix, utilisez les touches fl&eacute;ch&eacute;es pour faire d&eacute;filer ces choix,
puis appuyez sur la barre d’espace pour valider la s&eacute;lection.
Si le groupe de panneaux comporte des onglets pour ouvrir d’autres panneaux, activez
l’onglet ouvert puis utilisez la touche fl&eacute;ch&eacute;e gauche ou droite pour ouvrir un autre onglet.
Apr&egrave;s avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour faire d&eacute;filer
les options de ce panneau.
Rubriques connexes
• Navigation dans les bo&icirc;tes de dialogue, page 54
• Navigation dans les cadres, page 55
• Navigation dans les tableaux, page 55
Navigation dans l’inspecteur de propri&eacute;t&eacute;s
Vous pouvez utiliser le clavier pour naviguer dans l’inspecteur de propri&eacute;t&eacute;s et effectuer des
modifications sur votre document.
Remarque : L’utilisation de la touche de tabulation et des touches fl&eacute;ch&eacute;es n’est prise en charge que
sous Windows.
Pour naviguer dans l’inspecteur de propri&eacute;t&eacute;s :
1 Appuyez sur Ctrl+F3 pour afficher l’inspecteur de propri&eacute;t&eacute;s, s’il n’est pas visible.
2 Appuyez sur Ctrl+Alt+Tab jusqu’&agrave; ce que l’inspecteur de propri&eacute;t&eacute;s soit actif.
3 Appuyez sur la touche de tabulation pour passer d’une option de l’inspecteur de propri&eacute;t&eacute;s &agrave; une
autre.
4 Utilisez les touches fl&eacute;ch&eacute;es comme vous le d&eacute;sirez pour faire d&eacute;filer les choix d’options et
appuyez sur Entr&eacute;e (Windows) ou Retour (Macintosh) pour effectuer une s&eacute;lection.
5 Appuyez sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour ouvrir et fermer la section
d&eacute;velopp&eacute;e de l’inspecteur de propri&eacute;t&eacute;s ou appuyez sur la barre d’espace lorsque la fl&egrave;che
d’agrandissement en bas &agrave; droite est active.
Rubriques connexes
• Navigation dans les panneaux, page 53
• Navigation dans les cadres, page 55
• Navigation dans les tableaux, page 55
Navigation dans les bo&icirc;tes de dialogue
Vous pouvez utiliser le clavier pour naviguer dans les bo&icirc;tes de dialogue.
Remarque : L’utilisation de la touche de tabulation et des touches fl&eacute;ch&eacute;es n’est prise en charge que
sous Windows.
Pour naviguer dans une bo&icirc;te de dialogue :
1 Appuyez sur la touche de tabulation pour passer d’une option &agrave; une autre dans la bo&icirc;te de
dialogue.
54
Chapitre 1 : Exploration de l’espace de travail
2 Utilisez les touches fl&eacute;ch&eacute;es pour faire d&eacute;filer les choix d’une option.
Par exemple, si une option dispose d’un menu d&eacute;roulant, activez cette option puis utilisez la
touche fl&eacute;ch&eacute;e bas pour faire d&eacute;filer les choix.
3 Si la bo&icirc;te de dialogue comporte une liste Cat&eacute;gorie, appuyez sur Ctrl+Tab (Windows) ou
Option+Tab (Macintosh) pour activer la liste Cat&eacute;gorie puis utilisez les touches fl&eacute;ch&eacute;es pour
vous d&eacute;placer vers le haut ou vers le bas dans la liste.
4 Appuyez de nouveau sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour afficher les
options d’une cat&eacute;gorie.
5 Appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh) pour quitter la bo&icirc;te de dialogue.
Rubriques connexes
• Navigation dans les panneaux, page 53
• Navigation dans l’inspecteur de propri&eacute;t&eacute;s, page 54
• Navigation dans les tableaux, page 55
Navigation dans les cadres
Si votre document contient des cadres, vous pouvez utiliser les touches fl&eacute;ch&eacute;es pour activer un
cadre.
Remarque : L’utilisation de la touche de tabulation et des touches fl&eacute;ch&eacute;es n’est prise en charge que
sous Windows.
Pour s&eacute;lectionner un cadre :
1 Placez le point d’insertion dans la fen&ecirc;tre de document.
2 Appuyez sur Alt+Fl&egrave;che vers le haut pour s&eacute;lectionner le cadre actif.
3
4
5
6
Une ligne en pointill&eacute; indique quel cadre est actif.
Continuez d’appuyer sur Alt+Fl&egrave;che vers le haut pour activer le jeu de cadres, puis les jeux de
cadres parents, s’il existe des jeux de cadres imbriqu&eacute;s.
Appuyez sur Alt+Fl&egrave;che vers le bas pour activer un jeu de cadres enfant ou un seul cadre dans
un jeu de cadres.
Lorsqu’un cadre est actif, appuyez sur Alt+Fl&egrave;che gauche ou droite pour vous d&eacute;placer entre les
cadres.
Appuyez sur Alt+Fl&egrave;che vers le bas pour placer le point d’insertion dans la fen&ecirc;tre de document.
Rubriques connexes
• Navigation dans les panneaux, page 53
• Navigation dans l’inspecteur de propri&eacute;t&eacute;s, page 54
• Navigation dans les bo&icirc;tes de dialogue, page 54
Navigation dans les tableaux
Apr&egrave;s avoir s&eacute;lectionn&eacute; un tableau, vous pouvez utiliser le clavier pour le parcourir.
Remarque : L’utilisation de la touche de tabulation et des touches fl&eacute;ch&eacute;es n’est prise en charge que
sous Windows.
Utilisation des fonctions d’accessibilit&eacute; de Dreamweaver
55
Pour naviguer dans un tableau :
1 Dans la fen&ecirc;tre de document, proc&eacute;dez de l’une des mani&egrave;res suivantes pour s&eacute;lectionner le
tableau.
■ Si le point d’insertion est situ&eacute; sur la gauche de la cellule, appuyez sur Maj+Fl&egrave;che droite.
■ Si le point d’insertion est situ&eacute; sur la droite de la cellule, appuyez sur Maj+Fl&egrave;che gauche.
2 Appuyez sur la touche fl&eacute;ch&eacute;e bas pour placer le point d’insertion dans la premi&egrave;re cellule.
3 Utilisez les touches fl&eacute;ch&eacute;es ou appuyez sur la touche de tabulation pour vous d&eacute;placer vers
d’autres cellules.
Conseil : Si vous appuyez sur la touche de tabulation lorsque vous &ecirc;tre dans la cellule la plus &agrave;
droite, vous ajoutez une ligne au tableau.
4 Pour s&eacute;lectionner une cellule, appuyez sur Ctrl+A lorsque le point d’insertion est dans la cellule.
5 Pour sortir du tableau, utilisez la commande S&eacute;lectionner tout (Ctrl+A sous Windows ou
Option+A sous Macintosh) deux fois puis appuyez sur la touche fl&eacute;ch&eacute;e haut, gauche ou droite.
Rubriques connexes
•
•
•
•
Navigation dans les panneaux, page 53
Navigation dans l’inspecteur de propri&eacute;t&eacute;s, page 54
Navigation dans les bo&icirc;tes de dialogue, page 54
Navigation dans les cadres, page 55
Optimisation de l’espace de travail pour la conception de pages
accessibles
Lorsque vous cr&eacute;ez des pages accessibles, vous devez associer des informations aux objets pr&eacute;sents
sur les pages, telles que des &eacute;tiquettes et des descriptions, pour rendre votre contenu accessible &agrave;
tous les utilisateurs.
Pour ce faire, activez la bo&icirc;te de dialogue Accessibilit&eacute; de chaque objet, de fa&ccedil;on &agrave; ce que
Dreamweaver vous demande d’entrer les informations d’accessibilit&eacute; lorsque vous ins&eacute;rez des
objets. Vous pouvez activer une bo&icirc;te de dialogue pour n’importe quel objet de la cat&eacute;gorie
Accessibilit&eacute; dans les pr&eacute;f&eacute;rences.
Pour activer les bo&icirc;tes de dialogue Accessibilit&eacute; :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Accessibilit&eacute; dans la liste de gauche.
56
Chapitre 1 : Exploration de l’espace de travail
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences affiche les options d’accessibilit&eacute;.
3 S&eacute;lectionnez les objets pour lesquels vous voulez activer les bo&icirc;tes de dialogue Accessibilit&eacute;.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Remarque : Les attributs d’accessibilit&eacute; apparaissent automatiquement dans la bo&icirc;te de dialogue
Tableau lors de l’insertion d’un nouveau tableau.
4 Cliquez sur OK.
Pour chaque objet que vous s&eacute;lectionnez, une bo&icirc;te de dialogue Accessibilit&eacute; vous invitera &agrave; entrer
les balises et les attributs d’accessibilit&eacute; lorsque vous ins&eacute;rerez cet objet dans un document.
Rubriques connexes
•
•
•
•
•
•
Dreamweaver et l’accessibilit&eacute;, page 27
Insertion d’une image, page 319
Validation des donn&eacute;es de formulaire HTML, page 644
Cr&eacute;ation de cadres et de jeux de cadres, page 214
Insertion et modification d’objets multim&eacute;dia, page 369
Insertion d’un tableau et ajout de contenu, page 175
Utilisation de guides visuels dans Dreamweaver
Dreamweaver met &agrave; votre disposition plusieurs types de guides visuels pour vous aider &agrave; concevoir
vos documents et &agrave; savoir (approximativement) l’aspect qu’ils auront dans un navigateur. Vous
pouvez effectuer les op&eacute;rations suivantes :
• Adapter instantan&eacute;ment la taille de la fen&ecirc;tre de document &agrave; un format d’affichage donn&eacute;, afin
•
de contr&ocirc;ler la disposition des &eacute;l&eacute;ments sur la page (voir Redimensionnement de la fen&ecirc;tre de
document, page 42).
Utiliser des r&egrave;gles comme rep&egrave;re visuel pour le positionnement et le redimensionnement des
calques et des tableaux (voir Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages,
page 170).
Utilisation de guides visuels dans Dreamweaver
57
• Utiliser un trac&eacute; d’image en arri&egrave;re-plan de la page, de mani&egrave;re &agrave; pouvoir reproduire plus
•
ais&eacute;ment une mise en forme cr&eacute;&eacute;e dans une application graphique telle que Macromedia
Fireworks (voir Utilisation du trac&eacute; de l’image, page 171).
Utilisez la grille afin d’effectuer un positionnement et un redimensionnement pr&eacute;cis des
calques (voir Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages, page 170).
Si la fonction d’alignement automatique est activ&eacute;e, les calques s’alignent automatiquement sur
le croisillon de grille le plus proche lorsqu’ils sont d&eacute;plac&eacute;s ou redimensionn&eacute;s (d’autres objets,
par exemple les images et les paragraphes, ne sont pas aimant&eacute;s par la grille). L’alignement
fonctionne m&ecirc;me si la grille n’est pas visible.
Dreamweaver personnalisation, notions de base
Vous pouvez personnaliser Dreamweaver en fonction de vos besoins, &agrave; l’aide de certaines
techniques &eacute;l&eacute;mentaires sans avoir &agrave; comprendre le code complexe ni &agrave; modifier aucun fichier
texte. Par exemple, vous pouvez modifier la pr&eacute;sentation de l’espace de travail, afficher ou
masquer la page de d&eacute;marrage, d&eacute;finir des pr&eacute;f&eacute;rences, cr&eacute;er des raccourcis clavier et ajouter des
extensions &agrave; Dreamweaver.
Pour plus d’informations sur la personnalisation de la pr&eacute;sentation des panneaux dans l’espace de
travail, voir Utilisation des panneaux et des groupes de panneaux, page 49.
Remarque : Pour plus d’informations sur la personnalisation manuelle des fichiers de configuration,
voir &laquo; Customizing Dreamweaver &raquo; sur le centre de support Macromedia, &agrave; l’adresse
www.macromedia.com/go/customizing_dreamweaver_fr.
Cette section ne d&eacute;crit que les options de pr&eacute;f&eacute;rences les plus courantes. Pour plus d’informations
sur une option de pr&eacute;f&eacute;rence sp&eacute;cifique non d&eacute;crite dans ce document, voir la rubrique
correspondante dans l’aide Utilisation de Dreamweaver.
Rubriques connexes
• A propos de la personnalisation de Dreamweaver dans les syst&egrave;mes multiutilisateurs
• Extension de Dreamweaver
Choix de la pr&eacute;sentation de l’espace de travail (sous Windows uniquement)
Sous Windows, vous pouvez choisir entre les pr&eacute;sentations Cr&eacute;ation et Codeur de l’espace de
travail. La premi&egrave;re fois que vous d&eacute;marrez Dreamweaver, une bo&icirc;te de dialogue s’ouvre, vous
permettant de choisir la pr&eacute;sentation de l’espace de travail. Vous pouvez changer d’espace de
travail &agrave; tout moment.
Pour choisir la pr&eacute;sentation de l’espace de travail la premi&egrave;re fois que vous d&eacute;marrez
Dreamweaver :
1 S&eacute;lectionnez l’une des pr&eacute;sentations suivantes :
: il s’agit d’un espace de travail int&eacute;gr&eacute; utilisant l’interface MDI (Multiple Document
Interface), dans laquelle toutes les fen&ecirc;tres de document et tous les panneaux sont rassembl&eacute;s
dans une grande fen&ecirc;tre d’application, les groupes de panneaux &eacute;tant ancr&eacute;s sur la droite.
Codeur : il s’agit du m&ecirc;me espace de travail int&eacute;gr&eacute;, mais avec les groupes de panneaux ancr&eacute;s
sur la gauche, dans une pr&eacute;sentation similaire &agrave; celle utilis&eacute;e par Macromedia HomeSite et
Macromedia ColdFusion Studio. Les fen&ecirc;tres de document affichent par d&eacute;faut le mode Code.
Designer
58
Chapitre 1 : Exploration de l’espace de travail
Remarque : Ces deux espaces de travail autorisent l’ancrage des groupes de panneaux &agrave; droite
ou &agrave; gauche.
2 Cliquez sur OK.
Pour changer la pr&eacute;sentation de l’espace de travail apr&egrave;s le choix initial :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2
3
4
5
6
7
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
S&eacute;lectionnez la cat&eacute;gorie G&eacute;n&eacute;ral dans la liste de gauche, si cela n’est pas d&eacute;j&agrave; fait.
Cliquez sur le bouton Changer d’espace de travail.
S&eacute;lectionnez une pr&eacute;sentation et cliquez sur OK.
Un message d’avertissement vous indique que la nouvelle pr&eacute;sentation sera activ&eacute;e lors du
prochain red&eacute;marrage de Dreamweaver.
Cliquez sur OK pour fermer la fen&ecirc;tre du message d’avertissement.
Cliquez sur OK pour fermer la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Quittez et red&eacute;marrez Dreamweaver.
Rubriques connexes
• Pr&eacute;sentation de l’espace de travail, page 34
Affichage et masquage de la page de d&eacute;marrage
La page de d&eacute;marrage de Dreamweaver s’affiche lorsque vous d&eacute;marrez Dreamweaver ou lorsque
aucun document n’est ouvert. Vous pouvez masquer ou afficher cette page selon vos besoins.
Lorsque la page de d&eacute;marrage est masqu&eacute;e et qu’aucun document n’est ouvert, la fen&ecirc;tre de
document est vide.
Remarque : Vous pouvez faire en sorte que Dreamweaver ouvre le dernier document utilis&eacute; &agrave; chaque
d&eacute;marrage. Pour plus d’informations, voir D&eacute;finition des pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de Dreamweaver,
page 59.
Pour masquer la page de d&eacute;marrage :
• Activez la case Ne plus afficher cette fen&ecirc;tre dans la page de d&eacute;marrage.
Cette page ne s’affichera plus lors du d&eacute;marrage de Dreamweaver ni apr&egrave;s l’ouverture et la
fermeture d’un document.
Pour afficher la page de d&eacute;marrage :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences contenant la cat&eacute;gorie de pr&eacute;f&eacute;rences g&eacute;n&eacute;rales s’affiche.
2 Activez la case Afficher la page de d&eacute;marrage.
Cette page s’affichera lors du d&eacute;marrage de Dreamweaver ou apr&egrave;s l’ouverture et la fermeture d’un
document.
D&eacute;finition des pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de Dreamweaver
Les pr&eacute;f&eacute;rences g&eacute;n&eacute;rales commandent l’aspect g&eacute;n&eacute;ral de Dreamweaver.
Dreamweaver personnalisation, notions de base
59
Pour modifier les pr&eacute;f&eacute;rences g&eacute;n&eacute;rales :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences contenant la cat&eacute;gorie de pr&eacute;f&eacute;rences g&eacute;n&eacute;rales s’affiche.
2 D&eacute;finissez les options de pr&eacute;f&eacute;rence.
Pour plus d’informations, cliquez sur Aide.
3 Cliquez sur OK.
D&eacute;finition des pr&eacute;f&eacute;rences de police pour l’affichage Dreamweaver
Le codage d’un document d&eacute;termine la fa&ccedil;on dont ce document appara&icirc;t dans un navigateur. Les
pr&eacute;f&eacute;rences de polices de Dreamweaver vous permettent d’utiliser un texte affich&eacute; dans la police et
la taille de votre choix, sans affecter l’aspect qu’aura le document dans un navigateur.
Pour d&eacute;finir la police &agrave; utiliser dans Dreamweaver pour chaque type de codage :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Polices dans la liste de gauche.
3 S&eacute;lectionnez le type de codage d&eacute;sir&eacute; (par exemple, Occidental (Latin1) ou Japonais) dans la
liste Param&egrave;tres de la police, puis choisissez les polices &agrave; utiliser dans Dreamweaver pour ce
codage dans les menus de polices, sous la liste Param&egrave;tres de la police.
Pour plus d’informations, cliquez sur Aide.
Remarque : Les polices que vous choisissez n’ont aucune incidence sur l’aspect du document
dans le navigateur d’un visiteur.
4 Cliquez sur OK.
Rubriques connexes
• Description de l’encodage de document, page 268
Personnalisation des raccourcis clavier
Utilisez l’&eacute;diteur de raccourcis clavier pour cr&eacute;er vos propres touches de raccourci, y compris pour
les fragments de code. Vous pouvez &eacute;galement supprimer des raccourcis clavier, les modifier, et
s&eacute;lectionner un jeu pr&eacute;d&eacute;fini de raccourcis dans l’&eacute;diteur de raccourcis clavier.
Remarque : Des tableaux de raccourcis clavier relatifs &agrave; la configuration par d&eacute;faut de Dreamweaver
sont disponibles sur le site Web de Macromedia &agrave; l’adresse suivante : www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Pour personnaliser les raccourcis clavier :
1 S&eacute;lectionnez Edition &gt; Raccourcis clavier (Windows) ou Dreamweaver &gt; Raccourcis clavier
(Macintosh).
60
Chapitre 1 : Exploration de l’espace de travail
La bo&icirc;te de dialogue Raccourcis clavier s’affiche.
Bouton Dupliquer le jeu
Bouton Supprimer le jeu
Bouton Exporter le jeu au format HTML
Bouton Renommer le jeu
2 Ajout, suppression ou modification de raccourcis clavier.
Pour plus d’informations, cliquez sur Aide.
3 Cliquez sur OK.
Ajout d’extensions dans Dreamweaver
Les extensions sont de nouvelles fonctions, faciles &agrave; int&eacute;grer dans Dreamweaver. Vous pouvez
utiliser plusieurs types d’extensions ; il existe, par exemple, des extensions qui permettent de
reformater des tableaux, de vous connecter &agrave; des bases de donn&eacute;es d’arri&egrave;re-plan ou qui vous
aident &agrave; r&eacute;diger des scripts pour les navigateurs.
Remarque : Pour installer des extensions accessibles &agrave; tous les utilisateurs dans un syst&egrave;me
d’exploitation multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root
(Mac OS X). Pour plus d’informations sur les syst&egrave;mes multiutilisateurs, voir A propos de la
personnalisation de Dreamweaver dans les syst&egrave;mes multiutilisateurs, page 41.
Pour rechercher les extensions de Dreamweaver les plus r&eacute;centes, consultez le site Web de
Macromedia Exchange, &agrave; l’adresse suivante : www.macromedia.com/go/dreamweaver_exchange_fr/.
Sur ce site, vous pouvez vous connecter et t&eacute;l&eacute;charger des extensions (un grand nombre d’entre elles
sont gratuites), participer &agrave; des forums de discussion, visualiser les rapports et analyses des
utilisateurs et installer et exploiter Extension Manager. Vous devez installer Extension Manager avant
de pouvoir t&eacute;l&eacute;charger des extensions.
Le logiciel Extension Manager est une application ind&eacute;pendante permettant d’installer et de g&eacute;rer
les extensions dans les applications Macromedia. Vous pouvez lancer Extension Manager &agrave; partir
de Dreamweaver en choisissant Commandes &gt; G&eacute;rer les extensions.
Pour installer et g&eacute;rer les extensions :
1 Sur le site Web Macromedia Exchange, cliquez sur le lien de t&eacute;l&eacute;chargement de l’extension qui
vous int&eacute;resse.
Votre navigateur vous permet peut-&ecirc;tre d’ouvrir et d’installer l’extension directement depuis le
site ou de l’enregistrer sur votre disque.
■ Si vous l’ouvrez directement, Extension Manager traite automatiquement l’installation.
Dreamweaver personnalisation, notions de base
61
Si vous l’enregistrez sur votre disque, placez le fichier du logiciel d’extension (.mxp) dans le
dossier des extensions t&eacute;l&eacute;charg&eacute;es de l’application Dreamweaver sur votre ordinateur.
2 Double-cliquez sur le fichier du logiciel d’extension ou ouvrez Extension Manager et choisissez
Fichier &gt; Installer l’extension.
Le fichier sera install&eacute; dans Dreamweaver. Certaines extensions ne sont accessibles qu’apr&egrave;s
avoir red&eacute;marr&eacute; Dreamweaver ; un message vous invite &agrave; quitter et &agrave; red&eacute;marrer l’application.
■
Remarque : Utilisez Extension Manager pour supprimer des extensions ou pour consulter des
informations sur l’extension.
62
Chapitre 1 : Exploration de l’espace de travail
CHAPITRE 2
Configuration d’un site Dreamweaver
Un site Web est un ensemble de documents et d’actifs li&eacute;s les uns aux autres et partageant des
attributs, par exemple une rubrique connexe, une conception similaire ou un m&ecirc;me objectif.
Outil logiciel de cr&eacute;ation et de gestion de sites, Macromedia Dreamweaver MX 2004 permet de
r&eacute;aliser des sites Web complets, en sus de documents individuels.
Pour cr&eacute;er un site Web, la premi&egrave;re &eacute;tape consiste &agrave; le planifier. Pour obtenir des r&eacute;sultats
optimaux, concevez et planifiez la structure de votre site Web avant de cr&eacute;er les pages dont il sera
constitu&eacute;.
L’&eacute;tape suivante consiste &agrave; configurer Dreamweaver de fa&ccedil;on &agrave; pouvoir travailler sur la structure
basique du site. Si vous disposez d&eacute;j&agrave; d’un site install&eacute; sur un serveur Web, vous pouvez utiliser
Dreamweaver pour le modifier.
Conseil : Il peut &ecirc;tre judicieux de concevoir votre site d’apr&egrave;s un mod&egrave;le Dreamweaver. Voir A propos
des mod&egrave;les Dreamweaver, page 226 et Cr&eacute;ation d’un mod&egrave;le Dreamweaver, page 238.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
A propos des sites Dreamweaver, page 64
Configuration d’un nouveau site Dreamweaver, page 66
Utilisation des param&egrave;tres avanc&eacute;s pour configurer un site Dreamweaver, page 67
Modification des param&egrave;tres d’un site Dreamweaver, page 72
Modification de sites Web existants dans Dreamweaver, page 72
63
A propos des sites Dreamweaver
Un site Dreamweaver vous permet d’organiser tous les documents associ&eacute;s &agrave; un site Web.
L’organisation de vos fichiers dans un site vous permet d’exploiter Dreamweaver pour t&eacute;l&eacute;charger
votre site sur le serveur Web, suivre et g&eacute;rer automatiquement vos liens, puis g&eacute;rer et partager les
fichiers en &eacute;quipe. D&eacute;finissez un site pour tirer le meilleur parti des fonctions offertes par
Dreamweaver.
Un site Dreamweaver se compose de trois parties, ou dossiers, selon votre environnement de
travail et le type de site Web que vous d&eacute;veloppez :
repr&eacute;sente votre r&eacute;pertoire de travail. Dreamweaver d&eacute;signe ce dossier comme
votre &laquo; site local &raquo;. Il peut se trouver sur un ordinateur local ou sur un serveur de r&eacute;seau. Il s’agit
de l’endroit dans lequel sont stock&eacute;s les fichiers en cours de d&eacute;veloppement de votre site
Dreamweaver.
Le dossier local
Pour d&eacute;finir un site Dreamweaver, il vous suffit de cr&eacute;er un dossier local. Pour transf&eacute;rer des
fichiers vers un serveur Web ou pour d&eacute;velopper des applications Web, vous devez &eacute;galement
ajouter des informations concernant un site distant et un serveur d’&eacute;valuation.
est le r&eacute;pertoire dans lequel sont stock&eacute;s les fichiers, selon votre
environnement de d&eacute;veloppement, que vous r&eacute;servez aux t&acirc;ches suivantes : &eacute;valuation,
production, collaboration, etc. Dreamweaver d&eacute;signe ce dossier comme votre &laquo; site distant &raquo; dans
le panneau Fichiers. En r&egrave;gle g&eacute;n&eacute;rale, votre dossier distant se trouve sur l’ordinateur &agrave; partir
duquel vous ex&eacute;cutez votre serveur Web.
Le dossier distant
Ces deux dossiers (local et distant) vous permettent de transf&eacute;rer des fichiers entre votre disque
local et un serveur Web, ce qui facilite la gestion des fichiers sur vos sites Dreamweaver.
Le dossier Serveur d’&eacute;valuation est
l’emplacement dans lequel Dreamweaver traite les pages
dynamiques. Pour plus d’informations, voir D&eacute;finition du dossier de traitement des pages
dynamiques, page 474.
Rubriques connexes
• Configuration d’un nouveau site Dreamweaver, page 66
64
Chapitre 2 : Configuration d’un site Dreamweaver
Description de la structure du dossier local et du dossier distant
Lors de la d&eacute;finition de l’acc&egrave;s au dossier distant pour votre site Dreamweaver (voir Configuration
d’un dossier distant, page 70), vous devez d&eacute;terminer le r&eacute;pertoire h&ocirc;te du dossier distant. Le
r&eacute;pertoire h&ocirc;te &agrave; sp&eacute;cifier doit correspondre au dossier racine du dossier local. Le sch&eacute;ma cidessous repr&eacute;sente un exemple de dossier local &agrave; gauche et un exemple de dossier distant &agrave; droite.
non
Site local
(dossier
racine)
oui
Assets
HTML
non
R&eacute;pertoire de connexion
(Ne doit pas correspondre au
r&eacute;pertoire h&ocirc;te dans ce cas)
Public_html
(Doit correspondre au
r&eacute;pertoire h&ocirc;te)
Assets
(Ne doit pas correspondre
au r&eacute;pertoire h&ocirc;te)
HTML
Si la structure de votre dossier distant ne correspond pas &agrave; celle de votre dossier local, les fichiers
transf&eacute;r&eacute;s par Dreamweaver ne seront pas stock&eacute;s au bon endroit et risquent de ne pas &ecirc;tre visibles
pour les visiteurs du site. De plus, les chemins de vos images et de vos liens peuvent &ecirc;tre rompus.
Le dossier racine distant doit d&eacute;j&agrave; exister pour que Dreamweaver puisse s’y connecter. Si aucun
r&eacute;pertoire racine n’existe pour votre dossier distant, cr&eacute;ez-en un ou demandez &agrave; l’administrateur
du serveur de se charger de cette op&eacute;ration.
Notez que m&ecirc;me si vous avez l’intention de ne modifier qu’une partie du site distant, il est
fortement conseill&eacute; de dupliquer localement la structure compl&egrave;te de la branche concern&eacute;e du site
distant (du dossier racine du site distant jusqu’aux fichiers que vous d&eacute;sirez modifier).
A propos des sites Dreamweaver
65
Si, par exemple, le dossier racine de votre site distant, appel&eacute; public_html, contient deux sousdossiers, Projetc1 et Projetc2, et si vous ne d&eacute;sirez modifier que les fichiers HTML contenus dans
Project1, il n’est pas n&eacute;cessaire de t&eacute;l&eacute;charger les fichiers contenus dans Project2, mais vous devez
mapper votre dossier racine local sur public_html, et non pas sur Project1.
SITE LOCAL
SITE DISTANT
public-html
Project 1
Assets
HTML
Project 2
dossier racine local
(le mapper ˆ public_html, non ˆ
Project1 ou Project1/HTML)
Project 1
(doit figurer sur le site local,
correspond ˆ Project1 sur le
site distant)
HTML
(doit figurer sur le
site local, correspond ˆ
Project1/HTML sur
le site distant)
Assets
HTML
Rubriques connexes
• A propos des sites Dreamweaver, page 64
• Configuration d’un dossier distant, page 70
Configuration d’un nouveau site Dreamweaver
Une fois la structure de votre site planifi&eacute;e, ou si vous disposez d&eacute;j&agrave; d’un site, vous devez, si
possible, d&eacute;finir un site dans Dreamweaver avant de commencer son d&eacute;veloppement. Un site
Dreamweaver vous permet d’organiser tous les documents associ&eacute;s &agrave; un site Web. Pour plus
d’informations, voir A propos des sites Dreamweaver, page 64.
Remarque : Vous pouvez &eacute;galement modifier des fichiers sans d&eacute;finir de site Dreamweaver. Pour
plus d’informations, voir Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux, page 88.
Une fois que vous avez d&eacute;fini un site Dreamweaver, il est fortement conseill&eacute; de l’exporter, de
fa&ccedil;on &agrave; disposer d’une copie de sauvegarde en local. Pour plus d’informations, voir Importation et
exportation de sites, page 105.
Pour configurer un site Dreamweaver :
1 Choisissez Site &gt; G&eacute;rer les sites.
66
Chapitre 2 : Configuration d’un site Dreamweaver
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
Remarque : Si vous ne disposez pas de site Dreamweaver, la bo&icirc;te de dialogue D&eacute;finition de site
appara&icirc;t. Vous pouvez alors ignorer l’&eacute;tape suivante.
2 Cliquez sur le bouton Nouveau.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Cliquez sur l’onglet El&eacute;mentaire pour utiliser l’assistant de d&eacute;finition de site qui vous guide
tout au long de la proc&eacute;dure.
Remarque : Les utilisateurs qui d&eacute;couvrent Dreamweaver sont invit&eacute;s &agrave; suivre l’assistant de
d&eacute;finition d’un site ; les utilisateurs chevronn&eacute;s de Dreamweaver lui pr&eacute;f&eacute;reront sans doute les
param&egrave;tres avanc&eacute;s.
■
Cliquez sur l’onglet Avanc&eacute; pour utiliser les param&egrave;tres avanc&eacute;s qui vous permettent de
d&eacute;finir individuellement le dossier local, le dossier distant et enfin le dossier d’&eacute;valuation,
selon vos besoins.
Remarque : Pour commencer, vous avez le choix entre configurer enti&egrave;rement un site
Dreamweaver et vous limiter &agrave; la premi&egrave;re &eacute;tape, &agrave; savoir configurer votre dossier local.
4 Proc&eacute;dez &agrave; la configuration du site Dreamweaver :
■
■
Avec l’Assistant de d&eacute;finition de site, r&eacute;pondez aux questions qui apparaissent &agrave; l’&eacute;cran, puis
cliquez sur Suivant pour passer &agrave; l’&eacute;tape suivante du processus de cr&eacute;ation, ou cliquez sur
Retour pour revenir &agrave; l’&eacute;cran pr&eacute;c&eacute;dent.
Compl&eacute;tez les cat&eacute;gories de param&egrave;tres avanc&eacute;s Infos locales, Infos distantes et Serveur
d’&eacute;valuation, si n&eacute;cessaire (voir Utilisation des param&egrave;tres avanc&eacute;s pour configurer un site
Dreamweaver, page 67).
Conseil : Une fois que vous avez d&eacute;fini un site Dreamweaver, il est fortement conseill&eacute; de l’exporter,
de fa&ccedil;on &agrave; disposer d’une copie de sauvegarde en local. Pour plus d’informations, voir Importation et
exportation de sites, page 105.
Si vous configurez un site Dreamweaver pour une application Web, voir Chapitre 23,
Configuration d’une application Web, page 467.
Utilisation des param&egrave;tres avanc&eacute;s pour configurer un site
Dreamweaver
Vous pouvez utiliser les param&egrave;tres avanc&eacute;s de la bo&icirc;te de dialogue de d&eacute;finition d’un site pour
configurer un site Dreamweaver. Ces param&egrave;tres vous permettent de d&eacute;finir individuellement le
dossier local, le dossier distant et enfin le dossier d’&eacute;valuation (pour le traitement des pages
dynamiques), selon vos besoins. Il est conseill&eacute; aux utilisateurs chevronn&eacute;s de Dreamweaver
d’utiliser cette m&eacute;thode.
Remarque : Pour commencer votre travail rapidement, vous pouvez compl&eacute;ter uniquement la
premi&egrave;re &eacute;tape de configuration d’un site Dreamweaver, c’est-&agrave;-dire la configuration du dossier local.
Vous pourrez ajouter les informations distantes et d’&eacute;valuation ult&eacute;rieurement, Vous devez
imp&eacute;rativement d&eacute;finir un dossier local avant de vous attaquer &agrave; Dreamweaver.
Si vous n’&ecirc;tes pas familiaris&eacute; avec Dreamweaver, utilisez plut&ocirc;t l’assistant de d&eacute;finition de site que
les Param&egrave;tres avanc&eacute;s. Cet assistant vous guidera tout au long de la proc&eacute;dure de configuration
(voir Configuration d’un nouveau site Dreamweaver, page 66).
Utilisation des param&egrave;tres avanc&eacute;s pour configurer un site Dreamweaver
67
Si vous configurez un site Dreamweaver pour une application Web, ignorez cette section et
consultez celle-ci : Chapitre 23, Configuration d’une application Web, page 467.
Conseil : Une fois que vous avez d&eacute;fini un site Dreamweaver, il est fortement conseill&eacute; de l’exporter,
de fa&ccedil;on &agrave; disposer d’une copie de sauvegarde en local. Pour plus d’informations, voir Importation et
exportation de sites, page 105.
Rubriques connexes
• A propos des sites Dreamweaver, page 64
• D&eacute;finition du dossier de traitement des pages dynamiques, page 474
Configuration d’un dossier local
Le dossier local repr&eacute;sente le r&eacute;pertoire de travail de votre siteDreamweaver. Il peut se trouver sur
un ordinateur local ou sur un serveur de r&eacute;seau.
Pour configurer un dossier local :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
Remarque : Si vous ne disposez pas de site Dreamweaver, la bo&icirc;te de dialogue D&eacute;finition de site
appara&icirc;t. Vous pouvez alors ignorer l’&eacute;tape suivante.
2 Cliquez sur Nouveau.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
68
Chapitre 2 : Configuration d’un site Dreamweaver
3 Cliquez sur le bouton Avanc&eacute; si les param&egrave;tres avanc&eacute;s ne sont pas visibles.
L’onglet Avanc&eacute; de la bo&icirc;te de dialogue D&eacute;finition du site affiche le contenu de la cat&eacute;gorie
Infos locales.
4 Sp&eacute;cifiez les options relatives aux informations locales.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 (Facultatif) Si vous &ecirc;tes pr&ecirc;t &agrave; configurer votre serveur distant, ignorez l’&eacute;tape restante ;
s&eacute;lectionnez la cat&eacute;gorie Infos distantes &agrave; gauche, puis renseignez la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
6 Cliquez sur OK.
Dreamweaver cr&eacute;e le cache initial du site, et le nouveau site Dreamweaver appara&icirc;t dans le
panneau Fichiers.
Une fois le dossier local configur&eacute;, vous pouvez ajouter un dossier distant et un dossier
d’&eacute;valuation (voir Configuration d’un dossier distant, page 70 et D&eacute;finition du dossier de traitement
des pages dynamiques, page 474).
Rubriques connexes
• A propos des sites Dreamweaver, page 64
• Gestion des fichiers, page 85
Utilisation des param&egrave;tres avanc&eacute;s pour configurer un site Dreamweaver
69
Configuration d’un dossier distant
Une fois configur&eacute; le dossier local pour un site Dreamweaver (voir Configuration d’un dossier local,
page 68), il convient de configurer un dossier distant. Selon votre environnement de
d&eacute;veloppement, le dossier distant se trouve avec les fichiers destin&eacute;s aux &eacute;valuations, &agrave; la
collaboration, &agrave; la production, au d&eacute;ploiement, etc.
Remarque : Il n’est pas n&eacute;cessaire de sp&eacute;cifier un dossier distant si le dossier local est le m&ecirc;me que
celui cr&eacute;&eacute; pour les fichiers de votre site, sur le syst&egrave;me ex&eacute;cutant votre serveur Web. Ce sc&eacute;nario
suppose que le serveur Web s’ex&eacute;cute sur votre ordinateur local.
D&eacute;terminez le mode d’acc&egrave;s au dossier distant, puis prenez note des informations de connexion.
Cette section explique comment configurer un dossier distant et comment vous y connecter.
Pour configurer un dossier distant :
1 Choisissez Site &gt; G&eacute;rer les sites.
2
3
4
5
6
7
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
S&eacute;lectionnez un site Dreamweaver pr&eacute;existant.
Si vous n’avez pas encore d&eacute;fini de site Dreamweaver, cr&eacute;ez un dossier local avant de poursuivre
(voir Configuration d’un dossier local, page 68).
Cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
Cliquez sur le bouton Avanc&eacute; si les param&egrave;tres avanc&eacute;s ne sont pas visibles.
S&eacute;lectionnez la cat&eacute;gorie Infos distantes dans la liste de gauche.
S&eacute;lectionnez une option d’acc&egrave;s.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Cliquez sur OK.
Dreamweaver cr&eacute;e une connexion avec le dossier distant. Si vous d&eacute;veloppez un site
dynamique, vous pouvez d&eacute;finir un dossier pour le traitement des pages dynamiques (voir
D&eacute;finition du dossier de traitement des pages dynamiques, page 474).
Pour vous connecter &agrave; un dossier distant via un acc&egrave;s FTP :
• Dans le panneau Fichiers, cliquez sur le bouton Connecter &agrave; un h&ocirc;te distant de la barre
d’outils.
Si votre site utilise FTP avec un serveur SSH pour acc&eacute;der &agrave; votre dossier distant, une invite de
commande s’ex&eacute;cute pour vous permettre de vous connecter au serveur SSH, lors de votre
tentative de connexion au serveur distant. Cliquez sur OK dans la bo&icirc;te de dialogue
Dreamweaver apr&egrave;s votre connexion.
Remarque : Si vous utilisez un acc&egrave;s r&eacute;seau pour votre dossier distant, il n’est pas n&eacute;cessaire de
vous connecter &agrave; ce dossier ; la connexion est permanente. Cliquez sur le bouton Actualiser pour
afficher vos fichiers distants.
Pour vous d&eacute;connecter d’un dossier distant :
• Dans le panneau Fichiers, cliquez sur le bouton D&eacute;connecter dans la barre d’outils.
Rubriques connexes
• A propos des sites Dreamweaver, page 64
• Description de la structure du dossier local et du dossier distant, page 65
70
Chapitre 2 : Configuration d’un site Dreamweaver
• R&eacute;solution des probl&egrave;mes de configuration du dossier distant, page 71
R&eacute;solution des probl&egrave;mes de configuration du dossier distant
Il existe de tr&egrave;s nombreuses fa&ccedil;ons de configurer un serveur Web. Cette section vise &agrave; vous
expliquer certains probl&egrave;mes courants que vous pouvez rencontrer en configurant un dossier
distant (voir Configuration d’un dossier distant, page 70), et &agrave; vous aider &agrave; les r&eacute;soudre.
• L’impl&eacute;mentation 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 l’impl&eacute;mentation 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 rencontrez 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 &agrave; partir du r&eacute;pertoire
auquel vous vous connectez et du 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
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 une carte du 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.
Remarque : En g&eacute;n&eacute;ral, si vous avez un probl&egrave;me durant un transfert via FTP, examinez le journal
FTP en choisissant Fen&ecirc;tre &gt; R&eacute;sultats (Windows) ou Site &gt; Journal FTP (Macintosh), puis en
cliquant sur l’onglet Journal FTP.
Utilisation des param&egrave;tres avanc&eacute;s pour configurer un site Dreamweaver
71
Modification des param&egrave;tres d’un site Dreamweaver
Utilisez les param&egrave;tres avanc&eacute;s de la bo&icirc;te de dialogue D&eacute;finition du site pour modifier vos
sites Dreamweaver.
Pour modifier les param&egrave;tres d’un site Dreamweaver, proc&eacute;dez de l’une des mani&egrave;res
suivantes:
• S&eacute;lectionnez Site &gt; G&eacute;rer les sites, s&eacute;lectionnez un site dans la bo&icirc;te de dialogue G&eacute;rer les sites,
•
puis cliquez sur Modifier.
Dans le panneau Fichiers, s&eacute;lectionnez G&eacute;rer les sites dans le menu d&eacute;roulant dans lequel
appara&icirc;t le site, serveur ou lecteur courant ; s&eacute;lectionnez un site dans la bo&icirc;te de dialogue G&eacute;rer
les sites, puis cliquez sur Modifier.
Rubriques connexes
• Configuration d’un nouveau site Dreamweaver, page 66
Modification de sites Web existants dans Dreamweaver
Vous pouvez utiliser Dreamweaver pour modifier des sites existants, m&ecirc;me si vous n’avez pas
utilis&eacute; Dreamweaver pour cr&eacute;er le site original. Ces sites peuvent se trouver sur votre syst&egrave;me ou
sur un syst&egrave;me distant.
Modification d’un site Web local existant dans Dreamweaver
Vous pouvez utiliser Dreamweaver pour modifier un site existant sur votre disque dur local, m&ecirc;me
si vous n’avez pas utilis&eacute; Dreamweaver pour cr&eacute;er le site original.
Remarque : Cette section permet de configurer un site Dreamweaver pour modifier un site Web
local existant. Il est &eacute;galement possible de modifier le site Web existant sans cr&eacute;er de site
Dreamweaver. Pour plus d’informations, voir Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux,
page 88.
Pour modifier un site Web local existant :
1 Choisissez Site &gt; G&eacute;rer les sites.
2
3
4
5
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
Cliquez sur Nouveau.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
Cliquez sur le bouton Avanc&eacute; si les param&egrave;tres avanc&eacute;s ne sont pas visibles.
L’onglet Avanc&eacute; de la bo&icirc;te de dialogue D&eacute;finition du site affiche le contenu de la cat&eacute;gorie
Infos locales.
Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Cliquez sur OK.
Modification d’un site Web distant existant dans Dreamweaver
Vous pouvez utiliser Dreamweaver pour copier un site distant existant (ou une partie d’un site
distant) sur votre disque dur local, et le modifier localement, m&ecirc;me si vous n’avez pas utilis&eacute;
Dreamweaver pour cr&eacute;er le site original.
72
Chapitre 2 : Configuration d’un site Dreamweaver
Remarque : Cette section permet de configurer un site Dreamweaver pour modifier un site Web
distant existant. Il est &eacute;galement possible de modifier le site Web existant sans cr&eacute;er de site
Dreamweaver. Pour plus d’informations, voir Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux,
page 88.
Pour modifier un site distant existant :
1 Cr&eacute;ez un dossier local contenant le site existant, puis d&eacute;finissez-le en tant que dossier local du
site (voir Configuration d’un dossier local, page 68).
Remarque : Vous devez copier localement la structure compl&egrave;te de la branche concern&eacute;e du site
distant existant. Pour plus d’informations, voir Description de la structure du dossier local et du
dossier distant, page 65.
2 Configurez un dossier distant (voir Configuration d’un dossier distant, page 70), en utilisant les
informations de votre site existant.
Veillez &agrave; choisir le dossier racine correct pour le site distant.
3 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez sur le bouton Connecter &agrave; un h&ocirc;te distant
(pour un acc&egrave;s FTP) ou sur Actualiser (pour un acc&egrave;s r&eacute;seau) dans la barre d’outils pour afficher
le site distant.
4 Selon la taille de la partie du site distant que vous d&eacute;sirez modifier, proc&eacute;dez de l’une des
mani&egrave;res suivantes :
■ Si vous souhaitez travailler sur l’ensemble du site, s&eacute;lectionnez, dans le panneau Fichiers, le
dossier racine du site distant, puis cliquez sur Acqu&eacute;rir dans la barre d’outils pour
t&eacute;l&eacute;charger l’ensemble du site sur votre disque local.
■ Si vous d&eacute;sirez travailler sur un seul des fichiers ou dossiers du site, s&eacute;lectionnez ce fichier ou
dossier dans le volet Affichage distant du panneau Fichiers et cliquez sur Acqu&eacute;rir dans la
barre d’outils pour t&eacute;l&eacute;charger ce fichier sur votre disque dur local.
Dreamweaver duplique automatiquement toute la partie de la structure du site distant
n&eacute;cessaire pour replacer le fichier t&eacute;l&eacute;charg&eacute; au niveau ad&eacute;quat dans la hi&eacute;rarchie du site. Si
vous ne modifiez qu’une partie d’un site, il est en g&eacute;n&eacute;ral conseill&eacute; de charger &eacute;galement les
fichiers d&eacute;pendants.
5 Utilisez Dreamweaver pour tout travail sur votre site.
Rubriques connexes
• Modification d’un site Web local existant dans Dreamweaver, page 72
Modification de sites Web existants dans Dreamweaver
73
74
Chapitre 2 : Configuration d’un site Dreamweaver
CHAPITRE 3
Cr&eacute;ation et ouverture de documents
Macromedia Dreamweaver MX 2004 propose un environnement de travail flexible pour la
conception Web et le d&eacute;veloppement de documents. Vous pouvez bien entendu cr&eacute;er et ouvrir des
documents HTML, mais &eacute;galement divers types de documents texte, comme CFML, ASP,
JavaScript et CSS. Dreamweaver prend &eacute;galement en charge les fichiers de code source comme
Visual Basic, .NET, C# et Java.
Dreamweaver propose diverses options pour la cr&eacute;ation d’un nouveau document. Vous pouvez
utiliser les &eacute;l&eacute;ments suivants :
• Un nouveau document ou un mod&egrave;le vierge
• Un document bas&eacute; sur une des conceptions de pages pr&eacute;d&eacute;finies fournies avec Dreamweaver
• Un document bas&eacute; sur un de vos mod&egrave;les existants
D’autres options sont &eacute;galement disponibles. Par exemple, si vous avez l’habitude de travailler
avec un type particulier de document, vous pouvez le d&eacute;finir comme type par d&eacute;faut pour les
nouvelles pages.
Dans Dreamweaver, il est facile de d&eacute;finir des propri&eacute;t&eacute;s de document, telles que les balises meta,
le titre du document et la couleur de l’arri&egrave;re-plan, ainsi que d’autres propri&eacute;t&eacute;s de page, en mode
Cr&eacute;ation ou en mode Code.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
Cr&eacute;ation de nouveaux documents, page 76
Enregistrement d’un nouveau document, page 78
D&eacute;finition d’un nouveau type de document par d&eacute;faut, page 79
Ouverture de documents existants, page 79
Importation d’un fichier HTML Microsoft Word, page 80
75
Cr&eacute;ation de nouveaux documents
Dreamweaver propose de nombreux choix pour s&eacute;lectionner un nouveau document. Voici les
diverses m&eacute;thodes de cr&eacute;ation d’un nouveau document :
• Commencer avec un document vierge (voir Cr&eacute;ation d’un document vierge, page 76).
• Cr&eacute;er un document ou un mod&egrave;le vierge bas&eacute; sur un fichier de conception Dreamweaver (voir
•
Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception Dreamweaver, page 76).
Utiliser un mod&egrave;le avec un aspect pr&eacute;d&eacute;fini et indiquant les &eacute;l&eacute;ments que vous pouvez modifier
(voir Cr&eacute;ation d’un document bas&eacute; sur un mod&egrave;le existant, page 77).
Conseil : Si vous avez l’habitude de travailler avec un type de document sp&eacute;cifique, vous pouvez
d&eacute;finir un document par d&eacute;faut et baser le nouveau document automatiquement sur le document par
d&eacute;faut &agrave; l’ouverture. Pour plus d’informations, voir D&eacute;finition d’un nouveau type de document par
d&eacute;faut, page 79.
Cr&eacute;ation d’un document vierge
Vous pouvez s&eacute;lectionner le type de document vierge que vous souhaitez cr&eacute;er.
Pour cr&eacute;er un nouveau document vierge :
1 S&eacute;lectionnez Fichier &gt; Nouveau.
La bo&icirc;te de dialogue Nouveau document s’affiche. L’onglet G&eacute;n&eacute;ral est d&eacute;j&agrave; s&eacute;lectionn&eacute;.
2 S&eacute;lectionnez l’une des cat&eacute;gories suivantes dans la liste : Page de base, Page dynamique, Mod&egrave;le,
Autre ou Jeux de cadres. S&eacute;lectionnez ensuite le type de document que vous souhaitez cr&eacute;er dans
la liste de droite.
Par exemple, s&eacute;lectionnez Page de base pour cr&eacute;er un document HTML, ou s&eacute;lectionnez Page
dynamique pour cr&eacute;er un document ColdFusion ou ASP, et ainsi de suite.
Pour plus d’informations concernant les options de cette bo&icirc;te de dialogue, cliquez sur le
bouton Aide dans la bo&icirc;te de dialogue.
3 Cliquez sur le bouton Cr&eacute;er.
Le nouveau document s’ouvre dans la fen&ecirc;tre de document.
4 Enregistrez le document (voir Enregistrement d’un nouveau document, page 78).
Rubriques connexes
• Cr&eacute;ation d’un document bas&eacute; sur un mod&egrave;le existant, page 77
Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception Dreamweaver
Dreamweaver inclut plusieurs mises en formes de page professionnelles, ainsi que des fichiers
d’&eacute;l&eacute;ments de conception. Vous pouvez utiliser ces fichiers de conception comme point de d&eacute;part
pour la cr&eacute;ation de pages sur vos sites Web. Lorsque vous cr&eacute;ez un document bas&eacute; sur un fichier
de conception, Dreamweaver cr&eacute;e une copie du fichier.
Remarque : Si vous cr&eacute;ez un document bas&eacute; sur un jeu de cadres pr&eacute;d&eacute;fini, seule la structure du jeu
de cadres est copi&eacute;e, sans le contenu des cadres. En outre, vous devrez enregistrer s&eacute;par&eacute;ment
chacun des fichiers composant le cadre. Pour plus d’informations sur l’enregistrement de cadres, voir
Enregistrement des fichiers du cadre et du jeu de cadres, page 219.
76
Chapitre 3 : Cr&eacute;ation et ouverture de documents
Pour cr&eacute;er un nouveau document &agrave; partir d’un fichier de conception Dreamweaver :
1 S&eacute;lectionnez Fichier &gt; Nouveau.
2
3
4
5
La bo&icirc;te de dialogue Nouveau document s’affiche. L’onglet G&eacute;n&eacute;ral est d&eacute;j&agrave; s&eacute;lectionn&eacute;.
S&eacute;lectionnez l’une des cat&eacute;gories suivantes dans la liste : Feuilles de style en cascade (CSS), Mises
en forme bas&eacute;es sur un tableau, Conception de page ou Conception de page (Accessibilit&eacute;).
S&eacute;lectionnez ensuite un fichier de conception dans la liste de droite.
Il est possible de pr&eacute;visualiser un fichier de conception et de consulter une br&egrave;ve description
des &eacute;l&eacute;ments de conception d’un document.
Pour plus d’informations concernant les options de cette bo&icirc;te de dialogue, cliquez sur le
bouton Aide dans la bo&icirc;te de dialogue.
Cliquez sur le bouton Cr&eacute;er.
Le nouveau document s’ouvre dans la fen&ecirc;tre de document. Si vous avez s&eacute;lectionn&eacute; une feuille
de style CSS, le document CSS s’affiche dans la fen&ecirc;tre de document et la feuille de style CSS
s’ouvre en mode Code.
Enregistrez le document (voir Enregistrement d’un nouveau document, page 78).
Si le fichier contient des liens vers les fichiers d’actifs, la bo&icirc;te de dialogue Copier les fichiers
d&eacute;pendants s’affiche pour vous permettre d’enregistrer une copie des fichiers d&eacute;pendants.
Si la bo&icirc;te de dialogue Copier les fichiers d&eacute;pendants appara&icirc;t, d&eacute;finissez les options, puis cliquez
sur Copier pour copier les actifs dans le dossier s&eacute;lectionn&eacute;.
Vous pouvez choisir l’emplacement des fichiers d&eacute;pendants ou enregistrer les fichiers dans le
dossier par d&eacute;faut cr&eacute;&eacute; par Dreamweaver (ce dossier est cr&eacute;&eacute; en fonction du nom source du
fichier de conception).
Rubriques connexes
• Cr&eacute;ation d’un document vierge, page 76
Cr&eacute;ation d’un document bas&eacute; sur un mod&egrave;le existant
Vous pouvez s&eacute;lectionner, pr&eacute;visualiser et cr&eacute;er un nouveau document &agrave; partir d’un mod&egrave;le
existant. La bo&icirc;te de dialogue Nouveau document vous permet de s&eacute;lectionner un mod&egrave;le parmi
les sites d&eacute;finis dans Dreamweaver ou d’utiliser le panneau Actifs pour cr&eacute;er un nouveau
document sur la base d’un mod&egrave;le existant.
Pour plus d’informations sur la cr&eacute;ation de mod&egrave;les, voir Cr&eacute;ation d’un mod&egrave;le Dreamweaver,
page 238.
Conseil : Si votre site ne contient aucun mod&egrave;le, vous pouvez enregistrer comme mod&egrave;le un
document dans l’une des cat&eacute;gories de fichier de conception de la bo&icirc;te de dialogue Nouveau
document, puis cr&eacute;er des pages &agrave; partir de ce mod&egrave;le. Pour plus d’informations sur l’enregistrement
d’un fichier de conception comme mod&egrave;le, voir Cr&eacute;ation d’un document bas&eacute; sur un fichier de
conception Dreamweaver, page 76.
Pour cr&eacute;er un document bas&eacute; sur un mod&egrave;le :
1 Choisissez Fichier &gt; Nouveau.
La bo&icirc;te de dialogue Nouveau document s’ouvre.
2 Cliquez sur l’onglet Mod&egrave;les.
3 Dans la liste Mod&egrave;les pour, s&eacute;lectionnez le site Dreamweaver contenant le mod&egrave;le &agrave; utiliser, puis
s&eacute;lectionnez un mod&egrave;le dans la liste de droite.
Cr&eacute;ation de nouveaux documents
77
Pour plus d’informations concernant les options de cette bo&icirc;te de dialogue, cliquez sur le
bouton Aide dans la bo&icirc;te de dialogue.
4 Cliquez sur Cr&eacute;er.
Le nouveau document s’ouvre dans la fen&ecirc;tre de document.
5 Enregistrez le document (voir Enregistrement d’un nouveau document, page 78).
Pour cr&eacute;er un document &agrave; partir d’un mod&egrave;le &agrave; l’aide du panneau Actifs :
1 Ouvrez le panneau Actifs (Fen&ecirc;tre &gt; Actifs) s’il n’est pas d&eacute;j&agrave; ouvert.
2 Dans le panneau Actifs, cliquez sur l’ic&ocirc;ne Mod&egrave;les situ&eacute;e &agrave; gauche pour afficher la liste des
mod&egrave;les utilis&eacute;s dans votre site actuel.
Conseil : Si le mod&egrave;le que vous souhaitez utiliser vient d’&ecirc;tre cr&eacute;&eacute;, il peut &ecirc;tre n&eacute;cessaire de
cliquer sur le bouton Actualiser pour l’afficher.
3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh)
sur le mod&egrave;le &agrave; appliquer, puis s&eacute;lectionnez Nouveau &agrave; partir d’un mod&egrave;le.
Le document s’ouvre dans la fen&ecirc;tre de document.
Rubriques connexes
• Cr&eacute;ation d’un document vierge, page 76
• Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception Dreamweaver, page 76
Enregistrement d’un nouveau document
Il est n&eacute;cessaire d’enregistrer tout nouveau document que vous cr&eacute;ez.
Pour enregistrer un document :
1 Choisissez Fichier &gt; Enregistrer.
2 Dans la bo&icirc;te de dialogue qui s’affiche, recherchez le dossier o&ugrave; vous voulez enregistrer le fichier.
Conseil : Il est conseill&eacute; d’enregistrer votre fichier dans un site Dreamweaver. Pour plus
d’informations, voir Configuration d’un nouveau site Dreamweaver, page 66.
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
Evitez les espaces et les caract&egrave;res sp&eacute;ciaux pour les noms de fichiers et de dossiers ; les noms de
fichiers ne doivent pas commencer par un chiffre. En particulier, n’utilisez pas de caract&egrave;res
sp&eacute;ciaux (par exemple &eacute;, &ccedil; ou &yen;) ou de signes de ponctuation (deux points, barres obliques ou
points) dans le nom des fichiers que vous avez l’intention de placer sur un serveur distant. En
effet, la plupart des serveurs transforment ces caract&egrave;res lors du transfert, rendant ainsi
inop&eacute;rants les liens vers ces fichiers.
4 Cliquez sur Enregistrer.
78
Chapitre 3 : Cr&eacute;ation et ouverture de documents
D&eacute;finition d’un nouveau type de document par d&eacute;faut
Dans Dreamweaver, vous pouvez d&eacute;finir le type de document par d&eacute;faut utilis&eacute; par Dreamweaver
pour un site.
Par exemple, si la plupart des pages de votre site sont de type sp&eacute;cifique (tel que les documents
ColdFusion, HTML ou ASP), vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences de document pour cr&eacute;er
automatiquement les nouveaux documents de ce type.
Pour d&eacute;finir un nouveau type de document et de nouvelles pr&eacute;f&eacute;rences par d&eacute;faut :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
Conseil : Vous pouvez &eacute;galement cliquer sur le bouton Pr&eacute;f&eacute;rences dans la bo&icirc;te de dialogue
Nouveau document pour d&eacute;finir les nouvelles pr&eacute;f&eacute;rences li&eacute;es au document en cours de cr&eacute;ation
(voir Cr&eacute;ation d’un document vierge, page 76).
2 Cliquez sur la cat&eacute;gorie Nouveau document dans la liste de gauche.
3 D&eacute;finissez ou modifiez les pr&eacute;f&eacute;rences &agrave; votre convenance.
Pour plus d’informations sur les options de la bo&icirc;te de dialogue, cliquez sur le bouton d’aide.
4 Cliquez sur OK.
Dreamweaver enregistre vos pr&eacute;f&eacute;rences.
Ouverture de documents existants
Dans Dreamweaver, vous pouvez ouvrir une page Web existante ou un document texte, m&ecirc;me si
celui-ci n’a pas &eacute;t&eacute; cr&eacute;&eacute; avec Dreamweaver. Vous pouvez ouvrir le document et le modifier dans les
modes de travail Cr&eacute;ation ou Code de Dreamweaver.
Si le document que vous ouvrez est un fichier Microsoft Word enregistr&eacute; au format HTML, il est
conseill&eacute; d’utiliser la commande Nettoyage du HTML Word pour supprimer les balises superflues
ajout&eacute;es par Word au fichier HTML.
Conseil : Plut&ocirc;t que d’utiliser la proc&eacute;dure pr&eacute;sent&eacute;e dans cette section pour ouvrir un fichier
Microsoft Word enregistr&eacute; au format HTML, vous pouvez choisir d’importer le document dans
Dreamweaver (voir Importation d’un fichier HTML Microsoft Word, page 80) afin que ce dernier vous
invite automatiquement &agrave; nettoyer le fichier.
Vous pouvez &eacute;galement ouvrir des fichiers texte non HTML, comme des fichiers JavaScript,
XML, feuilles de style en cascade (CSS) ou des fichiers texte enregistr&eacute;s dans des traitements de
texte ou des &eacute;diteurs de texte.
Pour ouvrir un fichier existant :
1 Choisissez Fichier &gt; Ouvrir.
La bo&icirc;te de dialogue Ouvrir s’affiche.
Conseil : Vous pouvez &eacute;galement utiliser le panneau Fichiers pour ouvrir les fichiers. Pour plus
d’informations, voir Utilisation des fichiers dans le panneau Fichiers, page 95.
2 Recherchez et s&eacute;lectionnez le fichier &agrave; ouvrir.
Remarque : Si cette op&eacute;ration n’a pas encore &eacute;t&eacute; effectu&eacute;e, il est conseill&eacute; d’organiser les fichiers
que vous comptez ouvrir et modifier au sein d’un site Dreamweaver, au lieu de les ouvrir depuis un
autre emplacement. Pour plus d’informations sur la configuration d’un site Dreamweaver, voir
Configuration d’un nouveau site Dreamweaver, page 66.
Ouverture de documents existants
79
3 Cliquez sur Ouvrir.
Le document s’ouvre dans la fen&ecirc;tre de document.
Par d&eacute;faut, JavaScript, texte et les feuilles de style en cascade (CSS) s’ouvrent en mode Code.
Vous pouvez mettre &agrave; jour le document pendant que vous travaillez dans Dreamweaver, puis
enregistrer les modifications dans le fichier. Pour plus d’informations sur la d&eacute;finition des
param&egrave;tres d’un &eacute;diteur de texte externe afin de visualiser ces types de fichiers, voir Lancement
d’un &eacute;diteur externe pour des fichiers multim&eacute;dia, page 371.
4 Si vous ouvrez un document Microsoft Word, s&eacute;lectionnez Commandes &gt; Nettoyage du
HTML Word, d&eacute;s&eacute;lectionnez les options souhait&eacute;es dans la bo&icirc;te de dialogue, puis cliquez sur
OK.
Il peut se produire un certain d&eacute;lai pendant que Dreamweaver tente de d&eacute;terminer la version de
Word qui a &eacute;t&eacute; utilis&eacute;e pour enregistrer ce fichier. Si Dreamweaver n’y parvient pas, s&eacute;lectionnez
la version correcte dans le menu contextuel.
Pour plus d’informations sur les options de la bo&icirc;te de dialogue Nettoyage du HTML Word,
cliquez sur le bouton d’aide.
Dreamweaver applique les param&egrave;tres de nettoyage au nouveau document et un journal
contenant une liste des modifications apport&eacute;es s’affiche (sauf si cette option a &eacute;t&eacute;
d&eacute;s&eacute;lectionn&eacute;e dans la bo&icirc;te de dialogue).
Importation d’un fichier HTML Microsoft Word
Dans Dreamweaver, vous pouvez importer des documents enregistr&eacute;s par Microsoft Word en tant
que fichiers HTML, puis utiliser la commande Nettoyer HTML Word pour supprimer le code
HTML superflu g&eacute;n&eacute;r&eacute; par Word. La commande Nettoyer HTML Word est utilisable pour les
documents enregistr&eacute;s sous forme de fichiers HTML par Word 97 ou Word 2000.
Le code que Dreamweaver supprime est principalement utilis&eacute; par Word pour mettre en forme et
afficher les documents dans Word m&ecirc;me, et n’est pas n&eacute;cessaire dans un v&eacute;ritable fichier HTML.
Conservez une copie de votre fichier Word original (.doc) comme s&eacute;curit&eacute;, car il se peut que vous
ne puissiez plus ouvrir ce document HTML dans Word apr&egrave;s avoir appliqu&eacute; la fonction Nettoyer
HTML Word.
Pour nettoyer un fichier HTML ou XHTML non g&eacute;n&eacute;r&eacute; par Microsoft Word, voir Nettoyage du
code, page 447.
Pour importer et nettoyer un fichier HTML Microsoft Word :
1 Si cette op&eacute;ration n’a pas encore &eacute;t&eacute; effectu&eacute;e, enregistrez votre document au format HTML
dans Microsoft Word.
2 Dans Dreamweaver, choisissez Fichier &gt; Importer &gt; Document Word.
La bo&icirc;te de dialogue Ouvrir s’affiche.
3 Recherchez et s&eacute;lectionnez le fichier HTML Word &agrave; ouvrir.
Le document s’ouvre et la bo&icirc;te de dialogue Nettoyage du HTML Word s’affiche.
Il peut se produire un certain d&eacute;lai pendant que Dreamweaver tente de d&eacute;terminer la version
de Word qui a &eacute;t&eacute; utilis&eacute;e pour enregistrer ce fichier. Si Dreamweaver n’y parvient pas,
s&eacute;lectionnez la version correcte dans le menu contextuel.
4 D&eacute;s&eacute;lectionnez les options de votre choix dans la bo&icirc;te de dialogue.
Pour plus d’informations concernant les options de cette bo&icirc;te de dialogue, cliquez sur le
bouton d’aide.
80
Chapitre 3 : Cr&eacute;ation et ouverture de documents
5 Cliquez sur OK.
Dreamweaver applique les param&egrave;tres de nettoyage au nouveau document et un journal
reprenant les modifications apport&eacute;es s’affiche (sauf si cette option a &eacute;t&eacute; d&eacute;s&eacute;lectionn&eacute;e dans la
bo&icirc;te de dialogue).
Rubriques connexes
• Copie et collage de texte &agrave; partir de documents MS Office, page 295
Importation d’un fichier HTML Microsoft Word
81
82
Chapitre 3 : Cr&eacute;ation et ouverture de documents
Apprenez &agrave; g&eacute;rer des sites Macromedia Dreamweaver MX 2004, ainsi que des actifs propres &agrave; ces
sites.
Cette partie du manuel contient les chapitres suivants :
Chapitre 4, Gestion des fichiers, page 85
Chapitre 5, Gestion des actifs de site et des biblioth&egrave;ques, page 125
Chapitre 6, Gestion des sites Contribute avec Dreamweaver, page 143
PARTIE II
PARTIE II
Utilisation de sites Dreamweaver
CHAPITRE 4
Gestion des fichiers
Macromedia Dreamweaver MX 2004 vous aide &agrave; organiser et &agrave; g&eacute;rer vos fichiers.
Dreamweaver comprend une s&eacute;rie de fonctions permettant de g&eacute;rer et de transf&eacute;rer des fichiers
depuis et vers un serveur distant. Lorsque vous transf&eacute;rez des fichiers entre le site local et le site
distant, Dreamweaver conserve la m&ecirc;me structure de fichiers et de dossiers sur les deux sites.
Dreamweaver cr&eacute;e automatiquement les dossiers n&eacute;cessaires s’ils n’existent pas d&eacute;j&agrave; sur le site de
destination. Vous pouvez &eacute;galement synchroniser les fichiers entre le site local et le site distant.
Dans ce cas, Dreamweaver copie les fichiers requis dans les deux sens et supprime, le cas &eacute;ch&eacute;ant,
les fichiers inutiles.
Certaines fonctions de Dreamweaver facilitent le travail en &eacute;quipe sur tout projet de site Web.
Vous pouvez archiver et extraire les fichiers d’un serveur distant afin que les autres membres de
l’&eacute;quipe Web puissent savoir qui travaille sur un fichier. Vous pouvez ajouter des Design Notes &agrave;
vos fichiers afin de partager des informations avec d’autres membres de l’&eacute;quipe sur l’&eacute;tat, la
priorit&eacute; ou autre d’un fichier. Vous pouvez &eacute;galement utiliser la fonction de rapports sur le
d&eacute;roulement du travail afin de g&eacute;n&eacute;rer des rapports sur votre site et obtenir ainsi des informations
sur l’&eacute;tat des archivages et des extractions ou rechercher les Design Notes jointes aux fichiers.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
•
A propos de la gestion de site, page 86
Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux, page 88
Affichage de fichiers et de dossiers, page 91
Gestion de fichiers et de dossiers dans le panneau Fichiers, page 94
Utilisation d’une carte visuelle de votre site, page 98
Importation et exportation de sites, page 105
Suppression d’un site Dreamweaver de votre liste de sites, page 106
Archivage et extraction de fichiers, page 106
Acquisition et placement de fichiers depuis ou vers votre serveur, page 109
Synchronisation des fichiers entre le site local et le site distant, page 112
Voilage des dossiers et des fichiers du site, page 113
Stockage des informations sur les fichiers dans des Design Notes, page 116
Test de votre site, page 119
85
A propos de la gestion de site
Dreamweaver comprend une s&eacute;rie de fonctions permettant de g&eacute;rer un site et de transf&eacute;rer des
fichiers depuis et vers un serveur distant. Certaines fonctions de Dreamweaver, notamment le
syst&egrave;me d’archivage et d’extraction et les Design Notes, facilitent &eacute;galement le travail en &eacute;quipe
sur tout projet de site Web.
Syst&egrave;me d’archivage et d’extraction de fichiers
Si vous travaillez en &eacute;quipe, vous avez la possibilit&eacute; d’archiver et d’extraire des fichiers sur les
serveurs local et distant.
Remarque : Vous pouvez utiliser la fonctionnalit&eacute; d’acquisition et de placement de fichiers sur un
serveur d’&eacute;valuation, mais le syst&egrave;me d’archivage et d’extraction n’est pas disponible sur ce type de
serveur. Pour plus d’informations sur l’utilisation des fonctions Acqu&eacute;rir et Placer, voir Acquisition et
placement de fichiers depuis ou vers votre serveur, page 109.
L’extraction d’un fichier &eacute;quivaut &agrave; signaler aux autres utilisateurs que vous travaillez sur ce fichier
et qu’ils ne doivent pas le modifier. Lors de l’extraction d’un fichier, Dreamweaver affiche, dans le
panneau Fichiers, le nom de la personne ayant effectu&eacute; l’op&eacute;ration et ins&egrave;re une coche de couleur
rouge (si le fichier a &eacute;t&eacute; extrait par un autre membre de l’&eacute;quipe) ou verte (si vous &ecirc;tes la personne
&agrave; avoir extrait le fichier) en regard de son ic&ocirc;ne.
L’archivage d’un fichier &eacute;quivaut &agrave; le mettre &agrave; la disposition des autres membres de l’&eacute;quipe, qui
peuvent l’extraire et le modifier. Lorsque vous archivez un fichier apr&egrave;s l’avoir modifi&eacute;, la version
locale de ce fichier devient accessible en lecture seule et un cadenas appara&icirc;t en regard du fichier
dans le panneau Fichiers pour vous emp&ecirc;cher de le modifier.
Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si
vous transf&eacute;rez des fichiers &agrave; l’aide d’une application autre que Dreamweaver, vous risquez
d’&eacute;craser les fichiers extraits. Toutefois, dans les applications autres que Dreamweaver, le fichier
.lck est visible pr&egrave;s du fichier extrait dans la hi&eacute;rarchie de fichiers afin d’&eacute;viter ce type d’incident.
Rubriques connexes
• Configuration du syst&egrave;me d’archivage et d’extraction de fichiers, page 106
• Archivage et extraction de fichiers dans un dossier distant, page 107
Voilage de site
Le voilage vous permet de d&eacute;finir les dossiers et les types de fichier du site que vous souhaitez
exclure de certaines op&eacute;rations (acquisition et placement, par exemple). Vous pouvez voiler
certains dossiers, mais pas des fichiers individuels. Pour voiler des fichiers, s&eacute;lectionnez un type de
fichier : Dreamweaver voilera tous les fichiers de ce type. Comme Dreamweaver conserve en
m&eacute;moire tous les param&egrave;tres d&eacute;finis pour chaque site, vous n’avez pas &agrave; s&eacute;lectionner le type de
fichier voulu chaque fois que vous travaillez sur un site.
Ainsi, si vous travaillez sur un site de grande taille et ne souhaitez pas t&eacute;l&eacute;charger vos fichiers
multim&eacute;dias chaque jour, vous pouvez utiliser la fonction de voilage sur le site pour voiler votre
dossier multim&eacute;dia. Le syst&egrave;me exclut alors les fichiers de ce dossier lorsque vous effectuez des
op&eacute;rations sur le site.
Vous pouvez voiler des dossiers et des types de fichier sur le site distant ou local. Le voilage exclut
les dossiers et fichiers voil&eacute;s des op&eacute;rations suivantes :
86
Chapitre 4 : Gestion des fichiers
•
•
•
•
•
•
•
R&eacute;alisation d’op&eacute;rations de placement, d’acquisition, d’archivage et d’extraction
G&eacute;n&eacute;ration de rapports
Recherche des fichiers locaux et distants les plus r&eacute;cents
R&eacute;alisation d’op&eacute;rations portant sur le site entier, telles que la v&eacute;rification et la modification des
liens
Synchronisation
Utilisation du contenu du panneau Actifs
Mise &agrave; jour des mod&egrave;les et des biblioth&egrave;ques
Remarque : Dreamweaver exclut les mod&egrave;les et les &eacute;l&eacute;ments de biblioth&egrave;que voil&eacute;s lors des
op&eacute;rations d’acquisition et de placement de fichiers seulement. Dreamweaver n’exclut aucun de ces
&eacute;l&eacute;ments lors des op&eacute;rations par lots, car cela pourrait les d&eacute;synchroniser par rapport &agrave; leurs instances.
Rubriques connexes
• Voilage des dossiers et des fichiers du site, page 113
Design Notes
Les Design Notes sont des notes cr&eacute;&eacute;es pour un fichier donn&eacute;. Les Design Notes sont associ&eacute;es au
fichier qu’elles d&eacute;crivent, mais stock&eacute;es dans un autre fichier. Le panneau Fichiers vous permet de
voir les fichiers auxquels sont jointes des Design Notes, car une ic&ocirc;ne sp&eacute;cifique s’affiche dans la
colonne Notes.
Les Design Notes vous permettent de conserver des informations suppl&eacute;mentaires sur les
documents, telles que des commentaires sur l’&eacute;tat des fichiers ou le nom des fichiers source des
images. Par exemple, si vous copiez un document d’un site dans un autre, vous pouvez ajouter &agrave; ce
dernier des Design Notes contenant un commentaire expliquant que le document original se
trouve dans le dossier de l’autre site.
Les Design Notes permettent &eacute;galement de conserver des informations confidentielles, qu’il est
impossible de laisser dans un document pour des raisons de s&eacute;curit&eacute;, par exemple des notes sur la
fa&ccedil;on dont un devis a &eacute;t&eacute; calcul&eacute;, dont une configuration a &eacute;t&eacute; &eacute;labor&eacute;e ou encore sur les facteurs
de marketing qui ont influenc&eacute; une d&eacute;cision de production.
Si vous ouvrez un fichier dans Macromedia Fireworks ou Flash, puis l’exportez dans un autre
format, Fireworks ou Flash enregistre automatiquement le nom du fichier source d’origine dans
un fichier de Design Notes. Ainsi, si vous ouvrez le fichier myhouse.png dans Fireworks, puis
l’exportez au format GIF en lui attribuant le nom myhouse.gif, Fireworks cr&eacute;e un fichier Design
Notes du nom de myhouse.gif.mno. Ce fichier Design Notes contient le nom du fichier d’origine,
sous la forme d’une URL de fichier absolue. Supposons que les Design Notes du fichier
myhouse.gif contiennent la ligne suivante :
fw_source=&quot;file:///Mydisk/sites/assets/orig/myhouse.png&quot;
Supposons &agrave; pr&eacute;sent qu’une Design Note Flash similaire contienne la ligne suivante :
fl_source=&quot;file:///Mydisk/sites/assets/orig/myhouse.fla&quot;
Remarque : Pour pouvoir partager des Design Notes, les utilisateurs doivent d&eacute;finir le m&ecirc;me chemin
d’acc&egrave;s pour la racine du site (par exemple, sites/assets/orig).
A propos de la gestion de site
87
Lorsque vous importez l’image dans Dreamweaver, le fichier de Design Notes est
automatiquement copi&eacute; sur le site, en m&ecirc;me temps que l’image. Si vous s&eacute;lectionnez cette image
dans Dreamweaver et d&eacute;cidez de la modifier &agrave; l’aide de Fireworks (voir Lancement d’un &eacute;diteur
externe pour des fichiers multim&eacute;dia, page 371), ce dernier ouvre directement le fichier d’origine
pour vous permettre de le modifier.
Rubriques connexes
• Activation et d&eacute;sactivation des Design Notes pour un site, page 116
• Association de Design Notes &agrave; un fichier, page 117
Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux
Vous pouvez ouvrir, modifier et enregistrer les fichiers et dossiers de vos sites Dreamweaver,
comme les fichiers ou dossiers qui ne font pas partie d’un site Dreamweaver. Outre les sites
Dreamweaver, vous pouvez acc&eacute;der &agrave; un serveur, &agrave; un disque local ou &agrave; votre bureau.
Avant de pouvoir acc&eacute;der &agrave; un serveur distant, vous devez configurer Dreamweaver de fa&ccedil;on &agrave; ce
qu’il puisse fonctionner avec ce serveur (voir Configuration de Dreamweaver pour fonctionner sans
avoir &agrave; d&eacute;finir de site, page 90).
Remarque : La meilleure fa&ccedil;on de g&eacute;rer des fichiers est de cr&eacute;er un site Dreamweaver (voir
Configuration d’un nouveau site Dreamweaver, page 66).
Pour ouvrir un site Dreamweaver existant :
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site dans le menu contextuel
(dans lequel le site, le serveur ou le disque dur en cours d’utilisation s’affiche).
Pour plus d’informations sur la modification de l’affichage de votre site (par exemple, pour
afficher le dossier distant), voir Affichage de fichiers et de dossiers, page 91. Pour plus
d’informations sur l’ouverture de fichiers dans votre site, voir Utilisation des fichiers dans le
panneau Fichiers, page 95.
88
Chapitre 4 : Gestion des fichiers
Pour ouvrir un dossier sur un serveur FTP ou RDS distant :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un nom de serveur dans le menu
contextuel (dans lequel le site, le serveur ou le disque dur en cours d’utilisation s’affiche).
Remarque : Les noms des serveurs que vous avez configur&eacute;s pour fonctionner avec
Dreamweaver apparaissent. Si vous n’avez pas encore configur&eacute; de serveur, voir Configuration de
Dreamweaver pour fonctionner sans avoir &agrave; d&eacute;finir de site, page 90.
2 Naviguez vers ces fichiers et modifiez-les comme vous le faites habituellement.
Pour plus d’informations, voir Utilisation des fichiers dans le panneau Fichiers, page 95.
Pour acc&eacute;der &agrave; un disque local ou &agrave; votre bureau :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez Bureau, disque local ou disque
compact dans le menu contextuel (dans lequel le site, le serveur ou le disque dur s’affiche).
2 Recherchez le fichier de votre choix, puis effectuez l’une des op&eacute;rations suivantes :
■
■
■
■
■
Ouvrir des fichiers dans Dreamweaver ou dans une autre application
Renommer des fichiers
Copier des fichiers
Supprimer des fichiers
Faire glisser des fichiers
Lorsque vous faites glisser un fichier d’un site Dreamweaver &agrave; un autre site ou &agrave; un dossier
non li&eacute; &agrave; un site Dreamweaver, Dreamweaver copie le fichier, puis l’ajoute &agrave; l’emplacement
o&ugrave; vous le d&eacute;posez. Si vous faites glisser un fichier et le d&eacute;posez au sein du m&ecirc;me site
Dreamweaver, Dreamweaver d&eacute;place le fichier &agrave; l’emplacement o&ugrave; vous le d&eacute;posez. Lorsque
vous faites glisser un fichier qui n’est associ&eacute; &agrave; aucun site Dreamweaver vers un dossier qui
n’est pas non plus associ&eacute; &agrave; un site Dreamweaver, Dreamweaver d&eacute;place le fichier &agrave;
l’emplacement o&ugrave; vous le d&eacute;posez.
Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux
89
Remarque : Pour que Dreamweaver d&eacute;place un fichier au lieu de le copier, maintenez la
touche Maj (Windows) ou Commande (Macintosh) enfonc&eacute;e pendant que vous faites glisser et
d&eacute;posez le fichier. Pour copier un fichier que Dreamweaver d&eacute;place par d&eacute;faut, maintenez la
touche Ctrl (Windows) ou Option (Macintosh) enfonc&eacute;e pendant que vous faites glisser et
d&eacute;posez le fichier.
Rubriques connexes
• Gestion de fichiers et de dossiers dans le panneau Fichiers, page 94
Configuration de Dreamweaver pour fonctionner sans avoir &agrave; d&eacute;finir de site
Dreamweaver vous permet de vous connecter &agrave; un serveur FTP ou RDS de fa&ccedil;on &agrave; pouvoir
travailler sur vos documents sans avoir &agrave; cr&eacute;er de site Dreamweaver.
Remarque : Ce type de connexion ne permet toutefois pas d’effectuer des op&eacute;rations au niveau du
site Dreamweaver, par exemple v&eacute;rifier les liens. Pour configurer un site Dreamweaver, voir
Configuration d’un nouveau site Dreamweaver, page 66.
Pour configurer Dreamweaver de fa&ccedil;on &agrave; ce qu’il fonctionne avec un serveur dans la fen&ecirc;tre
Document :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 Cliquez sur Nouveau, puis s&eacute;lectionnez Serveurs FTP et RDS.
La bo&icirc;te de dialogue Configurer le serveur s’affiche.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Remarque : Vous ne devez compl&eacute;ter cette bo&icirc;te de dialogue qu’une seule fois par serveur auquel
vous souhaitez vous connecter.
4 Cliquez sur OK.
Le panneau Fichiers affiche le contenu du dossier de serveur distant auquel vous &ecirc;tes connect&eacute;
et le nom du serveur appara&icirc;t dans le menu contextuel situ&eacute; en haut de ce m&ecirc;me panneau.
Pour configurer Dreamweaver de fa&ccedil;on &agrave; ce qu’il fonctionne avec le panneau Fichiers :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez Bureau dans le menu contextuel
(menu dans lequel est affich&eacute; le site, le serveur ou le lecteur en cours d’utilisation).
90
Chapitre 4 : Gestion des fichiers
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh)
sur le nœud des Serveurs FTP et RDS dans le panneau Fichiers, puis s&eacute;lectionnez Ajouter un
serveur FTP ou Ajouter un serveur RDS.
La bo&icirc;te de dialogue Configurer le serveur s’affiche.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Remarque : Vous ne devez compl&eacute;ter cette bo&icirc;te de dialogue qu’une seule fois par serveur auquel
vous souhaitez vous connecter.
4 Cliquez sur OK.
Le panneau Fichiers affiche le contenu du dossier de serveur distant auquel vous &ecirc;tes connect&eacute;
et le nom du serveur appara&icirc;t dans le menu contextuel situ&eacute; en haut de ce m&ecirc;me panneau.
Remarque : Pour les dossiers plus volumineux, le panneau Fichiers peut mettre un petit moment &agrave;
afficher le dossier.
Rubriques connexes
• Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux, page 88
Affichage de fichiers et de dossiers
Le panneau Fichiers vous permet d’ouvrir des fichiers et des dossiers, qu’ils soient ou non associ&eacute;s
&agrave; un 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, et, pour les sites
Dreamweaver, vous pouvez d&eacute;velopper ou r&eacute;duire le panneau Fichiers.
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. Vous
pouvez &eacute;galement basculer l’affichage du contenu dans le panneau Fichiers d&eacute;velopp&eacute; (utilisez
l’option Toujours afficher, voir D&eacute;finition des pr&eacute;f&eacute;rences du panneau Fichiers, page 94).
Pour ouvrir ou fermer le panneau Fichiers :
• Choisissez Fen&ecirc;tre &gt; Fichiers.
Pour modifier la taille de la zone d’affichage dans le panneau Fichiers d&eacute;velopp&eacute; :
• Effectuez l’une des op&eacute;rations suivantes lorsque le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) est
d&eacute;velopp&eacute; :
■ Faites glisser la barre s&eacute;parant les volets gauche et droit pour modifier la taille de la zone
d’affichage du volet souhait&eacute;.
■ Utilisez les barres de d&eacute;filement situ&eacute;es dans la partie inf&eacute;rieure du panneau Fichiers pour
faire d&eacute;filer le contenu des volets.
Affichage de fichiers et de dossiers
91
■
Dans la carte du site, faites glisser la fl&egrave;che au-dessus d’un fichier pour modifier l’espace
entre les fichiers.
Pour d&eacute;velopper ou r&eacute;duire le panneau Fichiers (sites Dreamweaver uniquement) :
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez sur le bouton D&eacute;velopper/R&eacute;duire dans
la barre d’outils.
Remarque : Si vous cliquez sur le bouton D&eacute;velopper/R&eacute;duire pour d&eacute;velopper le panneau alors
qu’il est ancr&eacute;, celui-ci s’agrandit et vous emp&ecirc;che de travailler dans la fen&ecirc;tre de document. Pour
revenir &agrave; la fen&ecirc;tre de document, cliquez de nouveau sur le bouton D&eacute;velopper/R&eacute;duire afin de
r&eacute;duire le panneau. Si vous cliquez sur le bouton D&eacute;velopper/R&eacute;duire pour d&eacute;velopper le panneau
alors qu’il n’est pas ancr&eacute;, vous pouvez poursuivre votre travail dans la fen&ecirc;tre de document. Avant
de pouvoir ancrer de nouveau le panneau, vous devez le r&eacute;duire.
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 visuelle du site local.
Pour modifier l’affichage du site dans le panneau Fichiers, effectuez l’une des op&eacute;rations
suivantes (site Dreamweaver uniquement) :
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, s&eacute;lectionnez
Affichage local, Affichage distant, Serveur d’&eacute;valuation ou Affichage de la carte dans le menu
contextuel (o&ugrave; la vue actuelle s’affiche).
Remarque : L’option Affichage local appara&icirc;t par d&eacute;faut dans le menu d&eacute;roulant.
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme d&eacute;velopp&eacute;e, cliquez sur le
bouton Fichiers du site (pour le site distant), Serveur d’&eacute;valuation ou Carte du site dans la
barre d’outils.
Serveur d’&eacute;valuation
Plan du site
Fichiers du site
Si vous cliquez sur le bouton Carte du site, vous avez le choix entre afficher la carte du site avec
les fichiers du site et n’afficher que la carte du site. Pour plus d’informations, voir Affichage
d’une carte de site, page 98.
Remarque : Avant de pouvoir afficher un site distant ou un serveur d’&eacute;valuation, vous devez le
configurer (voir Configuration d’un dossier distant, page 70 ou D&eacute;finition du dossier de traitement des
pages dynamiques, page 474). Avant de pouvoir afficher une carte du site, vous devez avoir configur&eacute;
une page d’accueil (voir Affichage d’une carte de site, page 98).
Rubriques connexes
• Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux, page 88
92
Chapitre 4 : Gestion des fichiers
• Gestion de fichiers et de dossiers dans le panneau Fichiers, page 94
Personnalisation des d&eacute;tails de fichiers et de dossiers affich&eacute;s dans la forme
d&eacute;velopp&eacute;e du panneau Fichiers
Lorsqu’un site Dreamweaver est affich&eacute; dans le panneau Fichiers (en mode d&eacute;velopp&eacute;) (voir
Affichage de fichiers et de dossiers, page 91), Dreamweaver affiche dans des colonnes les
informations li&eacute;es aux fichiers et dossiers. Vous pouvez, par exemple, consulter le type du fichier
ou la date de sa derni&egrave;re modification.
Vous pouvez personnaliser les colonnes en proc&eacute;dant de l’une des fa&ccedil;ons suivantes (certaines
op&eacute;rations sont disponibles uniquement pour les colonnes que vous ajoutez, et non pas pour les
colonnes par d&eacute;faut) :
•
•
•
•
•
•
•
Retrier ou r&eacute;aligner les colonnes
Ajouter des colonnes (jusqu’&agrave; 10 colonnes maximum)
Masquer les colonnes (sauf la colonne des noms de fichiers)
D&eacute;finir les colonnes devant &ecirc;tre partag&eacute;es entre tous les utilisateurs connect&eacute;s &agrave; un site
Supprimer les colonnes (colonnes personnalis&eacute;es uniquement)
Renommer les colonnes (colonnes personnalis&eacute;es uniquement)
Associer &agrave; une Design Note (colonnes personnalis&eacute;es uniquement)
Pour effectuer un tri en fonction d’une colonne dans le panneau Fichiers :
• Pour trier les listes, cliquez sur l’en-t&ecirc;te de la colonne en fonction de laquelle vous souhaitez
effectuer le tri.
Conseil : Si vous cliquez plusieurs fois sur un m&ecirc;me en-t&ecirc;te de colonne, l’ordre dans lequel
Dreamweaver trie la colonne est invers&eacute; (ordre croissant ou d&eacute;croissant).
Pour ajouter, supprimer ou modifier des colonnes :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 S&eacute;lectionnez Colonnes en mode Fichier dans la liste de cat&eacute;gories, &agrave; gauche.
Affichage de fichiers et de dossiers
93
La bo&icirc;te de dialogue D&eacute;finition du site affiche les options Colonnes en mode Fichier.
4 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK.
Gestion de fichiers et de dossiers dans le panneau Fichiers
Vous pouvez organiser et g&eacute;rer les fichiers et dossiers de votre site, qu’ils soient int&eacute;gr&eacute;s &agrave; un site
Dreamweaver situ&eacute; sur un serveur auquel vous &ecirc;tes connect&eacute; ou qu’ils se trouvent sur un disque
local ou votre bureau.
Remarque : Dans les versions pr&eacute;c&eacute;dentes de Dreamweaver, le panneau Fichiers s’appelait le
panneau Site.
Rubriques connexes
• Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux, page 88
• Affichage de fichiers et de dossiers, page 91
D&eacute;finition des pr&eacute;f&eacute;rences du panneau Fichiers
S&eacute;lectionnez vos pr&eacute;f&eacute;rences pour le contr&ocirc;le des fonctions de transfert de fichiers dans le panneau
Fichiers.
94
Chapitre 4 : Gestion des fichiers
Pour modifier les pr&eacute;f&eacute;rences du panneau Fichiers :
1 S&eacute;lectionnez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Site dans la liste de gauche.
Les options des pr&eacute;f&eacute;rences Site s’affichent.
3 Modifiez les options de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Conseil : Vous pouvez d&eacute;finir si les types de fichiers transf&eacute;r&eacute;s doivent l’&ecirc;tre au format ASCII (texte)
ou binaire, et ce en personnalisant le fichier FTPExtensionMap.txt situ&eacute; dans le dossier
Dreamweaver/Configuration (sur Macintosh, il s’agit du fichier FTPExtensionMapMac.txt). Pour plus
d’informations, voir l’aide Extension de Dreamweaver.
Utilisation des fichiers dans le panneau Fichiers
Vous pouvez ouvrir ou renommer les fichiers ; ajouter, d&eacute;placer ou supprimer des fichiers ; ou
encore actualiser le panneau Fichiers apr&egrave;s avoir modifi&eacute; les fichiers.
Pour les sites Dreamweaver, vous pouvez &eacute;galement identifier les fichiers (sur le site local ou
distant) mis &agrave; jour depuis leur dernier transfert. Pour plus d’informations sur la synchronisation
du site local et du site distant, voir Synchronisation des fichiers entre le site local et le site distant,
page 112.
Pour ouvrir un fichier :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site, un serveur ou un lecteur
dans le menu contextuel (dans lequel le site, le serveur ou le lecteur s’affiche).
2 Recherchez et s&eacute;lectionnez le fichier &agrave; ouvrir.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Double-cliquez sur l’ic&ocirc;ne du fichier.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur l’ic&ocirc;ne du fichier, puis choisissez Ouvrir.
Le fichier s’ouvre dans la fen&ecirc;tre de document de Dreamweaver.
Gestion de fichiers et de dossiers dans le panneau Fichiers
95
Pour cr&eacute;er un nouveau fichier ou un nouveau dossier :
1 S&eacute;lectionnez un fichier ou un dossier dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
Dreamweaver cr&eacute;e le fichier ou le dossier dans le dossier s&eacute;lectionn&eacute; actuellement ou dans le
m&ecirc;me dossier que celui dans lequel le fichier s&eacute;lectionn&eacute; se trouve.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis s&eacute;lectionnez Nouveau fichier ou Nouveau dossier.
3 Saisissez le nom du nouveau fichier ou dossier.
4 Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Pour supprimer un fichier ou un dossier :
1 S&eacute;lectionnez le fichier &agrave; supprimer dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Supprimer.
Pour renommer un fichier ou un dossier :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez le fichier ou le dossier &agrave; renommer.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour activer le nom du fichier ou du dossier :
Cliquez sur le nom du fichier, attendez, puis cliquez de nouveau.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur l’ic&ocirc;ne du fichier, puis s&eacute;lectionnez Renommer.
3 Saisissez le nouveau nom &agrave; la place du nom existant.
4 Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
■
■
Pour d&eacute;placer un fichier ou un dossier :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez le fichier ou le dossier &agrave; d&eacute;placer.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Copiez le fichier ou le dossier, puis collez-le &agrave; son nouvel emplacement.
■ Faites glisser le fichier ou le dossier vers son nouvel emplacement.
3 Actualisez le panneau Fichiers pour afficher le fichier ou le dossier &agrave; son nouvel emplacement.
■
Pour actualiser le contenu du panneau Fichiers, effectuez l’une des op&eacute;rations suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur un des fichiers ou dossiers, puis cliquez sur Actualiser.
• (Sites Dreamweaver uniquement) Cliquez sur le bouton Actualiser dans la barre d’outils du
panneau Fichiers (cette option actualise les deux panneaux).
Remarque : Dreamweaver actualise automatiquement le panneau Fichiers lorsque vous effectuez
des modifications dans une autre application, puis revenez &agrave; Dreamweaver.
Rubriques connexes
• Affichage de fichiers et de dossiers, page 91
• Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux, page 88
• D&eacute;finition des pr&eacute;f&eacute;rences du panneau Fichiers, page 94
96
Chapitre 4 : Gestion des fichiers
Recherche de fichiers dans votre site Dreamweaver
La fonction de recherche de Dreamweaver permet de trouver facilement les fichiers s&eacute;lectionn&eacute;s,
ouverts, extraits ou modifi&eacute;s r&eacute;cemment dans votre site. Vous pouvez &eacute;galement rechercher les
fichiers les plus r&eacute;cents dans votre site local ou distant.
Pour localiser un fichier ouvert dans votre site :
1 Ouvrez le fichier dans la fen&ecirc;tre de document.
2 S&eacute;lectionnez Site &gt; Rep&eacute;rer dans le site.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Remarque : Si le fichier ouvert dans la fen&ecirc;tre de document n’est pas associ&eacute; au site actuel affich&eacute;
dans le panneau Fichiers, Dreamweaver tente de d&eacute;terminer &agrave; quel site Dreamweaver le fichier
appartient. S’il ne correspond qu’&agrave; un seul site local, Dreamweaver ouvre ce site dans le panneau
Fichiers, puis met le fichier en surbrillance.
Pour localiser et s&eacute;lectionner des fichiers extraits dans un site Dreamweaver :
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu
Options dans le coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Modifier &gt;
S&eacute;lectionner les fichiers extraits.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Pour rechercher un fichier s&eacute;lectionn&eacute; dans votre site local ou distant :
1 S&eacute;lectionnez le fichier depuis l’affichage local ou distant du panneau Fichiers (Fen&ecirc;tre &gt;
Fichiers).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis s&eacute;lectionnez Retrouver sur le site local ou Retrouver sur le site distant (selon
l’emplacement o&ugrave; le fichier a &eacute;t&eacute; s&eacute;lectionn&eacute;).
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Pour localiser et s&eacute;lectionner des fichiers qui sont plus r&eacute;cents sur le site local que sur le site
distant :
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu
Options dans le coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Modifier &gt;
S&eacute;lectionner Local plus r&eacute;cent.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Pour localiser et s&eacute;lectionner des fichiers qui sont plus r&eacute;cents sur le site distant que sur le
site local :
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu
Options dans le coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Modifier &gt;
S&eacute;lectionner Distant plus r&eacute;cent.
Dreamweaver s&eacute;lectionne les fichiers dans le panneau Fichiers.
Gestion de fichiers et de dossiers dans le panneau Fichiers
97
Pour rechercher les fichiers r&eacute;cemment modifi&eacute;s sur votre site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu
Options dans le coin sup&eacute;rieur droit du panneau Fichiers, puis s&eacute;lectionnez Modifier &gt;
S&eacute;lectionner Modifi&eacute;s r&eacute;cemment.
La bo&icirc;te de dialogue S&eacute;lectionner Modifi&eacute;s r&eacute;cemment s’affiche.
2 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK pour enregistrer vos param&egrave;tres.
Dreamweaver s&eacute;lectionne les fichiers modifi&eacute;s durant la p&eacute;riode s&eacute;lectionn&eacute;e dans le panneau
Fichiers.
Rubriques connexes
• Acc&egrave;s aux sites, &agrave; un serveur et aux disques locaux, page 88
• Affichage de fichiers et de dossiers, page 91
• Utilisation des fichiers dans le panneau Fichiers, page 95
Utilisation d’une carte visuelle de votre site
Vous pouvez afficher un fichier local pour un site Dreamweaver comme carte visuelle contenant
des ic&ocirc;nes li&eacute;es. Ceci est connu sous le nom de carte de site. Utilisez cette carte pour ajouter de
nouveaux fichiers &agrave; un site Dreamweaver ou pour ajouter, modifier ou supprimer des liens.
La carte du site pr&eacute;sente la structure du site sur deux niveaux en partant de la page d’accueil. Les
pages sont pr&eacute;sent&eacute;es sous la forme d’ic&ocirc;nes et les liens sont affich&eacute;s dans l’ordre o&ugrave; ils
apparaissent dans le code source.
La carte du site est id&eacute;ale pour agencer la structure d’un site. Vous pouvez d&eacute;finir rapidement la
structure d’ensemble du site, puis cr&eacute;er une image graphique de la carte du site.
Remarque : L’option de carte du site n’est disponible que pour les sites locaux. Pour cr&eacute;er la carte
d’un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis utilisez la
commande G&eacute;rer les sites pour d&eacute;finir le site en tant que site local (voir Configuration d’un dossier
local, page 68).
Rubriques connexes
• Lien vers des documents &agrave; l’aide de la carte graphique, page 336
Affichage d’une carte de site
Vous devez d&eacute;finir la page d’accueil du site avant de pouvoir en afficher la carte. Cette page
d’accueil peut correspondre &agrave; toute page du site (il n’est pas n&eacute;cessaire que ce soit la page
principale du site). Dans le cas pr&eacute;sent, la page d’accueil constitue simplement le point de d&eacute;part
de la carte.
Pour d&eacute;finir la page d’accueil d’un site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site dans le menu contextuel
(dans lequel le site, le serveur ou le disque dur s’affiche).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur le fichier de votre choix, puis cliquez sur D&eacute;finir comme page d’accueil pour
d&eacute;finir ce fichier comme page d’accueil.
98
Chapitre 4 : Gestion des fichiers
Remarque : Vous pouvez &eacute;galement d&eacute;finir la page d’accueil dans les options Mise en forme de la
carte du site dans la bo&icirc;te de dialogue D&eacute;finition du site (voir Modification de la mise en forme de la
carte du site, page 100).
Pour afficher une carte du site :
1 Pour afficher la carte du site, dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), effectuez l’une des
op&eacute;rations suivantes :
■ Dans le panneau Fichiers affich&eacute; sous sa forme r&eacute;duite, s&eacute;lectionnez Vue Carte du site dans le
menu contextuel Vue du site.
■
Dans le panneau Fichiers affich&eacute; sous sa forme d&eacute;velopp&eacute;e, cliquez sur le bouton Carte du
site dans la barre d’outils, puis s&eacute;lectionnez Carte seulement ou Carte et fichiers.
Choisissez Carte seulement afin d’afficher la carte du site sans la structure des fichiers locaux
ou Carte et fichiers afin d’afficher la carte du site avec cette structure.
Remarque : Si aucune page d’accueil n’a &eacute;t&eacute; d&eacute;finie ou si Dreamweaver ne trouve pas de page
intitul&eacute;e index.html ou index.htm dans le site actuel (qu’il utilise alors comme page d’accueil),
Dreamweaver vous invite &agrave; s&eacute;lectionner une page d’accueil.
Le panneau Fichiers affiche une carte du site pr&eacute;sentant la structure du site sur deux niveaux.
Remarque : Par d&eacute;faut, la carte du site n’affiche ni les fichiers masqu&eacute;s, ni les fichiers d&eacute;pendants.
Pour plus d’informations, voir Affichage et masquage des fichiers de la carte du site, page 102.
2 Cliquez sur les signes plus (+) et moins (-) en regard d’un nom de fichier pour afficher ou
masquer les pages li&eacute;es sous le second niveau.
3 Attention aux couleurs pr&eacute;sentes dans la carte du site :
■ Le texte affich&eacute; en rouge indique un lien bris&eacute;.
■ Le texte affich&eacute; en bleu et marqu&eacute; d’une ic&ocirc;ne en forme de globe indique un fichier sur un
autre site ou un lien sp&eacute;cial (comme un lien de courriel ou de script).
■ Une coche de couleur verte indique un fichier extrait par vous.
Utilisation d’une carte visuelle de votre site
99
■
■
Une coche de couleur rouge indique un fichier extrait par quelqu’un d’autre.
Un cadenas indique qu’un fichier est en lecture seule (Windows) ou verrouill&eacute; (Macintosh).
Rubriques connexes
• Utilisation des pages dans la carte du site, page 101
• Affichage et masquage des fichiers de la carte du site, page 102
• Affichage du site &agrave; partir d’une branche, page 104
Modification de la mise en forme de la carte du site
Utilisez les options de mise en forme de la carte du site pour personnaliser son aspect. Vous
pouvez changer de page d’accueil, indiquer le nombre de colonnes &agrave; afficher, pr&eacute;ciser si les
&eacute;tiquettes des ic&ocirc;nes doivent afficher le nom du fichier ou le titre de la page et indiquer si les
fichiers d&eacute;pendants et masqu&eacute;s doivent &ecirc;tre affich&eacute;s.
Pour modifier la mise en forme de la carte du site :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour ouvrir la bo&icirc;te de dialogue D&eacute;finition du site :
Choisissez Site &gt; G&eacute;rer les sites.
Dans le panneau Fichiers, s&eacute;lectionnez G&eacute;rer les sites dans le menu contextuel o&ugrave; est affich&eacute;
le site, serveur ou disque dur.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 Cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 S&eacute;lectionnez la cat&eacute;gorie Mise en forme de la carte du site dans la liste de gauche.
La bo&icirc;te de dialogue D&eacute;finition du site affiche les options Mise en forme de la carte du site.
■
■
4 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK pour fermer la bo&icirc;te de dialogue D&eacute;finition du site.
100
Chapitre 4 : Gestion des fichiers
6 Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites, le cas &eacute;ch&eacute;ant.
Rubriques connexes
• Affichage d’une carte de site, page 98
• Affichage et masquage des fichiers de la carte du site, page 102
• Enregistrement de la carte du site, page 104
Utilisation des pages dans la carte du site
Lorsque vous travaillez dans la carte d’un site, vous pouvez s&eacute;lectionner des pages, ouvrir une page
pour la modifier, ajouter des pages au site, cr&eacute;er des liens entre les fichiers et modifier le titre des
pages.
Pour s&eacute;lectionner plusieurs pages dans la carte du site, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Cliquez en maintenant la touche Maj enfonc&eacute;e pour s&eacute;lectionner une s&eacute;rie de pages cons&eacute;cutives.
• En partant d’une partie vierge de l’affichage, faites glisser le curseur autour d’un groupe de
•
fichiers pour les s&eacute;lectionner.
Cliquez en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonc&eacute;e pour
s&eacute;lectionner des pages non cons&eacute;cutives.
Pour ouvrir une page &agrave; modifier dans la carte du site, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Double-cliquez sur le fichier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur l’ic&ocirc;ne du fichier, puis choisissez Ouvrir.
Pour ajouter un fichier existant au site, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser le fichier depuis l’Explorateur Windows ou le Finder Macintosh vers un fichier de
•
la carte du site. La page est ajout&eacute;e au site et un lien est cr&eacute;&eacute; entre cette page et le fichier vers
lequel vous l’avez fait glisser.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur le fichier de la carte du site, s&eacute;lectionnez Lier au fichier existant, puis
recherchez le fichier.
Pour cr&eacute;er un fichier et ajouter un lien &agrave; la carte du site :
1 S&eacute;lectionnez un fichier dans la carte du site.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis s&eacute;lectionnez Lier au nouveau fichier.
La bo&icirc;te de dialogue Lier au nouveau fichier s’affiche.
3 Saisissez le nom, le titre et le texte du lien.
Utilisation d’une carte visuelle de votre site
101
4 Cliquez sur OK.
Dreamweaver enregistre le fichier dans le m&ecirc;me dossier que le fichier s&eacute;lectionn&eacute;. Si vous
ajoutez un fichier &agrave; une branche masqu&eacute;e, le fichier est &eacute;galement masqu&eacute; (voir Affichage et
masquage des fichiers de la carte du site, page 102).
Pour modifier le titre d’une page de la carte du site :
1 Assurez-vous que les titres des pages apparaissent en cliquant sur le menu Options situ&eacute; dans
l’angle sup&eacute;rieur droit du panneau Fichiers r&eacute;duit, puis en s&eacute;lectionnant Fichier &gt; Renommer
Affichage &gt; Afficher les titres des pages.
2 S&eacute;lectionnez un fichier dans la carte du site, puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
Cliquez sur le titre. Lorsque le titre devient modifiable, saisissez un nouveau titre.
Cliquez sur le menu Options situ&eacute; dans l’angle sup&eacute;rieur droit, puis s&eacute;lectionnez Fichier &gt;
Renommer.
3 Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh) apr&egrave;s avoir tap&eacute; le nouveau
nom.
■
■
Remarque : Lorsque vous travaillez dans le panneau Fichiers, Dreamweaver met automatiquement &agrave;
jour tous les liens vers les fichiers renomm&eacute;s.
Pour utiliser une nouvelle page d’accueil dans la carte du site, proc&eacute;dez de l’une des
mani&egrave;res suivantes :
• Dans l’affichage local du panneau Fichiers, s&eacute;lectionnez un fichier, cliquez avec le bouton droit
•
de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis choisissez
D&eacute;finir comme page d’accueil.
Dans le panneau Fichiers, s&eacute;lectionnez G&eacute;rer les sites dans le menu contextuel o&ugrave; est affich&eacute; le
site, serveur ou disque dur, puis cliquez sur Modifier. Choisissez Mise en forme de la carte du
site parmi les cat&eacute;gories r&eacute;pertori&eacute;es dans la bo&icirc;te de dialogue D&eacute;finition du site. Recherchez la
nouvelle page d’accueil, puis cliquez sur OK.
Pour mettre &agrave; jour l’affichage de la carte du site apr&egrave;s avoir effectu&eacute; des changements :
1 Cliquez n’importe o&ugrave; dans la carte du site afin de d&eacute;s&eacute;lectionner les fichiers.
2 Cliquez sur le bouton Actualiser dans la barre d’outils du panneau Fichiers.
Rubriques connexes
• Affichage d’une carte de site, page 98
• Modification de la mise en forme de la carte du site, page 100
• Enregistrement de la carte du site, page 104
Affichage et masquage des fichiers de la carte du site
Vous pouvez modifier la pr&eacute;sentation de la carte du site de fa&ccedil;on &agrave; afficher ou masquer les fichiers
masqu&eacute;s et d&eacute;pendants. Ceci est utile pour mettre l’accent sur des rubriques ou des &eacute;l&eacute;ments de
contenu importants et ne pas pr&eacute;senter des &eacute;l&eacute;ments de moindre int&eacute;r&ecirc;t.
102
Chapitre 4 : Gestion des fichiers
Pour masquer un fichier en utilisant la carte du site, vous devez d’abord le marquer comme &eacute;tant
masqu&eacute;. Lorsque vous masquez un fichier, ses liens sont &eacute;galement masqu&eacute;s. Lorsque vous
affichez un fichier masqu&eacute;, son ic&ocirc;ne et ses liens sont visibles dans l’affichage de la carte du site,
mais les noms s’affichent en italique.
Remarque : Par d&eacute;faut, les fichiers d&eacute;pendants sont d&eacute;j&agrave; masqu&eacute;s.
Pour marquer des fichiers comme &eacute;tant masqu&eacute;s dans la carte du site :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez un ou plusieurs fichiers.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis s&eacute;lectionnez Afficher/masquer le lien.
Pour d&eacute;sactiver le marquage de fichiers marqu&eacute;s comme &eacute;tant masqu&eacute;s dans la carte du
site :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez un ou plusieurs fichiers.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) dans la carte du site, puis s&eacute;lectionnez Afficher/masquer le lien.
Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le
menu Options dans le coin sup&eacute;rieur droit, puis s&eacute;lectionnez Affichage &gt; Afficher les
fichiers identifi&eacute;s comme masqu&eacute;s.
Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le
menu Options dans le coin sup&eacute;rieur droit, puis s&eacute;lectionnez Affichage &gt; Afficher/Masquer
le lien.
Pour afficher ou masquer des fichiers indiqu&eacute;s comme masqu&eacute;s dans la carte du site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu
Options dans le coin sup&eacute;rieur droit.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Affichage &gt; Afficher les fichiers identifi&eacute;s comme masqu&eacute;s.
Choisissez Affichage &gt; Mise en forme pour ouvrir la bo&icirc;te de dialogue D&eacute;finition du site,
puis s&eacute;lectionnez l’option Afficher les fichiers identifi&eacute;s comme masqu&eacute;s.
Pour afficher les fichiers d&eacute;pendants dans la carte du site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu
Options dans le coin sup&eacute;rieur droit.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Affichage &gt; Afficher les fichiers d&eacute;pendants.
Choisissez Affichage &gt; Mise en forme pour ouvrir la bo&icirc;te de dialogue D&eacute;finition du site,
puis s&eacute;lectionnez l’option Afficher les fichiers d&eacute;pendants.
Utilisation d’une carte visuelle de votre site
103
Rubriques connexes
•
•
•
•
Affichage d’une carte de site, page 98
Modification de la mise en forme de la carte du site, page 100
Utilisation des pages dans la carte du site, page 101
Enregistrement de la carte du site, page 104
Affichage du site &agrave; partir d’une branche
Vous pouvez afficher les d&eacute;tails d’une section sp&eacute;cifique d’un site en faisant d’une branche le
centre de la carte du site.
Pour afficher une branche diff&eacute;rente dans la carte du site :
1 S&eacute;lectionnez la page &agrave; afficher.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) dans la carte du site, puis s&eacute;lectionnez Afficher comme racine.
Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le
menu Options dans le coin sup&eacute;rieur droit, puis s&eacute;lectionnez Affichage &gt; Afficher comme
racine.
La carte du site est retrac&eacute;e dans la fen&ecirc;tre comme si la page sp&eacute;cifi&eacute;e &eacute;tait &agrave; la racine du site. La
zone Navigation dans le site, au-dessus de la carte du site, affiche le chemin de la page sp&eacute;cifi&eacute;e
par rapport &agrave; la page d’accueil. S&eacute;lectionnez un &eacute;l&eacute;ment du chemin pour afficher la carte du site &agrave;
partir de ce niveau en cliquant dessus.
Pour d&eacute;velopper et r&eacute;duire les branches dans la carte du site :
• Cliquez sur le signe plus (+) ou moins (–) en regard d’une branche.
Rubriques connexes
• Affichage d’une carte de site, page 98
• Modification de la mise en forme de la carte du site, page 100
• Utilisation des pages dans la carte du site, page 101
Enregistrement de la carte du site
Vous pouvez enregistrer la carte du site en tant qu’image, puis afficher cette image ou l’imprimer &agrave;
partir d’un &eacute;diteur d’image.
Pour cr&eacute;er un fichier d’image de la carte du site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) affich&eacute; sous sa forme r&eacute;duite, cliquez sur le menu
Options dans le coin sup&eacute;rieur droit, puis s&eacute;lectionnez Fichier &gt; Enregistrer la carte du site.
La bo&icirc;te de dialogue Enregistrer la carte du site s’affiche.
104
Chapitre 4 : Gestion des fichiers
2 Saisissez un nom de fichier dans la zone Nom de fichier.
3 Dans le menu local Types de fichiers, choisissez .bmp ou .png.
4 S&eacute;lectionnez l’emplacement o&ugrave; enregistrer le fichier, puis saisissez le nom de l’image.
5 Cliquez sur Enregistrer.
Rubriques connexes
• Affichage d’une carte de site, page 98
• Modification de la mise en forme de la carte du site, page 100
• Utilisation des pages dans la carte du site, page 101
Importation et exportation de sites
Vous pouvez exporter un site en tant que fichier XML depuis Dreamweaver, puis le r&eacute;importer
dans Dreamweaver. Cela vous permet de d&eacute;placer des sites entre plusieurs ordinateurs et versions
de produit ainsi que de les partager avec d’autres utilisateurs.
Conseil : Pensez &agrave; exporter r&eacute;guli&egrave;rement vos sites, de fa&ccedil;on &agrave; disposer d’une copie de sauvegarde
en cas de probl&egrave;me.
Pour exporter un site :
1 S&eacute;lectionnez Site &gt; G&eacute;rer les sites.
2
3
4
5
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
Cliquez sur le bouton Exporter.
La bo&icirc;te de dialogue Exporter le site s’affiche.
Recherchez et s&eacute;lectionnez l’emplacement o&ugrave; enregistrer le site.
Cliquez sur Enregistrer.
Dreamweaver enregistre le site en tant que fichier XML en lui attribuant l’extension STE et le
place &agrave; l’endroit indiqu&eacute;.
Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites.
Pour importer un site :
1 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 Importer.
La bo&icirc;te de dialogue Importer le site s’affiche.
3 Recherchez le site &agrave; importer (enregistr&eacute; en tant que fichier XML), puis s&eacute;lectionnez-le.
Remarque : Pour pouvoir importer un site, vous devez d’abord l’avoir export&eacute; depuis
Dreamweaver, qui l’enregistre en tant que fichier XML.
4 Cliquez sur Ouvrir.
Dreamweaver importe le site, dont le nom appara&icirc;t dans la bo&icirc;te de dialogue G&eacute;rer les sites.
5 Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites.
Importation et exportation de sites
105
Suppression d’un site Dreamweaver de votre liste de sites
Si vous ne souhaitez plus utiliser un site dans Dreamweaver, vous pouvez le supprimer de votre
liste de sites. Les fichiers du site ne sont pas effac&eacute;s par cette op&eacute;ration.
Remarque : Si vous supprimez un site de votre liste de sites, toutes les informations sur la
configuration de ce site sont d&eacute;finitivement effac&eacute;es.
Pour retirer un site de la liste des sites :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 S&eacute;lectionnez le nom du site.
3 Cliquez sur Supprimer.
Une bo&icirc;te de dialogue vous demande de confirmer la suppression.
4 Cliquez sur Oui pour supprimer le site de la liste ou sur Non pour conserver le site.
Le nom du site dispara&icirc;t de la liste lorsque vous cliquez sur Oui.
5 Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites.
Archivage et extraction de fichiers
Si vous travaillez en &eacute;quipe, le syst&egrave;me d’archivage et d’extraction vous permet de v&eacute;rifier les
fichiers entrants et sortants du serveur local et du serveur distant.
Si vous &ecirc;tes la seule personne &agrave; travailler sur le serveur distant, vous pouvez utiliser les commandes
Acqu&eacute;rir et Placer pour transf&eacute;rer des fichiers sans avoir &agrave; les archiver ou &agrave; les extraire (voir
Acquisition et placement de fichiers depuis ou vers votre serveur, page 109).
Rubriques connexes
• Syst&egrave;me d’archivage et d’extraction de fichiers, page 86
Configuration du syst&egrave;me d’archivage et d’extraction de fichiers
Pour utiliser le syst&egrave;me d’archivage et d’extraction, vous devez associer votre site local &agrave; un serveur
distant (voir Configuration d’un dossier distant, page 70).
Pour configurer le syst&egrave;me d’archivage et d’extraction de fichiers :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 S&eacute;lectionnez la cat&eacute;gorie Infos distantes dans la liste de gauche.
106
Chapitre 4 : Gestion des fichiers
La bo&icirc;te de dialogue D&eacute;finition du site affiche les options des Infos distantes. La section
Archiver/Extraire appara&icirc;t dans la partie inf&eacute;rieure de la bo&icirc;te de dialogue.
Remarque : Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n’avez pas
configur&eacute; le serveur distant (voir Configuration d’un dossier distant, page 70).
4 Compl&eacute;tez la section Archiver/Extraire.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK.
Rubriques connexes
• Syst&egrave;me d’archivage et d’extraction de fichiers, page 86
• Annulation de l’extraction d’un fichier, page 109
Archivage et extraction de fichiers dans un dossier distant
Une fois le syst&egrave;me d’archivage et d’extraction d&eacute;fini (voir Configuration du syst&egrave;me d’archivage et
d’extraction de fichiers, page 106), vous pouvez archiver et extraire des fichiers sur un serveur
distant via le panneau Fichiers ou la fen&ecirc;tre de document.
Pour extraire des fichiers &agrave; l’aide du panneau Fichiers :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers &agrave; extraire du serveur
distant.
Remarque : Vous pouvez s&eacute;lectionner des fichiers dans l’affichage du site local ou distant mais
pas dans la vue Serveur d’&eacute;valuation.
Une coche de couleur rouge indique qu’un autre membre de l’&eacute;quipe dispose du fichier extrait.
Un symbole repr&eacute;sentant un cadenas indique que le fichier est en lecture seule (Windows) ou
verrouill&eacute; (Macintosh).
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour extraire les fichiers :
■ Cliquez sur le bouton Extraire dans la barre d’outils du panneau Fichiers.
Archivage et extraction de fichiers
107
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh), puis choisissez Extraire dans le menu contextuel.
La bo&icirc;te de dialogue Fichiers d&eacute;pendants s’affiche.
3 Cliquez sur Oui si vous souhaitez t&eacute;l&eacute;charger les fichiers d&eacute;pendants associ&eacute;s aux fichiers
s&eacute;lectionn&eacute;s ou sur Non si vous ne voulez pas les t&eacute;l&eacute;charger.
■
Remarque : D’une mani&egrave;re g&eacute;n&eacute;rale, il est conseill&eacute; de t&eacute;l&eacute;charger les fichiers d&eacute;pendants
lorsque le fichier extrait est un nouveau fichier, mais c’est inutile si les versions les plus r&eacute;centes
des fichiers d&eacute;pendants sont d&eacute;j&agrave; pr&eacute;sentes sur le disque local.
Une coche de couleur verte appara&icirc;t en regard de l’ic&ocirc;ne du fichier local pour signaler que vous
l’avez extrait.
Pour archiver des fichiers &agrave; l’aide du panneau Fichiers :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers extraits ou s&eacute;lectionnez
de nouveaux fichiers.
Remarque : Vous pouvez s&eacute;lectionner des fichiers dans l’affichage du site local ou distant mais
pas dans la vue Serveur d’&eacute;valuation.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour archiver les fichiers :
Cliquez sur le bouton Archiver dans la barre d’outils du panneau Fichiers.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh), puis choisissez Archiver dans le menu contextuel.
La bo&icirc;te de dialogue Fichiers d&eacute;pendants s’affiche.
3 Cliquez sur Oui si vous souhaitez t&eacute;l&eacute;charger les fichiers d&eacute;pendants associ&eacute;s aux fichiers
s&eacute;lectionn&eacute;s ou sur Non si vous ne voulez pas les t&eacute;l&eacute;charger.
■
Remarque : Il est en g&eacute;n&eacute;ral conseill&eacute; de transf&eacute;rer les fichiers d&eacute;pendants lorsque vous archivez
un nouveau fichier, mais si les versions les plus r&eacute;centes des fichiers d&eacute;pendants figurent d&eacute;j&agrave; sur
le serveur distant, il n’est pas utile de les transf&eacute;rer &agrave; nouveau.
Un cadenas appara&icirc;t en regard de l’ic&ocirc;ne du fichier local pour indiquer que ce dernier n’est
d&eacute;sormais accessible qu’en lecture seule.
Pour archiver ou extraire un fichier ouvert &agrave; partir de la fen&ecirc;tre de document :
1 Assurez-vous que le fichier &agrave; archiver ou &agrave; extraire est actif dans la fen&ecirc;tre de document.
Remarque : Vous ne pouvez archiver qu’un seul fichier ouvert &agrave; la fois.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Site &gt; Archiver ou Site &gt; Extraire.
Dans la barre d’outils de la fen&ecirc;tre de document, cliquez sur l’ic&ocirc;ne Gestion des fichiers,
puis choisissez Archiver ou Extraire dans le menu d&eacute;roulant.
Remarque : Si le fichier actuel n’est pas associ&eacute; au site s&eacute;lectionn&eacute; dans le panneau Fichiers,
Dreamweaver tente de d&eacute;terminer &agrave; quel site d&eacute;fini localement le fichier actuel appartient. Si ce
fichier n’appartient qu’&agrave; un seul site local, Dreamweaver ouvre ce site, puis effectue l’op&eacute;ration
d’archivage ou d’extraction.
Si vous extrayez le fichier actif, la version ouverte du fichier est &eacute;cras&eacute;e par la nouvelle version
extraite. Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistr&eacute;
avant d’&ecirc;tre archiv&eacute;, selon les options d&eacute;finies dans les pr&eacute;f&eacute;rences (voir D&eacute;finition des pr&eacute;f&eacute;rences
du panneau Fichiers, page 94).
108
Chapitre 4 : Gestion des fichiers
Rubriques connexes
• Syst&egrave;me d’archivage et d’extraction de fichiers, page 86
• Configuration du syst&egrave;me d’archivage et d’extraction de fichiers, page 106
Annulation de l’extraction d’un fichier
Si vous extrayez un fichier, puis que vous d&eacute;cidez de ne pas le modifier (ou si vous d&eacute;cidez
d’&eacute;liminer les modifications que vous avez apport&eacute;es), vous pouvez annuler l’op&eacute;ration
d’extraction. Le fichier reprend alors son &eacute;tat d’origine.
Pour annuler l’extraction d’un fichier, proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
• Ouvrez le fichier dans la fen&ecirc;tre de document, puis s&eacute;lectionnez Site &gt; Annuler extraction.
• Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Annuler l’extraction.
La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez
apport&eacute;es sont perdues.
Rubriques connexes
• Syst&egrave;me d’archivage et d’extraction de fichiers, page 86
• Configuration du syst&egrave;me d’archivage et d’extraction de fichiers, page 106
• Archivage et extraction de fichiers dans un dossier distant, page 107
Acquisition et placement de fichiers depuis ou vers votre serveur
Si vous travaillez au sein d’un groupe, vous pouvez utiliser le syst&egrave;me d’extraction et d’archivage
pour transf&eacute;rer des fichiers entre le serveur distant et l’ordinateur local (voir Archivage et extraction
de fichiers, page 106). Si vous &ecirc;tes la seule personne &agrave; travailler sur le site distant, vous pouvez
utiliser les commandes Acqu&eacute;rir et Placer pour transf&eacute;rer des fichiers sans avoir &agrave; les archiver ou &agrave;
les extraire.
Acquisition de fichiers depuis un serveur distant
La commande Acqu&eacute;rir permet de copier les fichiers du site distant sur le site local. Vous pouvez
utiliser le panneau Fichiers ou la fen&ecirc;tre du document pour acqu&eacute;rir des fichiers.
Dreamweaver enregistre l’activit&eacute; de tous les transferts de fichiers en FTP. Si une erreur se produit
lors du transfert d’un fichier en FTP, le journal du site FTP peut vous aider &agrave; d&eacute;terminer le
probl&egrave;me.
Pour acqu&eacute;rir des fichiers depuis un serveur distant via le panneau Fichiers :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers que vous voulez
t&eacute;l&eacute;charger.
Les fichiers sont g&eacute;n&eacute;ralement s&eacute;lectionn&eacute;s dans l’affichage distant, mais il est &eacute;galement
possible de les s&eacute;lectionner dans l’affichage local. Si l’affichage distant est actif, Dreamweaver
copie les fichiers s&eacute;lectionn&eacute;s sur le site local ; si l’affichage local est actif, Dreamweaver copie la
version distante des fichiers locaux s&eacute;lectionn&eacute;s sur le site local.
Remarque : Pour n’acqu&eacute;rir que les fichiers dont la version distante est plus r&eacute;cente que la version
locale, utilisez la commande Synchroniser (voir Synchronisation des fichiers entre le site local et le
site distant, page 112).
Acquisition et placement de fichiers depuis ou vers votre serveur
109
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour acqu&eacute;rir un fichier:
Cliquez sur le bouton Acqu&eacute;rir dans la barre d’outils du panneau Fichiers.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le fichier dans le panneau Fichiers, puis s&eacute;lectionnez Acqu&eacute;rir
dans le menu contextuel.
La bo&icirc;te de dialogue Fichiers d&eacute;pendants s’affiche.
3 Pour t&eacute;l&eacute;charger &eacute;galement les fichiers d&eacute;pendants, cliquez sur Oui ; pour les &eacute;viter, cliquez sur
Non.
■
■
Remarque : Si vous disposez d&eacute;j&agrave; de copies locales des fichiers d&eacute;pendants, cliquez sur Non.
Dreamweaver t&eacute;l&eacute;charge les fichiers s&eacute;lectionn&eacute;s comme suit :
■ Si vous utilisez le syst&egrave;me d’archivage et d’extraction, l’obtention d’un fichier consistera &agrave;
transf&eacute;rer une copie locale accessible en lecture seule. Le fichier reste disponible sur le site
distant ou sur le serveur d’&eacute;valuation et peut &ecirc;tre extrait par d’autres membres de l’&eacute;quipe
(voir Archivage et extraction de fichiers, page 106).
■ Si vous n’utilisez pas le syst&egrave;me d’archivage et d’extraction, l’obtention d’un fichier
consistera &agrave; transf&eacute;rer une copie accessible en lecture et &eacute;criture.
Remarque : Si vous travaillez en &eacute;quipe et que d’autres personnes sont susceptibles de travailler
sur les m&ecirc;mes fichiers, ne d&eacute;sactivez pas l’option Activer l’archivage et l’extraction de fichier. De
plus, si d’autres personnes utilisent le syst&egrave;me d’extraction et d’archivage sur le site, vous devez
l’utiliser &eacute;galement.
Pour interrompre &agrave; tout moment le transfert de fichier, cliquez sur le bouton Annuler dans la
bo&icirc;te de dialogue d’&eacute;tat. Le transfert en cours peut ne pas s’interrompre imm&eacute;diatement.
Pour acqu&eacute;rir un fichier d’un serveur distant via la fen&ecirc;tre de document :
1 Assurez-vous que le document est actif dans la fen&ecirc;tre du document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour acqu&eacute;rir un fichier:
■
■
Choisissez Site &gt; Acqu&eacute;rir.
Cliquez sur l’ic&ocirc;ne Gestion des fichiers dans la barre d’outils de la fen&ecirc;tre du document,
puis s&eacute;lectionnez Acqu&eacute;rir dans le menu contextuel.
Remarque : Si le fichier actuel n’est pas associ&eacute; au site s&eacute;lectionn&eacute; dans le panneau Fichiers,
Dreamweaver tente de d&eacute;terminer &agrave; quel site d&eacute;fini localement le fichier actuel appartient. Si ce
fichier courant n’appartient qu’&agrave; un seul site local, Dreamweaver ouvre ce site, puis effectue
l’op&eacute;ration d’acquisition.
Pour afficher le journal FTP :
• Cliquez sur le menu Options dans le coin sup&eacute;rieur droit du panneau Fichiers, puis choisissez
Affichage &gt; Journal FTP du site.
Rubriques connexes
• Syst&egrave;me d’archivage et d’extraction de fichiers, page 86
110
Chapitre 4 : Gestion des fichiers
Placement de fichiers sur un site distant
Vous pouvez placer des fichiers du site local vers le site distant, dans la plupart des cas sans
changer l’&eacute;tat d’extraction du fichier.
Il existe deux types de circonstances dans lesquels il est pr&eacute;f&eacute;rable d’utiliser la commande Placer
plut&ocirc;t que la commande Archiver :
• Lorsque vous ne travaillez pas en &eacute;quipe et que vous n’utilisez pas le syst&egrave;me d’archivage et
d’extraction.
• Lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez
continuer &agrave; y apporter des modifications.
Remarque : Si vous placez un fichier qui n’existait pas encore sur le site distant et que vous utilisez
le syst&egrave;me d’extraction et d’archivage, le fichier est copi&eacute; sur le site distant, puis extrait pour vous
permettre de continuer &agrave; le modifier.
Vous pouvez utiliser le panneau Fichiers ou la fen&ecirc;tre du document pour placer des fichiers.
Dreamweaver enregistre l’activit&eacute; de tous les transferts de fichiers effectu&eacute;s via FTP. Si une erreur
se produit lors du transfert d’un fichier en FTP, le journal du site FTP peut vous aider &agrave;
d&eacute;terminer le probl&egrave;me.
Pour placer des fichiers sur un serveur distant ou un serveur d’&eacute;valuation &agrave; l’aide du
panneau Fichiers :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez les fichiers &agrave; t&eacute;l&eacute;charger.
Les fichiers sont g&eacute;n&eacute;ralement s&eacute;lectionn&eacute;s dans la vue Site local, mais il est &eacute;galement possible
de les s&eacute;lectionner dans la vue Site distant.
Remarque : Pour ne placer que les fichiers dont la version locale est plus r&eacute;cente que la version
distante, voir Synchronisation des fichiers entre le site local et le site distant, page 112.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour placer un fichier :
Cliquez sur le bouton Placer dans la barre d’outils du panneau Fichiers.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le fichier dans le panneau Fichiers, puis s&eacute;lectionnez Placer dans le
menu contextuel.
Si le fichier n’a pas encore &eacute;t&eacute; enregistr&eacute;, il se peut qu’une bo&icirc;te de dialogue s’ouvre (selon les
pr&eacute;f&eacute;rences d&eacute;finies dans la cat&eacute;gorie Site de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences) pour vous
permettre de l’enregistrer avant de le placer sur le serveur distant.
3 Si une bo&icirc;te de dialogue s’affiche, cliquez sur Oui pour enregistrer le fichier ou sur Non pour
placer la version pr&eacute;c&eacute;demment enregistr&eacute;e sur le serveur distant.
■
Remarque : Si vous n’enregistrez pas le fichier, aucune des modifications effectu&eacute;es depuis le
dernier enregistrement ne sera plac&eacute;e sur le serveur distant. Toutefois, le fichier reste ouvert, ce
qui vous permet encore d’enregistrer les changements apr&egrave;s avoir plac&eacute; le fichier sur le serveur.
La bo&icirc;te de dialogue Fichiers d&eacute;pendants s’affiche.
4 Pour transf&eacute;rer &eacute;galement les fichiers d&eacute;pendants, cliquez sur Oui ; pour les &eacute;viter, cliquez sur
Non.
Remarque : Si le site distant contient d&eacute;j&agrave; des copies des fichiers d&eacute;pendants, cliquez sur Non.
Pour interrompre le transfert de fichier, cliquez sur le bouton Annuler de la bo&icirc;te de dialogue
d’&eacute;tat. Le transfert en cours peut ne pas s’interrompre imm&eacute;diatement.
Acquisition et placement de fichiers depuis ou vers votre serveur
111
Pour placer des fichiers sur un serveur distant &agrave; l’aide de la fen&ecirc;tre du document :
1 Assurez-vous que le document est actif dans la fen&ecirc;tre du document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour placer un fichier :
■
■
Choisissez Site &gt; Placer.
Cliquez sur l’ic&ocirc;ne Gestion des fichiers dans la barre d’outils de la fen&ecirc;tre du document,
puis s&eacute;lectionnez Placer dans le menu contextuel.
Remarque : Si le fichier actuel n’est pas associ&eacute; au site s&eacute;lectionn&eacute; dans le panneau Fichiers,
Dreamweaver tente de d&eacute;terminer &agrave; quel site d&eacute;fini localement le fichier actuel appartient. Si ce
fichier courant n’appartient qu’&agrave; un seul site local, Dreamweaver ouvre ce site, puis effectue
l’op&eacute;ration de placement.
Pour afficher le journal FTP :
• Cliquez sur le menu Options dans le coin sup&eacute;rieur droit du panneau Fichiers, puis choisissez
Affichage &gt; Journal FTP du site.
Rubriques connexes
• Syst&egrave;me d’archivage et d’extraction de fichiers, page 86
• Acquisition de fichiers depuis un serveur distant, page 109
Synchronisation des fichiers entre le site local et le site distant
Apr&egrave;s avoir cr&eacute;&eacute; des fichiers sur votre site local et votre site distant, il vous est possible de
synchroniser les fichiers entre les deux sites.
Remarque : Si votre site distant est un serveur FTP (et non un serveur en r&eacute;seau), la synchronisation
de vos fichiers s’effectuera en FTP.
Avant de synchroniser les sites, vous pouvez v&eacute;rifier les fichiers &agrave; placer ou &agrave; acqu&eacute;rir sur le serveur
distant. Par ailleurs, une fois la synchronisation effectu&eacute;e, Dreamweaver vous indique les fichiers
qui ont &eacute;t&eacute; mis &agrave; jour.
Pour identifier les fichiers qui sont plus r&eacute;cents sur le site local ou le site distant sans
effectuer de synchronisation, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Fichiers, cliquez sur le menu Options dans le coin sup&eacute;rieur droit, puis
s&eacute;lectionnez Edition &gt; S&eacute;lectionner locaux plus r&eacute;cents ou Edition &gt; S&eacute;lectionner distants plus
r&eacute;cents, dans le menu contextuel.
• Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche
Ctrl enfonc&eacute;e (Macintosh), puis choisissez S&eacute;lectionner &gt; S&eacute;lectionner locaux plus r&eacute;cents ou
S&eacute;lectionner &gt; S&eacute;lectionner distants plus r&eacute;cents.
Pour synchroniser vos fichiers :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site dans le menu d&eacute;roulant o&ugrave;
s’affiche le site, le serveur ou le disque dur.
2 (facultatif) S&eacute;lectionnez des fichiers ou des dossiers sp&eacute;cifiques.
112
Chapitre 4 : Gestion des fichiers
Si vous souhaitez synchroniser l’ensemble du site, ignorez cette &eacute;tape.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Synchroniser dans le menu contextuel.
La bo&icirc;te de dialogue Synchroniser les fichiers s’affiche.
4 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Dreamweaver synchronise automatiquement les fichiers. Si les fichiers sont d&eacute;j&agrave; synchronis&eacute;s,
Dreamweaver vous informe qu’il n’est pas n&eacute;cessaire de proc&eacute;der &agrave; leur synchronisation.
Rubriques connexes
• Archivage et extraction de fichiers dans un dossier distant, page 107
• Acquisition de fichiers depuis un serveur distant, page 109
• Placement de fichiers sur un site distant, page 111
Voilage des dossiers et des fichiers du site
Le voilage vous permet de d&eacute;finir les dossiers et les types de fichiers du site que vous souhaitez
exclure de certaines op&eacute;rations (acquisition et placement, par exemple).
Rubriques connexes
• Voilage de site, page 86
Activation et d&eacute;sactivation du voilage sur un site
Le voilage est activ&eacute; par d&eacute;faut sur un site. Vous pouvez le d&eacute;sactiver d&eacute;finitivement ou
provisoirement afin d’effectuer une op&eacute;ration sur tous les fichiers, y compris les fichiers voil&eacute;s.
Lorsque vous d&eacute;sactivez le voilage sur un site, cela supprime tous les voiles des fichiers voil&eacute;s.
Lorsque vous le r&eacute;activez, tous les fichiers qui &eacute;taient pr&eacute;c&eacute;demment voil&eacute;s retrouvent cet &eacute;tat.
Remarque : Vous pouvez &eacute;galement utiliser l’option Supprimer tous les voiles pour supprimer le
voilage de tous les fichiers, mais cela ne d&eacute;sactive pas le voilage. De plus, cette option ne vous
permet pas de r&eacute;tablir automatiquement le voilage de tous les dossiers et fichiers qui &eacute;taient
auparavant voil&eacute;s ; il vous faut ensuite red&eacute;finir manuellement le voilage de chaque dossier et type de
fichier concern&eacute;.
Pour activer et d&eacute;sactiver le voilage sur un site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site dans le menu d&eacute;roulant o&ugrave;
s’affiche le site, le serveur ou le disque dur.
2 S&eacute;lectionnez un fichier ou un dossier.
3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
Voilage des dossiers et des fichiers du site
113
■
■
S&eacute;lectionnez Activer ou D&eacute;sactiver le voilage.
S&eacute;lectionnez Param&egrave;tres, puis choisissez Voilage dans la liste des cat&eacute;gories situ&eacute;e &agrave; gauche
de la bo&icirc;te de dialogue D&eacute;finition du site, onglet Avanc&eacute;. S&eacute;lectionnez ou d&eacute;s&eacute;lectionnez
Activer le voilage, puis cliquez sur OK.
Cela active ou d&eacute;sactive le voilage sur le site.
Rubriques connexes
• Voilage de site, page 86
• Voilage et suppression du voilage de certains types de fichier, page 114
• Suppression du voile de tous les dossiers et fichiers, page 116
Voilage et suppression du voilage pour les dossiers d’un site
Il est possible de voiler des dossiers sp&eacute;cifiques, mais pas tous les dossiers existants ou un site
entier. Il est toutefois possible de voiler plusieurs dossiers simultan&eacute;ment.
Pour voiler ou supprimer le voile de dossiers sp&eacute;cifiques au sein d’un site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel le voilage est
activ&eacute; dans le menu contextuel o&ugrave; est affich&eacute; le site, le serveur ou le disque dur.
2 S&eacute;lectionnez les dossiers de votre choix auxquels appliquer un voile ou le supprimer.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Voilage &gt; Voiler ou Voilage &gt; Supprimer le voile dans le menu
contextuel.
Une ligne rouge appara&icirc;t ou dispara&icirc;t sur l’ic&ocirc;ne du dossier pour indiquer que le dossier est voil&eacute;
ou d&eacute;voil&eacute;.
Remarque : Vous pouvez effectuer une op&eacute;ration sur un dossier voil&eacute; pr&eacute;cis en le s&eacute;lectionnant dans
le panneau Fichiers, puis en effectuant l’op&eacute;ration voulue. Toute op&eacute;ration effectu&eacute;e directement sur
un fichier ou un dossier annule le voilage.
Rubriques connexes
• Voilage de site, page 86
• Activation et d&eacute;sactivation du voilage sur un site, page 113
• Suppression du voile de tous les dossiers et fichiers, page 116
Voilage et suppression du voilage de certains types de fichier
Vous pouvez indiquer des types de fichier &agrave; voiler afin que Dreamweaver voile tous les fichiers se
terminant d’une certaine mani&egrave;re. Ainsi pouvez-vous, par exemple, voiler tous les fichiers se
terminant par l’extension .txt. Les types de fichier indiqu&eacute;s ne doivent pas n&eacute;cessairement
correspondre &agrave; des extensions de fichier ; il peut s’agir de n’importe quel &eacute;l&eacute;ment apparaissant &agrave; la
fin d’un nom de fichier.
Pour voiler certains types de fichier au sein d’un site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel le voilage est
activ&eacute; dans le menu contextuel o&ugrave; est affich&eacute; le site, le serveur ou le disque dur.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Param&egrave;tres.
114
Chapitre 4 : Gestion des fichiers
La bo&icirc;te de dialogue D&eacute;finition du site affiche les options de voilage.
3 Activez la case &agrave; cocher Voiler les fichiers se terminant avec.
4 Saisissez les types de fichier &agrave; voiler dans la zone de texte.
Vous pouvez saisir, par exemple, .jpg afin de voiler tous les fichiers dont le nom se termine par
.jpg dans le site.
Remarque : Pour saisir plusieurs types de fichier, s&eacute;parez chaque type par un espace ; n’utilisez ni
virgule ni point-virgule.
5 Cliquez sur OK.
Une ligne rouge appara&icirc;t sur les fichiers concern&eacute;s pour indiquer qu’ils sont voil&eacute;s.
Conseil : Certains logiciels cr&eacute;ent des fichiers de sauvegarde se terminant par un suffixe donn&eacute;, tel
que .bak. Vous pouvez voiler ces fichiers.
Remarque : Vous pouvez effectuer une op&eacute;ration sur un dossier voil&eacute; pr&eacute;cis en le s&eacute;lectionnant dans
le panneau Fichiers, puis en effectuant l’op&eacute;ration voulue. Toute op&eacute;ration effectu&eacute;e directement sur
un fichier ou un dossier annule le voilage.
Pour supprimer le voile de certains types de fichier au sein d’un site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel le voilage est
activ&eacute; dans le menu contextuel o&ugrave; est affich&eacute; le site, le serveur ou le disque dur.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis s&eacute;lectionnez Voilage &gt; Param&egrave;tres.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre et affiche l’onglet Avanc&eacute;.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ D&eacute;sactivez la case &agrave; cocher Voiler les fichiers se terminant avec pour supprimer le voile de
tous les types de fichier r&eacute;pertori&eacute;s dans la zone de texte.
■ Dans la zone de texte, supprimez certains types de fichier pour ne supprimer le voile que sur
ces types de fichier.
4 Cliquez sur OK.
Voilage des dossiers et des fichiers du site
115
Les lignes rouges disparaissent des fichiers concern&eacute;s pour indiquer qu’ils ne sont plus voil&eacute;s.
Rubriques connexes
• Voilage de site, page 86
• Activation et d&eacute;sactivation du voilage sur un site, page 113
• Voilage et suppression du voilage pour les dossiers d’un site, page 114
Suppression du voile de tous les dossiers et fichiers
Vous pouvez supprimer le voile de tous les dossiers et fichiers d’un site, et ce en une seule op&eacute;ration.
Comme il est impossible d’annuler ce type d’op&eacute;ration, vous ne pourrez pas r&eacute;tablir le voile de tous
les &eacute;l&eacute;ments qui &eacute;taient auparavant voil&eacute;s. Vous devrez revoiler les &eacute;l&eacute;ments un par un.
Conseil : Si vous souhaitez supprimer provisoirement le voile de tous les dossiers et fichiers et les
revoiler par la suite, d&eacute;sactivez le voilage sur le site (voir Activation et d&eacute;sactivation du voilage sur un
site, page 113).
Pour supprimer le voile de tous les dossiers et fichiers au sein d’un site :
1 Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), s&eacute;lectionnez un site pour lequel le voilage est
activ&eacute; dans le menu contextuel o&ugrave; est affich&eacute; le site, le serveur ou le disque dur.
2 S&eacute;lectionnez un fichier ou un dossier quelconque du site.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis s&eacute;lectionnez Voilage &gt; Supprimer tous les voiles.
Remarque : Cela d&eacute;sactive &eacute;galement la case &agrave; cocher Voiler les fichiers se terminant avec, sous
Site &gt; Voilage &gt; Param&egrave;tres.
Les lignes rouges sur les ic&ocirc;nes des dossiers et des fichiers disparaissent pour indiquer que tous les
fichiers et dossiers du site ne sont plus voil&eacute;s.
Rubriques connexes
•
•
•
•
Voilage de site, page 86
Activation et d&eacute;sactivation du voilage sur un site, page 113
Voilage et suppression du voilage pour les dossiers d’un site, page 114
Voilage et suppression du voilage de certains types de fichier, page 114
Stockage des informations sur les fichiers dans des Design Notes
Les Design Notes sont associ&eacute;es &agrave; un fichier mais sont conserv&eacute;es dans un fichier s&eacute;par&eacute;. Les
Design Notes vous permettent de conserver des informations suppl&eacute;mentaires sur les documents,
telles que des commentaires sur l’&eacute;tat des fichiers ou le nom des fichiers source des images.
Rubriques connexes
• Design Notes, page 87
Activation et d&eacute;sactivation des Design Notes pour un site
L’activation et la d&eacute;sactivation des Design Notes pour un site donn&eacute; s’effectuent depuis la
cat&eacute;gorie Design Notes de la bo&icirc;te de dialogue D&eacute;finition du site. Lorsque vous activez les Design
Notes, vous pouvez, si vous le souhaitez, d&eacute;cider de ne les utiliser que localement.
116
Chapitre 4 : Gestion des fichiers
Pour activer ou d&eacute;sactiver les Design Notes sur un site ou pour ne les utiliser que
localement :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 S&eacute;lectionnez la cat&eacute;gorie Design Notes dans la liste de gauche.
La bo&icirc;te de dialogue D&eacute;finition du site appara&icirc;t avec les options Design Notes.
4 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK.
Rubriques connexes
• Design Notes, page 87
• Utilisation des Design Notes, page 118
Association de Design Notes &agrave; un fichier
Vous pouvez cr&eacute;er un fichier de Design Notes pour chaque document ou mod&egrave;le de votre site.
Vous pouvez &eacute;galement cr&eacute;er des Design Notes pour des applets, des contr&ocirc;les ActiveX, des
images, du contenu Flash, des objets Shockwave ainsi que des champs d’image figurant dans vos
documents.
Remarque : Si vous ajoutez des Design Notes &agrave; un fichier mod&egrave;le, les documents que vous cr&eacute;ez &agrave;
partir du mod&egrave;le n’h&eacute;ritent pas des Design Notes.
Pour ajouter des Design Notes &agrave; un document :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Ouvrez le fichier dans la fen&ecirc;tre du document, puis s&eacute;lectionnez Fichier &gt; Design Notes.
Stockage des informations sur les fichiers dans des Design Notes
117
■
Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le fichier, puis s&eacute;lectionnez Design
Notes.
Remarque : Si le fichier se trouve sur un site distant, vous devez d’abord l’extraire ou l’acqu&eacute;rir,
puis le s&eacute;lectionner dans le dossier local (voir Archivage et extraction de fichiers dans un dossier
distant, page 107 ou Acquisition et placement de fichiers depuis ou vers votre serveur, page 109).
La bo&icirc;te de dialogue Design Notes s’ouvre.
2 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK pour enregistrer les notes.
Dreamweaver enregistre les notes au m&ecirc;me endroit que le fichier en cours, dans un dossier portant
le nom &laquo; _notes &raquo;. Le fichier porte le nom complet du document de base, suivi de l’extension .mno.
Par exemple, si le nom de fichier du document est &laquo; index.html &raquo;, le fichier de Design Notes
associ&eacute; s’appellera &laquo; index.html.mno &raquo;.
Rubriques connexes
• Design Notes, page 87
• Activation et d&eacute;sactivation des Design Notes pour un site, page 116
Utilisation des Design Notes
Apr&egrave;s avoir associ&eacute; des Design Notes &agrave; un fichier (voir Association de Design Notes &agrave; un fichier,
page 117), vous pouvez ouvrir le fichier Design Notes, modifier son &eacute;tat ou le supprimer.
Pour ouvrir une Design Notes associ&eacute;e &agrave; un fichier, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Ouvrez le fichier dans la fen&ecirc;tre du document, puis s&eacute;lectionnez Fichier &gt; Design Notes.
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le fichier, puis s&eacute;lectionnez Design Notes.
• Dans la colonne Notes du panneau Fichiers, double-cliquez sur l’ic&ocirc;ne jaune Design Notes.
Pour attribuer un &eacute;tat de Design Notes personnalis&eacute; :
1 Ouvrez les Design Notes du fichier ou de l’objet concern&eacute; (voir la proc&eacute;dure ci-dessus).
118
Chapitre 4 : Gestion des fichiers
2 Cliquez sur l’onglet Toutes les infos.
3 Cliquez sur le bouton Plus (+).
4 Dans le champ Nom, tapez Etat.
5 Dans le champ Valeur, tapez le nom du nouvel &eacute;tat.
S’il existe d&eacute;j&agrave; une valeur d’&eacute;tat, elle est remplac&eacute;e par la nouvelle.
6 Cliquez sur l’onglet Infos de base et remarquez que la nouvelle valeur de l’&eacute;tat appara&icirc;t dans le
menu d&eacute;roulant Etat.
Remarque : Vous ne pouvez avoir qu’une valeur personnalis&eacute;e &agrave; la fois dans le menu d’&eacute;tat. Si vous
suivez cette proc&eacute;dure une nouvelle fois, Dreamweaver remplace la valeur de l’&eacute;tat saisie la premi&egrave;re
fois par la nouvelle valeur.
Pour effacer de votre site des Design Notes non associ&eacute;es :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 S&eacute;lectionnez le site, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 S&eacute;lectionnez la cat&eacute;gorie Infos locales dans la liste de gauche.
4 Cliquez sur le bouton Nettoyer.
Dreamweaver vous invite alors &agrave; v&eacute;rifier que tous les fichiers de Design Notes qui ne sont plus
associ&eacute;s &agrave; un fichier dans le site doivent bien &ecirc;tre supprim&eacute;s.
Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associ&eacute; un fichier de Design
Notes, Dreamweaver supprime &eacute;galement le fichier de Design Notes. En g&eacute;n&eacute;ral, il ne peut
donc exister de fichiers de Design Notes orphelins que si vous supprimez ou renommez un
fichier &agrave; l’ext&eacute;rieur de Dreamweaver.
Remarque : Si vous d&eacute;sactivez l’option G&eacute;rer Design Notes avant de cliquer sur Nettoyer,
Dreamweaver supprime tous les fichiers de Design Notes du site.
Rubriques connexes
• Design Notes, page 87
• Activation et d&eacute;sactivation des Design Notes pour un site, page 116
Test de votre site
Dreamweaver comprend de nombreuses fonctions vous permettant de tester votre site dont, entre
autres, la pr&eacute;visualisation de pages et la v&eacute;rification de la compatibilit&eacute; avec les navigateurs. Vous
pouvez &eacute;galement ex&eacute;cuter divers rapports pour, par exemple, rep&eacute;rer les liens bris&eacute;s.
Instructions pour tester les sites
Avant de t&eacute;l&eacute;charger le site sur un serveur, et de le d&eacute;clarer pr&ecirc;t &agrave; &ecirc;tre diffus&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).
Test de votre site
119
Vous devez vous assurer que vos pages ont l’apparence et le fonctionnement d&eacute;sir&eacute;s dans les
navigateurs cibl&eacute;s, qu’il n’y a pas de liens rompus et que les pages ne sont pas trop longues &agrave;
t&eacute;l&eacute;charger. Vous pouvez &eacute;galement tester l’ensemble de votre site et y r&eacute;gler les probl&egrave;mes
&eacute;ventuels en effectuant un rapport de site.
Les conseils suivants vous aideront &agrave; garantir aux visiteurs de votre site une exp&eacute;rience positive :
• Assurez-vous que les pages fonctionnent comme pr&eacute;vu dans les navigateurs vis&eacute;s et qu’elles
•
•
•
•
•
•
•
120
&laquo; &eacute;chouent &eacute;l&eacute;gamment &raquo; dans les autres.
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 (voir V&eacute;rification de la
compatibilit&eacute; du navigateur, page 448). Pour les pages qui ne s’affichent pas dans des
navigateurs anciens, songez &agrave; utiliser le comportement V&eacute;rifier le navigateur pour rediriger
automatiquement les visiteurs vers une autre page (voir V&eacute;rifier le navigateur, page 390).
Affichez vos pages dans le plus grand nombre de navigateurs et sur le plus grand nombre de
plates-formes possible.
Cela vous donnera la possibilit&eacute; de constater les diff&eacute;rences de pr&eacute;sentation, de couleur, de
taille de police et de format de fen&ecirc;tre par d&eacute;faut, autant d’&eacute;l&eacute;ments qu’il est impossible de
pr&eacute;voir lors de la v&eacute;rification dans le navigateur cible (voir Aper&ccedil;u et test de page dans les
navigateurs, page 283).
V&eacute;rifiez que le site ne contient pas de liens bris&eacute;s (r&eacute;parez-les s’il en contient).
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. Vous pouvez ex&eacute;cuter un rapport
de v&eacute;rification des liens pour les tester (voir Recherche de liens bris&eacute;s, externes et orphelins,
page 350 et Correction des liens bris&eacute;s, page 351).
Contr&ocirc;lez la taille de vos pages et leur dur&eacute;e de t&eacute;l&eacute;chargement (voir V&eacute;rification des pr&eacute;f&eacute;rences
de dur&eacute;e et de la taille de t&eacute;l&eacute;chargement, page 284).
Pour les pages constitu&eacute;es d’un grand tableau, n’oubliez pas que, sous certains navigateurs, les
visiteurs ne voient rien tant que le tableau n’est pas enti&egrave;rement charg&eacute;. Envisagez de
fragmenter les grands tableaux ; si c’est impossible, envisagez de placer du contenu, 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
chargement du tableau
Effectuez quelques rapports sur le site pour tester et d&eacute;panner le site entier.
Vous pouvez rechercher sur le site entier d’&eacute;ventuels probl&egrave;mes, tels que des documents sans
nom, des balises vides ou des balises imbriqu&eacute;es redondantes (voir Test de votre site, page 119).
Validez votre code pour d&eacute;tecter toute erreur de balise ou de syntaxe (voir Validation de balises,
page 451).
Une fois que la plus grande partie du site a &eacute;t&eacute; publi&eacute;e, continuez &agrave; le mettre &agrave; jour et &agrave; en
assurer la maintenance.
La publication d’un site peut &ecirc;tre accomplie de diff&eacute;rentes mani&egrave;res et constitue un processus
continu. La d&eacute;finition et l’impl&eacute;mentation d’un syst&egrave;me de contr&ocirc;le de version constituent une
partie importante du processus, que ce soit avec les outils int&eacute;gr&eacute;s &agrave; Dreamweaver ou par le
biais d’une application de contr&ocirc;le de version externe.
Utilisez les forums de discussion Dreamweaver du site Web Macromedia &agrave; l’adresse
www.macromedia.com/go/dreamweaver_newsgroup.
Chapitre 4 : Gestion des fichiers
Vous y trouverez des informations nombreuses et pr&eacute;cieuses sur les diff&eacute;rents navigateurs,
plates-formes, etc. Vous pouvez &eacute;galement discuter de questions techniques et &eacute;changer des
informations utiles avec d’autres utilisateurs de Dreamweaver.
Utilisation des rapports pour tester votre site
Vous pouvez ex&eacute;cuter des rapports sur le d&eacute;roulement du travail ou les attributs HTML du site,
comprenant des points comme l’accessibilit&eacute;, pour le document actuel, les fichiers s&eacute;lectionn&eacute;s ou
le site complet.
Les rapports sur le d&eacute;roulement du travail peuvent am&eacute;liorer la collaboration entre les membres
d’une &eacute;quipe Web. Ces rapports permettent de savoir qui a extrait un fichier, quels fichiers sont
associ&eacute;s &agrave; des Design Notes et quels fichiers ont &eacute;t&eacute; modifi&eacute;s r&eacute;cemment. Vous pouvez d&eacute;finir
davantage les rapports des Design Notes en sp&eacute;cifiant des param&egrave;tres nom/valeur.
Remarque : Vous devez avoir d&eacute;fini une connexion &agrave; un site distant pour ex&eacute;cuter des rapports sur le
d&eacute;roulement du travail. Pour d&eacute;finir un site distant, voir Configuration d’un dossier distant, page 70.
Les rapports HTML vous permettent de compiler et de g&eacute;n&eacute;rer des rapports pour plusieurs
attributs HTML. Vous pouvez contr&ocirc;ler les balises de polices imbriqu&eacute;es combinables,
l’accessibilit&eacute;, les textes secondaires manquants, les balises imbriqu&eacute;es redondantes, les balises
vides amovibles et les documents sans nom.
Apr&egrave;s avoir ex&eacute;cut&eacute; un rapport, vous pouvez l’enregistrer au format XML, puis l’importer dans un
mod&egrave;le, une base de donn&eacute;es ou une feuille de calcul et l’imprimer, ou encore l’afficher sur un site
Web.
Remarque : Vous pouvez &eacute;galement ajouter diff&eacute;rents types de rapport &agrave; Dreamweaver via le site
Web de Macromedia Dreamweaver Exchange (voir Ajout d’extensions dans Dreamweaver, page 61).
Pour utiliser la commande Rapports afin de v&eacute;rifier les liens de votre site, voir Recherche de liens
bris&eacute;s, externes et orphelins, page 350.
Test de votre site
121
Pour ex&eacute;cuter des rapports afin de tester un site :
1 Choisissez Site &gt; Rapports.
Conseil : Si vous souhaitez uniquement ex&eacute;cuter un rapport d’accessibilit&eacute; pour votre site,
s&eacute;lectionnez Fichier &gt; V&eacute;rifier la page &gt; V&eacute;rifier l’accessibilit&eacute;. Le rapport s’affiche alors dans le
panneau Rapports du site du groupe de panneaux R&eacute;sultats.
La bo&icirc;te de dialogue Rapports s’affiche.
2 Choisissez une cat&eacute;gorie sur laquelle effectuer un rapport et le type de rapport &agrave; ex&eacute;cuter.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur Ex&eacute;cuter pour cr&eacute;er le rapport.
Selon le type de rapport &agrave; ex&eacute;cuter, vous pouvez &ecirc;tre invit&eacute; &agrave; enregistrer votre fichier, &agrave; d&eacute;finir
votre site ou &agrave; s&eacute;lectionner un dossier (si vous ne l’avez pas d&eacute;j&agrave; fait).
Une liste de r&eacute;sultats appara&icirc;t dans le panneau Rapports du site (dans le groupe de panneaux
R&eacute;sultats).
Pour utiliser et enregistrer un rapport :
1 Ex&eacute;cuter un rapport (voir la proc&eacute;dure pr&eacute;c&eacute;dente).
2 Dans le panneau Rapports du site, effectuez l’une des op&eacute;rations suivantes pour consulter le
rapport :
■ Cliquez sur l’en-t&ecirc;te de la colonne en fonction de laquelle vous souhaitez effectuer le tri des
r&eacute;sultats.
Vous pouvez trier les r&eacute;sultats par nom de fichier, num&eacute;ro de ligne ou description. Vous
pouvez &eacute;galement ex&eacute;cuter plusieurs rapports et garder les diff&eacute;rents rapports ouverts.
■ S&eacute;lectionnez une ligne quelconque du rapport, puis cliquez sur le bouton Plus d’infos situ&eacute; &agrave;
gauche du panneau Rapports du site pour obtenir la description du probl&egrave;me.
Les informations s’affichent dans le panneau R&eacute;f&eacute;rence (dans le groupe de panneaux Code).
■ Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant
dans la fen&ecirc;tre de document.
122
Chapitre 4 : Gestion des fichiers
Remarque : Si vous vous trouvez en mode Cr&eacute;ation, Dreamweaver passe &agrave; un affichage &agrave;
deux volets et indique le probl&egrave;me identifi&eacute; directement dans le code.
3 Cliquez sur Enregistrer le rapport.
Lorsque vous enregistrez un rapport, vous pouvez l’importer dans un fichier mod&egrave;le existant.
Vous pouvez alors soit importer le fichier dans une base de donn&eacute;es ou un tableur puis
l’imprimer, soit l’afficher sur un site Web.
Conseil : Apr&egrave;s avoir ex&eacute;cut&eacute; les rapports HTML, utilisez la commande Nettoyer HTML pour
corriger les erreurs HTML signal&eacute;es (voir Nettoyage du code, page 447.)
Rubriques connexes
• Rapports dans Dreamweaver, page 40
Test de votre site
123
124
Chapitre 4 : Gestion des fichiers
CHAPITRE 5
Gestion des actifs de site et des biblioth&egrave;ques
A mesure que vous d&eacute;veloppez des sites Web, vous assemblez un nombre croissant d’actifs. Dans
certains cas, vous pouvez utiliser les m&ecirc;mes actifs dans plusieurs sites ou recourir &agrave; un groupe
d’actifs favoris dans tous vos sites. Macromedia Dreamweaver MX 2004 permet de g&eacute;rer les actifs
de votre site. Vous pouvez r&eacute;pertorier et pr&eacute;visualiser certains types d’actifs inclus dans un site,
notamment les images, les animations, les couleurs, les scripts et les liens. Vous pouvez &eacute;galement
faire glisser un actif directement vers votre document actuel pour l’ins&eacute;rer dans une page.
Dreamweaver permet &eacute;galement d’acc&eacute;der &agrave; deux types d’actifs sp&eacute;ciaux : les biblioth&egrave;ques et les
mod&egrave;les. Les &eacute;l&eacute;ments de biblioth&egrave;que et les mod&egrave;les sont des actifs li&eacute;s : lorsqu’une modification
est apport&eacute;e &agrave; un &eacute;l&eacute;ment de biblioth&egrave;que ou &agrave; un mod&egrave;le, l’ensemble des documents contenant
cet actif sont mis &agrave; jour. Les &eacute;l&eacute;ments de biblioth&egrave;que constituent des &eacute;l&eacute;ments de conception
individuels, tels que les informations de copyright d’un site ou un logo. Les mod&egrave;les permettent
de d&eacute;finir la conception de zones plus larges. Pour plus d’informations, voir Chapitre 11, Gestion
des mod&egrave;les, page 225.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
A propos des &eacute;l&eacute;ments de biblioth&egrave;que, page 125
Utilisation des actifs, page 127
Cr&eacute;ation et gestion d’une liste d’actifs favoris, page 133
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que, page 135
A propos des &eacute;l&eacute;ments de biblioth&egrave;que
Une biblioth&egrave;que est un fichier Dreamweaver sp&eacute;cifique regroupant l’ensemble des actifs
individuels ou copies d’actifs cr&eacute;&eacute;s en vue d’une insertion dans des pages Web. Ces actifs pr&eacute;sents
dans une biblioth&egrave;que portent le nom d’&eacute;l&eacute;ments de biblioth&egrave;que. Vous pouvez mettre &agrave; jour
toutes les pages qui utilisent un &eacute;l&eacute;ment de biblioth&egrave;que chaque fois que vous modifiez le contenu
de l’&eacute;l&eacute;ment. Vous pouvez stocker divers types d’&eacute;l&eacute;ments de page dans une biblioth&egrave;que : images,
tableaux, sons, animations Flash, etc.
125
Voici un exemple de la fa&ccedil;on dont vous pouvez utiliser un &eacute;l&eacute;ment de biblioth&egrave;que. Supposons
que vous construisiez un site de grande taille pour une soci&eacute;t&eacute;. Cette soci&eacute;t&eacute; souhaite que son
slogan apparaisse sur chaque page du site. Or, le service marketing n’a pas encore finalis&eacute; le texte
du slogan. Si vous cr&eacute;ez un &eacute;l&eacute;ment de biblioth&egrave;que destin&eacute; &agrave; contenir le slogan et utilisez cet
&eacute;l&eacute;ment sur chaque page, vous pourrez, lorsque le service de marketing vous communiquera le
slogan d&eacute;finitif, modifier l’&eacute;l&eacute;ment de biblioth&egrave;que et automatiquement mettre &agrave; jour chaque
page sur laquelle il figure.
Dreamweaver stocke les &eacute;l&eacute;ments de la biblioth&egrave;que dans un dossier nomm&eacute; Library, au sein du
dossier racine local de chaque site. Chaque site poss&egrave;de sa propre biblioth&egrave;que.
Remarque : Si l’&eacute;l&eacute;ment de biblioth&egrave;que contient des liens, ils ne fonctionneront pas n&eacute;cessairement
sur le nouveau site. En outre, les images d’un &eacute;l&eacute;ment de biblioth&egrave;que ne sont pas copi&eacute;es vers le
nouveau site.
Lorsque vous utilisez un &eacute;l&eacute;ment de biblioth&egrave;que, Dreamweaver n’ins&egrave;re pas l’&eacute;l&eacute;ment lui-m&ecirc;me
dans la page Web mais un lien vers cet &eacute;l&eacute;ment. Cela signifie que Dreamweaver ins&egrave;re une copie
du code source HTML pour cet &eacute;l&eacute;ment dans le document et ajoute un commentaire HTML
contenant une r&eacute;f&eacute;rence &agrave; l’&eacute;l&eacute;ment externe original.
La r&eacute;f&eacute;rence &agrave; l’&eacute;l&eacute;ment de biblioth&egrave;que externe rend possible la mise &agrave; jour du contenu d’un site
entier en une seule fois, en modifiant l’&eacute;l&eacute;ment de biblioth&egrave;que et en utilisant les commandes de
mise &agrave; jour du menu Modifier &gt; Biblioth&egrave;que. Si, par la suite, vous souhaitez apporter des
modifications (texte ou image par exemple), la mise &agrave; jour de la biblioth&egrave;que entra&icirc;ne
automatiquement celle de l’instance de la biblioth&egrave;que dans toutes les pages o&ugrave; l’&eacute;l&eacute;ment de
biblioth&egrave;que a &eacute;t&eacute; ins&eacute;r&eacute;.
Lorsque vous cr&eacute;ez un &eacute;l&eacute;ment de biblioth&egrave;que comportant un &eacute;l&eacute;ment auquel est attach&eacute; un
comportement Dreamweaver, ce dernier copie l’&eacute;l&eacute;ment et son gestionnaire d’&eacute;v&eacute;nements
(l’attribut qui sp&eacute;cifie l’&eacute;v&eacute;nement d&eacute;clenchant l’action tel que onClick, onLoad ou
onMouseOver et l’action &agrave; appeler lorsque l’&eacute;v&eacute;nement se produit) dans le fichier de l’&eacute;l&eacute;ment de
biblioth&egrave;que. Dreamweaver ne copie pas les fonctions JavaScript associ&eacute;es dans l’&eacute;l&eacute;ment de la
biblioth&egrave;que. Au lieu de cela, lorsque vous ins&eacute;rez l’&eacute;l&eacute;ment de biblioth&egrave;que dans un document,
Dreamweaver ins&egrave;re automatiquement les fonctions JavaScript appropri&eacute;es dans la section head
de ce document (si elles ne s’y trouvent pas d&eacute;j&agrave;).
Remarque : Si vous r&eacute;digez manuellement le code JavaScript (c’est-&agrave;-dire si vous le cr&eacute;ez sans
utiliser de comportements Dreamweaver), vous pouvez l’int&eacute;grer &agrave; votre &eacute;l&eacute;ment de biblioth&egrave;que &agrave;
l’aide du comportement Appel JavaScript pour ex&eacute;cuter le code. Si vous n’utilisez pas de
comportement Dreamweaver pour ex&eacute;cuter le code, le code n’est pas conserv&eacute; dans l’&eacute;l&eacute;ment de
biblioth&egrave;que.
La modification des comportements dans les &eacute;l&eacute;ments de biblioth&egrave;que doit respecter certaines
conditions (voir Modification d’un comportement dans un &eacute;l&eacute;ment de biblioth&egrave;que, page 141). Les
&eacute;l&eacute;ments de biblioth&egrave;que ne peuvent pas contenir de feuilles de style, car le code associ&eacute; &agrave; ces
&eacute;l&eacute;ments figure dans la section HEAD.
Rubriques connexes
• Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que, page 135
126
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
Utilisation des actifs
Le terme actif d&eacute;signe un certain nombre d’&eacute;l&eacute;ments utilis&eacute;s dans un site, tels qu’un fichier
d’image ou d’animation.
Vous pouvez obtenir des actifs &agrave; partir de diff&eacute;rentes sources. Par exemple, vous pouvez cr&eacute;er des
actifs dans une application, telle que Macromedia Fireworks ou Macromedia Flash, les recevoir
d’un coll&egrave;gue, les copier &agrave; partir d’un CD-ROM de graphiques ou encore les copier &agrave; partir d’un
site Web d’images.
Rubriques connexes
• Cr&eacute;ation et gestion d’une liste d’actifs favoris, page 133
• Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que, page 135
Visualisation des actifs dans le panneau Actifs
Vous pouvez afficher et g&eacute;rer les actifs dans le site actuel &agrave; l’aide du panneau Actifs. Ce dernier
pr&eacute;sente les actifs du site associ&eacute;s au document actif dans la fen&ecirc;tre du document.
Remarque : Vous devez d&eacute;finir un site local avant d’afficher les actifs dans le panneau Actifs. Pour
plus d’informations sur la configuration d’un site, voir Configuration d’un nouveau site Dreamweaver,
page 66.
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.
Dans ces deux listes, les actifs sont r&eacute;partis en cat&eacute;gories (sur le c&ocirc;t&eacute; gauche du panneau Actifs).
Les listes Site et Favoris sont toutes deux disponibles pour toutes les cat&eacute;gories d’actifs &agrave; l’exception
des mod&egrave;les et &eacute;l&eacute;ments de biblioth&egrave;que.
Remarque : La plupart des fonctions du panneau Actifs peuvent &ecirc;tre utilis&eacute;es &agrave; la fois dans les listes
Site et Favoris. Toutefois, il existe quelques t&acirc;ches qui ne peuvent &ecirc;tre r&eacute;alis&eacute;es que dans la liste
Favoris (voir Cr&eacute;ation et gestion d’une liste d’actifs favoris, page 133).
Par d&eacute;faut, les actifs d’une cat&eacute;gorie donn&eacute;e sont r&eacute;pertori&eacute;s suivant leur nom dans l’ordre
alphab&eacute;tique. Vous pouvez &eacute;galement trier les actifs suivant plusieurs autres crit&egrave;res ou modifier la
taille des colonnes. Vous pouvez &eacute;galement pr&eacute;visualiser les actifs d’une cat&eacute;gorie et modifier la
taille de la zone d’aper&ccedil;u.
Utilisation des actifs
127
Pour ouvrir le panneau Actifs :
• Choisissez Fen&ecirc;tre &gt; Actifs
Le panneau Actifs s’affiche. La cat&eacute;gorie Images est s&eacute;lectionn&eacute;e par d&eacute;faut.
Pour afficher la liste Site:
• Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez l’option Site situ&eacute;e en haut du panneau.
Remarque : Dans les cat&eacute;gories Mod&egrave;les et Biblioth&egrave;ques (sur le c&ocirc;t&eacute; gauche du panneau
Actifs), les options Site et Favoris ne sont pas disponibles.
Pour afficher la liste Favoris:
• Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez l’option Favoris en haut du panneau.
La liste Favoris est vide tant que vous ne lui ajoutez pas explicitement des actifs.
Remarque : Dans les cat&eacute;gories Mod&egrave;les et Biblioth&egrave;ques (sur le c&ocirc;t&eacute; gauche du panneau
Actifs), les options Site et Favoris ne sont pas disponibles.
Pour afficher les actifs d’une cat&eacute;gorie sp&eacute;cifique :
• Cliquez sur l’ic&ocirc;ne appropri&eacute;e sur le c&ocirc;t&eacute; gauche du panneau Actifs (Fen&ecirc;tre &gt; Actifs).
Pour r&eacute;pertorier les actifs dans un ordre diff&eacute;rent :
• Cliquez sur l’un des en-t&ecirc;tes de colonne.
Par exemple, pour trier la liste des images par type (afin de regrouper toutes les images GIF,
puis toutes les images JPEG, etc.), cliquez sur l’en-t&ecirc;te de la colonne Type.
Pour modifier la largeur d’une colonne :
• Faites glisser la ligne qui s&eacute;pare deux en-t&ecirc;tes de colonne.
Pour pr&eacute;visualiser un actif :
• S&eacute;lectionnez l’actif dans le panneau Actifs.
La zone d’aper&ccedil;u en haut du panneau affiche une pr&eacute;visualisation de l’actif.
Par exemple, lorsque vous s&eacute;lectionnez un actif de type animation, une ic&ocirc;ne s’affiche dans la
zone d’aper&ccedil;u. Pour visualiser l’animation, cliquez sur le bouton Lecture (le triangle vert) dans
l’angle sup&eacute;rieur droit de la zone d’aper&ccedil;u.
128
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
Pour modifier la taille de la zone d’aper&ccedil;u :
• Faites glisser la barre de s&eacute;paration (entre la zone d’aper&ccedil;u et la liste des actifs) vers le haut ou
vers le bas.
Rubriques connexes
• Ajout d’un actif &agrave; un document, page 129
• S&eacute;lection et &eacute;dition d’actifs, page 131
Actualisation du panneau Actifs
La cr&eacute;ation de la liste Site par le panneau Actifs peut prendre quelques secondes, le panneau
devant lire le cache du site pour cr&eacute;er la liste.
Certaines modifications n’apparaissent pas imm&eacute;diatement dans le panneau Actifs :
• Lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas r&eacute;percut&eacute;es
•
dans le panneau Actifs tant que vous n’actualisez pas la liste Site en cliquant sur le bouton
Actualiser la liste du site. Si vous ajoutez ou supprimez un actif en dehors de Dreamweaver (via
l’Explorateur Windows ou le Finder, par exemple), vous devez recr&eacute;er le cache du site pour
actualiser le panneau Actifs.
Lorsque vous supprimez l’unique instance d’une URL ou d’une couleur donn&eacute;e du site, ou
lorsque vous enregistrez un nouveau fichier contenant une couleur ou une URL n’ayant pas
encore &eacute;t&eacute; utilis&eacute;e dans le site, les modifications ne sont r&eacute;percut&eacute;es dans le panneau Actifs
qu’une fois la liste Site actualis&eacute;e.
Pour actualiser manuellement la liste Site :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez l’option Site en haut du panneau Actifs
pour afficher la liste Site.
2 Cliquez sur le bouton Actualiser la liste du site en bas du panneau Actifs.
Dreamweaver cr&eacute;e le cache du site ou le met &agrave; jour, et le panneau Actifs est actualis&eacute; pour
afficher tous les actifs du site.
Pour reconstruire manuellement le cache du site et actualiser la liste Site :
• Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), cliquez avec le bouton droit de la souris (Windows)
ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) dans la liste Actifs, puis cliquez sur
Actualiser la liste du site.
Rubriques connexes
• S&eacute;lection et &eacute;dition d’actifs, page 131
• R&eacute;utilisation d’actifs dans un autre site, page 132
Ajout d’un actif &agrave; un document
Vous pouvez ins&eacute;rer la plupart des actifs dans un document en les faisant glisser dans la fen&ecirc;tre de
document en mode Code ou en mode Cr&eacute;ation, ou bien en utilisant le bouton Ins&eacute;rer. Vous
pouvez ins&eacute;rer des couleurs et des URL ou les appliquer au texte s&eacute;lectionn&eacute; en mode Cr&eacute;ation
(les URL peuvent &eacute;galement &ecirc;tre appliqu&eacute;es aux autres &eacute;l&eacute;ments, tels que des images, en mode
Cr&eacute;ation).
Utilisation des actifs
129
Pour ins&eacute;rer un actif dans un document :
1 En mode Cr&eacute;ation, placez le point d’insertion &agrave; l’endroit o&ugrave; afficher l’actif.
2 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie correspondant au type d’actif
&agrave; ins&eacute;rer sur le c&ocirc;t&eacute; gauche du panneau.
Remarque : S&eacute;lectionnez toute cat&eacute;gorie autre que Mod&egrave;les. Un mod&egrave;le peut uniquement &ecirc;tre
appliqu&eacute; &agrave; un document entier. Il ne peut pas &ecirc;tre ins&eacute;r&eacute; dans un document. Pour plus
d’informations sur les mod&egrave;les, voir Chapitre 11, Gestion des mod&egrave;les, page 225.
3 S&eacute;lectionnez Site ou Favoris en haut du panneau, puis s&eacute;lectionnez l’actif &agrave; ins&eacute;rer.
Il n’existe pas de liste Site ou Favoris pour les &eacute;l&eacute;ments de biblioth&egrave;que. Omettez cette &eacute;tape si
vous ins&eacute;rez un tel &eacute;l&eacute;ment.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Faites glisser l’actif depuis le panneau vers le document.
Vous pouvez faire glisser des scripts dans la zone du contenu de l’en-t&ecirc;te de la fen&ecirc;tre de
document. Si cette zone n’est pas visible, choisissez Affichage &gt; Contenu de l’en-t&ecirc;te.
■ S&eacute;lectionnez l’actif dans le panneau, puis cliquez sur le bouton Ins&eacute;rer en bas du panneau.
L’actif est ins&eacute;r&eacute; dans le document. Si l’actif est une couleur, son application commence au
niveau du point d’insertion. Tout le texte &agrave; la suite de ce point appara&icirc;t dans cette couleur.
Rubriques connexes
• Application d’une URL &agrave; une image ou du texte &agrave; l’aide du panneau Actifs, page 131
• S&eacute;lection et &eacute;dition d’actifs, page 131
• R&eacute;utilisation d’actifs dans un autre site, page 132
Application d’une couleur &agrave; un texte &agrave; l’aide du panneau Actifs
Les couleurs r&eacute;pertori&eacute;es dans le panneau Actifs correspondent aux couleurs que vous avez
appliqu&eacute;es aux diff&eacute;rents &eacute;l&eacute;ments du site : texte, bordures de tableau, arri&egrave;re-plan, etc. La
cat&eacute;gorie Couleurs permet d’appliquer de fa&ccedil;on homog&egrave;ne les couleurs s&eacute;lectionn&eacute;es &agrave; plusieurs
objets d’une m&ecirc;me page.
Pour plus d’informations sur l’ajout de couleurs &agrave; la cat&eacute;gorie Couleurs, voir Ajout et suppression
d’actifs dans la liste Favoris, page 133.
Pour modifier la couleur du texte s&eacute;lectionn&eacute; dans un document :
1 S&eacute;lectionnez du texte dans le document.
2 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Couleurs sur le c&ocirc;t&eacute; gauche
du panneau.
3 S&eacute;lectionnez la couleur souhait&eacute;e.
4 Cliquez sur le bouton Appliquer, au bas du panneau.
Rubriques connexes
• Ajout d’un actif &agrave; un document, page 129
• S&eacute;lection et &eacute;dition d’actifs, page 131
• R&eacute;utilisation d’actifs dans un autre site, page 132
130
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
Application d’une URL &agrave; une image ou du texte &agrave; l’aide du panneau Actifs
Vous pouvez utiliser le panneau Actifs pour transformer le texte ou l’image s&eacute;lectionn&eacute;e en lien
actif.
Pour ajouter un lien &agrave; la s&eacute;lection courante dans un document :
1 S&eacute;lectionnez le texte ou l’image que vous souhaitez convertir en lien URL.
2 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie URL sur le c&ocirc;t&eacute; gauche du
panneau.
3 S&eacute;lectionnez l’URL de votre choix.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Faites glisser l’URL depuis le panneau vers la s&eacute;lection dans la fen&ecirc;tre de document en mode
Cr&eacute;ation.
S&eacute;lectionnez l’URL et cliquez sur le bouton Ins&eacute;rer.
Rubriques connexes
• Ajout d’un actif &agrave; un document, page 129
• Application d’une couleur &agrave; un texte &agrave; l’aide du panneau Actifs, page 130
• R&eacute;utilisation d’actifs dans un autre site, page 132
S&eacute;lection et &eacute;dition d’actifs
Le panneau Actifs permet de s&eacute;lectionner simultan&eacute;ment plusieurs actifs ; il offre &eacute;galement un
moyen rapide pour commencer l’&eacute;dition d’actifs.
Pour s&eacute;lectionner plusieurs actifs :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez un des actifs.
2 S&eacute;lectionnez les autres actifs &agrave; l’aide de l’une des m&eacute;thodes suivantes :
■
■
Cliquez en maintenant la touche Maj enfonc&eacute;e pour s&eacute;lectionner une s&eacute;rie cons&eacute;cutive
d’actifs.
Cliquez en maintenant la touche Contr&ocirc;le (Windows) ou la touche Commande
(Macintosh) enfonc&eacute;e pour ajouter un actif individuel &agrave; la s&eacute;lection (qu’il soit adjacent ou
non &agrave; la s&eacute;lection existante). Cliquez en maintenant la touche Contr&ocirc;le (Windows) ou la
touche Commande (Macintosh) enfonc&eacute;e sur un actif s&eacute;lectionn&eacute; pour le d&eacute;s&eacute;lectionner.
Pour modifier un actif :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), effectuez l’une des op&eacute;rations suivantes :
Double-cliquez sur l’actif.
■ S&eacute;lectionnez l’actif, puis cliquez sur le bouton Modifier en bas du panneau.
Pour certains types d’actifs tels que les images, l’&eacute;dition de l’actif d&eacute;marre une application
d’&eacute;dition externe. Dans le cas des couleurs et des URL, l’&eacute;dition des actifs permet uniquement
de modifier la valeur d’un actif dans la liste Favoris (vous ne pouvez pas modifier les couleurs et
les URL dans la liste Site). Dans le cas des mod&egrave;les et des &eacute;l&eacute;ments de biblioth&egrave;que, l’&eacute;dition
des actifs permet d’apporter des modifications &agrave; un actif au sein de Dreamweaver.
■
Utilisation des actifs
131
Remarque : Si aucun &eacute;diteur externe ne s’ouvre pour un actif qui doit en utiliser un, choisissez
Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), s&eacute;lectionnez la
cat&eacute;gorie Types de fichiers/Editeurs, puis assurez-vous qu’un &eacute;diteur externe est d&eacute;fini pour le
type de fichier de l’actif (voir Lancement d’un &eacute;diteur externe pour des fichiers multim&eacute;dia,
page 371).
2 Modifiez les actifs suivant vos besoins.
3 Une fois l’&eacute;dition d’un actif termin&eacute;e, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
Si l’actif est un actif bas&eacute; sur un fichier (tout objet autre qu’une couleur ou une URL),
enregistrez-le (via l’&eacute;diteur utilis&eacute; pour le modifier), puis fermez-le.
Si l’actif est une URL, cliquez sur OK une fois l’&eacute;dition termin&eacute;e dans la bo&icirc;te de dialogue
Modifier l’URL.
Si l’actif est une couleur, le s&eacute;lecteur de couleur de Dreamweaver est automatiquement
ferm&eacute; lorsque vous s&eacute;lectionnez une couleur.
Remarque : Pour fermer le s&eacute;lecteur de couleur sans s&eacute;lectionner de couleur, appuyez sur la
touche Echap.
Rubriques connexes
• Visualisation des actifs dans le panneau Actifs, page 127
• Actualisation du panneau Actifs, page 129
R&eacute;utilisation d’actifs dans un autre site
Le panneau Actifs affiche tous les actifs (de types reconnus) dans le site actuel Pour utiliser un
actif du site actuel dans un autre site, il est n&eacute;cessaire de le copier. Vous pouvez copier un actif
individuel, un ensemble d’actifs individuels ou un dossier Favoris entier en une seule op&eacute;ration.
Vous devrez peut-&ecirc;tre localiser le fichier dans le panneau Fichiers correspondant &agrave; un actif dans le
panneau Actifs avant de transf&eacute;rer l’actif depuis ou vers votre site distant.
Remarque : Le panneau Fichiers peut afficher un site diff&eacute;rent de celui pr&eacute;sent&eacute; par le panneau
Actifs, car le panneau Actifs est associ&eacute; au document actif.
Pour localiser un fichier d’actif dans le panneau Fichiers :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie correspondant au type d’actif
&agrave; ins&eacute;rer sur le c&ocirc;t&eacute; gauche du panneau.
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur l’ic&ocirc;ne ou le nom de l’actif dans le panneau Actifs, puis choisissez l’option
Rep&eacute;rer dans le site dans le menu contextuel.
Remarque : L’option Rep&eacute;rer dans le site n’est pas disponible pour les couleurs et les URL, qui ne
correspondent pas &agrave; des fichiers dans le site.
Le panneau Fichiers s’ouvre, avec le fichier d’actif s&eacute;lectionn&eacute;. La commande Rep&eacute;rer dans le
site rep&egrave;re le fichier correspondant &agrave; l’actif lui-m&ecirc;me, et non un fichier qui utilise cet actif.
Pour copier des actifs de la liste Site ou Favoris du panneau Actifs vers un autre site :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie correspondant au type d’actif
&agrave; copier, sur le c&ocirc;t&eacute; gauche du panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur le ou les actifs &agrave; copier, s&eacute;lectionnez Copier dans le site, puis s&eacute;lectionnez le
nom du site de destination dans le sous-menu (le sous-menu r&eacute;pertorie tous les sites d&eacute;finis).
132
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
Remarque : Dans la liste Favoris, vous pouvez copier un dossier Favoris ainsi que des actifs
individuels. Pour plus d’informations sur les dossiers Favoris, voir Regroupement d’actifs dans un
dossier Favoris, page 135.
Les actifs sont copi&eacute;s dans le site sp&eacute;cifi&eacute;, aux emplacements correspondant &agrave; leurs
emplacements dans le site actuel. Dreamweaver cr&eacute;e des dossiers dans la hi&eacute;rarchie du site cible
suivant les besoins. Les actifs sont &eacute;galement ajout&eacute;s &agrave; la liste Favoris du site sp&eacute;cifi&eacute;.
Lorsque vous ouvrez un document dans le site cible, le panneau Actifs bascule sur ce site et affiche
l’actif copi&eacute;.
Remarque : Si l’actif copi&eacute; est une couleur ou une URL, il appara&icirc;t uniquement dans la liste Favoris
de l’autre site et non dans la liste Site de ce dernier. Dans la mesure o&ugrave; il n’existe pas de fichier
correspondant &agrave; la couleur ou &agrave; l’URL, aucun fichier n’est copi&eacute; vers l’autre site.
Rubriques connexes
• Visualisation des actifs dans le panneau Actifs, page 127
• Actualisation du panneau Actifs, page 129
• S&eacute;lection et &eacute;dition d’actifs, page 131
Cr&eacute;ation et gestion d’une liste d’actifs favoris
La liste Site du panneau Actifs affichant tous les actifs reconnus dans le site, elle peut devenir
encombr&eacute;e pour certains sites volumineux. Vous pouvez ajouter des actifs fr&eacute;quemment utilis&eacute;s &agrave;
une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour m&eacute;moriser leur
objet et les retrouver ais&eacute;ment dans le panneau Actifs.
Remarque : Les actifs favoris ne sont pas stock&eacute;s en tant que fichiers distincts sur le disque. Ils font
r&eacute;f&eacute;rence aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site &agrave; afficher
dans la liste Favoris.
La plupart des op&eacute;rations du panneau Actifs sont identiques dans les listes Favoris et Site.
Toutefois, il existe plusieurs t&acirc;ches que vous pouvez r&eacute;aliser uniquement dans la liste Favoris.
Ajout et suppression d’actifs dans la liste Favoris
Il existe plusieurs m&eacute;thodes pour ajouter des actifs &agrave; la liste Favoris du site dans le panneau Actifs.
L’ajout d’une couleur ou d’une URL &agrave; la liste Favoris n&eacute;cessite une &eacute;tape suppl&eacute;mentaire. Notez
que vous ne pouvez pas ajouter de nouvelles couleurs ou URL &agrave; la liste Site. Cette derni&egrave;re
contient uniquement les actifs d&eacute;j&agrave; utilis&eacute;s dans le site.
Remarque : Il n’existe pas de liste Favoris pour les mod&egrave;les et les &eacute;l&eacute;ments de biblioth&egrave;que.
Pour ajouter des actifs &agrave; la liste Favoris, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• S&eacute;lectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le
bouton Ajouter aux favoris situ&eacute; en bas du panneau.
• S&eacute;lectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, cliquez avec le bouton
•
droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez
Ajouter aux favoris.
S&eacute;lectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit
(Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Ajouter
aux favoris.
Dreamweaver ignore les fichiers n’appartenant pas &agrave; une cat&eacute;gorie dans le panneau Actifs.
Cr&eacute;ation et gestion d’une liste d’actifs favoris
133
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contr&ocirc;le enfonc&eacute;e
(Macintosh) sur un &eacute;l&eacute;ment dans la fen&ecirc;tre de document en mode Cr&eacute;ation, puis choisissez
l’option du menu contextuel pour ajouter l’&eacute;l&eacute;ment &agrave; la cat&eacute;gorie de favoris appropri&eacute;e.
Notez que le menu contextuel pour le texte contient soit l’option Ajouter aux favoris Couleur,
soit l’option Ajouter aux favoris URL, selon qu’un lien est attach&eacute; au texte. Notez &eacute;galement
que seuls les &eacute;l&eacute;ments appartenant aux cat&eacute;gories du panneau Actifs peuvent &ecirc;tre ajout&eacute;s &agrave; la
liste Favoris.
Ajout d’une nouvelle couleur ou d’une nouvelle URL &agrave; la liste Favoris :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Couleurs URL sur le c&ocirc;t&eacute;
gauche du panneau.
2 S&eacute;lectionnez l’option Favoris en haut du panneau pour afficher la liste Favoris.
3 Cliquez sur le bouton Nouvelle couleur ou Nouvelle URL au bas du panneau.
4 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ S&eacute;lectionnez une couleur dans le s&eacute;lecteur de couleur et donnez-lui un nom si vous le
souhaitez (voir Cr&eacute;ation d’un surnom pour un actif favori, page 134).
Pour quitter le s&eacute;lecteur de couleur sans s&eacute;lectionner de couleur, appuyez sur la touche
Echap ou cliquez sur la barre de couleur grise en haut du s&eacute;lecteur de couleur (pour plus
d’informations sur l’utilisation du s&eacute;lecteur de couleur, voir Utilisation des couleurs,
page 273).
■ Entrez une URL et un surnom dans la bo&icirc;te de dialogue Ajouter URL, puis cliquez sur OK.
Pour supprimer des actifs de la liste Favoris :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez l’option Favoris en haut du panneau.
2 S&eacute;lectionnez un ou plusieurs actifs (ou un dossier) dans la liste Favoris.
3 Cliquez sur le bouton Supprimer des favoris au bas du panneau.
Les actifs sont supprim&eacute;s de la liste Favoris, mais figurent toujours dans la liste Site. Si vous
supprimez un dossier Favoris, le dossier et tous les actifs qu’il contient sont supprim&eacute;s de la liste
Favoris.
Rubriques connexes
• Visualisation des actifs dans le panneau Actifs, page 127
• Cr&eacute;ation d’un surnom pour un actif favori, page 134
Cr&eacute;ation d’un surnom pour un actif favori
Vous pouvez attribuer des surnoms aux actifs de la liste Favoris. Le surnom est affich&eacute; au lieu de la
valeur ou du nom du fichier d’actif. Par exemple, si vous avez une couleur nomm&eacute;e #999900,
vous pouvez utiliser un surnom plus descriptif tel que CouleurArri&egrave;rePlanPage ou
CouleurTexteImportant.
Vous pouvez attribuer des surnoms aux actifs de la liste Favoris dans le panneau Actifs. Dans la
liste Site, les actifs sont r&eacute;pertori&eacute;s suivant leur nom de fichier r&eacute;el (ou valeur, dans le cas de
couleurs et d’URL).
134
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
Pour attribuer un surnom &agrave; un actif favori :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie contenant votre actif sur le
c&ocirc;t&eacute; gauche du panneau.
2 S&eacute;lectionnez l’option Favoris en haut du panneau pour afficher la liste Favoris.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) sur le nom ou l’ic&ocirc;ne de l’actif dans le panneau Actifs, puis
s&eacute;lectionnez Modifier le surnom.
■ Cliquez une fois sur le nom de l’actif, effectuez une pause, puis cliquez &agrave; nouveau.
4 Tapez un surnom pour l’actif, puis appuyez sur la touche Entr&eacute;e (Windows) ou Retour
(Macintosh).
Le surnom appara&icirc;t dans la colonne Pseudonyme.
Rubriques connexes
• Visualisation des actifs dans le panneau Actifs, page 127
• Ajout et suppression d’actifs dans la liste Favoris, page 133
Regroupement d’actifs dans un dossier Favoris
Vous pouvez classer les actifs dans des dossiers dans votre liste Favoris du panneau Actifs. Par
exemple, si vous avez un ensemble d’images que vous utilisez sur de nombreuses pages de
catalogue d’un site de commerce &eacute;lectronique, vous pouvez les grouper dans un dossier nomm&eacute;
ImagesCatalogue.
Remarque : Le fait de placer un actif dans un dossier Favoris ne modifie pas l’emplacement du fichier
d’actif sur le disque.
Pour cr&eacute;er un dossier Favoris :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez l’option Favoris en haut du panneau.
2 Cliquez sur le bouton Nouveau dossier Favoris situ&eacute; au bas du panneau.
3 Tapez un nom pour le dossier, puis appuyez sur la touche Entr&eacute;e (Windows) ou Retour
(Macintosh).
4 Faites glisser les actifs vers le dossier.
Rubriques connexes
• Visualisation des actifs dans le panneau Actifs, page 127
• Ajout et suppression d’actifs dans la liste Favoris, page 133
• Cr&eacute;ation d’un surnom pour un actif favori, page 134
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que
Les biblioth&egrave;ques permettent de stocker les &eacute;l&eacute;ments de pages (images, texte et autres objets) que
vous souhaitez r&eacute;utiliser ou mettre &agrave; jour fr&eacute;quemment sur votre site Web. Ces &eacute;l&eacute;ments portent
le nom d’&eacute;l&eacute;ments de biblioth&egrave;que.
Rubriques connexes
• A propos des &eacute;l&eacute;ments de biblioth&egrave;que, page 125
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que
135
Cr&eacute;ation d’un &eacute;l&eacute;ment de biblioth&egrave;que
Vous pouvez cr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que &agrave; partir de n’importe quel &eacute;l&eacute;ment dans la section
d’un document, notamment du texte, des tableaux, des formulaires, des applets Java, des
plug-ins, des &eacute;l&eacute;ments ActiveX, des barres de navigation et des images.
body
Pour les &eacute;l&eacute;ments li&eacute;s tels que les images, la biblioth&egrave;que enregistre uniquement une r&eacute;f&eacute;rence &agrave;
l’&eacute;l&eacute;ment. Le fichier d’origine doit rester &agrave; l’emplacement sp&eacute;cifi&eacute; pour que l’&eacute;l&eacute;ment de la
biblioth&egrave;que fonctionne correctement.
Il peut s’av&eacute;rer utile d’enregistrer une image d’un &eacute;l&eacute;ment de biblioth&egrave;que. Par exemple, vous
pouvez enregistrer une balise img compl&egrave;te dans un &eacute;l&eacute;ment de biblioth&egrave;que, ce qui vous
permettrait de facilement changer le texte alt de l’image, ou m&ecirc;me son attribut src, sur tout le
site (n’utilisez pas cette technique pour modifier les attributs de largeur et de hauteur d’une
image, sauf si vous utilisez &eacute;galement un &eacute;diteur d’image pour changer la taille r&eacute;elle de l’image).
Pour cr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que bas&eacute; sur une s&eacute;lection :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez une partie d’un document que vous souhaitez
enregistrer comme &eacute;l&eacute;ment de la biblioth&egrave;que.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Faites glisser la s&eacute;lection dans la cat&eacute;gorie Biblioth&egrave;que du panneau Actifs (Fen&ecirc;tre &gt; Actifs).
■ Cliquez sur le bouton Nouvel &eacute;l&eacute;ment de la biblioth&egrave;que au bas de la cat&eacute;gorie Biblioth&egrave;que
du panneau Actifs (Fen&ecirc;tre &gt; Actifs).
■ Choisissez Modifier &gt; Biblioth&egrave;que &gt; Ajouter un objet dans la biblioth&egrave;que.
3 Tapez un nom pour le nouvel &eacute;l&eacute;ment de la biblioth&egrave;que, puis appuyez sur la touche Entr&eacute;e
(Windows) ou Retour (Macintosh).
Dreamweaver enregistre chaque &eacute;l&eacute;ment de biblioth&egrave;que dans un fichier s&eacute;par&eacute; (avec
l’extension de fichier .lbi), dans le dossier Library du dossier racine local du site.
Pour cr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que vide :
1 V&eacute;rifiez que rien n’est s&eacute;lectionn&eacute; dans la fen&ecirc;tre de document.
Si un &eacute;l&eacute;ment est s&eacute;lectionn&eacute;, il est plac&eacute; dans le nouvel &eacute;l&eacute;ment de biblioth&egrave;que.
2 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que sur le c&ocirc;t&eacute;
gauche du panneau.
3 Cliquez sur le bouton Nouvel &eacute;l&eacute;ment de biblioth&egrave;que au bas du panneau Actifs.
Un nouvel &eacute;l&eacute;ment sans nom est ajout&eacute; &agrave; la liste du panneau.
4 S&eacute;lectionnez l’&eacute;l&eacute;ment et entrez son nom, puis appuyez sur Entr&eacute;e (Windows) ou sur Retour
(Macintosh).
Rubriques connexes
• Modification d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 137
• D&eacute;finition des pr&eacute;f&eacute;rences de couleur de surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que, page 139
Insertion d’un &eacute;l&eacute;ment de biblioth&egrave;que dans un document
Lorsque vous ajoutez un &eacute;l&eacute;ment de biblioth&egrave;que &agrave; une page, le contenu r&eacute;el est ins&eacute;r&eacute; dans le
document avec une r&eacute;f&eacute;rence &agrave; l’&eacute;l&eacute;ment de biblioth&egrave;que.
136
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
Pour ins&eacute;rer un &eacute;l&eacute;ment de biblioth&egrave;que dans un document :
1 Placez le point d’insertion dans la fen&ecirc;tre de document.
2 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que sur le c&ocirc;t&eacute;
gauche du panneau.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Faites glisser un &eacute;l&eacute;ment de biblioth&egrave;que du panneau Actifs vers la fen&ecirc;tre de document.
Conseil : Pour ins&eacute;rer le contenu d’un &eacute;l&eacute;ment de biblioth&egrave;que sans inclure de r&eacute;f&eacute;rence &agrave;
l’&eacute;l&eacute;ment dans le document, appuyez sur la touche Contr&ocirc;le (Windows) ou Option (Macintosh)
tout en faisant glisser l’&eacute;l&eacute;ment hors du panneau Actifs. Lorsque vous ins&eacute;rez un &eacute;l&eacute;ment de
cette fa&ccedil;on, vous pouvez le modifier dans le document, mais le document ne sera pas mis &agrave; jour
lorsque vous mettrez &agrave; jour les pages qui utilisent cet &eacute;l&eacute;ment.
■
S&eacute;lectionnez un &eacute;l&eacute;ment de biblioth&egrave;que, puis cliquez sur le bouton Ins&eacute;rer en bas du
panneau.
Rubriques connexes
• Cr&eacute;ation d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 136
• Modification des propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 140
• Rendre des &eacute;l&eacute;ments de biblioth&egrave;que modifiables dans un document, page 140
Modification d’un &eacute;l&eacute;ment de biblioth&egrave;que
Lorsque vous modifiez un &eacute;l&eacute;ment de biblioth&egrave;que, vous pouvez choisir de mettre &agrave; jour tous les
documents qui utilisent cet &eacute;l&eacute;ment. Si vous choisissez de ne pas les mettre &agrave; jour, les documents
restent associ&eacute;s &agrave; l’&eacute;l&eacute;ment de biblioth&egrave;que. Il est toujours possible de les mettre &agrave; jour
ult&eacute;rieurement.
D’autres types de modifications peuvent &ecirc;tre apport&eacute;es aux &eacute;l&eacute;ments de biblioth&egrave;que : vous
pouvez les renommer pour rompre leur lien avec des documents ou mod&egrave;les, supprimer des
&eacute;l&eacute;ments de la biblioth&egrave;que du site et recr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que manquant.
Remarque : Les panneaux Styles CSS ne sont pas disponibles lorsque vous modifiez des &eacute;l&eacute;ments
de biblioth&egrave;que : en effet, ceux-ci ne peuvent contenir que des &eacute;l&eacute;ments body, alors que le code
associ&eacute; aux feuilles de style CSS est ins&eacute;r&eacute; dans la section head du document. La bo&icirc;te de dialogue
Propri&eacute;t&eacute;s de la page est &eacute;galement indisponible : en effet, un &eacute;l&eacute;ment de biblioth&egrave;que ne peut pas
comporter de balise body ni d’attributs de cette balise.
Pour modifier un &eacute;l&eacute;ment de la biblioth&egrave;que :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que sur le c&ocirc;t&eacute;
gauche du panneau.
2 S&eacute;lectionnez un &eacute;l&eacute;ment de biblioth&egrave;que.
Un aper&ccedil;u de l’&eacute;l&eacute;ment de biblioth&egrave;que s’affiche en haut du panneau Actifs (vous ne pouvez
rien modifier dans l’aper&ccedil;u).
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Cliquez sur le bouton Modifier, au bas du panneau.
■ Double-cliquez sur l’&eacute;l&eacute;ment de biblioth&egrave;que.
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que
137
Dreamweaver ouvre une nouvelle fen&ecirc;tre permettant de modifier l’&eacute;l&eacute;ment de biblioth&egrave;que.
Cette fen&ecirc;tre ressemble beaucoup &agrave; la fen&ecirc;tre de document, mais son mode Cr&eacute;ation poss&egrave;de
un arri&egrave;re-plan gris pour indiquer que vous modifiez un &eacute;l&eacute;ment de biblioth&egrave;que et non pas un
document.
4 Modifiez l’&eacute;l&eacute;ment de la biblioth&egrave;que, puis enregistrez les modifications.
5 Dans la bo&icirc;te de dialogue qui s’affiche, choisissez de mettre &agrave; jour ou non les documents du site
local qui utilisent l’&eacute;l&eacute;ment de biblioth&egrave;que modifi&eacute; :
■ Cliquez sur Oui pour mettre &agrave; jour tous les documents du site local qui utilisent l’&eacute;l&eacute;ment
modifi&eacute; ;
■ cliquez sur Non pour ne mettre &agrave; jour aucun document jusqu’&agrave; ce que vous utilisiez
Modifier &gt; Biblioth&egrave;que &gt; Mettre &agrave; jour la page en cours ou Mettre &agrave; jour les pages.
Pour mettre &agrave; jour le document actif afin d’utiliser la version actuelle de tous les &eacute;l&eacute;ments de
biblioth&egrave;que :
• Choisissez Modifier &gt; Mod&egrave;les &gt; Mettre &agrave; jour la page en cours.
Pour mettre &agrave; jour le site entier ou tous les documents utilisant un &eacute;l&eacute;ment de biblioth&egrave;que
particulier :
1 Choisissez Modifier &gt; Biblioth&egrave;que &gt; Mettre &agrave; jour les pages.
La bo&icirc;te de dialogue Mettre &agrave; jour les pages s’affiche.
2 Dans le menu contextuel Regarder dans, proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Site entier, puis s&eacute;lectionnez le nom du site dans le menu contextuel adjacent.
Toutes les pages du site s&eacute;lectionn&eacute; sont mises &agrave; jour en fonction de la version actuelle de
tous les &eacute;l&eacute;ments de biblioth&egrave;que.
■ Choisissez Fichiers utilisant, puis s&eacute;lectionnez un nom d’&eacute;l&eacute;ment de biblioth&egrave;que dans le
menu contextuel adjacent.
Cette op&eacute;ration met &agrave; jour toutes les pages du site en cours qui utilisent l’&eacute;l&eacute;ment de
biblioth&egrave;que s&eacute;lectionn&eacute;.
3 Sous Mettre &agrave; jour, assurez-vous que l’option El&eacute;ments de biblioth&egrave;que est activ&eacute;e.
■
Conseil : Pour mettre les mod&egrave;les &agrave; jour en m&ecirc;me temps, v&eacute;rifiez que Mod&egrave;les est &eacute;galement
s&eacute;lectionn&eacute;. Pour plus d’informations, voir Ouverture d’un mod&egrave;le &agrave; modifier, page 252.
4 Cliquez sur D&eacute;marrer.
Dreamweaver met &agrave; jour les fichiers indiqu&eacute;s. Si vous avez s&eacute;lectionn&eacute; l’option Afficher le
journal, Dreamweaver affiche des informations sur les fichiers qu’il essaie de mettre &agrave; jour et
pr&eacute;cise si la mise &agrave; jour a r&eacute;ussi.
Pour renommer un &eacute;l&eacute;ment de la biblioth&egrave;que :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que sur le c&ocirc;t&eacute;
gauche du panneau.
2 S&eacute;lectionnez l’&eacute;l&eacute;ment de biblioth&egrave;que &agrave; renommer, marquez une pause, puis cliquez &agrave;
nouveau.
3 Lorsque le nom devient modifiable, tapez un nouveau nom.
Remarque : Cette m&eacute;thode fonctionne de la m&ecirc;me fa&ccedil;on que celle utilis&eacute;e dans l’Explorateur
Windows ou dans le Finder (Macintosh). Comme avec l’Explorateur Windows et le Finder, vous
devez attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car cela
ouvrirait l’&eacute;l&eacute;ment de biblioth&egrave;que pour modification.
138
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
4 Cliquez ailleurs ou appuyez sur Entr&eacute;e (Windows) ou sur Retour (Macintosh).
5 Dreamweaver vous demande si vous voulez mettre &agrave; jour les documents qui utilisent l’&eacute;l&eacute;ment :
■
■
Pour mettre &agrave; jour tous les documents du site qui utilisent l’&eacute;l&eacute;ment, cliquez sur Mettre &agrave;
jour.
Pour ne mettre &agrave; jour aucun des documents qui utilisent l’&eacute;l&eacute;ment, cliquez sur Ne pas
mettre &agrave; jour.
Pour supprimer un &eacute;l&eacute;ment d’une biblioth&egrave;que :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que sur le c&ocirc;t&eacute;
gauche du panneau.
2 S&eacute;lectionnez l’&eacute;l&eacute;ment de biblioth&egrave;que &agrave; supprimer.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l’op&eacute;ration.
■ Appuyez sur la touche Suppr, puis confirmez que vous voulez supprimer le mod&egrave;le.
Attention : Si vous supprimez un &eacute;l&eacute;ment de biblioth&egrave;que, vous ne pourrez pas utiliser Annuler
pour le r&eacute;cup&eacute;rer. Vous pourrez cependant le recr&eacute;er, comme expliqu&eacute; dans la prochaine
proc&eacute;dure.
Dreamweaver supprime l’&eacute;l&eacute;ment de la biblioth&egrave;que mais ne modifie pas le contenu des
documents qui l’utilisent.
Pour recr&eacute;er un &eacute;l&eacute;ment de biblioth&egrave;que manquant ou supprim&eacute; :
1 S&eacute;lectionnez une instance de l’&eacute;l&eacute;ment dans un de vos documents.
2 Cliquez sur le bouton Cr&eacute;er &agrave; nouveau de l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
Rubriques connexes
• Cr&eacute;ation d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 136
• Rendre des &eacute;l&eacute;ments de biblioth&egrave;que modifiables dans un document, page 140
• Modification d’un comportement dans un &eacute;l&eacute;ment de biblioth&egrave;que, page 141
D&eacute;finition des pr&eacute;f&eacute;rences de couleur de surbrillance des &eacute;l&eacute;ments de
biblioth&egrave;que
Vous pouvez personnaliser la couleur de surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que et afficher ou
masquer la surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que en d&eacute;finissant des pr&eacute;f&eacute;rences de
surbrillance.
Pour modifier la couleur de surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que :
1 S&eacute;lectionnez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Surbrillance dans la liste de gauche.
3 Cliquez dans la case de couleur El&eacute;ments de la biblioth&egrave;que et s&eacute;lectionnez une couleur de
surbrillance &agrave; l’aide du s&eacute;lecteur de couleurs (ou entrez la valeur hexad&eacute;cimale correspondant &agrave;
la couleur de surbrillance dans la zone de texte).
Pour plus d’informations sur l’utilisation de la pipette, voir Utilisation des couleurs, page 273.
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que
139
4 Activez l’option Afficher pour afficher la couleur de surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que
dans la fen&ecirc;tre de document.
5 Cliquez sur OK.
Pour afficher les couleurs de surbrillance dans la fen&ecirc;tre de document :
• Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
Les couleurs de surbrillance apparaissent dans la fen&ecirc;tre de document uniquement lorsque
l’option Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles est activ&eacute;e et que les options
appropri&eacute;es sont activ&eacute;es dans les pr&eacute;f&eacute;rences de surbrillance.
Rubriques connexes
• Cr&eacute;ation d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 136
• Modification d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 137
• Modification des propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 140
Modification des propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de biblioth&egrave;que
L’inspecteur de propri&eacute;t&eacute;s vous permet d’ouvrir un &eacute;l&eacute;ment de biblioth&egrave;que pour le modifier,
d&eacute;tacher un &eacute;l&eacute;ment s&eacute;lectionn&eacute; de son fichier source ou remplacer un &eacute;l&eacute;ment par celui
s&eacute;lectionn&eacute; actuellement.
Pour modifier les propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de biblioth&egrave;que :
1 S&eacute;lection d’un &eacute;l&eacute;ment de biblioth&egrave;que dans un document.
2 Cliquez sur le bouton correspondant &agrave; votre choix dans l’inspecteur de propri&eacute;t&eacute;s (Windows &gt;
Propri&eacute;t&eacute;s).
Pour plus d’informations, cliquez sur l’ic&ocirc;ne Aide de l’inspecteur de propri&eacute;t&eacute;s.
Rubriques connexes
• Cr&eacute;ation d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 136
• Insertion d’un &eacute;l&eacute;ment de biblioth&egrave;que dans un document, page 136
• D&eacute;finition des pr&eacute;f&eacute;rences de couleur de surbrillance des &eacute;l&eacute;ments de biblioth&egrave;que, page 139
Rendre des &eacute;l&eacute;ments de biblioth&egrave;que modifiables dans un document
Si vous avez ins&eacute;r&eacute; un &eacute;l&eacute;ment de biblioth&egrave;que dans un document et que vous d&eacute;sirez modifier
celui-ci uniquement sur cette page, vous devez briser le lien qui existe entre cet &eacute;l&eacute;ment et la
biblioth&egrave;que. Lorsqu’une instance d’&eacute;l&eacute;ment de biblioth&egrave;que a &eacute;t&eacute; rendue modifiable, elle ne peut
plus &ecirc;tre mise &agrave; jour quand l’&eacute;l&eacute;ment de biblioth&egrave;que est modifi&eacute;.
Pour rendre un &eacute;l&eacute;ment de la biblioth&egrave;que modifiable :
1 S&eacute;lectionnez un &eacute;l&eacute;ment de la biblioth&egrave;que dans le document actif.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur D&eacute;tacher de l’original (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
L’instance s&eacute;lectionn&eacute;e de l’&eacute;l&eacute;ment de biblioth&egrave;que perd sa surbrillance (si elle est visible) et ne
peut plus &ecirc;tre mise &agrave; jour lorsque l’&eacute;l&eacute;ment de biblioth&egrave;que d’origine change.
Rubriques connexes
• Cr&eacute;ation d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 136
140
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
• Insertion d’un &eacute;l&eacute;ment de biblioth&egrave;que dans un document, page 136
• Modification d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 137
• Modification des propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 140
Modification d’un comportement dans un &eacute;l&eacute;ment de biblioth&egrave;que
Pour modifier un comportement dans un &eacute;l&eacute;ment de biblioth&egrave;que, vous devez tout d’abord
ins&eacute;rer l’&eacute;l&eacute;ment dans un document, puis le rendre modifiable dans ce document. Une fois les
changements voulus apport&eacute;s, vous pouvez recr&eacute;er l’&eacute;l&eacute;ment de biblioth&egrave;que, en rempla&ccedil;ant
l’&eacute;l&eacute;ment de la biblioth&egrave;que par l’&eacute;l&eacute;ment modifi&eacute; de votre document.
Pour plus d’informations sur les comportements, voir Utilisation des comportements JavaScript,
page 383.
Pour modifier un comportement dans un &eacute;l&eacute;ment de la biblioth&egrave;que :
1 Ouvrez un document contenant l’&eacute;l&eacute;ment de la biblioth&egrave;que.
Notez le nom de l’&eacute;l&eacute;ment de la biblioth&egrave;que, ainsi que les balises exactes qu’il contient. Vous
aurez besoin de cette information plus tard.
2 S&eacute;lectionnez l’&eacute;l&eacute;ment de biblioth&egrave;que et cliquez sur D&eacute;tacher de l’original dans l’inspecteur de
propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
3 S&eacute;lectionnez l’&eacute;l&eacute;ment auquel est attach&eacute; le comportement.
4 Dans le volet Comportements (Fen&ecirc;tre &gt; Comportements), double-cliquez sur l’action que
vous voulez modifier.
5 Dans la bo&icirc;te de dialogue qui s’affiche, effectuez les modifications n&eacute;cessaires et cliquez sur OK.
6 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Biblioth&egrave;que sur le c&ocirc;t&eacute;
gauche du panneau.
7 Notez pr&eacute;cis&eacute;ment le nom de l’&eacute;l&eacute;ment de biblioth&egrave;que d’origine ; s&eacute;lectionnez l’&eacute;l&eacute;ment de
biblioth&egrave;que d’origine, puis cliquez sur le bouton Supprimer situ&eacute; au bas du panneau.
8 Dans la fen&ecirc;tre de document, s&eacute;lectionnez tous les &eacute;l&eacute;ments qui constituent l’&eacute;l&eacute;ment de
biblioth&egrave;que.
Veillez &agrave; s&eacute;lectionner exactement les m&ecirc;mes &eacute;l&eacute;ments que ceux qui se trouvaient dans l’&eacute;l&eacute;ment
de biblioth&egrave;que original.
9 Dans le panneau Actifs, cliquez sur le bouton Nouvel &eacute;l&eacute;ment de biblioth&egrave;que et donnez au
nouvel &eacute;l&eacute;ment le nom de l’&eacute;l&eacute;ment que vous avez supprim&eacute;.
Veillez &agrave; respecter la m&ecirc;me orthographe et la m&ecirc;me casse.
10 Pour mettre &agrave; jour l’&eacute;l&eacute;ment de biblioth&egrave;que dans les autres documents de votre site, choisissez
Modifier &gt; Biblioth&egrave;que &gt; Mettre &agrave; jour les pages.
11 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez Fichiers utilisant dans le menu d&eacute;roulant
Regarder dans.
12 Dans le menu d&eacute;roulant adjacent, s&eacute;lectionnez le nom de l’&eacute;l&eacute;ment de biblioth&egrave;que que vous
venez de cr&eacute;er.
13 Sous Mettre &agrave; jour, v&eacute;rifiez que l’option El&eacute;ments de biblioth&egrave;que est s&eacute;lectionn&eacute;e, puis cliquez
sur D&eacute;marrer.
14 Une fois les mises &agrave; jour effectu&eacute;es, cliquez sur Fermer pour sortir de la bo&icirc;te de dialogue Mettre
&agrave; jour les pages.
Utilisation des &eacute;l&eacute;ments de biblioth&egrave;que
141
Rubriques connexes
• Cr&eacute;ation d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 136
• Insertion d’un &eacute;l&eacute;ment de biblioth&egrave;que dans un document, page 136
• Modification d’un &eacute;l&eacute;ment de biblioth&egrave;que, page 137
142
Chapitre 5 : Gestion des actifs de site et des biblioth&egrave;ques
CHAPITRE 6
Gestion des sites Contribute avec Dreamweaver
ContributeMacromedia regroupe les fonctions d’un navigateur Web et d’un &eacute;diteur de pages Web
de base. Il permet &agrave; vos coll&egrave;gues et &agrave; vos clients de parcourir une page d’un site que vous avez
cr&eacute;&eacute;, ainsi que de modifier ou de mettre &agrave; jour cette page s’ils disposent des droits appropri&eacute;s. Les
utilisateurs de Contribute peuvent ajouter et mettre &agrave; jour du contenu Web de base, y compris du
texte mis en forme, des images, des tableaux et des liens. Les administrateurs de site Contribute
peuvent restreindre les op&eacute;rations effectu&eacute;es par les utilisateurs ordinaires (non-administrateurs)
sur un site.
Remarque : La plupart des utilisateurs de Macromedia Dreamweaver MX 2004 qui se connectent &agrave;
un site Contribute sont administrateurs du site. Pour r&eacute;aliser les op&eacute;rations pr&eacute;sent&eacute;es dans ce
chapitre, vous devez &ecirc;tre l’administrateur du site.
Avant de fournir aux utilisateurs de Contribute les informations de connexion dont ils ont besoin
pour modifier des pages, vous devez effectuer plusieurs op&eacute;rations de configuration de site dans
Dreamweaver. Vous pouvez ensuite exporter vos informations de d&eacute;finition de site en tant que cl&eacute;
de connexion, fichier que les utilisateurs de Contribute peuvent utiliser pour se connecter au site.
Remarque : Ce chapitre suppose que vous savez configurer un site Dreamweaver. Pour plus
d’informations, voir Configuration d’un site Dreamweaver, page 63. Si vous configurez un site
dynamique &agrave; utiliser avec Contribute, consultez la section relative &agrave; l’administration de Contribute
dans l’aide de Contribute.
Vous pouvez vous connecter &agrave; un site Contribute &agrave; l’aide de Dreamweaver et modifier les fichiers
du site comme vous le feriez dans un site Dreamweaver.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
A propos de la gestion des sites Contribute, page 143
Pr&eacute;paration d’un site &agrave; utiliser avec Contribute, page 147
Administration d’un site Contribute &agrave; l’aide de Dreamweaver, page 148
D&eacute;pannage d’un site Contribute, page 149
Gestion des fichiers Contribute dans Dreamweaver, page 150
A propos de la gestion des sites Contribute
Vous pouvez utiliser Dreamweaver pour vous connecter &agrave; un site Contribute et modifier les
fichiers du site comme vous le feriez dans un site Dreamweaver. La plupart des options
Dreamweaver fonctionnent avec un site Contribute comme avec tout autre site. Seuls quelques
aspects de l’utilisation des fichiers dans un site Contribute diff&egrave;rent.
143
Structure du site et conception de pages pour un site Contribute
Pour que votre site Web puisse &ecirc;tre modifi&eacute; par les utilisateurs de Contribute, vous devez cr&eacute;er
une structure de site appropri&eacute;e.
Pour ce faire, vous devez cr&eacute;er les dossiers destin&eacute;s au stockage des pages des utilisateurs de
Contribute, r&eacute;aliser des pages d’index pour les dossiers et ajouter des &eacute;l&eacute;ments de navigation de
base &agrave; ces pages. Vous pouvez concevoir des dossiers sp&eacute;cifiques aux utilisateurs, dans lesquels ils
pourront s’entra&icirc;ner, et cr&eacute;er des feuilles de style CSS pour d&eacute;finir les styles de chaque page ou
dossier. Une partie des op&eacute;rations de configuration peuvent &ecirc;tre effectu&eacute;es dans Contribute, mais
il est plus facile de d&eacute;finir un site dans Dreamweaver.
En outre, vous pouvez r&eacute;aliser des mod&egrave;les que les utilisateurs de Contribute peuvent utiliser pour
la cr&eacute;ation de nouvelles pages (voir Cr&eacute;ation de mod&egrave;les pour un site Contribute, page 241).
Les suggestions suivantes peuvent vous aider &agrave; cr&eacute;er un site auxquels les utilisateurs de Contribute
peuvent facilement contribuer :
• Utilisez une structure de site simple.
•
•
•
•
•
•
Evitez de cr&eacute;er de nombreux niveaux de dossiers. Regroupez les &eacute;l&eacute;ments associ&eacute;s dans un
m&ecirc;me dossier.
D&eacute;finissez des droits en lecture et en &eacute;criture appropri&eacute;s pour les dossiers sur le serveur.
Pour plus d’informations, voir Activation de l’acc&egrave;s aux mod&egrave;les sans l’acc&egrave;s au dossier racine pour
les utilisateurs de Contribute, page 151.
Lorsque vous cr&eacute;ez votre structure de dossiers, ajoutez des pages d’index aux dossiers pour
inciter les utilisateurs de Contribute &agrave; placer les nouvelles pages dans les dossiers appropri&eacute;s.
Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes
rendus de r&eacute;unions, vous pouvez cr&eacute;er un dossier dans le dossier racine du site appel&eacute;
comptes_rendus et y ins&eacute;rer une page d’index. Vous pouvez ensuite cr&eacute;er un lien qui renvoie &agrave;
la page d’index des comptes rendus sur la page principale du site. Un utilisateur de Contribute
peut alors atteindre la page d’index et r&eacute;aliser une page de proc&egrave;s-verbal pour une r&eacute;union
donn&eacute;e, d&eacute;sign&eacute;e par un lien depuis cette page. La nouvelle page est automatiquement cr&eacute;&eacute;e
dans le dossier comptes_rendus.
Dans chaque page d’index du dossier, fournissez une liste de liens vers chaque page et
document contenus dans ce dossier.
Utilisez des conceptions de pages simples en &eacute;vitant des mises en forme fantaisistes.
Attribuez un nom descriptif &agrave; vos styles CSS.
Si les utilisateurs de Contribute qui travaillent sur votre site utilisent un jeu de styles standard
dans Microsoft Word, attribuez &agrave; vos styles CSS les m&ecirc;mes noms que ceux des styles Word
correspondants, afin que Contribute puisse faire correspondre les styles lorsqu’un utilisateur
copie des donn&eacute;es d’un document Word et les colle dans une page Contribute.
Pour que les utilisateurs de Contribute ne puissent pas utiliser un style CSS, modifiez le nom
du style de sorte qu’il commence par &laquo; mmhide_ &raquo; (sans guillemets).
Par exemple, si vous utilisez un style nomm&eacute; Justifi&eacute;_droite dans une page mais que vous ne
souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le en
mmhide_Justifi&eacute;_droite.
Remarque : Vous devez ajouter mmhide_ au nom du style en mode Code et non dans le panneau
CSS.
144
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
• Utilisez des balises CSS plut&ocirc;t que des balises HTML.
Contribute reconna&icirc;t les styles CSS et permet aux utilisateurs de les appliquer.
• Dans un souci de simplicit&eacute;, utilisez aussi peu de styles CSS que possible.
• Si vous utilisez des inclusions c&ocirc;t&eacute; serveur pour des &eacute;l&eacute;ments de pages HTML, par exemple des
en-t&ecirc;te ou des pieds de page, cr&eacute;ez une page HTML simple non li&eacute;e contenant les liens vers les
fichiers d’inclusion.
Les utilisateurs de Contribute peuvent ensuite marquer cette page et l’utiliser pour rechercher
les fichiers d’inclusion et les modifier.
Rubriques connexes
•
•
•
•
Chapitre 2, Configuration d’un site Dreamweaver, page 63
Cr&eacute;ation de nouveaux documents, page 76
Utilisation des feuilles de style en cascade, page 304
Utilisation des inclusions c&ocirc;t&eacute; serveur, page 462
Connexion &agrave; un site pour la compatibilit&eacute; avec Contribute
Dans Dreamweaver, vous pouvez vous connecter &agrave; un site Contribute existant et modifier les
fichiers du site comme dans tout site Dreamweaver (Configuration d’un nouveau site Dreamweaver,
page 66). Lorsque vous vous connectez &agrave; un site d&eacute;fini en tant que site Contribute (qui dispose
d&eacute;j&agrave; d’un administrateur), Dreamweaver vous invite &agrave; activer la compatibilit&eacute; avec Contribute.
Si vous pr&eacute;parez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez
activer la compatibilit&eacute; avec Contribute de mani&egrave;re explicite pour utiliser les fonctions
Contribute. Dreamweaver n’affiche pas de message d’invite. Pour plus d’informations, voir
Pr&eacute;paration d’un site &agrave; utiliser avec Contribute, page 147.
Dreamweaver vous permet de vous connecter &agrave; un site distant, y compris un site Contribute, de
diff&eacute;rentes fa&ccedil;ons. Cependant, tous les types de connexion ne prennent pas en charge la
compatibilit&eacute; avec Contribute. Les restrictions suivantes s’appliquent aux types de connexion :
• Si vous vous connectez &agrave; votre site distant &agrave; l’aide de WebDAV ou de SourceSafe, vous ne
•
•
pouvez pas activer la compatibilit&eacute; avec Contribute, car ces syst&egrave;mes de commande source ne
sont pas compatibles avec les Design Notes et les syst&egrave;mes d’archivage et d’extraction utilis&eacute; par
Dreamweaver pour les sites Contribute.
Si vous utilisez RDS pour vous connecter &agrave; votre site distant, vous pouvez activer la
compatibilit&eacute; avec Contribute, mais vous devez ensuite personnaliser votre connexion pour
pouvoir la partager avec des utilisateurs de Contribute.
Si vous utilisez votre ordinateur local comme serveur Web, vous devez d&eacute;finir le site &agrave; l’aide
d’une connexion FTP ou r&eacute;seau (au lieu d’un simple chemin de dossier local) pour pouvoir
partager votre connexion avec des utilisateurs de Contribute.
Transfert de fichiers depuis et vers un site Contribute
Contribute utilise un syst&egrave;me similaire au syst&egrave;me d’archivage et d’extraction de Dreamweaver
afin qu’un seul utilisateur &agrave; la fois puisse modifier une page Web donn&eacute;e. Lorsque vous activez la
compatibilit&eacute; avec Contribute dans Dreamweaver, le syst&egrave;me d’archivage et d’extraction de
Dreamweaver est automatiquement activ&eacute;.
A propos de la gestion des sites Contribute
145
Pour transf&eacute;rer des fichiers depuis et vers un site Contribute &agrave; l’aide de Dreamweaver, utilisez
toujours les commandes Archiver et Extraire. Si vous utilisez les commandes Placer et Acqu&eacute;rir
pour transf&eacute;rer les fichiers, vous risquez d’&eacute;craser les derni&egrave;res modifications apport&eacute;es &agrave; un fichier
par un utilisateur de Contribute.
Remarque : Si vous utilisez la commande Placer dans un site Contribute, Dreamweaver archive
automatiquement le fichier, puis l’extrait &agrave; nouveau, afin de r&eacute;duire les risques de conflits entre vos
modifications et celles d’un autre utilisateur.
L’extraction d’un fichier d’un site Contribute se d&eacute;roule de la m&ecirc;me fa&ccedil;on que pour un autre site.
Lorsque vous archivez un fichier dans un site Contribute, Dreamweaver effectue
automatiquement une copie de sauvegarde de la version pr&eacute;c&eacute;demment archiv&eacute;e du fichier dans le
dossier _baks et ajoute votre nom d’utilisateur et la date &agrave; un fichier Design Notes afin que les
autres utilisateurs sachent qui a archiv&eacute; le fichier et &agrave; quel moment. Pour plus d’informations sur
les copies de sauvegarde automatiques, voir Activation de l’acc&egrave;s aux mod&egrave;les sans l’acc&egrave;s au dossier
racine pour les utilisateurs de Contribute, page 151.
Rubriques connexes
• Archivage et extraction de fichiers, page 106
• Pr&eacute;paration d’un site &agrave; utiliser avec Contribute, page 147
Autorisations de fichiers et de dossiers Contribute sur le serveur
Contribute offre la possibilit&eacute; de g&eacute;rer les autorisations de fichiers et de dossiers pour chaque
groupe d’utilisateurs d&eacute;fini. Pour plus d’informations, voir la section relative &agrave; l’administration de
Contribute dans l’aide de Contribute. Ces autorisations n’affectent pas les utilisateurs de
Dreamweaver, Contribute les applique uniquement aux utilisateurs de Contribute.
N&eacute;anmoins, Contribute ne permet pas de g&eacute;rer les autorisations de lecture et d’&eacute;criture sousjacentes attribu&eacute;es aux fichiers et aux dossiers par le serveur. Vous pouvez g&eacute;rer ces autorisations
directement sur le serveur.
Les groupes d’autorisations Contribute sont comme superpos&eacute;s aux autorisations de lecture et
d’&eacute;criture du serveur. Par exemple, si un utilisateur ne dispose pas d’autorisation en &eacute;criture sur un
dossier du serveur, il ne peut pas enregistrer ce dossier m&ecirc;me s’il est membre d’un groupe
d’autorisations qui peut, selon les autorisations Contribute, &eacute;crire dans ce dossier.
Si un utilisateur de Contribute ne dispose pas de droit d’acc&egrave;s en lecture sur le serveur pour un
fichier donn&eacute;, tel qu’une image affich&eacute;e dans une page, le contenu de ce fichier ne s’affiche pas
dans la fen&ecirc;tre Contribute. Par exemple, si un utilisateur ne dispose pas de droit d’acc&egrave;s en lecture
&agrave; un dossier d’images, les images contenues dans ce dossier s’affichent sous la forme d’ic&ocirc;nes
d’image d&eacute;chir&eacute;e dans Contribute. De m&ecirc;me, les mod&egrave;les Dreamweaver sont stock&eacute;s dans un
sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d’acc&egrave;s
en lecture au dossier racine, il ne peut pas utiliser les mod&egrave;les de ce site, sauf si vous copiez les
mod&egrave;les dans un dossier accessible.
Lorsque vous d&eacute;finissez un site, nous vous conseillons d’accorder aux utilisateurs des droits d’acc&egrave;s
en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu’au
dossier /Templates et &agrave; tous les dossiers contenant des ressources dont ils auront besoin.
Si pour une raison quelconque, vous ne pouvez pas accorder de droits d’acc&egrave;s en lecture au
dossier /Templates, voir Activation de l’acc&egrave;s aux mod&egrave;les sans l’acc&egrave;s au dossier racine pour les
utilisateurs de Contribute, page 151 pour fournir les mod&egrave;les aux utilisateurs.
146
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
Fichiers sp&eacute;ciaux Contribute
Contribute utilise divers fichiers sp&eacute;ciaux qui ne sont pas destin&eacute;s &agrave; &ecirc;tre consult&eacute;s par les visiteurs
du site. Ces fichiers comprennent :
• le fichier de param&egrave;tres partag&eacute;s, fichier XML portant un nom du type contribute.xml, qui
•
•
•
•
s’affiche dans un dossier nomm&eacute; _mm dans le dossier racine du site et contient des
informations utilis&eacute;es par Contribute pour la gestion du site ;
des versions pr&eacute;c&eacute;dentes de fichiers, dans des dossiers nomm&eacute;s _baks (voir Activation de l’acc&egrave;s
aux mod&egrave;les sans l’acc&egrave;s au dossier racine pour les utilisateurs de Contribute, page 151) ;
des versions temporaires de pages, afin que les utilisateurs puissent afficher un aper&ccedil;u des
modifications ;
des fichiers de verrouillage temporaires, indiquant qu’une page sp&eacute;cifique est en cours de
modification ou affich&eacute;e en aper&ccedil;u ;
des fichiers Design Notes contenant des m&eacute;tadonn&eacute;es relatives aux pages du site.
En g&eacute;n&eacute;ral, vous ne devez pas modifier ces fichiers sp&eacute;ciaux Contribute dans Dreamweaver ;
Dreamweaver les g&egrave;re automatiquement.
Si vous ne souhaitez pas que ces fichiers sp&eacute;ciaux Contribute apparaissent sur votre serveur
publiquement accessible, vous pouvez d&eacute;finir un serveur interm&eacute;diaire sur lequel les utilisateurs
de Contribute pourront travailler sur les pages. Vous pouvez ensuite r&eacute;guli&egrave;rement copier ces
pages Web du serveur interm&eacute;diaire au serveur de production qui se trouve sur Web. Si vous
utilisez un serveur interm&eacute;diaire, copiez uniquement les pages Web sur le serveur de production.
Ne copiez aucun des fichiers sp&eacute;ciaux Contribute mentionn&eacute;s ci-dessus. En particulier, ne copiez
pas les dossiers _mm et _baks sur le serveur de production.
Remarque : Pour plus d’informations sur la configuration d’un serveur pour &eacute;viter que les visiteurs ne
voient les fichiers des dossiers commen&ccedil;ant par un soulign&eacute;, voir le chapitre traitant de la s&eacute;curit&eacute; des
sites Web de l’aide de Contribute, dans la section relative &agrave; l’administration de Contribute.
Si vous n’utilisez pas de serveur interm&eacute;diaire, vous pouvez, de temps &agrave; autre, supprimer
manuellement les anciennes versions dans les dossiers _baks afin de vous assurer que les visiteurs
ne puissent pas les afficher. Parfois, vous devrez supprimer manuellement d’autres fichiers
Contribute sp&eacute;ciaux.
Par exemple, si Contribute n’arrive pas &agrave; supprimer des pages temporaires d’aper&ccedil;u, une fois
l’aper&ccedil;u ferm&eacute; par l’utilisateur, vous devez supprimer ces pages temporaires manuellement. Le
nom de fichier des pages temporaires d’aper&ccedil;u commence par TMP.
De m&ecirc;me, un fichier de verrouillage obsol&egrave;te peut accidentellement rester sur le serveur. Dans ce
cas, vous devez le supprimer manuellement pour que les autres utilisateurs puissent modifier la
page. Pour plus d’informations sur la suppression d’un fichier de verrouillage, voir D&eacute;verrouillage
d’un fichier dans un site Contribute, page 152.
Pr&eacute;paration d’un site &agrave; utiliser avec Contribute
Avant de pouvoir utiliser Dreamweaver pour la gestion d’un site Contribute, vous devez activer la
compatibilit&eacute; avec Contribute. En fonction du site auquel vous vous connectez, vous serez peut&ecirc;tre invit&eacute; &agrave; activer la compatibilit&eacute; avec Contribute.
Remarque : Lorsque vous activez la compatibilit&eacute; avec Contribute, Dreamweaver active
automatiquement Design Notes (y compris l’option T&eacute;l&eacute;charger les Design Notes pour les partager),
ainsi que le syst&egrave;me d’archivage et d’extraction de fichiers.
Pr&eacute;paration d’un site &agrave; utiliser avec Contribute
147
Pour activer la compatibilit&eacute; avec Contribute pour un site Dreamweaver d&eacute;fini :
1 Choisissez Site &gt; G&eacute;rer les sites.
2
3
4
5
6
7
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
S&eacute;lectionnez un site, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
Cliquez sur l’onglet Avanc&eacute;.
S&eacute;lectionnez la cat&eacute;gorie Contribute dans la liste de gauche.
S&eacute;lectionnez l’option Activer la compatibilit&eacute; de Contribute et renseignez la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide.
Cliquez sur OK pour fermer la bo&icirc;te de dialogue D&eacute;finition du site.
Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue G&eacute;rer les sites.
Rubriques connexes
• Connexion &agrave; un site pour la compatibilit&eacute; avec Contribute, page 145
Administration d’un site Contribute &agrave; l’aide de Dreamweaver
Apr&egrave;s avoir activ&eacute; la compatibilit&eacute; avec Contribute (voir Pr&eacute;paration d’un site &agrave; utiliser avec
Contribute, page 147), vous pouvez utiliser Dreamweaver pour lancer Contribute afin d’effectuer
les t&acirc;ches d’administration du site.
Remarque : Contribute doit &ecirc;tre install&eacute; sur le m&ecirc;me ordinateur que Dreamweaver.
En tant qu’administrateur d’un site Contribute, vous pouvez effectuer les op&eacute;rations suivantes :
• modifier les param&egrave;tres au niveau du site ;
•
•
Les param&egrave;tres au niveau du site sont compos&eacute;s du mot de passe administrateur, de l’adresse
&eacute;lectronique de l’administrateur et du nombre de r&eacute;visions enregistr&eacute;es sur le serveur.
modifier les autorisations accord&eacute;es aux groupe d’utilisateurs de Contribute ;
d&eacute;finir les utilisateurs de Contribute.
Les utilisateurs de Contribute n&eacute;cessitent certaines informations sur le site pour pouvoir s’y
connecter. Vous pouvez regrouper toutes ces informations dans un fichier, appel&eacute; cl&eacute; de
connexion, que vous envoyez aux utilisateurs de Contribute.
Remarque : Une cl&eacute; de connexion ne correspond pas &agrave; un fichier de site Dreamweaver export&eacute;.
Pour exporter les informations de site &agrave; utiliser avec Dreamweaver, voir Importation et exportation
de sites, page 105.
Conseil : Avant de donner aux utilisateurs de Contribute les informations de connexion dont ils ont
besoin pour modifier les pages, utilisez Dreamweaver pour cr&eacute;er la hi&eacute;rarchie de dossiers de base
de votre site (voir Structure du site et conception de pages pour un site Contribute, page 144), ainsi
que les mod&egrave;les et les feuilles de style CSS n&eacute;cessaires au site (voir Cr&eacute;ation de mod&egrave;les pour un
site Contribute, page 241).
Pour administrer un site Web Contribute dans Dreamweaver :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
148
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
3 Cliquez sur l’onglet Avanc&eacute;.
4 S&eacute;lectionnez la cat&eacute;gorie Contribute dans la liste de gauche.
5 Cliquez sur le bouton Administrer le site dans Contribute.
Remarque : Ce bouton s’affiche uniquement si vous avez activ&eacute; la compatibilit&eacute; avec Contribute.
Pour plus d’informations sur la fa&ccedil;on d’activer cette option, voir Pr&eacute;paration d’un site &agrave; utiliser avec
Contribute, page 147.
Si le site est prot&eacute;g&eacute; par un mot de passe, une bo&icirc;te de dialogue appara&icirc;t et vous demande
d’entrer votre nom d’utilisateur et votre mot de passe. Tapez votre nom d’utilisateur et votre
mot de passe, puis cliquez sur OK.
La bo&icirc;te de dialogue Mot de passe administrateur s’affiche.
6 Entrez le mot de passe administrateur, puis cliquez sur OK.
Si le site n’a pas d’administrateur, une bo&icirc;te de dialogue s’affiche vous proposant de le devenir.
Cliquez sur Oui, entrez et confirmez le mot de passe administrateur du site, puis cliquez sur
OK.
La bo&icirc;te de dialogue Administration du site Web s’affiche.
7 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Pour modifier les param&egrave;tres d’administration, cliquez sur le bouton Param&egrave;tres au niveau
du site, puis modifiez les param&egrave;tres n&eacute;cessaires dans la bo&icirc;te de dialogue Param&egrave;tres au
niveau du site.
■ Pour modifier les param&egrave;tres de groupe d’autorisations, s&eacute;lectionnez un groupe
d’autorisations (le cas &eacute;ch&eacute;ant), cliquez sur l’un des boutons des sections Groupes
d’autorisations, puis renseignez la bo&icirc;te de dialogue.
■ Pour envoyer une cl&eacute; de connexion afin de d&eacute;finir les utilisateurs, cliquez sur le bouton
Envoyer la cl&eacute; de connexion, puis renseignez l’Assistant de connexion.
Remarque : Pour plus d’informations sur les param&egrave;tres au niveau du site, la gestion des
utilisateurs et des autorisations ou la cr&eacute;ation d’un code de connexion, voir la section relative &agrave;
l’administration de Contribute dans l’aide de Contribute.
8 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Administration du site Web.
9 Cliquez sur OK pour fermer la bo&icirc;te de dialogue D&eacute;finition du site.
10 Cliquez sur Termin&eacute; pour fermer la bo&icirc;te de dialogue Modifier les sites.
Rubriques connexes
• Gestion des fichiers Contribute dans Dreamweaver, page 150
D&eacute;pannage d’un site Contribute
Si vous rencontrez un probl&egrave;me avec un site Contribute, reportez-vous aux rubriques ci-apr&egrave;s
pour obtenir des informations sur la r&eacute;solution du probl&egrave;me :
• Pour les probl&egrave;mes de connexion &agrave; un site Contribute, voir D&eacute;pannage des probl&egrave;mes de
connexion pour un site Contribute, page 150.
• Pour les probl&egrave;mes d’utilisation des outils d’administration, voir D&eacute;pannage des outils
d’administration de Contribute, page 150.
Pour plus d’informations de d&eacute;pannage, consultez la section consacr&eacute;e au d&eacute;pannage dans la
section relative &agrave; l’administration de Contribute, dans l’aide de Contribute.
D&eacute;pannage d’un site Contribute
149
D&eacute;pannage des probl&egrave;mes de connexion pour un site Contribute
Lorsque vous cliquez sur un bouton li&eacute; &agrave; l’administration d’un site Contribute, Dreamweaver
v&eacute;rifie qu’il peut se connecter au site distant et que l’URL de la racine du site indiqu&eacute;e pour le site
est valide. Si Dreamweaver ne peut pas se connecter ou si l’URL n’est pas valide, un message
d’erreur s’affiche.
Pour v&eacute;rifier une connexion Contribute :
1 V&eacute;rifiez l’URL de la racine du site dans la cat&eacute;gorie Contribute de la bo&icirc;te de dialogue
D&eacute;finition de site en ouvrant cette URL dans un navigateur, pour vous assurer qu’elle ouvre la
bonne page.
2 Cliquez sur le bouton Tester dans la cat&eacute;gorie Infos distantes de la bo&icirc;te de dialogue D&eacute;finition
du site pour vous assurer que vous pouvez vous connecter au site.
3 Si l’URL est correcte mais qu’un message d’erreur s’affiche lorsque vous effectuez un test,
contactez votre administrateur syst&egrave;me pour obtenir de l’aide.
D&eacute;pannage des outils d’administration de Contribute
Si les outils d’administration ne fonctionnent pas correctement, cela peut &ecirc;tre d&ucirc; au dossier _mm.
Pour v&eacute;rifier le dossier _mm :
1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d’&eacute;criture pour le
dossier _mm.
2 V&eacute;rifiez que le dossier _mm contient un fichier de param&egrave;tres partag&eacute;s portant un nom du type
contribute.xml.
3 Si ce n’est pas le cas, utilisez l’Assistant de connexion pour cr&eacute;er une connexion au site et devenir
administrateur du site.
Le fichier de param&egrave;tres partag&eacute;s est cr&eacute;&eacute; automatiquement lorsque vous devenez
administrateur. Pour plus d’informations sur la fa&ccedil;on de devenir administrateur d’un site Web
Contribute existant, voir la section relative &agrave; l’administration de Contribute dans l’aide de
Contribute.
Rubriques connexes
• D&eacute;pannage des probl&egrave;mes de connexion pour un site Contribute, page 150
Gestion des fichiers Contribute dans Dreamweaver
La plupart des options Dreamweaver fonctionnent avec un site Contribute comme avec tout autre
site. Toutefois, lorsque vous utilisez Dreamweaver avec un site Contribute, Dreamweaver effectue
automatiquement certaines op&eacute;rations de gestion de fichiers, telles que l’enregistrement de
diff&eacute;rentes versions d’un document.
Cette section d&eacute;crit les aspects de l’utilisation des fichiers dans un site Contribute qui diff&egrave;rent des
autres sites.
Pour plus d’informations sur le transfert de fichiers depuis et vers un site Contribute, voir
Transfert de fichiers depuis et vers un site Contribute, page 145. Pour plus d’informations sur les
fichiers sp&eacute;ciaux Contribute, voir Fichiers sp&eacute;ciaux Contribute, page 147.
150
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
Remarque : Un administrateur de site Contribute peut affecter des utilisateurs &agrave; des groupes appel&eacute;s
groupes d’autorisations et sp&eacute;cifier les op&eacute;rations que les membres de chaque groupe peuvent
effectuer. Lorsque vous g&eacute;rez les fichiers d’un site Contribute dans Dreamweaver, les restrictions du
groupe d’autorisations ne s’appliquent pas &agrave; vous ; les seules restrictions qui vous concernent sont
les autorisations de lecture et d’&eacute;criture sur le serveur. Pour plus d’informations sur les diff&eacute;rents
types d’autorisations, voir Autorisations de fichiers et de dossiers Contribute sur le serveur, page 146.
Suppression, d&eacute;placement ou changement de nom d’un fichier distant d’un
site Contribute
Pour supprimer un fichier d’un serveur distant qui h&eacute;berge un site Contribute, proc&eacute;dez de la
m&ecirc;me fa&ccedil;on que pour supprimer un fichier sur le serveur de tout site Dreamweaver. Toutefois,
lorsque vous supprimez un fichier d’un site Contribute, Dreamweaver vous demande si vous
souhaitez supprimer les anciennes versions du fichier. Si vous d&eacute;cidez de les conserver,
Dreamweaver enregistre &eacute;galement une copie de la version actuelle afin que vous puissiez la
restaurer ult&eacute;rieurement.
Pour modifier le nom d’un fichier distant ou d&eacute;placer le fichier d’un dossier &agrave; un autre dans un
site Contribute, proc&eacute;dez de la m&ecirc;me fa&ccedil;on que sur tout site Dreamweaver. Dans un site
Contribute, Dreamweaver renomme ou d&eacute;place &eacute;galement les anciennes versions du fichier
associ&eacute;es qui sont enregistr&eacute;es dans le dossier _baks.
Pour supprimer un fichier distant :
1 S&eacute;lectionnez le fichier dans le volet distant du panneau Fichiers (Fen&ecirc;tre &gt; Fichiers) et appuyez
sur Retour arri&egrave;re (Windows) ou Arri&egrave;re (Macintosh).
Une bo&icirc;te de dialogue s’affiche vous demandant de confirmer la suppression du fichier.
2 Si l’option Supprimer les versions de restauration s’affiche dans la bo&icirc;te de dialogue de
confirmation, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Pour supprimer toutes les versions pr&eacute;c&eacute;dentes du fichier ainsi que la version actuelle,
s&eacute;lectionnez l’option Supprimer les versions de restauration.
■ Pour conserver les anciennes versions sur le serveur, d&eacute;s&eacute;lectionnez l’option Supprimer les
versions de restauration.
3 Cliquez sur Oui pour supprimer le fichier.
Le fichier est supprim&eacute;. Si vous avez choisi de supprimer les versions pr&eacute;c&eacute;dentes, elles sont
&eacute;galement supprim&eacute;es. Si vous avez choisi de ne pas les supprimer, une copie de la version
actuelle est enregistr&eacute;e dans le dossier _baks en tant que nouvelle r&eacute;vision du fichier.
Rubriques connexes
• D&eacute;verrouillage d’un fichier dans un site Contribute, page 152
Activation de l’acc&egrave;s aux mod&egrave;les sans l’acc&egrave;s au dossier racine pour les
utilisateurs de Contribute
Dans un site Contribute, vous devez g&eacute;rer les autorisations de lecture et d’&eacute;criture sous-jacentes
attribu&eacute;es aux fichiers et aux dossiers par le serveur directement sur le serveur. Pour plus
d’informations, voir Autorisations de fichiers et de dossiers Contribute sur le serveur, page 146.
Lorsque vous d&eacute;finissez un site, nous vous conseillons d’accorder aux utilisateurs des droits d’acc&egrave;s
en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu’au
dossier /Templates et &agrave; tous les dossiers contenant des ressources dont ils auront besoin.
Gestion des fichiers Contribute dans Dreamweaver
151
Si pour une raison quelconque, vous ne pouvez pas accorder de droits d’acc&egrave;s en lecture au
dossier /Templates, vous pouvez tout de m&ecirc;me rendre les mod&egrave;les accessibles aux utilisateurs.
Pour que les utilisateurs de Contribute puissent utiliser les mod&egrave;les sans disposer de droits
d’acc&egrave;s en lecture au dossier racine du site principal :
1 D&eacute;finissez le site Contribute afin que le dossier racine soit le dossier qui s’affiche en tant que
racine pour les utilisateurs.
2 Copiez manuellement le dossier de mod&egrave;les du dossier racine du site principal dans le dossier
racine du site Contribute, &agrave; l’aide du panneau Fichiers.
3 Apr&egrave;s avoir modifi&eacute; le site principal, recopiez les mod&egrave;les modifi&eacute;s dans les sous-dossiers
appropri&eacute;s.
Si vous faites appel &agrave; cette m&eacute;thode de &laquo; sous-site &raquo;, n’utilisez pas de liens relatifs &agrave; la racine du site
dans les sous-sites. Les liens relatifs &agrave; la racine du site sont associ&eacute;s au dossier racine principal du
serveur, et non au dossier racine d&eacute;fini dans Dreamweaver. Les utilisateurs de Contribute ne
peuvent pas cr&eacute;er de liens relatifs &agrave; la racine du site. Pour plus d’informations sur les liens relatifs &agrave;
la racine du site, voir Description des emplacements et chemins d’acc&egrave;s des documents, page 330.
Si les liens d’une page Contribute apparaissent rompus, il peut s’agir d’un probl&egrave;me
d’autorisations pour le dossier, en particulier si les liens renvoient &agrave; des pages qui ne se trouvent
pas dans le dossier racine de l’utilisateur de Contribute. V&eacute;rifiez les autorisations de lecture et
d’&eacute;criture pour les dossiers sur le serveur.
D&eacute;verrouillage d’un fichier dans un site Contribute
Il peut arriver qu’un fichier distant d’un site Contribute apparaisse comme &eacute;tant extrait mais qu’il
ne soit pas vraiment verrouill&eacute; sur l’ordinateur de l’utilisateur. Dans ce cas, d&eacute;verrouillez le fichier
pour que les utilisateurs puissent le modifier.
Remarque : Avant de suivre cette proc&eacute;dure, assurez-vous que le fichier n’est pas extrait. Si vous
d&eacute;verrouillez un fichier alors qu’un utilisateur de Contribute est en train de le modifier, plusieurs
utilisateurs risquent de modifier le fichier en m&ecirc;me temps, ce qui peut entra&icirc;ner une perte de donn&eacute;es.
Pour d&eacute;verrouiller un fichier extrait :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Ouvrez le fichier dans la fen&ecirc;tre Document, puis choisissez Site &gt; Annuler extraction.
Dans le panneau Fichiers (Fen&ecirc;tre &gt; Fichiers), cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Annuler extraction.
Une bo&icirc;te de dialogue peut s’afficher, qui indique l’utilisateur ayant extrait le fichier et
demande de confirmer le d&eacute;verrouillage du fichier.
2 Si cette bo&icirc;te de dialogue s’affiche, cliquez sur Oui pour confirmer.
Le fichier est d&eacute;verrouill&eacute; sur le serveur.
■
■
152
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
Cr&eacute;ez des mises en page sophistiqu&eacute;es &agrave; l’aide des outils de cr&eacute;ation visuelle de Macromedia
Dreamweaver MX 2004.
Cette partie du manuel contient les chapitres suivants :
Chapitre 7, Mise en forme des pages avec les styles CSS, page 155
Chapitre 8, Pr&eacute;sentation de contenu &agrave; l’aide de tableaux, page 173
Chapitre 9, Mise en forme des pages avec le mode Mise en forme, page 193
Chapitre 10, Utilisation de cadres, page 209
Chapitre 11, Gestion des mod&egrave;les, page 225
PARTIE III
PARTIE III
Mise en forme des pages
CHAPITRE 7
Mise en forme des pages avec les styles CSS
Dans Macromedia Dreamweaver MX 2004, les feuilles de style en cascade (CSS) permettent
d’ajouter des blocs de contenu &agrave; un document pour en effectuer la mise en forme. Vous pouvez
ins&eacute;rer des balises div et appliquer les styles de positionnement CSS ou utiliser les calques
Dreamweaver pour r&eacute;aliser votre mise en forme.
Remarque : Dreamweaver traite toutes les balises div &agrave; position absolue ou relative comme des
calques.
Conseil : Vous pouvez utiliser un fichier de conception de Dreamweaver comme point de d&eacute;part pour
la mise en forme CSS. S&eacute;lectionnez un fichier dans la cat&eacute;gorie Conceptions de page (CSS) de la
bo&icirc;te de dialogue Nouveau document (voir Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception
Dreamweaver, page 76).
Que vous utilisiez des styles CSS, des tableaux ou des cadres pour la mise en forme de vos pages,
Dreamweaver est muni de r&egrave;gles et de grilles pour vous guider. Dreamweaver dispose &eacute;galement
d’une fonction de trac&eacute; de l’image que vous pouvez utiliser pour recr&eacute;er la conception d’une page
pr&eacute;c&eacute;demment r&eacute;alis&eacute;e dans une application graphique.
Remarque : Si vous n’avez pas l’habitude d’utiliser des calques et des feuilles de style en cascade
(CSS), mais que vous ma&icirc;trisez l’utilisation de tableaux, pr&eacute;f&eacute;rez les tableaux ou le mode Mise en
forme pour effectuer la mise en forme de vos pages (voir Pr&eacute;sentation de contenu &agrave; l’aide de tableaux,
page 173 et Mise en forme des pages avec le mode Mise en forme, page 193).
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
A propos des calques de Dreamweaver, page 156
Insertion de blocs de contenu pour la mise en forme, page 157
Modification de la couleur de surbrillance des blocs de contenu, page 158
Utilisation des blocs de contenu pour la mise en forme, page 159
Insertion d’un calque, page 160
D&eacute;finition des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s de calques, page 162
Gestion des calques, page 163
Manipulation des calques, page 166
Conversion des calques en tableaux, page 168
Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages, page 170
Utilisation du trac&eacute; de l’image, page 171
155
A propos des calques de Dreamweaver
Un calque est un &eacute;l&eacute;ment de page HTML que vous pouvez placer &agrave; l’endroit de votre choix sur
votre page. Les calques peuvent comporter du texte, des images ou tout autre contenu &agrave; placer au
sein d’un document HTML.
Remarque : Dans Dreamweaver, un calque est une balise div ayant une position absolue ou relative.
Dans ce chapitre, les calques dont il est question se rapportent au concept adopt&eacute; par Dreamweaver
pour la mise en forme, et non pas &agrave; la balise layer.
Description des calques
Dreamweaver vous permet d’effectuer la mise en forme d’une page &agrave; l’aide de calques. Vous
pouvez placer les calques devant ou derri&egrave;re d’autres calques, masquer certains d’entre eux et en
montrer d’autres ou encore d&eacute;placer les calques &agrave; l’&eacute;cran. Vous pouvez placer une image d’arri&egrave;replan dans un calque, puis placer un deuxi&egrave;me calque contenant du texte avec un arri&egrave;re-plan
transparent devant ce dernier.
Les calques offrent une grande souplesse dans le placement de contenu. Les navigateurs Web
ant&eacute;rieurs &agrave; Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0 ne les affichent cependant
pas et les navigateurs de la version 4 ne les affichent pas toujours de la m&ecirc;me fa&ccedil;on.
Pour que votre page Web puisse &ecirc;tre visualis&eacute;e par tous les utilisateurs, vous pouvez effectuer votre
mise en page avec des calques, puis les convertir en tableaux. Pour plus d’informations, voir
Conversion des calques en tableaux, page 168. N&eacute;anmoins, si vous pensez que les visiteurs de votre
site disposeront de navigateurs plus r&eacute;cents, vous pouvez effectuer vos mises en page en utilisant
uniquement des calques, sans les convertir en tableaux.
Rubriques connexes
• Gestion des calques, page 163
Code HTML pour les calques
Lorsque vous placez un calque dans un document, Dreamweaver ins&egrave;re la balise HTML
correspondant &agrave; ce calque dans votre code. Selon vos pr&eacute;f&eacute;rences, Dreamweaver peut utiliser la
balise div ou la balise span pour vos calques. Par d&eacute;faut, Dreamweaver cr&eacute;e des calques en
utilisant la balise div. Pour changer la balise par d&eacute;faut, voir D&eacute;finition des pr&eacute;f&eacute;rences des calques,
page 162.
Remarque : Deux autres balises peuvent &ecirc;tre utilis&eacute;es pour la cr&eacute;ation de calques : layer et ilayer.
Cependant, seul Netscape Navigator 4 prend ces balises en charge, contrairement &agrave; Internet
Explorer et aux versions les plus r&eacute;centes de Netscape. Dreamweaver reconna&icirc;t les balises layer et
ilayer, mais il ne les utilise pas pour la cr&eacute;ation de calques.
Les balises div et span se distinguent par le fait que les navigateurs qui ne prennent pas en charge
les calques placent des sauts de ligne suppl&eacute;mentaires avant et apr&egrave;s la balise div ; la balise div est
un &eacute;l&eacute;ment au niveau du bloc, alors que la balise span est un &eacute;l&eacute;ment incorpor&eacute;. En g&eacute;n&eacute;ral, dans
les navigateurs qui ne prennent pas les calques en charge, il est pr&eacute;f&eacute;rable que le contenu de ces
derniers apparaisse dans un paragraphe ind&eacute;pendant ; c’est pourquoi il est conseill&eacute; d’utiliser la
balise div plut&ocirc;t que la balise span.
156
Chapitre 7 : Mise en forme des pages avec les styles CSS
Pour am&eacute;liorer la lisibilit&eacute; du contenu dans les navigateurs plus anciens, il est important de bien
placer le code du calque. Le code qui d&eacute;finit le calque peut se trouver n’importe o&ugrave; dans le fichier
HTML. Lorsque vous dessinez un calque dans Dreamweaver, il appara&icirc;t &agrave; l’endroit du dessin,
mais Dreamweaver ins&egrave;re le code du calque au d&eacute;but de la page, juste apr&egrave;s la balise body. Si vous
utilisez la commande Ins&eacute;rer un calque au lieu de dessiner un calque, le code du calque est ins&eacute;r&eacute;
&agrave; l’emplacement du point d’insertion. Si vous cr&eacute;ez un calque imbriqu&eacute;, Dreamweaver ins&egrave;re le
code au sein de la balise qui d&eacute;finit le calque parent.
Remarque : Quelle que soit la balise utilis&eacute;e, les versions d’Internet Explorer et de Netscape
Navigator ant&eacute;rieures &agrave; la version 4.0 affichent le contenu des calques, mais ne les positionnent pas.
Le contenu du calque appara&icirc;t &agrave; l’emplacement de son code sur la page ; par exemple, si le code se
trouve en d&eacute;but de page, le contenu du calque appara&icirc;t aussi en d&eacute;but de page dans les navigateurs
qui ne prennent pas les calques en charge.
Ce qui suit est un &eacute;chantillon de code HTML pour un calque :
&lt;div id=&quot;Layer1&quot; style=&quot;position:absolute; visibility:inherit; width:200px;
height:115px; z-index:1&quot;&gt;
&lt;/div&gt;
Ce qui suit est un &eacute;chantillon de code HTML pour un calque imbriqu&eacute; dans un autre calque :
&lt;div id=&quot;Parent&quot; style=&quot;position:absolute; left:56px; top:54px; width:124px;
height:158px; z-index:1;&quot;&gt;
Contenu du calque parent.
&lt;div id=&quot;Nested&quot; style=&quot;position:absolute; left:97px; top:114px; width:54px;
height:69px; z-index:1;&quot;&gt;
Contenu du calque imbriqu&eacute;.
&lt;/div&gt;
&lt;/div&gt;
Vous pouvez d&eacute;finir les propri&eacute;t&eacute;s des calques de votre page, y compris les coordonn&eacute;es x et y,
l’index z (&eacute;galement appel&eacute; ordre de superposition) et la visibilit&eacute;. Pour plus d’informations, voir
D&eacute;finition des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s de calques, page 162.
Rubriques connexes
• Description des calques, page 156
Insertion de blocs de contenu pour la mise en forme
Vous pouvez utiliser des balises div pour placer des blocs de contenu dans votre document. Ceci
est particuli&egrave;rement utile si une feuille de style CSS existante, contenant des styles de
positionnement, est associ&eacute;e &agrave; votre document. Dreamweaver vous permet d’ins&eacute;rer rapidement
une balise div et d’y appliquer les styles existants.
Remarque : Vous pouvez utiliser un fichier de conception de Dreamweaver comme point de d&eacute;part
pour la mise en forme CSS. S&eacute;lectionnez un fichier dans la cat&eacute;gorie Conceptions de page (CSS) de
la bo&icirc;te de dialogue Nouveau document (voir Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception
Dreamweaver, page 76).
Pour ins&eacute;rer une balise div :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous voulez ins&eacute;rer la
balise div.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Choisissez Insertion &gt; Objets mise en forme &gt; Balise Div.
Insertion de blocs de contenu pour la mise en forme
157
Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Ins&eacute;rer la balise
Div.
La bo&icirc;te de dialogue Ins&eacute;rer la balise Div s’affiche.
■
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
La balise div s’affiche dans votre document sous la forme d’un cadre contenant du texte
d’espace r&eacute;serv&eacute;. Lorsque vous d&eacute;placez le pointeur &agrave; l’int&eacute;rieur de la zone, Dreamweaver met
cette zone en surbrillance.
Si la balise div est plac&eacute;e de mani&egrave;re absolue ou relative, elle se comporte comme un calque
Dreamweaver. Pour plus d’informations sur l’utilisation des calques, voir D&eacute;finition des pr&eacute;f&eacute;rences
et des propri&eacute;t&eacute;s de calques, page 162, Gestion des calques, page 163 ou Manipulation des calques,
page 166.
Pour plus d’informations sur l’utilisation de balises div qui ne sont pas plac&eacute;es de mani&egrave;re absolue
ou relative, voir Utilisation des blocs de contenu pour la mise en forme, page 159.
Rubriques connexes
• Utilisation des blocs de contenu pour la mise en forme, page 159
Modification de la couleur de surbrillance des blocs de contenu
Lorsque vous d&eacute;placez le pointeur sur un bloc de contenu, Dreamweaver met ce bloc en
surbrillance. Dreamweaver met en surbrillance les blocs auxquels sont associ&eacute;s une classe, un id ou
un style. Vous pouvez activer et d&eacute;sactiver la surbrillance &agrave; votre convenance ou en modifier la
couleur dans les pr&eacute;f&eacute;rences.
Pour modifier les pr&eacute;f&eacute;rences de surbrillance des blocs de contenu :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 Choisissez la cat&eacute;gorie Surbrillance dans la liste de gauche.
3 Effectuez l’une des modifications suivantes :
■
158
Pour modifier la couleur de surbrillance des blocs de contenu, cliquez dans la case de
couleur Survol et s&eacute;lectionnez une couleur de surbrillance &agrave; l’aide du s&eacute;lecteur de couleur
(ou tapez la valeur hexad&eacute;cimale correspondant &agrave; la couleur de surbrillance dans la zone de
texte).
Pour plus d’informations sur l’utilisation de la pipette, voir Utilisation des couleurs,
page 273.
Chapitre 7 : Mise en forme des pages avec les styles CSS
■
Pour activer ou d&eacute;sactiver la surbrillance des blocs de contenu, activez ou d&eacute;sactivez la case &agrave;
cocher Afficher de l’option Survol.
Remarque : Ces options ont un impact sur tous les objets (tableaux, par exemple) que
Dreamweaver met en surbrillance lorsque vous d&eacute;placez le pointeur au-dessus.
4 Cliquez sur OK.
Utilisation des blocs de contenu pour la mise en forme
Apr&egrave;s avoir ins&eacute;r&eacute; une balise div (voir Insertion de blocs de contenu pour la mise en forme,
page 157), vous pouvez manipuler le bloc de contenu ou y ajouter du contenu.
Remarque : Les balises div de blocs de contenu plac&eacute;es de mani&egrave;re absolue ou relative se
comportent comme des calques de Dreamweaver. Pour plus d’informations sur l’utilisation de ces
balises div, ignorez cette section et passez aux sections D&eacute;finition des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s
de calques, page 162, Gestion des calques, page 163 ou Manipulation des calques, page 166.
Les bordures des balises div de blocs de contenu qui ne sont pas plac&eacute;es de mani&egrave;re absolue ou
relative ne sont pas visibles, mais lorsque vous d&eacute;placez le pointeur au-dessus d’un bloc de
contenu, Dreamweaver le met en surbrillance (s’il est associ&eacute; &agrave; une classe, un id ou un style).
Pour modifier la couleur de surbrillance ou d&eacute;sactiver la surbrillance, voir Modification de la
couleur de surbrillance des blocs de contenu, page 158.
Si vous s&eacute;lectionnez un bloc de contenu qui n’est pas plac&eacute; de mani&egrave;re absolue ou relative, vous
pouvez en afficher et modifier les r&egrave;gles depuis l’inspecteur de balises. Vous pouvez ajouter du
contenu &agrave; un bloc en pla&ccedil;ant simplement le point d’insertion sur celui-ci, puis proc&eacute;dez &agrave; l’ajout
du contenu comme vous le feriez pour celui d’une page.
Pour afficher et modifier les r&egrave;gles appliqu&eacute;es &agrave; un bloc de contenu :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour s&eacute;lectionner une balise div :
■
Cliquez sur les bordures du bloc.
Conseil : Recherchez la surbrillance afin de voir les bordures.
Cliquez &agrave; l’int&eacute;rieur du bloc, puis s&eacute;lectionnez la balise div &agrave; partir du s&eacute;lecteur de balise
figurant au bas de la fen&ecirc;tre du document.
2 Si l’inspecteur de balises et l’onglet CSS ne sont pas d&eacute;j&agrave; ouverts, choisissez Fen&ecirc;tre &gt; Inspecteur
de balises, puis cliquez sur l’onglet CSS.
Les r&egrave;gles appliqu&eacute;es &agrave; la balise div s’affichent dans le panneau.
3 Effectuez les modifications n&eacute;cessaires.
■
Pour placer le point d’insertion dans un bloc afin d’y ajouter du contenu :
• Cliquez n’importe o&ugrave; &agrave; l’int&eacute;rieur du bloc.
Pour modifier le texte de l’espace r&eacute;serv&eacute; dans un bloc de contenu :
• S&eacute;lectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.
Remarque : Vous pouvez ajouter du contenu &agrave; un bloc comme vous en ajouteriez &agrave; une page.
Rubriques connexes
• Insertion de blocs de contenu pour la mise en forme, page 157
Utilisation des blocs de contenu pour la mise en forme
159
Insertion d’un calque
Dreamweaver vous permet de cr&eacute;er facilement des calques sur votre page et de les positionner avec
pr&eacute;cision. Vous pouvez &eacute;galement cr&eacute;er des calques imbriqu&eacute;s. Pour plus d’informations, voir
Imbrication des calques, page 161.
Remarque : Vous pouvez utiliser un fichier de conception de Dreamweaver comme point de d&eacute;part
pour la mise en forme CSS. S&eacute;lectionnez un fichier dans la cat&eacute;gorie Conceptions de page (CSS) de
la bo&icirc;te de dialogue Nouveau document (voir Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception
Dreamweaver, page 76).
Lorsque vous ins&eacute;rez un calque, un marqueur de calque appara&icirc;t en mode Cr&eacute;ation. Dreamweaver
affiche par d&eacute;faut les bordures de ce calque et met le bloc en surbrillance (s’il est associ&eacute; &agrave; une
classe, un id ou un style) lorsque vous placez le pointeur dessus. Vous pouvez d&eacute;sactiver le
marqueur de calque en d&eacute;sactivant les &eacute;l&eacute;ments invisibles. Vous pouvez &eacute;galement masquer les
bordures du calque. Pour modifier la couleur de surbrillance ou d&eacute;sactiver la surbrillance, voir
Modification de la couleur de surbrillance des blocs de contenu, page 158.
Remarque : Lorsque l’option El&eacute;ments invisibles est activ&eacute;e, les &eacute;l&eacute;ments de votre page peuvent
sembler se d&eacute;caler hors de la page. Cependant, les &eacute;l&eacute;ments invisibles n’apparaissent pas dans les
navigateurs, ce qui signifie que tous les &eacute;l&eacute;ments visibles apparaissent au bon emplacement lorsque
vous visualisez votre page dans un navigateur.
Une fois le calque cr&eacute;&eacute;, vous pouvez y ajouter du contenu en pla&ccedil;ant simplement votre point
d’insertion dessus, puis en ajoutant le contenu comme vous le feriez pour celui d’une page.
Pour dessiner un seul ou plusieurs calques &agrave; la suite :
1 Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Dessiner un calque.
2 Dans la fen&ecirc;tre de cr&eacute;ation du document, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Faites glisser le pointeur pour dessiner un seul calque.
Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfonc&eacute;e pour dessiner
plusieurs calques &agrave; la fois.
Vous pouvez continuer &agrave; tracer des calques tant que vous n’avez pas rel&acirc;ch&eacute; les touches Ctrl
ou Commande.
Pour ins&eacute;rer un calque &agrave; un endroit pr&eacute;cis du document :
• Placez le point d’insertion dans la fen&ecirc;tre de document, puis choisissez Insertion &gt; Calque.
Pour placer le point d’insertion dans un calque :
• Cliquez n’importe o&ugrave; &agrave; l’int&eacute;rieur du calque.
Le contour du calque est en surbrillance et la poign&eacute;e de s&eacute;lection appara&icirc;t, mais le calque luim&ecirc;me n’est pas s&eacute;lectionn&eacute;. Pour plus d’informations sur la s&eacute;lection de calques, voir S&eacute;lection des
calques, page 164.
Pour afficher ou masquer les marqueurs de calque :
• Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
Pour afficher ou masquer les bordures de calque :
• Choisissez Affichage &gt; Assistances visuelles &gt; Bordures de calque.
160
Chapitre 7 : Mise en forme des pages avec les styles CSS
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s de calques, page 162
• Gestion des calques, page 163
• Manipulation des calques, page 166
Imbrication des calques
Un calque imbriqu&eacute; est un calque dont le code est contenu dans un autre calque. L’imbrication est
souvent utilis&eacute;e pour regrouper des calques. Un calque imbriqu&eacute; se d&eacute;place avec son calque parent
et peut &ecirc;tre configur&eacute; pour h&eacute;riter de la visibilit&eacute; de son parent.
Activez l’option Imbrication si vous voulez que les calques que vous dessinez &agrave; l’int&eacute;rieur d’autres
calques soient automatiquement imbriqu&eacute;s.
Pour dessiner un calque imbriqu&eacute; :
1 Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Dessiner un calque.
2 Dans la fen&ecirc;tre de cr&eacute;ation du document, dessinez le calque &agrave; l’int&eacute;rieur d’un autre claque en
faisant glisser la souris :
Si l’option Imbriquer est d&eacute;sactiv&eacute;e dans les pr&eacute;f&eacute;rences de calque, maintenez la touche Alt
(Windows) ou Option (Macintosh) enfonc&eacute;e et faites glisser un calque pour l’imbriquer dans
un calque existant.
Conseil : Les calques imbriqu&eacute;s peuvent &ecirc;tre pr&eacute;sent&eacute;s diff&eacute;remment suivant les navigateurs.
Lorsque vous cr&eacute;ez des calques imbriqu&eacute;s, contr&ocirc;lez r&eacute;guli&egrave;rement leur pr&eacute;sentation dans les
divers navigateurs au cours du processus de cr&eacute;ation.
Pour ins&eacute;rer un calque imbriqu&eacute; :
• Placez le point d’insertion &agrave; l’int&eacute;rieur d’un calque existant dans la fen&ecirc;tre de cr&eacute;ation du
document, puis choisissez Insertion &gt; Calque.
Pour imbriquer un calque existant dans un autre calque en utilisant le panneau Calques :
1 Choisissez Fen&ecirc;tre &gt; Calques pour ouvrir le panneau Calques.
2 S&eacute;lectionnez un calque dans le panneau Calques, puis maintenez la touche Ctrl (Windows) ou
Commande (Macintosh) enfonc&eacute;e tout en faisant glisser la souris pour diriger le calque vers le
calque cible, dans le panneau Calques.
3 Rel&acirc;chez le bouton de la souris lorsque le nom du calque cible est mis en surbrillance.
Insertion d’un calque
161
Pour imbriquer automatiquement des calques lorsque vous dessinez un calque &agrave; partir d’un
autre calque :
• S&eacute;lectionnez l’option Imbrication dans les pr&eacute;f&eacute;rences de calque.
Pour plus d’informations, voir D&eacute;finition des pr&eacute;f&eacute;rences des calques, page 162.
Rubriques connexes
• Insertion d’un calque, page 160
• Gestion des calques, page 163
• Manipulation des calques, page 166
D&eacute;finition des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s de calques
Vous pouvez sp&eacute;cifier des param&egrave;tres de calque par d&eacute;faut. Vous pouvez &eacute;galement afficher et
d&eacute;finir les diff&eacute;rents attributs d’un ou de plusieurs calques &agrave; l’aide de l’inspecteur de propri&eacute;t&eacute;s.
D&eacute;finition des pr&eacute;f&eacute;rences des calques
Utilisez la cat&eacute;gorie Calques dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences pour indiquer les param&egrave;tres
par d&eacute;faut des nouveaux calques cr&eacute;&eacute;s.
Pour afficher ou d&eacute;finir les pr&eacute;f&eacute;rences de calque :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 Choisissez la cat&eacute;gorie Calques dans la liste de gauche.
3 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Rubriques connexes
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s de plusieurs calques, page 163
Affichage et d&eacute;finition des propri&eacute;t&eacute;s pour un seul calque
Lorsque vous s&eacute;lectionnez un calque, l’inspecteur de propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s du calque.
Pour afficher et d&eacute;finir les propri&eacute;t&eacute;s du calque :
1 S&eacute;lectionnez un calque (voir S&eacute;lection des calques, page 164).
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d’agrandissement
situ&eacute;e dans le coin inf&eacute;rieur droit (si l’inspecteur est affich&eacute; en mode r&eacute;duit) pour visualiser
toutes les propri&eacute;t&eacute;s.
3 Modifiez les attributs du calque en d&eacute;finissant les propri&eacute;t&eacute;s, si n&eacute;cessaire.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
162
Chapitre 7 : Mise en forme des pages avec les styles CSS
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences des calques, page 162
• Gestion des calques, page 163
Affichage et d&eacute;finition des propri&eacute;t&eacute;s de plusieurs calques
Lorsque vous s&eacute;lectionnez plusieurs calques, l’inspecteur de propri&eacute;t&eacute;s des calques affiche les
propri&eacute;t&eacute;s du texte et un sous-ensemble de propri&eacute;t&eacute;s de calque standard, ce qui vous permet de
modifier plusieurs calques simultan&eacute;ment.
Pour s&eacute;lectionner plusieurs calques :
• S&eacute;lectionnez les calques en maintenant la touche Maj enfonc&eacute;e (voir S&eacute;lection des calques,
page 164).
Pour afficher et d&eacute;finir les propri&eacute;t&eacute;s de plusieurs calques :
1 S&eacute;lectionnez plusieurs calques.
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d’agrandissement
situ&eacute;e dans le coin inf&eacute;rieur droit (si l’inspecteur est affich&eacute; en mode r&eacute;duit) pour visualiser
toutes les propri&eacute;t&eacute;s.
3 Modifiez les attributs des calques en d&eacute;finissant les propri&eacute;t&eacute;s.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences des calques, page 162
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s pour un seul calque, page 162
Gestion des calques
Vous pouvez travailler avec les calques que vous s&eacute;lectionnez. Vous pouvez modifier l’ordre de
superposition et la visibilit&eacute; des calques. Le panneau Calques permet de g&eacute;rer facilement les
calques.
Utilisation du panneau Calques
Le panneau Calques vous permet de g&eacute;rer les calques dans votre document. Utilisez le panneau
Calques pour emp&ecirc;cher les calques de se chevaucher, pour en modifier la visibilit&eacute;, pour les
imbriquer ou les superposer et pour en s&eacute;lectionner un ou plusieurs.
Les calques sont affich&eacute;s sous la forme d’une liste de noms, dans l’ordre de l’index Z ; le premier
calque cr&eacute;&eacute; appara&icirc;t en bas de la liste et le dernier calque cr&eacute;&eacute; appara&icirc;t en haut de la liste.
Pour ouvrir le panneau Calques :
• Choisissez Fen&ecirc;tre &gt; Calques.
Gestion des calques
163
Pour afficher ou masquer les calques imbriqu&eacute;s :
• Cliquez sur les boutons Plus (+) ou Moins (–) (Windows) ou sur la fl&egrave;che d’agrandissement
(Macintosh) en regard du nom du calque.
Les calques imbriqu&eacute;s s’affichent sous la forme de noms li&eacute;s &agrave; des calques parents.
Rubriques connexes
• Insertion d’un calque, page 160
• Modification de l’ordre de superposition des calques, page 165
• visibilit&eacute; des calques, page 166
S&eacute;lection des calques
Vous pouvez s&eacute;lectionner un ou plusieurs calques pour les manipuler ou en modifier les
propri&eacute;t&eacute;s.
Pour s&eacute;lectionner un calque dans le panneau Calques :
• Dans le panneau Calques (Fen&ecirc;tre &gt; Calques), cliquez sur le nom du calque.
Pour s&eacute;lectionner un calque dans la fen&ecirc;tre de document, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Cliquez sur la poign&eacute;e de s&eacute;lection d’un calque.
Si la poign&eacute;e n’est pas visible, cliquez n’importe o&ugrave; dans le calque pour la faire appara&icirc;tre.
• Cliquez sur la bordure d’un calque.
• Cliquez &agrave; l’int&eacute;rieur du calque en appuyant sur les touches Contr&ocirc;le et Maj (Windows) ou
•
164
Commande et Maj (Macintosh).
Si plusieurs calques &eacute;taient s&eacute;lectionn&eacute;s, ils sont tous d&eacute;s&eacute;lectionn&eacute;s et seul le calque sur lequel
vous avez cliqu&eacute; est s&eacute;lectionn&eacute;.
Cliquez sur le marqueur de calque (en mode Cr&eacute;ation) qui repr&eacute;sente l’emplacement du calque
dans le code HTML.
S’il n’est pas visible, choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
Chapitre 7 : Mise en forme des pages avec les styles CSS
Pour s&eacute;lectionner plusieurs calques, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Calques (Fen&ecirc;tre &gt; Calques), appuyez sur la touche Maj tout en cliquant sur
•
plusieurs noms de calques.
Dans la fen&ecirc;tre de document, appuyez sur la touche Maj tout en cliquant &agrave; l’int&eacute;rieur d’un ou
de plusieurs calques ou sur leur bordure.
Lorsque plusieurs calques sont s&eacute;lectionn&eacute;s, les poign&eacute;es du dernier calque s&eacute;lectionn&eacute;
apparaissent en surbrillance noire. Les poign&eacute;es des autres calques apparaissent en blanc.
Rubriques connexes
•
•
•
•
Insertion d’un calque, page 160
D&eacute;finition des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s de calques, page 162
Gestion des calques, page 163
Manipulation des calques, page 166
Modification de l’ordre de superposition des calques
Utilisez l’inspecteur de propri&eacute;t&eacute;s ou le panneau Calques pour modifier l’ordre de superposition
des calques. Le calque situ&eacute; dans le haut de la liste du panneau Calques est au premier rang de
l’ordre de superposition et appara&icirc;t avant les autres calques.
En code HTML, l’ordre de superposition, ou index Z, d&eacute;termine l’ordre dans lequel les calques
sont dessin&eacute;s dans un navigateur. Vous pouvez modifier l’index Z de chaque calque dans le
panneau Calques ou dans l’inspecteur de propri&eacute;t&eacute;s.
Pour modifier l’ordre de superposition des calques dans le panneau Calques :
1 Choisissez Fen&ecirc;tre &gt; Calques pour ouvrir le panneau Calques.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Faites glisser un calque &agrave; l’emplacement d&eacute;sir&eacute; dans la hi&eacute;rarchie de l’ordre de superposition.
Une ligne indiquant le futur emplacement du calque appara&icirc;t lorsque vous d&eacute;placez le
calque. Rel&acirc;chez le bouton de la souris lorsque la ligne appara&icirc;t &agrave; l’emplacement souhait&eacute;
dans l’ordre de superposition.
Dans la colonne Z, cliquez sur le num&eacute;ro du calque &agrave; modifier. Tapez ensuite une valeur
sup&eacute;rieure ou inf&eacute;rieure &agrave; la valeur existante pour d&eacute;placer le calque, selon le cas, vers le haut
ou vers le bas de l’ordre de superposition.
Pour modifier l’ordre de superposition des calques &agrave; l’aide de l’inspecteur de propri&eacute;t&eacute;s :
1 Choisissez Fen&ecirc;tre &gt; Calques pour ouvrir le panneau Calques et visualiser l’ordre de
superposition en cours.
2 S&eacute;lectionnez un calque dans le panneau Calques ou dans la fen&ecirc;tre de document.
3 Dans l’inspecteur de propri&eacute;t&eacute;s du calque (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), tapez un nombre dans la zone
de texte Index Z.
■ Tapez une valeur sup&eacute;rieure pour &laquo; monter &raquo; le calque dans l’ordre de superposition.
■ Tapez une valeur inf&eacute;rieure pour &laquo; descendre &raquo; le calque dans l’ordre de superposition.
Rubriques connexes
• Utilisation du panneau Calques, page 163
Gestion des calques
165
• S&eacute;lection des calques, page 164
visibilit&eacute; des calques
Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les calques
manuellement, &agrave; l’aide du panneau Calques, pour voir comment la page appara&icirc;tra dans
diff&eacute;rentes situations.
Remarque : Le calque s&eacute;lectionn&eacute; devient toujours visible et appara&icirc;t devant les autres calques.
Pour modifier la visibilit&eacute; d’un calque :
1 Choisissez Fen&ecirc;tre &gt; Calques pour ouvrir le panneau Calques.
2 Cliquez sur l’ic&ocirc;ne en forme d’œil pour en changer la visibilit&eacute;.
■
■
■
Un œil ouvert signifie que le calque est visible.
Un œil ferm&eacute; signifie que le calque est invisible.
Si l’ic&ocirc;ne de l’œil n’appara&icirc;t pas, le calque h&eacute;rite de la visibilit&eacute; de son parent (lorsque les
calques ne sont pas imbriqu&eacute;s, le calque parent correspond au corps du document, qui est
toujours visible).
Aucune ic&ocirc;ne en forme d’œil ne s’affiche lorsque la visibilit&eacute; n’est pas indiqu&eacute;e (appara&icirc;t
dans l’inspecteur de propri&eacute;t&eacute;s comme Visibilit&eacute; par d&eacute;faut).
Pour modifier la visibilit&eacute; de tous les calques &agrave; la fois :
• Dans le panneau Calques (Fen&ecirc;tre &gt; Calques), cliquez sur l’ic&ocirc;ne en forme d’œil en haut de la
colonne.
Remarque : Cette proc&eacute;dure permet de d&eacute;finir la visibilit&eacute; ou la non-visibilit&eacute; de tous les autres
calques, mais elle ne leur permet pas d’h&eacute;riter.
Rubriques connexes
• Utilisation du panneau Calques, page 163
• Modification de l’ordre de superposition des calques, page 165
Manipulation des calques
Lorsque que vous travaillez sur une mise en forme, vous pouvez s&eacute;lectionner, d&eacute;placer,
redimensionner et aligner des calques. Vous devez s&eacute;lectionner un calque pour pouvoir le
d&eacute;placer, le redimensionner ou l’aligner.
Pour emp&ecirc;cher les calques de se chevaucher lorsque vous les d&eacute;placez et redimensionnez, utilisez
l’option Emp&ecirc;cher le chevauchement (voir des calques, page 169).
166
Chapitre 7 : Mise en forme des pages avec les styles CSS
Redimensionnement des calques
Vous pouvez redimensionner un ou plusieurs calques &agrave; la fois pour qu’ils aient tous la m&ecirc;me
largeur et la m&ecirc;me hauteur.
Si l’option Emp&ecirc;cher le chevauchement est activ&eacute;e, vous ne pourrez pas redimensionner un calque
s’il doit pour cela en chevaucher un autre (voir des calques, page 169).
Pour redimensionner un calque :
1 En mode Cr&eacute;ation, s&eacute;lectionnez un calque (voir S&eacute;lection des calques, page 164).
2 Pour redimensionner le calque, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
■
Pour redimensionner le calque en le faisant glisser, faites glisser l’une des poign&eacute;es.
Pour redimensionner le calque par incr&eacute;ments d’un pixel, maintenez la touche Ctrl
(Windows) ou Option (Macintosh) enfonc&eacute;e tout en utilisant les touches fl&eacute;ch&eacute;es.
Les fl&egrave;ches d&eacute;placent les bords droit et inf&eacute;rieur du calque ; cette technique ne permet pas de
redimensionner le calque en utilisant les bords sup&eacute;rieur et gauche.
Pour redimensionner en alignant sur la grille, appuyez sur Maj-Contr&ocirc;le-fl&egrave;che (Windows)
ou Maj-Option-fl&egrave;che (Macintosh).
Pour plus d’informations sur la d&eacute;finition des incr&eacute;ments de la grille, voir Utilisation des
r&egrave;gles et des grilles pour la mise en forme des pages, page 170.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), tapez les valeurs de largeur (L) et de
hauteur (H).
Le redimensionnement d’un calque en modifie la largeur et la hauteur. Cette action ne d&eacute;finit pas
la partie visible du contenu du calque. Pour d&eacute;finir la r&eacute;gion visible d’un calque, voir D&eacute;finition
des pr&eacute;f&eacute;rences et des propri&eacute;t&eacute;s de calques, page 162.
Pour redimensionner plusieurs calques &agrave; la fois :
1 En mode Cr&eacute;ation, s&eacute;lectionnez au moins deux calques (voir S&eacute;lection des calques, page 164).
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Modifier &gt; Aligner &gt; M&ecirc;me largeur ou Modifier &gt; Aligner &gt; M&ecirc;me hauteur.
Les premiers calques s&eacute;lectionn&eacute;s prendront la largeur ou la hauteur du dernier s&eacute;lectionn&eacute;
(dont le contour est affich&eacute; en surbrillance noire).
■ Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), sous Calques multiples, tapez les
valeurs de largeur et de hauteur.
Ces valeurs sont appliqu&eacute;es &agrave; tous les calques s&eacute;lectionn&eacute;s.
■
Rubriques connexes
• Alignement des calques, page 168
• Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages, page 170
D&eacute;placement des calques
Vous pouvez d&eacute;placer les calques en mode Cr&eacute;ation de la m&ecirc;me mani&egrave;re que les objets dans la
plupart des applications graphiques de base.
Si l’option Emp&ecirc;cher le chevauchement est activ&eacute;e, vous ne pourrez pas d&eacute;placer un calque s’il
doit pour cela en chevaucher un autre (voir des calques, page 169).
Manipulation des calques
167
Pour d&eacute;placer un ou plusieurs calques s&eacute;lectionn&eacute;s :
1 En mode Cr&eacute;ation, s&eacute;lectionnez un ou plusieurs calques (voir S&eacute;lection des calques, page 164).
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Pour d&eacute;placer des calques en les faisant glisser, s&eacute;lectionnez-les et faites glisser la poign&eacute;e de
s&eacute;lection du dernier calque s&eacute;lectionn&eacute; (en surbrillance noire).
Pour d&eacute;placer l’image par incr&eacute;ments d’un pixel, utilisez les touches fl&eacute;ch&eacute;es.
Maintenez la touche Maj enfonc&eacute;e tout en appuyant sur les touches fl&eacute;ch&eacute;es pour d&eacute;placer
le calque par incr&eacute;ments de la grille. Pour plus d’informations sur la d&eacute;finition des
incr&eacute;ments de la grille, voir Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages,
page 170.
Rubriques connexes
• Redimensionnement des calques, page 167
• Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages, page 170
Alignement des calques
Utilisez les commandes d’alignement pour aligner un ou plusieurs calques sur l’un des c&ocirc;t&eacute;s du
dernier calque s&eacute;lectionn&eacute;.
Lors de l’alignement, les calques enfants qui ne sont pas s&eacute;lectionn&eacute;s seront d&eacute;plac&eacute;s en m&ecirc;me
temps que leur parent, si celui-ci est s&eacute;lectionn&eacute;. Pour &eacute;viter ce d&eacute;placement, n’utilisez pas de
calques imbriqu&eacute;s.
Pour aligner plusieurs calques :
1 En mode Cr&eacute;ation, s&eacute;lectionnez le calque (voir S&eacute;lection des calques, page 164).
2 Choisissez Modifier &gt; Aligner, puis s&eacute;lectionnez une option d’alignement.
Par exemple, si vous s&eacute;lectionnez Haut, tous les calques se d&eacute;placent de fa&ccedil;on telle que leurs
bordures sup&eacute;rieures sont au m&ecirc;me niveau que celle du dernier calque s&eacute;lectionn&eacute; (en
surbrillance noire).
Rubriques connexes
• Redimensionnement des calques, page 167
• D&eacute;placement des calques, page 167
• Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages, page 170
Conversion des calques en tableaux
Pour cr&eacute;er leur mise en forme, certains concepteurs de pages Web pr&eacute;f&egrave;rent utiliser des calques
plut&ocirc;t que des tableaux ou le mode Mise en forme. Dreamweaver vous permet de cr&eacute;er votre mise
en forme &agrave; l’aide de calques, puis de les convertir en tableaux, le cas &eacute;ch&eacute;ant. Par exemple, il peut
&ecirc;tre n&eacute;cessaire de convertir les calques en tableaux pour pouvoir prendre en charge les navigateurs
ant&eacute;rieurs &agrave; la version 4.0.
Remarque : Il est impossible de convertir des calques en tableaux, ou vice-versa, dans un mod&egrave;le de
document ou dans un document auquel un mod&egrave;le a &eacute;t&eacute; appliqu&eacute;. Dans ce cas, vous devez cr&eacute;er
votre mise en forme dans un document sans mod&egrave;le et le convertir avant de l’enregistrer comme
mod&egrave;le.
168
Chapitre 7 : Mise en forme des pages avec les styles CSS
Vous pouvez aussi passer des calques aux tableaux et vice-versa pour peaufiner la mise en forme et
optimiser la pr&eacute;sentation de la page. Vous ne pouvez pas convertir un tableau ou un calque donn&eacute;
figurant sur une page. Il n’est possible de convertir des calques en tableaux et vice versa que pour
la totalit&eacute; d’une page.
Remarque : La conversion de calques en tableaux peut engendrer la cr&eacute;ation de tableaux
comportant de nombreuses cellules vides.
des calques
Les cellules d’un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas cr&eacute;er de
tableau &agrave; partir de calques qui se chevauchent. Si vous envisagez de convertir les calques d’un
document en tableaux, activez l’option Emp&ecirc;cher le chevauchement pour restreindre le
d&eacute;placement et le positionnement des calques et en &eacute;viter le chevauchement.
Si cette option est activ&eacute;e, aucun calque ne peut &ecirc;tre cr&eacute;&eacute;, d&eacute;plac&eacute; ou redimensionn&eacute; au-dessus
d’un calque existant, ni y &ecirc;tre imbriqu&eacute;. Si cette option est activ&eacute;e apr&egrave;s la cr&eacute;ation de calques se
chevauchant, faites glisser l’un des calques pour supprimer leur chevauchement. Dreamweaver ne
corrige pas automatiquement les chevauchements de calques existants lorsque vous activez
l’option Emp&ecirc;cher le chevauchement des calques.
Si cette option et l’option d’alignement sont activ&eacute;es, aucun calque ne sera align&eacute; sur la grille si
cela doit causer un chevauchement de calques. Dans ce cas, le calque sera align&eacute; sur le bord du
calque le plus proche.
Remarque : Certaines op&eacute;rations autorisent le chevauchement des calques, m&ecirc;me lorsque l’option
Emp&ecirc;cher le chevauchement est activ&eacute;e. Si vous ins&eacute;rez un calque en utilisant le menu Insertion, si
vous entrez les valeurs dans l’inspecteur de propri&eacute;t&eacute;s ou si vous repositionnez les calques en
modifiant le code source HTML, les calques risquent de se chevaucher ou de s’imbriquer lorsque
cette option est activ&eacute;e. En cas de chevauchement, faites glisser les calques qui se chevauchent
dans le mode Cr&eacute;ation pour les s&eacute;parer.
Pour emp&ecirc;cher le chevauchement de calques, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans le panneau Calques (Fen&ecirc;tre &gt; Calques), activez l’option Emp&ecirc;cher le chevauchement.
• Dans la fen&ecirc;tre de document, choisissez Modifier &gt; R&eacute;organiser &gt; Emp&ecirc;cher le chevauchement
des calques.
calques et tableaux
Cr&eacute;ez votre mise en forme &agrave; l’aide de calques, puis convertissez les calques en tableaux afin que
votre mise en forme puisse s’afficher dans les navigateurs les moins r&eacute;cents.
Avant de convertir vos calques en tableaux, assurez-vous qu’ils ne se chevauchent pas (voir des
calques, page 169).
Pour convertir des calques en tableau :
1 Choisissez Modifier &gt; Convertir &gt; Calques en tableau.
La bo&icirc;te de dialogue Convertir les calques en tableau s’affiche.
2 Activez les options souhait&eacute;es.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Les calques sont convertis en un tableau.
Conversion des calques en tableaux
169
Pour convertir des tableaux en calques :
1 Choisissez Modifier &gt; Convertir &gt; Tableaux en calques.
La bo&icirc;te de dialogue Convertir les tableaux en calques s’affiche.
2 Activez les options souhait&eacute;es.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Les tableaux sont convertis en calques. Les cellules vides ne sont pas converties en calques, sauf
si elles poss&egrave;dent une couleur d’arri&egrave;re-plan.
Remarque : Les &eacute;l&eacute;ments de la page qui se trouvaient en dehors des tableaux sont &eacute;galement
plac&eacute;s dans les calques.
Utilisation des r&egrave;gles et des grilles pour la mise en forme des
pages
Utilisez les r&egrave;gles et les grilles pour vous guider visuellement dans le dessin et vous aider &agrave;
positionner ou redimensionner les &eacute;l&eacute;ments dans la fen&ecirc;tre de cr&eacute;ation du document.
Vous pouvez afficher les r&egrave;gles gradu&eacute;es en pixels, pouces ou en centim&egrave;tres sur les bords gauche et
sup&eacute;rieur de la page.
Vous pouvez aligner automatiquement des &eacute;l&eacute;ments de page sur la grille en les d&eacute;pla&ccedil;ant, et
changer la grille ou d&eacute;finir le comportement d’alignement en indiquant des param&egrave;tres
sp&eacute;cifiques pour la grille. L’alignement fonctionne, que la grille soit visible ou non.
Pour modifier les param&egrave;tres des r&egrave;gles, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour activer et d&eacute;sactiver les r&egrave;gles, choisissez Affichage &gt; R&egrave;gles &gt; Afficher.
• Pour changer l’origine, faites glisser l’ic&ocirc;ne de l’origine de la r&egrave;gle, situ&eacute;e dans le coin sup&eacute;rieur
•
gauche de la fen&ecirc;tre de document en mode Cr&eacute;ation, sur un point de la page.
Pour r&eacute;tablir la position par d&eacute;faut de l’origine, choisissez Affichage &gt; R&egrave;gles &gt; R&eacute;tablir origine.
Pour changer d’unit&eacute; de mesure, choisissez Affichage &gt; R&egrave;gles, puis Pixels, Pouces ou
Centim&egrave;tres.
Pour afficher ou masquer la grille :
• Choisissez Affichage &gt; Grille &gt; Afficher la grille.
Pour activer l’alignement :
• Choisissez Affichage &gt; Grille &gt; Aligner sur la grille.
Pour modifier les param&egrave;tres de la grille :
1 Choisissez Affichage &gt; Grille &gt; Param&egrave;tres de la grille.
170
Chapitre 7 : Mise en forme des pages avec les styles CSS
La bo&icirc;te de dialogue Param&egrave;tres de la grille appara&icirc;t.
2 D&eacute;finissez les options de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• Redimensionnement des calques, page 167
• D&eacute;placement des calques, page 167
• Alignement des calques, page 168
Utilisation du trac&eacute; de l’image
Vous pouvez utiliser un trac&eacute; de l’image comme guide pour reproduire une mise en page ayant &eacute;t&eacute;
cr&eacute;&eacute;e dans une application graphique telle que Macromedia Freehand ou Fireworks.
Un trac&eacute; est une image JPG, GIF ou PNG qui appara&icirc;t &agrave; l’arri&egrave;re-plan de la fen&ecirc;tre de document.
Vous pouvez masquer cette image, d&eacute;finir son opacit&eacute; et la d&eacute;placer.
Pour placer un trac&eacute; de l’image dans la fen&ecirc;tre de document :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Affichage &gt; Trac&eacute; de l’image &gt; Charger.
■ Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page, puis cliquez sur le bouton Parcourir situ&eacute; &agrave; c&ocirc;t&eacute;
de la zone de texte Trac&eacute; de l’image.
2 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez un fichier d’image, puis cliquez sur
S&eacute;lectionner (Windows) ou Choisir (Macintosh).
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page s’affiche.
3 D&eacute;finissez la transparence de l’image en faisant glisser le curseur Transparence de l’image, puis
cliquez sur OK.
■
Pour passer &agrave; un autre trac&eacute; ou modifier &agrave; tout moment la transparence du trac&eacute; en cours,
choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page.
Pour afficher ou masquer le trac&eacute; de l’image :
• Choisissez Affichage &gt; Trac&eacute; de l’image &gt; Afficher.
Le trac&eacute; de l’image n’est visible que dans Dreamweaver. Il est toujours invisible lorsque vous
affichez la page dans un navigateur. Lorsque le trac&eacute; de l’image est visible, les v&eacute;ritables image et
couleur d’arri&egrave;re-plan de la page ne sont pas visibles dans la fen&ecirc;tre de document, mais le sont
lorsque la page est affich&eacute;e dans un navigateur.
Utilisation du trac&eacute; de l’image
171
Pour d&eacute;placer un trac&eacute; de l’image :
1 S&eacute;lectionnez Affichage &gt; Trac&eacute; de l’image &gt; Ajuster la position.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
Pour d&eacute;finir avec pr&eacute;cision la position du trac&eacute; de l’image, indiquez les valeurs des
coordonn&eacute;es dans les zones de texte X et Y.
Pour d&eacute;placer l’image par incr&eacute;ments d’un pixel, utilisez les touches fl&eacute;ch&eacute;es.
Pour d&eacute;placer l’image par incr&eacute;ment de 5 pixels, appuyez simultan&eacute;ment sur la touche Maj
et sur l’une des touches fl&eacute;ch&eacute;es.
Pour r&eacute;tablir la position du trac&eacute; de l’image :
• Choisissez Affichage &gt; Trac&eacute; de l’image &gt; R&eacute;tablir la position.
Le trac&eacute; de l’image se replace dans le coin sup&eacute;rieur gauche de la fen&ecirc;tre de document (0,0).
Pour aligner le trac&eacute; de l’image sur un &eacute;l&eacute;ment s&eacute;lectionn&eacute; :
1 S&eacute;lectionnez un &eacute;l&eacute;ment dans la fen&ecirc;tre de document.
2 Choisissez Affichage &gt; Trac&eacute; de l’image &gt; Aligner l’image avec la s&eacute;lection.
Le coin sup&eacute;rieur gauche du trac&eacute; de l’image est align&eacute; avec le coin sup&eacute;rieur gauche de
l’&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
172
Chapitre 7 : Mise en forme des pages avec les styles CSS
CHAPITRE 8
Pr&eacute;sentation de contenu &agrave; l’aide de 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.
un grand nombre de concepteurs utilisent des tableaux pour mettre des pages Web en forme.
Macromedia Dreamweaver MX 2004 offre deux m&eacute;thodes pour afficher et modifier les tableaux :
le mode Standard, dans lequel les tableaux sont pr&eacute;sent&eacute;s comme une grille de lignes et de
colonnes, et le mode Mise en forme, qui permet de dessiner, redimensionner et d&eacute;placer des
rectangles sur la page tout en continuant d’utiliser les tableaux comme structure sous-jacente (voir
Chapitre 9, Mise en forme des pages avec le mode Mise en forme, page 193).
Remarque : Vous avez aussi la possibilit&eacute; de mettre vos pages en forme &agrave; l’aide du positionnement
par feuilles de style en cascade CSS (voir Chapitre 7, Mise en forme des pages avec les styles CSS,
page 155).
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
A propos des tableaux, page 174
Insertion d’un tableau et ajout de contenu, page 175
Importation et exportation de donn&eacute;es tabulaires, page 176
S&eacute;lection d’&eacute;l&eacute;ments de tableau, page 177
Utilisation du mode Tableaux d&eacute;velopp&eacute;s pour une modification de tableau plus simple, page 180
Mise en forme des tableaux et des cellules, page 181
Redimensionnement des tableaux, des colonnes et des lignes, page 183
Ajout et suppression de lignes et de colonnes, page 187
Fractionnement et fusion de cellules, page 189
Copie, collage et suppression de cellules, page 190
Imbrication de tableaux, page 192
Tri des tableaux, page 192
173
A propos des 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. Bien que les colonnes ne soient g&eacute;n&eacute;ralement pas sp&eacute;cifi&eacute;es
explicitement en code HTML, Dreamweaver vous permet de manipuler les colonnes, les lignes et
les cellules.
Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau 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 en-t&ecirc;tes de colonne. Utilisez les menus
pour acc&eacute;der rapidement &agrave; des commandes standard relatives aux tableaux. Vous pouvez activer
ou d&eacute;sactiver les largeurs et les menus &agrave; votre convenance (voir Affichage des menus et de la largeur
d’un tableau et des colonnes, page 187).
Si la largeur du tableau ou d’une colonne ne s’affiche pas, cela signifie qu’aucune largeur n’est
sp&eacute;cifi&eacute;e pour ces &eacute;l&eacute;ments dans le code HTML. Si deux nombres s’affichent, cela signifie que la
largeur visuelle d’une colonne telle qu’elle appara&icirc;t en mode Cr&eacute;ation ne correspond pas &agrave; la
largeur sp&eacute;cifi&eacute;e dans le code HTML. Cela peut se produire lorsque vous redimensionnez un
tableau en faisant glisser son coin inf&eacute;rieur droit ou lorsque vous ajoutez du contenu &agrave; une cellule
plus grande que sa valeur d&eacute;finie.
Par exemple, si vous d&eacute;finissez une largeur de colonne de 200 pixels, puis que vous ajoutez du
contenu qui &eacute;tend la largeur &agrave; 250 pixels, deux nombres s’affichent pour cette colonne : 200 (la
largeur sp&eacute;cifi&eacute;e dans le code) et (250) entre parenth&egrave;ses (la largeur visuelle de la colonne telle
qu’elle appara&icirc;t &agrave; l’&eacute;cran).
Pour uniformiser les largeurs de colonne, voir Uniformisation des largeurs de colonne en mode Code
avec les largeurs visuelles, page 186.
Rubriques connexes
• Insertion d’un tableau et ajout de contenu, page 175
Priorit&eacute; de mise en forme des tableaux dans le code HTML
Lorsque vous mettez des tableaux en forme en mode Cr&eacute;ation, vous pouvez d&eacute;finir des propri&eacute;t&eacute;s
s’appliquant au tableau tout entier ou &agrave; une s&eacute;rie de lignes, de colonnes ou de cellules
s&eacute;lectionn&eacute;es dans le tableau. Lorsqu’une propri&eacute;t&eacute;, (une couleur d’arri&egrave;re-plan ou un alignement,
par exemple) est d&eacute;finie par une valeur pour tout le tableau et par une autre valeur pour chaque
cellule, les propri&eacute;t&eacute;s de mise en forme des cellules pr&eacute;valent sur les propri&eacute;t&eacute;s de mise en forme
de lignes, qui &agrave; leur tour pr&eacute;valent sur les propri&eacute;t&eacute;s de mise en forme du tableau.
L’ordre de priorit&eacute; pour la mise en forme de tableau est le suivant :
1 Cellules
2 Lignes
3 Tableau
Par exemple, si vous d&eacute;finissez une couleur bleue pour l’arri&egrave;re-plan d’une cellule, puis la couleur
jaune pour celui du tableau, la couleur de la cellule bleue ne changera pas, puisque la propri&eacute;t&eacute; de
mise en forme de cellule a la priorit&eacute; sur la propri&eacute;t&eacute; de mise en forme du tableau.
Remarque : Lorsque vous d&eacute;finissez les propri&eacute;t&eacute;s d’une colonne, Dreamweaver modifie les
attributs de la balise td correspondant &agrave; chaque cellule de la colonne.
174
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
Rubriques connexes
• Mise en forme des tableaux et des cellules, page 181
A propos du fractionnement et de la fusion de cellules de tableau
Vous pouvez fusionner n’importe quel nombre de cellules adjacentes (tant que la s&eacute;lection
correspond &agrave; une ligne ou &agrave; un rectangle de cellules) pour produire une cellule unique s’&eacute;tendant
sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombre quelconque
de lignes et de colonnes, qu’elle ait &eacute;t&eacute; pr&eacute;c&eacute;demment fusionn&eacute;e ou non. Dreamweaver r&eacute;organise
automatiquement le tableau (en ajoutant les attributs colspan ou rowspan n&eacute;cessaires) pour
obtenir l’agencement sp&eacute;cifi&eacute;.
Dans l’illustration ci-dessous, les cellules au milieu des deux premi&egrave;res lignes ont &eacute;t&eacute; fusionn&eacute;es en
une seule cellule qui s’&eacute;tend sur deux lignes.
Rubriques connexes
• Fractionnement et fusion de cellules, page 189
Insertion d’un tableau et ajout de contenu
Utilisez la barre ou le menu Ins&eacute;rer pour cr&eacute;er un nouveau tableau. Ajoutez ensuite du texte et des
images aux cellules du tableau de la m&ecirc;me fa&ccedil;on que vous le faites en dehors d’un tableau (voir
Chapitre 13, Insertion et mise en forme de texte, page 287 et Chapitre 14, Insertion d’images,
page 317).
Pour ins&eacute;rer un tableau :
1 Dans la fen&ecirc;tre Cr&eacute;ation du document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous voulez que
le tableau apparaisse.
Remarque : Si votre document est vide, le point d’insertion peut uniquement &ecirc;tre plac&eacute; au d&eacute;but
du document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Insertion &gt; Tableau.
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Tableau.
Insertion d’un tableau et ajout de contenu
175
La bo&icirc;te de dialogue Tableau s’affiche.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Le tableau appara&icirc;t dans le document.
Rubriques connexes
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s de tableau, de cellule, de ligne et de colonne, page 181
• Modification des attributs d’accessibilit&eacute; d’un tableau, page 182
Importation et exportation de donn&eacute;es tabulaires
Vous pouvez importer dans un tableau Dreamweaver des donn&eacute;es tabulaires cr&eacute;&eacute;es dans une autre
application (par exemple Microsoft Excel) et enregistr&eacute;es dans un format texte d&eacute;limit&eacute; (&eacute;l&eacute;ments
s&eacute;par&eacute;s par des tabulations, virgules, deux-points, points-virgules ou autres d&eacute;limiteurs).
Vous pouvez &eacute;galement exporter les donn&eacute;es d’un tableau Dreamweaver vers un fichier texte, avec
le contenu de cellules contigu&euml;s s&eacute;par&eacute; par un d&eacute;limiteur. Les caract&egrave;res que vous pouvez utiliser
comme d&eacute;limiteurs sont la virgule, les deux-points, le point-virgule ou l’espace. Lorsque vous
exportez un tableau, tout le tableau est export&eacute; ; vous ne pouvez pas exporter certaines parties du
tableau seulement.
Conseil : Si vous souhaitez ne r&eacute;cup&eacute;rer qu’une partie des donn&eacute;es d’un tableau, par exemple les six
premi&egrave;res lignes ou les six premi&egrave;res colonnes, copiez les cellules contenant ces donn&eacute;es et collezles hors du tableau (pour cr&eacute;er un nouveau tableau) avant d’exporter le nouveau tableau.
Pour importer les donn&eacute;es d’un tableau :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
176
Choisissez Fichier &gt; Importer &gt; Donn&eacute;es tabul&eacute;es.
Choisissez Insertion &gt; Objets du tableau &gt; Importer les donn&eacute;es tabulaires.
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
La bo&icirc;te de dialogue Importer les donn&eacute;es tabulaires s’affiche.
2 Dans la bo&icirc;te de dialogue, entrez des informations sur le fichier contenant vos donn&eacute;es.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Pour exporter un tableau :
1 Placez le point d’insertion dans l’une des cellules du tableau.
2 Choisissez Fichier &gt; Exporter &gt; Tableau.
La bo&icirc;te de dialogue Exporter tableau s’affiche.
3 Dans la bo&icirc;te de dialogue Exporter tableau, sp&eacute;cifiez les options pour l’exportation du tableau.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur Exporter.
La bo&icirc;te de dialogue Exporter tableau sous s’affiche.
5 Entrez le nom du fichier.
6 Cliquez sur Enregistrer.
S&eacute;lection d’&eacute;l&eacute;ments de tableau
Vous pouvez s&eacute;lectionner un tableau entier ou encore l’ensemble d’une ligne ou d’une colonne.
Vous pouvez &eacute;galement s&eacute;lectionner une ou plusieurs cellules individuelles.
Lorsque vous d&eacute;placez le pointeur sur un tableau, une ligne, une colonne ou une cellule,
Dreamweaver met toutes les cellules de cette s&eacute;lection en surbrillance afin que vous sachiez quelles
cellules seront s&eacute;lectionn&eacute;es lorsque vous cliquerez sur la s&eacute;lection. Ceci est utile pour les tableaux
sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux
imbriqu&eacute;s. Vous pouvez modifier la couleur de la mise en surbrillance dans les pr&eacute;f&eacute;rences.
S&eacute;lection d’&eacute;l&eacute;ments de tableau
177
Conseil : Si vous placez le pointeur sur une bordure du tableau, puis que vous maintenez la touche
Ctrl (Windows) ou Commande (Macintosh) enfonc&eacute;e, la totalit&eacute; de la structure du tableau (c’est-&agrave;dire toutes les cellules) est mise en surbrillance. Ceci peut &ecirc;tre utile lorsque vous disposez de tableaux
imbriqu&eacute;s et que vous souhaitez afficher la structure de l’un d’eux.
Pour modifier la couleur de surbrillance pour la s&eacute;lection des &eacute;l&eacute;ments de tableau :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Surbrillance dans la liste de gauche.
3 Effectuez l’une des modifications suivantes :
■ Pour modifier la couleur de surbrillance des &eacute;l&eacute;ments du tableau, cliquez dans la case de
couleur Survol et s&eacute;lectionnez une couleur de surbrillance &agrave; l’aide du s&eacute;lecteur de couleur
(ou tapez la valeur hexad&eacute;cimale correspondant &agrave; la couleur de surbrillance dans la zone de
texte).
Pour plus d’informations sur l’utilisation de la pipette, voir Utilisation des couleurs,
page 273.
■ Pour activer ou d&eacute;sactiver la surbrillance des &eacute;l&eacute;ments du tableau, activez ou d&eacute;sactivez la
case &agrave; cocher Afficher de l’option Survol.
Remarque : Ces options ont un impact sur tous les objets, tels que les calques ou encore les
tableaux et cellules en mode Mise en forme, que Dreamweaver met en surbrillance lorsque vous
d&eacute;placez le pointeur au-dessus.
4 Cliquez sur OK.
Rubriques connexes
• Mise en forme des tableaux et des cellules, page 181
• Redimensionnement des tableaux, des colonnes et des lignes, page 183
• Copie, collage et suppression de cellules, page 190
S&eacute;lection d’une table
Plusieurs m&eacute;thodes vous permettent de s&eacute;lectionner un tableau entier.
Pour s&eacute;lectionner un tableau entier, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez dans le coin sup&eacute;rieur gauche du tableau, sur le bord sup&eacute;rieur ou inf&eacute;rieur du tableau
ou sur une ligne ou une bordure de colonne.
Remarque : Le pointeur prend la forme de l’ic&ocirc;ne de grille du tableau pour vous indiquer que vous
pouvez s&eacute;lectionner le tableau (sauf si vous cliquez sur la bordure d’une ligne ou d’une colonne).
• Cliquez dans une cellule du tableau, puis s&eacute;lectionnez la balise &lt;table&gt; dans le s&eacute;lecteur de
•
•
178
balises dans le coin inf&eacute;rieur gauche de la fen&ecirc;tre de document.
Cliquez dans une cellule du tableau, puis choisissez Modifier &gt; Tableau &gt; S&eacute;lectionner le
tableau.
Cliquez dans une cellule du tableau, puis sur le menu d’en-t&ecirc;te du tableau et choisissez
S&eacute;lectionner le tableau.
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
Des poign&eacute;es de s&eacute;lection apparaissent sur les bords inf&eacute;rieurs et droits du tableau s&eacute;lectionn&eacute;.
Rubriques connexes
• S&eacute;lection de cellules, page 179
S&eacute;lection de lignes ou de colonnes
Vous pouvez s&eacute;lectionner une ligne ou une colonne individuelle, ou plusieurs lignes ou colonnes.
Pour s&eacute;lectionner une ou plusieurs lignes ou colonnes :
1 Positionnez le pointeur sur le bord gauche d’une ligne ou le bord sup&eacute;rieur d’une colonne.
2 Lorsque le pointeur se transforme en fl&egrave;che de s&eacute;lection, cliquez pour s&eacute;lectionner une ligne ou
une colonne ou faites-le glisser pour s&eacute;lectionner plusieurs lignes ou colonnes.
Pour s&eacute;lectionner une seule colonne :
1 Cliquez dans la colonne.
2 Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez S&eacute;lectionner la colonne.
Rubriques connexes
• S&eacute;lection d’une table, page 178
S&eacute;lection de cellules
Vous pouvez s&eacute;lectionner une cellule individuelle, une ligne ou un bloc de cellules, ou encore des
cellules non contigu&euml;s. Pour s&eacute;lectionner des lignes ou des colonnes enti&egrave;res, voir S&eacute;lection de
lignes ou de colonnes, page 179.
Pour s&eacute;lectionner une seule cellule, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez dans la cellule, puis s&eacute;lectionnez la balise &lt;td&gt; dans le s&eacute;lecteur de balises dans le coin
inf&eacute;rieur gauche de la fen&ecirc;tre de document.
S&eacute;lection d’&eacute;l&eacute;ments de tableau
179
• Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Macintosh)
•
enfonc&eacute;e.
Cliquez dans la cellule, puis choisissez Edition &gt; S&eacute;lectionner tout.
Conseil : Lorsqu’une cellule est d&eacute;j&agrave; s&eacute;lectionn&eacute;e, choisissez Edition &gt; S&eacute;lectionner tout &agrave;
nouveau pour s&eacute;lectionner tout le tableau.
Pour s&eacute;lectionner une ligne ou un bloc rectangulaire de cellules, proc&eacute;dez de l’une des
mani&egrave;res suivantes :
• Faites glisser la souris d’une cellule &agrave; une autre.
• Cliquez sur une cellule. Tout en appuyant sur la touche Ctrl (Windows) ou Commande
(Macintosh), cliquez sur la m&ecirc;me cellule, puis cliquez dans une autre cellule en maintenant la
touche Maj enfonc&eacute;e.
Toutes les cellules se trouvant &agrave; l’int&eacute;rieur de la zone rectangulaire ou lin&eacute;aire ainsi d&eacute;limit&eacute;e
par les deux cellules sont s&eacute;lectionn&eacute;es.
Pour s&eacute;lectionner des cellules non contigu&euml;s :
• Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les
lignes ou les colonnes que vous voulez s&eacute;lectionner.
Si chaque cellule, ligne ou colonne sur laquelle vous cliquez apr&egrave;s avoir appuy&eacute; sur Ctrl ou sur
Commande n’est pas d&eacute;j&agrave; s&eacute;lectionn&eacute;e, elle est ajout&eacute;e &agrave; la s&eacute;lection. Si elle est d&eacute;j&agrave;
s&eacute;lectionn&eacute;e, elle est retir&eacute;e de la s&eacute;lection.
Rubriques connexes
• S&eacute;lection d’une table, page 178
Utilisation du mode Tableaux d&eacute;velopp&eacute;s pour une modification
de tableau plus simple
Le mode Tableaux d&eacute;velopp&eacute;s ajoute provisoirement de la marge &agrave; l’int&eacute;rieur des cellules et de
l’espacement &agrave; tous les tableaux d’un document, et augmente les bordures des tableaux afin de
rendre les modifications plus faciles. Ce mode vous permet de choisir des &eacute;l&eacute;ments dans les
tableaux ou de placer le point d’insertion de mani&egrave;re pr&eacute;cise.
Par exemple, vous pouvez d&eacute;velopper un tableau pour placer le point d’insertion &agrave; gauche ou &agrave;
droite d’une image, sans s&eacute;lectionner l’image ou la cellule du tableau par inadvertance.
180
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
Remarque : Apr&egrave;s avoir choisi ou plac&eacute; le point d’insertion, vous devez revenir au mode Standard du
mode Cr&eacute;ation pour effectuer vos modifications. En mode Tableaux d&eacute;velopp&eacute;s, certaines
op&eacute;rations, telles que le redimensionnement, ne produisent pas les r&eacute;sultats attendus.
Pour passer au mode Tableaux d&eacute;velopp&eacute;s :
1 Si vous travaillez en mode Code, choisissez Affichage &gt; Cr&eacute;ation ou Affichage &gt; Code et
cr&eacute;ation.
Il est impossible d’activer le mode Tableaux d&eacute;velopp&eacute;s en mode Code.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Choisissez Affichage &gt; Mode Tableau &gt; Mode Tableaux d&eacute;velopp&eacute;s.
■ Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton D&eacute;velopp&eacute;.
Une barre intitul&eacute;e Mode Tableaux d&eacute;velopp&eacute;s appara&icirc;t en haut de la fen&ecirc;tre de document.
Dreamweaver ajoute de la marge &agrave; l’int&eacute;rieur des cellules et de l’espacement &agrave; tous les tableaux de
la page et augmente les bordures des tableaux.
Pour passer au mode Tableaux d&eacute;velopp&eacute;s, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur [quitter] dans la barre intitul&eacute;e Mode Tableaux d&eacute;velopp&eacute;s en haut de la fen&ecirc;tre de
document.
• Choisissez Affichage &gt; Mode Tableau &gt; Mode Standard.
• Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Standard.
Dreamweaver revient au mode Standard.
Mise en forme des tableaux et des cellules
Vous pouvez modifier l’aspect des tableaux en d&eacute;finissant des propri&eacute;t&eacute;s pour l’ensemble ou une
partie de leurs cellules, ou en leur appliquant une mise en forme pr&eacute;d&eacute;finie. Avant de d&eacute;finir les
propri&eacute;t&eacute;s des tableaux et des cellules, il est judicieux de comprendre quelles propri&eacute;t&eacute;s ont
priorit&eacute; sur les autres (voir Priorit&eacute; de mise en forme des tableaux dans le code HTML, page 174).
Conseil : Pour formater le texte dans une cellule de tableau, suivez la m&ecirc;me proc&eacute;dure que pour
formater du texte en dehors d’un tableau. Pour plus d’informations, voir Chapitre 13, Insertion et mise
en forme de texte, page 287.
Rubriques connexes
• Redimensionnement des tableaux, des colonnes et des lignes, page 183
Affichage et d&eacute;finition des propri&eacute;t&eacute;s de tableau, de cellule, de ligne et de
colonne
Lorsqu’un tableau ou une cellule est s&eacute;lectionn&eacute;, l’inspecteur de propri&eacute;t&eacute;s vous permet de
visualiser et de modifier ses propri&eacute;t&eacute;s.
Remarque : Avant de modifier les propri&eacute;t&eacute;s des &eacute;l&eacute;ments de tableau, il est judicieux de comprendre
quelles propri&eacute;t&eacute;s ont priorit&eacute; sur les autres (voir Priorit&eacute; de mise en forme des tableaux dans le
code HTML, page 174).
Pour afficher et d&eacute;finir les propri&eacute;t&eacute;s des tableaux et les propri&eacute;t&eacute;s d’un &eacute;l&eacute;ment de tableau :
1 S&eacute;lectionnez un tableau, une cellule, une ligne ou une colonne (voir S&eacute;lection d’&eacute;l&eacute;ments de
tableau, page 177).
Mise en forme des tableaux et des cellules
181
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d’agrandissement
situ&eacute;e dans le coin inf&eacute;rieur droit pour visualiser toutes les propri&eacute;t&eacute;s.
3 Modifiez les propri&eacute;t&eacute;s de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
Remarque : Lorsque vous d&eacute;finissez les propri&eacute;t&eacute;s d’une colonne, Dreamweaver modifie les
attributs de la balise td correspondant &agrave; chaque cellule de la colonne. Lorsque vous d&eacute;finissez
certaines propri&eacute;t&eacute;s d’une ligne, Dreamweaver modifie les attributs de la balise tr plut&ocirc;t que de
modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le m&ecirc;me format &agrave;
toutes les cellules d’une ligne, en appliquant le format &agrave; la balise tr, vous obtenez un code HTML
plus net et plus concis.
Modification des attributs d’accessibilit&eacute; d’un tableau
Si vous n’avez pas ajout&eacute; d’attributs d’accessibilit&eacute; &agrave; votre tableau lors de son insertion (voir
Insertion d’un tableau et ajout de contenu, page 175) et qu’il vous faut les ajouter plus tard, ou si
vous devez modifier les attributs d’accessibilit&eacute;, vous pouvez le faire en mode Code ou Cr&eacute;ation.
Pour ajouter ou modifier les valeurs d’accessibilit&eacute; d’un tableau en mode Code :
• Modifiez les attributs dans le code.
Conseil : Pour rep&eacute;rer rapidement les balises dans le code, cliquez dans le tableau, puis
s&eacute;lectionnez la balise &lt;table&gt; dans le s&eacute;lecteur de balises situ&eacute; au bas de la fen&ecirc;tre de document.
Pour ajouter ou modifier les valeurs d’accessibilit&eacute; d’un tableau en mode Cr&eacute;ation, proc&eacute;dez
de l’une des mani&egrave;res suivantes :
• Pour modifier la l&eacute;gende du tableau, mettez-la en surbrillance, puis tapez une nouvelle l&eacute;gende.
• Pour modifier l’alignement de la l&eacute;gende du tableau, placez le point d’insertion dans la l&eacute;gende,
•
cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Modifier le code de la balise.
Pour modifier le r&eacute;sum&eacute; du tableau, s&eacute;lectionnez le tableau, cliquez du bouton droit de la
souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis choisissez
Modifier le code de la balise.
Rubriques connexes
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s de tableau, de cellule, de ligne et de colonne, page 181
Utilisation d’un mod&egrave;le de mise en forme pour formater un tableau
Utilisez la commande Formater le tableau pour appliquer rapidement une mise en forme
pr&eacute;d&eacute;finie &agrave; un tableau. Vous pouvez alors choisir des options de mise en forme.
Remarque : Seuls les tableaux simples peuvent &ecirc;tre mis en forme &agrave; l’aide de conceptions
pr&eacute;d&eacute;finies. Vous ne pouvez pas utiliser ces conceptions pour mettre en forme des tableaux
contenant des cellules fusionn&eacute;es (colspan ou rowspan), des groupes de colonnes ou tout autre
tableau qui ne soit pas une simple grille rectangulaire de cellules.
Pour utiliser une mise en forme de tableau pr&eacute;d&eacute;finie :
1 S&eacute;lectionnez un tableau (voir S&eacute;lection d’une table, page 178).
2 Choisissez Commandes &gt; Formater le tableau.
182
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
La bo&icirc;te de dialogue Formater le tableau s’affiche.
3 Personnalisez les options selon vos besoins.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur Appliquer ou sur OK pour mettre en forme votre tableau avec la mise en forme
s&eacute;lectionn&eacute;e.
Redimensionnement des tableaux, des colonnes et des lignes
Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines
colonnes individuelles. Si vous avez des probl&egrave;mes pour le redimensionnement, vous pouvez
effacer la largeur des colonnes ou la hauteur des lignes et recommencer.
Les largeurs de colonne d&eacute;finies dans le code HTML ne correspondent pas n&eacute;cessairement aux
largeurs apparentes &agrave; l’&eacute;cran. Dans ce cas, vous pouvez uniformiser les largeurs. Dreamweaver
affiche les largeurs de colonne et de tableau ainsi que les menus d’en-t&ecirc;tes pour vous aider &agrave;
mettre les tableaux en forme. Vous pouvez activer ou d&eacute;sactiver ces informations &agrave; votre
convenance.
Redimensionnement d’un tableau
Vous pouvez redimensionner un tableau en faisant glisser l’une de ses poign&eacute;es de s&eacute;lection.
Dreamweaver affiche la largeur du tableau, ainsi que le menu des en-t&ecirc;tes du tableau, en haut ou
en bas du tableau lorsque celui-ci est s&eacute;lectionn&eacute; ou que le point d’insertion se trouve dedans.
Remarque : Vous pouvez activer ou d&eacute;sactiver ces informations &agrave; votre convenance (voir Affichage
des menus et de la largeur d’un tableau et des colonnes, page 187).
Redimensionnement des tableaux, des colonnes et des lignes
183
Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en proportion.
Si les cellules d’un tableau ont une largeur ou une hauteur sp&eacute;cifi&eacute;es explicitement, le
redimensionnement du tableau modifie la taille visuelle des cellules dans la fen&ecirc;tre de document
mais ne modifie pas la largeur et la hauteur sp&eacute;cifi&eacute;es des cellules. Pour effacer les largeurs et les
hauteurs d&eacute;finies, voir Suppression des largeurs et hauteurs d&eacute;finies, page 186.
Pour redimensionner un tableau :
1 S&eacute;lectionnez le tableau (voir S&eacute;lection d’une table, page 178).
Des poign&eacute;es de s&eacute;lection s’affichent sur le tableau.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
Pour redimensionner le tableau horizontalement, faites glisser la poign&eacute;e de s&eacute;lection vers la
droite.
Pour redimensionner le tableau verticalement, faites glisser la poign&eacute;e de s&eacute;lection vers le
bas.
Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poign&eacute;e de
s&eacute;lection vers le coin inf&eacute;rieur droit.
Redimensionnement des colonnes et des lignes
Vous pouvez modifier la largeur d’une colonne ou la hauteur d’une ligne dans l’inspecteur de
propri&eacute;t&eacute;s ou en faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des
probl&egrave;mes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la hauteur
des lignes et recommencer (voir Suppression des largeurs et hauteurs d&eacute;finies, page 186).
Remarque : Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code
HTML &agrave; l’aide du mode Code. Pour plus d’informations, voir Codage dans Dreamweaver, page 429.
Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-t&ecirc;tes de colonne, en haut
ou en bas des colonnes lorsque le tableau est s&eacute;lectionn&eacute; ou que le point d’insertion se trouve
dedans. Pour plus d’informations, voir A propos des tableaux, page 174.
Remarque : Vous pouvez activer ou d&eacute;sactiver ces informations &agrave; votre convenance (voir Affichage
des menus et de la largeur d’un tableau et des colonnes, page 187).
Pour modifier la largeur d’une colonne tout en conservant la m&ecirc;me largeur de tableau :
• Faites glisser la bordure droite de la colonne &agrave; modifier.
184
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
La largeur de la colonne contigu&euml; est &eacute;galement modifi&eacute;e, si bien que vous redimensionnez
deux colonnes. L’affichage visuel vous montre la mani&egrave;re dont les colonnes seront ajust&eacute;es, la
largeur totale du tableau ne variant pas.
Remarque : Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous faites
glisser la bordure droite de l’extr&ecirc;me droite du tableau, la largeur du tableau est modifi&eacute;e et toutes
les colonnes s’adaptent proportionnellement.
Pour modifier la largeur d’une colonne en conservant les dimensions des autres colonnes :
• Maintenez la touche Maj enfonc&eacute;e, puis faites glisser la bordure de la colonne.
Seule la largeur de cette colonne change. L’affichage visuel vous montre la mani&egrave;re dont les
colonnes seront ajust&eacute;es, la largeur totale du tableau variant en fonction de la colonne
redimensionn&eacute;e.
Pour modifier la hauteur d’une ligne visuellement :
• Faites glisser la bordure inf&eacute;rieure de la ligne.
Pour d&eacute;finir la largeur d’une colonne ou la hauteur d’une ligne &agrave; l’aide de l’inspecteur de
propri&eacute;t&eacute;s :
1 S&eacute;lectionnez une colonne ou une ligne (voir S&eacute;lection de lignes ou de colonnes, page 179).
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), saisissez une valeur dans le champ de
texte L pour la largeur de la colonne ou dans le champ de texte H pour la hauteur de la colonne.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
Conseil : Vous pouvez sp&eacute;cifier la largeur ou la hauteur par des pixels ou des pourcentages. Vous
pouvez convertir les pixels en pourcentages et inversement.
3 Appuyez sur Tab ou Entr&eacute;e (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Rubriques connexes
• Redimensionnement d’un tableau, page 183
• Suppression des largeurs et hauteurs d&eacute;finies, page 186
• Affichage des menus et de la largeur d’un tableau et des colonnes, page 187
Redimensionnement des tableaux, des colonnes et des lignes
185
Uniformisation des largeurs de colonne en mode Code avec les largeurs
visuelles
Si deux nombres s’affichent pour la largeur d’une colonne, cela signifie que la largeur d&eacute;finie dans
le code HTML est diff&eacute;rente de la largeur apparente &agrave; l’&eacute;cran. Vous pouvez uniformiser ces deux
largeurs. Pour plus d’informations, voir A propos des tableaux, page 174.
Pour uniformiser les largeurs :
1 Cliquez dans une cellule.
2 Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Uniformiser toutes les largeurs.
Dreamweaver red&eacute;finit la largeur sp&eacute;cifi&eacute;e dans le code sur la largeur visuelle.
Rubriques connexes
• Redimensionnement d’un tableau, page 183
• Redimensionnement des colonnes et des lignes, page 184
Suppression des largeurs et hauteurs d&eacute;finies
Pour recommencer depuis le d&eacute;but, il peut &ecirc;tre utile d’effacer les largeurs et les hauteurs d&eacute;finies
avant de redimensionner un tableau ou en cas de probl&egrave;me lors du redimensionnement de
colonnes ou de lignes individuelles d’un tableau.
Remarque : Lorsque vous redimensionnez un tableau en faisant glisser l’une de ses poign&eacute;es de
s&eacute;lection, vous modifiez la dimension visuelle des cellules dans le tableau mais vous ne modifiez pas
les largeurs et hauteurs sp&eacute;cifi&eacute;es des cellules. Il est judicieux de supprimer des largeurs et des
hauteurs d&eacute;finies avant le redimensionnement.
Pour effacer toutes les largeurs et les hauteurs d&eacute;finies dans un tableau :
1 S&eacute;lectionnez le tableau (voir S&eacute;lection d’une table, page 178).
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
186
Choisissez Modifier &gt; Tableau &gt; Effacer les largeurs de colonnes ou Modifier &gt; Tableau &gt;
Effacer les hauteurs de cellules.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur le bouton Effacer les
hauteurs de ligne ou sur le bouton Effacer les largeurs de colonne.
Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Effacer toutes les hauteurs ou
Effacer toutes les largeurs.
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
Pour effacer une largeur de colonne d&eacute;finie :
1 Cliquez dans la colonne.
2 Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Effacer les largeurs de colonne.
Rubriques connexes
• Redimensionnement d’un tableau, page 183
• Redimensionnement des colonnes et des lignes, page 184
• Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles, page 186
Affichage des menus et de la largeur d’un tableau et des colonnes
Dreamweaver affiche la largeur des colonnes et du tableau, ainsi que les fl&egrave;ches permettant
d’acc&eacute;der au menu des en-t&ecirc;tes du tableau et aux menus des en-t&ecirc;tes des colonnes, lorsque le
tableau est s&eacute;lectionn&eacute; ou que le point d’insertion se trouve dedans. Pour plus d’informations,
voir A propos des tableaux, page 174. Vous pouvez activer ou d&eacute;sactiver ces informations &agrave; votre
convenance.
Pour activer ou d&eacute;sactiver les largeurs et les menus de tableau et de colonnes, proc&eacute;dez de
l’une des mani&egrave;res suivantes :
• Choisissez Affichage &gt; Assistances visuelles &gt; Largeurs de tableau.
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) dans le tableau, puis choisissez Tableau &gt; Largeurs de tableau.
Rubriques connexes
• Redimensionnement d’un tableau, page 183
• Redimensionnement des colonnes et des lignes, page 184
Ajout et suppression de lignes et de colonnes
Ajoutez ou supprimez des lignes et des colonnes &agrave; l’aide des commandes Modifier &gt; Tableau ou
du menu des en-t&ecirc;tes de colonne.
Conseil : Le fait d’appuyer sur la touche de tabulation lorsque le curseur se trouve dans la derni&egrave;re
cellule d’un tableau ajoute automatiquement une ligne.
Pour ajouter une ligne ou une colonne individuelle :
1 Cliquez dans une cellule.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Choisissez Modifier &gt; Tableau &gt; Ins&eacute;rer une ligne ou Modifier &gt; Tableau &gt; Ins&eacute;rer une
colonne.
Une ligne appara&icirc;t au-dessus du point d’insertion ou une colonne appara&icirc;t &agrave; gauche du
point d’insertion.
Ajout et suppression de lignes et de colonnes
187
■
Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Ins&eacute;rer une colonne &agrave; gauche ou
Ins&eacute;rer une colonne &agrave; droite.
Une colonne s’affiche &agrave; gauche ou &agrave; droite du point d’insertion.
Pour ajouter plusieurs lignes ou colonnes :
1 Cliquez dans une cellule.
2 Choisissez Modifier &gt; Tableau &gt; Ins&eacute;rer des lignes ou des colonnes.
La bo&icirc;te de dialogue Ins&eacute;rer des lignes ou des colonnes s’affiche.
3 Choisissez Lignes ou Colonnes, puis compl&eacute;tez la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Les lignes ou les colonnes s’affichent dans le tableau.
Pour supprimer une ligne ou une colonne, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis choisissez
Modifier &gt; Tableau &gt; Supprimer la ligne ou Modifier &gt; Tableau &gt; Supprimer la colonne.
• S&eacute;lectionnez une ligne ou une colonne enti&egrave;re (voir S&eacute;lection de lignes ou de colonnes, page 179),
puis choisissez Edition &gt; Effacer ou appuyez sur la touche Suppr.
La ligne ou la colonne enti&egrave;re dispara&icirc;t du tableau.
Pour ajouter ou supprimer des lignes ou des colonnes en utilisant l’inspecteur de propri&eacute;t&eacute;s :
1 S&eacute;lectionnez le tableau (voir S&eacute;lection d’une table, page 178).
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), proc&eacute;dez de l’une des mani&egrave;res
suivantes :
■ Augmentez ou r&eacute;duisez la valeur indiquant le nombre de lignes pour en ajouter ou en
supprimer.
Dreamweaver ajoute ou supprime des lignes au bas du tableau.
■ Augmentez ou r&eacute;duisez la valeur indiquant le nombre de colonnes pour en ajouter ou en
supprimer.
Dreamweaver ajoute ou supprime des colonnes &agrave; droite du tableau.
Remarque : Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes
contenant des donn&eacute;es.
Rubriques connexes
• Insertion d’un tableau r&eacute;p&eacute;t&eacute;, page 246
• Affichage de plusieurs r&eacute;sultats d’un jeu d’enregistrements, page 587
188
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
Fractionnement et fusion de cellules
Utilisez l’inspecteur de propri&eacute;t&eacute;s ou les commandes du sous-menu Modifier &gt; Tableau pour
fractionner ou fusionner des cellules. Pour plus d’informations, voir A propos du fractionnement et
de la fusion de cellules de tableau, page 175.
Pour fusionner ou fractionner des cellules, Dreamweaver permet &eacute;galement d’augmenter ou de
r&eacute;duire le nombre de lignes et de colonnes occup&eacute;es par une cellule.
Pour fusionner deux cellules ou plus d’un tableau :
1 S&eacute;lectionnez les cellules dans une ligne contigu&euml; et sous forme rectangulaire.
Dans l’illustration ci-dessous, la s&eacute;lection est un rectangle de cellules ; les cellules peuvent donc
&ecirc;tre fusionn&eacute;es.
Dans l’illustration ci-dessous, la s&eacute;lection n’est pas un rectangle ; les cellules ne peuvent donc
pas &ecirc;tre fusionn&eacute;es.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Modifier &gt; Tableau &gt; Fusionner les cellules.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) en mode agrandi, cliquez sur le
bouton Fusionner les cellules.
Remarque : Si le bouton n’est pas visible, cliquez sur la fl&egrave;che dans le coin inf&eacute;rieur droit de
l’inspecteur de propri&eacute;t&eacute;s pour afficher toutes les options.
Le contenu des cellules individuelles est plac&eacute; dans la cellule produite par la fusion. Les
propri&eacute;t&eacute;s de la premi&egrave;re cellule s&eacute;lectionn&eacute;e sont appliqu&eacute;es &agrave; la cellule fusionn&eacute;e.
Pour fractionner une cellule :
1 Cliquez dans la cellule.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Modifier &gt; Tableau &gt; Fractionner la cellule.
Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) en mode agrandi, cliquez sur le
bouton Fractionner la cellule.
Fractionnement et fusion de cellules
189
Remarque : Si le bouton n’est pas visible, cliquez sur la fl&egrave;che dans le coin inf&eacute;rieur droit de
l’inspecteur de propri&eacute;t&eacute;s pour afficher toutes les options.
3 Dans la bo&icirc;te de dialogue Fractionner la cellule, sp&eacute;cifiez comment vous voulez fractionner la
cellule.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Pour augmenter ou r&eacute;duire le nombre de lignes ou de colonnes occup&eacute;es par une cellule :
1 S&eacute;lectionnez une cellule.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Modifier &gt; Tableau &gt; Augmenter l’&eacute;tendue de ligne ou Modifier &gt; Tableau &gt;
Augmenter l’&eacute;tendue de colonne.
Choisissez Modifier &gt; Tableau &gt; R&eacute;duire l’&eacute;tendue de ligne ou Modifier &gt; Tableau &gt; R&eacute;duire
l’&eacute;tendue de colonne.
Copie, collage et suppression de cellules
Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en pr&eacute;servant leur mise en
forme.
Vous pouvez coller les cellules au niveau d’un point d’insertion ou &agrave; la place d’une s&eacute;lection dans
un tableau existant. Pour coller plusieurs cellules de tableau, il faut que le contenu du Pressepapiers soit compatible avec la structure du tableau ou de la s&eacute;lection du tableau dans laquelle les
cellules seront coll&eacute;es.
Pour couper ou copier les cellules d’un tableau :
1 S&eacute;lectionnez une ou plusieurs cellules dans une ligne contigu&euml; et sous forme rectangulaire.
Dans l’illustration ci-dessous, la s&eacute;lection est un rectangle de cellules ; les cellules peuvent donc
&ecirc;tre coup&eacute;es ou copi&eacute;es.
Dans l’illustration ci-dessous, la s&eacute;lection n’est pas un rectangle ; les cellules ne peuvent donc
pas &ecirc;tre coup&eacute;es ou copi&eacute;es.
2 Choisissez Edition &gt; Couper ou Edition &gt; Copier.
190
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
Remarque : Si vous avez s&eacute;lectionn&eacute; une ligne ou une colonne enti&egrave;re et que vous choisissez
Edition &gt; Couper, la ligne ou la colonne enti&egrave;re est supprim&eacute;e du tableau (et non pas seulement le
contenu des cellules).
Pour coller des cellules de tableau :
1 Choisissez l’emplacement o&ugrave; coller les cellules :
■
■
■
Pour remplacer des cellules existantes par les cellules que vous collez, s&eacute;lectionnez une s&eacute;rie
de cellules existantes dont la mise en forme est la m&ecirc;me que celle des cellules du Pressepapiers.
Par exemple, si vous avez copi&eacute; ou coup&eacute; un bloc de 3 x 2 cellules, vous pouvez s&eacute;lectionner
un autre bloc de 3 x 2 cellules pour le remplacer par les cellules coup&eacute;es ou copi&eacute;es.
Pour coller une ligne enti&egrave;re de cellules au-dessus d’une cellule sp&eacute;cifique, cliquez dans celleci.
Pour coller une colonne enti&egrave;re de cellules &agrave; gauche d’une cellule sp&eacute;cifique, cliquez dans
celle-ci.
Remarque : Si vous avez plac&eacute; moins d’une ligne ou d’une colonne enti&egrave;re dans le Pressepapiers et que vous cliquez dans une cellule puis collez les cellules figurant dans le Pressepapiers, alors il se peut que la cellule dans laquelle vous avez cliqu&eacute; et les cellules voisines
(selon leur emplacement dans le tableau) soient remplac&eacute;es par les cellules que vous avez
coll&eacute;es.
Pour cr&eacute;er un nouveau tableau avec les cellules coll&eacute;es, placez le point d’insertion hors du
tableau.
2 S&eacute;lectionnez Edition &gt; Coller.
Si vous collez des lignes ou des colonnes enti&egrave;res dans un tableau existant, celles-ci s’ajoutent au
tableau. Si vous ne collez qu’une seule cellule, le contenu de la cellule s&eacute;lectionn&eacute;e est remplac&eacute;.
Si vous collez le contenu du Presse-papiers en dehors d’un tableau, les lignes, colonnes ou
cellules que vous collez sont utilis&eacute;es pour d&eacute;finir un nouveau tableau.
■
Pour supprimer le contenu d’une cellule en conservant les cellules intactes :
1 S&eacute;lectionnez une ou plusieurs cellules.
Remarque : Veillez &agrave; ce que la s&eacute;lection ne comprenne pas de lignes ou de colonnes enti&egrave;res.
2 Choisissez Edition &gt; Effacer ou appuyez sur la touche Suppr.
Remarque : Si seules des lignes ou des colonnes enti&egrave;res sont s&eacute;lectionn&eacute;es lorsque vous
choisissez Edition &gt; Effacer ou que vous appuyez sur Suppr, les lignes ou les colonnes enti&egrave;res (pas
seulement leurs contenus) sont supprim&eacute;es du tableau.
Pour effacer des lignes ou des colonnes contenant des cellules fusionn&eacute;es :
1 S&eacute;lectionnez une ligne ou une colonne.
2 Choisissez Modifier &gt; Tableau &gt; Supprimer la ligne ou Modifier &gt; Tableau &gt; Supprimer la
colonne.
Copie, collage et suppression de cellules
191
Imbrication de tableaux
Un tableau imbriqu&eacute; est un tableau &agrave; l’int&eacute;rieur d’une cellule d’un autre tableau. Vous pouvez le
mettre en forme comme n’importe quel tableau, mais sa largeur est limit&eacute;e par la largeur de la
cellule dans laquelle il se trouve.
Pour imbriquer un tableau &agrave; l’int&eacute;rieur d’une cellule de tableau :
1 Cliquez dans une cellule du tableau.
2 Choisissez Insertion &gt; Tableau.
La bo&icirc;te de dialogue Tableau s’affiche.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Le tableau s’affiche dans le tableau existant.
Tri des tableaux
Vous pouvez trier les lignes d’un tableau selon le contenu d’une seule colonne. Vous pouvez
&eacute;galement effectuer un tri plus complexe, selon le contenu de deux colonnes.
Vous ne pouvez pas trier les tableaux contenant des attributs colspan ou rowspan, c’est-&agrave;-dire les
tableaux contenant des cellules fusionn&eacute;es. Pour plus d’informations, voir Fractionnement et fusion
de cellules, page 189.
Pour trier un tableau :
1 S&eacute;lectionnez le tableau (voir S&eacute;lection d’une table, page 178) ou cliquez dans une cellule.
2 Choisissez Commandes &gt; Trier le tableau.
La bo&icirc;te de dialogue Trier le tableau s’affiche.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
192
Chapitre 8 : Pr&eacute;sentation de contenu &agrave; l’aide de tableaux
CHAPITRE 9
Mise en forme des pages avec le mode
Mise en forme
Une m&eacute;thode courante pour cr&eacute;er une mise en page consiste &agrave; utiliser des tableaux HTML pour
positionner les &eacute;l&eacute;ments. Cependant, il peut &ecirc;tre difficile d’utiliser les tableaux pour les mises en
page, car ils ont &eacute;t&eacute; cr&eacute;&eacute;s &agrave; l’origine pour afficher des donn&eacute;es tabulaires et non pour mettre en
forme des pages Web. Pour simplifier l’utilisation de tableaux pour la mise en page, Macromedia
Dreamweaver MX 2004 met &agrave; votre disposition un mode Mise en forme.
En mode Mise en forme, vous pouvez cr&eacute;er votre page en utilisant des tableaux comme structure
sous-jacente, tout en &eacute;vitant certains probl&egrave;mes qui surviennent souvent lors de la cr&eacute;ation de
pages r&eacute;alis&eacute;e &agrave; partir de tableaux &agrave; l’aide de m&eacute;thodes traditionnelles.
Remarque : Pour plus d’informations sur l’utilisation de tableaux en mode Standard, voir Chapitre 8,
Pr&eacute;sentation de contenu &agrave; l’aide de tableaux, page 173. Vous pouvez &eacute;galement effectuer la mise en
page &agrave; l’aide du positionnement CSS (voir Insertion de blocs de contenu pour la mise en forme,
page 157) au lieu des tableaux en mode Standard ou Mise en forme.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
A propos du mode Mise en forme, page 193
Basculement du mode Standard au mode Mise en forme, page 197
R&eacute;alisation de dessins en mode Mise en forme, page 198
Ajout de contenu dans une cellule de Mise en forme, page 201
Suppression automatique des hauteurs de cellule, page 202
Redimensionnement et d&eacute;placement de cellules et tableaux de Mise en forme, page 202
Formatage de cellules et de tableaux de Mise en forme, page 204
D&eacute;finition de la largeur des colonnes, page 204
D&eacute;finition de pr&eacute;f&eacute;rences pour le mode Mise en forme, page 207
A propos du mode Mise en forme
En mode Mise en forme, effectuez la mise en page &agrave; l’aide de cellules et de tableaux de mise en
forme, avant d’ajouter du contenu sur votre page. Par exemple, vous pouvez dessiner une cellule le
long du bord sup&eacute;rieur de votre page pour y placer une image d’en-t&ecirc;te, une autre cellule sur le
c&ocirc;t&eacute; gauche pour y placer une barre de navigation et une troisi&egrave;me cellule sur la droite pour les
contenus. Lorsque vous ajoutez du contenu, vous pouvez d&eacute;placer les cellules afin d’ajuster la mise
en forme.
193
Conseil : Pour b&eacute;n&eacute;ficier d’une flexibilit&eacute; maximale, vous pouvez dessiner chaque cellule uniquement
lorsque vous &ecirc;tes sur le point d’y placer du contenu. Vous pouvez ainsi laisser davantage d’espace
vide dans le tableau de mise en forme, afin de pouvoir d&eacute;placer ou redimensionner les cellules plus
facilement.
Les tableaux de mise en forme s’affichent avec un contour vert et les cellules de mise en forme avec
un contour bleu sur votre page. (Pour changer les couleurs de contour par d&eacute;faut, voir D&eacute;finition
de pr&eacute;f&eacute;rences pour le mode Mise en forme, page 207.) Lorsque vous faites passer le pointeur sur une
cellule de tableau, Dreamweaver met la cellule en surbrillance. (Pour activer ou d&eacute;sactiver la
surbrillance ou pour en changer la couleur, voir Dessin de cellules et de tableaux de Mise en forme,
page 198.)
Vous pouvez effectuer la mise en forme de votre page &agrave; l’aide de plusieurs cellules de mise en
forme &agrave; l’int&eacute;rieur d’un m&ecirc;me tableau. Il s’agit de la m&eacute;thode la plus utilis&eacute;e sur les pages Web.
Vous pouvez &eacute;galement effectuer une mise en forme plus sophistiqu&eacute;e &agrave; l’aide de plusieurs
tableaux. L’utilisation de plusieurs tableaux permet d’isoler certaines zones afin qu’elles ne soient
pas affect&eacute;es par les changements op&eacute;r&eacute;s dans d’autres.
Vous pouvez &eacute;galement imbriquer des tableaux, c’est-&agrave;-dire ins&eacute;rer un nouveau tableau de mise en
forme dans un tableau existant (voir Dessin d’un tableau de Mise en forme imbriqu&eacute;, page 199). Ce
proc&eacute;d&eacute; permet de simplifier la structure du tableau lorsque les lignes ou les colonnes d’une partie
de la mise en forme ne sont pas align&eacute;es avec celles qui figurent ailleurs dans la mise en forme. Par
exemple, en utilisant des tableaux imbriqu&eacute;s, vous pouvez facilement cr&eacute;er une mise en forme &agrave;
deux colonnes avec quatre lignes dans la colonne gauche et trois lignes dans la colonne droite.
Rubriques connexes
• Basculement du mode Standard au mode Mise en forme, page 197
• R&eacute;alisation de dessins en mode Mise en forme, page 198
194
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
A propos de l’affichage de la largeur des tableaux et des cellules en mode
Mise en forme
La largeur des tableaux et des cellules de mise en forme (en pixels ou en pourcentage de la largeur
de la page) s’affiche en haut ou en bas du tableau lorsque celui-ci est s&eacute;lectionn&eacute; ou lorsque le
point d’insertion se trouve &agrave; l’int&eacute;rieur. Pr&egrave;s de la largeur se trouvent des fl&egrave;ches permettant
d’ouvrir les menus d’en-t&ecirc;te de tableau et de colonne. Vous pouvez acc&eacute;der rapidement &agrave; des
commandes courantes &agrave; l’aide de ces menus.
Remarque : Pour d&eacute;sactiver la largeur des colonnes, ainsi que les onglets de tableau et les menus
d’en-t&ecirc;te, vous devez d&eacute;sactiver toutes les assistances visuelles (Affichage &gt; Assistances visuelles &gt;
Masquer tout).
Parfois, la largeur d’une colonne ne s’affiche pas. Elle peut alors &ecirc;tre remplac&eacute;e par l’un des
&eacute;l&eacute;ments suivants :
• Absence de largeur. Si vous ne voyez pas la largeur d’un tableau ou d’une colonne, cela signifie
•
•
•
qu’elle n’est pas sp&eacute;cifi&eacute;e dans le code HTML. Pour sp&eacute;cifier une largeur fixe, voir Application
de l’extension automatique ou d’une largeur fixe &agrave; une colonne, page 204.
Deux nombres. Si deux nombres s’affichent, cela signifie que la largeur visuelle qui appara&icirc;t en
mode Cr&eacute;ation est diff&eacute;rente de la largeur sp&eacute;cifi&eacute;e dans le code HTML. Cela peut se produire
lorsque vous redimensionnez un tableau en faisant glisser son coin inf&eacute;rieur droit ou lorsque
vous ajoutez du contenu &agrave; une cellule plus grande que sa valeur d&eacute;finie.
Par exemple, si vous d&eacute;finissez une largeur de colonne de 200 pixels, puis que vous ajoutez du
contenu qui &eacute;tend la largeur &agrave; 250 pixels, deux nombres s’affichent en haut de la colonne : 200
(la largeur sp&eacute;cifi&eacute;e dans le code) et (250) entre parenth&egrave;ses (la largeur visuelle de la colonne
telle qu’elle appara&icirc;t &agrave; l’&eacute;cran).
Pour uniformiser les largeurs de colonne, voir Uniformisation des largeurs de colonne en mode
Code avec les largeurs visuelles, page 206.
Ligne ondul&eacute;e. Une ligne ondul&eacute;e s’affiche pour les colonnes dont l’option Extension
automatique est activ&eacute;e. Pour plus d’informations sur l’activation de l’option Extension
automatique d’une colonne, voir Application de l’extension automatique ou d’une largeur fixe &agrave;
une colonne, page 204.
Barre double. La largeur des colonnes qui contiennent des images d’espacement est entour&eacute;e
d’une barre double. Pour plus d’informations sur les images d’espacement, voir Utilisation des
images d’espacement, page 205.
Rubriques connexes
• D&eacute;finition de la largeur des colonnes, page 204
A propos du mode Mise en forme
195
Tableau de mise en forme et lignes de grille de cellules
Lorsque vous dessinez une cellule de mise en forme dans un tableau, une fine grille de lignes
s’affiche, prolongeant les bords de la nouvelle cellule jusqu’aux bords du tableau qui la contient.
Ces lignes vous aident &agrave; aligner les nouvelles cellules avec les anciennes et &agrave; visualiser la structure
du tableau HTML sous-jacent.
Dreamweaver aligne automatiquement les bords des nouvelles cellules sur ceux des anciennes. Les
cellules de Mise en forme ne peuvent pas se chevaucher. Les bords des cellules sont
automatiquement align&eacute;s sur ceux du tableau de Mise en forme qui les contient si vous dessinez
une cellule &agrave; proximit&eacute; du bord d’un tableau.
Vous pouvez &eacute;galement vous aider de la grille de Dreamweaver, qui est fixe et ne change pas selon
la disposition des cellules, pour effectuer la mise en forme de votre page (voir Utilisation des r&egrave;gles
et des grilles pour la mise en forme des pages, page 170).
Rubriques connexes
• A propos du mode Mise en forme, page 193
Largeur de colonne fixe et colonnes &agrave; extension automatique
En mode Mise en forme, une colonne peut avoir une largeur fixe ou une largeur qui s’&eacute;tend
automatiquement pour remplir autant que possible la fen&ecirc;tre du navigateur (extension
automatique).
Les colonnes &agrave; largeur fixe ont une largeur num&eacute;rique sp&eacute;cifique, par exemple 300 pixels.
Dreamweaver affiche la largeur de chacune en haut ou en bas de la colonne.
Les colonnes &agrave; extension automatique changent automatiquement selon la largeur de la fen&ecirc;tre
du navigateur. Si votre mise en forme inclut une colonne d’extension automatique, elle remplit
toujours la largeur totale de la fen&ecirc;tre de navigateur de l’utilisateur. Dans un tableau de Mise en
forme, vous ne pouvez appliquer l’extension automatique qu’&agrave; une seule colonne. Une ligne
ondul&eacute;e s’affiche dans la zone de largeur des colonnes &agrave; extension automatique.
La mise en page la plus courante consiste &agrave; appliquer l’extension automatique &agrave; la colonne qui
contient le plus grand nombre de donn&eacute;es, la largeur fixe &eacute;tant attribu&eacute;e &agrave; toutes les autres
colonnes. Supposons, par exemple, que votre mise en page comporte une grande image sur le c&ocirc;t&eacute;
gauche de votre page et une colonne de texte sur la droite. Vous pouvez dans ce cas d&eacute;finir une
largeur fixe pour la colonne de gauche et une extension automatique pour la zone d’encadr&eacute;.
Lorsque vous attribuez une extension automatique &agrave; une colonne, Dreamweaver ins&egrave;re des images
d’espacement dans les colonnes &agrave; largeur fixe pour garantir que ces colonnes conservent une
largeur appropri&eacute;e, sauf si vous d&eacute;sactivez cette option. Une image d’espacement est une image
transparente, donc invisible dans la fen&ecirc;tre du navigateur, utilis&eacute;e pour contr&ocirc;ler l’espacement.
Rubriques connexes
• Application de l’extension automatique ou d’une largeur fixe &agrave; une colonne, page 204
196
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
Images d’espacement
Une image d’espacement (&eacute;galement appel&eacute;e GIF d’espacement) est une image transparente utilis&eacute;e
pour contr&ocirc;ler l’espacement dans des tableaux d’extension automatique. Il s’agit d’une image GIF
transparente d’un seul pixel, qu’il est possible d’&eacute;tendre &agrave; une largeur bien pr&eacute;cise en termes de
pixels. Un navigateur ne peut pas dessiner une colonne de tableau plus &eacute;troite que l’image la plus
large contenue dans une des cellules de cette colonne. Par cons&eacute;quent, placer une image
d’espacement dans la colonne d’un tableau n&eacute;cessite des navigateurs pour conserver une largeur
de colonne au moins aussi large que l’image.
Dreamweaver ajoute automatiquement des images d’espacement lorsque vous appliquez
l’extension automatique &agrave; une colonne, sauf si vous d&eacute;sactivez cette option. Vous pouvez
&eacute;galement ins&eacute;rer et supprimer manuellement des images d’espacement dans chaque colonne. Les
colonnes qui contiennent des images d’espacement ont une barre double dans la zone de largeur.
Vous pouvez ins&eacute;rer et supprimer manuellement des images d’espacement dans des colonnes
sp&eacute;cifiques ou supprimer toutes les images d’espacement de la page.
Rubriques connexes
• Utilisation des images d’espacement, page 205
Basculement du mode Standard au mode Mise en forme
Avant de dessiner des tableaux ou des cellules de Mise en forme, vous devez passer du mode
Standard au mode Mise en forme. Il est plus facile de cr&eacute;er des tableaux de mise en forme en
mode Mise en forme qu’en mode Standard, mais il est judicieux de revenir en mode Standard
avant d’ajouter du contenu &agrave; vos tableaux ou de les modifier.
Remarque : Si vous cr&eacute;ez un tableau en mode Standard, puis que vous basculez en mode Mise en
forme, le tableau cr&eacute;&eacute; peut contenir des cellules de mise en forme vides. Vous devrez peut-&ecirc;tre
supprimer ces cellules vides avant de cr&eacute;er ou de d&eacute;placer des cellules.
Pour passer en mode Mise en forme :
1 Si vous travaillez en mode Code, choisissez Affichage &gt; Cr&eacute;ation ou Affichage &gt; Code et
cr&eacute;ation.
Vous ne pouvez pas passer du mode Code au mode Mise en forme.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Choisissez Affichage &gt; Mode Tableau &gt; Mode Mise en forme.
■ Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Mise en forme.
Une barre &eacute;tiquet&eacute;e Mode Mise en forme s’affiche en haut de la fen&ecirc;tre de document. Si votre
page comporte des tableaux, ceux-ci s’affichent sous forme de tableaux de Mise en forme.
Pour quitter le mode Mise en forme, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur [quitter] sur la barre &eacute;tiquet&eacute;e Mode Mise en forme situ&eacute;e en haut de la fen&ecirc;tre de
•
•
document.
Choisissez Affichage &gt; Mode Tableau &gt; Mode Standard.
Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Standard.
Dreamweaver repasse en mode Standard.
Basculement du mode Standard au mode Mise en forme
197
R&eacute;alisation de dessins en mode Mise en forme
Le mode Mise en forme vous permet de dessiner des cellules et des tableaux, y compris des
tableaux imbriqu&eacute;s dans d’autres tableaux. La grille d’alignement vous aide &agrave; aligner les cellules
(voir Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages, page 170).
Dessin de cellules et de tableaux de Mise en forme
En mode Mise en forme, vous pouvez dessiner des cellules de mise en forme et des tableaux de
mise ne forme. Lorsque vous cr&eacute;ez une cellule de Mise en forme &agrave; l’ext&eacute;rieur d’un tableau,
Dreamweaver cr&eacute;e automatiquement un tableau de Mise en forme pour contenir cette cellule, qui
ne peut pas exister en dehors d’un tableau.
Remarque : En mode Mise en forme, vous ne pouvez pas utiliser les outils Ins&eacute;rer un tableau et
Dessiner un calque, disponibles uniquement en mode Standard. Pour utiliser ces outils, vous devez
d’abord basculer en mode Standard.
Si Dreamweaver cr&eacute;e automatiquement un tableau de Mise en forme, celui-ci remplit la page
enti&egrave;re du mode Cr&eacute;ation, m&ecirc;me si vous modifiez la taille de votre fen&ecirc;tre de document. Ce
tableau vous permet de dessiner des cellules de Mise en forme &agrave; n’importe quel endroit en mode
Cr&eacute;ation. Vous pouvez d&eacute;finir une taille sp&eacute;cifique pour le tableau en cliquant sur une bordure et
en faisant glisser les poign&eacute;es de redimensionnement.
Lorsque vous faites passer le pointeur sur une cellule de mise en forme, Dreamweaver la met en
surbrillance. Vous pouvez activer ou d&eacute;sactiver la surbrillance ou en changer la couleur dans les
pr&eacute;f&eacute;rences.
Pour dessiner une cellule de Mise en forme :
1 Assurez-vous que vous &ecirc;tes en mode Mise en forme (voir Basculement du mode Standard au mode
Mise en forme, page 197).
2 Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Dessiner la cellule de
Mise en forme.
Le pointeur se change en r&eacute;ticule (+).
3 Cliquez &agrave; l’endroit o&ugrave; vous souhaitez placer la cellule sur la page, puis faites glisser le pointeur
pour cr&eacute;er la cellule.
Conseil : Pour dessiner plusieurs cellules de Mise en forme sans avoir &agrave; s&eacute;lectionner plusieurs fois
le bouton Dessiner la cellule de Mise en forme, maintenez la touche Ctrl (Windows) ou Commande
(Macintosh) enfonc&eacute;e tout en cliquant sur le bouton Dessiner la cellule de Mise en forme. Tant que
vous maintenez la touche Ctrl ou Commande enfonc&eacute;e, vous pouvez dessiner des cellules de
Mise en forme les unes apr&egrave;s les autres
Si vous dessinez la cellule pr&egrave;s du bord du tableau de mise en forme, les bords de la cellule
s’alignent automatiquement sur les bords du tableau. Pour d&eacute;sactiver temporairement
l’alignement, maintenez la touche Alt (Windows) ou Option (Macintosh) enfonc&eacute;e pendant
que vous dessinez la cellule.
La cellule s’affiche sur votre page avec un contour bleu. Pour modifier la couleur du contour, voir
D&eacute;finition de pr&eacute;f&eacute;rences pour le mode Mise en forme, page 207.
Pour dessiner un tableau de Mise en forme :
1 Assurez-vous que vous &ecirc;tes en mode Mise en forme (voir Basculement du mode Standard au mode
Mise en forme, page 197).
198
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
2 Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Tableau de Mise en
forme.
Le pointeur se change en r&eacute;ticule (+).
3 Placez le pointeur sur la page, puis faites-le glisser pour cr&eacute;er le tableau de Mise en forme.
Conseil : Pour dessiner plusieurs tableaux de Mise en forme sans avoir &agrave; s&eacute;lectionner plusieurs
fois le bouton Dessiner le tableau de Mise en forme, maintenez la touche Ctrl (Windows) ou
Commande (Macintosh) enfonc&eacute;e tout en cliquant sur le bouton Dessiner le tableau de Mise en
forme. Tant que vous maintenez la touche Ctrl ou Commande enfonc&eacute;e, vous pouvez dessiner
des tableaux de Mise en forme les uns apr&egrave;s les autres
Vous pouvez cr&eacute;er un tableau de Mise en forme dans une zone vide de votre mise en page,
autour d’autres cellules et tableaux ou &agrave; l’int&eacute;rieur d’un tableau existant. Si votre page contient
des &eacute;l&eacute;ments et que vous souhaitez ajouter un tableau de Mise en forme dans une zone vide de
votre mise en page, vous pouvez dessiner un nouveau tableau de Mise en forme uniquement
sous le contenu existant.
Conseil : Si vous essayez de dessiner un tableau de Mise en forme sous du contenu existant et
que le pointeur ne vous le permet pas, redimensionnez la fen&ecirc;tre de document pour cr&eacute;er
davantage d’espace vide entre le bas du contenu existant et celui de la fen&ecirc;tre.
Remarque : Les tableaux ne peuvent pas se chevaucher, mais un tableau peut en contenir un
autre. Pour plus d’informations, voir Dessin d’un tableau de Mise en forme imbriqu&eacute;, page 199.
Le tableau de Mise en forme s’affiche avec un contour vert. Pour modifier la couleur du contour,
voir D&eacute;finition de pr&eacute;f&eacute;rences pour le mode Mise en forme, page 207.
Pour modifier les pr&eacute;f&eacute;rences de surbrillance des cellules de mise en forme :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 Choisissez la cat&eacute;gorie Surbrillance dans la liste de gauche.
3 Apportez l’une des modifications suivantes :
■ Pour changer la couleur de surbrillance, cliquez sur la case de couleur Survol, puis
s&eacute;lectionnez une couleur de surbrillance &agrave; l’aide du s&eacute;lecteur de couleur (ou entrez la valeur
hexad&eacute;cimale correspondant &agrave; la couleur de surbrillance dans la zone de texte).
Pour plus d’informations sur l’utilisation de la pipette, voir Utilisation des couleurs,
page 273.
■ Pour activer ou d&eacute;sactiver la mise en surbrillance, activez ou d&eacute;sactivez l’option Afficher de
la case Survol.
Remarque : Ces options s’appliquent &agrave; tous les objets, tels que les tableaux et les calques, que
Dreamweaver met en surbrillance lorsque vous faites passer le pointeur dessus.
4 Cliquez sur OK.
Dessin d’un tableau de Mise en forme imbriqu&eacute;
Vous pouvez dessiner un tableau de Mise en forme &agrave; l’int&eacute;rieur d’un autre tableau pour cr&eacute;er un
tableau imbriqu&eacute;. Les cellules qui se trouvent &agrave; l’int&eacute;rieur d’un tableau imbriqu&eacute; ne sont pas
affect&eacute;es par les modifications apport&eacute;es au tableau externe. Par exemple, lorsque vous modifiez la
taille d’une ligne ou d’une colonne dans ce tableau, la taille des cellules du tableau interne ne
change pas.
R&eacute;alisation de dessins en mode Mise en forme
199
Vous pouvez constituer plusieurs niveaux de tableaux imbriqu&eacute;s. Un tableau de Mise en forme
imbriqu&eacute; ne peut pas &ecirc;tre plus grand que le tableau qui le contient.
Remarque : Si vous dessinez un tableau de Mise en forme au milieu de votre page avant de dessiner
une cellule de Mise en forme, ce tableau est automatiquement imbriqu&eacute; dans un tableau plus grand.
Pour dessiner un tableau de Mise en forme imbriqu&eacute; :
1 Assurez-vous que vous &ecirc;tes en mode Mise en forme (voir Basculement du mode Standard au mode
Mise en forme, page 197).
2 Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Tableau de Mise en
forme.
Le pointeur se change en r&eacute;ticule (+).
3 Placez le curseur dans une zone vide (grise) d’un tableau de Mise en forme existant, puis faitesle glisser afin de cr&eacute;er le tableau imbriqu&eacute;.
Remarque : Vous ne pouvez pas cr&eacute;er de tableau &agrave; l’int&eacute;rieur d’une cellule de Mise en forme.
Vous pouvez cr&eacute;er un tableau de Mise en forme imbriqu&eacute; uniquement dans une zone vide d’un
tableau existant ou autour de cellules existantes.
Pour dessiner un tableau de Mise en forme autour de cellules ou de tableaux existants :
1 Assurez-vous que vous &ecirc;tes en mode Mise en forme (voir Basculement du mode Standard au mode
Mise en forme, page 197).
2 Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur le bouton Tableau de Mise en
forme.
Le pointeur se change en r&eacute;ticule (+).
3 Faites-le glisser pour dessiner un rectangle autour d’un ensemble de cellules ou de tableaux de
Mise en forme existants.
Un nouveau tableau imbriqu&eacute; appara&icirc;t autour des cellules ou tableaux existants.
Conseil : Si vous souhaitez qu’une cellule de Mise en forme existante s’adapte parfaitement &agrave; un
coin du nouveau tableau imbriqu&eacute;, faites-la glisser vers l’emplacement souhait&eacute; ; le coin du
nouveau tableau s’aligne avec celui de la cellule. Vous ne pouvez pas op&eacute;rer de glissement &agrave; partir
du milieu d’une cellule de Mise en forme, car il est impossible de cr&eacute;er de tableau &agrave; l’int&eacute;rieur d’une
cellule de Mise en forme.
200
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
Ajout de contenu dans une cellule de Mise en forme
En mode Mise en forme, vous pouvez ajouter du texte, des images ou tout autre contenu &agrave; des
cellules de Mise en forme tout comme vous le feriez en mode Standard. Cliquez dans la cellule o&ugrave;
vous souhaitez ins&eacute;rer un contenu, puis entrez du texte ou ins&eacute;rez un autre contenu.
Vous pouvez ins&eacute;rer du contenu uniquement dans une cellule de Mise en forme et non dans une
zone vide (grise) d’un tableau, c’est pourquoi vous devez cr&eacute;er des cellules de Mise en forme avant
d’ajouter du contenu (voir R&eacute;alisation de dessins en mode Mise en forme, page 198).
Pour ajouter du texte dans une cellule de Mise en forme :
1 Placez le point d’insertion dans la cellule de Mise en forme o&ugrave; vous souhaitez ajouter du texte.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Tapez le texte dans la cellule.
Si n&eacute;cessaire, cette derni&egrave;re s’&eacute;tend automatiquement au fur et &agrave; mesure de la saisie.
Collez du texte copi&eacute; depuis un autre document.
Pour plus d’informations, voir Insertion de texte, page 294.
La cellule de Mise en forme s’&eacute;tend automatiquement au fur et &agrave; mesure que vous y ajoutez des
donn&eacute;es. Lorsque la cellule s’&eacute;tend, la colonne contenant cette cellule s’&eacute;tend &eacute;galement, ce qui
peut modifier la taille des cellules voisines. La largeur de cette colonne affiche la largeur qui
appara&icirc;t dans le code, suivie de la largeur visuelle de la colonne (telle qu’elle appara&icirc;t sur votre
&eacute;cran) entre parenth&egrave;ses. Pour plus d’informations sur la largeur des colonnes, voir D&eacute;finition de
la largeur des colonnes, page 204.
Pour ajouter une image &agrave; une cellule de Mise en forme :
1 Placez le point d’insertion dans la cellule de Mise en forme o&ugrave; vous souhaitez ajouter l’image.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Insertion &gt; Image.
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Images, puis
choisissez Image.
Conseil : Si le bouton Image est affich&eacute; (comme dans l’exemple suivant) dans la barre Ins&eacute;rer,
vous pouvez cliquer dessus au lieu d’utiliser le menu d&eacute;roulant.
La bo&icirc;te de dialogue S&eacute;lectionnez la source de l’image s’affiche.
3 Choisissez un fichier d’image.
Pour plus d’informations, voir Insertion d’une image, page 319.
4 Cliquez sur OK.
Ajout de contenu dans une cellule de Mise en forme
201
L’image appara&icirc;t dans la cellule de Mise en forme.
Suppression automatique des hauteurs de cellule
Lorsque vous cr&eacute;ez une cellule de Mise en forme, Dreamweaver sp&eacute;cifie automatiquement une
hauteur pour la cellule, afin que celle-ci, m&ecirc;me vide, s’affiche &agrave; la hauteur que vous avez dessin&eacute;e.
Une fois que vous avez ins&eacute;r&eacute; du contenu dans la cellule, il n’est pas forc&eacute;ment n&eacute;cessaire de
sp&eacute;cifier la hauteur. Vous pouvez alors supprimer les hauteurs de cellule explicites du tableau.
Pour ce faire, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le menu des en-t&ecirc;tes du tableau, puis choisissez Effacer toutes les hauteurs.
• S&eacute;lectionnez un tableau de Mise en forme en cliquant sur l’onglet en haut du tableau, puis
cliquez sur le bouton Effacer les hauteurs de ligne dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt;
Propri&eacute;t&eacute;s).
Dreamweaver efface toutes les hauteurs sp&eacute;cifi&eacute;es dans le tableau. Il se peut que certaines cellules
se r&eacute;tr&eacute;cissent verticalement.
Redimensionnement et d&eacute;placement de cellules et tableaux de
Mise en forme
Afin d’ajuster la mise en page, vous pouvez d&eacute;placer et redimensionner des cellules de Mise en
forme et des tableaux de Mise en forme imbriqu&eacute;s. (Le tableau de Mise en forme le plus &agrave;
l’ext&eacute;rieur peut uniquement &ecirc;tre redimensionn&eacute;.)
Remarque : Pour utiliser la grille Dreamweaver comme guide afin de d&eacute;placer ou de redimensionner
des cellules et des tableaux, voir Utilisation des r&egrave;gles et des grilles pour la mise en forme des pages,
page 170.
Redimensionnement et d&eacute;placement de cellules de Mise en forme
Vous pouvez redimensionner ou d&eacute;placer des cellules de Mise en forme, mais elles ne peuvent pas
se chevaucher. Vous ne pouvez pas d&eacute;placer ou redimensionner une cellule en de&ccedil;&agrave; des limites du
tableau qui la contient. La taille d’une cellule de Mise en forme ne peut pas &ecirc;tre inf&eacute;rieure &agrave; son
contenu.
Pour plus d’informations sur le redimensionnement ou le d&eacute;placement des tableaux de Mise en
forme, voir Redimensionnement et d&eacute;placement de tableaux de Mise en forme, page 203.
Pour redimensionner une cellule de Mise en forme :
1 Pour s&eacute;lectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfonc&eacute;e, puis cliquez n’importe o&ugrave; dans la cellule.
Des poign&eacute;es de s&eacute;lection s’affichent autour de la cellule.
202
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
2 Faites glisser l’une des poign&eacute;es de s&eacute;lection pour redimensionner la cellule.
Les bords de la cellule s’alignent automatiquement sur ceux des autres cellules.
Pour d&eacute;placer une cellule de Mise en forme :
1 Pour s&eacute;lectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfonc&eacute;e, puis cliquez n’importe o&ugrave; dans la cellule.
Des poign&eacute;es de s&eacute;lection s’affichent autour de la cellule.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Faites glisser la cellule vers un autre emplacement &agrave; l’int&eacute;rieur du tableau de Mise en forme.
■ Appuyez sur les touches fl&eacute;ch&eacute;es pour d&eacute;placer la cellule par incr&eacute;ments de 1 pixel.
Conseil : Maintenez la touche Maj enfonc&eacute;e tout en appuyant sur une touche directionnelle
pour d&eacute;placer la cellule par incr&eacute;ments de 10 pixels.
Redimensionnement et d&eacute;placement de tableaux de Mise en forme
La taille d’un tableau de Mise en forme ne peut pas &ecirc;tre inf&eacute;rieure &agrave; celle du plus petit rectangle
contenant toutes ses cellules. Un tableau ne doit pas non plus chevaucher les cellules et tableaux
voisins.
Pour redimensionner ou d&eacute;placer des cellules de Mise en forme, voir Redimensionnement et
d&eacute;placement de cellules de Mise en forme, page 202.
Pour redimensionner un tableau de Mise en forme :
1 S&eacute;lectionnez un tableau en cliquant sur l’onglet en haut du tableau.
Des poign&eacute;es de s&eacute;lection s’affichent autour du tableau.
2 Faites glisser ces poign&eacute;es de s&eacute;lection pour redimensionner le tableau.
Les bords du tableau s’alignent automatiquement sur ceux des autres cellules et tableaux.
Pour d&eacute;placer un tableau de Mise en forme :
1 S&eacute;lectionnez un tableau en cliquant sur l’onglet en haut du tableau.
Des poign&eacute;es de s&eacute;lection s’affichent autour du tableau.
Remarque : Vous pouvez d&eacute;placer un tableau de Mise en forme uniquement si celui-ci est
imbriqu&eacute; dans un autre tableau de Mise en forme.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Faites glisser le tableau vers un autre emplacement sur la page.
Appuyez sur les touches fl&eacute;ch&eacute;es pour d&eacute;placer le tableau par incr&eacute;ments de 1 pixel.
Conseil : Maintenez la touche Maj enfonc&eacute;e tout en appuyant sur une touche directionnelle
pour d&eacute;placer la tableau par incr&eacute;ments de 10 pixels.
Redimensionnement et d&eacute;placement de cellules et tableaux de Mise en forme
203
Formatage de cellules et de tableaux de Mise en forme
Vous pouvez changer l’aspect d’une cellule ou d’un tableau de Mise en forme dans l’inspecteur de
propri&eacute;t&eacute;s.
Formatage des cellules de Mise en forme
Dans l’inspecteur de propri&eacute;t&eacute;s, vous pouvez d&eacute;finir diff&eacute;rents attributs pour votre cellule de Mise
en forme, notamment la largeur et la hauteur, la couleur d’arri&egrave;re-plan et l’alignement du
contenu.
Pour formater une cellule de Mise en forme dans l’inspecteur de propri&eacute;t&eacute;s :
1 Pour s&eacute;lectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfonc&eacute;e, puis cliquez n’importe o&ugrave; dans la cellule.
2 Ouvrez l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), s’il n’est pas d&eacute;j&agrave; ouvert.
3 Modifiez le formatage de la cellule en d&eacute;finissant des propri&eacute;t&eacute;s.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
Formatage des tableaux de Mise en forme
Vous pouvez d&eacute;finir diff&eacute;rents attributs pour vos tableaux de Mise en forme dans l’inspecteur de
propri&eacute;t&eacute;s, notamment la largeur, la hauteur, le remplissage et l’espacement.
Pour formater un tableau de Mise en forme :
1 S&eacute;lectionnez un tableau en cliquant sur l’onglet en haut du tableau.
2 Ouvrez l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), s’il n’est pas d&eacute;j&agrave; ouvert.
3 Modifiez le formatage du tableau en d&eacute;finissant des propri&eacute;t&eacute;s.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
D&eacute;finition de la largeur des colonnes
Vous pouvez attribuer une largeur sp&eacute;cifique &agrave; une colonne ou la laisser s’&eacute;tendre
automatiquement pour remplir autant que possible la fen&ecirc;tre du navigateur. Vous pouvez
&eacute;galement attribuer une largeur minimale &agrave; une colonne &agrave; l’aide d’une image d’espacement.
Parfois, la largeur des colonnes d&eacute;finie dans le code HTML ne correspond pas &agrave; leur largeur
apparente sur l’&eacute;cran. Dans ce cas, vous pouvez uniformiser les largeurs.
Application de l’extension automatique ou d’une largeur fixe &agrave; une colonne
Une colonne dans un tableau peut &ecirc;tre de largeur fixe ou &agrave; extension automatique. Pour plus
d’informations, voir Largeur de colonne fixe et colonnes &agrave; extension automatique, page 196.
204
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
L’application de l’extension automatique &agrave; une colonne avant d’avoir termin&eacute; la mise en forme
peut avoir des effets inattendus sur la mise en forme du tableau. Pour emp&ecirc;cher les colonnes de
s’&eacute;largir ou de r&eacute;tr&eacute;cir inopin&eacute;ment, cr&eacute;ez votre mise en forme avant d’appliquer l’extension
automatique &agrave; une colonne, et utilisez des images d’espacement &agrave; ce moment. (Cependant, si
chaque colonne contient des donn&eacute;es susceptibles de maintenir la colonne &agrave; la largeur d&eacute;sir&eacute;e,
vous n’avez pas besoin d’utiliser d’images d’espacement.)
Pour appliquer l’extension automatique &agrave; une colonne :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Extension automatique de la
colonne.
■
Pour s&eacute;lectionner une cellule dans la colonne, cliquez sur l’un des bords de la cellule, puis
sur Extension automatique dans l’inspecteur de propri&eacute;t&eacute;s.
Remarque : Dans un tableau, vous ne pouvez appliquer l’extension automatique qu’&agrave; une seule
colonne.
Si vous n’avez pas d&eacute;fini d’image d’espacement pour ce site, la bo&icirc;te de dialogue Choisissez
l’image d’espacement s’affiche.
2 Si la bo&icirc;te de dialogue Choisissez l’image d’espacement s’affiche, activez une option, puis cliquez
sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Une ligne ondul&eacute;e appara&icirc;t en haut ou en bas de la colonne &agrave; extension automatique. Une double
barre appara&icirc;t en haut ou en bas des colonnes qui contiennent des images d’espacement.
Pour attribuer une largeur fixe &agrave; une colonne, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Cr&eacute;er une colonne Largeur fixe.
•
L’option Cr&eacute;er une colonne Largeur fixe attribue une largeur &agrave; la colonne (dans le code)
correspondant &agrave; sa largeur visuelle actuelle.
Pour s&eacute;lectionner une cellule dans la colonne, cliquez sur l’un des bords de la cellule, puis sur
Fixe et tapez une valeur num&eacute;rique dans l’inspecteur de propri&eacute;t&eacute;s.
Si vous entrez une valeur inf&eacute;rieure &agrave; la largeur du contenu, Dreamweaver d&eacute;finit
automatiquement une largeur correspondant &agrave; celle du contenu.
La largeur de la colonne appara&icirc;t en haut ou en bas de la colonne.
Rubriques connexes
• Uniformisation des largeurs de colonne en mode Code avec les largeurs visuelles, page 206
Utilisation des images d’espacement
Pour qu’une colonne ait une largeur minimale, vous pouvez ins&eacute;rer une image d’espacement dans
cette colonne. Pour plus d’informations, voir Images d’espacement, page 197. Vous pouvez
supprimer les images d’espacement d’une seule colonne ou du tableau tout entier.
D&eacute;finition de la largeur des colonnes
205
La premi&egrave;re fois que vous ins&eacute;rez une image d’espacement, vous devez en d&eacute;finir une pour le site.
Vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences pour les images d’espacement (voir D&eacute;finition de pr&eacute;f&eacute;rences
pour le mode Mise en forme, page 207).
Pour ins&eacute;rer une image d’espacement dans une colonne :
1 Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Ajouter image d’espacement.
Si vous n’avez pas d&eacute;fini d’image d’espacement pour ce site, la bo&icirc;te de dialogue Choisissez
l’image d’espacement s’affiche.
2 Si la bo&icirc;te de dialogue Choisissez l’image d’espacement s’affiche, activez une option, puis cliquez
sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Dreamweaver ins&egrave;re l’image d’espacement dans la colonne. L’image ne s’affiche pas &agrave; l’&eacute;cran, mais
la colonne peut se d&eacute;caler l&eacute;g&egrave;rement et une double barre s’affiche en haut ou en bas de la colonne
pour indiquer qu’elle contient une image d’espacement.
Pour supprimer une image d’espacement d’une seule colonne :
• Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Supprimer image d’espacement.
Dreamweaver supprime l’image d’espacement. La colonne peut se d&eacute;caler.
Pour supprimer toutes les images d’espacement du tableau, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Cliquez sur le menu des en-t&ecirc;tes de tableau, puis choisissez Supprimer toutes les images
•
d’espacement.
S&eacute;lectionnez le tableau, puis cliquez sur le bouton Supprimer toutes les images d’espacement
dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
La mise en forme de votre tableau tout entier peut changer. Si certaines colonnes sont vides, elles
risquent de dispara&icirc;tre compl&egrave;tement en mode Cr&eacute;ation.
Uniformisation des largeurs de colonne en mode Code avec les largeurs
visuelles
Si vous voyez deux nombres indiquant la largeur d’une colonne, cela signifie que la largeur de
colonne d&eacute;finie dans le code HTML est diff&eacute;rente de la largeur apparente &agrave; l’&eacute;cran. Vous pouvez
uniformiser la largeur sp&eacute;cifi&eacute;e dans le code et la largeur visuelle. Pour plus d’informations, voir A
propos de l’affichage de la largeur des tableaux et des cellules en mode Mise en forme, page 195.
Pour uniformiser les largeurs :
1 Cliquez dans une cellule.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
206
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
■
Cliquez sur le menu des en-t&ecirc;tes de colonne, puis choisissez Uniformiser toutes les largeurs.
S&eacute;lectionnez le tableau, puis cliquez sur le bouton Supprimer toutes les images d’espacement
dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s).
Dreamweaver red&eacute;finit la largeur sp&eacute;cifi&eacute;e dans le code sur la largeur visuelle.
■
Rubriques connexes
• Application de l’extension automatique ou d’une largeur fixe &agrave; une colonne, page 204
• Utilisation des images d’espacement, page 205
D&eacute;finition de pr&eacute;f&eacute;rences pour le mode Mise en forme
Vous pouvez sp&eacute;cifier des pr&eacute;f&eacute;rences pour les fichiers d’image d’espacement et les couleurs
utilis&eacute;es par Dreamweaver pour dessiner les tableaux et les cellules de mise en forme.
Pour d&eacute;finir les pr&eacute;f&eacute;rences du mode Mise en forme :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 Choisissez la cat&eacute;gorie Mode Mise en forme dans la liste de gauche.
3 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
D&eacute;finition de pr&eacute;f&eacute;rences pour le mode Mise en forme
207
208
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
CHAPITRE 10
Utilisation de cadres
Les cadres permettent de diviser une fen&ecirc;tre du navigateur en plusieurs zones, chacune d’entre
elles pouvant afficher un document HTML distinct. En r&egrave;gle g&eacute;n&eacute;rale, un premier cadre affiche
un document avec des commandes de navigation tandis qu’un autre cadre affiche un document
avec le contenu principal.
Remarque : Ce chapitre n’a pas pour objet de pr&eacute;senter de mani&egrave;re exhaustive toutes les m&eacute;thodes
permettant de concevoir et d’utiliser des cadres, ni le code requis pour les coder manuellement. Si
vous souhaitez obtenir des informations d&eacute;taill&eacute;es sur le code utilis&eacute; dans les mises en forme de
cadre avanc&eacute;es, reportez-vous &agrave; un manuel traitant des cadres et des jeux de cadres.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
A propos des cadres et des jeux de cadres, page 209
Utilisation des jeux de cadres dans la fen&ecirc;tre de document, page 213
Cr&eacute;ation de cadres et de jeux de cadres, page 214
S&eacute;lection de cadres et de jeux de cadres, page 216
Ouverture d’un document dans un cadre, page 218
Enregistrement des fichiers du cadre et du jeu de cadres, page 219
Affichage et d&eacute;finition des propri&eacute;t&eacute;s et attributs de cadre, page 220
Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux de cadres, page 221
D&eacute;finition des contenus de cadre avec liens, page 222
Gestion des navigateurs qui ne peuvent pas afficher les cadres, page 223
Utilisation des comportements JavaScript avec les cadres, page 223
A propos des cadres et des jeux de cadres
La partie d’une fen&ecirc;tre du navigateur pouvant afficher un document HTML ind&eacute;pendamment de
ce qui appara&icirc;t dans le reste de la fen&ecirc;tre constitue un cadre.
Un jeu de cadres est un fichier HTML qui d&eacute;finit la mise en forme et les propri&eacute;t&eacute;s de plusieurs
cadres, dont le nombre, la taille et l’emplacement des cadres, ainsi que l’URL de la page qui
s’affiche initialement dans chaque cadre. Le fichier du jeu de cadres ne contient pas de contenu
HTML qui s’affiche dans un navigateur, &agrave; l’exception de la section noframes (voir Gestion des
navigateurs qui ne peuvent pas afficher les cadres, page 223) ; il fournit simplement au navigateur
des informations sur la mise en forme d’un jeu de cadres et les documents qu’il doit afficher.
209
Rubriques connexes
• Utilisation des jeux de cadres dans la fen&ecirc;tre de document, page 213
• Cr&eacute;ation de cadres et de jeux de cadres, page 214
Description du fonctionnement des cadres et des jeux de cadres
La partie d’une fen&ecirc;tre du navigateur pouvant afficher un document HTML ind&eacute;pendamment de
ce qui appara&icirc;t dans le reste de la fen&ecirc;tre constitue un cadre. Un jeu de cadres est un fichier HTML
qui d&eacute;finit la mise en forme et les propri&eacute;t&eacute;s de plusieurs cadres.
Pour afficher un jeu de cadres dans un navigateur, tapez l’URL du fichier correspondant. Le
navigateur ouvre ensuite les documents qui devront &ecirc;tre affich&eacute;s dans les cadres. Le fichier du jeu
de cadres relatif &agrave; un site s’appelle g&eacute;n&eacute;ralement index.html et s’affiche par d&eacute;faut si le visiteur ne
sp&eacute;cifie pas de nom de fichier.
L’exemple suivant pr&eacute;sente une mise en forme de cadre contenant trois cadres : un cadre &eacute;troit qui
contient la barre de navigation dans la partie lat&eacute;rale, un cadre en haut du document contenant le
logo et le titre d’un site Web et un grand cadre avec le contenu principal qui occupe le reste de la
page. Chacun de ces cadres affiche un document HTML distinct.
Dans cet exemple, le document affich&eacute; dans le cadre sup&eacute;rieur ne change jamais lorsque les
visiteurs consultent le site. La barre de navigation du cadre lat&eacute;ral contient des liens qui, lorsqu’ils
sont activ&eacute;s, modifient le contenu du cadre principal, mais pas le contenu du cadre lat&eacute;ral. Le
cadre de contenu principal &agrave; droite affiche le document correspondant &agrave; tous les liens activ&eacute;s par
le visiteur dans la partie gauche.
Un cadre n’est pas un fichier. On pourrait croire que le document affich&eacute; dans un cadre fait partie
int&eacute;grante de ce dernier, mais ce n’est pas le cas. Le cadre contient le document. En effet, les
cadres peuvent afficher n’importe quel document.
Remarque : Le mot page peut d&eacute;signer un seul document HTML ou l’ensemble du contenu d’une
fen&ecirc;tre du navigateur &agrave; un moment donn&eacute;, m&ecirc;me si plusieurs documents HTML sont affich&eacute;s
simultan&eacute;ment. Par exemple, l’expression &laquo; une page qui utilise des cadres &raquo; s’applique
g&eacute;n&eacute;ralement &agrave; un jeu de cadres et aux documents qui y figurent.
210
Chapitre 10 : Utilisation de cadres
Tout site affich&eacute; dans un navigateur sous forme d’une page unique constitu&eacute;e de trois cadres
contient en fait au moins quatre documents HTML, &agrave; savoir le fichier du jeu de cadres et les trois
documents qui incluent le contenu et sont initialement affich&eacute;s dans les cadres. Lorsque vous
concevez une page &agrave; l’aide de jeux de cadres dans Dreamweaver, vous devez enregistrer chacun de
ces quatre fichiers pour que la page s’affiche correctement dans le navigateur.
Rubriques connexes
• Description des jeux de cadres imbriqu&eacute;s, page 212
Choix de l’utilisation des cadres
Les cadres sont le plus souvent utilis&eacute;s pour la navigation. Un jeu de cadres inclut g&eacute;n&eacute;ralement
un cadre contenant une barre de navigation et un cadre destin&eacute; &agrave; afficher le contenu principal.
Cependant, la conception d’un site &agrave; l’aide de cadres peut s’av&eacute;rer fastidieuse. Dans la plupart des
cas, il est possible de cr&eacute;er une page Web sans faire appel &agrave; un jeu de cadres. Par exemple, si vous
voulez afficher une barre de navigation &agrave; gauche de la page, vous pouvez remplacer la page par un
jeu de cadres ou simplement inclure la barre de navigation sur chacune des pages du site
(Dreamweaver vous permet de cr&eacute;er plusieurs pages dont la mise en forme est identique ; voir A
propos des mod&egrave;les Dreamweaver, page 226.) Dans l’illustration suivante, la mise en forme de la
page ressemble &agrave; une mise en forme avec cadres, mais elle n’en contient pas.
Nombreux sont les concepteurs Web professionnels ou les visiteurs de sites Web qui pr&eacute;f&egrave;rent ne
pas utiliser ni afficher de cadres. Ce rejet des cadres s’explique par une mauvaise utilisation des
cadres dans certains sites (par exemple, lorsque les jeux de cadres rechargent le contenu des cadres
de navigation chaque fois que le visiteur clique sur un bouton de navigation). S’ils sont
correctement utilis&eacute;s (par exemple, lorsqu’ils permettent d’immobiliser les commandes de
navigation dans un cadre et de modifier le contenu d’un autre cadre), les cadres peuvent &ecirc;tre tr&egrave;s
utiles dans certains sites.
La prise en charge des cadres varie en fonction du navigateur utilis&eacute;. En outre, la navigation des
cadres peut s’av&eacute;rer difficile pour les visiteurs souffrant de handicaps. Par cons&eacute;quent, si vous
utilisez des cadres, incorporez syst&eacute;matiquement une section noframes dans votre jeu de cadres
pour les visiteurs qui ne peuvent pas les visualiser (voir Gestion des navigateurs qui ne peuvent pas
afficher les cadres, page 223). Vous pouvez &eacute;galement ajouter un lien explicite vers une version sans
cadre du site pour les visiteurs qui n’aiment pas utiliser les cadres.
A propos des cadres et des jeux de cadres
211
L’utilisation des cadres pr&eacute;sente les avantages suivants :
• Le navigateur d’un visiteur n’a pas besoin de recharger les graphiques li&eacute;s &agrave; la navigation &agrave;
•
chaque page.
Chaque cadre poss&egrave;de sa propre barre de d&eacute;filement (si le contenu ne tient pas enti&egrave;rement
dans une fen&ecirc;tre) pour que le visiteur puisse faire d&eacute;filer les cadres ind&eacute;pendamment les uns des
autres.
Par exemple, un visiteur ayant fait d&eacute;filer une longue page jusqu’en bas n’est pas oblig&eacute; de la
faire d&eacute;filer &agrave; nouveau vers le haut pour afficher la barre de navigation si celle-ci figure dans un
autre cadre.
L’utilisation des cadres pr&eacute;sente les inconv&eacute;nients suivants :
• L’alignement graphique des &eacute;l&eacute;ments de diff&eacute;rents cadres n’est pas toujours pr&eacute;cis.
• Le test de la navigation peut &ecirc;tre long.
• Comme l’URL de chacune des pages contenues dans les cadres n’est pas affich&eacute;e dans le
navigateur, les visiteurs risquent de ne pas pouvoir ajouter de signet &agrave; une page donn&eacute;e (&agrave;
moins que vous ne fournissiez le code du serveur permettant de charger la version avec cadres
d’une page).
Rubriques connexes
• Description du fonctionnement des cadres et des jeux de cadres, page 210
• Gestion des navigateurs qui ne peuvent pas afficher les cadres, page 223
Description des jeux de cadres imbriqu&eacute;s
Un jeu de cadres imbriqu&eacute; est un jeu de cadres situ&eacute; &agrave; l’int&eacute;rieur d’un autre jeu de cadres. Un
fichier de jeu de cadres peut contenir plusieurs jeux de cadres imbriqu&eacute;s. La plupart des pages
Web avec des cadres utilisent en fait des cadres imbriqu&eacute;s, de m&ecirc;me que la plupart des jeux de
cadres pr&eacute;d&eacute;finis dans Dreamweaver. Tout jeu de cadres comportant un nombre diff&eacute;rent de
cadres dans diff&eacute;rentes lignes ou colonnes doit &ecirc;tre imbriqu&eacute;.
Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne sup&eacute;rieure (o&ugrave;
figure le logo de l’entreprise) et deux cadres sur la ligne inf&eacute;rieure (cadre de navigation et cadre de
contenu). Dans ce cas, un jeu de cadres doit &ecirc;tre imbriqu&eacute; : vous obtenez alors un jeu de cadres de
deux lignes et un jeu de cadres de deux colonnes imbriqu&eacute; dans la deuxi&egrave;me ligne.
Jeu de cadres principal
Le cadre de menus et
le cadre de contenu
sont imbriqu&eacute;s dans le
jeu de cadres principal.
212
Chapitre 10 : Utilisation de cadres
Dreamweaver g&egrave;re automatiquement l’imbrication des jeux de cadres. Si vous faites appel aux
outils de fractionnement de cadre dans Dreamweaver, le programme se charge de d&eacute;finir les
cadres qui doivent &ecirc;tre imbriqu&eacute;s et ceux qui doivent rester tels quels. Pour plus d’informations
sur les outils de fractionnement de cadre, voir Conception d’un jeu de cadres, page 215.
Vous pouvez imbriquer les jeux de cadres de deux fa&ccedil;ons dans HTML : le jeu de cadres interne
peut &ecirc;tre d&eacute;fini comme jeu de cadres externe dans le m&ecirc;me fichier ou dans un fichier distinct.
Chaque jeu de cadres pr&eacute;d&eacute;fini dans Dreamweaver d&eacute;finit tous ses jeux de cadres dans le m&ecirc;me
fichier.
Les deux types d’imbrication produisent des r&eacute;sultats visuels identiques. A moins d’examiner le
code, il n’est pas facile de savoir quel type d’imbrication est utilis&eacute;. En r&egrave;gle g&eacute;n&eacute;rale,
Dreamweaver utilise un fichier de jeu de cadres externe lorsque vous ex&eacute;cutez la commande
Ouvrir dans un cadre pour ouvrir un fichier de jeu de cadres &agrave; l’int&eacute;rieur d’un cadre. Dans ce cas,
vous risquez de ne pas pouvoir d&eacute;finir correctement les cibles des liens. Il est souvent plus simple
de garder tous les jeux de cadres d&eacute;finis dans un seul fichier.
Rubriques connexes
• Description du fonctionnement des cadres et des jeux de cadres, page 210
• Choix de l’utilisation des cadres, page 211
Utilisation des jeux de cadres dans la fen&ecirc;tre de document
Dreamweaver permet d’afficher et de modifier tous les documents associ&eacute;s &agrave; un jeu de cadres dans
une seule fen&ecirc;tre de document. Vous pouvez ainsi afficher un aper&ccedil;u approximatif des pages
ins&eacute;r&eacute;es dans des cadres et les modifier &agrave; votre convenance dans le navigateur. Toutefois, certains
aspects de cette approche peuvent &ecirc;tre d&eacute;routants si vous ne les ma&icirc;trisez pas parfaitement.
N’oubliez pas que chaque cadre affiche un document HTML distinct. M&ecirc;me si les documents
sont vides, vous devez les enregistrer avant de les pr&eacute;visualiser. En effet, vous ne pouvez afficher un
aper&ccedil;u pr&eacute;cis du jeu de cadres que s’il contient l’URL d’un document &agrave; afficher dans chaque
cadre.
Pour vous assurer que le jeu de cadres s’affiche correctement dans les navigateurs :
1 Cr&eacute;ez un jeu de cadres et sp&eacute;cifiez le document qui devra appara&icirc;tre dans chaque cadre (voir
Cr&eacute;ation de cadres et de jeux de cadres, page 214).
2 Enregistrez chaque fichier qui appara&icirc;tra dans un cadre (voir Enregistrement des fichiers du cadre
et du jeu de cadres, page 219).
N’oubliez pas que chaque cadre affiche un document HTML diff&eacute;rent et que vous devez
enregistrer chaque document avec le fichier de jeu de cadres.
3 D&eacute;finissez les propri&eacute;t&eacute;s de chaque cadre et du jeu de cadres (voir Affichage et d&eacute;finition des
propri&eacute;t&eacute;s et attributs de cadre, page 220 et Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux de cadres,
page 221).
notamment l’attribution d’un nom &agrave; chaque cadre, la d&eacute;finition des options de d&eacute;filement et
de non-d&eacute;filement, etc.
4 Dans l’inspecteur de propri&eacute;t&eacute;s, v&eacute;rifiez que la propri&eacute;t&eacute; Cible est d&eacute;finie pour tous les liens afin
que le contenu li&eacute; apparaisse dans la zone appropri&eacute;e (voir D&eacute;finition des contenus de cadre avec
liens, page 222).
Utilisation des jeux de cadres dans la fen&ecirc;tre de document
213
Cr&eacute;ation de cadres et de jeux de cadres
Il y a deux fa&ccedil;ons de cr&eacute;er un jeu de cadres dans Dreamweaver : vous pouvez s&eacute;lectionner un jeu
de cadres pr&eacute;d&eacute;fini ou le concevoir vous-m&ecirc;me.
Si vous choisissez un jeu de cadres pr&eacute;d&eacute;fini, tous les jeux de cadres et cadres n&eacute;cessaires &agrave; la
cr&eacute;ation de la mise en forme sont automatiquement configur&eacute;s, ce qui repr&eacute;sente le moyen le plus
simple d’ins&eacute;rer rapidement une mise en forme avec des cadres dans la page. Vous pouvez
uniquement ins&eacute;rer un jeu de cadres pr&eacute;d&eacute;fini dans la fen&ecirc;tre de document en mode Cr&eacute;ation.
Utilisation d’un jeu de cadres pr&eacute;d&eacute;fini
Les jeux de cadres pr&eacute;d&eacute;finis vous permettent de s&eacute;lectionner facilement le type de jeu de cadres
que vous voulez cr&eacute;er. Si vous pr&eacute;f&eacute;rez concevoir votre propre jeu de cadres, voir Conception d’un
jeu de cadres, page 215.
Il y a deux fa&ccedil;ons de cr&eacute;er un jeu de cadres pr&eacute;d&eacute;fini :
• La barre Ins&eacute;rer permet de cr&eacute;er un jeu de cadres et d’afficher le document courant dans un des
•
nouveaux cadres.
La bo&icirc;te de dialogue Nouveau document cr&eacute;e un jeu de cadres vide.
Pour cr&eacute;er un jeu de cadres pr&eacute;d&eacute;fini et afficher un document existant dans un cadre :
1 Placez le point d’insertion dans le document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez un cadre pr&eacute;d&eacute;fini dans le sous-menu Insertion &gt; HTML &gt; Cadres.
■ Dans la cat&eacute;gorie Mise en forme de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Cadres,
puis choisissez un jeu de cadres pr&eacute;d&eacute;fini.
Les ic&ocirc;nes de jeu de cadres fournissent une repr&eacute;sentation visuelle de chaque jeu de cadres
appliqu&eacute; au document en cours. La zone bleue de l’ic&ocirc;ne du jeu de cadres repr&eacute;sente le
document courant et la zone blanche les cadres qui afficheront d’autres documents.
■
Remarque : Lorsque vous appliquez un jeu de cadres, Dreamweaver d&eacute;finit automatiquement le
jeu de cadres de sorte qu’il affiche le document courant (celui dans lequel se trouve le point
d’insertion) dans un des cadres.
214
Chapitre 10 : Utilisation de cadres
La bo&icirc;te de dialogue Attributs d’accessibilit&eacute; des balises de cadre s’affiche si vous avez configur&eacute;
Dreamweaver de telle sorte qu’un message vous invite &agrave; saisir des attributs d’accessibilit&eacute; de
cadre (voir Optimisation de l’espace de travail pour la conception de pages accessibles, page 56).
3 Si la bo&icirc;te de dialogue Attributs d’accessibilit&eacute; des balises de cadre s’affiche, renseignez la bo&icirc;te
de dialogue pour chaque cadre, puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Remarque : Si vous cliquez sur Annuler, le jeu de cadres s’affiche dans le document, mais
Dreamweaver ne lui associe ni les balises ni les attributs d’accessibilit&eacute;.
Pour modifier les attributs d’accessibilit&eacute; des balises de cadre, voir Affichage et d&eacute;finition des
propri&eacute;t&eacute;s et attributs de cadre, page 220.
Pour cr&eacute;er un jeu de cadres pr&eacute;d&eacute;fini vide :
1 S&eacute;lectionnez Fichier &gt; Nouveau.
2 Dans la bo&icirc;te de dialogue Nouveau document, s&eacute;lectionnez la cat&eacute;gorie Jeux de cadres.
3 S&eacute;lectionnez un jeu de cadres dans la liste Jeux de cadres.
4 Cliquez sur Cr&eacute;er.
Le jeu de cadres appara&icirc;t dans votre document et la bo&icirc;te de dialogue Attributs d’accessibilit&eacute;
des balises de cadre s’affiche si vous avez activ&eacute; la bo&icirc;te de dialogue dans Pr&eacute;f&eacute;rences (voir
Optimisation de l’espace de travail pour la conception de pages accessibles, page 56).
5 Si la bo&icirc;te de dialogue Attributs d’accessibilit&eacute; des balises de cadre s’affiche, renseignez la bo&icirc;te
de dialogue pour chaque cadre, puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Remarque : Si vous cliquez sur Annuler, le jeu de cadres s’affiche dans le document, mais
Dreamweaver ne lui associe ni les balises ni les attributs d’accessibilit&eacute;.
Pour modifier les attributs d’accessibilit&eacute; des balises de cadre, voir Affichage et d&eacute;finition des
propri&eacute;t&eacute;s et attributs de cadre, page 220.
Conception d’un jeu de cadres
Vous pouvez concevoir votre propre jeu de cadres dans Dreamweaver en ajoutant des
&laquo; s&eacute;parateurs &raquo; &agrave; la fen&ecirc;tre. Si vous pr&eacute;f&eacute;rez utiliser un jeu de cadres pr&eacute;d&eacute;fini, voir Utilisation d’un
jeu de cadres pr&eacute;d&eacute;fini, page 214.
Conseil : Avant de cr&eacute;er un jeu de cadres ou d’utiliser des cadres, affichez les bordures de cadres en
mode Cr&eacute;ation dans la fen&ecirc;tre de document en choisissant Affichage &gt; Assistances visuelles &gt;
Bordures de cadre.
Pour cr&eacute;er un jeu de cadres :
• Dans le sous-menu Modifier &gt; Jeu de cadres, choisissez une option de fractionnement (par
exemple, Fractionner le cadre &agrave; gauche ou Fractionner le cadre &agrave; droite).
Dreamweaver fractionne la fen&ecirc;tre en cadres. Si vous aviez un document existant ouvert, il
appara&icirc;t dans l’un des cadres.
Pour fractionner un cadre en cadres plus petits, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour fractionner le cadre au niveau du point d’insertion, choisissez une option de
fractionnement dans le sous-menu Modifier &gt; Jeu de cadres.
Cr&eacute;ation de cadres et de jeux de cadres
215
• Pour fractionner un cadre ou un jeu de cadres verticalement ou horizontalement, faites glisser
•
•
une bordure de cadre du bord vers le centre de la fen&ecirc;tre en mode Cr&eacute;ation.
Pour fractionner un cadre &agrave; l’aide d’une bordure de cadre qui ne se trouve pas sur le bord de la
fen&ecirc;tre en mode Cr&eacute;ation, faites glisser une bordure de cadre tout en maintenant la touche Alt
(Windows) ou Option (Macintosh) enfonc&eacute;e.
Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l’un des coins de la
fen&ecirc;tre en mode Cr&eacute;ation vers le centre d’un cadre.
Conseil : Pour cr&eacute;er trois cadres, cr&eacute;ez-en d’abord deux, puis fractionnez l’un d’eux. L’op&eacute;ration
de fusion de deux cadres adjacents sans modifier le code du jeu de cadres &eacute;tant relativement
ardue, il est plus difficile de convertir quatre cadres en trois cadres que deux cadres en trois cadres.
Pour supprimer un cadre :
• Faites glisser une bordure de cadre en dehors de la page ou vers une bordure du cadre parent.
Si vous supprimez un cadre dans lequel se trouve un document qui n’a pas &eacute;t&eacute; enregistr&eacute;,
Dreamweaver vous invite &agrave; enregistrer ce dernier.
Remarque : Vous ne pouvez pas enti&egrave;rement supprimer un jeu de cadres en faisant glisser ses
bordures. Pour le supprimer compl&egrave;tement, fermez la fen&ecirc;tre de document qui l’affiche. Si le
fichier du jeu de cadres a &eacute;t&eacute; enregistr&eacute;, supprimez le fichier.
Pour redimensionner un cadre, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour d&eacute;finir la taille approximative des cadres, faites glisser une bordure de cadre dans la fen&ecirc;tre
•
de document en mode Cr&eacute;ation.
Pour d&eacute;finir des tailles exactes et sp&eacute;cifier l’espace allou&eacute; par le navigateur &agrave; une ligne ou une
colonne de cadres lorsque la taille de la fen&ecirc;tre du navigateur ne permet pas d’afficher les cadres
dans leur totalit&eacute;, utilisez l’inspecteur de propri&eacute;t&eacute;s (voir Affichage et d&eacute;finition des propri&eacute;t&eacute;s des
jeux de cadres, page 221).
S&eacute;lection de cadres et de jeux de cadres
Pour modifier les propri&eacute;t&eacute;s d’un cadre ou d’un jeu de cadres, vous devez au pr&eacute;alable le
s&eacute;lectionner, dans la fen&ecirc;tre de document ou en utilisant le panneau Cadres.
216
Chapitre 10 : Utilisation de cadres
S&eacute;lection de cadres et de jeux de cadres dans le panneau Cadres
Le panneau Cadres donne une repr&eacute;sentation visuelle des cadres dans un jeu de cadres. Il affiche
la hi&eacute;rarchie de la structure du jeu de cadres qui n’appara&icirc;t pas forc&eacute;ment dans la fen&ecirc;tre de
document. Dans le panneau Cadres, une &eacute;paisse bordure entoure le jeu de cadres, une fine ligne
grise entoure chaque cadre et chaque cadre est identifi&eacute; par un nom.
Pour afficher le panneau Cadres :
• Choisissez Fen&ecirc;tre &gt; Cadres.
Pour s&eacute;lectionner un cadre dans le panneau Cadres :
• Cliquez sur le cadre dans le panneau Cadres.
Des lignes de s&eacute;lection apparaissent autour du cadre dans le panneau Cadres et dans la fen&ecirc;tre
de document, en mode Cr&eacute;ation.
Pour s&eacute;lectionner un jeu de cadres dans le panneau Cadres :
• Cliquez sur la bordure du jeu de cadres dans le panneau Cadres.
Des lignes de s&eacute;lection apparaissent autour du jeu de cadres dans le panneau Cadres et dans la
fen&ecirc;tre de document, en mode Cr&eacute;ation.
Rubriques connexes
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s et attributs de cadre, page 220
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux de cadres, page 221
S&eacute;lection de cadres et de jeux de cadres dans la fen&ecirc;tre de document
Lorsqu’un cadre est s&eacute;lectionn&eacute; dans la fen&ecirc;tre de document, en mode Cr&eacute;ation, sa bordure
s’affiche avec une ligne en pointill&eacute; ; lorsqu’un jeu de cadres est s&eacute;lectionn&eacute;, toutes les bordures
des cadres &agrave; l’int&eacute;rieur de ce jeu s’affichent avec une ligne en pointill&eacute; plus fine.
Remarque : La s&eacute;lection d’un cadre et le placement d’un point d’insertion dans un document affich&eacute;
dans un cadre sont deux op&eacute;rations diff&eacute;rentes. Vous serez amen&eacute; &agrave; s&eacute;lectionner un cadre dans de
nombreux cas (par exemple, lorsque vous d&eacute;finissez les propri&eacute;t&eacute;s d’un cadre).
S&eacute;lection de cadres et de jeux de cadres
217
Pour s&eacute;lectionner un cadre dans la fen&ecirc;tre de document :
• En mode Cr&eacute;ation, cliquez dans le cadre tout en maintenant les touches Alt (Windows) ou
Option+Maj (Macintosh) enfonc&eacute;es.
Des lignes de s&eacute;lection apparaissent autour du cadre.
Pour s&eacute;lectionner un jeu de cadres dans la fen&ecirc;tre de document :
• En mode Cr&eacute;ation, cliquez sur l’une des bordures du cadre interne du jeu. Vous devez d’abord
vous assurer que les bordures sont visibles ; pour cela, choisissez Affichage &gt; Assistances
visuelles &gt; Bordures de cadre.
Des lignes de s&eacute;lection apparaissent autour du jeu de cadres.
Remarque : Il est souvent plus simple de s&eacute;lectionner les jeux de cadres dans le panneau Cadres
que dans la fen&ecirc;tre de document. Pour plus d’informations, voir S&eacute;lection de cadres et de jeux de
cadres dans le panneau Cadres, page 217.
Pour s&eacute;lectionner un cadre ou un jeu de cadres diff&eacute;rent, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Pour s&eacute;lectionner le cadre ou le jeu de cadres suivant ou pr&eacute;c&eacute;dent au m&ecirc;me niveau
•
•
hi&eacute;rarchique que la s&eacute;lection en cours, appuyez sur la fl&egrave;che gauche ou droite tout en
maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonc&eacute;e. Ces touches vous
permettent de parcourir les cadres et jeux de cadres dans l’ordre dans lequel ils sont d&eacute;finis dans
le fichier du jeu de cadres.
Pour s&eacute;lectionner le jeu de cadres parent (celui qui contient la s&eacute;lection en cours), appuyez sur
la fl&egrave;che haut tout en maintenant la touche Alt (Windows) ou Commande (Macintosh)
enfonc&eacute;e.
Pour s&eacute;lectionner le premier cadre ou jeu de cadres enfant de la s&eacute;lection courante (en
respectant l’ordre dans lequel ils sont d&eacute;finis dans le fichier du jeu de cadres), appuyez sur la
fl&egrave;che bas tout en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfonc&eacute;e.
Rubriques connexes
• S&eacute;lection de cadres et de jeux de cadres dans le panneau Cadres, page 217
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s et attributs de cadre, page 220
• Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux de cadres, page 221
Ouverture d’un document dans un cadre
Vous pouvez sp&eacute;cifier le contenu initial d’un cadre en ins&eacute;rant un nouveau contenu dans un
document vide ou en ouvrant un document dans un cadre.
Pour ouvrir un document dans un cadre :
1 Placez le point d’insertion dans un cadre.
2 Choisissez Fichier &gt; Ouvrir dans un cadre.
3 S&eacute;lectionnez un document &agrave; ouvrir dans le cadre, puis cliquez sur OK (Windows) ou Choisir
(Macintosh).
Le document appara&icirc;t dans le cadre.
4 (Facultatif) Si vous voulez afficher ce document par d&eacute;faut dans le cadre lorsque le jeu de cadres
est ouvert dans un navigateur, enregistrez le jeu de cadres.
218
Chapitre 10 : Utilisation de cadres
Enregistrement des fichiers du cadre et du jeu de cadres
Avant d’afficher l’aper&ccedil;u d’un jeu de cadres dans un navigateur, vous devez enregistrer le fichier
correspondant et tous les documents qui seront affich&eacute;s dans les cadres. Vous pouvez enregistrer le
fichier du jeu de cadres et chacun des documents contenus dans les cadres individuellement ou
enregistrer le fichier du jeu de cadres et tous les fichiers contenus dans les cadres simultan&eacute;ment.
Remarque : Si vous faites appel aux outils visuels de Dreamweaver pour cr&eacute;er un jeu de cadres, un
nom de fichier par d&eacute;faut est attribu&eacute; &agrave; chaque nouveau document apparaissant dans un cadre. Par
exemple, le premier fichier du jeu de cadres s’appelle Jeu de cadres sans nom-1, tandis que le premier
document d’un cadre s’intitule Cadre sans nom-1.
Pour enregistrer un fichier de jeu de cadres :
1 S&eacute;lectionnez le jeu de cadres dans le panneau Cadres ou dans la fen&ecirc;tre de document (voir
S&eacute;lection de cadres et de jeux de cadres, page 216).
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Pour enregistrer le fichier de jeu de cadres, choisissez Fichier &gt; Enregistrer le jeu de cadres.
Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier &gt;
Enregistrer le jeu de cadres sous.
Si le fichier du jeu de cadres n’a pas &eacute;t&eacute; enregistr&eacute;, ces deux commandes sont &eacute;quivalentes.
■
■
Pour enregistrer le document qui appara&icirc;t &agrave; l’int&eacute;rieur d’un cadre :
• Cliquez dans le cadre, puis choisissez Fichier &gt; Enregistrer le cadre ou Fichier &gt; Enregistrer le
cadre sous.
Pour enregistrer tous les fichiers associ&eacute;s &agrave; un jeu de cadres :
• Choisissez Fichier &gt; Enregistrer tous les cadres.
Cette commande enregistre tous les documents ouverts dans le jeu de cadres, y compris le
fichier du jeu de cadres et tous les documents encadr&eacute;s. Si le fichier du jeu de cadres n’a pas &eacute;t&eacute;
enregistr&eacute;, une &eacute;paisse bordure entoure le jeu de cadres en mode Cr&eacute;ation. Dans la bo&icirc;te de
dialogue qui s’affiche, choisissez un nom de fichier. Chaque cadre non enregistr&eacute; est entour&eacute;
d’une &eacute;paisse bordure. Dans la bo&icirc;te de dialogue qui s’affiche, choisissez un nom de fichier.
Enregistrement des fichiers du cadre et du jeu de cadres
219
Remarque : Si vous avez utilis&eacute; la commande Fichier &gt; Ouvrir dans un cadre pour ouvrir un
document dans un cadre, lorsque vous enregistrez le jeu de cadres, le document ouvert devient le
document par d&eacute;faut qui sera affich&eacute; dans ce cadre. N’enregistrez pas le fichier du jeu de cadres si
vous ne voulez pas que ce document soit utilis&eacute; par d&eacute;faut.
Affichage et d&eacute;finition des propri&eacute;t&eacute;s et attributs de cadre
Utilisez l’inspecteur de propri&eacute;t&eacute;s pour afficher et d&eacute;finir la plupart des propri&eacute;t&eacute;s de cadre.
Si vous le souhaitez, d&eacute;finissez des attributs de cadre, comme l’attribut title (qui est diff&eacute;rent de
l’attribut name), pour am&eacute;liorer l’accessibilit&eacute;. Vous pouvez activer l’option de programmation de
l’accessibilit&eacute; pour les cadres afin de d&eacute;finir des attributs lorsque vous cr&eacute;ez des cadres (voir
Optimisation de l’espace de travail pour la conception de pages accessibles, page 56) ou bien d&eacute;finir
des attributs apr&egrave;s avoir ins&eacute;r&eacute; un cadre. Vous pouvez modifier les attributs d’un cadre en
modifiant directement le code HTML &agrave; l’aide de l’inspecteur de balises.
Pour d&eacute;finir des propri&eacute;t&eacute;s pour un jeu de cadres, voir Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux
de cadres, page 221.
Pour afficher ou d&eacute;finir les propri&eacute;t&eacute;s des cadres :
1 S&eacute;lectionnez un cadre en utilisant l’une des m&eacute;thodes suivantes :
Dans la fen&ecirc;tre de document (mode Cr&eacute;ation), cliquez dans le cadre tout en maintenant les
touches Alt (Windows) ou Maj+Option (Macintosh) enfonc&eacute;es.
■ Cliquez sur le cadre dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres).
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d’agrandissement
situ&eacute;e dans le coin inf&eacute;rieur droit pour visualiser toutes les propri&eacute;t&eacute;s des cadres.
■
3 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
Conseil : Pour modifier la couleur d’arri&egrave;re-plan d’un cadre, vous devez d&eacute;finir la couleur d’arri&egrave;replan du document dans le cadre dans les propri&eacute;t&eacute;s de la page.
Pour d&eacute;finir les valeurs d’accessibilit&eacute; d’un cadre :
1 Dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres), s&eacute;lectionnez un cadre en pla&ccedil;ant le point
d’insertion dans l’un des cadres.
2 Choisissez Modifier &gt; Modifier la balise.
L’&eacute;diteur de balises s’affiche.
3 S&eacute;lectionnez Feuille de style/Accessibilit&eacute; dans la liste de cat&eacute;gories situ&eacute;e &agrave; gauche.
4 Sp&eacute;cifiez les valeurs de votre choix.
5 Cliquez sur OK.
Pour modifier les valeurs d’accessibilit&eacute; d’un cadre :
1 Affichez votre document en mode Code ou Code et cr&eacute;ation si vous &ecirc;tes en mode Cr&eacute;ation.
220
Chapitre 10 : Utilisation de cadres
2 Dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres), s&eacute;lectionnez un cadre en pla&ccedil;ant le point
d’insertion dans l’un des cadres.
Dreamweaver met en surbrillance la balise du cadre dans le code.
3 Cliquez dans le code du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh), puis choisissez Modifier la balise.
L’&eacute;diteur de balises s’affiche.
4 Apportez les modifications de votre choix.
5 Cliquez sur OK.
Pour modifier la couleur d’arri&egrave;re-plan d’un document dans un cadre :
1 Placez le point d’insertion dans le cadre.
2 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page.
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page s’affiche.
3 Cliquez sur le menu contextuel Couleur d’arri&egrave;re-plan, puis s&eacute;lectionnez une couleur.
4 Cliquez sur OK.
Rubriques connexes
• Cr&eacute;ation de cadres et de jeux de cadres, page 214
Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux de cadres
Utilisez l’inspecteur de propri&eacute;t&eacute;s pour afficher et d&eacute;finir la plupart des propri&eacute;t&eacute;s de jeux de
cadres. Pour d&eacute;finir des propri&eacute;t&eacute;s pour un cadre, voir Affichage et d&eacute;finition des propri&eacute;t&eacute;s et
attributs de cadre, page 220.
Pour afficher ou d&eacute;finir les propri&eacute;t&eacute;s des jeux de cadres :
1 S&eacute;lectionnez un jeu de cadres en utilisant l’une des m&eacute;thodes suivantes :
Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fen&ecirc;tre de document en
mode Cr&eacute;ation.
■ Cliquez sur la bordure d’un jeu de cadres dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres).
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur la fl&egrave;che d’agrandissement
situ&eacute;e dans le coin inf&eacute;rieur droit pour visualiser toutes les propri&eacute;t&eacute;s des jeux de cadres.
■
3 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
Pour d&eacute;finir le titre du document d’un jeu de cadres :
1 S&eacute;lectionnez un jeu de cadres en utilisant l’une des m&eacute;thodes suivantes :
■
Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fen&ecirc;tre de document en
mode Cr&eacute;ation.
Affichage et d&eacute;finition des propri&eacute;t&eacute;s des jeux de cadres
221
Cliquez sur la bordure d’un jeu de cadres dans le panneau Cadres (Fen&ecirc;tre &gt; Cadres).
2 Dans le champ Titre de la barre d’outils du document, tapez le nom du document de jeu de
cadres.
■
Lorsqu’un visiteur affiche le jeu de cadres dans un navigateur, le titre appara&icirc;t dans la barre de
titre.
Rubriques connexes
• Cr&eacute;ation de cadres et de jeux de cadres, page 214
D&eacute;finition des contenus de cadre avec liens
Pour utiliser un lien dans un cadre en vue d’ouvrir un document dans un autre cadre, vous devez
d&eacute;finir la cible du lien. L’attribut target d’un lien sp&eacute;cifie le cadre ou la fen&ecirc;tre dans lequel ou
laquelle le contenu associ&eacute; au lien s’ouvre.
Par exemple, si la barre de navigation se trouve dans le cadre gauche et que vous voulez afficher le
document li&eacute; dans le cadre de contenu principal &agrave; droite, vous devez d&eacute;finir le nom de ce dernier
comme la cible de chacun des liens de la barre de navigation. Lorsqu’un visiteur clique sur un lien
de navigation, le contenu sp&eacute;cifi&eacute; s’ouvre dans le cadre principal.
Pour cibler un cadre :
1 En mode Cr&eacute;ation, choisissez un texte ou un objet.
2 Dans le champ Lien de l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), proc&eacute;dez de l’une des
mani&egrave;res suivantes :
■ Cliquez sur l’ic&ocirc;ne de dossier, puis s&eacute;lectionnez le fichier avec lequel &eacute;tablir le lien.
■ Faites glisser l’ic&ocirc;ne Pointer vers un fichier dans le panneau Fichiers pour s&eacute;lectionner le
fichier avec lequel &eacute;tablir le lien.
3 Dans le menu d&eacute;roulant Cible de l’inspecteur de propri&eacute;t&eacute;s, s&eacute;lectionnez la fen&ecirc;tre ou le cadre
dans lequel doit s’afficher le document li&eacute; :
■ _blank ouvre le document li&eacute; dans une nouvelle fen&ecirc;tre du navigateur sans toucher &agrave; la
fen&ecirc;tre courante.
■ _parent ouvre le document li&eacute; dans le jeu de cadres parent du cadre dans lequel figure le
lien, en rempla&ccedil;ant tout le jeu de cadres.
■ _self ouvre le lien dans le cadre en cours, en rempla&ccedil;ant le contenu de ce cadre.
■ _top ouvre le document li&eacute; dans la fen&ecirc;tre du navigateur courant, en rempla&ccedil;ant tous les
cadres.
Les noms des cadres apparaissent &eacute;galement dans ce menu. S&eacute;lectionnez un cadre nomm&eacute; dans
lequel s’ouvrira le document li&eacute;.
Remarque : Les noms des cadres s’affichent uniquement lorsque vous modifiez un document
dans un jeu de cadres. Si vous modifiez un document dans sa propre fen&ecirc;tre, les noms des cadres
n’apparaissent pas dans le menu d&eacute;roulant Cible. Si vous modifiez un document en dehors du jeu
de cadres, vous pouvez taper le nom du cadre cible dans la zone de texte Cible.
Conseil : Si vous &eacute;tablissez un lien avec une page qui ne se trouve pas sur votre site, utilisez
target=&quot;_top&quot; ou target=&quot;_blank&quot; pour vous assurer que la page ne soit pas consid&eacute;r&eacute;e
comme faisant partie de votre site.
222
Chapitre 10 : Utilisation de cadres
Gestion des navigateurs qui ne peuvent pas afficher les cadres
Dreamweaver vous permet de d&eacute;finir le contenu &agrave; afficher dans les navigateurs graphiques plus
anciens et bas&eacute;s sur le texte qui ne prennent pas en charge les cadres. Ce contenu, encadr&eacute; de
balises noframes, est stock&eacute; dans le fichier du jeu de cadres. Lorsqu’un navigateur qui ne g&egrave;re pas
les cadres charge un fichier de jeu de cadres, il affiche uniquement le contenu des balises
noframes.
Remarque : La zone noframes doit contenir un texte plus d&eacute;taill&eacute; que &laquo; Vous devez mettre votre
navigateur &agrave; jour pour pouvoir utiliser des cadres &raquo;. En effet, certaines personnes choisissent
d&eacute;lib&eacute;r&eacute;ment un syst&egrave;me qui ne leur permet pas d’afficher de cadres. Essayez de d&eacute;finir un contenu
accessible &agrave; ces visiteurs.
Pour d&eacute;finir un contenu pour les navigateurs qui ne prennent pas en charge les cadres :
1 Choisissez Modifier &gt; Jeu de cadres &gt; Modifier le contenu sans cadres.
Dreamweaver efface ce qui se trouve dans la fen&ecirc;tre en mode Cr&eacute;ation et les mots &laquo; Contenu
sans cadres &raquo; apparaissent dans la zone sup&eacute;rieure.
2 Pour cr&eacute;er le Contenu sans cadres, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la fen&ecirc;tre de document, tapez ou ins&eacute;rez le contenu, comme vous le feriez pour un
document ordinaire.
■ Choisissez Fen&ecirc;tre &gt; Inspecteur de code, placez le point d’insertion entre les balises body qui
se trouvent &agrave; l’int&eacute;rieur des balises noframes, puis tapez le code HTML du contenu.
3 Choisissez de nouveau Modifier &gt; Jeu de cadres &gt; Modifier le contenu sans cadres pour revenir
au mode normal du document jeu de cadres.
Utilisation des comportements JavaScript avec les cadres
Plusieurs comportements JavaScript et commandes de navigation sont particuli&egrave;rement bien
adapt&eacute;s &agrave; l’utilisation de cadres :
Texte du cadre remplace le contenu et le formatage d’un cadre par le contenu que vous sp&eacute;cifiez.
Ce contenu peut &ecirc;tre n’importe quel texte valide en HTML Cette action permet d’afficher les
informations dans un cadre de fa&ccedil;on dynamique (voir Texte du cadre, page 401).
Atteindre l’URL ouvre une nouvelle page dans la fen&ecirc;tre en cours ou dans le cadre indiqu&eacute;. Cette
action est particuli&egrave;rement utile pour modifier d’un seul clic le contenu de deux cadres ou plus
(voir Atteindre l’URL, page 396).
L’option Ins&eacute;rer une barre de navigation ajoute une barre de navigation &agrave; une page. Ceci &eacute;tant
fait, vous pouvez ajouter des comportements &agrave; ses images et d&eacute;finir l’image qui s’affiche en
fonction des actions des visiteurs. Vous pouvez, par exemple, afficher une image de bouton &agrave; l’&eacute;tat
actif ou inactif afin que l’utilisateur sache sur quelle page du site il se trouve (voir Insertion d’une
barre de navigation, page 346).
Ins&eacute;rer menu de reroutage permet de configurer une liste de liens, dans un menu, qui ouvrent
des fichiers dans une fen&ecirc;tre du navigateur lorsque l’on clique dessus. Vous pouvez &eacute;galement
cibler une fen&ecirc;tre ou un cadre particuliers dans lesquels le document s’ouvrira (voir Insertion de
menus de reroutage, page 344).
Utilisation des comportements JavaScript avec les cadres
223
224
Chapitre 10 : Utilisation de cadres
CHAPITRE 11
Gestion des mod&egrave;les
Un mod&egrave;le Macromedia Dreamweaver MX 2004 est un type sp&eacute;cial de document qui sert &agrave;
concevoir une mise en page &laquo; fixe &raquo;. Il est alors possible de cr&eacute;er des documents bas&eacute;s sur le
mod&egrave;le, qui en h&eacute;ritent la mise en page. Lors de la conception d’un mod&egrave;le, vous sp&eacute;cifiez les
zones des documents bas&eacute;s sur ce mod&egrave;le que les utilisateurs pourront modifier.
Remarque : Les mod&egrave;les permettent de d&eacute;finir la conception d’une grande zone et de r&eacute;utiliser des
mises en page compl&egrave;tes. Si vous souhaitez r&eacute;utiliser des &eacute;l&eacute;ments de conception individuels, tels
que les informations sur le copyright d’un site ou un logo, vous pouvez cr&eacute;er des &eacute;l&eacute;ments de
biblioth&egrave;que. Pour plus d’informations, voir Chapitre 5, Gestion des actifs de site et des biblioth&egrave;ques,
page 125.
Ce chapitre comprend les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
•
•
A propos des mod&egrave;les Dreamweaver, page 226
Cr&eacute;ation d’un mod&egrave;le Dreamweaver, page 238
Cr&eacute;ation de mod&egrave;les pour un site Contribute, page 241
Cr&eacute;ation de r&eacute;gions modifiables, page 243
Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es, page 245
Utilisation des r&eacute;gions facultatives, page 248
D&eacute;finition d’attributs de balise modifiables, page 250
Cr&eacute;ation d’un mod&egrave;le imbriqu&eacute;, page 251
Modification et mise &agrave; jour des mod&egrave;les, page 252
Gestion des mod&egrave;les, page 255
Exportation et importation du contenu XML d’un mod&egrave;le, page 256
Exportation d’un site sans marqueur de mod&egrave;le, page 257
Application ou suppression d’un mod&egrave;le depuis un document existant, page 257
Modification du contenu d’un document bas&eacute; sur un mod&egrave;le, page 259
225
A propos des mod&egrave;les Dreamweaver
Le cr&eacute;ateur d’un mod&egrave;le y con&ccedil;oit une mise en page &laquo; fixe &raquo;. Il cr&eacute;e ensuite des r&eacute;gions dans le
mod&egrave;le, qui seront modifiables dans les documents bas&eacute;s sur ce mod&egrave;le. Si le cr&eacute;ateur d&eacute;finit une
r&eacute;gion comme n’&eacute;tant pas modifiable, les utilisateurs du mod&egrave;le ne pourront pas modifier le
contenu de cette zone. Les cr&eacute;ateurs de mod&egrave;les peuvent contr&ocirc;ler les &eacute;l&eacute;ments de la page que les
utilisateurs des mod&egrave;les (r&eacute;dacteurs, infographistes ou autres d&eacute;veloppeurs) pourront modifier. Le
cr&eacute;ateur peut inclure plusieurs types de r&eacute;gions de mod&egrave;le dans un document.
L’un des principaux avantages du mod&egrave;le est qu’il donne la possibilit&eacute; de modifier plusieurs pages
simultan&eacute;ment. Tout document cr&eacute;&eacute; &agrave; partir d’un mod&egrave;le reste associ&eacute; &agrave; ce mod&egrave;le (sauf si vous
d&eacute;cidez de d&eacute;tacher le document ult&eacute;rieurement). Lorsque vous modifiez un mod&egrave;le, la
conception de tous les documents cr&eacute;&eacute;s &agrave; partir de ce mod&egrave;le est imm&eacute;diatement mise &agrave; jour.
Rubriques connexes
• Cr&eacute;ation d’un mod&egrave;le Dreamweaver, page 238
Types de r&eacute;gions de mod&egrave;le
Dreamweaver verrouille automatiquement la plupart des r&eacute;gions d’un document lorsque vous
enregistrez celui-ci comme mod&egrave;le. Vous devez ins&eacute;rer des r&eacute;gions ou param&egrave;tres modifiables dans
un mod&egrave;le pour d&eacute;finir les r&eacute;gions qui pourront &ecirc;tre modifi&eacute;es dans les documents bas&eacute;s sur ce
mod&egrave;le.
Lors de la cr&eacute;ation du mod&egrave;le, vous pouvez apporter des modifications aux r&eacute;gions modifiables et
aux r&eacute;gions verrouill&eacute;es. En revanche, dans le cas d’un document cr&eacute;&eacute; &agrave; partir d’un mod&egrave;le, seules
les r&eacute;gions modifiables peuvent subir des modifications ; les r&eacute;gions verrouill&eacute;es ne peuvent pas
&ecirc;tre modifi&eacute;es.
Il existe quatre types de r&eacute;gions de mod&egrave;le :
Une r&eacute;gion modifiable est une r&eacute;gion non verrouill&eacute;e dans un document bas&eacute; sur un mod&egrave;le. Ce
type de section peut &ecirc;tre modifi&eacute;. Le cr&eacute;ateur du mod&egrave;le peut d&eacute;finir toute r&eacute;gion du mod&egrave;le
comme modifiable. Pour &ecirc;tre fonctionnel, un mod&egrave;le doit contenir au moins une r&eacute;gion
modifiable. S’il n’en contient pas, les pages cr&eacute;&eacute;es &agrave; partir du mod&egrave;le ne pourront pas &ecirc;tre
modifi&eacute;es. Pour plus d’informations sur l’insertion d’une r&eacute;gion modifiable, voir Insertion d’une
r&eacute;gion modifiable, page 243.
Une r&eacute;gion r&eacute;p&eacute;t&eacute;e est une section de la mise en page d’un document qu’il est possible de
reproduire. Par exemple, vous pouvez d&eacute;finir une ligne de tableau &agrave; reproduire. En g&eacute;n&eacute;ral, les
sections r&eacute;p&eacute;t&eacute;es sont modifiables afin que l’utilisateur du mod&egrave;le puisse modifier le contenu de
l’&eacute;l&eacute;ment r&eacute;p&eacute;t&eacute;, tandis que le cr&eacute;ateur du mod&egrave;le contr&ocirc;le la conception elle-m&ecirc;me. Selon ses
besoins, l’utilisateur du mod&egrave;le choisit des options de contr&ocirc;le de r&eacute;gion r&eacute;p&eacute;t&eacute;e pour ajouter ou
supprimer des copies de la r&eacute;gion r&eacute;p&eacute;t&eacute;e dans un document bas&eacute; sur le mod&egrave;le.
Deux types de r&eacute;gions r&eacute;p&eacute;t&eacute;es peuvent &ecirc;tre ins&eacute;r&eacute;es dans un mod&egrave;le : r&eacute;gion r&eacute;p&eacute;t&eacute;e et tableau
r&eacute;p&eacute;t&eacute;. Pour plus d’informations sur l’insertion de r&eacute;gions r&eacute;p&eacute;t&eacute;es dans un mod&egrave;le, voir Cr&eacute;ation
d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e dans un mod&egrave;le, page 245. Pour plus d’informations sur la cr&eacute;ation de tableaux
r&eacute;p&eacute;t&eacute;es, voir Insertion d’un tableau r&eacute;p&eacute;t&eacute;, page 246. Pour plus d’informations sur l’utilisation
d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e dans une page bas&eacute;e sur un mod&egrave;le, voir Ajout et suppression d’entr&eacute;es et
modification de l’ordre des entr&eacute;es dans une r&eacute;gion r&eacute;p&eacute;t&eacute;e, page 260.
226
Chapitre 11 : Gestion des mod&egrave;les
Une r&eacute;gion facultative est
une section d’un mod&egrave;le que vous avez d&eacute;finie comme facultative,
c’est-&agrave;-dire une section contenant des &eacute;l&eacute;ments facultatifs tels que du texte ou des images, qui
appara&icirc;tront ou non dans les documents cr&eacute;&eacute;s &agrave; partir du mod&egrave;le. Sur la page bas&eacute;e sur le mod&egrave;le,
l’utilisateur du mod&egrave;le d&eacute;cide g&eacute;n&eacute;ralement si le contenu doit &ecirc;tre affich&eacute; ou non. Pour plus
d’informations sur la d&eacute;finition de r&eacute;gions facultatives dans un mod&egrave;le, voir Insertion d’une r&eacute;gion
facultative, page 248. Pour plus d’informations sur la modification de r&eacute;gions facultatives dans
une page bas&eacute;e sur un mod&egrave;le, voir Modification des propri&eacute;t&eacute;s du mod&egrave;le, page 259.
sont des attributs de balise d’un mod&egrave;le qui sont
d&eacute;verrouill&eacute;s afin que les utilisateurs puissent les modifier dans les pages cr&eacute;&eacute;es &agrave; partir de ce
mod&egrave;le. Par exemple, vous pouvez &laquo; verrouiller &raquo; les images contenues dans le document tout en
permettant &agrave; l’utilisateur du mod&egrave;le d’en d&eacute;finir l’alignement &agrave; gauche, &agrave; droite ou au centre.
Pour plus d’informations sur la d&eacute;finition des attributs de balise modifiables, voir D&eacute;finition
d’attributs de balise modifiables dans un mod&egrave;le, page 250. Pour plus d’informations sur la
modification de balises dans une page bas&eacute;e sur un mod&egrave;le, voir Modification des propri&eacute;t&eacute;s du
mod&egrave;le, page 259.
Les attributs de balise modifiables
Rubriques connexes
•
•
•
•
Cr&eacute;ation de r&eacute;gions modifiables, page 243
Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es, page 245
Utilisation des r&eacute;gions facultatives, page 248
D&eacute;finition d’attributs de balise modifiables, page 250
Mod&egrave;les et documents bas&eacute;s sur un mod&egrave;le en mode Code ou Cr&eacute;ation
Vous pouvez afficher des mod&egrave;les et des documents bas&eacute;s sur un mod&egrave;le en mode Code ou
Cr&eacute;ation.
Affichage d’un mod&egrave;le en mode Cr&eacute;ation
En mode Cr&eacute;ation, les r&eacute;gions modifiables des mod&egrave;les s’affichent dans la fen&ecirc;tre de document
entour&eacute;es d’un cadre rectangulaire d’une couleur de surbrillance pr&eacute;d&eacute;finie. Un petit onglet
indiquant le nom de la r&eacute;gion s’affiche dans le coin sup&eacute;rieur gauche de chaque r&eacute;gion.
Remarque : Pour plus d’informations sur la d&eacute;finition des pr&eacute;f&eacute;rences de couleur de surbrillance, voir
D&eacute;finition des pr&eacute;f&eacute;rences de surbrillance pour des r&eacute;gions de mod&egrave;le, page 240.
A propos des mod&egrave;les Dreamweaver
227
La barre de titre de la fen&ecirc;tre de document permet d’identifier les fichiers de mod&egrave;le. La barre de
titre d’un fichier de mod&egrave;le contient le mot &lt;&lt;Mod&egrave;le&gt;&gt; et l’extension du nom du fichier est
.dwt.
Rubriques connexes
• Affichage d’un document bas&eacute; sur un mod&egrave;le en mode Cr&eacute;ation, page 229
• Affichage d’un document bas&eacute; sur un mod&egrave;le en mode Code, page 230
Affichage d’un mod&egrave;le en mode Code
En mode Code, vous pouvez apporter des modifications &agrave; la fois au contenu modifiable et au
code source HTML verrouill&eacute; du mod&egrave;le.
Conseil : Vous pouvez utiliser les pr&eacute;f&eacute;rences de couleur de code pour d&eacute;finir votre propre mod&egrave;le
de coloration afin de pouvoir distinguer facilement les r&eacute;gions du mod&egrave;le lorsque vous affichez un
document en mode Code (voir Personnalisation des pr&eacute;f&eacute;rences de coloration de code d’un mod&egrave;le,
page 239).
Les r&eacute;gions de contenu modifiables sont rep&eacute;r&eacute;es dans le code HTML par les commentaires
suivants :
&lt;!-- TemplateBeginEditable&gt;
et &lt;!-- TemplateEndEditable --&gt;
Tous les &eacute;l&eacute;ments compris entre ces commentaires sont modifiables dans les documents cr&eacute;&eacute;s &agrave;
partir du mod&egrave;le. Le code source HTML d’une r&eacute;gion modifiable peut se pr&eacute;senter comme suit :
&lt;table width=&quot;75%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
&lt;tr bgcolor=&quot;#333366&quot;&gt;
&lt;td&gt;Name&lt;/td&gt;
&lt;td&gt;&lt;font color=&quot;#FFFFFF&quot;&gt;Address&lt;/font&gt;&lt;/td&gt;
&lt;td&gt;&lt;font color=&quot;#FFFFFF&quot;&gt;Telephone Number&lt;/font&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- TemplateBeginEditable name=&quot;LocationList&quot; --&gt;
&lt;tr&gt;
&lt;td&gt;Enter name&lt;/td&gt;
&lt;td&gt;Enter Address&lt;/td&gt;
&lt;td&gt;Enter Telephone&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- TemplateEndEditable --&gt;
&lt;/table&gt;
228
Chapitre 11 : Gestion des mod&egrave;les
Remarque : Lorsque vous modifiez le code du mod&egrave;le en mode Code, prenez garde &agrave; ne pas
modifier de balise de commentaire li&eacute;e au mod&egrave;le et utilis&eacute;e par Dreamweaver.
Rubriques connexes
• Affichage d’un mod&egrave;le en mode Cr&eacute;ation, page 227
• Affichage d’un document bas&eacute; sur un mod&egrave;le en mode Code, page 230
Affichage d’un document bas&eacute; sur un mod&egrave;le en mode Cr&eacute;ation
Dans un document bas&eacute; sur un mod&egrave;le, les r&eacute;gions modifiables s’affichent dans la fen&ecirc;tre de
document en mode Cr&eacute;ation, entour&eacute;es d’un cadre rectangulaire d’une couleur de surbrillance
pr&eacute;d&eacute;finie. Un petit onglet indiquant le nom de la r&eacute;gion s’affiche dans le coin sup&eacute;rieur gauche
de chaque r&eacute;gion.
Remarque : Pour plus d’informations sur la d&eacute;finition des pr&eacute;f&eacute;rences de couleur de surbrillance, voir
D&eacute;finition des pr&eacute;f&eacute;rences de surbrillance pour des r&eacute;gions de mod&egrave;le, page 240.
Outre les r&eacute;gions modifiables, la page enti&egrave;re est entour&eacute;e d’un cadre d’une couleur diff&eacute;rente et
un onglet en haut &agrave; droite indique le nom du mod&egrave;le sur lequel le document est bas&eacute;. Ce cadre a
pour fonction de vous rappeler que le document a &eacute;t&eacute; cr&eacute;&eacute; &agrave; partir d’un mod&egrave;le et que vous ne
pouvez rien changer en dehors des r&eacute;gions modifiables.
Rubriques connexes
• Affichage d’un mod&egrave;le en mode Cr&eacute;ation, page 227
• Affichage d’un mod&egrave;le en mode Code, page 228
A propos des mod&egrave;les Dreamweaver
229
Affichage d’un document bas&eacute; sur un mod&egrave;le en mode Code
En mode Code, les r&eacute;gions modifiables d’un document d&eacute;riv&eacute; d’un mod&egrave;le s’affichent dans une
couleur diff&eacute;rente du code dans les r&eacute;gions non modifiables. Vous pouvez modifier uniquement
les r&eacute;gions ou param&egrave;tres modifiables ; Dreamweaver vous emp&ecirc;che de taper dans les r&eacute;gions
verrouill&eacute;es.
Le contenu modifiable est rep&eacute;r&eacute; dans le code HTML par les commentaires Dreamweaver
suivants :
&lt;!-- InstanceBeginEditable&gt;
et &lt;!-- InstanceEndEditable --&gt;.
Tous les &eacute;l&eacute;ments compris entre ces commentaires sont modifiables dans un document bas&eacute; sur le
mod&egrave;le. Le code source HTML d’une r&eacute;gion modifiable peut se pr&eacute;senter comme suit :
&lt;body bgcolor=&quot;#FFFFFF&quot; leftmargin=&quot;0&quot;&gt;
&lt;table width=&quot;75%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
&lt;tr bgcolor=&quot;#333366&quot;&gt;
&lt;td&gt;Name&lt;/td&gt;
&lt;td&gt;&lt;font color=&quot;#FFFFFF&quot;&gt;Address&lt;/font&gt;&lt;/td&gt;
&lt;td&gt;&lt;font color=&quot;#FFFFFF&quot;&gt;Telephone Number&lt;/font&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- InstanceBeginEditable name=&quot;LocationList&quot; --&gt;
&lt;tr&gt;
&lt;td&gt;Enter name&lt;/td&gt;
&lt;td&gt;Enter Address&lt;/td&gt;
&lt;td&gt;Enter Telephone&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- InstanceEndEditable --&gt;
&lt;/table&gt;
&lt;/body&gt;
La couleur par d&eacute;faut du texte non modifiable est le gris. Vous pouvez associer des couleurs
diff&eacute;rentes aux r&eacute;gions modifiables et aux r&eacute;gions non modifiables en acc&eacute;dant &agrave; la bo&icirc;te de
dialogue Pr&eacute;f&eacute;rences. Pour plus d’informations, voir Personnalisation des pr&eacute;f&eacute;rences de coloration de
code d’un mod&egrave;le, page 239.
Rubriques connexes
• Affichage d’un mod&egrave;le en mode Cr&eacute;ation, page 227
• Affichage d’un mod&egrave;le en mode Code, page 228
• Affichage d’un document bas&eacute; sur un mod&egrave;le en mode Cr&eacute;ation, page 229
Syntaxe des balises du mod&egrave;le
Cette section d&eacute;crit les r&egrave;gles g&eacute;n&eacute;rales de syntaxe et donne la liste des balises de commentaire
HTML utilis&eacute;es par Dreamweaver pour d&eacute;finir les r&eacute;gions dans les mod&egrave;les et les documents
bas&eacute;s sur un mod&egrave;le. Dreamweaver ins&egrave;re automatiquement des balises de mod&egrave;le dans le code
lorsque vous ins&eacute;rez un objet de mod&egrave;le.
Remarque : Dreamweaver fait appel &agrave; des balises de commentaire pour d&eacute;finir les r&eacute;gions du
mod&egrave;le, de telle fa&ccedil;on que les documents bas&eacute;s sur un mod&egrave;le restent des fichiers HTML valides.
R&egrave;gles g&eacute;n&eacute;rales de syntaxe
Vous trouverez ci-dessous les r&egrave;gles de syntaxe g&eacute;n&eacute;rales :
230
Chapitre 11 : Gestion des mod&egrave;les
• L&agrave; o&ugrave; il y a un espace, vous pouvez en ajouter autant que vous voulez (sous la forme d’espaces,
•
•
•
de tabulations, de sauts de ligne). L’espace blanc est obligatoire, sauf au tout d&eacute;but ou &agrave; la toute
fin d’un commentaire.
Les attributs peuvent &ecirc;tre saisis dans n’importe quel ordre. Par exemple, dans le cas de
TemplateParam, vous pouvez sp&eacute;cifier le type avant le nom.
Les noms des commentaires et des attributs sont sensibles &agrave; la casse.
Tous les attributs doivent &ecirc;tre entre guillemets. Il est possible d’utiliser des guillemets simples
ou doubles.
Pour plus d’informations sur la v&eacute;rification de votre syntaxe, voir V&eacute;rification de la syntaxe du
mod&egrave;le, page 254.
Rubriques connexes
• Balises d’instance, page 232
Balises de mod&egrave;le
Dreamweaver utilise les balises de mod&egrave;le suivantes :
&lt;!-- TemplateBeginEditable name=&quot;...&quot; --&gt;
&lt;!-- TemplateEndEditable --&gt;
&lt;!-- TemplateParam name=&quot;...&quot; type=&quot;...&quot; value=&quot;...&quot; --&gt;
&lt;!-- TemplateBeginRepeat name=&quot;...&quot; --&gt;
&lt;!-- TemplateEndRepeat --&gt;
&lt;!-- TemplateBeginIf cond=&quot;...&quot; --&gt;
&lt;!-- TemplateEndIf --&gt;
&lt;!-- TemplateBeginPassthroughIf cond=&quot;...&quot; --&gt;
&lt;!-- TemplateEndPassthroughIf --&gt;
&lt;!-- TemplateBeginMultipleIf --&gt;
&lt;!-- TemplateEndMultipleIf --&gt;
&lt;!-- TemplateBeginPassthroughMultipleIf --&gt;
&lt;!-- TemplateEndPassthroughMultipleIf --&gt;
&lt;!-- TemplateBeginIfClause cond=&quot;...&quot; --&gt;
&lt;!-- TemplateEndIfClause --&gt;
&lt;!-- TemplateBeginPassthroughIfClause cond=&quot;...&quot; --&gt;
&lt;!-- TemplateEndPassthroughIfClause --&gt;
&lt;!-- TemplateExpr expr=&quot;...&quot; --&gt; (equivalent to @@...@@)
&lt;!-- TemplatePassthroughExpr expr=&quot;...&quot; --&gt;
&lt;!-- TemplateInfo codeOutsideHTMLIsLocked=&quot;...&quot; --&gt;
Rubriques connexes
• R&egrave;gles g&eacute;n&eacute;rales de syntaxe, page 230
A propos des mod&egrave;les Dreamweaver
231
Balises d’instance
Dreamweaver utilise les balises d’instance suivantes :
&lt;!-- InstanceBegin template=&quot;...&quot; codeOutsideHTMLIsLocked=&quot;...&quot; --&gt;
&lt;!-- InstanceEnd --&gt;
&lt;!-- InstanceBeginEditable name=&quot;...&quot; --&gt;
&lt;!-- InstanceEndEditable --&gt;
&lt;!-- InstanceParam name=&quot;...&quot; type=&quot;...&quot; value=&quot;...&quot; passthrough=&quot;...&quot; --&gt;
&lt;!-- InstanceBeginRepeat name=&quot;...&quot; --&gt;
&lt;!-- InstanceEndRepeat --&gt;
&lt;!-- InstanceBeginRepeatEntry --&gt;
&lt;!-- InstanceEndRepeatEntry --&gt;
Rubriques connexes
• R&egrave;gles g&eacute;n&eacute;rales de syntaxe, page 230
• Balises de mod&egrave;le, page 231
Liens des mod&egrave;les
Pour cr&eacute;er un lien dans un fichier de mod&egrave;le, cliquez sur l’ic&ocirc;ne de dossier ou sur l’ic&ocirc;ne Pointer
vers un fichier dans l’inspecteur de propri&eacute;t&eacute;s. Ne tapez pas le nom du fichier &agrave; lier, car le lien
pourrait ne pas fonctionner. Cette section explique comment Dreamweaver g&egrave;re les liens dans les
mod&egrave;les.
Lorsque vous cr&eacute;ez un fichier de mod&egrave;le &agrave; partir d’une page existante, puis que vous enregistrez
cette page comme mod&egrave;le, Dreamweaver met &agrave; jour les liens de sorte qu’ils pointent vers les
fichiers d’origine. Les mod&egrave;les &eacute;tant enregistr&eacute;s dans le dossier Templates, le chemin d’un lien
relatif &agrave; un document change lorsque vous enregistrez la page comme mod&egrave;le. Lorsque vous cr&eacute;ez
un nouveau document &agrave; partir du mod&egrave;le et que vous enregistrez ce nouveau document, tous les
liens relatifs &agrave; un document sont mis &agrave; jour pour qu’ils continuent de pointer vers les fichiers
ad&eacute;quats.
En revanche, si vous ins&eacute;rez un nouveau lien relatif &agrave; un document dans un fichier de mod&egrave;le et
que vous tapez le chemin dans la zone de texte du lien de l’inspecteur de propri&eacute;t&eacute;s, il est facile de
faire une faute de frappe. Le chemin correct est le chemin d’acc&egrave;s au document li&eacute; &agrave; partir du
dossier Templates, et non pas &agrave; partir du dossier du document bas&eacute; sur le mod&egrave;le.
Pour plus d’informations sur l’&eacute;tablissement de liens &agrave; l’aide de l’ic&ocirc;ne Pointer vers un fichier,
voir Liens entre fichiers et documents, page 334.
Remarque : Dans certains cas (notamment pour les chemins de fichiers des gestionnaires
d’&eacute;v&eacute;nement des mod&egrave;les), vous ne pouvez pas utiliser l’ic&ocirc;ne de dossier ni l’ic&ocirc;ne Pointer vers un
fichier. Vous devez alors taper le chemin, en prenant garde &agrave; ne pas faire de faute de frappe.
232
Chapitre 11 : Gestion des mod&egrave;les
Mod&egrave;les imbriqu&eacute;s
Un mod&egrave;le imbriqu&eacute; est un mod&egrave;le dont la conception et les r&eacute;gions modifiables sont bas&eacute;es sur
un autre mod&egrave;le. Pour cr&eacute;er un mod&egrave;le imbriqu&eacute;, vous devez au pr&eacute;alable enregistrer le mod&egrave;le de
base ou le mod&egrave;le original, puis cr&eacute;er un document &agrave; partir de ce mod&egrave;le et enregistrer ce
document comme mod&egrave;le. Vous pouvez ensuite d&eacute;finir dans le nouveau mod&egrave;le des r&eacute;gions
modifiables suppl&eacute;mentaires au niveau des sections d&eacute;finies initialement comme modifiables dans
le mod&egrave;le de base.
Les mod&egrave;les imbriqu&eacute;s sont utiles pour g&eacute;rer le contenu de certaines pages d’un site qui ont de
nombreux &eacute;l&eacute;ments de pr&eacute;sentation en commun avec les autres pages du site mais qui pr&eacute;sentent
malgr&eacute; tout quelques diff&eacute;rences. Par exemple, vous pouvez cr&eacute;er un mod&egrave;le de base d&eacute;finissant la
conception de zones plus larges, qui sera utilis&eacute; par une grande partie des responsables du contenu
du site, et cr&eacute;er un mod&egrave;le imbriqu&eacute; d&eacute;finissant de nouvelles r&eacute;gions modifiables dans les pages
d’une section sp&eacute;cifique du site.
Les r&eacute;gions modifiables d’un mod&egrave;le de base sont transmises aux mod&egrave;les imbriqu&eacute;s et restent
modifiables dans les pages cr&eacute;&eacute;es &agrave; partir d’un mod&egrave;le imbriqu&eacute;, &agrave; moins que de nouvelles r&eacute;gions
de mod&egrave;le ne soient ins&eacute;r&eacute;es dans ces r&eacute;gions.
Les modifications apport&eacute;es &agrave; un mod&egrave;le de base sont automatiquement r&eacute;percut&eacute;es dans les
mod&egrave;les bas&eacute;s sur ce mod&egrave;le de base et dans tous les documents bas&eacute;s sur les mod&egrave;les principal et
imbriqu&eacute;.
Dans l’exemple suivant, le mod&egrave;le contient trois r&eacute;gions modifiables, nomm&eacute;es Body, Nav Bar et
:
Footer
A propos des mod&egrave;les Dreamweaver
233
Pour cr&eacute;er un mod&egrave;le imbriqu&eacute;, nous avons cr&eacute;&eacute; un document &agrave; partir du mod&egrave;le, puis nous
avons enregistr&eacute; ce document comme mod&egrave;le que nous avons appel&eacute; TrioNested. Dans le mod&egrave;le
imbriqu&eacute;, nous avons ajout&eacute; deux r&eacute;gions modifiables et du contenu dans la r&eacute;gion nomm&eacute;e
Body.
Lorsque vous ins&eacute;rez une nouvelle r&eacute;gion modifiable dans une r&eacute;gion modifiable transmise au
mod&egrave;le imbriqu&eacute;, la couleur de surbrillance de la r&eacute;gion modifiable devient orange. Le contenu
ins&eacute;r&eacute; dans une r&eacute;gion modifiable, par exemple l’image ins&eacute;r&eacute;e dans editableColumn, n’est plus
modifiable dans les documents cr&eacute;&eacute;s &agrave; partir du mod&egrave;le imbriqu&eacute;. Qu’elles aient &eacute;t&eacute; ajout&eacute;es au
mod&egrave;le imbriqu&eacute; ou qu’elles soient h&eacute;rit&eacute;es du mod&egrave;le de base, les r&eacute;gions modifiables entour&eacute;es
d’un cadre de surbrillance bleu restent modifiables dans les documents cr&eacute;&eacute;s &agrave; partir du mod&egrave;le
imbriqu&eacute;. Les r&eacute;gions de mod&egrave;le dans lesquelles aucune r&eacute;gion modifiable n’a &eacute;t&eacute; ins&eacute;r&eacute;e sont
transmises sous la forme de r&eacute;gions modifiables aux documents bas&eacute;s sur le mod&egrave;le.
Rubriques connexes
• Cr&eacute;ation d’un mod&egrave;le imbriqu&eacute;, page 251
Scripts de serveur dans un mod&egrave;le et documents bas&eacute;s sur un mod&egrave;le
Certains scripts de serveur sont ins&eacute;r&eacute;s au tout d&eacute;but ou &agrave; la toute fin du document (avant la
balise &lt;html&gt; ou apr&egrave;s la balise &lt;/html&gt;). Ces scripts requi&egrave;rent un traitement sp&eacute;cial dans les
mod&egrave;les et les documents cr&eacute;&eacute;s &agrave; partir de mod&egrave;les. En r&egrave;gle g&eacute;n&eacute;rale, lorsque vous apportez des
modifications au code situ&eacute; avant la balise &lt;html&gt; ou apr&egrave;s la balise &lt;/html&gt; dans un mod&egrave;le, les
modifications ne sont pas r&eacute;percut&eacute;es dans les documents cr&eacute;&eacute;s &agrave; partir du mod&egrave;le, ce qui peut
entra&icirc;ner des erreurs de serveur lorsqu’un script de serveur situ&eacute; dans le corps principal du mod&egrave;le
d&eacute;pend d’un script non mis &agrave; jour. C’est la raison pour laquelle Dreamweaver vous avertit lorsque
vous tentez de modifier des scripts situ&eacute;s avant la balise &lt;html&gt; ou apr&egrave;s la balise &lt;/html&gt; dans
un mod&egrave;le.
Pour &eacute;viter ce probl&egrave;me, vous pouvez ins&eacute;rer le code suivant dans la section head du mod&egrave;le :
&lt;!-- TemplateInfo codeOutsideHTMLIsLocked=&quot;true&quot; --&gt;
234
Chapitre 11 : Gestion des mod&egrave;les
Lorsque vous ins&eacute;rez ce code dans un mod&egrave;le, toutes les modifications apport&eacute;es aux scripts situ&eacute;s
avant la balise &lt;html&gt; ou apr&egrave;s la balise &lt;/html&gt; sont r&eacute;percut&eacute;es dans les documents cr&eacute;&eacute;s &agrave;
partir du mod&egrave;le. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents cr&eacute;&eacute;s &agrave;
partir du mod&egrave;le. Vous pouvez donc soit modifier les scripts dans le mod&egrave;le, soit dans les
documents cr&eacute;&eacute;s &agrave; partir du mod&egrave;le, mais pas dans les deux &agrave; la fois.
Param&egrave;tres de mod&egrave;le
Les param&egrave;tres de mod&egrave;le indiquent les valeurs qui permettent de personnaliser le contenu des
documents bas&eacute;s sur le mod&egrave;le. Ils permettent de d&eacute;finir des r&eacute;gions facultatives, des attributs de
balise modifiables et des valeurs &agrave; transmettre aux documents joints. Pour chaque param&egrave;tre, vous
devez d&eacute;finir un nom, un type de donn&eacute;e et une valeur par d&eacute;faut. Vous devez attribuer un nom
unique &agrave; chaque param&egrave;tre. En outre, les param&egrave;tres sont sensibles &agrave; la casse.
Les param&egrave;tres de mod&egrave;le sont transmis au document sous forme de param&egrave;tres d’instance. En
g&eacute;n&eacute;ral, l’utilisateur d’un mod&egrave;le est autoris&eacute; &agrave; modifier les valeurs par d&eacute;faut du param&egrave;tre pour
personnaliser le contenu du document bas&eacute; sur le mod&egrave;le. Dans d’autres cas, le cr&eacute;ateur du
mod&egrave;le peut d&eacute;terminer ce qui appara&icirc;t dans le document, selon la valeur d’une expression de
mod&egrave;le.
Rubriques connexes
• Utilisation des r&eacute;gions facultatives, page 248
• D&eacute;finition d’attributs de balise modifiables, page 250
Expressions de mod&egrave;le
Les expressions de mod&egrave;le sont des instructions qui permettent de calculer ou d’&eacute;valuer une
valeur.
Vous pouvez utiliser une expression pour enregistrer une valeur et l’afficher dans un document.
Vous pouvez notamment r&eacute;diger une expression simple se limitant &agrave; la valeur d’un param&egrave;tre, par
exemple @@(Param)@@, ou bien une expression plus complexe permettant de calculer les valeurs
qui feront alterner la couleur d’arri&egrave;re-plan de la ligne d’un tableau, par exemple @@((_index &amp;
1) ? red : blue)@@.
Vous pouvez &eacute;galement r&eacute;diger des expressions pour d&eacute;finir des conditions If et MultipleIf (voir,
par exemple, La condition Multiple If dans le code du mod&egrave;le, page 237). Lorsqu’une instruction
conditionnelle contient une expression, Dreamweaver &eacute;value si celle-ci est true ou false. Si la
condition est true, la r&eacute;gion facultative s’affiche dans le document bas&eacute; sur le mod&egrave;le ; si elle est
false, elle n’appara&icirc;t pas.
Vous pouvez d&eacute;finir des expressions en mode Code ou dans la bo&icirc;te de dialogue de la r&eacute;gion
facultative que vous ins&eacute;rez. Pour plus d’informations sur la r&eacute;daction d’expressions de mod&egrave;le,
voir Le langage d’expression de mod&egrave;le, page 236.
En mode Code, il existe deux fa&ccedil;ons de d&eacute;finir des expressions de mod&egrave;le : l’insertion du
commentaire &lt;!-- TemplateExpr expr=“votre expression”--&gt; ou @@(votre
expression)@@. Lorsque vous ins&eacute;rez l’expression dans le code du mod&egrave;le, un marqueur
d’expression appara&icirc;t en mode Cr&eacute;ation. Lorsque vous appliquez le mod&egrave;le, Dreamweaver &eacute;value
l’expression et affiche la valeur dans le document bas&eacute; sur le mod&egrave;le.
A propos des mod&egrave;les Dreamweaver
235
Le langage d’expression de mod&egrave;le
Le langage d’expression de mod&egrave;le utilise la syntaxe et les r&egrave;gles de priorit&eacute; de JavaScript, dont il
constitue un sous-ensemble. Vous pouvez utiliser des op&eacute;rateurs JavaScript pour r&eacute;diger des
expressions, comme dans l’exemple suivant :
@@(firstName+lastName)@@
Les fonctions et op&eacute;rateurs suivants sont pris en charge :
• constantes num&eacute;riques, constantes de cha&icirc;ne (syntaxe avec guillemets doubles uniquement),
•
•
•
•
•
•
constantes bool&eacute;ennes (true ou false)
r&eacute;f&eacute;rence &agrave; une variable (voir le mod&egrave;le d’objet d’expression pour conna&icirc;tre les variables
d&eacute;finies)
r&eacute;f&eacute;rence &agrave; un champ (op&eacute;rateur &laquo; point &raquo;)
op&eacute;rateurs unaires : +, -, ~, !
op&eacute;rateurs binaires : +, -, *, /, %, &amp;, |, ^, &amp;&amp;, ||, &lt;, &lt;=, &gt;, &gt;=, ==, !=, &lt;&lt;, &gt;&gt;
op&eacute;rateurs conditionnels : ?:
parenth&egrave;ses : ()
Les types de donn&eacute;es suivants sont pris en charge : bool&eacute;en, virgule flottante 64 bits IEEE, cha&icirc;ne
et objet. Les mod&egrave;les Dreamweaver ne prennent pas en charge l’utilisation des types JavaScript
&laquo; null &raquo; et &laquo; undefined &raquo;. Ils ne permettent pas non plus de convertir implicitement les types
scalaires en objet. Par cons&eacute;quent, l’expression &quot;abc&quot;.length provoquera une erreur au lieu de
fournir la valeur 3.
Les seuls objets disponibles sont ceux qui sont d&eacute;finis par le mod&egrave;le d’objet d’expression. Les
variables suivantes sont d&eacute;finies :
_document
Contient les donn&eacute;es de mod&egrave;le de niveau document. Comprend un champ pour chaque
param&egrave;tre du mod&egrave;le et un ensemble de champs fournissant des informations pr&eacute;d&eacute;finies sur le
document.
_repeat
D&eacute;finie uniquement pour les expressions situ&eacute;es &agrave; l’int&eacute;rieur d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e. Fournit des
informations pr&eacute;d&eacute;finies sur la r&eacute;gion :
_index
Index num&eacute;rique (&agrave; partir de 0) de l’entr&eacute;e en cours.
_numRows
Nombre total d’entr&eacute;es dans la r&eacute;gion r&eacute;p&eacute;t&eacute;e.
_isFirst
Vrai (true) si l’entr&eacute;e en cours est la premi&egrave;re entr&eacute;e de la r&eacute;gion r&eacute;p&eacute;t&eacute;e.
_isLast
Vrai (true) si l’entr&eacute;e en cours est la derni&egrave;re entr&eacute;e de la r&eacute;gion r&eacute;p&eacute;t&eacute;e.
Objet _repeat de l’entr&eacute;e pr&eacute;c&eacute;dente. L’acc&egrave;s &agrave; cette propri&eacute;t&eacute; provoque une
erreur si l’entr&eacute;e est la premi&egrave;re de la r&eacute;gion.
_prevRecord
Objet _repeat de l’entr&eacute;e suivante. L’acc&egrave;s &agrave; cette propri&eacute;t&eacute; provoque une erreur
si l’entr&eacute;e est la derni&egrave;re de la r&eacute;gion.
_nextRecord
Dans une r&eacute;gion r&eacute;p&eacute;t&eacute;e imbriqu&eacute;e, donne l’objet _repeat correspondant &agrave; la r&eacute;gion
r&eacute;p&eacute;t&eacute;e ext&eacute;rieure. L’acc&egrave;s &agrave; cette propri&eacute;t&eacute; en dehors d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e imbriqu&eacute;e provoque
une erreur.
_parent
236
Chapitre 11 : Gestion des mod&egrave;les
Lors de l’&eacute;valuation de l’expression, tous les champs de l’objet _document et _repeat sont
implicitement disponibles. Par exemple, vous pouvez saisir title au lieu de _document.title
pour acc&eacute;der au param&egrave;tre de titre du document.
En cas de conflit de champ, les champs de l’objet _repeat ont la priorit&eacute; sur les champs de l’objet
_document. Vous n’avez donc pas &agrave; r&eacute;f&eacute;rencer explicitement _document ou _repeat. Toutefois, il
se peut que _document soit n&eacute;cessaire &agrave; l’int&eacute;rieur d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e pour r&eacute;f&eacute;rencer les
param&egrave;tres de document masqu&eacute;s par les param&egrave;tres de r&eacute;gion r&eacute;p&eacute;t&eacute;e.
Dans le cas de r&eacute;gions r&eacute;p&eacute;t&eacute;es imbriqu&eacute;es, seuls les champs de la r&eacute;gion r&eacute;p&eacute;t&eacute;e int&eacute;rieure sont
disponibles implicitement. Les r&eacute;gions ext&eacute;rieures doivent &ecirc;tre r&eacute;f&eacute;renc&eacute;es explicitement &agrave; l’aide
de _parent.
La condition Multiple If dans le code du mod&egrave;le
Vous pouvez r&eacute;diger des expressions de mod&egrave;le pour d&eacute;finir des conditions If et MultipleIf (voir
Expressions de mod&egrave;le, page 235). Dans l’exemple suivant, un param&egrave;tre appel&eacute; &quot;Dept&quot; est cr&eacute;&eacute;,
une valeur initiale est d&eacute;finie et une condition MultipleIf est utilis&eacute;e pour d&eacute;terminer le logo qui
doit s’afficher.
Voici un exemple de code pouvant &ecirc;tre ins&eacute;r&eacute; dans la section head du mod&egrave;le :
&lt;!-- TemplateParam name=&quot;Dept&quot; type =&quot;number&quot; value =&quot;1&quot; --&gt;
L’instruction conditionnelle suivante v&eacute;rifie la valeur attribu&eacute;e au param&egrave;tre Dept. Si la condition
renvoie &quot;true&quot; ou la valeur correspondante, l’image ad&eacute;quate s’affiche.
&lt;!-- TemplateBeginMultipleIf --&gt;
&lt;!-- v&eacute;rifier la valeur de Dept et afficher l’image ad&eacute;quate--&gt;
&lt;!-- TemplateBeginClause cond=&quot;Dept == 1&quot; --&gt; &lt;img src=&quot;.../sales.gif&quot;&gt; &lt;!-TemplateEndIfClause --&gt;
&lt;!-- TemplateBeginIfClause cond=&quot;Dept == 2&quot; --&gt; &lt;img src=&quot;.../support.gif&quot;&gt;
&lt;!-- TemplateEndIfClause--&gt;
&lt;!-- TemplateBeginIfClause cond=&quot;Dept == 3&quot; --&gt; &lt;img src=&quot;.../hr.gif&quot;&gt; &lt;!-TemplateEndIfClause --&gt;
&lt;!-- TemplateBeginIfClause cond=&quot;Dept != 3&quot; --&gt; &lt;img src=&quot;.../spacer.gif&quot;&gt;
&lt;!-- TemplateEndIfClause --&gt;
&lt;!-- TemplateEndMultipleIf --&gt;
Lorsque vous cr&eacute;ez un document bas&eacute; sur un mod&egrave;le, les param&egrave;tres du mod&egrave;le lui sont
automatiquement transmis. L’utilisateur du mod&egrave;le d&eacute;termine l’image &agrave; afficher (voir
Modification des propri&eacute;t&eacute;s du mod&egrave;le, page 259).
A propos des mod&egrave;les Dreamweaver
237
Cr&eacute;ation d’un mod&egrave;le Dreamweaver
Vous pouvez cr&eacute;er un mod&egrave;le &agrave; partir d’un document existant (tel qu’un document HTML,
Macromedia ColdFusion ou Microsoft ASP) ou bien &agrave; partir d’un nouveau document vierge.
Apr&egrave;s avoir cr&eacute;&eacute; un mod&egrave;le, vous pouvez y ins&eacute;rer des r&eacute;gions (voir Types de r&eacute;gions de mod&egrave;le,
page 226). Vous pouvez &eacute;galement y d&eacute;finir des pr&eacute;f&eacute;rences en mati&egrave;re de coloration du code et
de couleur de surbrillance des r&eacute;gions (voir Personnalisation des pr&eacute;f&eacute;rences de coloration de code
d’un mod&egrave;le, page 239 et D&eacute;finition des pr&eacute;f&eacute;rences de surbrillance pour des r&eacute;gions de mod&egrave;le,
page 240).
Conseil : Si vous souhaitez enregistrer des informations suppl&eacute;mentaires sur un mod&egrave;le (par
exemple, le nom de la personne qui l’a cr&eacute;&eacute;, la date de sa derni&egrave;re modification ou les raisons justifiant
certaines d&eacute;cisions relatives &agrave; la mise en forme), vous pouvez cr&eacute;er un fichier Design Notes pour le
mod&egrave;le (voir Association de Design Notes &agrave; un fichier, page 117). Les documents bas&eacute;s sur un mod&egrave;le
n’h&eacute;ritent pas des Design Notes associ&eacute;es &agrave; ce dernier.
Pour cr&eacute;er un mod&egrave;le :
1 Ouvrez le document que vous souhaitez enregistrer comme mod&egrave;le :
■
■
Pour ouvrir un document existant, choisissez Fichier &gt; Ouvrir et s&eacute;lectionnez le document.
Pour ouvrir un document vierge, choisissez Fichier &gt; Nouveau. Dans la bo&icirc;te de dialogue
qui appara&icirc;t, s&eacute;lectionnez Page de base ou Page dynamique et le type de page avec lequel
vous souhaitez travailler, puis cliquez sur le bouton Cr&eacute;er.
Remarque : Pour plus d’informations sur la cr&eacute;ation d’un nouveau document, voir Cr&eacute;ation d’un
document vierge, page 76.
2 Une fois le document ouvert, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Fichier &gt; Enregistrer comme mod&egrave;le.
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Mod&egrave;les, puis
choisissez Cr&eacute;er un mod&egrave;le.
Remarque : Si vous n’avez pas s&eacute;lectionn&eacute; Ne plus afficher ce message, un message s’affiche
vous indiquant que le document que vous enregistrez ne comporte aucune r&eacute;gion modifiable.
Cliquez sur OK pour enregistrer le document comme mod&egrave;le, ou bien sur Annuler pour fermer la
bo&icirc;te de dialogue sans cr&eacute;er de mod&egrave;le.
La bo&icirc;te de dialogue Enregistrer comme mod&egrave;le s’affiche.
3 S&eacute;lectionnez le site dans lequel vous souhaitez enregistrer le mod&egrave;le dans le menu d&eacute;roulant Site,
puis tapez un nom unique pour le mod&egrave;le dans la zone de texte Enregistrer sous.
4 Cliquez sur Enregistrer.
238
Chapitre 11 : Gestion des mod&egrave;les
Dreamweaver enregistre le fichier de mod&egrave;le dans le dossier Templates du site, dans le dossier
racine local du site, avec l’extension .dwt. Si ce dossier n’existe pas, Dreamweaver le cr&eacute;e
automatiquement au moment de l’enregistrement du nouveau mod&egrave;le.
Remarque : Ne retirez pas vos mod&egrave;les du dossier Templates et placez dans celui-ci uniquement
des fichiers de mod&egrave;les. Ne retirez pas non plus le dossier Templates de votre dossier racine local.
Car cela pourrait provoquer des erreurs dans les chemins d’acc&egrave;s des mod&egrave;les.
Pour cr&eacute;er un mod&egrave;le &agrave; l’aide du panneau Actifs
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), s&eacute;lectionnez la cat&eacute;gorie Mod&egrave;les sur le c&ocirc;t&eacute; gauche
du panneau.
La cat&eacute;gorie Mod&egrave;les du panneau Actifs s’affiche.
2 Cliquez sur le bouton Nouveau mod&egrave;le en bas du panneau Actifs.
Un nouveau mod&egrave;le, sans nom, est ajout&eacute; &agrave; la liste de mod&egrave;les du panneau Actifs.
3 Le mod&egrave;le &eacute;tant toujours s&eacute;lectionn&eacute;, donnez-lui un nom, puis appuyez sur Entr&eacute;e (Windows)
ou Retour (Macintosh).
Dreamweaver cr&eacute;e un nouveau mod&egrave;le vierge dans le panneau Actifs et dans le dossier
Mod&egrave;les.
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences de surbrillance pour des r&eacute;gions de mod&egrave;le, page 240
• Cr&eacute;ation de mod&egrave;les pour un site Contribute, page 241
• Insertion d’une r&eacute;gion modifiable, page 243
Personnalisation des pr&eacute;f&eacute;rences de coloration de code d’un mod&egrave;le
Utilisez ces pr&eacute;f&eacute;rences pour d&eacute;finir la couleur des caract&egrave;res, la couleur de l’arri&egrave;re-plan et les
attributs de style du texte affich&eacute; en mode Code. Vous pouvez d&eacute;finir votre propre mod&egrave;le de
couleur afin de pouvoir distinguer facilement les r&eacute;gions de mod&egrave;le lorsque vous affichez un
document en mode Code.
Pour d&eacute;finir un mod&egrave;le de couleurs &agrave; appliquer aux mod&egrave;les en mode Code :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2
3
4
5
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
S&eacute;lectionnez la cat&eacute;gorie Coloration du code dans la liste de gauche.
S&eacute;lectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier le
mod&egrave;le de coloration.
La bo&icirc;te de dialogue Modifier le mod&egrave;le de coloration pour HTML s’affiche.
Dans la liste Styles pour, s&eacute;lectionnez Balises de mod&egrave;le.
D&eacute;finissez la couleur des caract&egrave;res, la couleur de l’arri&egrave;re-plan et les attributs de style du texte
affich&eacute; en mode Code. Pour ce faire, proc&eacute;dez de la mani&egrave;re suivante :
■ Tapez dans la zone de texte Couleur de texte la valeur hexad&eacute;cimale de la couleur que vous
souhaitez appliquer au texte s&eacute;lectionn&eacute;, ou bien utilisez le s&eacute;lecteur de couleur pour
s&eacute;lectionner cette couleur. Proc&eacute;dez de la m&ecirc;me mani&egrave;re pour le champ Couleur d’arri&egrave;replan si vous souhaitez appliquer une couleur &agrave; l’arri&egrave;re-plan du texte s&eacute;lectionn&eacute;, ou bien
modifier la couleur courante.
Cr&eacute;ation d’un mod&egrave;le Dreamweaver
239
Si vous souhaitez appliquer un attribut de style au code s&eacute;lectionn&eacute;, utilisez les boutons B
(gras), I (italique) et U (soulign&eacute;) pour appliquer le style souhait&eacute;.
6 Cliquez sur OK.
■
D&eacute;finition des pr&eacute;f&eacute;rences de surbrillance pour des r&eacute;gions de mod&egrave;le
Les pr&eacute;f&eacute;rences de surbrillance Dreamweaver permettent de personnaliser les couleurs de
surbrillance appliqu&eacute;es aux cadres entourant les r&eacute;gions modifiables et les r&eacute;gions verrouill&eacute;es d’un
mod&egrave;le en mode Cr&eacute;ation. La couleur de surbrillance des r&eacute;gions modifiables est utilis&eacute;e dans le
mod&egrave;le, mais aussi dans les documents bas&eacute;s sur ce mod&egrave;le.
Pour plus d’informations sur l’affichage des mod&egrave;les et des documents bas&eacute;s sur un mod&egrave;le en
mode Cr&eacute;ation, voir Affichage d’un mod&egrave;le en mode Cr&eacute;ation, page 227 et Affichage d’un document
bas&eacute; sur un mod&egrave;le en mode Cr&eacute;ation, page 229.
Pour modifier les couleurs de surbrillance :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Surbrillance dans la liste de gauche.
3 Cliquez dans la case de couleur R&eacute;gions modifiables, R&eacute;gions modifiables imbriqu&eacute;es ou
R&eacute;gions verrouill&eacute;es, puis s&eacute;lectionnez une couleur de surbrillance &agrave; l’aide de la pipette (ou tapez
la valeur hexad&eacute;cimale correspondant &agrave; la couleur de surbrillance dans la zone de texte).
Pour plus d’informations sur l’utilisation de la pipette, voir Utilisation des couleurs, page 273.
4 (Facultatif) R&eacute;p&eacute;tez cette op&eacute;ration pour les autres types de r&eacute;gion de mod&egrave;le, autant de fois que
n&eacute;cessaire.
5 Cochez la case Afficher pour activer l’affichage des couleurs dans la fen&ecirc;tre de document ou
d&eacute;cochez- la pour d&eacute;sactiver l’affichage.
Remarque : La case de couleur R&eacute;gions modifiables imbriqu&eacute;es ne s’accompagne pas de l’option
Afficher : l’affichage des r&eacute;gions imbriqu&eacute;es est en effet contr&ocirc;l&eacute; par l’option R&eacute;gions modifiables.
6 Cliquez sur OK.
Pour afficher les couleurs de surbrillance dans la fen&ecirc;tre de document :
• Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
Les couleurs de surbrillance apparaissent dans la fen&ecirc;tre de document uniquement lorsque
l’option Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles est activ&eacute;e et que les options
appropri&eacute;es sont activ&eacute;es dans les pr&eacute;f&eacute;rences de surbrillance.
Remarque : Si des &eacute;l&eacute;ments invisibles apparaissent mais pas les couleurs de surbrillance,
choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis
s&eacute;lectionnez la cat&eacute;gorie Surbrillance. V&eacute;rifiez que l’option Afficher est activ&eacute;e pr&egrave;s de la couleur
de surbrillance appropri&eacute;e. V&eacute;rifiez &eacute;galement que la couleur souhait&eacute;e est contrast&eacute;e par rapport
&agrave; la couleur d’arri&egrave;re-plan de votre page.
Rubriques connexes
• Personnalisation des pr&eacute;f&eacute;rences de coloration de code d’un mod&egrave;le, page 239
240
Chapitre 11 : Gestion des mod&egrave;les
Cr&eacute;ation de mod&egrave;les pour un site Contribute
A l’aide de Dreamweaver, vous pouvez cr&eacute;er des mod&egrave;les afin d’aider les utilisateurs de
Macromedia Contribute &agrave; cr&eacute;er de nouvelles pages, &agrave; d&eacute;finir l’aspect g&eacute;n&eacute;ral du site et &agrave; mettre &agrave;
jour la mise en forme de plusieurs pages &agrave; la fois.
Lorsque vous cr&eacute;ez un mod&egrave;le et que vous le chargez sur le serveur, il devient disponibles pour
tous les Contribute utilisateurs se connectant &agrave; votre site, sauf si vous avez limit&eacute; l’utilisation du
mod&egrave;le aux groupes d’autorisations de Contribute. Si vous avez d&eacute;fini des restrictions sur
l’utilisation des mod&egrave;les, il peut s’av&eacute;rer n&eacute;cessaire d’ajouter chaque nouveau mod&egrave;le &agrave; la liste des
mod&egrave;les accessibles par un utilisateur de Contribute (voir l’aide sur l’administration de
Contribute dans Macromedia Contribute).
Remarque : Assurez-vous que le dossier racine de chaque site utilisateur de Contribute d&eacute;fini est le
m&ecirc;me que le dossier racine de votre d&eacute;finition de site dans Dreamweaver. Si un dossier racine de site
utilisateur ne correspond pas au v&ocirc;tre, cet utilisateur ne pourra pas utiliser les mod&egrave;les.
En compl&eacute;ment des mod&egrave;les Dreamweaver, vous pouvez cr&eacute;er des mod&egrave;les non Dreamweaver &agrave; l’aide
des outils d’administration de Contribute. Un mod&egrave;le non-Dreamweaver est une page existante dont
les utilisateurs de Contribute peuvent se servir pour cr&eacute;er de nouvelles pages. Cette page est similaire &agrave;
un mod&egrave;le Dreamweaver, &agrave; l’exception que les pages bas&eacute;es sur ce mod&egrave;le ne se mettent pas &agrave; jour
lorsque vous apportez des modifications &agrave; ce dernier. Les mod&egrave;les non-Dreamweaver ne peuvent pas
contenir d’&eacute;l&eacute;ments de mod&egrave;les Dreamweaver, tels que des r&eacute;gions modifiables ou verrouill&eacute;es, des
r&eacute;p&eacute;titions de r&eacute;gions ou autres r&eacute;gions facultatives.
Lorsqu’un utilisateur de Contribute cr&eacute;e un nouveau document au sein d’un site contenant
des mod&egrave;les Dreamweaver, Contribute &eacute;tablit la liste des mod&egrave;les disponibles (Dreamweaver et
non-Dreamweaver) dans la bo&icirc;te de dialogue Nouvelle page.
Cr&eacute;ation de mod&egrave;les pour un site Contribute
241
Pour inclure dans votre site des pages contenant des encodages autres que Latin-1, vous devez
cr&eacute;er des mod&egrave;les (Dreamweaver ou non Dreamweaver). Contribute permet de modifier des
pages, quels que soient leurs encodages. Cependant, lorsqu’un utilisateur de Contribute cr&eacute;e une
nouvelle page, celle-ci est bas&eacute;e sur l’encodage Latin-1. Pour cr&eacute;er une page utilisant un encodage
diff&eacute;rent, l’utilisateur de Contribute peut cr&eacute;er une copie d’une page existante bas&eacute;e sur un
encodage diff&eacute;rent ou utiliser un mod&egrave;le bas&eacute; sur un encodage diff&eacute;rent. Cela dit, si le site
utilisant d’autres encodages ne contient pas de pages ni de mod&egrave;les, cr&eacute;ez d’abord, dans
Dreamweaver, une page ou un mod&egrave;le utilisant cet autre encodage.
Pour plus d’informations sur la cr&eacute;ation, la modification et la mise &agrave; jour des mod&egrave;les
Dreamweaver, voir A propos des mod&egrave;les Dreamweaver, page 226.
Pour cr&eacute;er un mod&egrave;le non-Dreamweaver :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue G&eacute;rer les sites s’affiche.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 Cliquez sur l’onglet Avanc&eacute;.
4 S&eacute;lectionnez la cat&eacute;gorie Contribute dans la liste de gauche.
5 Si vous ne l’avez pas d&eacute;j&agrave; fait, vous devez activer la compatibilit&eacute; avec Contribute.
Activez l’option Activer la compatibilit&eacute; avec Contribute, puis tapez l’URL de la racine du site.
Pour plus d’informations, cliquez sur le bouton Aide.
6 Cliquez sur le bouton Administrer le site dans Contribute.
7 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Si la bo&icirc;te de dialogue Mot de passe administrateur s’affiche, tapez le mot de passe
administrateur, puis cliquez sur OK.
■ Si aucun administrateur ne g&egrave;re ce site, une bo&icirc;te de dialogue s’affiche, vous proposant de
devenir l’administrateur de ce site Web. Cliquez sur Oui, entrez et confirmez le mot de passe
administrateur du site, puis cliquez sur OK.
La bo&icirc;te de dialogue Administration du site Web s’affiche.
8 S&eacute;lectionnez un groupe d’autorisations, puis cliquez sur le bouton Modifier le groupe.
9 S&eacute;lectionnez la cat&eacute;gorie Nouvelles pages, puis ajoutez les pages existantes &agrave; la liste situ&eacute;e en
dessous de l’option Cr&eacute;er une page en copiant une page de la liste ci-dessous.
Pour plus d’informations, voir l’aide sur l’administration de Contribute dans Contribute.
10 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Groupe d’autorisations.
11 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Administration du site Web.
Rubriques connexes
• Cr&eacute;ation d’un mod&egrave;le Dreamweaver, page 238
242
Chapitre 11 : Gestion des mod&egrave;les
Cr&eacute;ation de r&eacute;gions modifiables
Il est possible de cr&eacute;er des r&eacute;gions modifiables dans un mod&egrave;le pour d&eacute;finir les zones qui pourront
&ecirc;tre modifi&eacute;es dans les pages bas&eacute;es sur ce mod&egrave;le.
Rubriques connexes
• Types de r&eacute;gions de mod&egrave;le, page 226
Insertion d’une r&eacute;gion modifiable
Avant d’ins&eacute;rer une r&eacute;gion modifiable, il est conseill&eacute; d’enregistrer le document actif comme
mod&egrave;le (voir Cr&eacute;ation d’un mod&egrave;le Dreamweaver, page 238).
Remarque : Si vous ins&eacute;rez une r&eacute;gion modifiable non pas dans un fichier de mod&egrave;le mais dans un
document, Dreamweaver vous informe que le document sera automatiquement enregistr&eacute; comme
mod&egrave;le.
Vous pouvez placer une r&eacute;gion modifiable n’importe o&ugrave; sur votre page. Toutefois, tenez compte
des informations suivantes si vous rendez possible la modification d’un tableau ou d’un calque :
• Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle comme
•
modifiable, mais vous ne pouvez pas marquer plusieurs cellules d’un tableau comme une seule
et m&ecirc;me r&eacute;gion modifiable. Si une balise &lt;td&gt; est s&eacute;lectionn&eacute;e, la r&eacute;gion modifiable comprend
la r&eacute;gion situ&eacute;e autour de la cellule. Dans le cas contraire, la r&eacute;gion modifiable concerne
uniquement le contenu de la cellule.
Les calques et leur contenu sont deux &eacute;l&eacute;ments distincts. Rendre un calque modifiable permet
de changer la position du calque et son contenu, alors que rendre le contenu d’un calque
modifiable permet uniquement de modifier le contenu du calque, et non sa position.
Pour ins&eacute;rer une r&eacute;gion de mod&egrave;le modifiable :
1 Dans la fen&ecirc;tre de document, proc&eacute;dez de l’une des mani&egrave;res suivantes pour s&eacute;lectionner la
r&eacute;gion.
■ S&eacute;lectionnez le texte ou le contenu que vous souhaitez d&eacute;finir comme r&eacute;gion modifiable.
■ Placez le point d’insertion &agrave; l’endroit o&ugrave; vous voulez ins&eacute;rer une r&eacute;gion modifiable.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour ins&eacute;rer une r&eacute;gion modifiable :
■ Choisissez Insertion &gt; Objets de mod&egrave;le &gt; R&eacute;gion modifiable.
■ Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Mod&egrave;les &gt; Nouvelle r&eacute;gion modifiable.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Mod&egrave;les, puis
choisissez R&eacute;gion modifiable.
La bo&icirc;te de dialogue Nouvelle r&eacute;gion modifiable s’affiche.
3 Dans la zone de texte Nom, tapez un nom unique pour la r&eacute;gion (vous ne pouvez pas utiliser le
m&ecirc;me nom pour plusieurs r&eacute;gions modifiables dans un mod&egrave;le donn&eacute;).
Remarque : Ne tapez pas de caract&egrave;res sp&eacute;ciaux dans la zone de texte Nom.
4 Cliquez sur OK.
Cr&eacute;ation de r&eacute;gions modifiables
243
La r&eacute;gion modifiable est entour&eacute;e d’un cadre rectangulaire dans le mod&egrave;le, de la couleur de
surbrillance d&eacute;finie dans les pr&eacute;f&eacute;rences. Dans le coin sup&eacute;rieur gauche de la r&eacute;gion, un onglet
indique le nom de la r&eacute;gion. Si vous ins&eacute;rez une r&eacute;gion modifiable vide dans le document, son
nom s’affiche &eacute;galement dans le cadre qui la d&eacute;limite.
Remarque : Pour plus d’informations sur les options de mise en surbrillance du contenu d’un
mod&egrave;le, voir D&eacute;finition des pr&eacute;f&eacute;rences de surbrillance pour des r&eacute;gions de mod&egrave;le, page 240.
Rubriques connexes
• Suppression d’une r&eacute;gion modifiable, page 244
• Modification du nom d’une r&eacute;gion modifiable, page 245
S&eacute;lection de r&eacute;gions modifiables
Vous pouvez facilement identifier et s&eacute;lectionner les diff&eacute;rentes r&eacute;gions pr&eacute;sentes dans un mod&egrave;le
et dans un document bas&eacute; sur un mod&egrave;le.
Pour s&eacute;lectionner une r&eacute;gion modifiable dans la fen&ecirc;tre de document :
• Cliquez sur l’onglet situ&eacute; dans le coin sup&eacute;rieur gauche de la r&eacute;gion modifiable.
Pour rechercher une r&eacute;gion modifiable et la s&eacute;lectionner dans le document :
• Choisissez Modifier &gt; Mod&egrave;les, puis le nom de la r&eacute;gion dans la liste figurant en bas de ce sousmenu.
Remarque : Les r&eacute;gions modifiables situ&eacute;es &agrave; l’int&eacute;rieur d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e ne sont pas
r&eacute;pertori&eacute;es dans le menu. Pour localiser ces r&eacute;gions, vous devez rechercher les cadres &agrave; onglet
qui figurent dans la fen&ecirc;tre de document.
La r&eacute;gion modifiable est s&eacute;lectionn&eacute;e dans le document.
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences de surbrillance pour des r&eacute;gions de mod&egrave;le, page 240
• Insertion d’une r&eacute;gion modifiable, page 243
• Modification du nom d’une r&eacute;gion modifiable, page 245
Suppression d’une r&eacute;gion modifiable
Si vous avez marqu&eacute; une r&eacute;gion de votre fichier de mod&egrave;le comme &eacute;tant modifiable, vous pouvez
la verrouiller (pour la rendre non modifiable dans les documents bas&eacute;s sur le mod&egrave;le) &agrave; l’aide de la
commande Supprimer le marqueur de mod&egrave;le.
Pour supprimer une r&eacute;gion modifiable :
1 Cliquez sur l’onglet situ&eacute; dans le coin sup&eacute;rieur gauche de la r&eacute;gion modifiable pour la
s&eacute;lectionner.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Modifier &gt; Mod&egrave;les &gt; Supprimer le marqueur de mod&egrave;le.
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Mod&egrave;les &gt; Supprimer le marqueur de mod&egrave;le.
La r&eacute;gion n’est alors plus modifiable.
■
■
244
Chapitre 11 : Gestion des mod&egrave;les
Rubriques connexes
• Insertion d’une r&eacute;gion modifiable, page 243
Modification du nom d’une r&eacute;gion modifiable
Apr&egrave;s avoir ins&eacute;r&eacute; une r&eacute;gion modifiable, vous pouvez en modifier le nom.
Pour modifier le nom d’une r&eacute;gion modifiable :
1 Cliquez sur l’onglet situ&eacute; dans le coin sup&eacute;rieur gauche de la r&eacute;gion modifiable pour la
s&eacute;lectionner.
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), tapez un nouveau nom.
3 Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Dreamweaver applique le nouveau nom &agrave; la r&eacute;gion modifiable.
Rubriques connexes
• Insertion d’une r&eacute;gion modifiable, page 243
Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es
Une r&eacute;gion r&eacute;p&eacute;t&eacute;e est une section d’un mod&egrave;le qui peut &ecirc;tre reproduite autant de fois qu’on le
souhaite dans les pages bas&eacute;es sur ce mod&egrave;le. On utilise g&eacute;n&eacute;ralement les r&eacute;gions r&eacute;p&eacute;t&eacute;es dans le
cas de tableaux. Toutefois, il est possible de d&eacute;finir des r&eacute;gions r&eacute;p&eacute;t&eacute;es pour d’autres &eacute;l&eacute;ments de
page.
Les r&eacute;gions r&eacute;p&eacute;t&eacute;es permettent de d&eacute;finir la mise en page au moyen de la r&eacute;p&eacute;tition de certains
&eacute;l&eacute;ments (article de catalogue et description, par exemple) ou de lignes, par exemple dans le cas
d’une liste d’&eacute;l&eacute;ments.
Il existe deux objets de mod&egrave;le de r&eacute;gion r&eacute;p&eacute;t&eacute;e : r&eacute;gion r&eacute;p&eacute;t&eacute;e et tableau r&eacute;p&eacute;t&eacute;.
Rubriques connexes
• Types de r&eacute;gions de mod&egrave;le, page 226
Cr&eacute;ation d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e dans un mod&egrave;le
La r&eacute;p&eacute;tition de r&eacute;gions permet de copier une r&eacute;gion sp&eacute;cifique autant de fois que n&eacute;cessaire dans
un mod&egrave;le. Une r&eacute;gion r&eacute;p&eacute;t&eacute;e n’est pas modifiable.
Pour rendre modifiable le contenu d’une r&eacute;gion r&eacute;p&eacute;t&eacute;e (par exemple pour autoriser un utilisateur
&agrave; taper du texte dans une cellule de tableau dans un document bas&eacute; sur un mod&egrave;le), vous devez
ins&eacute;rer une r&eacute;gion modifiable dans la r&eacute;gion r&eacute;p&eacute;t&eacute;e (voir Insertion d’une r&eacute;gion modifiable,
page 243).
Pour plus d’informations sur la cr&eacute;ation de tableaux r&eacute;p&eacute;t&eacute;s modifiables, voir Insertion d’un
tableau r&eacute;p&eacute;t&eacute;, page 246.
Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es
245
Pour ins&eacute;rer une r&eacute;gion r&eacute;p&eacute;t&eacute;e dans un mod&egrave;le :
1 Dans la fen&ecirc;tre Document, proc&eacute;dez de l’une des mani&egrave;res suivantes :
S&eacute;lectionnez le texte ou le contenu que vous souhaitez d&eacute;finir comme r&eacute;gion r&eacute;p&eacute;t&eacute;e.
■ Placez le point d’insertion dans le document &agrave; l’endroit o&ugrave; vous souhaitez ins&eacute;rer la r&eacute;gion
r&eacute;p&eacute;t&eacute;e.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour cr&eacute;er une r&eacute;gion r&eacute;p&eacute;t&eacute;e :
■ Choisissez Insertion &gt; Objets de mod&egrave;le &gt; R&eacute;gion r&eacute;p&eacute;t&eacute;e.
■ Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Mod&egrave;les &gt; Nouvelle r&eacute;gion r&eacute;p&eacute;t&eacute;e.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Mod&egrave;les, puis
choisissez R&eacute;gion r&eacute;p&eacute;t&eacute;e.
■
La bo&icirc;te de dialogue Nouvelle r&eacute;gion r&eacute;p&eacute;t&eacute;e s’affiche.
3 Dans la zone de texte Nom, tapez un nom unique pour la r&eacute;gion de mod&egrave;le (vous ne pouvez
pas utiliser le m&ecirc;me nom pour plusieurs r&eacute;gions r&eacute;p&eacute;t&eacute;es dans un mod&egrave;le donn&eacute;).
Remarque : N’ins&eacute;rez pas de caract&egrave;res sp&eacute;ciaux dans un nom de r&eacute;gion.
4 Cliquez sur OK.
La r&eacute;gion r&eacute;p&eacute;t&eacute;e est ins&eacute;r&eacute;e dans le mod&egrave;le.
Remarque : Une r&eacute;gion r&eacute;p&eacute;t&eacute;e ne peut pas &ecirc;tre modifi&eacute;e dans un document bas&eacute; sur un mod&egrave;le
si elle ne contient pas de r&eacute;gion modifiable. Pour plus d’informations sur l’insertion d’une r&eacute;gion
modifiable, voir Insertion d’une r&eacute;gion modifiable, page 243.
Insertion d’un tableau r&eacute;p&eacute;t&eacute;
Vous pouvez cr&eacute;er une r&eacute;gion modifiable (sous forme de tableau) &agrave; lignes r&eacute;p&eacute;t&eacute;es &agrave; l’aide d’un
tableau r&eacute;p&eacute;t&eacute;. Vous pouvez d&eacute;finir des attributs de tableau et indiquer les cellules du tableau
pouvant &ecirc;tre modifi&eacute;es.
Pour ins&eacute;rer un tableau r&eacute;p&eacute;t&eacute; :
1 Placez le point d’insertion dans la fen&ecirc;tre de document &agrave; l’endroit o&ugrave; vous souhaitez ins&eacute;rer le
tableau r&eacute;p&eacute;t&eacute;.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Choisissez Insertion &gt; Objets de mod&egrave;le &gt; Tableau r&eacute;p&eacute;t&eacute;.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Mod&egrave;les, puis
choisissez Tableau r&eacute;p&eacute;t&eacute;.
246
Chapitre 11 : Gestion des mod&egrave;les
La bo&icirc;te de dialogue Ins&eacute;rer un tableau r&eacute;p&eacute;t&eacute; s’affiche.
3 Sp&eacute;cifiez les nouvelles valeurs de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Le tableau r&eacute;p&eacute;t&eacute; s’affiche dans le mod&egrave;le.
D&eacute;finition d’une couleur d’arri&egrave;re-plan altern&eacute;e dans un tableau r&eacute;p&eacute;t&eacute;
Apr&egrave;s avoir ins&eacute;r&eacute; un tableau r&eacute;p&eacute;t&eacute; dans un mod&egrave;le (voir Insertion d’un tableau r&eacute;p&eacute;t&eacute;, page 246),
vous pouvez le personnaliser en alternant la couleur d’arri&egrave;re-plan des lignes du tableau.
Pour faire alterner la couleur d’arri&egrave;re-plan des lignes d’un tableau :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez une ligne du tableau r&eacute;p&eacute;t&eacute;.
2 Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Cr&eacute;ation de la barre
d’outils du document pour acc&eacute;der au code de la ligne s&eacute;lectionn&eacute;e.
3 En mode Code, modifiez la balise &lt;tr&gt; pour qu’elle se pr&eacute;sente de la fa&ccedil;on suivante :
&lt;tr bgcolor=&quot;@@(_index &amp; 1) ? ’#FFFFFF’ : ’#CCCCCC’@@&quot;&gt;
Vous pouvez modifier les valeurs hexad&eacute;cimales #FFFFFF et #CCCCCC si vous souhaitez utiliser
d’autres couleurs.
4 Enregistrez le mod&egrave;le.
Exemple de code correspondant &agrave; un tableau dont la couleur d’arri&egrave;re-plan des lignes est altern&eacute;e :
&lt;table width=&quot;75%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Phone Number&lt;/th&gt;&lt;th&gt;Email Address&lt;/th&gt;&lt;/tr&gt;
&lt;!-- TemplateBeginRepeat name=&quot;contacts&quot; --&gt;
&lt;tr bgcolor=&quot;@@(_index &amp; 1) ? ’#FFFFFF’ : ’#CCCCCC’ @@&quot;&gt;
&lt;td&gt; &lt;!-- TemplateBeginEditable name=&quot;name&quot; --&gt; name &lt;!-TemplateEndEditable --&gt;
&lt;/td&gt;
&lt;td&gt; &lt;!-- TemplateBeginEditable name=&quot;phone&quot; --&gt; phone &lt;!-TemplateEndEditable --&gt;
&lt;/td&gt;
&lt;td&gt; &lt;!-- TemplateBeginEditable name=&quot;email&quot; --&gt; email &lt;!-TemplateEndEditable --&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- TemplateEndRepeat --&gt;
&lt;/table&gt;
Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es
247
Utilisation des r&eacute;gions facultatives
Une r&eacute;gion facultative est une r&eacute;gion de mod&egrave;le que les utilisateurs peuvent programmer pour
qu’elle s’affiche ou reste masqu&eacute;e dans les documents bas&eacute;s sur ce mod&egrave;le. Utilisez une r&eacute;gion
facultative si vous souhaitez d&eacute;finir les conditions suivant lesquelles certains &eacute;l&eacute;ments d’un
document doivent s’afficher.
Lorsque vous ins&eacute;rez une r&eacute;gion facultative, vous pouvez associer des valeurs sp&eacute;cifiques &agrave; un
param&egrave;tre de mod&egrave;le ou bien d&eacute;finir des instructions conditionnelles dans un mod&egrave;le. Vous
pouvez modifier la r&eacute;gion facultative ult&eacute;rieurement si n&eacute;cessaire. Suivant les conditions d&eacute;finies,
l’utilisateur du mod&egrave;le peut modifier les param&egrave;tres dans les documents qu’il cr&eacute;e &agrave; partir du
mod&egrave;le et d&eacute;cider si la r&eacute;gion facultative doit s’afficher ou non (voir Modification des propri&eacute;t&eacute;s du
mod&egrave;le, page 259).
Rubriques connexes
• Types de r&eacute;gions de mod&egrave;le, page 226
Insertion d’une r&eacute;gion facultative
Une r&eacute;gion facultative permet de d&eacute;cider si des &eacute;l&eacute;ments doivent s’afficher ou &ecirc;tre masqu&eacute;s dans
les documents bas&eacute;s sur le mod&egrave;le. Il existe deux types d’objets de r&eacute;gions facultatives :
• Une r&eacute;gion facultative permet &agrave; l’utilisateur du mod&egrave;le d’afficher ou de masquer des r&eacute;gions
•
sp&eacute;cialement marqu&eacute;es sans devoir les activer pour en modifier le contenu.
L’onglet d’une r&eacute;gion facultative est pr&eacute;c&eacute;d&eacute; du mot if dans un mod&egrave;le. Suivant la condition
d&eacute;finie dans le mod&egrave;le, l’utilisateur du mod&egrave;le peut d&eacute;cider si la r&eacute;gion doit appara&icirc;tre dans les
pages qu’il cr&eacute;e.
Une r&eacute;gion facultative modifiable permet &agrave; l’utilisateur du mod&egrave;le de d&eacute;cider si elle doit &ecirc;tre
affich&eacute;e ou masqu&eacute;e et d’en modifier le contenu.
Par exemple, si la r&eacute;gion facultative comprend une image ou du texte, l’utilisateur du mod&egrave;le
peut d&eacute;cider si le contenu doit s’afficher et peut y apporter des modifications si n&eacute;cessaire. Une
r&eacute;gion modifiable est contr&ocirc;l&eacute;e par une instruction conditionnelle.
Remarque : Pour d&eacute;terminer si les r&eacute;gions facultatives doivent &ecirc;tre affich&eacute;es ou masqu&eacute;es dans les
documents bas&eacute;s sur un mod&egrave;le, voir Modification des propri&eacute;t&eacute;s du mod&egrave;le, page 259.
Pour ins&eacute;rer une r&eacute;gion facultative :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez l’&eacute;l&eacute;ment que vous souhaitez d&eacute;finir comme r&eacute;gion
facultative.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Choisissez Insertion &gt; Objets de mod&egrave;le &gt; R&eacute;gion facultative.
■ Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh) sur le contenu s&eacute;lectionn&eacute;, puis choisissez Mod&egrave;les &gt; Nouvelle r&eacute;gion
facultative.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Mod&egrave;les, puis
choisissez R&eacute;gion facultative.
La bo&icirc;te de dialogue R&eacute;gion facultative s’affiche.
3 D&eacute;finissez les options de la r&eacute;gion facultative.
248
Chapitre 11 : Gestion des mod&egrave;les
Pour plus d’informations sur la d&eacute;finition d’une r&eacute;gion facultative, cliquez sur le bouton Aide
de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Pour ins&eacute;rer une r&eacute;gion facultative modifiable :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion l&agrave; o&ugrave; vous voulez ins&eacute;rer la r&eacute;gion
facultative.
Conseil : Il est impossible d’envelopper une s&eacute;lection pour cr&eacute;er une r&eacute;gion facultative modifiable.
Ins&eacute;rez la r&eacute;gion puis ins&eacute;rez le contenu dans la r&eacute;gion.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour ouvrir la bo&icirc;te de dialogue R&eacute;gion optionnelle :
■
■
Choisissez Insertion &gt; Objets de mod&egrave;le &gt; R&eacute;gion facultative modifiable.
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Mod&egrave;les, puis
choisissez R&eacute;gion facultative modifiable.
La bo&icirc;te de dialogue R&eacute;gion facultative s’affiche.
3 Tapez un nom pour la r&eacute;gion facultative, puis cliquez sur l’onglet Avanc&eacute; si vous souhaitez
d&eacute;finir d’autres options.
Pour plus d’informations sur la d&eacute;finition d’une r&eacute;gion facultative, cliquez sur le bouton Aide
de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Modification d’une r&eacute;gion facultative
Il est possible de modifier les param&egrave;tres d’une r&eacute;gion facultative ins&eacute;r&eacute;e dans un mod&egrave;le. Par
exemple, vous pouvez indiquer si le contenu doit ou non s’afficher par d&eacute;faut, lier un param&egrave;tre &agrave;
une r&eacute;gion facultative existante ou modifier une expression de mod&egrave;le.
Remarque : Pour d&eacute;terminer si les r&eacute;gions facultatives doivent &ecirc;tre affich&eacute;es ou masqu&eacute;es dans les
documents bas&eacute;s sur un mod&egrave;le, voir Modification des propri&eacute;t&eacute;s du mod&egrave;le, page 259.
Pour acc&eacute;der &agrave; la bo&icirc;te de dialogue R&eacute;gion optionnelle :
1 Dans la fen&ecirc;tre Document, proc&eacute;dez de l’une des mani&egrave;res suivantes :
En mode Cr&eacute;ation, cliquez sur l’onglet correspondant &agrave; la r&eacute;gion facultative que vous
souhaitez modifier.
■ En mode Cr&eacute;ation, placez le point d’insertion dans la r&eacute;gion du mod&egrave;le, puis, dans le
s&eacute;lecteur de balises situ&eacute; en bas de la fen&ecirc;tre de document, s&eacute;lectionnez la balise de mod&egrave;le
&lt;mmtemplate:if&gt;.
■ En mode Code, cliquez sur la balise de commentaire de la r&eacute;gion que vous souhaitez
modifier.
2 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur le bouton Modifier.
La bo&icirc;te de dialogue R&eacute;gion facultative s’affiche.
3 Apportez les modifications de votre choix.
Pour plus d’informations sur l’option de la bo&icirc;te de dialogue, cliquez sur le bouton Aide de la
bo&icirc;te de dialogue.
4 Cliquez sur OK.
■
Utilisation des r&eacute;gions facultatives
249
D&eacute;finition d’attributs de balise modifiables
Vous pouvez permettre aux utilisateurs d’un mod&egrave;le de modifier des attributs de balise sp&eacute;cifiques
dans les documents cr&eacute;&eacute;s &agrave; partir de ce mod&egrave;le.
Vous pouvez par exemple appliquer une couleur d’arri&egrave;re-plan au mod&egrave;le tout en permettant aux
utilisateurs du mod&egrave;le d’appliquer une couleur d’arri&egrave;re-plan diff&eacute;rente aux pages qu’ils cr&eacute;ent.
Les utilisateurs peuvent mettre &agrave; jour uniquement les attributs que vous d&eacute;finissez comme &eacute;tant
modifiables.
Remarque : Pour modifier des attributs de balise modifiables dans des documents bas&eacute;s sur un
mod&egrave;le, voir Modification des propri&eacute;t&eacute;s du mod&egrave;le, page 259.
Rubriques connexes
• Types de r&eacute;gions de mod&egrave;le, page 226
D&eacute;finition d’attributs de balise modifiables dans un mod&egrave;le
Vous pouvez d&eacute;finir plusieurs attributs modifiables sur une page afin que les utilisateurs du
mod&egrave;le puissent modifier les attributs dans les documents bas&eacute;s sur ce mod&egrave;le. Les types de
donn&eacute;es suivants sont pris en charge : texte, valeur bool&eacute;enne (true/false), couleur et URL.
Pour d&eacute;finir un attribut de balise modifiable :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez l’&eacute;l&eacute;ment pour lequel vous souhaitez d&eacute;finir un
attribut de balise modifiable.
2 S&eacute;lectionnez Modifier &gt; Mod&egrave;les &gt; Rendre l’attribut modifiable.
La bo&icirc;te de dialogue Attributs de balise modifiables s’affiche.
3 Compl&eacute;tez la bo&icirc;te de dialogue pour chaque attribut que vous souhaitez rendre modifiable.
Pour plus d’informations sur la fa&ccedil;on de compl&eacute;ter la bo&icirc;te de dialogue, cliquez sur le bouton
Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Lorsque vous cr&eacute;ez un attribut de balise modifiable, un param&egrave;tre de mod&egrave;le est ins&eacute;r&eacute; dans le
code. L’attribut re&ccedil;oit une valeur initiale dans le mod&egrave;le. Tous les documents cr&eacute;&eacute;s &agrave; partir du
mod&egrave;le h&eacute;ritent de ce param&egrave;tre. L’utilisateur du mod&egrave;le peut alors modifier le param&egrave;tre dans
le document bas&eacute; sur le mod&egrave;le (voir Modification des propri&eacute;t&eacute;s du mod&egrave;le, page 259).
Conversion d’un attribut de balise modifiable en attribut non modifiable
Une balise marqu&eacute;e comme modifiable peut &ecirc;tre marqu&eacute;e comme non modifiable.
Pour red&eacute;finir un attribut de balise modifiable :
1 Dans le mod&egrave;le, cliquez sur l’&eacute;l&eacute;ment associ&eacute; &agrave; l’attribut modifiable, ou bien s&eacute;lectionnez la
balise au moyen du s&eacute;lecteur de balises.
2 S&eacute;lectionnez Modifier &gt; Mod&egrave;les &gt; Rendre l’attribut modifiable.
La bo&icirc;te de dialogue Attributs de balise modifiables s’affiche.
3 Dans le menu d&eacute;roulant Attributs, s&eacute;lectionnez l’attribut souhait&eacute;.
4 D&eacute;cochez la case Rendre l’attribut modifiable.
5 Cliquez sur OK.
6 Mettez &agrave; jour les documents bas&eacute;s sur le mod&egrave;le.
250
Chapitre 11 : Gestion des mod&egrave;les
Rubriques connexes
• D&eacute;finition d’attributs de balise modifiables dans un mod&egrave;le, page 250
Cr&eacute;ation d’un mod&egrave;le imbriqu&eacute;
Les mod&egrave;les imbriqu&eacute;s permettent de cr&eacute;er des variantes du mod&egrave;le de base. Pour cr&eacute;er un mod&egrave;le
imbriqu&eacute;, enregistrez un document bas&eacute; sur un mod&egrave;le, puis enregistrez ce document comme
nouveau mod&egrave;le. Vous pouvez cr&eacute;er une s&eacute;rie de mod&egrave;les imbriqu&eacute;s en cha&icirc;ne pour obtenir une
mise en forme chaque fois plus pr&eacute;cise. Pour plus d’informations, voir Mod&egrave;les imbriqu&eacute;s,
page 233.
Par d&eacute;faut, toutes les r&eacute;gions modifiables du mod&egrave;le de base sont transmises, via le mod&egrave;le
imbriqu&eacute;, aux documents bas&eacute;s sur ce mod&egrave;le imbriqu&eacute;. En d’autres termes, si vous d&eacute;finissez une
r&eacute;gion modifiable dans un mod&egrave;le de base, puis que vous cr&eacute;ez un mod&egrave;le imbriqu&eacute;, la r&eacute;gion
modifiable appara&icirc;tra dans les documents bas&eacute;s sur le mod&egrave;le imbriqu&eacute;, &agrave; condition que vous
n’ayez ins&eacute;r&eacute; aucune nouvelle r&eacute;gion de mod&egrave;le dans cette r&eacute;gion du mod&egrave;le imbriqu&eacute;.
Dans les mod&egrave;les imbriqu&eacute;s, les r&eacute;gions modifiables qui seront transmises aux documents sont
entour&eacute;es d’un cadre bleu. Vous pouvez ins&eacute;rer un marqueur de mod&egrave;le &agrave; l’int&eacute;rieur d’une r&eacute;gion
modifiable afin qu’elle ne soit pas modifiable dans les documents bas&eacute;s sur le mod&egrave;le imbriqu&eacute;.
Ces r&eacute;gions ont un cadre orange au lieu de bleu.
Pour cr&eacute;er un mod&egrave;le imbriqu&eacute; :
1 Cr&eacute;ez un document &agrave; partir du mod&egrave;le sur lequel vous souhaitez baser le mod&egrave;le imbriqu&eacute; :
Dans la cat&eacute;gorie Mod&egrave;les du panneau Actifs, cliquez du bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le mod&egrave;le &agrave; partir
duquel vous souhaitez cr&eacute;er un document, puis choisissez Nouveau &agrave; partir d’un mod&egrave;le
dans le menu contextuel.
■ Choisissez Fichier &gt; Nouveau. Dans la bo&icirc;te de dialogue Nouveau document, cliquez sur
l’onglet Mod&egrave;les, puis s&eacute;lectionnez le site qui contient le mod&egrave;le que vous souhaitez utiliser.
Dans la liste de documents, double-cliquez sur le mod&egrave;le pour cr&eacute;er un document.
Un nouveau document s’affiche dans la fen&ecirc;tre de document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour enregistrer le nouveau document comme mod&egrave;le
imbriqu&eacute; :
■ Choisissez Fichier &gt; Enregistrer comme mod&egrave;le.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che du bouton Mod&egrave;les, puis
choisissez Cr&eacute;er un mod&egrave;le imbriqu&eacute;.
■
La bo&icirc;te de dialogue Enregistrer comme mod&egrave;le s’affiche.
3 Tapez un nom dans la zone de texte Enregistrer sous, puis cliquez sur OK.
Lorsque vous cr&eacute;ez un document &agrave; partir d’un mod&egrave;le imbriqu&eacute;, vous pouvez modifier et enrichir
le contenu des r&eacute;gions modifiables h&eacute;rit&eacute;es du mod&egrave;le de base et des r&eacute;gions modifiables cr&eacute;&eacute;es
dans le nouveau mod&egrave;le.
Cr&eacute;ation d’un mod&egrave;le imbriqu&eacute;
251
Pour qu’une r&eacute;gion modifiable d’un mod&egrave;le imbriqu&eacute; devienne non modifiable dans les
documents bas&eacute;s sur ce mod&egrave;le :
1 En mode Code, localisez la r&eacute;gion modifiable que vous souhaitez rendre non modifiable dans
les documents bas&eacute;s sur ce mod&egrave;le.
Les r&eacute;gions modifiables sont d&eacute;finies par les balises de commentaire du mod&egrave;le.
2 Entourez la r&eacute;gion modifiable (y compris les balises de commentaire) des marqueurs suivants :
@@&quot; &quot;@@
Modification et mise &agrave; jour des mod&egrave;les
Lorsque vous apportez des modifications &agrave; un mod&egrave;le et que vous l’enregistrez, Dreamweaver met
automatiquement &agrave; jour tous les documents joints &agrave; ce mod&egrave;le. Vous pouvez aussi manuellement
mettre &agrave; jour les documents bas&eacute;s sur un mod&egrave;le, si n&eacute;cessaire.
Remarque : Pour modifier un mod&egrave;le pour un site Contribute, vous devez utiliser Dreamweaver. Il est
impossible de modifier des mod&egrave;les dans Contribute.
Dreamweaver v&eacute;rifie automatiquement la syntaxe d’un mod&egrave;le lorsque vous l’enregistrez. V&eacute;rifiez
aussi la syntaxe du mod&egrave;le lorsque vous le modifiez, si d&eacute;sir&eacute;.
Remarque : Pour plus d’informations sur la modification de documents bas&eacute;s sur un mod&egrave;le, voir
Modification du contenu d’un document bas&eacute; sur un mod&egrave;le, page 259.
Ouverture d’un mod&egrave;le &agrave; modifier
Vous pouvez ouvrir un fichier de mod&egrave;le directement pour le modifier ou bien ouvrir un
document bas&eacute; sur un mod&egrave;le, puis ouvrir le mod&egrave;le joint pour le modifier.
Lorsque vous apportez des modifications &agrave; un mod&egrave;le, Dreamweaver vous invite &agrave; mettre &agrave; jour
les documents bas&eacute;s sur ce mod&egrave;le.
Remarque : Vous pouvez aussi manuellement mettre &agrave; jour les documents selon les modifications
apport&eacute;es au mod&egrave;le, si n&eacute;cessaire (voir Mise &agrave; jour manuelle des documents bas&eacute;s sur un mod&egrave;le,
page 253).
Pour ouvrir et modifier un fichier de mod&egrave;le :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), choisissez la cat&eacute;gorie Mod&egrave;les sur le c&ocirc;t&eacute; gauche du
panneau.
Le panneau Actifs contient tous les mod&egrave;les disponibles pour votre site et affiche un aper&ccedil;u du
mod&egrave;le s&eacute;lectionn&eacute;.
2 Dans la liste des mod&egrave;les disponibles, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Double-cliquez sur le nom du mod&egrave;le &agrave; modifier.
■ S&eacute;lectionnez un mod&egrave;le &agrave; modifier, puis cliquez sur le bouton Modifier en bas du panneau
Actifs.
Le mod&egrave;le s’ouvre dans la fen&ecirc;tre de document.
3 Apportez les modifications souhait&eacute;es au contenu du mod&egrave;le.
Conseil : Pour modifier les propri&eacute;t&eacute;s de page du mod&egrave;le, choisissez Modifier &gt; Propri&eacute;t&eacute;s de la
page (les documents bas&eacute;s sur un mod&egrave;le h&eacute;ritent des propri&eacute;t&eacute;s de page associ&eacute;es &agrave; ce dernier).
4 Enregistrez le mod&egrave;le.
Un message s’affiche, vous invitant &agrave; mettre &agrave; jour les pages bas&eacute;es sur le mod&egrave;le.
252
Chapitre 11 : Gestion des mod&egrave;les
5 Cliquez sur Mettre &agrave; jour pour mettre &agrave; jour tous les documents bas&eacute;s sur le mod&egrave;le modifi&eacute; ;
cliquez sur Ne pas mettre &agrave; jour si vous ne souhaitez pas mettre &agrave; jour les documents bas&eacute;s sur
le mod&egrave;le modifi&eacute;.
Dreamweaver affiche un journal indiquant les fichiers mis &agrave; jour.
Pour ouvrir et modifier le mod&egrave;le joint au document en cours :
1 Ouvrez le document bas&eacute; sur le mod&egrave;le dans la fen&ecirc;tre de document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Modifier &gt; Mod&egrave;les &gt; Ouvrir le mod&egrave;le joint.
■ Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e
(Macintosh), puis choisissez Mod&egrave;les &gt; Ouvrir le mod&egrave;le joint.
3 Apportez les modifications souhait&eacute;es au contenu du mod&egrave;le.
■
Conseil : Pour modifier les propri&eacute;t&eacute;s de page du mod&egrave;le, choisissez Modifier &gt; Propri&eacute;t&eacute;s de la
page (les documents bas&eacute;s sur un mod&egrave;le h&eacute;ritent des propri&eacute;t&eacute;s de page associ&eacute;es &agrave; ce dernier).
4 Enregistrez le mod&egrave;le.
Un message s’affiche, vous invitant &agrave; mettre &agrave; jour les pages bas&eacute;es sur le mod&egrave;le.
5 Cliquez sur Mettre &agrave; jour pour mettre &agrave; jour tous les documents bas&eacute;s sur le mod&egrave;le modifi&eacute; ;
cliquez sur Ne pas mettre &agrave; jour si vous ne souhaitez pas mettre &agrave; jour les documents bas&eacute;s sur
le mod&egrave;le modifi&eacute;.
Dreamweaver affiche un journal indiquant les fichiers mis &agrave; jour.
Rubriques connexes
• Mise &agrave; jour de mod&egrave;les dans un site Contribute, page 254
• V&eacute;rification de la syntaxe du mod&egrave;le, page 254
Mise &agrave; jour manuelle des documents bas&eacute;s sur un mod&egrave;le
Lorsque vous modifiez un mod&egrave;le, Dreamweaver vous invite &agrave; mettre &agrave; jour les documents bas&eacute;s
sur ce mod&egrave;le, mais vous pouvez manuellement mettre &agrave; jour le document en cours ou le site tout
entier si n&eacute;cessaire. La mise &agrave; jour manuelle des documents bas&eacute;s sur le mod&egrave;le a le m&ecirc;me effet
qu’une nouvelle application du mod&egrave;le.
Pour que les modifications apport&eacute;es au mod&egrave;le soient appliqu&eacute;es au document en cours :
1 Ouvrez le document dans la fen&ecirc;tre de document.
2 Choisissez Modifier &gt; Mod&egrave;les &gt; Mettre &agrave; jour la page en cours.
Dreamweaver applique au document les modifications apport&eacute;es au mod&egrave;le.
Pour mettre &agrave; jour le site entier ou tous les documents utilisant le mod&egrave;le sp&eacute;cifi&eacute; :
1 Choisissez Modifier &gt; Mod&egrave;les &gt; Mettre &agrave; jour les pages.
La bo&icirc;te de dialogue Mettre &agrave; jour les pages s’affiche.
2 Compl&eacute;tez la bo&icirc;te de dialogue, puis cliquez sur le bouton D&eacute;marrer.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Dreamweaver met &agrave; jour les fichiers indiqu&eacute;s. Si vous avez s&eacute;lectionn&eacute; l’option Afficher le
journal, Dreamweaver affiche des informations sur les fichiers qu’il essaie de mettre &agrave; jour et
pr&eacute;cise si la mise &agrave; jour a r&eacute;ussi.
Modification et mise &agrave; jour des mod&egrave;les
253
3 Cliquez sur le bouton Fermer pour fermer la bo&icirc;te de dialogue.
Rubriques connexes
• Ouverture d’un mod&egrave;le &agrave; modifier, page 252
• V&eacute;rification de la syntaxe du mod&egrave;le, page 254
Mise &agrave; jour de mod&egrave;les dans un site Contribute
Les utilisateurs de Contribute ne peuvent pas modifier de mod&egrave;les Dreamweaver. Vous pouvez
cependant utiliser Dreamweaver pour apporter des modifications dans un mod&egrave;le de site
Contribute.
Gardez &agrave; l’esprit les points suivants lorsque vous mettez &agrave; jour des mod&egrave;les dans un site
Contribute :
• Contribute r&eacute;cup&egrave;re les nouveaux mod&egrave;les et les mod&egrave;les modifi&eacute;s depuis le site uniquement
•
au lancement de Contribute et lorsqu’un utilisateur de Contribute modifie ses informations de
connexion. Si vous apportez des modifications &agrave; un mod&egrave;le lorsqu’un utilisateur de Contribute
modifie un fichier bas&eacute; sur ce mod&egrave;le, l’utilisateur ne peut pas visualiser vos modifications tant
qu’il ne relance pas Contribute.
Si vous supprimez une r&eacute;gion modifiable d’un mod&egrave;le lorsqu’un utilisateur de Contribute est
en train de modifier une page bas&eacute;e sur ce mod&egrave;le, le contenu de cette r&eacute;gion modifiable peut
troubler cet utilisateur.
Pour modifier un mod&egrave;le dans un site Contribute :
1 Modifiez le mod&egrave;le &agrave; l’aide de Dreamweaver.
Pour plus d’informations, voir Ouverture d’un mod&egrave;le &agrave; modifier, page 252.
2 Indiquez &agrave; tous les utilisateurs de Contribute travaillant sur ce site de quitter Contribute puis
de le relancer.
V&eacute;rification de la syntaxe du mod&egrave;le
Dreamweaver v&eacute;rifie automatiquement la syntaxe du mod&egrave;le lorsque vous l’enregistrez, mais vous
pouvez la v&eacute;rifier manuellement avant d’enregistrer le mod&egrave;le. Par exemple, si vous ajoutez un
param&egrave;tre ou une expression de mod&egrave;le en mode Code, vous pouvez v&eacute;rifier que le code suit la
syntaxe correcte.
Pour v&eacute;rifier si la syntaxe d’un mod&egrave;le est correcte :
1 Ouvrez le document que vous souhaitez v&eacute;rifier dans la fen&ecirc;tre de document.
2 Choisissez Modifier &gt; Mod&egrave;les &gt; V&eacute;rifier la syntaxe du mod&egrave;le.
Un message d’erreur s’affiche lorsque cette syntaxe est incorrecte. Le message d&eacute;crit l’erreur et
indique la ligne du code &agrave; l’origine de cette erreur.
Rubriques connexes
• Syntaxe des balises du mod&egrave;le, page 230
• Expressions de mod&egrave;le, page 235
254
Chapitre 11 : Gestion des mod&egrave;les
Gestion des mod&egrave;les
G&eacute;rez les mod&egrave;les existants &agrave; l’aide de la cat&eacute;gorie Mod&egrave;les du panneau Actifs. Elle permet entre
autres de renommer ou supprimer des fichiers de mod&egrave;le.
Remarque : A l’aide du panneau Actifs, vous pouvez &eacute;galement appliquer un mod&egrave;le &agrave; un document
(voir Modification et mise &agrave; jour des mod&egrave;les, page 252) ou modifier un mod&egrave;le (voir Ouverture d’un
mod&egrave;le &agrave; modifier, page 252).
Pour renommer un mod&egrave;le dans le panneau Actifs :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), choisissez la cat&eacute;gorie Mod&egrave;les sur le c&ocirc;t&eacute; gauche du
panneau.
2 Cliquez sur le nom du mod&egrave;le pour le s&eacute;lectionner.
3 Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau
nom.
cette m&eacute;thode fonctionne de la m&ecirc;me fa&ccedil;on que celle utilis&eacute;e dans l’Explorateur Windows ou
dans le Finder (Macintosh). Comme avec l’Explorateur Windows et le Finder, vous devez
attendre un bref instant entre les deux clics. Ne double-cliquez pas sur le nom, car cela
ouvrirait le mod&egrave;le pour modification.
4 Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entr&eacute;e (Windows) ou Retour
(Macintosh) pour appliquer la modification.
Un message appara&icirc;t pour vous demander si vous voulez mettre &agrave; jour les documents cr&eacute;&eacute;s &agrave;
partir de ce mod&egrave;le.
5 Pour mettre &agrave; jour tous les documents du site cr&eacute;&eacute;s &agrave; partir de ce mod&egrave;le, cliquez sur Mettre &agrave;
jour. Pour ne mettre &agrave; jour aucun des documents cr&eacute;&eacute;s &agrave; partir de ce mod&egrave;le, cliquez sur Ne pas
mettre &agrave; jour.
Pour supprimer un fichier de mod&egrave;le :
1 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), choisissez la cat&eacute;gorie Mod&egrave;les sur le c&ocirc;t&eacute; gauche du
panneau.
2 Cliquez sur le nom du mod&egrave;le pour le s&eacute;lectionner.
3 Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l’op&eacute;ration.
Attention : Une fois que vous avez supprim&eacute; un fichier de mod&egrave;le, vous ne pouvez pas le
r&eacute;cup&eacute;rer. Le fichier de mod&egrave;le est supprim&eacute; de votre site.
Les documents cr&eacute;&eacute;s &agrave; partir de ce mod&egrave;le ne sont pas d&eacute;tach&eacute;s du mod&egrave;le. Ils conservent la
structure et les r&eacute;gions modifiables dont le fichier de mod&egrave;le disposait avant d’&ecirc;tre supprim&eacute;.
Pour convertir un document de ce type en fichier HTML normal sans r&eacute;gions modifiables ou
verrouill&eacute;es, voir D&eacute;tachement d’un document d’un mod&egrave;le, page 258.
Rubriques connexes
• Cr&eacute;ation d’un mod&egrave;le Dreamweaver, page 238
• Application ou suppression d’un mod&egrave;le depuis un document existant, page 257
• Modification et mise &agrave; jour des mod&egrave;les, page 252
Gestion des mod&egrave;les
255
Exportation et importation du contenu XML d’un mod&egrave;le
Vous pouvez imaginer qu’un document bas&eacute; sur un mod&egrave;le contient des donn&eacute;es repr&eacute;sent&eacute;es par
des paires nom/valeur. Chaque paire se compose du nom d’une r&eacute;gion modifiable et du contenu
de cette r&eacute;gion.
Dreamweaver vous permet d’exporter les paires nom/valeur dans un fichier XML pour que vous
puissiez utiliser les donn&eacute;es du document en dehors de Dreamweaver (par exemple dans un
&eacute;diteur XML, dans un &eacute;diteur de texte ou m&ecirc;me dans une application de base de donn&eacute;es).
Inversement, si vous disposez d’un document XML structur&eacute; de mani&egrave;re appropri&eacute;e, vous pouvez
importer ses donn&eacute;es dans un document bas&eacute; sur un mod&egrave;le Dreamweaver.
Pour exporter les r&eacute;gions modifiables d’un document sous XML :
1 Ouvrez un document bas&eacute; sur un mod&egrave;le qui contient des r&eacute;gions modifiables.
2 Choisissez Fichier &gt; Exporter &gt; Donn&eacute;es du mod&egrave;le en XML.
La bo&icirc;te de dialogue Exporter les donn&eacute;es du mod&egrave;le en XML s’affiche.
3 Activez l’une des options Notation :
Si le mod&egrave;le contient des r&eacute;gions r&eacute;p&eacute;t&eacute;es ou des param&egrave;tres de mod&egrave;le, choisissez Utiliser
les balises XML standard de Dreamweaver.
■ Si le mod&egrave;le ne contient ni r&eacute;gion r&eacute;p&eacute;t&eacute;e ni param&egrave;tre de mod&egrave;le, choisissez Utiliser noms
de r&eacute;gions modifiables comme balises XML.
4 Cliquez sur OK.
Une bo&icirc;te de dialogue s’affiche afin que vous puissiez enregistrer le fichier XML.
5 S&eacute;lectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton Enregistrer.
Dreamweaver g&eacute;n&egrave;re un fichier XML contenant le mat&eacute;riau des param&egrave;tres et des r&eacute;gions
modifiables du document (y compris le mat&eacute;riau des r&eacute;gions facultatives et des r&eacute;gions
modifiables situ&eacute;es &agrave; l’int&eacute;rieur de r&eacute;gions r&eacute;p&eacute;t&eacute;es). Le fichier XML comporte le nom du
mod&egrave;le original, ainsi que le nom et le contenu de chaque r&eacute;gion de mod&egrave;le.
■
Remarque : Le contenu des r&eacute;gions non modifiables n’est pas export&eacute; vers le fichier XML.
Pour importer du contenu XML :
1 Choisissez Fichier &gt; Importer &gt; XML dans le mod&egrave;le.
La bo&icirc;te de dialogue Importer XML s’affiche.
2 S&eacute;lectionnez le fichier XML, puis cliquez sur le bouton Ouvrir.
Dreamweaver cr&eacute;e un nouveau document bas&eacute; sur le mod&egrave;le sp&eacute;cifi&eacute; dans le fichier XML. Il
remplit le contenu de chaque r&eacute;gion modifiable de ce document &agrave; l’aide des donn&eacute;es du
fichier XML. Le document r&eacute;sultant appara&icirc;t dans une nouvelle fen&ecirc;tre de document.
Conseil : Si votre fichier XML n’est pas configur&eacute; exactement de la fa&ccedil;on pr&eacute;vue par Dreamweaver,
vous ne pourrez peut-&ecirc;tre pas importer vos donn&eacute;es. Une solution &agrave; ce probl&egrave;me consiste &agrave; exporter
un fichier XML fictif de Dreamweaver, de fa&ccedil;on &agrave; avoir un fichier XML ayant exactement la bonne
structure, puis &agrave; copier les donn&eacute;es de votre fichier XML original dans le fichier XML export&eacute;. Vous
obtenez ainsi un fichier XML ayant une structure correcte et contenant les donn&eacute;es appropri&eacute;es,
pr&ecirc;tes &agrave; &ecirc;tre import&eacute;es.
256
Chapitre 11 : Gestion des mod&egrave;les
Exportation d’un site sans marqueur de mod&egrave;le
Si vous souhaitez que les documents bas&eacute;s sur un mod&egrave;le ne contiennent pas de marqueur de
mod&egrave;le lorsque vous les exportez vers un autre site, utilisez la commande Exporter un site sans
marqueur de mod&egrave;le.
Pour exporter un site sans marqueur de mod&egrave;le :
1 Choisissez Modifier &gt; Mod&egrave;les &gt; Exporter sans marqueur.
La bo&icirc;te de dialogue Exporter un site sans marqueur de mod&egrave;le s’affiche.
2 S&eacute;lectionnez le dossier dans lequel exporter le site, puis activez les options d’exportation
suppl&eacute;mentaires d&eacute;sir&eacute;es.
Remarque : S&eacute;lectionnez un dossier situ&eacute; &agrave; l’ext&eacute;rieur du site courant.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Application ou suppression d’un mod&egrave;le depuis un document
existant
Lorsque vous appliquez un mod&egrave;le &agrave; un document existant, Dreamweaver relie son contenu aux
r&eacute;gions du mod&egrave;le ou vous demande de r&eacute;soudre les &eacute;l&eacute;ments non coh&eacute;rents. Vous pouvez
supprimer le mod&egrave;le par la suite pour apporter des modifications aux r&eacute;gions verrouill&eacute;es.
Application d’un mod&egrave;le &agrave; un document existant
Lorsque vous appliquez un mod&egrave;le &agrave; un document contenant d&eacute;j&agrave; des &eacute;l&eacute;ments, Dreamweaver
tente de faire concorder le contenu existant avec une r&eacute;gion du mod&egrave;le. Si le mod&egrave;le que vous
appliquez au document est une version r&eacute;vis&eacute;e de l’un des mod&egrave;les existants, il est probable que les
noms concordent.
Si vous appliquez un mod&egrave;le &agrave; un document auquel aucun mod&egrave;le n’a encore &eacute;t&eacute; appliqu&eacute;, les
r&eacute;gions modifiables ne peuvent pas &ecirc;tre compar&eacute;es et un cas de non-concordance se pr&eacute;sente.
Dreamweaver les localise et vous pouvez alors s&eacute;lectionner la r&eacute;gion ou les r&eacute;gions vers lesquelles le
contenu de la page courante doit &ecirc;tre transf&eacute;r&eacute;, ou bien d&eacute;cider de supprimer le contenu non
coh&eacute;rent.
Vous pouvez appliquer un mod&egrave;le &agrave; un document existant &agrave; l’aide du panneau Actifs ou &agrave; partir
de la fen&ecirc;tre de document. Vous pouvez annuler l’application d’un mod&egrave;le si n&eacute;cessaire.
Pour appliquer un mod&egrave;le &agrave; un document existant &agrave; l’aide du panneau Actifs :
1 Ouvrez le document auquel vous souhaitez appliquer le mod&egrave;le.
2 Dans le panneau Actifs (Fen&ecirc;tre &gt; Actifs), choisissez la cat&eacute;gorie Mod&egrave;les sur le c&ocirc;t&eacute; gauche du
panneau.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Faites glisser le mod&egrave;le que vous souhaitez appliquer du panneau Actifs dans la fen&ecirc;tre de
document.
■ S&eacute;lectionnez le mod&egrave;le que vous souhaitez appliquer, puis cliquez sur le bouton Appliquer
en bas du panneau Actifs.
Application ou suppression d’un mod&egrave;le depuis un document existant
257
Si le document comporte des &eacute;l&eacute;ments qui ne peuvent pas &ecirc;tre automatiquement attribu&eacute;s &agrave;
une r&eacute;gion de mod&egrave;le, la bo&icirc;te de dialogue Noms de r&eacute;gion incoh&eacute;rents s’affiche.
4 Le cas &eacute;ch&eacute;ant, s&eacute;lectionnez une destination pour le contenu non concordant, puis cliquez sur
OK.
Pour plus d’informations sur le transfert du contenu existant vers des r&eacute;gions modifiables, voir
R&eacute;solution des incoh&eacute;rences de noms de r&eacute;gion dans l’aide Utilisation de Dreamweaver.
Pour appliquer un mod&egrave;le &agrave; un document existant &agrave; partir de la fen&ecirc;tre de document :
1 Ouvrez le document auquel vous souhaitez appliquer le mod&egrave;le.
2 Choisissez Modifier &gt; Mod&egrave;les &gt; Appliquer le mod&egrave;le &agrave; la page.
La bo&icirc;te de dialogue S&eacute;lectionner le mod&egrave;le s’affiche.
3 S&eacute;lectionnez un mod&egrave;le dans la liste, puis cliquez sur le bouton S&eacute;lectionner.
Si le document comporte des &eacute;l&eacute;ments qui ne peuvent pas &ecirc;tre automatiquement attribu&eacute;s &agrave;
une r&eacute;gion de mod&egrave;le, la bo&icirc;te de dialogue Noms de r&eacute;gion incoh&eacute;rents s’affiche.
4 Le cas &eacute;ch&eacute;ant, s&eacute;lectionnez une destination pour le contenu non concordant, puis cliquez sur
OK.
Pour plus d’informations sur le transfert du contenu existant vers des r&eacute;gions modifiables, voir
R&eacute;solution des incoh&eacute;rences de noms de r&eacute;gion dans l’aide Utilisation de Dreamweaver.
Pour annuler les modifications apport&eacute;es &agrave; un mod&egrave;le :
• Choisissez Edition &gt; Annuler l’application du mod&egrave;le.
Le document retrouve l’&eacute;tat dans lequel il se trouvait avant l’application du mod&egrave;le.
D&eacute;tachement d’un document d’un mod&egrave;le
Pour apporter des modifications aux r&eacute;gions verrouill&eacute;es d’un document bas&eacute; sur un mod&egrave;le, vous
devez au pr&eacute;alable d&eacute;tacher le document du mod&egrave;le. Lorsqu’un document est d&eacute;tach&eacute;, toutes les
r&eacute;gions qui le composent deviennent modifiables.
Pour d&eacute;tacher un document d’un mod&egrave;le :
1 Ouvrez le document bas&eacute; sur un mod&egrave;le que vous souhaitez d&eacute;tacher.
2 Choisissez Modifier &gt; Mod&egrave;les &gt; D&eacute;tacher du mod&egrave;le.
Le document est d&eacute;tach&eacute; du mod&egrave;le et tout le code du mod&egrave;le est supprim&eacute;.
Rubriques connexes
• Application d’un mod&egrave;le &agrave; un document existant, page 257
258
Chapitre 11 : Gestion des mod&egrave;les
Modification du contenu d’un document bas&eacute; sur un mod&egrave;le
Les mod&egrave;les de Dreamweaver sp&eacute;cifient les r&eacute;gions qui sont verrouill&eacute;es (non modifiables) et les
autres qui sont modifiables dans les documents bas&eacute;s sur ces mod&egrave;les (voir A propos des mod&egrave;les
Dreamweaver, page 226).
Sur les pages bas&eacute;es sur un mod&egrave;le (voir Cr&eacute;ation d’un document bas&eacute; sur un mod&egrave;le existant,
page 77), les utilisateurs peuvent modifier uniquement le contenu des r&eacute;gions modifiables. Vous
pouvez facilement identifier et s&eacute;lectionner les r&eacute;gions modifiables afin d’en modifier le contenu
(voir S&eacute;lection de r&eacute;gions modifiables, page 244). Les utilisateurs du mod&egrave;le ne peuvent pas
modifier le contenu des r&eacute;gions verrouill&eacute;es.
Remarque : Si vous essayez de modifier une r&eacute;gion verrouill&eacute;e dans un document bas&eacute; sur un
mod&egrave;le lorsque la surbrillance est d&eacute;sactiv&eacute;e, le pointeur de la souris se transforme pour indiquer que
vous ne pouvez pas cliquer dans une r&eacute;gion modifiable.
Les utilisateurs du mod&egrave;le peuvent &eacute;galement modifier les propri&eacute;t&eacute;s et les entr&eacute;es d’une r&eacute;gion
r&eacute;p&eacute;t&eacute;e dans les documents bas&eacute;s sur ce mod&egrave;le.
Modification des propri&eacute;t&eacute;s du mod&egrave;le
Lorsque l’auteur cr&eacute;e des param&egrave;tres dans un mod&egrave;le (voir Param&egrave;tres de mod&egrave;le, page 235), les
documents bas&eacute;s sur ce mod&egrave;le h&eacute;ritent automatiquement des param&egrave;tres et de leur valeur
initiale. L’utilisateur du mod&egrave;le peut mettre &agrave; jour les attributs de balise modifiables et d’autres
param&egrave;tres du mod&egrave;le (ceux d’une r&eacute;gion facultative, par exemple).
Pour modifier un attribut de balise modifiable :
1 Ouvrez le document bas&eacute; sur un mod&egrave;le.
2 Choisissez Modifier &gt; Propri&eacute;t&eacute;s du mod&egrave;le.
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s du mod&egrave;le s’ouvre et affiche la liste des propri&eacute;t&eacute;s disponibles.
Elle indique les r&eacute;gions facultatives et les attributs de balise modifiables.
3 S&eacute;lectionnez la propri&eacute;t&eacute; dans la liste Nom.
L’&eacute;tiquette et la valeur de la propri&eacute;t&eacute; s&eacute;lectionn&eacute;e s’affichent dans la partie inf&eacute;rieure de la
bo&icirc;te de dialogue.
4 Si vous souhaitez modifier la valeur de la propri&eacute;t&eacute; dans le document courant, saisissez une autre
valeur dans le champ situ&eacute; &agrave; droite de l’&eacute;tiquette de la propri&eacute;t&eacute;.
Remarque : Le nom du champ et les valeurs modifiables sont d&eacute;finis dans le mod&egrave;le. Les attributs
non r&eacute;pertori&eacute;s dans la liste Nom ne peuvent pas &ecirc;tre modifi&eacute;s dans le document bas&eacute; sur un
mod&egrave;le.
5 Activez l’option Autoriser les mod&egrave;les imbriqu&eacute;s pour contr&ocirc;ler ceci si vous souhaitez que la
propri&eacute;t&eacute; modifiable soit transmise aux documents bas&eacute;s sur le mod&egrave;le imbriqu&eacute;.
Pour modifier les param&egrave;tres de mod&egrave;le des r&eacute;gions facultatives :
1 Ouvrez le document bas&eacute; sur un mod&egrave;le.
2 Choisissez Modifier &gt; Propri&eacute;t&eacute;s du mod&egrave;le.
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s du mod&egrave;le s’ouvre et affiche la liste des propri&eacute;t&eacute;s disponibles.
Elle indique les r&eacute;gions facultatives et les attributs de balise modifiables.
3 S&eacute;lectionnez une propri&eacute;t&eacute; dans la liste Nom.
L’&eacute;tiquette et la valeur de la propri&eacute;t&eacute; s&eacute;lectionn&eacute;e s’affichent dans la bo&icirc;te de dialogue.
Modification du contenu d’un document bas&eacute; sur un mod&egrave;le
259
4 Activez l’option Afficher si vous souhaitez que la r&eacute;gion facultative apparaisse dans le document,
ou bien d&eacute;sactivez-la si vous souhaitez qu’elle soit masqu&eacute;e.
Remarque : Le nom du champ et la valeur par d&eacute;faut sont d&eacute;finis dans le mod&egrave;le.
5 Activez l’option Autoriser les mod&egrave;les imbriqu&eacute;s pour contr&ocirc;ler ceci si vous souhaitez que la
propri&eacute;t&eacute; modifiable soit transmise aux documents bas&eacute;s sur le mod&egrave;le imbriqu&eacute;.
Rubriques connexes
• D&eacute;finition d’attributs de balise modifiables, page 250
• Utilisation des r&eacute;gions facultatives, page 248
Ajout et suppression d’entr&eacute;es et modification de l’ordre des entr&eacute;es dans une
r&eacute;gion r&eacute;p&eacute;t&eacute;e
Vous pouvez ajouter ou supprimer des entr&eacute;es ou bien modifier l’ordre des entr&eacute;es dans une
r&eacute;gion r&eacute;p&eacute;t&eacute;e. Lorsque vous ajoutez une entr&eacute;e de r&eacute;gion r&eacute;p&eacute;t&eacute;e, l’ensemble de la r&eacute;gion r&eacute;p&eacute;t&eacute;e
est reproduit dans le document. La r&eacute;gion r&eacute;p&eacute;t&eacute;e doit contenir une r&eacute;gion modifiable dans le
mod&egrave;le original pour que l’utilisateur puisse en modifier le contenu.
Pour ajouter et supprimer des entr&eacute;es et pour modifier l’ordre des entr&eacute;es dans une r&eacute;gion
r&eacute;p&eacute;t&eacute;e :
1 Placez le point d’insertion sur la r&eacute;gion r&eacute;p&eacute;t&eacute;e pour la s&eacute;lectionner.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
■
Cliquez sur le bouton plus (+) pour ajouter une entr&eacute;e de r&eacute;gion r&eacute;p&eacute;t&eacute;e sous l’entr&eacute;e
s&eacute;lectionn&eacute;e.
Cliquez sur le bouton moins (–) pour supprimer l’entr&eacute;e de r&eacute;gion r&eacute;p&eacute;t&eacute;e s&eacute;lectionn&eacute;e.
Cliquez sur le bouton Fl&egrave;che bas pour d&eacute;placer l’entr&eacute;e s&eacute;lectionn&eacute;e d’un niveau vers le bas.
Cliquez sur le bouton Fl&egrave;che haut pour d&eacute;placer l’entr&eacute;e s&eacute;lectionn&eacute;e d’un niveau vers le
haut.
Remarque : Vous pouvez &eacute;galement choisir Modifier &gt; Mod&egrave;les, puis activer l’une des options
d’entr&eacute;e r&eacute;p&eacute;t&eacute;e pr&egrave;s du bas du menu contextuel. Celui-ci permet d’ins&eacute;rer une nouvelle entr&eacute;e de
r&eacute;gion r&eacute;p&eacute;t&eacute;e et de modifier l’emplacement de l’entr&eacute;e s&eacute;lectionn&eacute;e.
260
Chapitre 11 : Gestion des mod&egrave;les
Pour couper, copier et supprimer des entr&eacute;es :
1 Placez le point d’insertion sur la r&eacute;gion r&eacute;p&eacute;t&eacute;e pour le s&eacute;lectionner.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
■
Pour couper une entr&eacute;e r&eacute;p&eacute;t&eacute;e, choisissez Edition &gt; Entr&eacute;es r&eacute;p&eacute;t&eacute;es &gt; Couper l’entr&eacute;e
r&eacute;p&eacute;t&eacute;e.
Pour copier une entr&eacute;e r&eacute;p&eacute;t&eacute;e, choisissez Edition &gt; Entr&eacute;es r&eacute;p&eacute;t&eacute;es &gt; Couper l’entr&eacute;e
r&eacute;p&eacute;t&eacute;e.
Pour supprimer une entr&eacute;e r&eacute;p&eacute;t&eacute;e, choisissez Edition &gt; Entr&eacute;es r&eacute;p&eacute;t&eacute;es &gt; Supprimer
l’entr&eacute;e r&eacute;p&eacute;t&eacute;e.
Pour coller une entr&eacute;e r&eacute;p&eacute;t&eacute;e, choisissez Edition &gt; Coller.
Remarque : Lorsque vous collez une entr&eacute;e de r&eacute;gion r&eacute;p&eacute;t&eacute;e, celle-ci s’ins&egrave;re dans le
document sans &eacute;craser d’entr&eacute;e existante.
Rubriques connexes
• Cr&eacute;ation de r&eacute;gions r&eacute;p&eacute;t&eacute;es, page 245
Modification du contenu d’un document bas&eacute; sur un mod&egrave;le
261
262
Chapitre 11 : Gestion des mod&egrave;les
Ajoutez des contenus vari&eacute;s &agrave; vos pages Web &agrave; l’aide des outils visuels de Macromedia
Dreamweaver MX 2004. Ajoutez des textes, images, couleurs, animations, sons et autres formes
de donn&eacute;es, puis mettez-les en forme. Assurez-vous de rendre vos pages accessibles aux personnes
souffrant de handicaps.
Cette partie du manuel contient les chapitres suivants :
Chapitre 12, Utilisation des pages, page 265
Chapitre 13, Insertion et mise en forme de texte, page 287
Chapitre 14, Insertion d’images, page 317
Chapitre 15, Liens et navigation, page 329
Chapitre 16, Utilisation d’autres applications, page 353
Chapitre 17, Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs, page 367
Chapitre 18, Utilisation des comportements JavaScript, page 383
PARTIE IV
PARTIE IV
Ajout de contenu aux pages
CHAPITRE 12
Utilisation des pages
Macromedia Dreamweaver MX 2004 dispose de nombreuses fonctions vous permettant de cr&eacute;er
de nouvelles pages Web en toute facilit&eacute;. Vous pouvez ainsi ais&eacute;ment d&eacute;finir de nombreuses
propri&eacute;t&eacute;s de page (titre, image et couleur d’arri&egrave;re-plan, couleur des textes et des liens, etc.). De
plus, Dreamweaver MX 2004 comporte des outils vous permettant d’optimiser les performances
de votre site Web, de cr&eacute;er et de tester vos pages pour assurer une compatibilit&eacute; totale avec
diff&eacute;rents navigateurs.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
A propos de l’utilisation des pages, page 266
Enregistrement de pages Web, page 269
Sp&eacute;cification de balises HTML au lieu de CSS, page 270
D&eacute;finition des propri&eacute;t&eacute;s de page, page 270
Utilisation des couleurs, page 273
S&eacute;lection d’&eacute;l&eacute;ments dans la fen&ecirc;tre de document, page 274
Utilisation du panneau Historique, page 276
Automatisation des t&acirc;ches, page 277
Utilisation de comportements JavaScript pour d&eacute;tecter le type et la version des navigateurs et des
plug-ins, page 282
Aper&ccedil;u et test de page dans les navigateurs, page 283
V&eacute;rification des pr&eacute;f&eacute;rences de dur&eacute;e et de la taille de t&eacute;l&eacute;chargement, page 284
265
A propos de l’utilisation des pages
Lors de la cr&eacute;ation d’une nouvelle page Web, vous devez consid&eacute;rer les navigateurs et syst&egrave;mes
d’exploitation des visiteurs qui consulteront votre site et, &eacute;ventuellement, les langues &agrave; utiliser. Les
sections suivantes vous guideront dans le choix de couleurs d&eacute;finies qui s’afficheront de mani&egrave;re
identique sur diff&eacute;rents navigateurs Web, l’encodage de divers caract&egrave;res pour certaines langues ou
encore la v&eacute;rification de la compatibilit&eacute; d’un navigateur d&eacute;fini avec votre site.
A propos de la d&eacute;finition des propri&eacute;t&eacute;s de page
Pour chaque page que vous cr&eacute;ez dans Dreamweaver, vous pouvez sp&eacute;cifier les propri&eacute;t&eacute;s de mise
en forme dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page (Modifier &gt; Propri&eacute;t&eacute;s de la page). Cette
bo&icirc;te de dialogue permet de sp&eacute;cifier la famille et la taille par d&eacute;faut de la police, la couleur
d’arri&egrave;re-plan, les marges, le style des liens ainsi que d’autres aspects de la conception de page.
Vous pouvez attribuer de nouvelles propri&eacute;t&eacute;s &agrave; chaque nouvelle page que vous cr&eacute;ez et modifier
celles des pages existantes.
Par d&eacute;faut Dreamweaver met le texte en forme &agrave; l’aide de feuilles de style en cascade (CSS). Vous
pouvez choisir d’utiliser le langage HTML pour mettre les pages en forme par le biais de la bo&icirc;te
de dialogue Pr&eacute;f&eacute;rences (Edition &gt; Pr&eacute;f&eacute;rences). Lors de l’utilisation des propri&eacute;t&eacute;s de page CSS,
Dreamweaver utilise des balises CSS pour l’ensemble des propri&eacute;t&eacute;s d&eacute;finies dans les cat&eacute;gories
Aspect, Liens et En-t&ecirc;tes de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page. Les balises CSS qui
d&eacute;finissent ces attributs sont int&eacute;gr&eacute;es dans la section head de la page.
Remarque : Les propri&eacute;t&eacute;s de page que vous choisissez ne s’appliquent qu’au document actif. Si
une page utilise une feuille de style CSS externe, Dreamweaver n’&eacute;crase pas les balises d&eacute;finies dans
la feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.
Comparaison des propri&eacute;t&eacute;s de page CSS et HTML
Par d&eacute;faut, Dreamweaver utilise les balises CSS pour attribuer les propri&eacute;t&eacute;s de page. Si vous
souhaitez utiliser des balises HTML &agrave; la place, vous devez le sp&eacute;cifier dans la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences (voir Sp&eacute;cification de balises HTML au lieu de CSS, page 270 pour plus
d’informations).
266
Chapitre 12 : Utilisation des pages
Si vous choisissez d’utiliser des balises HTML au lieu des balises CSS, l’inspecteur de propri&eacute;t&eacute;s
affiche quand m&ecirc;me le menu d&eacute;roulant Style. Cependant, les commandes de police, taille,
couleur et alignement indiquent uniquement les propri&eacute;t&eacute;s qui utilisent les balises HTML. Les
valeurs des propri&eacute;t&eacute;s CSS appliqu&eacute;es &agrave; la s&eacute;lection en cours ne sont plus visibles et le menu
d&eacute;roulant Taille est d&eacute;sactiv&eacute;.
Rubriques connexes
• Sp&eacute;cification de balises HTML au lieu de CSS, page 270
• D&eacute;finition des propri&eacute;t&eacute;s de page, page 270
A propos du panneau Historique
Le panneau Historique r&eacute;pertorie un nombre d&eacute;fini d’actions r&eacute;alis&eacute;es au sein du document actif
depuis que vous l’avez cr&eacute;&eacute; ou ouvert, mais il n’affiche pas les actions r&eacute;alis&eacute;es dans d’autres cadres,
d’autres fen&ecirc;tres de document ou dans le panneau Site. Il vous permet d’annuler une ou plusieurs
actions, de reproduire des actions et de cr&eacute;er de nouvelles commandes pour automatiser les t&acirc;ches
r&eacute;p&eacute;titives.
Etapes
Curseur (index)
Bouton
Reproduire
Bouton Enregistrer comme commande
Bouton Copier les &eacute;tapes
Lors de l’ouverture du panneau Historique, le curseur, ou index, pointe sur la derni&egrave;re action que
vous avez accomplie.
Rubriques connexes
• Utilisation du panneau Historique, page 276
A propos des couleurs s&eacute;curis&eacute;es pour le Web
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.
Des tests approfondis ont cependant r&eacute;v&eacute;l&eacute; qu’en r&eacute;alit&eacute; seules 212 couleurs sont s&eacute;curis&eacute;es pour
le Web. Sous Windows, Internet Explorer ne restitue pas correctement les couleurs #0033FF
(0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0).
A propos de l’utilisation des pages
267
Lorsque les navigateurs Web ont fait leur apparition, la plupart des ordinateurs n’affichaient que
265 couleurs (8 bits). Aujourd’hui, la plupart des ordinateurs affichent des milliers ou des
millions de couleurs (16 et 32 bits). L’utilit&eacute; de la palette adapt&eacute;e &agrave; tous les navigateurs est donc
bien moindre si vous d&eacute;veloppez votre site pour les utilisateurs de syst&egrave;mes informatiques
modernes.
La palette de couleurs s&eacute;curis&eacute;e pour le Web peut s’av&eacute;rer utile si vous cr&eacute;ez des sites pour des
appareils diff&eacute;rents, comme les organisateurs personnels et les t&eacute;l&eacute;phones mobiles. Un grand
nombre de ces appareils sont &eacute;quip&eacute;s d’un &eacute;cran noir et blanc (1 bit) ou 256 couleurs (8 bits).
Les palettes Cubes de couleur (valeur par d&eacute;faut) et Ton continu de Dreamweaver utilisent la
palette s&eacute;curis&eacute;e pour le Web de 216 couleurs ; lorsque vous s&eacute;lectionnez une couleur dans ces
palettes, c’est la valeur hexad&eacute;cimale correspondante qui s’affiche.
Pour choisir une couleur en dehors de la gamme s&eacute;curis&eacute;e pour le Web, ouvrez le nuancier du
syst&egrave;me en cliquant sur le bouton Roue chromatique en haut &agrave; droite du s&eacute;lecteur de couleurs de
Dreamweaver. Celle-ci n’est pas limit&eacute;e aux couleurs s&eacute;curis&eacute;es pour le Web.
Les versions UNIX de Netscape Navigator utilisent une palette de couleurs diff&eacute;rente de celle des
versions Windows et Macintosh. Si vous d&eacute;veloppez exclusivement pour des plates-formes UNIX
(ou si le public vis&eacute; est compos&eacute; d’utilisateurs de Windows ou de Macintosh &eacute;quip&eacute;s de moniteurs
24 bits et d’utilisateurs d’UNIX &eacute;quip&eacute;s de moniteurs 8 bits), vous pouvez utiliser des valeurs
hexad&eacute;cimales combinant les paires 00, 40, 80, BF ou FF, qui produisent des couleurs s&eacute;curis&eacute;es
pour le Web sur les ordinateurs ex&eacute;cutant SunOS.
Rubriques connexes
• Utilisation des couleurs, page 273
Description de l’encodage de document
L’encodage de document pr&eacute;cise le codage utilis&eacute; pour les caract&egrave;res dans le document. L’encodage
du document est sp&eacute;cifi&eacute; dans une balise meta, ins&eacute;r&eacute;e dans l’en-t&ecirc;te du document ; il indique au
navigateur et &agrave; Dreamweaver le mode de d&eacute;codage du document et les polices &agrave; utiliser pour
afficher le texte d&eacute;cod&eacute;.
Par exemple, si vous sp&eacute;cifiez Occidental (Latin1), la balise meta suivante est ins&eacute;r&eacute;e : &lt;meta
http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;. Le document
affich&eacute; dans Dreamweaver contient les polices que vous sp&eacute;cifiez dans Pr&eacute;f&eacute;rences de polices pour
l’encodage Occidental (Latin1) ; ce m&ecirc;me document affich&eacute; dans un navigateur contient les
polices que l’utilisateur du navigateur pr&eacute;cise pour l’encodage Occidental (Latin1).
Si vous sp&eacute;cifiez Japonais (Maj JIS), la balise meta suivante est ins&eacute;r&eacute;e : &lt;meta httpequiv=&quot;Content-Type&quot; content=&quot;text/html; charset=Shift_JIS&quot;&gt;. Le document affich&eacute;
dans Dreamweaver contient les polices que vous sp&eacute;cifiez pour les encodages du japonais ; ce
m&ecirc;me document affich&eacute; dans un navigateur contient les polices que l’utilisateur du navigateur
pr&eacute;cise pour les encodages du japonais.
Pour modifier l’encodage du document dans une page, voir D&eacute;finition des propri&eacute;t&eacute;s de page,
page 270. Pour modifier l’encodage utilis&eacute; par d&eacute;faut par Dreamweaver pour cr&eacute;er de nouveaux
documents, voir D&eacute;finition d’un nouveau type de document par d&eacute;faut, page 79. Pour modifier les
polices utilis&eacute;es dans Dreamweaver pour afficher chaque encodage, voir D&eacute;finition des pr&eacute;f&eacute;rences
de police pour l’affichage Dreamweaver, page 60.
268
Chapitre 12 : Utilisation des pages
Comparatif utilisation de commandes enregistr&eacute;es / reproduction d’&eacute;tapes
Dreamweaver permet d’enregistrer une commande temporaire &agrave; utilisation limit&eacute;e ou de
reproduire des &eacute;tapes du panneau Historique.
Lorsque vous enregistrez une commande temporaire :
• Les &eacute;tapes sont enregistr&eacute;es au fur et &agrave; mesure que vous les effectuez, vous n’avez donc pas
•
•
besoin de les s&eacute;lectionner dans le panneau Historique.
Durant la m&eacute;morisation, Dreamweaver vous emp&ecirc;che d’effectuer des actions &agrave; l’aide de la
souris lorsqu’il ne peut pas les m&eacute;moriser (par exemple un clic pour s&eacute;lectionner un objet dans
une fen&ecirc;tre ou glisser et d&eacute;poser un &eacute;l&eacute;ment sur une page).
Si vous passez dans un autre document durant une m&eacute;morisation, Dreamweaver ne m&eacute;morise
pas les actions effectu&eacute;es dans l’autre document. Pour savoir &agrave; tout moment si vous &ecirc;tes en
train de m&eacute;moriser, regardez le pointeur de la souris.
Rubriques connexes
• Automatisation des t&acirc;ches, page 277
• R&eacute;p&eacute;tition d’&eacute;tapes, page 278
• M&eacute;morisation de commandes, page 282
Enregistrement de pages Web
Vous pouvez enregistrer un document en utilisant son nom et son emplacement actuels ou
enregistrer une copie du document sous un nouveau nom, dans un autre emplacement.
Evitez tout espace ou caract&egrave;re sp&eacute;cial dans les noms de fichier ou de dossier. En particulier,
n’utilisez pas de caract&egrave;res sp&eacute;ciaux (par exemple &eacute;, &ccedil; ou &yen;) ou de signes de ponctuation (deux
points, barres obliques ou points) dans le nom des fichiers que vous avez l’intention de placer sur
un serveur distant. En effet, la plupart des serveurs transforment ces caract&egrave;res lors du transfert,
rendant ainsi inop&eacute;rants les liens vers ces fichiers. En outre, ne commencez pas le nom de fichier
par un num&eacute;ro.
Pour enregistrer un document :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Pour &eacute;craser la version pr&eacute;sente sur le disque et enregistrer toute modification effectu&eacute;e,
s&eacute;lectionnez Fichier &gt; Enregistrer.
■ Pour enregistrer le fichier dans un dossier diff&eacute;rent ou sous un autre nom, s&eacute;lectionnez
Fichier &gt; Enregistrer sous.
2 Dans la bo&icirc;te de dialogue Enregistrer sous qui s’affiche, recherchez le dossier dans lequel vous
voulez enregistrer le fichier.
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
4 Cliquez sur Enregistrer pour enregistrer le fichier.
■
Pour enregistrer tous les documents ouverts :
1 Choisissez Fichier &gt; Enregistrer tout.
2 Si des documents non enregistr&eacute;s sont ouverts, la bo&icirc;te de dialogue Enregistrer sous s’affiche
pour chacun d’entre eux.
Enregistrement de pages Web
269
Dans la bo&icirc;te de dialogue qui s’affiche, recherchez le dossier o&ugrave; vous voulez enregistrer le
fichier.
3 Dans la zone de texte Nom de fichier, entrez le nom du fichier.
4 Cliquez sur Enregistrer pour enregistrer le fichier.
Pour revenir &agrave; la version pr&eacute;c&eacute;demment enregistr&eacute;e d’un document :
1 Choisissez Fichier &gt; R&eacute;tablir.
Une bo&icirc;te de dialogue s’affiche, vous invitant &agrave; confirmer que vous souhaiter annuler vos
modifications et revenir &agrave; la version pr&eacute;c&eacute;demment enregistr&eacute;e.
2 Cliquez sur Oui pour revenir &agrave; la version pr&eacute;c&eacute;dente ou cliquez sur Non pour conserver les
modifications apport&eacute;es.
Remarque : Si vous enregistrez un document, puis que vous quittez Dreamweaver, il ne sera pas
possible de revenir &agrave; la version pr&eacute;c&eacute;dente lors de la prochaine utilisation de Dreamweaver.
Rubriques connexes
• Cr&eacute;ation de nouveaux documents, page 76
• Enregistrement d’un nouveau document, page 78
Sp&eacute;cification de balises HTML au lieu de CSS
Par d&eacute;faut, Dreamweaver utilise les balises CSS pour attribuer les propri&eacute;t&eacute;s de page. Si vous
pr&eacute;f&eacute;rez utiliser des balises HTML, d&eacute;sactivez l’option Utiliser des balises CSS au lieu de balises
HTML dans la cat&eacute;gorie G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Pour sp&eacute;cifier des balises HTML au lieu de balises CSS pour les propri&eacute;t&eacute;s de la page :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 Dans la cat&eacute;gorie G&eacute;n&eacute;ral de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, d&eacute;sactivez l’option Utiliser des
balises CSS au lieu de balises HTML.
Cette case &agrave; cocher se trouve dans la cat&eacute;gorie Options d’&eacute;dition du panneau Pr&eacute;f&eacute;rences
g&eacute;n&eacute;rales.
3 Cliquez sur OK.
Rubriques connexes
• A propos de la d&eacute;finition des propri&eacute;t&eacute;s de page, page 266
D&eacute;finition des propri&eacute;t&eacute;s de page
Les propri&eacute;t&eacute;s de base des documents Web sont les suivantes : titre de la page, images et couleurs
d’arri&egrave;re-plan, couleur de base du texte et des liens et marges. Vous pouvez d&eacute;finir ou modifier les
propri&eacute;t&eacute;s de page &agrave; l’aide de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page.
270
Chapitre 12 : Utilisation des pages
Pour d&eacute;finir les propri&eacute;t&eacute;s de document :
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou cliquez sur le bouton Propri&eacute;t&eacute;s de la page de
l’inspecteur de propri&eacute;t&eacute;s.
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page s’ouvre.
2 Effectuez les changements de votre choix dans les propri&eacute;t&eacute;s de la page.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• A propos de la d&eacute;finition des propri&eacute;t&eacute;s de page, page 266
• D&eacute;finition du style de soulignement des liens CSS, page 272
• D&eacute;finition d’une image ou d’une couleur d’arri&egrave;re-plan de la page, page 272
Modification du titre d’un document
Le titre d’une page HTML permet au visiteur de conna&icirc;tre le sujet de la page qu’il vient d’afficher
dans son navigateur, et identifie cette page dans les listes de l’historique et des liens favoris
(signets). Si vous n’attribuez pas de titre &agrave; la page, elle appara&icirc;tra sous le nom de Document sans
nom dans la fen&ecirc;tre du navigateur, dans les signets et dans l’historique.
Remarque : Le nom de fichier que vous donnez au document (lorsque vous l’enregistrez) n’a rien &agrave;
voir avec le titre de la page.
Pour localiser tous les documents sans nom de votre site, utilisez la commande Site &gt; Rapports
(voir Test de votre site, page 119).
Pour changer le titre d’une page :
1 La fen&ecirc;tre de document &eacute;tant active, proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page.
Choisissez Affichage &gt; Barres d’outils &gt; Document (si celle-ci n’est pas d&eacute;j&agrave; s&eacute;lectionn&eacute;e).
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh) sur une zone vide du document, puis s&eacute;lectionnez Propri&eacute;t&eacute;s de la
page.
2 Dans la zone de texte Titre, tapez le titre de la page, puis appuyez sur la touche Entr&eacute;e
(Windows) ou Retour (Macintosh).
3 Si vous modifiez le titre dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page, cliquez sur OK.
Le titre appara&icirc;t dans la barre de titre de la fen&ecirc;tre de document (et dans la barre d’outils
Document si elle est affich&eacute;e). Le nom de fichier de la page et le nom du dossier dans lequel ce
fichier est enregistr&eacute; apparaissent entre parenth&egrave;ses &agrave; c&ocirc;t&eacute; du titre, dans la barre de titre. Un
ast&eacute;risque indique que le document contient des modifications qui n’ont pas encore &eacute;t&eacute;
enregistr&eacute;es.
■
■
Rubriques connexes
• A propos de la d&eacute;finition des propri&eacute;t&eacute;s de page, page 266
D&eacute;finition des propri&eacute;t&eacute;s de page
271
D&eacute;finition du style de soulignement des liens CSS
Si vous utilisez la bo&icirc;te de dialogue de propri&eacute;t&eacute;s de page CSS par d&eacute;faut, vous pouvez facilement
modifier le style des liens CSS. A l’aide des options de liens CSS, vous pouvez d&eacute;cider que les liens
ne soient jamais soulign&eacute;s ou alors qu’ils soient soulign&eacute;s ou d&eacute;sactiv&eacute;s uniquement lorsque la
souris est plac&eacute;e dessus.
Pour d&eacute;finir un style de lien CSS :
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou s&eacute;lectionnez Propri&eacute;t&eacute;s de la page dans le menu
contextuel de la fen&ecirc;tre de document en mode Cr&eacute;ation.
2 S&eacute;lectionnez la cat&eacute;gorie Liens dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page CSS.
3 Dans le menu d&eacute;roulant Style soulign&eacute;, s&eacute;lectionnez le style soulign&eacute; &agrave; utiliser par d&eacute;faut pour
votre page.
4 Cliquez sur OK.
Rubriques connexes
• A propos de la d&eacute;finition des propri&eacute;t&eacute;s de page, page 266
• Chapitre 15, Liens et navigation, page 329
D&eacute;finition d’une image ou d’une couleur d’arri&egrave;re-plan de la page
Pour d&eacute;finir une image ou une couleur d’arri&egrave;re-plan de la page, utilisez la bo&icirc;te de dialogue
Propri&eacute;t&eacute;s de la page.
Si vous utilisez &agrave; la fois une image et une couleur d’arri&egrave;re-plan, la couleur appara&icirc;t pendant le
t&eacute;l&eacute;chargement de l’image, puis elle est recouverte par l’image. Toutefois, si l’image d’arri&egrave;re-plan
comprend des pixels transparents, la couleur d’arri&egrave;re-plan reste visible dans ces zones.
Pour d&eacute;finir une image ou une couleur d’arri&egrave;re-plan :
1 Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page ou s&eacute;lectionnez Propri&eacute;t&eacute;s de la page dans le menu
contextuel de la fen&ecirc;tre de document en mode Cr&eacute;ation.
2 S&eacute;lectionnez la cat&eacute;gorie Aspect dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page.
3 Pour d&eacute;finir une image d’arri&egrave;re-plan, cliquez sur le bouton Parcourir, puis naviguez jusqu’&agrave;
l’image et s&eacute;lectionnez-la. Vous pouvez &eacute;galement indiquer le chemin de l’image d’arri&egrave;re-plan
dans le champ Image d’arri&egrave;re-plan.
Comme les navigateurs, Dreamweaver g&eacute;n&egrave;re une mosa&iuml;que (multiplication) de l’image
d’arri&egrave;re-plan si elle ne remplit pas enti&egrave;rement sa fen&ecirc;tre. Pour &eacute;viter la cr&eacute;ation de cette
mosa&iuml;que, d&eacute;sactivez cette fonction &agrave; l’aide des feuilles de style en cascade. Voir D&eacute;finition des
propri&eacute;t&eacute;s d’arri&egrave;re-plan de style CSS dans l’aide de Dreamweaver.
4 Pour d&eacute;finir une couleur d’arri&egrave;re-plan, cliquez sur la case Couleur d’arri&egrave;re-plan puis choisissez
une couleur dans le s&eacute;lecteur.
Rubriques connexes :
• A propos de la d&eacute;finition des propri&eacute;t&eacute;s de page, page 266
272
Chapitre 12 : Utilisation des pages
Utilisation des couleurs
Dans Dreamweaver, les inspecteurs de propri&eacute;t&eacute;s de la plupart des &eacute;l&eacute;ments de page, ainsi que de
nombreuses bo&icirc;tes de dialogue, comportent une ic&ocirc;ne permettant d’ouvrir un s&eacute;lecteur de
couleur. Choisissez la couleur d’un &eacute;l&eacute;ment de page dans le s&eacute;lecteur.
Pour s&eacute;lectionner une couleur dans Dreamweaver :
1 Cliquez sur l’ic&ocirc;ne des couleurs dans n’importe quelle bo&icirc;te de dialogue ou dans l’inspecteur de
propri&eacute;t&eacute;s.
Le s&eacute;lecteur de couleur s’affiche &agrave; l’&eacute;cran.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
Utilisez la pipette pour s&eacute;lectionner une nuance de couleur dans la palette. Toutes les
couleurs des palettes Cubes de couleur (valeur par d&eacute;faut) et Ton continu sont s&eacute;curis&eacute;es
pour le Web ; les autres palettes ne le sont pas. Pour plus d’informations, voir A propos des
couleurs s&eacute;curis&eacute;es pour le Web, page 267.
Utilisez la pipette pour s&eacute;lectionner une couleur &agrave; partir d’un point visible &agrave; l’&eacute;cran, m&ecirc;me &agrave;
l’ext&eacute;rieur de la fen&ecirc;tre de Dreamweaver. Pour s&eacute;lectionner une couleur sur le bureau ou
dans une autre application, appuyez sur le bouton de la souris et maintenez-le enfonc&eacute;. La
pipette peut ainsi rester active et s&eacute;lectionner une couleur en dehors de Dreamweaver. Si
vous cliquez sur le bureau ou sur une autre application, Dreamweaver s&eacute;lectionne la couleur
de l’emplacement o&ugrave; vous avez cliqu&eacute;. Cependant, si vous passez &agrave; une autre application, il
peut s’av&eacute;rer n&eacute;cessaire de cliquer sur une fen&ecirc;tre de Dreamweaver pour continuer &agrave;
travailler dans Dreamweaver.
Pour &eacute;largir plus amplement la s&eacute;lection, utilisez le menu d&eacute;roulant en haut &agrave; droite du
nuancier. Vous pouvez s&eacute;lectionner les palettes Cubes de couleur, Ton continu, Syst&egrave;me
d’exploitation Windows, Mac OS, Niveaux de gris et Couleurs web.
Remarque : Les palettes Cubes de couleur et Ton continu sont s&eacute;curis&eacute;es pour le Web,
contrairement aux palettes Syst&egrave;me d’exploitation Windows, Mac OS et Niveaux de gris. Si la
palette que vous utilisez n’est pas s&eacute;curis&eacute;e pour le Web et que vous cliquez sur Couleurs web,
Dreamweaver remplace la couleur s&eacute;lectionn&eacute;e par la couleur s&eacute;curis&eacute;e pour le Web la plus
proche. Autrement dit, la couleur que vous voyez n’est pas forc&eacute;ment celle que vous avez
choisie.
Pour effacer la couleur en cours sans devoir en choisir une autre, cliquez sur le bouton
Couleur par d&eacute;faut.
Pour ouvrir le nuancier du syst&egrave;me, cliquez sur le bouton Roue chromatique. Pour plus
d’informations, voir A propos des couleurs s&eacute;curis&eacute;es pour le Web, page 267.
Utilisation des couleurs
273
D&eacute;finition des couleurs par d&eacute;faut du texte
La bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page permet de d&eacute;finir les couleurs par d&eacute;faut pour le texte
ordinaire, les liens, les liens visit&eacute;s et les liens actifs. Vous pouvez aussi choisir une palette de
couleurs pr&eacute;d&eacute;finie pour les couleurs de l’arri&egrave;re-plan et du texte (voir Utilisation des couleurs,
page 273).
Remarque : La couleur du lien actif est la couleur que prend un lien lorsque l’utilisateur clique dessus.
Il est possible que certains navigateurs Web n’utilisent pas la couleur que vous avez sp&eacute;cifi&eacute;e.
Pour d&eacute;finir les couleurs de texte par d&eacute;faut, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Modifier &gt; Propri&eacute;t&eacute;s de la page, puis choisissez la couleur pour les options Couleur
du texte, Couleur du lien, Liens visit&eacute;s et Liens actifs.
• Choisissez Commandes &gt; D&eacute;finir le mod&egrave;le de couleur, puis choisissez la couleur d’arri&egrave;re-plan
et les couleurs du texte et des liens.
La zone d’exemple affiche l’aspect qu’aura la palette de couleurs dans le navigateur.
Remarque : Si vous d&eacute;finissez ces param&egrave;tres &agrave; l’aide de la bo&icirc;te de dialogue Propri&eacute;t&eacute;s de la page,
avec les balises CSS par d&eacute;faut, la commande Mod&egrave;le de couleur n’affecte pas l’apparence de votre
page. En effet, les balises CSS supplantent les balises HTML.
Rubriques connexes
• A propos de la d&eacute;finition des propri&eacute;t&eacute;s de page, page 266
S&eacute;lection d’&eacute;l&eacute;ments dans la fen&ecirc;tre de document
Pour s&eacute;lectionner un &eacute;l&eacute;ment dans le mode Cr&eacute;ation de la fen&ecirc;tre de document, il suffit
g&eacute;n&eacute;ralement de cliquer dessus. Si un &eacute;l&eacute;ment est invisible, vous devez le rendre visible pour le
s&eacute;lectionner. Pour plus d’informations sur les &eacute;l&eacute;ments invisibles, voir Affichage et masquage des
&eacute;l&eacute;ments invisibles, page 275.
Pour s&eacute;lectionner des &eacute;l&eacute;ments, utilisez ces techniques :
• Pour s&eacute;lectionner un &eacute;l&eacute;ment visible dans la fen&ecirc;tre de document, cliquez dessus ou entourez-le
•
274
du rectangle de s&eacute;lection.
Pour s&eacute;lectionner un &eacute;l&eacute;ment invisible, choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments
invisibles (si ce n’est pas d&eacute;j&agrave; fait), puis cliquez sur le marqueur de l’&eacute;l&eacute;ment dans la fen&ecirc;tre de
document.
Certains objets apparaissent sur la page &agrave; un endroit diff&eacute;rent de celui dans lequel leur code est
ins&eacute;r&eacute;. Par exemple, un calque peut se trouver n’importe o&ugrave; sur la page, mais le code qui le
d&eacute;finit se trouve &agrave; un emplacement fixe. Lorsque les &eacute;l&eacute;ments invisibles sont affich&eacute;s,
Dreamweaver affiche des marqueurs dans la fen&ecirc;tre de document pour indiquer l’emplacement
du code de ces &eacute;l&eacute;ments. En s&eacute;lectionnant le marqueur, vous s&eacute;lectionnez tout l’&eacute;l&eacute;ment : si,
par exemple, vous s&eacute;lectionnez le marqueur d’un calque, tout le calque est s&eacute;lectionn&eacute; (voir
Affichage et masquage des &eacute;l&eacute;ments invisibles, page 275).
Chapitre 12 : Utilisation des pages
• Pour s&eacute;lectionner une balise compl&egrave;te (avec son contenu, le cas &eacute;ch&eacute;ant), cliquez sur son
symbole dans le s&eacute;lecteur de balise, dans la partie inf&eacute;rieure gauche de la fen&ecirc;tre de document.
Le s&eacute;lecteur de balises appara&icirc;t en mode Cr&eacute;ation et en mode Code. Le s&eacute;lecteur de balises
affiche toujours les balises qui contiennent la s&eacute;lection ou le point d’insertion en cours. La
balise &agrave; l’extr&ecirc;me gauche est la balise ultrap&eacute;riph&eacute;rique contenant la s&eacute;lection ou le point
d’insertion en cours. La balise suivante est contenue dans cette balise ultrap&eacute;riph&eacute;rique, et ainsi
de suite. La balise &agrave; l’extr&ecirc;me droite est la balise la plus &agrave; l’int&eacute;rieur contenant la s&eacute;lection ou le
point d’insertion en cours.
Dans l’exemple suivant, le point d’insertion est situ&eacute; dans une balise de paragraphe, &lt;p&gt;. Pour
s&eacute;lectionner le tableau contenant le paragraphe que vous souhaitez s&eacute;lectionner, s&eacute;lectionnez la
balise &lt;table&gt; &agrave; gauche de la balise &lt;p&gt;.
Pour afficher le code HTML associ&eacute; au texte ou &agrave; l’objet s&eacute;lectionn&eacute;, proc&eacute;dez de l’une des
mani&egrave;res suivantes :
• Dans la barre d’outils du document, cliquez sur le bouton Afficher le mode Code.
• Choisissez Affichage &gt; Code.
• Dans la barre d’outils du document, cliquez sur le bouton Afficher les modes Code et
Cr&eacute;ation.
• Choisissez Affichage &gt; Code et cr&eacute;ation.
• Choisissez Fen&ecirc;tre&gt; Inspecteur de code.
Pour plus d’informations sur le mode Code, voir Affichage du code, page 416.
Lorsque vous s&eacute;lectionnez un &eacute;l&eacute;ment dans l’un des deux &eacute;diteurs de code (mode Code ou
inspecteur de code), il est &eacute;galement s&eacute;lectionn&eacute; dans la fen&ecirc;tre de document. Il est parfois
n&eacute;cessaire de synchroniser les deux affichages pour que la s&eacute;lection apparaisse. Voir Affichage du
code, page 416.
Affichage et masquage des &eacute;l&eacute;ments invisibles
Certains codes HTML ne sont pas visibles dans un navigateur, comme par exemple les balises
Il est cependant utile de pouvoir s&eacute;lectionner, modifier, d&eacute;placer et supprimer ces
&eacute;l&eacute;ments invisibles lorsque vous cr&eacute;ez une page.
comment.
Dreamweaver vous permet d’afficher des ic&ocirc;nes &agrave; l’emplacement de ces &eacute;l&eacute;ments invisibles dans la
fen&ecirc;tre de document en mode Cr&eacute;ation. Pour indiquer les marqueurs d’&eacute;l&eacute;ment qui doivent
s’afficher lorsque vous choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles, d&eacute;finissez
les pr&eacute;f&eacute;rences li&eacute;es aux &eacute;l&eacute;ments invisibles. Par exemple, vous pouvez sp&eacute;cifier que les ancres
nomm&eacute;es soient visibles, mais pas les sauts de ligne.
Vous pouvez cr&eacute;er certains &eacute;l&eacute;ments invisibles (tels que les commentaires et les ancres nomm&eacute;es) &agrave;
l’aide des boutons dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer (voir Utilisation de la barre
Ins&eacute;rer, page 45). Vous pouvez ensuite modifier ces &eacute;l&eacute;ments &agrave; l’aide de l’inspecteur de propri&eacute;t&eacute;s.
Pour afficher ou masquer les ic&ocirc;nes des &eacute;l&eacute;ments invisibles :
• Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
Remarque : L’affichage des &eacute;l&eacute;ments invisibles risque de modifier l&eacute;g&egrave;rement la mise en page, en
d&eacute;pla&ccedil;ant d’autres &eacute;l&eacute;ments de quelques pixels. Pour conserver une mise en page pr&eacute;cise, vous
devez donc masquer ces &eacute;l&eacute;ments invisibles.
S&eacute;lection d’&eacute;l&eacute;ments dans la fen&ecirc;tre de document
275
Pour modifier les pr&eacute;f&eacute;rences pour les &eacute;l&eacute;ments invisibles :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis
cliquez sur El&eacute;ments invisibles.
2 S&eacute;lectionnez les &eacute;l&eacute;ments dont le marqueur doit &ecirc;tre visible.
Une coche &agrave; c&ocirc;t&eacute; du nom de l’&eacute;l&eacute;ment dans la bo&icirc;te de dialogue signifie que l’&eacute;l&eacute;ment est
visible lorsque l’option Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles est activ&eacute;e.
Pour obtenir des explications sur chacune des pr&eacute;f&eacute;rences El&eacute;ments invisibles, voir D&eacute;finition
des pr&eacute;f&eacute;rences des &eacute;l&eacute;ments invisibles dans l’aide de Dreamweaver.
3 Cliquez sur OK.
Utilisation du panneau Historique
Le panneau Historique enregistre toutes les &eacute;tapes de votre travail dans Dreamweaver. Vous
pouvez utiliser le panneau Historique pour annuler plusieurs &eacute;tapes simultan&eacute;ment.
Pour annuler la derni&egrave;re op&eacute;ration effectu&eacute;e dans un document, choisissez Edition &gt; Annuler,
comme dans la plupart des applications (dans le menu Edition, le nom de la commande Annuler
change en fonction de la derni&egrave;re op&eacute;ration ex&eacute;cut&eacute;e).
Le panneau Historique permet &eacute;galement de reproduire des &eacute;tapes d&eacute;j&agrave; r&eacute;alis&eacute;es et d’automatiser
des t&acirc;ches en cr&eacute;ant de nouvelles commandes. Pour plus d’informations, voir Automatisation des
t&acirc;ches, page 277.
Pour ouvrir le panneau Historique :
• Choisissez Fen&ecirc;tre &gt; Historique.
Pour annuler la derni&egrave;re action :
• D&eacute;placez le curseur du panneau Historique d’une &eacute;tape vers le haut dans la liste. Cette
op&eacute;ration a le m&ecirc;me effet que lorsque vous cliquez sur Edition &gt; Annuler.
L’&eacute;tape annul&eacute;e appara&icirc;t alors en gris&eacute;.
Pour annuler plusieurs op&eacute;rations &agrave; la fois, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• D&eacute;placez le curseur jusqu’&agrave; une &eacute;tape de la liste.
• Cliquez &agrave; gauche d’une &eacute;tape le long de la trajectoire du curseur ; le curseur se dirige
automatiquement vers cette &eacute;tape, annulant toutes celles qui sont sur son passage.
Remarque : Pour provoquer un d&eacute;placement automatique vers une &eacute;tape sp&eacute;cifique, cliquez &agrave;
gauche de cette &eacute;tape ; si vous cliquez sur l’&eacute;tape elle-m&ecirc;me, elle sera s&eacute;lectionn&eacute;e. La s&eacute;lection
d’une &eacute;tape est une op&eacute;ration diff&eacute;rente du retour &agrave; cette &eacute;tape dans l’historique des actions.
Tout comme pour l’annulation d’une seule action, si vous annulez une s&eacute;rie d’&eacute;tapes, puis
effectuez une autre op&eacute;ration dans le document, il ne vous sera plus possible de r&eacute;tablir les actions
annul&eacute;es : elles disparaissent du panneau Historique.
Pour d&eacute;finir le nombre maximal d’&eacute;tapes que le panneau Historique conserve et affiche :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie G&eacute;n&eacute;ral dans la liste de gauche.
3 Tapez un chiffre dans la zone Nombre maximal d’&eacute;tapes de l’historique.
276
Chapitre 12 : Utilisation des pages
La valeur par d&eacute;faut doit &ecirc;tre suffisante pour les besoins de la plupart des utilisateurs. Plus ce
chiffre est &eacute;lev&eacute;, plus le panneau Historique utilisera de m&eacute;moire. Cela peut affecter les
performances et ralentir consid&eacute;rablement votre syst&egrave;me. Lorsque le panneau Historique
atteint le nombre maximal d’&eacute;tapes, les premi&egrave;res &eacute;tapes sont supprim&eacute;es.
Remarque : Il est impossible de modifier l’ordre dans lequel les &eacute;tapes sont affich&eacute;es dans le
panneau Historique. Il ne faut pas voir dans le panneau Historique une collection arbitraire de
commandes ; il vous permet de voir, dans l’ordre chronologique, la liste des actions d&eacute;j&agrave; effectu&eacute;es.
Pour effacer la liste des actions du panneau Historique pour le document actif :
• Dans le menu contextuel du panneau Historique, s&eacute;lectionnez Effacer l’historique.
Cette commande efface &eacute;galement toutes les informations permettant d’annuler les actions
effectu&eacute;es dans le document actif : apr&egrave;s avoir cliqu&eacute; sur Effacer l’historique, il vous sera
impossible d’annuler les actions dont la trace a &eacute;t&eacute; effac&eacute;e. (Notez bien que la fonction Effacer
l’historique n’annule aucune action pass&eacute;e, mais se limite &agrave; supprimer l’enregistrement de ces
&eacute;tapes dans la m&eacute;moire de Dreamweaver.)
Rubriques connexes
• A propos du panneau Historique, page 267
Automatisation des t&acirc;ches
Lors de la cr&eacute;ation de documents, vous avez parfois besoin d’effectuer de nombreuses fois la
m&ecirc;me op&eacute;ration.
Pour recommencer une ou deux fois une s&eacute;rie d’&eacute;tapes, r&eacute;p&eacute;tez-les directement depuis le panneau
Historique, qui enregistre chaque &eacute;tape de votre travail sur le document. Pour toutes informations
de base sur le panneau Historique, voir A propos du panneau Historique, page 267. Pour
automatiser une t&acirc;che fr&eacute;quente, vous pouvez cr&eacute;er une nouvelle commande qui effectuera cette
t&acirc;che automatiquement.
Notez qu’il est impossible de reproduire ou d’enregistrer (dans le cadre de commandes
enregistr&eacute;es) certains mouvements de la souris, comme par exemple la s&eacute;lection d’un &eacute;l&eacute;ment en
cliquant avec la souris ou en la faisant glisser dans la fen&ecirc;tre de document. Lorsque vous effectuez
ce type de mouvements, un trait noir s’affiche dans le panneau Historique (cette ligne n’est
cependant bien visible que lorsque vous avez accompli une autre action). Pour &eacute;viter des
mouvements qui ne peuvent pas &ecirc;tre reproduits, d&eacute;placez le point d’insertion &agrave; l’aide des touches
fl&eacute;ch&eacute;es, et non de la souris, dans la fen&ecirc;tre de document. Pour effectuer ou &eacute;tendre une s&eacute;lection,
maintenez la touche Maj enfonc&eacute;e tout en appuyant sur les touches fl&eacute;ch&eacute;es.
Conseil : Si un trait noir indiquant un mouvement de la souris appara&icirc;t pendant que vous effectuez
une t&acirc;che que vous voulez r&eacute;it&eacute;rer ult&eacute;rieurement, vous pouvez annuler cette derni&egrave;re action et tenter
une autre approche (utilisez les touches fl&eacute;ch&eacute;es, par exemple).
Il existe quelques autres actions qui ne peuvent pas &ecirc;tre reproduites, par exemple le glisserd&eacute;placer d’un &eacute;l&eacute;ment de la page. Lorsque vous effectuez ce type d’action, une ic&ocirc;ne repr&eacute;sentant
une commande de menu barr&eacute;e d’un petit X rouge s’affiche dans le panneau Historique.
Rubriques connexes
• Application d’&eacute;tapes &agrave; un autre objet, page 279
• Application d’&eacute;tapes &agrave; plusieurs objets, page 279
• Copie et collage d’&eacute;tapes entre les documents, page 280
Automatisation des t&acirc;ches
277
• Cr&eacute;ation de nouvelles commandes &agrave; partir d’&eacute;tapes de l’historique, page 281
• M&eacute;morisation de commandes, page 282
R&eacute;p&eacute;tition d’&eacute;tapes
Vous pouvez r&eacute;p&eacute;ter la derni&egrave;re &eacute;tape effectu&eacute;e ou bien une s&eacute;rie d’&eacute;tapes contigu&euml;s ou non &agrave;
l’aide du panneau Historique. Pour toutes informations de base sur le panneau Historique, voir A
propos du panneau Historique, page 267.
Pour r&eacute;p&eacute;ter une &eacute;tape, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Choisissez Edition &gt; R&eacute;p&eacute;ter.
•
Le nom de cette commande change dans le menu Edition pour refl&eacute;ter la derni&egrave;re &eacute;tape
effectu&eacute;e ; par exemple, si vous venez de saisir du texte, le nom de la commande sera R&eacute;p&eacute;ter
frappe.
Dans le panneau Historique, s&eacute;lectionnez une &eacute;tape et cliquez sur le bouton Reproduire.
L’&eacute;tape est reproduite et une nouvelle instance de cette action appara&icirc;t dans le panneau
Historique.
Pour r&eacute;p&eacute;ter une s&eacute;rie d’&eacute;tapes contigu&euml;s :
1 S&eacute;lectionnez des &eacute;tapes dans le panneau Historique, en utilisant l’une des m&eacute;thodes suivantes :
Faites glisser la souris d’une &eacute;tape &agrave; une autre (ne faites pas glisser le curseur ; faites
simplement glisser de l’&eacute;tiquette de texte d’une &eacute;tape vers l’&eacute;tiquette de texte d’une autre).
■ S&eacute;lectionnez la premi&egrave;re &eacute;tape, puis maintenez la touche Maj enfonc&eacute;e tout en cliquant sur
la derni&egrave;re &eacute;tape ou s&eacute;lectionnez la derni&egrave;re &eacute;tape, puis maintenez la touche Maj enfonc&eacute;e
tout en cliquant sur la premi&egrave;re.
Seules les actions s&eacute;lectionn&eacute;es (en surbrillance), et pas n&eacute;cessairement celle sur laquelle se
trouve le pointeur, sont r&eacute;p&eacute;t&eacute;es.
■
Remarque : Bien que vous puissiez s&eacute;lectionner une s&eacute;rie d’&eacute;tapes contenant un trait noir
signalant un mouvement de la souris, ce mouvement est ignor&eacute; lorsque vous reproduisez les
&eacute;tapes.
2 Cliquez sur Reproduire.
Les &eacute;tapes sont reproduites dans l’ordre chronologique et une nouvelle &eacute;tape, &laquo; Reproduire les
&eacute;tapes &raquo;, appara&icirc;t dans le panneau Historique.
Pour r&eacute;p&eacute;ter des &eacute;tapes non contigu&euml;s :
1 S&eacute;lectionnez une &eacute;tape, puis cliquez tour &agrave; tour sur toutes les autres &eacute;tapes d&eacute;sir&eacute;es tout en
maintenant appuy&eacute;e la touche Contr&ocirc;le (Windows) ou Commande (Macintosh).
Recliquez sur une &eacute;tape s&eacute;lectionn&eacute;e en maintenant la touche Ctrl ou Commande appuy&eacute;e
pour la d&eacute;s&eacute;lectionner.
2 Cliquez sur Reproduire.
Les &eacute;tapes s&eacute;lectionn&eacute;es sont reproduites dans leur ordre chronologique et une nouvelle &eacute;tape,
libell&eacute;e &laquo; Reproduire les &eacute;tapes &raquo;, appara&icirc;t dans le panneau Historique.
Rubriques connexes
• Application d’&eacute;tapes &agrave; plusieurs objets, page 279
278
Chapitre 12 : Utilisation des pages
Application d’&eacute;tapes &agrave; un autre objet
Vous pouvez appliquer un ensemble d’&eacute;tapes affich&eacute;es dans le panneau Historique &agrave; n’importe
quel objet figurant dans la fen&ecirc;tre de document.
Pour appliquer des &eacute;tapes du panneau Historique &agrave; un nouvel objet :
1 S&eacute;lectionnez l’objet.
2 S&eacute;lectionnez l’&eacute;tape &agrave; appliquer dans le panneau Historique, puis cliquez sur Reproduire.
Application d’&eacute;tapes &agrave; plusieurs objets
Si vous s&eacute;lectionnez plusieurs objets dans un document, puis leur appliquez des &eacute;tapes &agrave; partir du
panneau Historique, ces objets sont trait&eacute;s comme une s&eacute;lection unique et Dreamweaver tente
d’appliquer les &eacute;tapes &agrave; cette s&eacute;lection combin&eacute;e.
Vous ne pouvez pas, par exemple, s&eacute;lectionner cinq images et leur appliquer simultan&eacute;ment le
m&ecirc;me redimensionnement : le redimensionnement doit &ecirc;tre appliqu&eacute; individuellement &agrave; chaque
image.
Pour appliquer une s&eacute;rie d’&eacute;tapes &agrave; chaque objet d’un ensemble d’objets, vous devez faire en sorte
que la derni&egrave;re &eacute;tape de la s&eacute;rie s&eacute;lectionne l’objet suivant de l’ensemble. La proc&eacute;dure suivante
illustre ce principe dans un sc&eacute;nario particulier : d&eacute;finition de l’espacement vertical et horizontal
d’une s&eacute;rie d’images.
Pour d&eacute;finir l’espacement vertical et horizontal d’une s&eacute;rie d’images :
1 Ouvrez un document dans lequel chaque ligne est compos&eacute;e d’une petite image (par exemple
une puce graphique ou une ic&ocirc;ne) suivie de texte. L’objectif est d’espacer davantage ces images,
&agrave; la fois du texte et des autres images situ&eacute;es au-dessus et en dessous.
2 Ouvrez l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), si n&eacute;cessaire.
3 S&eacute;lectionnez la premi&egrave;re image.
4 Dans l’inspecteur de propri&eacute;t&eacute;s, indiquez des valeurs dans les zones de texte Espace V. et
Espace H. pour d&eacute;finir l’espacement de l’image.
5 Cliquez sur l’image de nouveau pour activer la fen&ecirc;tre de document sans d&eacute;placer le point
d’insertion.
6 Appuyez sur la touche fl&eacute;ch&eacute;e gauche pour amener le point d’insertion &agrave; gauche de l’image.
Appuyez ensuite sur la touche fl&eacute;ch&eacute;e bas pour descendre le point d’insertion d’une ligne, tout
en le laissant juste &agrave; gauche de la seconde image de la s&eacute;rie. Appuyez ensuite sur la touche fl&eacute;ch&eacute;e
droite tout en maintenant la touche Maj. enfonc&eacute;e, pour s&eacute;lectionner cette seconde image.
Remarque : Ne s&eacute;lectionnez surtout pas l’image en cliquant dessus, car vous ne pourriez plus
reproduire toutes les &eacute;tapes.
Automatisation des t&acirc;ches
279
7 Dans le panneau Historique, s&eacute;lectionnez les &eacute;tapes correspondant &agrave; la modification de
l’espacement de l’image et &agrave; la s&eacute;lection de l’image suivante. Cliquez sur le bouton Reproduire
pour reproduire ces actions.
L’espacement de l’image courante est modifi&eacute;, et l’image suivante est s&eacute;lectionn&eacute;e.
8 Continuez &agrave; cliquer sur le bouton Reproduire jusqu’&agrave; ce que toutes les images soient
correctement espac&eacute;es.
Pour appliquer des &eacute;tapes &agrave; un objet dans un autre document, cliquez sur le bouton Copier les
&eacute;tapes
Copie et collage d’&eacute;tapes entre les documents
Chaque document ouvert poss&egrave;de son propre historique. Vous pouvez copier des &eacute;tapes d’un
document et les coller dans un autre document.
La fermeture d’un document supprime son historique. Si vous pr&eacute;voyez de r&eacute;utiliser des &eacute;tapes
d’un document apr&egrave;s l’avoir ferm&eacute;, copiez ces &eacute;tapes &agrave; l’aide du bouton Copier les &eacute;tapes (ou
enregistrez-les comme nouvelle commande, voir Cr&eacute;ation de nouvelles commandes &agrave; partir d’&eacute;tapes
de l’historique, page 281) avant de fermer le document.
Pour r&eacute;utiliser des &eacute;tapes d’un document &agrave; un autre :
1 Activez le document contenant les &eacute;tapes que vous d&eacute;sirez r&eacute;utiliser.
2 S&eacute;lectionnez les &eacute;tapes d&eacute;sir&eacute;es dans le panneau Historique.
3 Dans le panneau Historique, cliquez sur le bouton Copier les &eacute;tapes.
Remarque : Le bouton Copier les &eacute;tapes (dans le panneau Historique) est diff&eacute;rent de la
commande Copier (dans le menu Edition). Vous ne pouvez pas utiliser la commande Edition &gt;
Copier pour copier des &eacute;tapes, mais vous pouvez utiliser la commande Edition &gt; Coller pour les
coller.
Soyez prudent lorsque vous copiez des &eacute;tapes qui comportent une commande Copier ou
Coller :
■ N’utilisez pas Copier les &eacute;tapes si l’une des &eacute;tapes contient une commande Copier, car le
collage de ces &eacute;tapes risque de ne pas s’effectuer comme souhait&eacute;.
■ Si vos &eacute;tapes contiennent une commande Coller, vous ne pouvez pas les coller, &agrave; moins
qu’elles ne comprennent &eacute;galement une commande Copier avant la commande Coller.
4 Ouvrez l’autre document.
5 Placez le curseur au point d&eacute;sir&eacute;, ou s&eacute;lectionnez l’objet auquel vous voulez appliquer les &eacute;tapes.
280
Chapitre 12 : Utilisation des pages
6 Choisissez Edition &gt; Coller pour coller les &eacute;tapes.
Les &eacute;tapes sont reproduites d&egrave;s qu’elles sont coll&eacute;es dans le panneau Historique du document.
Le panneau Historique les affiche comme une seule &eacute;tape, appel&eacute;e &laquo; Coller les &eacute;tapes &raquo;.
Si vous collez des &eacute;tapes dans un &eacute;diteur de texte, en mode Code ou dans l’inspecteur de code,
elles s’affichent sous forme de code JavaScript. Ce point peut vous &ecirc;tre tr&egrave;s utile pour
apprendre &agrave; &eacute;crire vos propres scripts. Pour plus d’informations sur l’utilisation du JavaScript
dans Dreamweaver, voir R&eacute;daction et modification de code, page 437.
Cr&eacute;ation de nouvelles commandes &agrave; partir d’&eacute;tapes de l’historique
Vous pouvez enregistrer un ensemble d’&eacute;tapes affich&eacute;es dans la palette Historique, sous la forme
d’une commande &agrave; laquelle vous donnerez un nom et qui deviendra alors disponible dans le menu
Commandes.
Si vous voulez r&eacute;utiliser un ensemble d’&eacute;tapes par la suite, cr&eacute;ez et enregistrez une nouvelle
commande, en particulier si vous voulez effectuez ces &eacute;tapes la prochaine fois que vous lancerez
Dreamweaver. Les commandes enregistr&eacute;es sont en effet conserv&eacute;es jusqu’&agrave; ce que vous les
effaciez, tandis que les commandes m&eacute;moris&eacute;es sont perdues lorsque vous quittez Dreamweaver.
De plus, les s&eacute;quences d’&eacute;tapes copi&eacute;es sont supprim&eacute;es d&egrave;s la copie suivante.
Vous pouvez modifier les noms des commandes que vous avez ins&eacute;r&eacute;es dans le menu Commandes
et supprimer ces commandes du menu Commandes. Il est plus difficile de modifier ou de
supprimer les commandes originellement int&eacute;gr&eacute;es dans le menu Commandes (c’est-&agrave;-dire celles
que vous n’avez pas ajout&eacute;es vous-m&ecirc;me).
Pour cr&eacute;er une commande :
1 S&eacute;lectionnez la ou les &eacute;tapes d&eacute;sir&eacute;es dans le panneau Historique.
2 Cliquez sur le bouton Enregistrer comme commande ou choisissez l’option Enregistrer comme
commande dans le menu contextuel du panneau Historique.
3 Indiquez le nom de la commande et cliquez sur OK.
La commande appara&icirc;t dans le menu Commandes.
Remarque : La commande est enregistr&eacute;e sous la forme d’un fichier JavaScript (ou parfois
HTML) dans votre dossier Dreamweaver/Configuration/Commandes. Si vous utilisez
Dreamweaver sur un syst&egrave;me d’exploitation &agrave; plusieurs utilisateurs, le fichier est enregistr&eacute; dans le
dossier Commandes de l’utilisateur sp&eacute;cifique.
Pour utiliser une commande que vous avez enregistr&eacute;e :
1 S&eacute;lectionnez l’objet auquel vous d&eacute;sirez appliquer la commande ou placez le curseur &agrave;
l’emplacement d&eacute;sir&eacute;.
2 S&eacute;lectionnez la commande de votre choix dans le menu Commandes.
Pour modifier le nom d’une commande tel qu’il appara&icirc;t dans le menu Commandes :
1 Choisissez Commandes &gt; Modifier la liste des commandes.
2 S&eacute;lectionnez la commande &agrave; renommer et indiquez son nouveau nom.
3 Cliquez sur Fermer.
Pour supprimer un nom du menu Commandes :
1 Choisissez Commandes &gt; Modifier la liste des commandes.
2 S&eacute;lectionnez une commande.
Automatisation des t&acirc;ches
281
3 Cliquez sur Supprimer, puis sur Fermer.
M&eacute;morisation de commandes
Vous pouvez m&eacute;moriser de fa&ccedil;on temporaire une commande utilis&eacute;e &agrave; court terme. Dreamweaver
ne retient qu’une commande m&eacute;moris&eacute;e &agrave; la fois ; d&egrave;s que vous commencez &agrave; m&eacute;moriser une
nouvelle commande, la pr&eacute;c&eacute;dente est oubli&eacute;e.
Pour enregistrer une nouvelle commande sans perdre la commande actuellement m&eacute;moris&eacute;e,
enregistrez-la &agrave; partir du panneau Historique. Pour plus d’informations, voir Pour un comparatif
d&eacute;taill&eacute; entre l’utilisation de commandes m&eacute;moris&eacute;es et la reproduction d’&eacute;tapes &agrave; partir du
panneau Historique, voir Utilisation du panneau Historique, page 276.
Pour m&eacute;moriser provisoirement une s&eacute;rie d’&eacute;tapes fr&eacute;quemment utilis&eacute;es :
1 Choisissez Commandes &gt; D&eacute;marrer l’enregistrement ou appuyez sur la combinaison de touches
Ctrl+Maj+X (Windows) ou Commande+Maj+X (Macintosh).
Le pointeur change d’aspect pour indiquer que vous m&eacute;morisez une commande.
2 Lorsque l’op&eacute;ration est termin&eacute;e, choisissez Commandes &gt; Arr&ecirc;ter l’enregistrement ou appuyez
&agrave; nouveau sur la combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X
(Macintosh).
Pour reproduire une commande m&eacute;moris&eacute;e :
• Choisissez Commandes &gt; Reproduire la commande enregistr&eacute;e ou appuyez sur la combinaison
de touches Ctrl+Maj+R (Windows) ou Commande+Maj+R (Macintosh).
Pour enregistrer une commande m&eacute;moris&eacute;e :
1 Choisissez Commandes &gt; Reproduire la commande enregistr&eacute;e pour ex&eacute;cuter la commande.
Une &eacute;tape nomm&eacute;e Ex&eacute;cuter commande appara&icirc;t dans la liste des &eacute;tapes du panneau
Historique.
2 Dans la palette Historique, s&eacute;lectionnez l’&eacute;tape Ex&eacute;cuter commande et cliquez sur le bouton
Enregistrer comme commande.
3 Indiquez le nom de la commande et cliquez sur OK.
La commande appara&icirc;t dans le menu Commandes.
Utilisation de comportements JavaScript pour d&eacute;tecter le type et
la version des navigateurs et des plug-ins
Vous pouvez utiliser des comportements pour d&eacute;terminer le type de navigateur utilis&eacute; par vos
visiteurs, et savoir s’ils disposent d’un plug-in particulier. Pour plus d’informations sur les
comportements, voir Chapitre 18, Utilisation des comportements JavaScript, page 383.
V&eacute;rifier le navigateur permet d’envoyer les visiteurs sur des pages diff&eacute;rentes selon le type et la
version de leur navigateur (voir V&eacute;rifier le navigateur, page 390). Par exemple, vous pouvez
envoyer les utilisateurs de Netscape Navigator 4.0 ou version ult&eacute;rieure sur une page, les
utilisateurs de Microsoft Internet Explorer 4.0 ou version ult&eacute;rieure sur une autre, et les
utilisateurs d’un autre type de navigateur sur la page en cours.
282
Chapitre 12 : Utilisation des pages
V&eacute;rifier le plug-in permet d’envoyer les visiteurs sur des pages diff&eacute;rentes selon qu’ils disposent ou
non du plug-in indiqu&eacute; (voir V&eacute;rifier le plug-in, page 391). Par exemple, vous pouvez envoyer les
utilisateurs disposant de Macromedia Shockwave sur une page et les autres sur une page
diff&eacute;rente.
Aper&ccedil;u et test de page dans les navigateurs
Vous pouvez pr&eacute;visualiser des documents &agrave; tout moment dans vos navigateurs cibles ; il n’est pas
n&eacute;cessaire d’enregistrer au pr&eacute;alable le document.
Vous pouvez d&eacute;finir jusqu’&agrave; 20 navigateurs pour avoir un aper&ccedil;u des pages de votre site. Il est
conseill&eacute; de demander un aper&ccedil;u pour les navigateurs suivants : Internet Explorer 6.0, Netscape
Navigator 7.0 et le navigateur Safari pour Macintosh. Si vous le souhaitez, vous pouvez tester vos
pages sur un navigateur en mode texte comme Lynx en plus de ces navigateurs graphiques les plus
courants.
Pour avoir un aper&ccedil;u et tester votre document dans un navigateur :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour afficher un aper&ccedil;u de la page :
■
Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur, puis s&eacute;lectionnez un navigateur dans la liste.
Remarque : Si vous n’avez pas encore s&eacute;lectionn&eacute; de navigateur, choisissez Edition &gt;
Pr&eacute;f&eacute;rences ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis s&eacute;lectionnez la cat&eacute;gorie Aper&ccedil;u
situ&eacute;e dans la partie gauche du navigateur pour s&eacute;lectionner un navigateur
Appuyez sur la touche F12 pour afficher la page en cours dans votre navigateur par d&eacute;faut.
■ Appuyez sur la combinaison de touches Contr&ocirc;le+F12 (Windows) ou Commande+F12
(Macintosh) pour afficher la page en cours dans votre navigateur secondaire.
2 Cliquez sur les liens et testez le contenu de votre page.
Toutes les fonctions li&eacute;es au navigateur sont op&eacute;rationnelles, y compris les comportements
JavaScript, les liens absolus et relatifs au document, les contr&ocirc;les ActiveX et les plug-ins
Netscape Navigator, &agrave; condition que vous ayez install&eacute; les plug-ins ou contr&ocirc;les ActiveX requis.
■
Remarque : Le contenu li&eacute; &agrave; un chemin relatif &agrave; la racine n’appara&icirc;t pas lorsque vous lancez
l’aper&ccedil;u de documents dans un navigateur local, sauf si vous activez l’option Aper&ccedil;u &agrave; l’aide d’un
fichier temporaire dans Pr&eacute;f&eacute;rences (voir Aper&ccedil;u et test de page dans les navigateurs, page 283).
En effet, &agrave; la diff&eacute;rence des serveurs, les navigateurs ne reconnaissent pas les racines de sites.
Conseil : Pour lancer l’aper&ccedil;u d’un contenu li&eacute; &agrave; des chemins relatifs &agrave; la racine, placez le fichier
sur un serveur distant, puis choisissez Fichier &gt; Aper&ccedil;u dans le navigateur pour l’afficher (voir
Chemins relatifs &agrave; la racine du site, page 332).
3 Fermez la page dans le navigateur apr&egrave;s avoir effectu&eacute; le test.
Pour d&eacute;finir ou modifier vos pr&eacute;f&eacute;rences pour le navigateur principal et le navigateur
secondaire :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour ouvrir les options Aper&ccedil;u dans le navigateur :
■
■
Choisissez Edition &gt; Pr&eacute;f&eacute;rences ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis
s&eacute;lectionnez la cat&eacute;gorie Aper&ccedil;u dans le navigateur dans la liste de gauche.
Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur &gt; Modifier la liste des navigateurs.
Aper&ccedil;u et test de page dans les navigateurs
283
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences contenant les options Aper&ccedil;u dans le navigateur appara&icirc;t.
2 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
V&eacute;rification des pr&eacute;f&eacute;rences de dur&eacute;e et de la taille de
t&eacute;l&eacute;chargement
Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets
li&eacute;s, tels que les images et les plug-ins. Dreamweaver estime la dur&eacute;e de t&eacute;l&eacute;chargement en
fonction de la vitesse de connexion entr&eacute;e dans les pr&eacute;f&eacute;rences de la Barre d’&eacute;tat. Le temps de
t&eacute;l&eacute;chargement r&eacute;el d&eacute;pend de l’&eacute;tat du trafic sur Internet.
Conseil : Pour v&eacute;rifier les dur&eacute;es de t&eacute;l&eacute;chargement pour une page Web particuli&egrave;re, il est
int&eacute;ressant d’utiliser la &laquo; r&egrave;gle des huit secondes &raquo; ; c’est-&agrave;-dire que la plupart des utilisateurs
n’attendront pas plus de huit secondes pour le t&eacute;l&eacute;chargement d’une page.
Pour d&eacute;finir des pr&eacute;f&eacute;rences en mati&egrave;re de taille et de temps de t&eacute;l&eacute;chargement :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie Barre d’&eacute;tat dans la liste de gauche.
284
Chapitre 12 : Utilisation des pages
Les options de la pr&eacute;f&eacute;rence Barre d’&eacute;tat apparaissent.
3 Choisissez la vitesse de connexion &agrave; partir de laquelle le temps de t&eacute;l&eacute;chargement sera calcul&eacute;.
En Europe et aux USA, la vitesse de connexion la plus r&eacute;pandue est 28,8 Kb/s. Si vous
concevez ce site pour un intranet, vous pouvez s&eacute;lectionner 1500 (vitesse T1).
Pour plus d’informations sur les pr&eacute;f&eacute;rences de barre d’&eacute;tat, voir D&eacute;finition des pr&eacute;f&eacute;rences de la
barre d’&eacute;tat, page 43.
4 Cliquez sur OK.
V&eacute;rification des pr&eacute;f&eacute;rences de dur&eacute;e et de la taille de t&eacute;l&eacute;chargement
285
286
Chapitre 12 : Utilisation des pages
CHAPITRE 13
Insertion et mise en forme de texte
Macromedia Dreamweaver MX 2004 permet d’ajouter et de mettre en forme du texte dans un
document de plusieurs fa&ccedil;ons. Vous pouvez ins&eacute;rer du texte, d&eacute;finir un type, une taille ou une
couleur de police, des attributs d’alignement ou encore cr&eacute;er et appliquer vos propres styles &agrave;
l’aide des styles CSS (Cascading Style Sheet).
Ce chapitre couvre les sujets suivants :
•
•
•
•
•
•
•
•
A propos du formatage de texte dans Dreamweaver, page 287
Insertion de texte, page 294
Mise en forme de paragraphes et structure du document, page 296
Mise en forme de texte, page 300
Utilisation des feuilles de style en cascade, page 304
Mise &agrave; jour de feuilles de style CSS dans un site Contribute, page 314
V&eacute;rification orthographique, page 315
Recherche et remplacement de texte, page 316
A propos du formatage de texte dans Dreamweaver
Dreamweaver dispose de plusieurs outils et commandes permettant de mettre du texte en forme &agrave;
l’aide de styles CSS ou de balises HTML.
A propos de l’insertion de texte
Dreamweaver vous permet d’ajouter du texte directement dans une page, de copier et de coller du
texte provenant d’un autre document ou de faire glisser du texte depuis une autre application. Les
types de document les plus courants utilis&eacute;s pour l’incorporation de texte dans des pages Web
sont, entre autres, les fichiers de texte ASCII, les fichiers .rtf (rich text format) et les documents
MS Office. Dreamweaver vous permet d’incorporer dans vos pages Web du texte provenant de
tous ces types de documents.
Rubriques connexes
• Insertion de texte, page 294
• Ajout de texte dans un document, page 295
• Importation de documents contenant des donn&eacute;es tabulaires, page 295
287
• Copie et collage de texte &agrave; partir de documents MS Office, page 295
A propos du formatage de texte
Les m&eacute;thodes de mise en forme du texte dans Dreamweaver s’apparentent &agrave; celles d’un logiciel de
traitement de texte standard. Vous pouvez d&eacute;finir le style de mise en forme par d&eacute;faut
(Paragraphe, En-t&ecirc;te 1, En-t&ecirc;te 2, etc.) pour un bloc de texte, modifier la police, la taille la
couleur et l’alignement du texte s&eacute;lectionn&eacute; ou appliquer des styles de texte tels que gras, italique,
code (monospace) et soulign&eacute;.
Par d&eacute;faut, Dreamweaver met le texte en forme &agrave; l’aide des feuilles de style en cascade (CSS). Les
styles CSS offrent aux concepteurs et d&eacute;veloppeurs Web un meilleur contr&ocirc;le de l’aspect de la
page Web tout en proposant des fonctions qui permettent d’am&eacute;liorer l’accessibilit&eacute; et de r&eacute;duire
la taille des fichiers. Les r&egrave;gles CSS sont int&eacute;gr&eacute;es au document en cours au fur et &agrave; mesure que
vous y alignez le texte et ins&eacute;rez des styles &agrave; l’aide des commandes de mise en forme de
Dreamweaver. Vous pouvez ainsi plus facilement r&eacute;utiliser les styles que vous cr&eacute;ez et nommer
ceux que vous utilisez. Le CSS est aujourd’hui une des m&eacute;thodes les plus r&eacute;pandues pour mettre
en forme textes et pages Web.
Si vous le pr&eacute;f&eacute;rez, vous pouvez mettre en forme et aligner le texte de vos pages Web &agrave; l’aide de
balises de marquage HTML. Si vous souhaitez utiliser des balises HTML au lieu des styles CSS,
vous devez modifier les pr&eacute;f&eacute;rences de mise en forme du texte par d&eacute;faut de Dreamweaver. Pour
plus d’informations, voir Sp&eacute;cification de balises HTML au lieu de CSS, page 270.
Les styles CSS permettent de modifier le style d’une page Web sans en compromettre la structure.
En s&eacute;parant les &eacute;l&eacute;ments de conception visuelle (polices, couleurs, marges, etc.) des &eacute;l&eacute;ments
logiques internes &agrave; la structure d’une page Web, les feuilles de style CSS offrent aux concepteurs
un contr&ocirc;le &agrave; la fois visuel et typographique sans nuire &agrave; l’int&eacute;grit&eacute; du contenu. De plus, d&eacute;finir
une conception typographique et une mise en page depuis un bloc unique de code (sans avoir
recours aux cartes graphiques, aux balises &lt;font&gt;, aux tableaux et aux GIF d’espacement) permet
un chargement plus rapide, simplifie la maintenance du site et fournit un point central &agrave; partir
duquel il est possible de contr&ocirc;ler les attributs de conception sur plusieurs pages Web.
En revanche, les styles CSS d&eacute;finissent une mise en forme pour tout le texte appartenant &agrave; une
classe particuli&egrave;re ou red&eacute;finissent le format d’une balise HTML sp&eacute;cifique (par exemple h1, h2, p
ou li).
Vous pouvez d&eacute;finir les styles CSS directement dans le document ou, pour plus de puissance et de
souplesse, dans des feuilles de style externes. Si vous associez une feuille de style externe &agrave; plusieurs
pages Web, toutes les pages s’adapteront automatiquement si vous effectuez une modification
dans cette feuille de style. Pour acc&eacute;der aux styles CSS, utilisez le panneau Styles CSS ou le menu
contextuel Style de l’inspecteur de propri&eacute;t&eacute;s de texte. Pour plus d’informations sur l’utilisation de
l’inspecteur de propri&eacute;t&eacute;s de texte pour appliquer des styles HTML ou CSS, voir D&eacute;finition des
options relatives aux propri&eacute;t&eacute;s du texte dans l’aide de Dreamweaver.
Remarque : Vous pouvez combiner des styles CSS et une mise en forme HTML 3.2 sur une m&ecirc;me
page. Le formatage est appliqu&eacute; de fa&ccedil;on hi&eacute;rarchique. Le formatage HTML 3.2 supplante celui
appliqu&eacute; par des feuilles de style CSS externes. Les styles CSS int&eacute;gr&eacute;s dans un document
supplantent les styles CSS externes. Voir Utilisation des feuilles de style en cascade, page 304.
Rubriques connexes
• Insertion de texte, page 294
• Mise en forme de texte, page 300
288
Chapitre 13 : Insertion et mise en forme de texte
Description des feuilles de style en cascade
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. Les styles CSS vous permettent de g&eacute;rer en souplesse l’aspect
d’une page, tant en termes de pr&eacute;cision de l’emplacement de la pr&eacute;sentation qu’en termes de choix
de polices et de styles de caract&egrave;res sp&eacute;cifiques.
Par ailleurs, les styles CSS permettent de contr&ocirc;ler plusieurs propri&eacute;t&eacute;s qui ne peuvent pas &ecirc;tre
g&eacute;r&eacute;es via le langage HTML seul. Par exemple, vous pouvez attribuer des puces de liste
personnalis&eacute;es et sp&eacute;cifier diff&eacute;rentes tailles et unit&eacute;s de police (pixels, points, etc.). En utilisant
des styles CSS et en d&eacute;finissant des 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. Outre la mise
en forme du texte, vous &ecirc;tes &agrave; m&ecirc;me de g&eacute;rer le format et le positionnement des &eacute;l&eacute;ments blocs
d’une page Web. Vous pouvez ainsi d&eacute;finir des marges et des bordures, habiller du texte avec du
texte, etc.
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
correspond au nom du style (par exemple, TR ou P), tandis que la d&eacute;claration d&eacute;finit les &eacute;l&eacute;ments
de ce style. La d&eacute;claration est compos&eacute;e de deux entit&eacute;s : la propri&eacute;t&eacute; (par exemple, font-family)
et la valeur (par exemple, Helvetica). Le terme &laquo; en cascade &raquo; signifie qu’il est possible
d’appliquer plusieurs feuilles de style &agrave; une m&ecirc;me page Web. Vous pouvez, par exemple, cr&eacute;er une
feuille de style pour d&eacute;finir la couleur et une autre pour d&eacute;finir les marges, puis les appliquer
toutes les deux &agrave; la m&ecirc;me page afin d’obtenir la conception recherch&eacute;e.
Les styles CSS pr&eacute;sentent l’avantage majeur d’&ecirc;tre facilement mis &agrave; jour ; lorsque vous modifiez
un style CSS, la mise en forme de tous les documents dot&eacute;s de ce style refl&egrave;te automatiquement le
nouveau style.
Vous pouvez d&eacute;finir les types de styles CSS suivants dans Dreamweaver :
• Les styles CSS personnalis&eacute;s, &eacute;galement appel&eacute;s styles de classe, d&eacute;finissent les attributs de
styles d’une plage ou d’un bloc de texte (voir Application d’un style de classe, page 309).
• Les styles appliqu&eacute;s aux balises HTML red&eacute;finissent le formatage de ces balises, par
•
exemple h1. Lorsque vous cr&eacute;ez ou modifiez un style CSS pour la balise h1, tout le texte
format&eacute; &agrave; l’aide de cette balise h1 est imm&eacute;diatement modifi&eacute; en cons&eacute;quence.
Les styles des s&eacute;lecteurs CSS red&eacute;finissent le formatage d’une combinaison particuli&egrave;re de
balises (par exemple, td h2 s’applique lorsque la balise d’en-t&ecirc;te h2 appara&icirc;t dans une cellule de
tableau) ou &agrave; toutes les balises contenant un attribut id sp&eacute;cifique (par exemple #monStyle
s’applique &agrave; toutes les balises qui contiennent la paire attribut/valeur id=&quot;monStyle&quot;).
Les balises CSS peuvent r&eacute;sider aux emplacements suivants :
Les feuilles de style CSS externes regroupent des styles CSS enregistr&eacute;s 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 section head d’un document.
Les feuilles de style CSS internes (ou incorpor&eacute;es) regroupent des styles CSS inclus dans une
balise style dans la section head d’un document HTML.
Les styles en ligne
sont d&eacute;finis avec des instances sp&eacute;cifiques de balises dans un document
HTML.
A propos du formatage de texte dans Dreamweaver
289
Les styles CSS peuvent d&eacute;finir les attributs de mise en forme pour les balises HTML, plages de
texte identifi&eacute;es par un attribut class. Dreamweaver MX reconna&icirc;t les styles d&eacute;finis dans des
documents existants, pour peu que ceux-ci soient conformes aux recommandations sur les feuilles
de style CSS.
Conseil : Pour afficher le guide de r&eacute;f&eacute;rence CSS d’O’Reilly inclus dans Dreamweaver, 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.
La mise en forme manuelle du code HTML a toujours la priorit&eacute; sur la mise en forme appliqu&eacute;e &agrave;
l’aide de styles CSS. Pour permettre aux styles CSS de contr&ocirc;ler totalement la mise en forme d’un
paragraphe, vous devez supprimer tout le formatage manuel du code HTML.
Vous pouvez afficher la plupart des attributs de style appliqu&eacute;s dans la fen&ecirc;tre de document. Vous
pouvez &eacute;galement afficher un aper&ccedil;u du style appliqu&eacute; au document dans une fen&ecirc;tre de
navigateur. Certains attributs de style CSS s’affichent diff&eacute;remment dans Microsoft Internet
Explorer, Netscape Navigator, Opera et Apple Safari ou ne sont encore pris en charge par aucun
navigateur.
A propos des conflits de styles CSS
Lorsque vous appliquez plusieurs styles CSS au m&ecirc;me texte, il peut y avoir entre ces styles un
conflit qui produira des r&eacute;sultats inattendus. Les navigateurs appliquent les attributs de style selon
les r&egrave;gles suivantes :
• Si deux styles sont appliqu&eacute;s au m&ecirc;me texte, le navigateur affiche tous les attributs des deux
•
•
styles, sauf en cas de conflit entre deux attributs sp&eacute;cifiques. Par exemple, un style peut sp&eacute;cifier
le bleu comme couleur du texte, alors que l’autre style indiquera le rouge.
Si des attributs de deux styles appliqu&eacute;s au m&ecirc;me texte sont en conflit, le navigateur choisira
l’attribut du style en aval, c’est-&agrave;-dire celui qui est le plus pr&egrave;s du texte lui-m&ecirc;me. Ainsi, si un
&eacute;l&eacute;ment de texte est r&eacute;gi par une feuille de style externe et par un style CSS incorpor&eacute;, c’est ce
dernier qui est appliqu&eacute;.
En cas de conflit direct entre deux styles, les attributs des styles CSS (qui sont appliqu&eacute;s &agrave; l’aide
de l’attribut class) sont pr&eacute;pond&eacute;rants sur les attributs des styles de balises HTML.
Dans l’exemple qui suit, le style d&eacute;fini pour h1 peut sp&eacute;cifier la police, la taille et la couleur de
tous les paragraphes h1, mais le style CSS personnalis&eacute; .Bleu appliqu&eacute; &agrave; ce paragraphe est
pr&eacute;pond&eacute;rant sur la valeur de couleur d&eacute;clar&eacute;e dans le style h1. Le second style CSS personnalis&eacute;
.Rouge l’emporte &agrave; son tour sur le style .Bleu, car il se trouve &agrave; l’int&eacute;rieur du style .Bleu.
&lt;H1&gt;&lt;SPAN CLASS=&quot;Bleu&quot;&gt;Ce paragraphe est contr&ocirc;l&eacute; par le style personnalis&eacute;
.Bleu et par le style de balise HTML H1.
&lt;SPAN CLASS=&quot;Rouge&quot;&gt;... sauf cette phrase, qui est contr&ocirc;l&eacute;e par le style
.Rouge.&lt;/span&gt;
Nous revenons maintenant au style .Bleu.&lt;/SPAN&gt;&lt;/H1&gt;
Propri&eacute;t&eacute;s de la forme courte des styles CSS
La sp&eacute;cification CSS permet la cr&eacute;ation de styles &agrave; l’aide d’une syntaxe abr&eacute;g&eacute;e ou forme courte.
Elle permet de sp&eacute;cifier la valeur de plusieurs propri&eacute;t&eacute;s &agrave; l’aide d’une seule balise de propri&eacute;t&eacute;.
Par exemple, la propri&eacute;t&eacute; font permet de d&eacute;finir les propri&eacute;t&eacute;s font-style, font-variant,
font-weight, font-size, line-height et font-family sur une seule ligne de syntaxe.
290
Chapitre 13 : Insertion et mise en forme de texte
Il est important de savoir que sous forme courte, les propri&eacute;t&eacute;s dont la valeur est omise re&ccedil;oivent
leur valeur par d&eacute;faut. Certaines pages risquent donc d’&ecirc;tre incorrectement affich&eacute;es lorsque
plusieurs styles CSS sont attribu&eacute;s &agrave; la m&ecirc;me balise.
Par exemple, la balise H1 ci-dessous utilise la syntaxe longue. Remarquez que les propri&eacute;t&eacute;s fontvariant, font-stretch, font-size-adjust et font-style ont re&ccedil;u leur valeur par d&eacute;faut.
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: aucune
}
Ins&eacute;r&eacute;e en tant que propri&eacute;t&eacute; unique sous forme courte, la m&ecirc;me balise se pr&eacute;sente ainsi :
H1 { font: bold 16pt/18pt Arial }
Sous forme courte, les propri&eacute;t&eacute;s dont la valeur est omise re&ccedil;oivent automatiquement leur valeur
par d&eacute;faut. Ainsi, l’exemple de forme courte ci-dessus omet les balises font-variant, fontstretch, font-size-adjust et font-style.
Si des styles sont d&eacute;finis en plusieurs emplacements (par exemple, incorpor&eacute;s dans une page
HTML et import&eacute;s d’une feuille de style externe) sous deux formes, longue et courte, n’oubliez
pas que les propri&eacute;t&eacute;s omises risquent d’&eacute;craser les propri&eacute;t&eacute;s explicitement d&eacute;finies dans un autre
style. (On parle de cascade de styles.)
Dreamweaver utilise donc la forme longue par d&eacute;faut, afin d’&eacute;viter les probl&egrave;mes qui risquent de
survenir lorsqu’un style CSS r&eacute;dig&eacute; sous forme courte en &eacute;crase un autre sous forme longue. Si
vous ouvrez une page Web cod&eacute;e sous forme courte dans Dreamweaver, n’oubliez pas que
Dreamweaver cr&eacute;e tous les nouveaux styles CSS sous forme longue. Pour sp&eacute;cifier la fa&ccedil;on dont
Dreamweaver cr&eacute;e et modifie les styles CSS, vous pouvez modifier les pr&eacute;f&eacute;rences de modification
CSS dans la cat&eacute;gorie Styles CSS de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences (Edition &gt; Pr&eacute;f&eacute;rences dans
Windows ; Dreamweaver &gt; Pr&eacute;f&eacute;rences dans Macintosh).
Remarque : Les onglets CSS pertinents et Propri&eacute;t&eacute;s CSS cr&eacute;ent uniquement des styles CSS sous
forme longue. Si vous cr&eacute;ez une page ou une feuille de style CSS &agrave; l’aide des onglets CSS pertinents
ou Propri&eacute;t&eacute;s CSS, n’oubliez pas que le codage manuel de styles CSS sous forme courte risque de
provoquer l’&eacute;crasement des propri&eacute;t&eacute;s cr&eacute;&eacute;es sous forme longue par celles qui ont &eacute;t&eacute; cr&eacute;&eacute;es sous
forme courte. Il est donc pr&eacute;f&eacute;rable de cr&eacute;er vos styles CSS sous forme longue.
Rubriques connexes
• A propos des conflits de styles CSS, page 290
• L’onglet CSS pertinents, page 293
• L’onglet Propri&eacute;t&eacute;s CSS, page 293
A propos du formatage de texte dans Dreamweaver
291
Inspecteur de propri&eacute;t&eacute;s et formatage de texte
L’inspecteur de propri&eacute;t&eacute;s vous permet de mettre en forme et d’appliquer un style au texte
s&eacute;lectionn&eacute;. Lorsque vous effectuez ces op&eacute;rations, Dreamweaver conserve en m&eacute;moire les
propri&eacute;t&eacute;s de formatage appliqu&eacute;es &agrave; chaque &eacute;l&eacute;ment de texte et attribue &agrave; chacun une &eacute;tiquette
en les nommant de la mani&egrave;re suivante : Style1, Style2, Style3, Stylen. Si vous appliquez les
m&ecirc;mes attributs de formatage &agrave; plusieurs &eacute;l&eacute;ments de texte, Dreamweaver leur donne le m&ecirc;me
titre d’&eacute;tiquette, &eacute;liminant ainsi toute redondance dans les noms de style. L’&eacute;tiquette appliqu&eacute;e
par Dreamweaver &agrave; un corps de texte donn&eacute; peut alors &ecirc;tre appliqu&eacute;e &agrave; l’aide du menu d&eacute;roulant
Style. Vous pouvez ainsi constituer une biblioth&egrave;que de styles &agrave; l’int&eacute;rieur d’une page et appliquer
ces styles en s&eacute;lectionnant simplement l’&eacute;l&eacute;ment de texte sur la page et un style dans le menu
d&eacute;roulant Style. Vous pouvez renommer les styles afin d’en faciliter l’identification, par exemple
En-t&ecirc;te1, En-t&ecirc;te2, Corps et Tableau.
Le menu contextuel Style affiche les deux noms du style de votre page et propose un aper&ccedil;u des
propri&eacute;t&eacute;s du style. Les propri&eacute;t&eacute;s indiqu&eacute;es dans l’aper&ccedil;u sont la famille, la taille et l’&eacute;paisseur de
la police, ainsi que la couleur du texte et de l’arri&egrave;re-plan.
Rubriques connexes
•
•
•
•
292
Mise en forme des paragraphes, page 297
D&eacute;finition et modification des polices et styles, page 300
Changement de nom d’un style, page 301
Utilisation des feuilles de style en cascade, page 304
Chapitre 13 : Insertion et mise en forme de texte
L’onglet CSS pertinents
L’onglet CSS pertinents permet d’effectuer le suivi des r&egrave;gles CSS appliqu&eacute;es &agrave; l’&eacute;l&eacute;ment de texte
s&eacute;lectionn&eacute; et de modifier les propri&eacute;t&eacute;s de la r&egrave;gle. Situ&eacute; dans l’inspecteur de balises (Fen&ecirc;tre &gt;
Inspecteur de balises), l’onglet CSS pertinents est constitu&eacute; de deux sections. La partie sup&eacute;rieure
indique les r&egrave;gles qui s’appliquent &agrave; la s&eacute;lection en cours ainsi que les balises affect&eacute;es. La partie
inf&eacute;rieure affiche les propri&eacute;t&eacute;s de l’&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans une grille modifiable. Les propri&eacute;t&eacute;s
sont class&eacute;es par ordre alphab&eacute;tique, les propri&eacute;t&eacute;s utilis&eacute;es &eacute;tant plac&eacute;es en haut de l’onglet. Les
propri&eacute;t&eacute;s utilis&eacute;es dans la s&eacute;lection s’affichent en bleu, les autres s’affichent en rouge et sont
barr&eacute;es. Si vous placez le curseur de la souris sur une r&egrave;gle &eacute;trang&egrave;re &agrave; la s&eacute;lection, un message
d’explication s’affiche. Dans la plupart des cas, il s’agit de propri&eacute;t&eacute;s &eacute;cras&eacute;es par d’autres ou de
propri&eacute;t&eacute;s qui ne sont pas h&eacute;rit&eacute;es.
Vous pouvez &eacute;galement modifier les propri&eacute;t&eacute;s d’une s&eacute;lection &agrave; l’aide de la partie inf&eacute;rieure du
panneau de l’onglet CSS pertinents. La grille modifiable vous permet de modifier les valeurs des
propri&eacute;t&eacute;s affich&eacute;es. Toute modification apport&eacute;e &agrave; une s&eacute;lection s’applique imm&eacute;diatement, ce
qui vous permet d’avoir un aper&ccedil;u direct de votre travail.
Rubriques connexes
•
•
•
•
Utilisation du panneau Styles CSS, page 305
Utilisation de l’onglet CSS pertinents, page 306
Cr&eacute;ation d’un style CSS, page 308
Modification d’attributs dans l’inspecteur de balises, page 456
L’onglet Propri&eacute;t&eacute;s CSS
L’onglet Propri&eacute;t&eacute;s CSS affiche les propri&eacute;t&eacute;s de la r&egrave;gle s&eacute;lectionn&eacute;e dans le panneau Styles CSS
(Fen&ecirc;tre &gt; Styles CSS), en mode Code (Affichage &gt; Code) ou en double-cliquant sur une r&egrave;gle ou
une propri&eacute;t&eacute; dans l’onglet CSS pertinents (Fen&ecirc;tre &gt; Inspecteur de balises).
Remarque : L’onglet Propri&eacute;t&eacute;s CSS s’affiche uniquement lorsque vous s&eacute;lectionnez une r&egrave;gle dans
le panneau Styles CSS ou en mode Code ou bien lorsque vous double-cliquez sur une r&egrave;gle ou une
propri&eacute;t&eacute; dans l’onglet CSS pertinents. Pour revenir &agrave; l’onglet CSS pertinents, s&eacute;lectionnez un
&eacute;l&eacute;ment de texte sur une page HTML active.
A propos du formatage de texte dans Dreamweaver
293
L’onglet Propri&eacute;t&eacute;s CSS permet d’afficher facilement les param&egrave;tres de propri&eacute;t&eacute; d’une r&egrave;gle et de
modifier rapidement un style CSS incorpor&eacute; dans le document en cours ou li&eacute; par l’interm&eacute;diaire
d’une feuille de style jointe. La grille modifiable vous permet de modifier les valeurs des propri&eacute;t&eacute;s
affich&eacute;es. Toute modification apport&eacute;e &agrave; une s&eacute;lection s’applique imm&eacute;diatement, ce qui vous
permet d’avoir un aper&ccedil;u direct de votre travail.
Vous pouvez choisir d’afficher les propri&eacute;t&eacute;s par ordre alphab&eacute;tique ou par cat&eacute;gories en cliquant
sur les boutons Afficher la vue par cat&eacute;gorie ou Afficher la vue sous forme de liste, situ&eacute;s dans le
coin sup&eacute;rieur gauche de l’onglet Propri&eacute;t&eacute;s CSS.
r&eacute;partit les propri&eacute;t&eacute;s CSS prises en charge par Dreamweaver en huit
cat&eacute;gories distinctes : police, arri&egrave;re-plan, bloc, bordure, bo&icirc;te, liste, positionnement et
extensions. Les propri&eacute;t&eacute;s de chaque cat&eacute;gorie sont conserv&eacute;es dans une liste que vous pouvez
d&eacute;velopper ou r&eacute;duire en cliquant sur le bouton plus (+) en regard de la cat&eacute;gorie de votre choix.
Les propri&eacute;t&eacute;s de chaque cat&eacute;gorie sont tri&eacute;es par ordre alphab&eacute;tique. Les propri&eacute;t&eacute;s utilis&eacute;es sont
plac&eacute;es en t&ecirc;te de liste et sont affich&eacute;es en bleu. La vue par cat&eacute;gories constitue la vue par d&eacute;faut.
La vue par cat&eacute;gories
La vue sous forme de liste affiche toutes les propri&eacute;t&eacute;s CSS prises en charge par Dreamweaver
par ordre alphab&eacute;tique. Les propri&eacute;t&eacute;s utilis&eacute;es sont plac&eacute;es en t&ecirc;te de liste et sont affich&eacute;es en bleu
(voir l’illustration ci-dessous).
Rubriques connexes :
•
•
•
•
•
L’onglet CSS pertinents, page 293
Utilisation du panneau Styles CSS, page 305
Utilisation de l’onglet CSS pertinents, page 306
Utilisation de l’onglet Propri&eacute;t&eacute;s CSS, page 307
Modification d’attributs dans l’inspecteur de balises, page 456
Insertion de texte
Dreamweaver vous permet d’ins&eacute;rer facilement du texte dans un document. Vous pouvez le taper
directement, effectuer un copier/coller ou r&eacute;aliser une importation. Vous pouvez &eacute;galement
ins&eacute;rer des espaces suppl&eacute;mentaires entre les caract&egrave;res et les lignes de votre texte.
294
Chapitre 13 : Insertion et mise en forme de texte
Ajout de texte dans un document
Pour ajouter du texte dans un document Dreamweaver, vous pouvez le saisir directement dans la
fen&ecirc;tre du document ou effectuer un copier/coller. Il est &eacute;galement possible d’importer du texte
depuis d’autres documents (voir Importation de documents contenant des donn&eacute;es tabulaires,
page 295).
Pour ajouter du texte dans un document, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Tapez le texte directement dans la fen&ecirc;tre de document.
• Copiez du texte &agrave; partir d’une autre application, passez dans Dreamweaver, placez le point
d’insertion dans la fen&ecirc;tre de document en mode Cr&eacute;ation, puis choisissez Edition &gt; Coller.
Dreamweaver ne conserve pas la mise en forme du texte de l’autre application, mais les sauts de
ligne sont pr&eacute;serv&eacute;s.
Importation de documents contenant des donn&eacute;es tabulaires
Vous pouvez importer des donn&eacute;es tabulaires dans un document en enregistrant d’abord ces
fichiers (tels que des fichiers Microsoft Excel ou d’une base de donn&eacute;es) sous forme de fichiers
texte d&eacute;limit&eacute;s.
Pour plus d’informations sur l’importation et le formatage de donn&eacute;es de tableau, voir
Importation et exportation de donn&eacute;es tabulaires, page 176. Pour plus d’informations sur
l’importation de texte &agrave; partir de documents HTML Microsoft Word, voir Ouverture de
documents existants, page 79.
Vous pouvez &eacute;galement ajouter du texte provenant d’un document MS Excel dans un document
Dreamweaver en effectuant un copier/coller du contenu du fichier Excel dans une page Web (voir
Copie et collage de texte &agrave; partir de documents MS Office, page 295).
Pour importer des donn&eacute;es tabulaires :
1 Choisissez Fichier &gt; Importer &gt; Importer les donn&eacute;es tabulaires ou Insertion &gt; Objets du
2
3
4
5
tableau &gt; Importer les donn&eacute;es tabulaires.
La bo&icirc;te de dialogue Importer le tableau s’affiche.
Recherchez le fichier souhait&eacute; ou entrez son nom dans la zone de texte.
S&eacute;lectionnez le d&eacute;limiteur utilis&eacute; lors de l’enregistrement du fichier en tant que texte d&eacute;limit&eacute;.
Les options sont Tab, Virgule, Point-virgule, Deux points et Autre.
Si vous s&eacute;lectionnez Autre, un champ vierge s’affiche &agrave; c&ocirc;t&eacute; de l’option. Entrez le caract&egrave;re
utilis&eacute; comme d&eacute;limiteur.
Utilisez les options restantes pour formater ou d&eacute;finir le tableau dans lequel importer les
donn&eacute;es.
Une fois termin&eacute;, cliquez sur OK.
Copie et collage de texte &agrave; partir de documents MS Office
Vous pouvez ajouter le contenu d’un document Word ou Excel dans une page Web nouvelle ou
existante.
Remarque : La taille du fichier, apr&egrave;s conversion au format HTML par Dreamweaver, doit &ecirc;tre
inf&eacute;rieure &agrave; 300 Ko.
Insertion de texte
295
Lorsque vous ajoutez du contenu &agrave; une page Web, Dreamweaver convertit ce contenu au
format HTML et le copie dans votre page Web. Vous pouvez modifier le contenu dans
Dreamweaver. Les modifications apport&eacute;es au fichier original n’apparaissent pas sur votre
site Web.
Remarque : Si vous utilisez Microsoft Office 97, il n’est pas possible d’ajouter le contenu d’un
document Word ou Excel. Vous devez ins&eacute;rer un lien vers le document. Pour plus d’informations, voir
Insertion d’un lien vers un document Word ou Excel, page 296.
Pour ajouter le contenu d’un document Word ou Excel &agrave; une page Web nouvelle ou
existante :
1 Ouvrez la page Web dans laquelle copier le contenu du document Word ou Excel.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour s&eacute;lectionner le fichier :
D&eacute;placez le fichier de son emplacement actuel vers la page o&ugrave; le contenu doit s’afficher. Si la
bo&icirc;te de dialogue Ins&eacute;rer un document Microsoft Word ou Excel s’affiche, cliquez sur
l’option d’insertion du document dans la page Web, puis cliquez sur OK.
■ Choisissez Fichier &gt; Importer &gt; Document Word ou Fichier &gt; Importer &gt; Document Excel.
Dans la bo&icirc;te de dialogue Ouvrir, recherchez le fichier &agrave; ajouter, puis cliquez sur Ouvrir.
Le contenu du document Word ou Excel s’affiche dans votre page.
■
Insertion d’un lien vers un document Word ou Excel
Vous pouvez ins&eacute;rer un lien vers un document Microsoft Word ou Excel dans une page existante.
Pour cr&eacute;er un lien vers un document Word ou Excel :
1 Ouvrez la page o&ugrave; le lien doit &ecirc;tre affich&eacute;.
2 Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver sur laquelle vous
voulez que le lien apparaisse.
La bo&icirc;te de dialogue Ins&eacute;rer un document Microsoft Word ou Excel s’affiche.
3 S&eacute;lectionnez Cr&eacute;er un lien, puis cliquez sur OK.
4 Si le document vers lequel vous cr&eacute;ez un lien r&eacute;side hors du dossier racine de votre site,
Dreamweaver vous invite &agrave; le copier dans ce dossier.
En copiant le document dans le dossier racine du site, vous &ecirc;tes assur&eacute; que le document sera
disponible lors de la publication du site Web.
5 Un lien vers le document Word ou Excel s’affiche dans la page.
Le texte du lien est identique au nom du fichier cible du lien. Pour modifier ce texte apr&egrave;s
cr&eacute;ation du lien, voir Gestion des liens, page 340.
Mise en forme de paragraphes et structure du document
Dreamweaver prend en charge l’ensemble des &eacute;l&eacute;ments de mise en forme de page et d’objet
standard. Cette section indique comment formater des paragraphes et comment ins&eacute;rer des barres
horizontales ainsi que la date.
Rubriques connexes
• D&eacute;finition des propri&eacute;t&eacute;s de page, page 270
• texte, page 297
• Mise en retrait du texte, page 297
296
Chapitre 13 : Insertion et mise en forme de texte
• Ajout d’espacements de paragraphe, page 298
• Utilisation de barres horizontales, page 298
• Insertion de dates, page 303
Mise en forme des paragraphes
Utilisez le menu d&eacute;roulant Format de l’inspecteur de propri&eacute;t&eacute;s ou le sous-menu Texte &gt; Format
de paragraphe pour appliquer des balises standard de paragraphe et d’en-t&ecirc;te.
Pour appliquer une balise de paragraphe ou d’en-t&ecirc;te :
1 Placez le point d’insertion dans le paragraphe, ou s&eacute;lectionnez une partie du texte du
paragraphe.
2 S&eacute;lectionnez Texte &gt; Format de paragraphe ou le menu d&eacute;roulant Format de l’inspecteur de
propri&eacute;t&eacute;s, puis s&eacute;lectionnez une option :
■ Choisissez un format de paragraphe (par exemple, En-t&ecirc;te 1, En-t&ecirc;te 2, Texte pr&eacute;-format&eacute;,
etc.). La balise HTML associ&eacute;e au style choisi (par exemple, h1 pour En-t&ecirc;te 1, h2 pour Ent&ecirc;te 2, pre pour Texte pr&eacute;-format&eacute;, etc.) est appliqu&eacute;e &agrave; tout le paragraphe.
■ Choisissez Aucun pour supprimer un format de paragraphe.
Lorsque vous appliquez une balise d’en-t&ecirc;te &agrave; un paragraphe, Dreamweaver ins&egrave;re
automatiquement la ligne de texte suivante comme un paragraphe. Pour modifier ce param&egrave;tre,
choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh), puis
assurez-vous que l’option Passer en paragraphe normal apr&egrave;s le titre est d&eacute;sactiv&eacute;e dans les
Options d’&eacute;dition de la cat&eacute;gorie G&eacute;n&eacute;ral.
texte
Vous pouvez aligner le texte sur la page en utilisant l’inspecteur de propri&eacute;t&eacute;s ou &agrave; partir du sousmenu Texte &gt; Aligner. Vous pouvez centrer un &eacute;l&eacute;ment sur la page &agrave; l’aide de la commande
Texte &gt; Aligner &gt; Centre.
Pour aligner du texte :
1 S&eacute;lectionnez le texte &agrave; aligner ou ins&eacute;rez le pointeur au d&eacute;but du texte.
2 Cliquez sur l’une des options d’alignement (Gauche, Droite ou Centre) dans l’inspecteur de
propri&eacute;t&eacute;s ou choisissez Texte &gt; Aligner, puis une commande d’alignement.
Pour centrer des &eacute;l&eacute;ments :
1 S&eacute;lectionnez l’&eacute;l&eacute;ment (image, plug-in, tableau ou tout autre &eacute;l&eacute;ment de la page) que vous
d&eacute;sirez aligner au centre.
2 Choisissez Texte &gt; Aligner &gt; Centre.
Remarque : Vous pouvez aligner et centrer des blocs de texte complets ; par contre, vous ne pouvez
pas aligner ou centrer une partie d’un en-t&ecirc;te ou d’un paragraphe.
Mise en retrait du texte
La commande Retrait applique la balise HTML blockquote &agrave; un paragraphe de texte, ce qui a
pour effet de renfoncer le texte de chaque c&ocirc;t&eacute; de la page.
Pour ins&eacute;rer un retrait ou le supprimer :
1 Placez le point d’insertion &agrave; l’emplacement o&ugrave; ins&eacute;rer le retrait.
Mise en forme de paragraphes et structure du document
297
2 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur le bouton Retrait ou Retrait n&eacute;gatif, choisissez
Texte &gt; Retrait ou Retrait n&eacute;gatif ou choisissez Liste &gt; Retrait ou Retrait n&eacute;gatif dans le menu
contextuel.
Remarque : Un paragraphe accepte plusieurs indentations. Chaque application de cette commande
produit un retrait suppl&eacute;mentaire du texte de chaque c&ocirc;t&eacute; du document.
Ajout d’espacements de paragraphe
Dreamweaver fonctionne comme une application classique de traitement de texte : Appuyez sur
la touche Entr&eacute;e (Windows) ou Retour (Macintosh) pour commencer un nouveau paragraphe.
Les navigateurs Web ins&egrave;rent automatiquement une ligne vierge entre les paragraphes. Vous
pouvez vous-m&ecirc;me espacer les paragraphes d’une ligne vierge en ins&eacute;rant un saut de ligne.
Pour ins&eacute;rer un saut de paragraphe :
• Appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Pour ins&eacute;rer un saut de ligne, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Appuyez sur les touches Maj+Entr&eacute;e (Windows) ou Maj+Retour (Macintosh).
• Dans la cat&eacute;gorie Texte de la barre Ins&eacute;rer, choisissez Caract&egrave;res et cliquez sur l’ic&ocirc;ne Saut de
•
ligne.
Choisissez Insertion &gt; HTML &gt; Caract&egrave;res sp&eacute;ciaux &gt; Saut de ligne.
Utilisation de barres horizontales
Les barres (lignes) horizontales sont utiles pour organiser les informations. Sur une page, le texte
et les objets peuvent &ecirc;tre visuellement s&eacute;par&eacute;s par une ou plusieurs barres.
Pour cr&eacute;er une barre horizontale :
1 Dans la fen&ecirc;tre de document, placez le curseur l&agrave; o&ugrave; vous voulez ins&eacute;rer une barre horizontale.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Insertion &gt; HTML &gt; Barre horizontale.
Dans la cat&eacute;gorie HTML de la barre Ins&eacute;rer, cliquez sur le bouton Barre horizontale.
Pour modifier une barre horizontale :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez la barre horizontale.
2 Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur de propri&eacute;t&eacute;s et modifier les propri&eacute;t&eacute;s
selon vos besoins :
L et H : sp&eacute;cifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de
la page.
Aligner : sp&eacute;cifie l’alignement de la barre (Par d&eacute;faut, Gauche, Centre ou Droite). Ce
param&eacute;trage ne s’applique que si la largeur de la barre est inf&eacute;rieure &agrave; celle de la fen&ecirc;tre du
navigateur.
Ombrage : sp&eacute;cifie si la barre est accompagn&eacute;e d’un effet d’ombre port&eacute;e. D&eacute;sactivez cette
option pour dessiner la barre en couleur pleine.
298
Chapitre 13 : Insertion et mise en forme de texte
Cr&eacute;ation de liste &agrave; puces ou num&eacute;rot&eacute;es
Vous pouvez cr&eacute;er des listes num&eacute;rot&eacute;es (tri&eacute;es), des listes &agrave; puces (non tri&eacute;es) et des listes de
d&eacute;finitions &agrave; partir d’un texte existant ou d’un nouveau texte que vous tapez dans la fen&ecirc;tre de
document.
Les listes de d&eacute;finitions n’utilisent pas de caract&egrave;res d’en-t&ecirc;te tels que des puces ou des nombres et
sont souvent utilis&eacute;es dans les glossaires ou les descriptions. Les listes peuvent &eacute;galement &ecirc;tre
imbriqu&eacute;es, c’est-&agrave;-dire qu’elles contiennent d’autres listes. Par exemple, vous pouvez imbriquer
une liste num&eacute;rot&eacute;e ou &agrave; puces au sein d’une autre liste de m&ecirc;me type.
Pour plus d’informations sur la d&eacute;finition d’un type de liste sp&eacute;cifique et d’autres options de liste
pour une liste compl&egrave;te ou un &eacute;l&eacute;ment de liste donn&eacute; (par exemple, la num&eacute;rotation ou l’emploi
des chiffres romains dans une liste num&eacute;rot&eacute;e ou la d&eacute;finition de puces carr&eacute;es), voir D&eacute;finition
des options relatives aux propri&eacute;t&eacute;s des listes dans l’aide de Dreamweaver.
Pour cr&eacute;er une liste :
1 Dans le document Dreamweaver, placez le point d’insertion &agrave; l’emplacement o&ugrave; ins&eacute;rer la liste,
puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Cliquez sur le bouton Liste simple ou Liste num&eacute;rot&eacute;e dans l’inspecteur de propri&eacute;t&eacute;s.
■ Choisissez Texte &gt; Liste, puis s&eacute;lectionnez le type de liste qui vous convient : Liste simple (&agrave;
puces), Liste num&eacute;rot&eacute;e ou Liste de d&eacute;finitions.
Le caract&egrave;re de t&ecirc;te de l’&eacute;l&eacute;ment de liste sp&eacute;cifi&eacute; appara&icirc;t dans la fen&ecirc;tre de document.
2 Tapez le texte de l’&eacute;l&eacute;ment de la liste, puis appuyez sur la touche Entr&eacute;e (Windows) ou Retour
(Macintosh) pour cr&eacute;er un autre &eacute;l&eacute;ment de liste.
3 Pour marquer la fin de la liste, appuyez &agrave; deux reprises sur la touche Entr&eacute;e (Windows) ou
Retour (Macintosh).
Pour cr&eacute;er une liste &agrave; partir d’un texte existant :
1 S&eacute;lectionnez une suite de paragraphes pour les transformer en liste.
2 Cliquez sur le bouton Liste simple ou Liste num&eacute;rot&eacute;e dans l’inspecteur de propri&eacute;t&eacute;s ou
choisissez Texte &gt; Liste, puis s&eacute;lectionnez le type de liste d&eacute;sir&eacute; : Liste simple, Liste num&eacute;rot&eacute;e
ou Liste de d&eacute;finitions.
Pour cr&eacute;er une liste imbriqu&eacute;e :
1 S&eacute;lectionnez les &eacute;l&eacute;ments de liste &agrave; imbriquer.
2 Cliquez sur le bouton Retrait de l’inspecteur de propri&eacute;t&eacute;s ou choisissez Texte &gt; Retrait.
Dreamweaver met le texte en retrait et cr&eacute;e une liste individuelle avec les attributs HTML de la
liste d’origine.
3 Appliquez un nouveau style ou type de liste au texte en retrait en suivant la m&ecirc;me proc&eacute;dure
que celle utilis&eacute;e ci-dessus.
Mise en forme de paragraphes et structure du document
299
Mise en forme de texte
Vous pouvez appliquer un formatage de texte &agrave; une seule lettre, &agrave; des paragraphes entiers du site
ou encore &agrave; des blocs de texte.
Rubriques connexes
•
•
•
•
•
•
Modification des combinaisons de polices, page 301
Modification de la couleur du texte, page 302
Insertion de dates, page 303
Insertion de caract&egrave;res sp&eacute;ciaux, page 303
Ajout d’espacements entre les caract&egrave;res, page 304
Cr&eacute;ation d’un style CSS, page 308
D&eacute;finition et modification des polices et styles
Utilisez les options de l’inspecteur de propri&eacute;t&eacute;s ou le menu Texte pour d&eacute;finir ou modifier les
caract&eacute;ristiques de la police du texte s&eacute;lectionn&eacute;. Vous pouvez d&eacute;finir le type, le style (par
exemple, gras ou italique) et la taille d’une police de caract&egrave;res.
Pour d&eacute;finir ou modifier des caract&eacute;ristiques de police :
1 S&eacute;lectionnez le texte. Si aucun texte n’est s&eacute;lectionn&eacute;, le changement s’appliquera au texte que
vous taperez ensuite.
2 Faites votre choix parmi les options suivantes :
■ Pour changer de police de caract&egrave;res, choisissez une combinaison de polices dans
l’inspecteur de propri&eacute;t&eacute;s ou dans Texte &gt; Police.
Choisissez Par d&eacute;faut pour supprimer les polices pr&eacute;alablement appliqu&eacute;es. Cette option
applique la police par d&eacute;faut au texte s&eacute;lectionn&eacute; (en l’occurrence, la police par d&eacute;faut du
navigateur ou la police affect&eacute;e &agrave; cette balise dans une feuille de style CSS).
■ Pour changer de style de police, cliquez sur Gras ou Italique dans l’inspecteur de propri&eacute;t&eacute;s
ou choisissez un style de police (Gras, Italique, Soulign&eacute;, etc.) dans le sous-menu Texte &gt;
Style.
Remarque : Lorsque vous utilisez l’inspecteur de propri&eacute;t&eacute;s pour appliquer un style gras ou
italique, Dreamweaver applique automatiquement la balise&lt;strong&gt; ou &lt;em&gt;, respectivement.
Si vous concevez des pages pour des utilisateurs disposant de navigateurs de version 3.0 ou
ult&eacute;rieure, vous devez modifier cette pr&eacute;f&eacute;rence dans la cat&eacute;gorie G&eacute;n&eacute;ral de la bo&icirc;te de
dialogue Pr&eacute;f&eacute;rences (Edition &gt; Pr&eacute;f&eacute;rences).
■
300
Pour changer la taille de la police de caract&egrave;res, choisissez une taille (de 1 &agrave; 7) dans
l’inspecteur de propri&eacute;t&eacute;s ou dans Texte &gt; Taille.
En langage HTML, les tailles de polices sont exprim&eacute;es en valeurs relatives, et non
sp&eacute;cifiques, de points. L’utilisateur d&eacute;finit la taille, en points, de la police par d&eacute;faut de son
navigateur ; c’est cette taille de police qui est utilis&eacute;e si vous choisissez Par d&eacute;faut ou 3 dans
l’inspecteur de propri&eacute;t&eacute;s ou via le sous-menu Texte &gt; Taille. Les tailles 1 et 2 sont plus
petites que la taille par d&eacute;faut ; les tailles 4 &agrave; 7 sont plus grandes. De plus, les polices
semblent g&eacute;n&eacute;ralement plus grandes sous Windows que sur Macintosh, bien qu’Internet
Explorer 5 pour Macintosh utilise la m&ecirc;me taille de police par d&eacute;faut que Windows.
Chapitre 13 : Insertion et mise en forme de texte
Conseil : Afin que la taille de la police reste homog&egrave;ne, vous pouvez utiliser des feuilles de
style CSS pour d&eacute;finir la taille en pixels. Pour plus d’informations sur les feuilles de style CSS,
voir Utilisation des feuilles de style en cascade, page 304.
■
Pour augmenter ou diminuer la taille de la police du texte s&eacute;lectionn&eacute;, choisissez une taille
relative (de + ou -1 &agrave; +4 ou -3) dans l’inspecteur de propri&eacute;t&eacute;s ou via Texte &gt; Modification
des dimensions.
Remarque : Ces valeurs indiquent une diff&eacute;rence relative par rapport &agrave; la taille d&eacute;finie par
basefont. La valeur par d&eacute;faut de basefont est 3. Ainsi, une valeur de +4 donne une taille de
police de 3 + 4 ou 7. 7 est la somme maximale des valeurs de taille de police. Si vous essayez
de d&eacute;finir des valeurs plus &eacute;lev&eacute;es, elles s’affichent en tant que 7. Dreamweaver n’affiche pas la
balise basefont (qui peut figurer dans la section head), mais la taille de police doit s’afficher
correctement dans un navigateur. Pour tester ceci, comparez un texte d&eacute;fini sur 3 et un texte
d&eacute;fini sur +3.
Changement de nom d’un style
Lors de la mise en forme de texte, Dreamweaver conserve en m&eacute;moire les styles cr&eacute;&eacute;s sur chaque
page et constitue une biblioth&egrave;que de styles pouvant &ecirc;tre r&eacute;utilis&eacute;s. Ceci facilite l’application d’un
m&ecirc;me style &agrave; plusieurs blocs de texte. La pr&eacute;sentation de vos pages est ainsi plus coh&eacute;rente.
Pour renommer un style :
1 Choisissez Renommer dans le menu d&eacute;roulant Style de l’inspecteur de propri&eacute;t&eacute;s du texte.
La bo&icirc;te de dialogue Renommer un style s’affiche.
2 S&eacute;lectionnez le style &agrave; renommer dans le menu contextuel Renommer un style.
3 Entrez un nouveau nom dans le champ Nouveau nom.
4 Cliquez sur OK.
Modification des combinaisons de polices
Pour d&eacute;finir la combinaison de polices qui appara&icirc;t dans l’inspecteur de propri&eacute;t&eacute;s et dans Texte &gt;
Police, utilisez la commande Modifier la liste des polices.
Les combinaisons de polices de caract&egrave;res d&eacute;terminent la fa&ccedil;on dont le texte des pages Web est
affich&eacute; par les navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisie, la
premi&egrave;re police install&eacute;e sur l’ordinateur de l’utilisateur. Si aucune des polices de cette
combinaison n’est install&eacute;e, le navigateur affiche le texte avec la police par d&eacute;faut indiqu&eacute;e dans
ses pr&eacute;f&eacute;rences.
Pour modifier les combinaisons de polices :
1 Choisissez Texte &gt; Police &gt; Modifier la liste des polices.
2 Choisissez la combinaison de polices dans la liste qui appara&icirc;t en haut de la bo&icirc;te de dialogue.
Les polices de la combinaison s&eacute;lectionn&eacute;e apparaissent dans la liste Polices choisies, dans le
coin inf&eacute;rieur gauche de la bo&icirc;te de dialogue. Une liste de toutes les polices disponibles
install&eacute;es sur votre syst&egrave;me se trouve &agrave; sa droite.
Mise en forme de texte
301
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
■
Pour ajouter ou retirer des polices d’une combinaison, cliquez selon le cas sur l’un des
boutons &lt;&lt; ou &gt;&gt; qui se trouvent entre les listes Polices choisies et Polices disponibles.
Pour ajouter ou supprimer une combinaison de polices, cliquez selon le cas sur l’un des
boutons plus (+) ou moins (-) qui se trouvent dans la partie sup&eacute;rieure de la bo&icirc;te de
dialogue.
Pour ajouter une police qui n’est pas install&eacute;e sur votre ordinateur, tapez son nom dans le
champ texte en dessous de la liste Polices disponibles, et cliquez sur le bouton &lt;&lt; pour
ajouter cette police &agrave; la combinaison courante. Il peut &ecirc;tre utile d’ajouter une police qui
n’est pas install&eacute;e sur votre syst&egrave;me, par exemple pour indiquer une police sp&eacute;cifique &agrave;
Windows lorsque vous travaillez sur un Macintosh.
Pour d&eacute;placer la combinaison de polices au sein de la liste, cliquez sur les boutons fl&eacute;ch&eacute;s en
haut de la bo&icirc;te de dialogue.
Pour ajouter une nouvelle combinaison &agrave; la liste des polices :
1 Choisissez Texte &gt; Police &gt; Modifier la liste des polices.
2 S&eacute;lectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton &lt;&lt; pour
l’ins&eacute;rer dans la liste Polices choisies.
3 R&eacute;p&eacute;tez l’&eacute;tape 2 pour chaque police n&eacute;cessaire dans la combinaison.
Pour ajouter une police qui n’est pas install&eacute;e sur votre ordinateur, tapez son nom dans le
champ texte en dessous de la liste Polices disponibles et cliquez sur le bouton &lt;&lt; pour ajouter
cette police &agrave; la combinaison courante. Il peut &ecirc;tre utile d’ajouter une police qui n’est pas
install&eacute;e sur votre syst&egrave;me, par exemple pour indiquer une police sp&eacute;cifique &agrave; Windows lorsque
vous travaillez sur un Macintosh.
4 Lorsque vous avez fini de choisir des polices, s&eacute;lectionnez une famille de polices g&eacute;n&eacute;rique dans
la liste Polices disponibles et cliquez sur le bouton &lt;&lt; pour l’ins&eacute;rer dans la liste Polices choisies.
Les familles g&eacute;n&eacute;riques de polices sont les suivantes : cursive, fantaisie, monospace (espacement
non proportionnel), sans-serif (espacement proportionnel sans empattement) et serif
(espacement proportionnel avec empattement). Si aucune des polices de la liste Polices
disponibles n’est disponible sur l’ordinateur de l’utilisateur, le texte appara&icirc;t dans la police par
d&eacute;faut associ&eacute;e &agrave; la famille de polices g&eacute;n&eacute;rique. Par exemple, avec la plupart des syst&egrave;mes
d’exploitation, la police non proportionnelle (monospace) par d&eacute;faut est Courier.
Modification de la couleur du texte
Vous pouvez modifier la couleur du texte s&eacute;lectionn&eacute;. La nouvelle couleur prend alors le dessus
sur la couleur de texte d&eacute;finie dans les propri&eacute;t&eacute;s de la page (si aucune couleur n’a &eacute;t&eacute; d&eacute;finie pour
le texte dans Propri&eacute;t&eacute;s de la page, le texte poss&egrave;de la couleur par d&eacute;faut, le noir).
Pour modifier la couleur du texte :
1 S&eacute;lectionnez le texte.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
302
Choisissez une couleur dans la palette en cliquant sur le s&eacute;lecteur de couleur dans
l’inspecteur de propri&eacute;t&eacute;s.
Choisissez Texte &gt; Couleur. Le s&eacute;lecteur de couleur syst&egrave;me s’affiche. S&eacute;lectionnez une
couleur, puis cliquez sur OK.
Chapitre 13 : Insertion et mise en forme de texte
■
■
Entrez le nom de la couleur ou une valeur hexad&eacute;cimale directement dans le champ de
l’inspecteur de propri&eacute;t&eacute;s.
Pour d&eacute;finir la couleur du texte par d&eacute;faut, utilisez la commande Modifier &gt; Propri&eacute;t&eacute;s de la
page (voir D&eacute;finition des couleurs par d&eacute;faut du texte, page 274).
Pour permettre au texte de reprendre la couleur par d&eacute;faut :
1 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur la case de couleur du texte pour ouvrir la palette de
couleurs s&eacute;curis&eacute;es pour le Web.
2 Cliquez sur le bouton Barr&eacute; (le carr&eacute; blanc barr&eacute; d’une ligne rouge, situ&eacute; dans l’angle sup&eacute;rieur
droit).
Insertion de dates
Dreamweaver comporte un objet Date pratique qui ins&egrave;re la date actuelle dans le format de votre
choix (avec ou sans heure), ainsi qu’une option pour mettre &agrave; jour cette date lorsque vous
enregistrez le fichier.
Remarque : Les dates et heures affich&eacute;es dans la bo&icirc;te de dialogue Ins&eacute;rer date ne repr&eacute;sentent pas
la date actuelle ni ne refl&egrave;tent les dates/heures visualis&eacute;es par un visiteur lorsqu’il affiche votre site.
Elles ne sont qu’un exemple de la mani&egrave;re dont vous souhaitez afficher ces informations.
Pour ins&eacute;rer la date courante dans un document :
1 Dans la fen&ecirc;tre de document, placez le curseur l&agrave; o&ugrave; vous d&eacute;sirez ins&eacute;rer la date.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Insertion &gt; Date.
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Date.
3 Dans la bo&icirc;te de dialogue qui appara&icirc;t alors, s&eacute;lectionnez un format d’affichage pour le jour de
la semaine, pour la date et pour l’heure.
4 Si vous d&eacute;sirez que cette date soit actualis&eacute;e &agrave; chaque nouvel enregistrement du document,
activez l’option Mettre &agrave; jour automatiquement lors de l’enregistrement. Si vous pr&eacute;f&eacute;rez que la
date soit ins&eacute;r&eacute;e comme du texte normal et ne soit jamais actualis&eacute;e, d&eacute;sactivez cette option.
5 Cliquez sur OK pour ins&eacute;rer la date.
■
■
Conseil : Si vous avez s&eacute;lectionn&eacute; Mettre &agrave; jour automatiquement lors de l’enregistrement, vous
pouvez modifier le format de la date apr&egrave;s l’avoir ins&eacute;r&eacute;e dans le document, en cliquant sur le texte
mis en forme et en s&eacute;lectionnant Modifier le format de date dans l’inspecteur de propri&eacute;t&eacute;s.
Insertion de caract&egrave;res sp&eacute;ciaux
Certains caract&egrave;res sp&eacute;ciaux sont repr&eacute;sent&eacute;s en HTML par un nom ou par un num&eacute;ro, qui est
alors appel&eacute; entit&eacute;. Le langage HTML pr&eacute;voit des noms d’entit&eacute;s pour de nombreux caract&egrave;res
sp&eacute;ciaux, par exemple le symbole &laquo; Copyright &raquo; (&amp;copy;), l’&laquo; esperluette &raquo; (&amp;amp;) et le symbole
&laquo; Marque d&eacute;pos&eacute;e &raquo; (trademark, &amp;reg;). Chaque entit&eacute; est repr&eacute;sent&eacute;e &agrave; la fois par un nom
HTML (par exemple &amp;mdash; pour le tiret cadratin) et son &eacute;quivalent num&eacute;rique (dans ce cas,
&amp;#151;).
Conseil : Le langage HTML utilise des crochets &lt;&gt; dans son code, mais vous devez exprimer les
caract&egrave;res sp&eacute;ciaux sup&eacute;rieur &agrave; et inf&eacute;rieur &agrave; sans que Dreamweaver les interpr&egrave;te comme du code.
Dans ce cas, utilisez &amp;gt; pour le signe sup&eacute;rieur &agrave; (&gt;) et &amp;it; pour le signe inf&eacute;rieur &agrave; (&lt;).
Mise en forme de texte
303
Malheureusement, certains navigateurs (certaines versions anciennes, ainsi que les navigateurs
autres que Netscape Navigator et Internet Explorer) n’affichent pas correctement la plupart de ces
entit&eacute;s.
Pour ins&eacute;rer un caract&egrave;re sp&eacute;cial dans un document :
1 Dans la fen&ecirc;tre de document, placez le curseur l&agrave; o&ugrave; vous voulez ins&eacute;rer un caract&egrave;re sp&eacute;cial.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez le nom du caract&egrave;re dans le sous-menu Insertion &gt; HTML &gt; Caract&egrave;res sp&eacute;ciaux.
Dans la cat&eacute;gorie Texte de la barre Ins&eacute;rer, cliquez sur le bouton Caract&egrave;res et choisissez le
caract&egrave;re de votre choix.
Conseil : Un grand nombre d’autres caract&egrave;res sp&eacute;ciaux sont disponibles. Pour en s&eacute;lectionner un,
choisissez Insertion &gt; HTML &gt; Caract&egrave;res sp&eacute;ciaux &gt; Autre ou choisissez la cat&eacute;gorie HTML de la
barre Ins&eacute;rer, cliquez sur le menu Caract&egrave;res, puis choisissez Autres caract&egrave;res. Choisissez un
caract&egrave;re dans la bo&icirc;te de dialogue Ins&eacute;rer autre caract&egrave;re et cliquez sur OK.
Ajout d’espacements entre les caract&egrave;res
Le langage HTML n’autorisant qu’un seul espace entre les caract&egrave;res, il convient d’ins&eacute;rer un
espace ins&eacute;cable afin d’ajouter un espace suppl&eacute;mentaire dans un document. Vous pouvez d&eacute;finir
une pr&eacute;f&eacute;rence pour l’insertion automatique d’un espace ins&eacute;cable dans un document.
Pour ins&eacute;rer un espace ins&eacute;cable, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Dans la cat&eacute;gorie HTML de la barre Ins&eacute;rer, cliquez sur le bouton Caract&egrave;res et choisissez
•
•
Ins&eacute;rer un espace ins&eacute;cable.
Choisissez Insertion &gt; HTML &gt; Caract&egrave;res sp&eacute;ciaux &gt; Espace ins&eacute;cable.
Appuyez sur les touches Contr&ocirc;le+Maj+Espace (Windows) ou Option+Espace (Macintosh).
Pour d&eacute;finir une pr&eacute;f&eacute;rence pour l’ajout d’espaces ins&eacute;cables :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 Dans la cat&eacute;gorie G&eacute;n&eacute;ral, assurez-vous que l’option Autoriser plusieurs espaces cons&eacute;cutifs est
activ&eacute;e.
Utilisation des feuilles de style en cascade
Par d&eacute;faut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en
forme. Les styles appliqu&eacute;s au texte &agrave; l’aide de l’inspecteur de propri&eacute;t&eacute;s ou des commandes de
menu g&eacute;n&egrave;rent des r&egrave;gles CSS int&eacute;gr&eacute;es &agrave; la section head du document. Les styles CSS offrent
plus de flexibilit&eacute; et un meilleur contr&ocirc;le sur l’aspect de votre page : positionnement pr&eacute;cis dans la
mise en page, utilisation de polices et de styles de texte sp&eacute;cifiques, etc.
Outre les styles et feuilles de style de votre composition, libre &agrave; vous d’utiliser les feuilles de style
livr&eacute;es avec Dreamweaver pour styliser vos documents (voir Cr&eacute;ation d’un document bas&eacute; sur un
fichier de conception Dreamweaver, page 76).
304
Chapitre 13 : Insertion et mise en forme de texte
Utilisation du panneau Styles CSS
Le panneau Styles CSS vous permet de cr&eacute;er, de modifier et de supprimer des styles CSS, mais
&eacute;galement d’attacher des feuilles de style externes aux documents.
Pour ouvrir le panneau Styles CSS :
• Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Fen&ecirc;tre &gt; Styles CSS.
■ Appuyez sur les touches Maj+F11.
Le panneau Styles CSS permet de consulter la d&eacute;finition des styles associ&eacute;s au document en
cours et la hi&eacute;rarchie des styles. Le panneau Styles CSS affiche la d&eacute;finition des styles CSS
personnalis&eacute;s (de classe), des balises HTML red&eacute;finies et des styles des s&eacute;lecteurs CSS.
■
Lorsque vous cr&eacute;ez ou attachez une feuille de style CSS, le nom et les attributs du style
apparaissent dans le panneau Styles CSS. Le panneau Styles CSS pr&eacute;sente une liste des
s&eacute;lecteurs d&eacute;finis dans toutes les balises de style et des feuilles de styles externes li&eacute;es ou
import&eacute;es. Lorsque vous cr&eacute;ez un style personnalis&eacute; (de classe), il appara&icirc;t dans le panneau
Styles CSS, dans le menu d&eacute;roulant Style de l’inspecteur de propri&eacute;t&eacute;s et dans le sous-menu
Texte &gt; Styles CSS.
Les boutons suivants sont situ&eacute;s au bas du panneau Styles CSS :
: affiche la bo&icirc;te de dialogue Ajouter une feuille de style externe.
S&eacute;lectionnez une feuille de style externe pour cr&eacute;er un lien vers le document actif ou l’importer
dans celui-ci. Pour plus d’informations sur l’association d’une feuille de style externe,
voir Exportation de styles pour cr&eacute;er une feuille de style CSS, page 310.
Attacher une feuille de style
: affiche la bo&icirc;te de dialogue Nouveau style CSS. Utilisez la bo&icirc;te de dialogue
Nouveau style CSS pour s&eacute;lectionner le type du style que vous cr&eacute;ez (par exemple, pour d&eacute;finir un
style de classe, red&eacute;finissez une balise HTML) ou pour d&eacute;finir un s&eacute;lecteur CSS. Pour plus
d’informations sur la cr&eacute;ation d’un nouveau style, voir Cr&eacute;ation d’un style CSS, page 308.
Nouveau style CSS
Utilisation des feuilles de style en cascade
305
: affiche la bo&icirc;te de dialogue D&eacute;finition du style CSS. Vous pouvez
modifier l’un des styles du document actif ou un style contenu dans une feuille de style externe.
Pour plus d’informations sur la mise &agrave; jour d’une feuille de style, voir Modification d’un style CSS,
page 312.
Modifier une feuille de style
: supprime le style s&eacute;lectionn&eacute; du panneau Styles CSS et supprime la
mise en forme de tous les &eacute;l&eacute;ments auxquels il est appliqu&eacute;.
Supprimer le style CSS
Remarque : Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextuel d’options
disponibles pour l’ex&eacute;cution des commandes de feuilles de style CSS.
Rubriques connexes
•
•
•
•
•
Cr&eacute;ation d’un style CSS, page 308
Application d’un style de classe, page 309
Liens vers ou importation d’une feuille de style CSS externe, page 310
Modification d’un style CSS, page 312
Modification d’une feuille de style CSS, page 313
Utilisation de l’onglet CSS pertinents
Affichez et modifiez les propri&eacute;t&eacute;s des &eacute;l&eacute;ments CSS s&eacute;lectionn&eacute;s dans le document en cours &agrave;
l’aide de l’onglet CSS pertinents. Il permet &eacute;galement d’afficher les r&egrave;gles qui s’appliquent &agrave; la
s&eacute;lection actuelle et les balises concern&eacute;es par ces r&egrave;gles.
Pour ouvrir l’onglet CSS pertinents :
1 Choisissez Fen&ecirc;tre &gt; Inspecteur de balises.
L’inspecteur de balises s’affiche.
2 Cliquez sur l’onglet CSS pertinents pour afficher les propri&eacute;t&eacute;s de la page en cours.
3 S&eacute;lectionnez un &eacute;l&eacute;ment de texte dans la page pour afficher ses propri&eacute;t&eacute;s.
L’onglet CSS pertinents affiche les r&egrave;gles CSS de la s&eacute;lection en cours, le nom et l’emplacement
du fichier contenant les r&egrave;gles CSS et les propri&eacute;t&eacute;s applicables de la r&egrave;gle.
Pour modifier une r&egrave;gle CSS &agrave; l’aide de l’onglet CSS pertinents, proc&eacute;dez de l’une des
mani&egrave;res suivantes :
• Double-cliquez sur la r&egrave;gle dans l’onglet CSS pertinents pour modifier le code de la r&egrave;gle et
•
afficher l’inspecteur de propri&eacute;t&eacute;s CSS.
Modifiez les propri&eacute;t&eacute;s de la r&egrave;gle &agrave; l’aide des commandes situ&eacute;es dans la partie inf&eacute;rieure de
l’onglet CSS pertinents.
Rubriques connexes
• L’onglet CSS pertinents, page 293
• Cr&eacute;ation d’un style CSS, page 308
• Modification d’un style CSS, page 312
306
Chapitre 13 : Insertion et mise en forme de texte
Utilisation de l’onglet Propri&eacute;t&eacute;s CSS
L’onglet Propri&eacute;t&eacute;s CSS permet de modifier directement les propri&eacute;t&eacute;s et les valeurs d’une r&egrave;gle
CSS. Par d&eacute;faut, les propri&eacute;t&eacute;s CSS sont organis&eacute;es en cat&eacute;gories. Vous pouvez modifier les
propri&eacute;t&eacute;s de chaque r&egrave;gle CSS en entrant les valeurs dans les champs de texte et en s&eacute;lectionnant
des valeurs dans les menus contextuels associ&eacute;s &agrave; chaque propri&eacute;t&eacute;.
Remarque : L’onglet Propri&eacute;t&eacute;s CSS affiche les propri&eacute;t&eacute;s des feuilles de style CSS en lecture
seule. Il n’est donc pas possible de les modifier. Ceci vous permet de consulter les propri&eacute;t&eacute;s des
feuilles de style verrouill&eacute;es ou en lecture seule, tout en prot&eacute;geant les valeurs CSS qu’elles
contiennent. Dreamweaver tente d’extraire la feuille de style verrouill&eacute;e et peut vous inviter &agrave; d&eacute;finir
vos pr&eacute;f&eacute;rences de site de fa&ccedil;on &agrave; pouvoir extraire le fichier.
Ouverture de l’onglet Propri&eacute;t&eacute;s CSS :
1 Choisissez Fen&ecirc;tre &gt; Styles CSS pour afficher le panneau Styles CSS.
2 Choisissez Fen&ecirc;tre &gt; Inspecteur de balises pour afficher le panneau de l’inspecteur de balises.
3 S&eacute;lectionnez un style CSS &agrave; l’un des emplacements suivants :
Styles CSS, panneau
■ feuille de style CSS ouverte dans la fen&ecirc;tre de document
■ page HTML en mode Code avec style CSS incorpor&eacute; dans la section head de la page.
4 Lorsque vous s&eacute;lectionnez un style CSS &agrave; l’un de ces emplacements, l’onglet Propri&eacute;t&eacute;s CSS
appara&icirc;t dans le panneau de l’inspecteur de balises et les propri&eacute;t&eacute;s de ce style sont affich&eacute;es.
Vous pouvez choisir l’affichage des propri&eacute;t&eacute;s CSS en cliquant sur le bouton Afficher la vue par
cat&eacute;gorie ou le bouton Afficher la vue sous forme de liste situ&eacute;s dans le coin sup&eacute;rieur gauche
de l’onglet Propri&eacute;t&eacute;s CSS.
■
r&eacute;partit les propri&eacute;t&eacute;s CSS prises en charge par Dreamweaver en huit
cat&eacute;gories distinctes : police, arri&egrave;re-plan, bloc, bordure, bo&icirc;te, liste, positionnement et
extensions. Les propri&eacute;t&eacute;s de chaque cat&eacute;gorie sont conserv&eacute;es dans une liste que vous pouvez
d&eacute;velopper ou r&eacute;duire en cliquant sur le bouton plus (+) en regard de la cat&eacute;gorie de votre choix.
Les propri&eacute;t&eacute;s de chaque cat&eacute;gorie sont tri&eacute;es par ordre alphab&eacute;tique. Les propri&eacute;t&eacute;s utilis&eacute;es sont
plac&eacute;es en t&ecirc;te de liste et sont affich&eacute;es en bleu. La vue par cat&eacute;gories constitue la vue par d&eacute;faut.
La vue sous forme de liste affiche l’ensemble des propri&eacute;t&eacute;s CSS prises en charge par
Dreamweaver par ordre alphab&eacute;tique. Les propri&eacute;t&eacute;s utilis&eacute;es sont plac&eacute;es en t&ecirc;te de liste et
sont affich&eacute;es en bleu.
La vue par cat&eacute;gories
Rubriques connexes
• Utilisation de l’onglet CSS pertinents, page 306
• Modification d’un style CSS, page 312
Utilisation des feuilles de style en cascade
307
Cr&eacute;ation d’un style CSS
Vous pouvez cr&eacute;er une feuille de style CSS pour automatiser la mise en forme de balises HTML
ou d’une plage de texte identifi&eacute;e par un attribut class.
Pour cr&eacute;er un nouveau style CSS :
1 Placez le point d’insertion dans le document, puis proc&eacute;dez de l’une des mani&egrave;res suivantes pour
ouvrir la nouvelle bo&icirc;te de dialogue Nouveau style CSS :
■ Dans l’angle inf&eacute;rieur droit du panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), cliquez sur le
bouton Nouveau style CSS (+).
■ Dans l’inspecteur de propri&eacute;t&eacute;s de texte, choisissez G&eacute;rer les styles dans le menu d&eacute;roulant
Style et cliquez sur le bouton Nouveau dans la bo&icirc;te de dialogue qui s’affiche.
■ Dans l’onglet CSS pertinents (choisissez Fen&ecirc;tre &gt; Inspecteur de balises et cliquez sur
l’onglet CSS pertinents), cliquez avec le bouton droit de la souris et choisissez Nouvelle r&egrave;gle
dans le menu contextuel.
■ Choisissez Texte &gt; Styles CSS &gt; Nouveau.
La bo&icirc;te de dialogue Nouveau style CSS appara&icirc;t.
2 D&eacute;finissez le type de style CSS que vous souhaitez cr&eacute;er :
■ Pour cr&eacute;er un style personnalis&eacute; applicable en tant qu’attribut class &agrave; une plage ou un bloc
de texte, choisissez Cr&eacute;er un style personnalis&eacute; (classe), puis entrez le nom du style dans la
zone de texte Nom.
Remarque : Les noms de classe doivent commencer par un point et peuvent contenir
n’importe quelle combinaison de lettres et de chiffres (par exemple, .monent&ecirc;te1). Si vous
omettez le point, Dreamweaver l’ins&egrave;re &agrave; votre place.
Pour red&eacute;finir la mise en forme par d&eacute;faut d’une balise HTML sp&eacute;cifique, choisissez Balise
(permet de red&eacute;finir l’aspect d’une balise), puis entrez une balise HTML dans le champ
Balise ou choisissez-en une dans le menu d&eacute;roulant.
■ Pour d&eacute;finir la mise en forme d’une combinaison particuli&egrave;re de balises ou de toutes les
balises contenant un attribut Id sp&eacute;cifique, choisissez Utiliser le s&eacute;lecteur CSS, puis entrez
une ou plusieurs balises HTML dans le champ S&eacute;lecteur ou choisissez-en une dans le menu
d&eacute;roulant. Les s&eacute;lecteurs (appel&eacute;s s&eacute;lecteurs de pseudo-classe) disponibles dans le menu
d&eacute;roulant sont a:active, a:hover, a:link et a:visited.
S&eacute;lectionnez l’emplacement dans lequel d&eacute;finir le style :
■ Pour cr&eacute;er une feuille de style externe, choisissez Nouveau fichier feuille de style.
■ Pour incorporer le style dans le document actif, choisissez Seulement ce document.
Cliquez sur OK.
La bo&icirc;te de dialogue D&eacute;finition du style s’affiche.
Choisissez les options du nouveau style CSS.
Lorsque vous avez d&eacute;fini les attributs de style, cliquez sur OK.
■
3
4
5
6
Pour plus d’informations sur des param&egrave;tres de style CSS sp&eacute;cifiques, voir les rubriques suivantes
dans l’aide de Dreamweaver :
• D&eacute;finition des propri&eacute;t&eacute;s de type CSS
• D&eacute;finition des propri&eacute;t&eacute;s d’arri&egrave;re-plan de style CSS
• D&eacute;finition des propri&eacute;t&eacute;s de bloc de style CSS
308
Chapitre 13 : Insertion et mise en forme de texte
•
•
•
•
•
D&eacute;finition des propri&eacute;t&eacute;s de bo&icirc;te de style CSS
D&eacute;finition des propri&eacute;t&eacute;s de bordure de style CSS
D&eacute;finition des propri&eacute;t&eacute;s de liste de style CSS
D&eacute;finition des propri&eacute;t&eacute;s de positionnement de style CSS
D&eacute;finition des propri&eacute;t&eacute;s d’extensions de style CSS
Rubriques connexes
•
•
•
•
Utilisation du panneau Styles CSS, page 305
Utilisation de l’onglet CSS pertinents, page 306
Application d’un style de classe, page 309
Modification d’un style CSS, page 312
Application d’un style de classe
Les styles de classe sont le seul type de style CSS qui peut &ecirc;tre appliqu&eacute; &agrave; n’importe quel texte dans
un document, quelles que soient les balises qui contr&ocirc;lent ce texte. Tous les styles de classe
associ&eacute;s au document en cours sont affich&eacute;s dans le panneau Styles CSS (le nom pr&eacute;c&eacute;d&eacute; d’un
point (.)) et dans le menu d&eacute;roulant Style de l’inspecteur de propri&eacute;t&eacute;s de texte.
M&ecirc;me si la plupart des styles sont actualis&eacute;s imm&eacute;diatement, il est pr&eacute;conis&eacute; d’afficher votre page
dans un navigateur et de v&eacute;rifier que le style a &eacute;t&eacute; appliqu&eacute; comme pr&eacute;vu. Lorsque vous appliquez
plusieurs styles au m&ecirc;me texte, ils risquent d’&ecirc;tre contradictoires et de produire des r&eacute;sultats
inattendus. Pour plus d’informations, voir A propos des conflits de styles CSS, page 290.
Conseil : Lorsque vous affichez un aper&ccedil;u des styles d&eacute;finis dans une feuille de style CSS externe,
n’oubliez pas d’enregistrer la feuille de style afin que vos modifications soient appliqu&eacute;es lorsque
vous afficherez la page dans un navigateur.
Pour appliquer un style CSS personnalis&eacute; :
1 S&eacute;lectionnez le texte du document auquel vous voulez appliquer un style CSS.
Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.
Si vous s&eacute;lectionnez une plage de texte au sein d’un m&ecirc;me paragraphe, le style CSS n’affectera
que cette s&eacute;lection.
Pour indiquer la balise pr&eacute;cise &agrave; laquelle le style CSS doit &ecirc;tre appliqu&eacute;, s&eacute;lectionnez cette
balise dans le s&eacute;lecteur situ&eacute; dans la partie inf&eacute;rieure gauche de la fen&ecirc;tre de document.
2 Pour appliquer un style de classe, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans le panneau Styles CSS (Fen&ecirc;tre &gt; Styles CSS), cliquez avec le bouton droit de la souris
sur le nom du style &agrave; appliquer et choisissez Appliquer dans le menu contextuel.
■ Dans l’inspecteur de propri&eacute;t&eacute;s de texte, choisissez le style de classe &agrave; appliquer dans le menu
d&eacute;roulant Style.
■ Dans la fen&ecirc;tre de document, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh) sur le texte s&eacute;lectionn&eacute;, choisissez
Styles CSS dans le menu contextuel, puis choisissez le style &agrave; appliquer.
■ Choisissez Texte &gt; Styles CSS, puis s&eacute;lectionnez le style &agrave; appliquer dans le sous-menu.
Utilisation des feuilles de style en cascade
309
Pour supprimer un style personnalis&eacute; de la s&eacute;lection :
1 S&eacute;lectionnez l’objet ou le texte auquel le style ne doit plus &ecirc;tre appliqu&eacute;.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Dans l’inspecteur de propri&eacute;t&eacute;s de texte, choisissez Aucun dans le menu d&eacute;roulant Style.
Cliquez avec le bouton droit de la souris sur la r&egrave;gle &agrave; supprimer dans l’onglet CSS
pertinents, puis choisissez D&eacute;finir classe &gt; Aucun dans le menu contextuel.
Rubriques connexes
• L’onglet CSS pertinents, page 293
• Modification d’un style CSS, page 312
Exportation de styles pour cr&eacute;er une feuille de style CSS
Vous pouvez exporter des styles d’un document pour cr&eacute;er une feuille de style CSS. Vous pouvez
ensuite cr&eacute;er des liens vers d’autres documents pour appliquer ces styles.
Pour exporter des styles CSS d’un document et cr&eacute;er une feuille de style CSS :
1 Choisissez Fichier &gt; Exporter &gt; Styles CSS ou Texte &gt; Styles CSS &gt; Exporter.
La bo&icirc;te de dialogue Exporter les styles dans un fichier CSS s’affiche.
2 Nommez votre feuille de style et cliquez sur le bouton Enregistrer.
Le style est enregistr&eacute; sous la forme d’une feuille de style CSS.
Rubriques connexes
• Utilisation du panneau Styles CSS, page 305
• Modification d’une feuille de style CSS, page 313
• Utilisation de feuilles de style &agrave; la conception, page 314
Liens vers ou importation d’une feuille de style CSS externe
Si vous modifiez une feuille de style CSS externe, les changements sont refl&eacute;t&eacute;s dans tous les
documents li&eacute;s &agrave; cette feuille de style. Vous pouvez exporter les styles CSS trouv&eacute;s dans un
document afin de cr&eacute;er une nouvelle feuille de style CSS, et attacher ou cr&eacute;er un lien vers une
feuille de style externe pour appliquer les styles trouv&eacute;s &agrave; cet endroit.
Bien entendu, vous pouvez attacher toute feuille de style de votre cr&eacute;ation &agrave; vos pages ou copier
ces feuilles dans votre site. De plus, Dreamweaver est fourni avec des feuilles de style pr&eacute;d&eacute;finies
qui peuvent &ecirc;tre automatiquement plac&eacute;es dans votre site et attach&eacute;es &agrave; vos pages. Pour plus
d’informations sur l’utilisation des feuilles de style &agrave; la conception livr&eacute;es avec Dreamweaver,
voir Cr&eacute;ation d’un document bas&eacute; sur un fichier de conception Dreamweaver, page 76.
Pour plus d’informations sur l’application d’un style, voir Application d’un style de classe, page 309.
310
Chapitre 13 : Insertion et mise en forme de texte
Pour cr&eacute;er un lien vers ou importer une feuille de style CSS externe :
1 Ouvrez le panneau Styles CSS en proc&eacute;dant de l’une des mani&egrave;res suivantes :
Choisissez Fen&ecirc;tre &gt; Styles CSS.
■ Appuyez sur les touches Maj + F11.
Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style.
La bo&icirc;te de dialogue Ajouter une feuille de style externe appara&icirc;t.
Dans la bo&icirc;te de dialogue Ajouter une feuille de style externe, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
■ Cliquez sur le bouton Parcourir pour rechercher une feuille de style CSS externe.
■ Entrez le chemin de la feuille de style dans le champ Fichier/URL.
Dans la zone Ajouter sous, s&eacute;lectionnez une des options suivantes :
■ Pour cr&eacute;er un lien entre le document actif et une feuille de style externe, choisissez Lien.
Cette s&eacute;lection a pour effet de cr&eacute;er une balise de lien href dans le code HTML et de
r&eacute;f&eacute;rencer l’URL de l’emplacement de la feuille de style publi&eacute;e. Microsoft Internet Explorer
et Netscape Navigator prennent tous deux en charge cette m&eacute;thode.
■ Vous ne pouvez pas utiliser une balise de lien pour ajouter une r&eacute;f&eacute;rence d’une feuille de
style externe &agrave; une autre. Pour imbriquer des feuilles de style, vous devez utiliser une
directive d’importation. Certains navigateurs reconnaissent &eacute;galement la directive
d’importation dans une page (plut&ocirc;t que simplement dans des feuilles de style). Il existe
quelques diff&eacute;rences dans la m&eacute;thode de r&eacute;solution des conflits entre propri&eacute;t&eacute;s lorsque des
r&egrave;gles se chevauchent dans des feuilles de style externes li&eacute;es et des feuilles import&eacute;es dans
une page. Pour importer une feuille de style externe, plut&ocirc;t que d’y cr&eacute;er un lien, choisissez
Importer.
Cliquez sur le bouton d’aper&ccedil;u pour v&eacute;rifier que la feuille de style applique effectivement les
styles de votre choix &agrave; la page active.
Si les styles appliqu&eacute;s ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille
de style. La page retrouve son aspect pr&eacute;c&eacute;dent.
Cliquez sur OK.
Le nom de la feuille de style CSS externe s’affiche dans le panneau Styles CSS et les styles
personnalis&eacute;s (de classe) sont pr&eacute;c&eacute;d&eacute;s de l’identificateur de feuille de style externe.
■
2
3
4
5
6
Rubriques connexes
• Exportation de styles pour cr&eacute;er une feuille de style CSS, page 310
• Modification d’une feuille de style CSS, page 313
Utilisation des feuilles de style en cascade
311
Utilisation des exemples de feuilles de style de Dreamweaver
Dreamweaver est fourni avec des exemples de feuilles de style que vous pouvez appliquer &agrave; vos
pages ou que vous pouvez utiliser comme points de d&eacute;part pour cr&eacute;er vos propres styles.
Pour appliquer une feuille de style de Dreamweaver :
1 Ouvrez le panneau Styles CSS en proc&eacute;dant de l’une des mani&egrave;res suivantes :
Choisissez Fen&ecirc;tre &gt; Styles CSS.
■ Appuyez sur les touches Maj+F11.
Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style.
La bo&icirc;te de dialogue Ajouter une feuille de style externe appara&icirc;t.
Dans la bo&icirc;te de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles
de style.
La bo&icirc;te de dialogue Exemples de feuilles de style s’affiche.
S&eacute;lectionnez une feuille de style dans la zone de liste.
Lorsque vous s&eacute;lectionnez des feuilles de style dans la zone de liste, le formatage du texte et des
couleurs s’affiche dans le panneau d’aper&ccedil;u.
Cliquez sur le bouton Aper&ccedil;u pour appliquer la feuille de style et v&eacute;rifier que le style de votre
choix est bien appliqu&eacute; &agrave; la page active.
Si les styles appliqu&eacute;s ne sont pas ceux que vous escomptiez, s&eacute;lectionnez une autre feuille de
style dans la liste et cliquez sur le bouton Aper&ccedil;u pour visualiser les styles correspondants.
Par d&eacute;faut, Dreamweaver enregistre la feuille de style dans un dossier nomm&eacute; CSS au niveau
juste en dessous de la racine du site d&eacute;fini pour votre page. Si ce dossier n’existe pas,
Dreamweaver le cr&eacute;e. Vous pouvez enregistrer le fichier dans un autre emplacement en cliquant
sur le bouton Parcourir pour rechercher un autre dossier.
Lorsque vous trouvez une feuille de style dont les r&egrave;gles correspondent &agrave; vos crit&egrave;res, cliquez sur
OK.
■
2
3
4
5
6
7
Modification d’un style CSS
Vous pouvez facilement modifier les styles internes et externes appliqu&eacute;s &agrave; un document.
Lorsque vous modifiez une feuille de style CSS qui contr&ocirc;le du texte dans votre document, vous
reformatez instantan&eacute;ment tout ce texte. Les modifications apport&eacute;es &agrave; une feuille de style externe
se r&eacute;percutent sur tous les documents auxquels elle est li&eacute;e.
Libre &agrave; vous de d&eacute;finir un &eacute;diteur externe pour la modification des feuilles de style. Pour plus
d’informations sur la d&eacute;finition d’un &eacute;diteur externe, voir Lancement d’un &eacute;diteur externe pour des
fichiers multim&eacute;dia, page 371.
Pour modifier un style CSS :
1 Choisissez Fen&ecirc;tre &gt; Inspecteur de balises.
2 Dans l’inspecteur de balises, cliquez sur l’onglet CSS pertinents pour afficher les styles CSS dans
le document en cours.
3 Placez le point d’insertion sur le texte dont vous souhaitez modifier le style CSS.
Chaque style CSS s&eacute;lectionn&eacute; dans la page s’affiche dans le panneau CSS.
4 Cliquez sur le style que vous voulez modifier pour le s&eacute;lectionner, puis proc&eacute;dez de l’une des
mani&egrave;res suivantes :
312
Chapitre 13 : Insertion et mise en forme de texte
Double-cliquez sur le style s&eacute;lectionn&eacute; dans le panneau Styles CSS.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Modifier une r&egrave;gle dans le menu qui s’affiche.
■ Cliquez sur le bouton Modifier le style au bas du panneau CSS.
■ S&eacute;lectionnez le style dans le panneau CSS et modifiez ses propri&eacute;t&eacute;s dans l’inspecteur de
propri&eacute;t&eacute;s de style.
Les modifications apport&eacute;es s’appliquent imm&eacute;diatement au document actif, ce qui vous
permet de conna&icirc;tre directement le r&eacute;sultat de vos op&eacute;rations. Si vous modifiez des styles
enregistr&eacute;s dans une feuille de style externe, n’oubliez pas d’enregistrer vos modifications afin
de les appliquer.
5 Une fois les modifications effectu&eacute;es, enregistrez votre travail.
Si vous modifiez des styles CSS qui se trouvent dans des feuilles de style utilis&eacute;es dans plusieurs
documents, les modifications s’appliqueront &eacute;galement aux autres documents.
■
Rubriques connexes
• Utilisation de l’onglet CSS pertinents, page 306
• Utilisation de l’onglet Propri&eacute;t&eacute;s CSS, page 307
Modification d’une feuille de style CSS
En r&egrave;gle g&eacute;n&eacute;rale, une feuille de style CSS comprend un ou plusieurs styles. Vous pouvez modifier
un style individuel dans une feuille de style CSS (voir Modification d’un style CSS, page 312) ou en
modifier plusieurs, si n&eacute;cessaire.
La bo&icirc;te de dialogue Modifier feuille de style vous permet de manipuler les feuilles de style de
plusieurs mani&egrave;res. Utilisez-la pour cr&eacute;er un lien vers une feuille de style externe ou pour cr&eacute;er,
modifier, dupliquer ou supprimer une feuille de style.
Pour modifier une feuille de style CSS :
1 Dans le panneau Styles CSS, cliquez sur la feuille de style que vous voulez modifier pour la
s&eacute;lectionner, puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Cliquez sur le bouton Modifier une feuille de style au bas du panneau Styles CSS.
■ Cliquez avec le bouton droit de la souris sur la feuille de style, choisissez Modifier feuille de
style dans le menu contextuel, puis s&eacute;lectionnez la feuille de style &agrave; modifier dans la bo&icirc;te de
dialogue qui s’ouvre et cliquez sur Modifier.
Les styles de la feuille de style CSS s&eacute;lectionn&eacute;e apparaissent dans la bo&icirc;te de dialogue.
2 Dans la bo&icirc;te de dialogue, s&eacute;lectionnez le style que vous voulez modifier, puis cliquez sur Modifier.
La bo&icirc;te de dialogue D&eacute;finition du style CSS s’affiche.
3 Modifiez les styles &agrave; votre convenance, puis cliquez sur OK.
Rubriques connexes
• Utilisation du panneau Styles CSS, page 305
• Modification d’un style CSS, page 312
Utilisation des feuilles de style en cascade
313
Mise &agrave; jour de feuilles de style CSS dans un site Contribute
Les utilisateurs de Contribute ne peuvent pas apporter de modifications &agrave; une feuille de style
CSS. Pour modifier une feuille de style pour un site Contribute, utilisez Dreamweaver.
Les facteurs suivants doivent &ecirc;tre pris en compte lors de la mise &agrave; jour de feuilles de style pour un
site Contribute :
• Si vous apportez des modifications &agrave; une feuille de style alors qu’un utilisateur de Contribute
•
modifie une page qui utilise cette feuille de style, l’utilisateur ne pourra pas observer les
changements apport&eacute;s &agrave; la feuille de style jusqu’&agrave; la publication de la page.
Si vous supprimez un style d’une feuille de style, le nom du style en question n’est pas
supprim&eacute; des pages qui utilisent cette feuille, mais, puisque le style n’existe plus, il n’est pas
appliqu&eacute; &agrave; la page comme l’utilisateur de Contribute pourrait s’y attendre. Ainsi, si un
utilisateur vous d&eacute;clare que rien ne se passe lorsque celui-ci applique un style donn&eacute;, il est
possible que le style ait &eacute;t&eacute; supprim&eacute; de la feuille de style.
Pour modifier un style CSS dans un site Contribute :
1 Utilisez les outils de modification de feuille de style pr&eacute;sents dans Dreamweaver. Pour plus
d’informations, voir Utilisation des feuilles de style en cascade, page 304.
2 Avertissez les utilisateurs de Contribute qui travaillent &agrave; la publication des pages que vous
utilisez une feuille de style d&eacute;finie. Modifiez ensuite &agrave; nouveau ces pages pour voir la nouvelle
feuille de style.
Utilisation de feuilles de style &agrave; la conception
Les feuilles de style &agrave; la conception permettent d’afficher ou de masquer la conception appliqu&eacute;e
par une feuille de style CSS lorsque vous travaillez dans un document Dreamweaver. Vous pouvez
par exemple utiliser cette fonction pour inclure ou exclure l’effet d’une feuille de style Macintosh
ou Windows pendant la cr&eacute;ation d’une page.
Les feuilles de style &agrave; la conception s’appliquent uniquement lorsque vous travaillez dans un
document Dreamweaver ; lorsque la page est affich&eacute;e dans une fen&ecirc;tre de navigateur, seuls les
styles r&eacute;ellement attach&eacute;s au document ou qui y sont incorpor&eacute;s apparaissent.
Pour afficher ou masquer une feuille de style CSS &agrave; la conception :
1 Ouvrez la bo&icirc;te de dialogue Feuilles de style &agrave; la conception en proc&eacute;dant de l’une des mani&egrave;res
suivantes :
■ Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez
Conception dans le menu contextuel.
■ Choisissez Texte &gt; Styles CSS &gt; Conception.
2 Dans la bo&icirc;te de dialogue, d&eacute;finissez les options d’affichage ou de masquage de la feuille de style
s&eacute;lectionn&eacute;e :
■ Pour afficher une feuille de style CSS &agrave; la conception, cliquez sur le bouton plus (+) situ&eacute;
au-dessus d’Afficher &agrave; la conception uniquement, puis recherchez la feuille de style CSS &agrave;
afficher dans la bo&icirc;te de dialogue S&eacute;lectionner une feuille de style.
■ Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situ&eacute; au-dessus de
Masquer &agrave; la conception, puis recherchez la feuille de style CSS &agrave; masquer dans la bo&icirc;te de
dialogue S&eacute;lectionner une feuille de style.
314
Chapitre 13 : Insertion et mise en forme de texte
Pour supprimer une feuille de style de l’une ou l’autre des listes, cliquez sur la feuille de style
que vous voulez supprimer, puis cliquez sur le bouton moins (–) appropri&eacute;.
3 Cliquez sur OK pour fermer la bo&icirc;te de dialogue.
■
Le panneau Styles CSS est actualis&eacute; avec le nom de la feuille de style s&eacute;lectionn&eacute;e ainsi qu’un
indicateur, &laquo; masqu&eacute; &raquo; ou &laquo; concevoir &raquo;, selon l’&eacute;tat de la feuille de style.
Rubriques connexes
•
•
•
•
Utilisation du panneau Styles CSS, page 305
Exportation de styles pour cr&eacute;er une feuille de style CSS, page 310
Liens vers ou importation d’une feuille de style CSS externe, page 310
Modification d’une feuille de style CSS, page 313
V&eacute;rification orthographique
Dans le menu Texte, la commande Orthographe permet de v&eacute;rifier l’orthographe du document
actif. La commande Orthographe ignore les balises HTML et les valeurs d’attributs.
Par d&eacute;faut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de
dictionnaire, choisissez Edition &gt; Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral (Windows) ou Dreamweaver &gt;
Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans
le menu d&eacute;roulant Dictionnaire du correcteur d’orthographe. Vous pouvez t&eacute;l&eacute;charger des
dictionnaires dans d’autres langues sur le centre de support de Dreamweaver, &agrave; l’adresse suivante :
http://www.macromedia.com/go/dreamweaver_support_fr/.
Pour v&eacute;rifier puis corriger l’orthographe :
1 Choisissez Texte &gt; Orthographe ou appuyez sur les touches Maj+F7.
Lorsque Dreamweaver ne reconna&icirc;t pas un mot, la bo&icirc;te de dialogue V&eacute;rifier l’orthographe
s’affiche.
2 S&eacute;lectionnez l’option correspondant au traitement que vous souhaitez appliquer &agrave; l’occurrence.
V&eacute;rification orthographique
315
Recherche et remplacement de texte
Vous pouvez utiliser la commande Rechercher et remplacer pour rechercher du texte ainsi que des
attributs et des balises HTML dans un ou plusieurs documents.
Remarque : Pour rechercher des fichiers dans un site, utilisez les commandes suivantes : Retrouver
sur le site local et Retrouver sur le site distant.
Pour rechercher du texte et des balises HTML au sein des documents :
1 Ouvrez le document dans lequel la recherche doit &ecirc;tre effectu&eacute;e ou s&eacute;lectionnez des documents
ou un dossier dans le panneau Fichiers.
2 S&eacute;lectionnez la commande Edition &gt; Rechercher et remplacer.
La bo&icirc;te de dialogue Rechercher et remplacer s’affiche.
3 Indiquez les fichierssur lesquels doit porter la recherche, puis indiquez le type de recherche &agrave;
effectuer et enfin le texte ou les balises &agrave; rechercher. Le cas &eacute;ch&eacute;ant, sp&eacute;cifiez &eacute;galement le texte
de remplacement. Cliquez ensuite sur un des boutons Rechercher ou Remplacer.
Pour plus d’informations, cliquez sur le bouton Aide.
4 Une fois l’op&eacute;ration termin&eacute;e, cliquez sur le bouton Fermer pour fermer la bo&icirc;te de dialogue.
Pour effectuer une nouvelle recherche sans afficher la bo&icirc;te de dialogue Rechercher et
remplacer :
• Appuyez sur F3 (Windows) ou Commande+G (Macintosh).
316
Chapitre 13 : Insertion et mise en forme de texte
CHAPITRE 14
Insertion d’images
Dans Macromedia Dreamweaver MX 2004, vous pouvez travailler en mode Cr&eacute;ation ou en mode
Code pour ins&eacute;rer des images dans un document. Lorsque vous ajoutez des images dans un
document Dreamweaver, vous pouvez d&eacute;finir ou modifier les propri&eacute;t&eacute;s d’image et visualiser les
modifications directement dans la fen&ecirc;tre de document.
Pour am&eacute;liorer l’efficacit&eacute; de votre environnement de conception, vous pouvez s&eacute;lectionner une
pr&eacute;f&eacute;rence pour l’&eacute;diteur d’image et le lancer automatiquement pour modifier des images lorsque
vous travaillez dans Dreamweaver.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
A propos des images, page 317
Insertion d’une image, page 319
Redimensionnement d’une image, page 323
Recadrage d’une image, page 324
Optimisation d’une image &agrave; l’aide de Fireworks, page 324
Ajustement de la luminosit&eacute; et du contraste d’une image, page 325
Accentuation d’une image, page 325
Cr&eacute;ation d’une image survol&eacute;e, page 326
Utilisation d’un &eacute;diteur d’image externe, page 327
Application decomportements aux images, page 327
A propos des images
Diff&eacute;rents types de formats de fichiers graphiques existent, mais trois formats de fichiers
graphiques sont g&eacute;n&eacute;ralement utilis&eacute;s dans les pages Web : GIF, JPEG et PNG. Actuellement, les
formats de fichiers GIF et JPEG sont les formats les mieux pris en charge et peuvent &ecirc;tre visualis&eacute;s
par la plupart des navigateurs.
Les fichiers PNG sont les plus adapt&eacute;s pour la plupart des types de graphiques Web en raison de
leur souplesse et de leur taille r&eacute;duite ; toutefois, l’affichage d’images PNG n’est que partiellement
pris en charge dans Microsoft Internet Explorer (4.0 et versions ult&eacute;rieures) et dans Netscape
Navigator (4.04 et versions ult&eacute;rieures). A moins que votre site ne soit sp&eacute;cifiquement destin&eacute; &agrave;
des navigateurs prenant en charge le format PNG, utilisez des fichiers GIF ou JPEG afin de cibler
un plus large public.
317
Les fichiers GIF (Graphic Interchange Format) utilisent un maximum de 256 couleurs et sont
destin&eacute;s &agrave; l’affichage d’images &agrave; tons non continus ou d’images comportant de larges zones de
couleurs unies, telles que les barres de navigation, les boutons, les ic&ocirc;nes, les logos ou d’autres
images contenant des tons et des couleurs uniformes.
Le format de fichier JPEG (Joint Photographic Experts Group) est le format sup&eacute;rieur destin&eacute;
aux photographies ou aux images &agrave; tons continus, car de tels fichiers peuvent contenir des
millions de couleurs. Lorsque la qualit&eacute; d’un fichier JPEG augmente, sa taille et son temps de
t&eacute;l&eacute;chargement augmentent &eacute;galement. Il est souvent possible d’obtenir un bon compromis entre
la qualit&eacute; de l’image et sa taille de fichier en compressant un fichier JPEG.
Le format de fichier PNG (Portable Network Group) est un format de remplacement non
brevet&eacute; pour les fichiers GIF, qui inclut la prise en charge des images &agrave; couleurs index&eacute;es, en
niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la
transparence. PNG est le format de fichier natif de Macromedia Fireworks. Les fichiers PNG
conservent toutes les informations d’origine sur les calques, les vecteurs, les couleurs et les effets
(comme par exemple des ombres port&eacute;es) et tous ces &eacute;l&eacute;ments peuvent &ecirc;tre modifi&eacute;s &agrave; tout
moment. Les fichiers doivent avoir l’extension .png pour &ecirc;tre reconnus comme fichiers PNG par
Dreamweaver.
Modification d’images dans Dreamweaver
Dreamweaver comprend des fonctions basiques de retouche d’image, ce qui vous &eacute;vite de devoir
lancer une application externe pour effectuer cette t&acirc;che (par exemple, Macromedia Fireworks).
Les outils de retouche d’image de Dreamweaver sont con&ccedil;us pour un travail simplifi&eacute; avec les
concepteurs de contenu responsables de la cr&eacute;ation des fichiers d’image utilis&eacute;s sur votre site Web.
Remarque : Vous n’avez pas besoin d’avoir install&eacute; Macromedia Fireworks sur votre ordinateur pour
utiliser les fonctions de retouche d’image de Dreamweaver.
Dreamweaver comporte les fonctions de retouche d’image suivantes :
ajoute ou enl&egrave;ve des pixels d’images JPEG ou GIF
redimensionn&eacute;es afin qu’elles correspondent le mieux possible &agrave; l’aspect des images originales. Le
r&eacute;&eacute;chantillonnage d’une image en r&eacute;duit la taille, ce qui permet d’en acc&eacute;l&eacute;rer le t&eacute;l&eacute;chargement.
Le r&eacute;&eacute;chantillonnage d’image
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la r&eacute;&eacute;chantillonner afin
de l’adapter &agrave; ses nouvelles dimensions. Lorsqu’un objet bitmap est r&eacute;&eacute;chantillonn&eacute;, des pixels
sont ajout&eacute;s &agrave; l’image ou en sont enlev&eacute;s afin de l’agrandir ou de la r&eacute;duire. En g&eacute;n&eacute;ral, le
r&eacute;&eacute;chantillonnage d’une image &agrave; une r&eacute;solution sup&eacute;rieure provoque une faible perte de qualit&eacute;.
Le r&eacute;&eacute;chantillonnage &agrave; une r&eacute;solution inf&eacute;rieure, en revanche, provoque toujours une perte de
donn&eacute;es et donne une moins bonne qualit&eacute;.
Le recadrage permet de r&eacute;duire la surface des images. En g&eacute;n&eacute;ral, il est utile pour mettre en
&eacute;vidence le sujet de l’image et supprimer les aspects ind&eacute;sirables qui entourent le centre d’int&eacute;r&ecirc;t
de l’image.
Luminosit&eacute;/Contraste modifie la luminosit&eacute; et le contraste des pixels qui composent l’image.
Ceci affecte les surbrillances, les ombres et les demi-tons d’une image. Cette fonction est utilis&eacute;e
pour corriger les images trop sombres ou trop claires.
318
Chapitre 14 : Insertion d’images
ajuste la mise au point d’une image en augmentant le contraste des bords sur
l’image. Lorsque vous scannez une image ou que vous prenez une photo num&eacute;rique, la plupart
des logiciels de capture d’images estompent par d&eacute;faut les bords des objets photographi&eacute;s. Cela
emp&ecirc;che les d&eacute;tails extr&ecirc;mement pr&eacute;cis de se perdre dans les pixels dont sont constitu&eacute;es les
images num&eacute;riques. Cependant, il est souvent n&eacute;cessaire d’accentuer l’image pour faire ressortir
les d&eacute;tails dans les fichiers d’image num&eacute;rique, ce qui augmente le contraste des bords et rend
l’image encore plus nette.
L’accentuation
Remarque : Les fonctions de retouche d’image de Dreamweaver s’appliquent uniquement aux
formats de fichiers d’image JPEG et GIF. Les autres formats de fichiers d’image bitmap ne peuvent
pas &ecirc;tre modifi&eacute;s &agrave; l’aide de ces fonctions.
Rubriques connexes
•
•
•
•
Redimensionnement d’une image, page 323
Recadrage d’une image, page 324
Ajustement de la luminosit&eacute; et du contraste d’une image, page 325
Accentuation d’une image, page 325
Insertion d’une image
Lorsque vous ins&eacute;rez une image dans un document Dreamweaver, le programme cr&eacute;e
automatiquement une r&eacute;f&eacute;rence &agrave; ce fichier d’image dans le code source HTML. Pour que cette
r&eacute;f&eacute;rence soit correcte, le fichier d’image doit r&eacute;sider sur le site. Dans le cas contraire,
Dreamweaver vous invite &agrave; copier le fichier sur le site.
Vous pouvez &eacute;galement ins&eacute;rer des images de fa&ccedil;on dynamique. Les images dynamiques sont des
images qui changent souvent ; par exemple, les syst&egrave;mes de rotation de banni&egrave;res publicitaires qui
s&eacute;lectionnent les banni&egrave;res de mani&egrave;re al&eacute;atoire, puis affichent l’image de la banni&egrave;re s&eacute;lectionn&eacute;e
lors de l’affichage d’une page. Pour plus d’informations, voir Cr&eacute;ation d’images dynamiques,
page 570.
Pour ins&eacute;rer une image :
1 Placez le point d’insertion &agrave; l’endroit o&ugrave; doit appara&icirc;tre l’image dans la fen&ecirc;tre de document,
puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur l’ic&ocirc;ne Image.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, faites glisser l’ic&ocirc;ne Image vers la fen&ecirc;tre du
document (ou la fen&ecirc;tre du mode Code si vous travaillez sur le code).
■ Choisissez Insertion &gt; Image.
■ Faites glisser une image &agrave; partir du panneau Actifs (Fen&ecirc;tre &gt; Actifs) vers l’emplacement
souhait&eacute; dans la fen&ecirc;tre de document, puis passez &agrave; l’&eacute;tape 3.
■ Faites glisser une image &agrave; partir du panneau Site vers l’emplacement souhait&eacute; dans la fen&ecirc;tre
de document, puis passez &agrave; l’&eacute;tape 3.
■ Faites glisser une image &agrave; partir du bureau vers l’emplacement d&eacute;sir&eacute; sur la page, puis passez
&agrave; l’&eacute;tape 3.
2 Dans la bo&icirc;te de dialogue qui s’affiche, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ S&eacute;lectionnez Syst&egrave;me de fichiers pour choisir un fichier graphique.
■ S&eacute;lectionnez Source de donn&eacute;es pour choisir une source d’images dynamiques.
Insertion d’une image
319
3 Parcourez l’arborescence pour s&eacute;lectionner l’image ou la source de contenu &agrave; ins&eacute;rer.
Tant que le document sur lequel vous travaillez n’a pas encore &eacute;t&eacute; enregistr&eacute;, Dreamweaver cr&eacute;e
automatiquement une r&eacute;f&eacute;rence d’emplacement de fichier de type file://. Lorsque vous
enregistrez le document sur le site, Dreamweaver convertit cette r&eacute;f&eacute;rence en indiquant un
chemin relatif au document. Cliquez sur le bouton Aide de la bo&icirc;te de dialogue pour en savoir
plus sur les options qu’elle contient.
4 Cliquez sur OK.
La bo&icirc;te de dialogue Attributs d’accessibilit&eacute; aux balises d’image s’affiche si elle a &eacute;t&eacute; activ&eacute;e
dans les pr&eacute;f&eacute;rences (voir Optimisation de l’espace de travail pour la conception de pages accessibles,
page 56).
5 Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK.
Remarque : Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon
vos besoins.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
L’image appara&icirc;t dans votre document.
Remarque : Si vous cliquez sur Annuler, l’image s’affiche dans le document, mais Dreamweaver
ne lui associe ni balises ni attributs d’accessibilit&eacute;.
6 Dans l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), d&eacute;finissez les propri&eacute;t&eacute;s de l’image.
Pour plus d’informations, voir D&eacute;finition des propri&eacute;t&eacute;s de l’image dans l’aide de
Dreamweaver.
Pour modifier les attributs d’accessibilit&eacute; de l’image, voir Modification des attributs d’accessibilit&eacute;
d’une image, page 320.
Rubriques connexes
• D&eacute;finition d’une image ou d’une couleur d’arri&egrave;re-plan de la page, page 272
• Utilisation des images d’espacement, page 205
Modification des attributs d’accessibilit&eacute; d’une image
Si vous avez ins&eacute;r&eacute; des attributs d’accessibilit&eacute; pour une image (voir Insertion d’une image,
page 319), vous pouvez modifier ces valeurs dans le code HTML.
Pour modifier les valeurs d’accessibilit&eacute; d’une image :
1 S&eacute;lectionnez l’image dans la fen&ecirc;tre de document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
320
Modifiez les attributs de l’image en mode Code.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Modifier le code de la balise.
Chapitre 14 : Insertion d’images
■
Modifiez la valeur Alt dans l’inspecteur de propri&eacute;t&eacute;s.
insertion d’un espace r&eacute;serv&eacute; pour une image
Un espace r&eacute;serv&eacute; pour une image est un graphique que vous utilisez jusqu’&agrave; ce que le dessin final
soit pr&ecirc;t pour &ecirc;tre ajout&eacute; &agrave; une page Web.
Pour ins&eacute;rer un espace r&eacute;serv&eacute; pour une image :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous voulez ins&eacute;rer un
espace r&eacute;serv&eacute; pour un graphique.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur l’ic&ocirc;ne Espace r&eacute;serv&eacute; pour
l’image.
■ Choisissez Insertion &gt; Espace r&eacute;serv&eacute; pour l’image.
La bo&icirc;te de dialogue Espace r&eacute;serv&eacute; pour l’image s’affiche.
3 Dans la bo&icirc;te de dialogue, s&eacute;lectionnez les options de l’espace r&eacute;serv&eacute; pour l’image.
Vous pouvez d&eacute;finir la taille et la couleur de l’espace r&eacute;serv&eacute; et lui donner une &eacute;tiquette de
texte. Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
■
Les attributs de couleur et de taille ainsi que l’&eacute;tiquette de l’espace r&eacute;serv&eacute; s’affichent comme suit :
Lorsqu’ils sont visualis&eacute;s dans un navigateur, le texte de l’&eacute;tiquette et de la taille ne s’affichent pas.
Rubriques connexes
• Redimensionnement d’une image, page 323
• Utilisation de Fireworks pour modifier les espaces r&eacute;serv&eacute;s pour les images Dreamweaver, page 357.
Remplacement d’un espace r&eacute;serv&eacute; pour une image
Un espace r&eacute;serv&eacute; pour l’image n’est pas une image qui s’affiche dans un navigateur. Avant de
publier votre site, il convient de remplacer 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 Fireworks, vous pouvez cr&eacute;er un nouveau graphique &agrave; partir d’un espace r&eacute;serv&eacute;
pour image dans Dreamweaver. La nouvelle image reprend la m&ecirc;me taille que celle de l’espace
r&eacute;serv&eacute; pour l’image. Vous pouvez modifier l’image, puis la remplacer dans Dreamweaver. Pour
plus d’informations sur la cr&eacute;ation d’une image de remplacement dans Fireworks, voir Utilisation
de Fireworks pour modifier les espaces r&eacute;serv&eacute;s pour les images Dreamweaver, page 357.
Pour mettre &agrave; jour la source d’image :
1 Dans la fen&ecirc;tre Document, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Double-cliquez sur l’espace r&eacute;serv&eacute; pour l’image.
Cliquez sur l’espace r&eacute;serv&eacute; pour l’image pour le s&eacute;lectionner, puis dans l’inspecteur de
propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), cliquez sur l’ic&ocirc;ne du dossier &agrave; c&ocirc;t&eacute; de la zone de texte Src.
Insertion d’une image
321
La bo&icirc;te de dialogue Source de l’image s’affiche.
2 Dans la bo&icirc;te de dialogue, localisez l’image que vous voulez utiliser pour remplacer l’espace
r&eacute;serv&eacute;.
3 Cliquez sur OK.
L’image s&eacute;lectionn&eacute;e appara&icirc;t dans le document.
Alignement d’une image
Vous pouvez aligner une image sur du texte, sur une autre image, sur un plug-in ou sur d’autres
&eacute;l&eacute;ments de la ligne. Vous pouvez &eacute;galement d&eacute;finir l’alignement horizontal d’une image.
Pour aligner une image :
1 S&eacute;lectionnez l’image dans le mode Cr&eacute;ation.
2 D&eacute;finissez les attributs d’alignement de l’image dans l’inspecteur de propri&eacute;t&eacute;s.
Vous pouvez d&eacute;finir l’alignement selon d’autres &eacute;l&eacute;ments situ&eacute;s dans le m&ecirc;me paragraphe ou la
m&ecirc;me ligne.
Remarque : Le langage HTML ne permet pas de placer un texte autour des contours d’une image,
contrairement &agrave; certaines applications de traitement de texte.
Les options d’alignement sont les suivantes :
D&eacute;faut provoque g&eacute;n&eacute;ralement un alignement sur la ligne de base. La valeur par d&eacute;faut varie selon
le navigateur du visiteur du site.
Ligne de base et Bas alignent
la ligne de base du texte (ou de tout autre &eacute;l&eacute;ment du m&ecirc;me
paragraphe) sur le bas de l’objet s&eacute;lectionn&eacute;.
Haut aligne
le haut d’une image sur le haut de l’&eacute;l&eacute;ment le plus &eacute;lev&eacute; (image ou texte) dans la
ligne.
Milieu
aligne le milieu de l’image avec la ligne de base de la ligne.
Haut du texte aligne
Milieu absolu
le haut de l’image avec le haut du plus grand caract&egrave;re de la ligne de texte.
aligne le milieu de l’image avec le milieu du texte dans la ligne actuelle.
Bas absolu aligne le bas de l’image avec le bas de la ligne de texte (y compris les jambages
inf&eacute;rieurs comme dans la lettre g).
322
Chapitre 14 : Insertion d’images
Gauche aligne l’image s&eacute;lectionn&eacute;e sur la marge de gauche et place le texte qui l’entoure &agrave; sa
droite. Si le texte align&eacute; &agrave; gauche pr&eacute;c&egrave;de l’objet sur la ligne, les objets align&eacute;s &agrave; gauche sont
g&eacute;n&eacute;ralement plac&eacute;s automatiquement sur une nouvelle ligne.
aligne l’image sur la marge de droite et place le texte qui l’entoure &agrave; sa gauche. Si le texte
align&eacute; &agrave; droite pr&eacute;c&egrave;de l’objet sur la ligne, les objets align&eacute;s &agrave; droite sont g&eacute;n&eacute;ralement plac&eacute;s
automatiquement sur une nouvelle ligne.
Droite
Redimensionnement d’une image
Dans Dreamweaver, vous pouvez redimensionner visuellement certains &eacute;l&eacute;ments comme des
images, des plug-ins, des fichiers Macromedia Shockwave ou Flash, des applets et des contr&ocirc;les
ActiveX.
Le redimensionnement visuel d’une image dans Dreamweaver permet de mieux voir comment
l’image affecte la mise en forme en diff&eacute;rentes dimensions. Il n’adapte pas les dimensions de
l’image aux proportions que vous avez sp&eacute;cifi&eacute;es. Si vous redimensionnez visuellement une image
dans Dreamweaver, mais que vous n’utilisez pas d’application de retouche d’image (comme
Macromedia Fireworks) pour en adapter les proportions aux dimensions d&eacute;sir&eacute;es, le navigateur de
l’utilisateur devra le faire lorsque la page sera charg&eacute;e. Cela risque d’entra&icirc;ner l’allongement du
temps de t&eacute;l&eacute;chargement de la page et l’affichage incorrect de l’image dans le navigateur. Pour
r&eacute;duire le temps de t&eacute;l&eacute;chargement et &ecirc;tre s&ucirc;r que toutes les instances de l’image sont affich&eacute;es aux
m&ecirc;mes dimensions, utilisez une application de retouche d’image pour adapter les proportions de
l’image.
Pour redimensionner visuellement un &eacute;l&eacute;ment :
1 S&eacute;lectionnez l’&eacute;l&eacute;ment (par exemple, une image ou un fichier SWF) dans la fen&ecirc;tre de
document.
Des poign&eacute;es de redimensionnement apparaissent &agrave; droite et en bas de l’&eacute;l&eacute;ment, et dans le
coin inf&eacute;rieur droit. Si ces poign&eacute;es n’apparaissent pas, cliquez &agrave; l’ext&eacute;rieur de l’&eacute;l&eacute;ment &agrave;
redimensionner, puis s&eacute;lectionnez-le &agrave; nouveau ou cliquez sur la balise correspondante dans le
s&eacute;lecteur de balises.
2 Pour redimensionner l’&eacute;l&eacute;ment, utilisez l’une des m&eacute;thodes suivantes :
■ Pour ajuster la largeur de l’&eacute;l&eacute;ment, d&eacute;placez la poign&eacute;e &agrave; droite de la s&eacute;lection.
■ Pour ajuster la hauteur de l’&eacute;l&eacute;ment, d&eacute;placez la poign&eacute;e au bas de la s&eacute;lection.
■ Pour ajuster simultan&eacute;ment la largeur et la hauteur de l’&eacute;l&eacute;ment, faites glisser la poign&eacute;e de
l’angle de la s&eacute;lection.
■ Pour conserver les proportions de l’&eacute;l&eacute;ment (rapport largeur/hauteur) lorsque vous modifiez
ses dimensions, faites glisser la poign&eacute;e de l’angle de la s&eacute;lection tout en appuyant sur la
touche Maj.
Les &eacute;l&eacute;ments peuvent &ecirc;tre redimensionn&eacute;s visuellement &agrave; une taille minimale de 8 x 8 pixels. Pour
ajuster la largeur et la hauteur d’un &eacute;l&eacute;ment &agrave; une taille inf&eacute;rieure, (par exemple, 1 x 1 pixel),
utilisez l’inspecteur de propri&eacute;t&eacute;s pour entrer une valeur num&eacute;rique.
Pour r&eacute;tablir la taille originale d’un &eacute;l&eacute;ment redimensionn&eacute;, supprimez les valeurs des zones de
texte L et H ou cliquez sur le bouton R&eacute;tablir la taille dans l’inspecteur de propri&eacute;t&eacute;s.
Pour r&eacute;tablir la taille originale d’une image :
• Cliquez sur le bouton R&eacute;tablir la taille dans l’inspecteur de propri&eacute;t&eacute;s des images.
Redimensionnement d’une image
323
Pour r&eacute;&eacute;chantillonner une image redimensionn&eacute;e :
1 Redimensionnez l’image de la mani&egrave;re d&eacute;crite ci-dessus.
2 Cliquez sur le bouton R&eacute;&eacute;chantillonner dans l’inspecteur de propri&eacute;t&eacute;s des images.
Remarque : Vous ne pouvez pas r&eacute;&eacute;chantillonner les espaces r&eacute;serv&eacute;s pour une image ou les
&eacute;l&eacute;ments autres que les images bitmap.
Rubriques connexes
• Modification d’images dans Dreamweaver, page 318
Recadrage d’une image
Dreamweaver permet de recadrer (ou rogner) les images bitmap.
Remarque : Lorsque vous recadrez une image &agrave; l’aide de Dreamweaver, le fichier d’image source est
modifi&eacute; sur le disque. Il peut donc s’av&eacute;rer utile de conserver une copie de sauvegarde du fichier
d’image au cas o&ugrave; vous auriez besoin de revenir &agrave; l’image d’origine.
Pour recadrer une image :
1 Ouvrez la page qui contient l’image &agrave; recadrer, s&eacute;lectionnez l’image et proc&eacute;dez de l’une des
mani&egrave;res suivantes :
■ Cliquez sur l’ic&ocirc;ne Recadrer dans l’inspecteur de propri&eacute;t&eacute;s des images.
■ Choisissez Modifier &gt; Image &gt; Recadrer.
Des poign&eacute;es de recadrage apparaissent autour de l’image s&eacute;lectionn&eacute;e.
2 Ajustez-les jusqu’&agrave; ce que la surface de l’image &agrave; conserver soit entour&eacute;e d’une zone limite.
3 Double-cliquez dans cette zone ou appuyez sur Entr&eacute;e pour recadrer la s&eacute;lection.
Une bo&icirc;te de dialogue vous informe que le fichier image que vous recadrez sera modifi&eacute; sur le
disque. Cliquez sur OK.
Chaque pixel de l’image bitmap situ&eacute; hors de la zone limite est supprim&eacute; mais les autres objets
de l’image ne sont pas affect&eacute;s.
4 V&eacute;rifiez &agrave; l’aide de l’aper&ccedil;u que l’image correspond &agrave; vos attentes.
Pour annuler les effets de la commande de recadrage :
• Choisissez Edition &gt; Annuler Recadrer pour revenir &agrave; l’image d’origine.
Vous pouvez annuler l’effet de la commande Recadrer (et revenir au fichier d’image d’origine)
jusqu’au moment o&ugrave; vous quittez Dreamweaver ou alors modifiez le fichier dans une
application de retouche d’image.
Rubriques connexes
• Modification d’images dans Dreamweaver, page 318
• Ajustement de la luminosit&eacute; et du contraste d’une image, page 325
• Accentuation d’une image, page 325
Optimisation d’une image &agrave; l’aide de Fireworks
Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.
324
Chapitre 14 : Insertion d’images
Pour optimiser une image :
1 Ouvrez la page qui contient l’image &agrave; optimiser, s&eacute;lectionnez l’image et proc&eacute;dez de l’une des
mani&egrave;res suivantes :
■ Cliquez sur le bouton Optimiser dans Fireworks dans l’inspecteur de propri&eacute;t&eacute;s des images.
■ Choisissez Modifier &gt; Image &gt; Optimiser l’image dans Fireworks.
La bo&icirc;te de dialogue Optimiser l’image dans Fireworks s’affiche.
2 Cliquez sur OK.
Rubriques connexes
•
•
•
•
Modification d’images dans Dreamweaver, page 318
Insertion d’une image, page 319
Recadrage d’une image, page 324
Accentuation d’une image, page 325
Ajustement de la luminosit&eacute; et du contraste d’une image
La fonction Luminosit&eacute;/Contraste modifie la luminosit&eacute; ou le contraste des pixels qui composent
l’image. Ceci affecte les surbrillances, les ombres et les demi-tons d’une image. Cette fonction est
utilis&eacute;e pour corriger les images trop sombres ou trop claires.
Pour ajuster la luminosit&eacute; et le contraste d’une image :
1 Ouvrez la page qui contient l’image &agrave; ajuster, s&eacute;lectionnez l’image et proc&eacute;dez de l’une des
mani&egrave;res suivantes :
Cliquez sur le bouton Luminosit&eacute;/Contraste dans l’inspecteur de propri&eacute;t&eacute;s.
■ Choisissez Modifier &gt; Image &gt; Luminosit&eacute;/Contraste.
La bo&icirc;te de dialogue Luminosit&eacute;/Contraste s’affiche.
2 D&eacute;placez les curseurs de luminosit&eacute; et de contraste pour modifier les valeurs &agrave; votre convenance.
Les valeurs sont comprises entre -100 et 100.
3 Cliquez sur OK.
■
Rubriques connexes
•
•
•
•
Modification d’images dans Dreamweaver, page 318
Insertion d’une image, page 319
Recadrage d’une image, page 324
Accentuation d’une image, page 325
Accentuation d’une image
L’accentuation augmente le contraste des pixels autour des objets pour une meilleure d&eacute;finition de
l’image.
Pour accentuer une image :
1 Ouvrez la page qui contient l’image &agrave; accentuer, s&eacute;lectionnez l’image et proc&eacute;dez de l’une des
mani&egrave;res suivantes :
■ Cliquez sur le bouton Accentuer dans l’inspecteur de propri&eacute;t&eacute;s des images.
Accentuation d’une image
325
Choisissez Modifier &gt; Image &gt; Accentuer.
La bo&icirc;te de dialogue Accentuer s’affiche.
2 Pour sp&eacute;cifier le degr&eacute; d’accentuation appliqu&eacute; par Dreamweaver &agrave; l’image, d&eacute;placez le curseur
ou tapez une valeur comprise entre 0 et 10 dans la zone de texte.
Lorsque vous ajustez la nettet&eacute; de l’image &agrave; l’aide de la bo&icirc;te de dialogue Accentuer, vous
pouvez afficher un aper&ccedil;u de l’image modifi&eacute;e.
3 Cliquez sur OK.
4 Enregistrez vos modifications en choisissant Fichier &gt; Enregistrer ou revenez &agrave; l’image d’origine
en choisissant Edition &gt; Annuler Accentuer.
■
Pour annuler les effets de la commande d’accentuation :
• Choisissez Edition &gt; Annuler Accentuer pour revenir &agrave; l’image d’origine.
Vous pouvez annuler l’effet de la commande Accentuer (et revenir au fichier d’image d’origine)
uniquement avant d’enregistrer la page qui contient l’image. Une fois que vous avez enregistr&eacute;
la page, les modifications apport&eacute;es &agrave; l’image sont d&eacute;finitivement enregistr&eacute;es.
Rubriques connexes
• Modification d’images dans Dreamweaver, page 318
• Recadrage d’une image, page 324
• Ajustement de la luminosit&eacute; et du contraste d’une image, page 325
Cr&eacute;ation d’une image survol&eacute;e
Vous pouvez ins&eacute;rer des images survol&eacute;es dans votre page. Une image survol&eacute;e est une image qui,
lorsqu’elle est visualis&eacute;e dans un navigateur, change lorsque le pointeur vient se placer au-dessus
d’elle.
Avant de commencer, s&eacute;lectionnez une ou plusieurs paires d’images. Une image survol&eacute;e est en
fait compos&eacute;e de deux images : l’image principale (affich&eacute;e au chargement de la page) et l’image
secondaire (qui appara&icirc;t lorsque le pointeur est plac&eacute; au-dessus de l’image principale). Les deux
images utilis&eacute;es doivent avoir les m&ecirc;mes dimensions ; si ce n’est pas le cas, Dreamweaver
redimensionne automatiquement la seconde image en fonction de la taille de la premi&egrave;re.
Les images survol&eacute;es sont automatiquement d&eacute;finies pour r&eacute;pondre &agrave; l’&eacute;v&eacute;nement onMouseOver.
Pour plus d’informations sur la configuration d’une image pour r&eacute;pondre &agrave; un &eacute;v&eacute;nement
diff&eacute;rent (par exemple, un clic de souris) ou sur la notification de l’image affich&eacute;e par une image
survol&eacute;e, voir Permuter une image, page 409.
Pour cr&eacute;er une image survol&eacute;e :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous voulez ins&eacute;rer
l’image survol&eacute;e.
2 Ins&eacute;rez l’image survol&eacute;e &agrave; l’aide de l’une des m&eacute;thodes suivantes :
■ Dans la barre Ins&eacute;rer, s&eacute;lectionnez Commun puis cliquez sur l’ic&ocirc;ne Image survol&eacute;e.
■ Dans la barre Ins&eacute;rer, s&eacute;lectionnez Commun puis faites glisser l’ic&ocirc;ne Image survol&eacute;e vers
l’emplacement souhait&eacute; de la fen&ecirc;tre du document.
■ Choisissez la commande Insertion &gt; Images interactives &gt; Image survol&eacute;e.
La bo&icirc;te de dialogue Ins&eacute;rer l’image survol&eacute;e s’affiche.
326
Chapitre 14 : Insertion d’images
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
5 Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur ou appuyez sur la touche F12.
Il est impossible de voir l’effet d’une image survol&eacute;e dans le mode Cr&eacute;ation.
6 Dans le navigateur, placez le pointeur au-dessus de l’image d’origine.
Cette image doit alors &ecirc;tre remplac&eacute;e par l’image survol&eacute;e.
Rubriques connexes
• Insertion d’une barre de navigation, page 346
Utilisation d’un &eacute;diteur d’image externe
Dans Dreamweaver, vous pouvez ouvrir une image s&eacute;lectionn&eacute;e dans un &eacute;diteur d’image externe.
Lorsque vous revenez dans Dreamweaver apr&egrave;s avoir enregistr&eacute; le fichier d’image modifi&eacute;, toutes
les modifications apport&eacute;es &agrave; l’image sont visibles dans la fen&ecirc;tre de document.
Vous pouvez d&eacute;finir Fireworks comme principal &eacute;diteur d’image. Pour plus d’informations, voir
Utilisation de Fireworks, page 355.
Pour lancer l’&eacute;diteur d’image externe, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Double-cliquez sur l’image &agrave; modifier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
•
•
enfonc&eacute;e (Macintosh) sur l’image &agrave; modifier, choisissez l’option Modifier avec &gt; Parcourir et
s&eacute;lectionnez un &eacute;diteur.
S&eacute;lectionnez l’image &agrave; modifier, puis cliquez sur Modifier dans l’inspecteur de propri&eacute;t&eacute;s.
Double-cliquez sur le fichier d’image dans le panneau Site pour lancer l’&eacute;diteur d’image
principal. Si vous n’avez pas indiqu&eacute; d’&eacute;diteur d’image, Dreamweaver ex&eacute;cute l’&eacute;diteur par
d&eacute;faut de ce type de fichier.
Remarque : Lorsque vous ouvrez directement une image &agrave; partir du panneau Site, les
fonctionnalit&eacute;s d’int&eacute;gration de Fireworks sont inop&eacute;rantes ; Fireworks n’ouvre pas le fichier
original PNG. Pour utiliser ces fonctionnalit&eacute;s d’int&eacute;gration de Fireworks, ouvrez les images &agrave;
partir de la fen&ecirc;tre de document.
Si l’image mise &agrave; jour n’appara&icirc;t pas une fois de retour dans la fen&ecirc;tre Dreamweaver, s&eacute;lectionnez
l’image et cliquez sur le bouton Actualiser dans l’inspecteur de propri&eacute;t&eacute;s.
Rubriques connexes
• Sp&eacute;cification de l’&eacute;diteur &agrave; lancer depuis Dreamweaver, page 372
Application decomportements aux images
Vous pouvez appliquer l’un des comportements disponibles &agrave; une image ou &agrave; la zone r&eacute;active
d’une image. Lorsque vous appliquez un comportement &agrave; une zone r&eacute;active, Dreamweaver ins&egrave;re
le code source HTML n&eacute;cessaire dans la balise area. Il existe trois comportements qui
s’appliquent sp&eacute;cifiquement aux images : Pr&eacute;charger les images, Permuter une image et Restaurer
l’interversion d’images.
Application decomportements aux images
327
Pr&eacute;charger les images place dans la m&eacute;moire cache du navigateur les images qui ne sont pas
imm&eacute;diatement affich&eacute;es lors du chargement de la page (par exemple, les images de substitution
appel&eacute;es par un comportement, un calque ou une fonction en JavaScript). Cela &eacute;vite &agrave; l’utilisateur
d’attendre que ces images soient charg&eacute;es, lorsqu’un &eacute;v&eacute;nement d&eacute;clenche leur apparition (voir
Pr&eacute;charger les images, page 400).
Permuter une image remplace une image par une autre, en modifiant l’attribut src de la balise
img. Utilisez cette action pour cr&eacute;er des substitutions de boutons et autres effets sur des images (y
compris la substitution de plusieurs images &agrave; la fois) (voir Permuter une image, page 409).
r&eacute;tablit la derni&egrave;re interversion d’images &agrave; son &eacute;tat d’origine.
Cette action est automatiquement ajout&eacute;e par d&eacute;faut lorsque vous associez l’action Permuter une
image &agrave; un objet ; en principe, vous n’avez pas besoin d’y faire appel manuellement (voir Restaurer
l’image intervertie, page 410).
Restaurer l’interversion d’images
Vous pouvez &eacute;galement utiliser les comportements pour cr&eacute;er des structures de navigation
sophistiqu&eacute;es, par exemple une barre de navigation ou un menu de liens (voir Utilisation des barres
de navigation, page 346 et Insertion de menus de reroutage, page 344).
328
Chapitre 14 : Insertion d’images
CHAPITRE 15
Liens et navigation
Une fois que vous avez d&eacute;fini un site Macromedia Dreamweaver MX 2004 dans lequel stocker les
documents de votre site Web et que vous avez cr&eacute;&eacute; des pages HTML, il vous reste &agrave; &eacute;tablir des
connexions entre vos documents et d’autres types de documents.
Macromedia Dreamweaver MX 2004 propose plusieurs m&eacute;thodes pour cr&eacute;er des liens hypertextes
vers des documents, des images, des fichiers multim&eacute;dias ou des logiciels pouvant &ecirc;tre t&eacute;l&eacute;charg&eacute;s.
Vous pouvez &eacute;tablir des liens vers n’importe quel texte ou n’importe quelle image d’un document,
m&ecirc;me s’ils se trouvent dans un en-t&ecirc;te, une liste, un tableau, un calque ou un cadre.
Pour obtenir une repr&eacute;sentation visuelle de la mani&egrave;re dont vos fichiers sont li&eacute;s, utilisez la carte
du site. Dans la carte du site, vous pouvez ajouter de nouveaux documents &agrave; votre site, cr&eacute;er et
supprimer des liens entre des documents et v&eacute;rifier les liens entre des fichiers interd&eacute;pendants.
Pour plus d’informations, voir Affichage d’une carte de site, page 98.
Il existe diff&eacute;rentes m&eacute;thodes de cr&eacute;ation et de gestion de liens. Certains concepteurs de pages
Web pr&eacute;f&egrave;rent cr&eacute;er des liens vers des pages ou des fichiers qui n’existent pas encore, alors que
d’autres pr&eacute;f&egrave;rent cr&eacute;er d’abord tous les fichiers et pages, puis ajouter les liens. Une autre m&eacute;thode
de gestion des liens consiste &agrave; cr&eacute;er des pages de type &laquo; espace r&eacute;serv&eacute; &raquo; qui remplacent le fichier
final et permettent d’ajouter des liens rapidement et de les v&eacute;rifier avant de terminer toutes les
pages. Pour plus d’informations sur la v&eacute;rification de liens, voir Recherche de liens bris&eacute;s, externes et
orphelins, page 350.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
Description des emplacements et chemins d’acc&egrave;s des documents, page 330
Menus de reroutage, page 332
Barres de navigation, page 333
A propos des cartes graphiques, page 334
Cr&eacute;ation de liens, page 334
Gestion des liens, page 340
Insertion de menus de reroutage, page 344
Utilisation des barres de navigation, page 346
Utilisation de cartes graphiques, page 347
Association de comportements JavaScript &agrave; des liens, page 349
Recherche de liens bris&eacute;s, externes et orphelins, page 350
329
• Correction des liens bris&eacute;s, page 351
• Ouverture des documents li&eacute;s dans Dreamweaver, page 352
Description des emplacements et chemins d’acc&egrave;s des
documents
Pour cr&eacute;er des liens, il est indispensable de comprendre le chemin d’acc&egrave;s qui s’&eacute;tablit entre le
document &agrave; partir duquel vous &eacute;tablissez un lien et le document point&eacute; par ce lien.
Chaque page Web poss&egrave;de une adresse unique, appel&eacute;e URL (Uniform Resource Locator) Pour
plus d’informations sur les URL, voir le site Internet du World Wide Web Consortium au sujet
des noms et des adresses : www.w3.org/Addressing/.
Cependant, lorsque vous cr&eacute;ez un lien local (entre deux documents du m&ecirc;me site), vous n’avez en
g&eacute;n&eacute;ral pas besoin de sp&eacute;cifier l’URL compl&egrave;te du document vers lequel vous cr&eacute;ez le lien ; il est
pr&eacute;f&eacute;rable d’indiquer un chemin relatif, &agrave; partir du document actif ou de la racine du site.
Il existe trois types de chemins d’acc&egrave;s de liaison :
• Chemins absolus (par exemple http://www.macromedia.com/go/dreamweaver_support_fr/
•
•
contents.html). Pour plus d’informations, voir chemins absolus, page 330.
Chemins relatifs au document (par exemple dreamweaver/contents.html). Pour plus
d’informations, voir Chemins relatifs au document, page 331.
Chemins relatifs &agrave; la racine du site (par exemple /support/dreamweaver/contents.html). Pour
plus d’informations, voir Chemins relatifs &agrave; la racine du site, page 332.
Dreamweaver vous permet de choisir ais&eacute;ment le type de chemin &agrave; cr&eacute;er pour vos liens (voir Liens
entre fichiers et documents, page 334).
Remarque : Il est pr&eacute;f&eacute;rable d’utiliser le type de lien de votre choix, qu’il soit relatif au site ou au
document. L’exploration des liens, contrairement &agrave; la saisie des chemins, garantit que vous entrez
toujours le chemin correct.
chemins absolus
Les chemins absolus indiquent le chemin complet du document li&eacute;, y compris le protocole &agrave;
utiliser (en g&eacute;n&eacute;ral http:// pour les pages Web). Par exemple, http://www.macromedia.com/go/
dreamweaver_support_fr/contents.html est un chemin absolu.
Vous devez utiliser un chemin absolu lorsque vous cr&eacute;ez un lien vers un fichier situ&eacute; en dehors du
site courant. Vous pouvez &eacute;galement utiliser des liens de chemins absolus pour les liens locaux
(vers des documents sur le m&ecirc;me site), mais cette approche est d&eacute;conseill&eacute;e. Si vous d&eacute;placez le
site vers un autre domaine, tous les liens de chemins absolus locaux sont rompus. De plus,
l’utilisation de chemins relatifs pour les liens locaux offre une plus grande souplesse si vous devez
d&eacute;placer des fichiers au sein de votre site.
Remarque : Lors de l’insertion d’images (et non de liens), si vous utilisez un chemin absolu vers une
image qui r&eacute;side sur un serveur distant et qui n’est pas disponible sur le lecteur de disque dur local,
vous ne pourrez pas visualiser l’image dans la fen&ecirc;tre de document. Ainsi, vous devez pr&eacute;visualiser le
document dans un navigateur pour voir l’image. Si possible, utilisez des chemins relatifs au document
ou &agrave; la racine pour les images. Pour plus d’informations, voir Insertion d’une image, page 319.
330
Chapitre 15 : Liens et navigation
Chemins relatifs au document
Les chemins relatifs au document repr&eacute;sentent le type de chemin le plus adapt&eacute; aux liens locaux
dans la plupart des sites Web. Ils sont particuli&egrave;rement utiles lorsque le document actif et le
document point&eacute; par le lien se trouvent dans le m&ecirc;me dossier et le resteront vraisemblablement.
Vous pouvez &eacute;galement utiliser un chemin relatif au document pour pointer sur un document
situ&eacute; dans un autre dossier, en indiquant le chemin entre le document actif et le document li&eacute;, au
sein de la hi&eacute;rarchie de dossiers.
Indiquer un chemin relatif au document consiste tout simplement &agrave; laisser de c&ocirc;t&eacute; la partie de
l’URL absolue qui est identique pour les deux documents, en n’indiquant que la partie du chemin
qui diff&egrave;re.
Par exemple, supposons que la structure de votre site soit la suivante :
Vous pouvez cr&eacute;er des liens du fichier contents.html vers d’autres fichiers comme suit :
• Pour &eacute;tablir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le m&ecirc;me
dossier), le nom de fichier est le chemin relatif : hours.html.
• Pour &eacute;tablir un lien vers tips.html (qui se trouve dans le sous-dossier &laquo; ressources &raquo;), utilisez le
•
chemin relatif resources/tips.html.
Chaque barre oblique (/) signifie &laquo; descendre d’un niveau dans la hi&eacute;rarchie du dossier &raquo;.
Pour &eacute;tablir un lien vers index.html (qui se trouve dans le dossier parent, un niveau au-dessus
de contents.html), utilisez le chemin relatif ../index.html.
Description des emplacements et chemins d’acc&egrave;s des documents
331
•
Chaque s&eacute;quence de deux points suivis d’une barre oblique (../) signifie &laquo; monter d’un niveau
dans la hi&eacute;rarchie du dossier &raquo;.
Pour &eacute;tablir un lien vers catalog.html (qui se trouve dans un autre sous-dossier du dossier
parent), utilisez le chemin relatif ../products/catalog.html.
La s&eacute;quence ../ fait remonter au dossier parent, puis la cha&icirc;ne products/ fait redescendre dans le
sous-dossier products.
Lorsque vous d&eacute;placez un groupe de fichiers sous la forme d’un groupe (par exemple, lorsque vous
d&eacute;placez un dossier entier, afin que tous les fichiers au sein de ce dossier conservent les m&ecirc;mes
chemins relatifs entre eux), il n’est pas n&eacute;cessaire de mettre &agrave; jour les liens relatifs au document
entre ces fichiers. Toutefois, si vous d&eacute;placez individuellement un fichier qui contient des liens
relatifs au document, ou un fichier sur lequel pointe un lien relatif &agrave; partir d’un autre document,
il est n&eacute;cessaire de mettre ces liens &agrave; jour (si vous d&eacute;placez ou renommez des fichiers dans le
panneau Fichiers, Dreamweaver met automatiquement &agrave; jour tous les liens concern&eacute;s).
Chemins relatifs &agrave; la racine du site
Les chemins relatifs &agrave; la racine du site repr&eacute;sentent le chemin d’acc&egrave;s &agrave; un document &agrave; partir du
dossier racine du site. Ces types de chemins peuvent &ecirc;tre utiles si vous travaillez sur un grand site
Web qui utilise plusieurs serveurs ou un seul serveur qui est l’h&ocirc;te de plusieurs sites diff&eacute;rents.
Toutefois, si vous n’&ecirc;tes pas familier avec ce type de chemin, adoptez plut&ocirc;t les chemins relatifs au
document.
Un chemin relatif &agrave; la racine commence par une barre oblique, qui repr&eacute;sente le dossier racine du
site. Par exemple, /support/tips.html est le chemin relatif &agrave; la racine d’un fichier (tips.html) situ&eacute;
dans le sous-dossier &laquo; support &raquo; de la racine du site.
Un chemin relatif &agrave; la racine repr&eacute;sente souvent le meilleur moyen d’indiquer les liens dans un site
Web sur lequel il vous faudra fr&eacute;quemment d&eacute;placer des fichiers HTML d’un dossier &agrave; un autre.
Lorsque vous d&eacute;placez un document qui contient des liens relatifs &agrave; la racine, il n’est pas n&eacute;cessaire
de modifier les liens ; par exemple, si vos fichiers HTML utilisent des liens relatifs &agrave; la racine pour
les fichiers d&eacute;pendants (les images en particulier), les liens des fichiers d&eacute;pendants restent valides
si vous d&eacute;placez les fichiers HTML.
Toutefois, si vous d&eacute;placez ou renommez les documents qui sont point&eacute;s par des liens relatifs &agrave; la
racine, il sera n&eacute;cessaire de mettre ces liens &agrave; jour, m&ecirc;me si les chemins relatifs de ces documents
entre eux n’ont pas chang&eacute;. Par exemple, si vous d&eacute;placez un dossier, tous les chemins relatifs &agrave; la
racine des fichiers qu’il contient doivent &ecirc;tre mis &agrave; jour (si vous d&eacute;placez ou renommez des fichiers
dans le panneau Fichiers, Dreamweaver met automatiquement &agrave; jour tous les liens concern&eacute;s).
Menus de reroutage
Un menu de reroutage est un menu d&eacute;roulant dans un document, visible pour tous les visiteurs
du site et r&eacute;pertoriant les options qui lient vers des documents ou fichiers. Vous pouvez cr&eacute;er des
liens vers des documents de votre site Web ou d’un autre site, des liens de messagerie &eacute;lectronique,
des liens vers des images ou vers tout type de fichier pouvant &ecirc;tre ouvert dans un navigateur.
Un menu de reroutage peut comporter trois composants de base :
• (Facultatif ) Une invite de s&eacute;lection au sein du menu, par exemple une description de cat&eacute;gorie
pour les &eacute;l&eacute;ments du menu ou des instructions, du type &laquo; Faites votre choix &raquo;.
• (Obligatoire) Une liste d’&eacute;l&eacute;ments de menu de reroutage : l’utilisateur choisit une option et le
document ou le fichier li&eacute; s’affiche.
332
Chapitre 15 : Liens et navigation
• (Facultatif ) Un bouton Atteindre.
Rubriques connexes
• Insertion de menus de reroutage, page 344
Barres de navigation
Une barre de navigation est compos&eacute;e d’une image ou d’une s&eacute;rie d’images qui changent en
fonction des actions de l’utilisateur. Les barres de navigation constituent souvent une m&eacute;thode
simple pour se d&eacute;placer entre des pages et des fichiers sur un site.
Un &eacute;l&eacute;ment de barre de navigation peut avoir quatre &eacute;tats :
• Haut : l’image qui s’affiche lorsque l’utilisateur n’a pas encore cliqu&eacute; ou interagi avec l’&eacute;l&eacute;ment.
Par exemple, l’&eacute;l&eacute;ment dans cet &eacute;tat est tel qu’il n’est pas cliqu&eacute;.
• Survol&eacute;e : l’image qui s’affiche lorsque le pointeur de la souris est d&eacute;plac&eacute; au-dessus de l’image
Haut. L’aspect de l’&eacute;l&eacute;ment change (par exemple, il peut para&icirc;tre plus clair) pour sp&eacute;cifier &agrave;
l’utilisateur qu’il peut interagir avec celui-ci.
• Bas : l’image qui s’affiche une fois l’&eacute;l&eacute;ment cliqu&eacute;.
•
Par exemple, lorsqu’un utilisateur clique sur un &eacute;l&eacute;ment, une nouvelle page est charg&eacute;e et la
barre de navigation est toujours affich&eacute;e, mais l’&eacute;l&eacute;ment cliqu&eacute; est assombri pour indiquer qu’il
est s&eacute;lectionn&eacute;.
Image Au-dessus lorsque Abaiss&eacute;e : l’image qui s’affiche lorsque le pointeur est plac&eacute; au-dessus
de l’image Bas une fois l’&eacute;l&eacute;ment cliqu&eacute;.
Par exemple, l’&eacute;l&eacute;ment peut appara&icirc;tre estomp&eacute; ou gris&eacute;. Vous pouvez utiliser cet &eacute;tat comme
indice visuel pour indiquer aux utilisateurs qu’il n’est pas possible de cliquer &agrave; nouveau sur cet
&eacute;l&eacute;ment lorsqu’ils se trouvent dans cette section du site.
Vous n’avez pas &agrave; inclure des images de barre de navigation pour les quatre &eacute;tats. Par exemple,
vous pouvez uniquement d&eacute;finir les &eacute;tats Haut et Bas.
Rubriques connexes
• Utilisation des barres de navigation, page 346
Barres de navigation
333
A propos des cartes graphiques
Une carte graphique est une image ayant &eacute;t&eacute; divis&eacute;e en r&eacute;gions, ou zones r&eacute;actives. Lorsque vous
cliquez sur une zone r&eacute;active, une action est ex&eacute;cut&eacute;e, par exemple, l’ouverture d’un nouveau
fichier.
Les cartes graphiques sur le client conservent les informations propres aux liens hypertextes dans
le corps du document HTML, alors que les cartes graphiques sur le serveur conservent ces
informations dans un fichier de carte s&eacute;par&eacute;. Lorsque l’utilisateur clique sur la zone r&eacute;active d’une
image, l’URL associ&eacute;e est directement envoy&eacute;e au serveur. Ceci rend les cartes graphiques sur le
client plus rapides que leurs &eacute;quivalents sur le serveur, car celui-ci n’a pas &agrave; interpr&eacute;ter les
coordonn&eacute;es du point sur lequel l’utilisateur a cliqu&eacute;. Les cartes graphiques sur le client sont prises
en charge par Netscape Navigator &agrave; partir de sa version 2.0, par NCSA Mosaic 2.1 et 3.0, et par
toutes les versions de Microsoft Internet Explorer.
Dreamweaver ne modifie pas les r&eacute;f&eacute;rences aux cartes graphiques sur le serveur, dans les
documents existants. Vous pouvez utiliser les cartes graphiques c&ocirc;t&eacute; client et c&ocirc;t&eacute; serveur dans le
m&ecirc;me document. Les navigateurs qui prennent en charge les deux types de cartes donnent la
priorit&eacute; aux cartes graphiques sur le client. Pour inclure une carte graphique sur le serveur dans un
document, vous devez &eacute;crire le code HTML appropri&eacute;.
Rubriques connexes
• Utilisation de cartes graphiques, page 347
Cr&eacute;ation de liens
Vous pouvez cr&eacute;er plusieurs types de liens dans un document :
• Un lien vers un autre document ou fichier, tel que le fichier d’une image, d’une animation ou
d’un son (voir Liens entre fichiers et documents, page 334).
• Un lien vers une ancre nomm&eacute;e, qui permet de sauter &agrave; un emplacement sp&eacute;cifique au sein
•
•
d’un document (voir Lien vers un emplacement sp&eacute;cifique au sein d’un document, page 338).
Un lien de courriel, qui cr&eacute;e un courriel vierge avec l’adresse du destinataire d&eacute;j&agrave; indiqu&eacute;e (voir
Cr&eacute;ation d’un lien de messagerie &eacute;lectronique, page 339).
Des liens nuls et de script, qui permettent d’affecter des comportements &agrave; un objet ou de cr&eacute;er
un lien qui ex&eacute;cute un code JavaScript (voir Cr&eacute;ation de liens nuls et de liens de script, page 340).
Remarque : Avant de cr&eacute;er des liens, assurez-vous de bien comprendre le fonctionnement des
chemins relatifs au document, des chemins relatifs &agrave; la racine du site et des chemins absolus (voir
Description des emplacements et chemins d’acc&egrave;s des documents, page 330).
Liens entre fichiers et documents
Utilisez l’inspecteur de propri&eacute;t&eacute;s et l’ic&ocirc;ne Pointer vers un fichier pour cr&eacute;er des liens &agrave; partir
d’une image, d’un objet ou de texte vers un autre document ou fichier. Pour plus d’informations
sur l’utilisation de la carte du site pour cr&eacute;er des liens, voir Modification de liens dans la carte du
site, page 342.
Pour utiliser des chemins relatifs &agrave; la racine, d&eacute;finissez un dossier local dans Dreamweaver en
choisissant un dossier racine local qui servira d’&eacute;quivalent &agrave; la racine des documents sur le serveur
(voir Configuration d’un nouveau site Dreamweaver, page 66). Dreamweaver utilise ce dossier pour
d&eacute;terminer les chemins relatifs &agrave; la racine pointant vers des fichiers.
334
Chapitre 15 : Liens et navigation
Remarque : Il est conseill&eacute; de toujours enregistrer un nouveau fichier avant de cr&eacute;er un chemin relatif
au document, car ce dernier n’est pas valide sans point de d&eacute;part bien d&eacute;fini. Si vous cr&eacute;ez un chemin
relatif au document avant d’enregistrer le fichier, Dreamweaver utilise provisoirement un chemin
absolu commen&ccedil;ant par &laquo; file:// &raquo; jusqu’&agrave; ce que le fichier soit enregistr&eacute;. Dreamweaver convertit
alors le chemin file:// en chemin relatif.
Liens vers des documents &agrave; l’aide de l’inspecteur de propri&eacute;t&eacute;s
Vous pouvez utiliser l’ic&ocirc;ne de dossier Inspecteur de propri&eacute;t&eacute;s ou la zone Lien pour cr&eacute;er des
liens &agrave; partir d’une image, un objet, du texte ou tout autre document ou fichier.
Pour cr&eacute;er un lien vers des documents en utilisant l’ic&ocirc;ne du dossier Inspecteur de
propri&eacute;t&eacute;s ou la zone de texte Lien :
1 S&eacute;lectionnez le texte ou une image dans la fen&ecirc;tre de cr&eacute;ation du document.
2 Ouvrez l’inspecteur de propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s) et proc&eacute;dez de l’une des mani&egrave;res
suivantes :
■
Cliquez sur l’ic&ocirc;ne repr&eacute;sentant un dossier situ&eacute;e &agrave; droite de la zone Lien pour rechercher et
s&eacute;lectionner un fichier.
Le chemin d’acc&egrave;s du document point&eacute; par le lien s’affiche dans la zone URL. Utilisez le
menu d&eacute;roulant Relatif &agrave; dans la bo&icirc;te de dialogue S&eacute;lectionner fichier HTML pour
sp&eacute;cifier si le chemin est relatif &agrave; la racine ou au document, puis cliquez sur S&eacute;lectionner.
Remarque : Lorsque vous entrez le type de chemin dans la zone de texte Relatif &agrave;,
Dreamweaver utilise votre choix comme type de chemin par d&eacute;faut pour tous les liens ult&eacute;rieurs,
jusqu’&agrave; ce que vous modifiez &agrave; nouveau le type de chemin.
Tapez le chemin et le nom de fichier du document dans la zone Lien.
Pour cr&eacute;er un lien vers un document de votre site, indiquez un chemin relatif au document
ou &agrave; la racine. Pour cr&eacute;er un lien vers un document situ&eacute; en dehors du site, indiquez un
chemin absolu, avec le type de protocole (par exemple, http://). Vous pouvez utiliser cette
approche pour entrer un lien vers un fichier n’ayant pas encore &eacute;t&eacute; cr&eacute;&eacute;.
Pour les chemins relatifs au document, il suffit tout simplement de laisser de c&ocirc;t&eacute; la partie de
l’URL absolue qui est identique pour le document actif et le document li&eacute;. Si le fichier de
destination du lien se trouve dans le m&ecirc;me dossier que le document actuel, entrez le nom de
fichier ; s’il se trouve dans un sous-dossier, saisissez le nom du sous-dossier, suivi d’une barre
oblique (/) et du nom de fichier ; s’il se trouve dans le dossier parent, faites pr&eacute;c&eacute;der le nom de
fichier par ../ (&laquo; .. &raquo; revient &agrave; demander de remonter d’un niveau dans la hi&eacute;rarchie des
dossiers).
3 Dans le menu d&eacute;roulant Cible, s&eacute;lectionnez un emplacement dans lequel ouvrir le document.
Pour que le document li&eacute; s’affiche ailleurs que dans la fen&ecirc;tre ou le cadre en cours, s&eacute;lectionnez
une option dans le menu d&eacute;roulant Cible de l’inspecteur de propri&eacute;t&eacute;s :
■ _blank charge le document li&eacute; dans une nouvelle fen&ecirc;tre, sans nom, du navigateur.
■ _parent charge le document li&eacute; dans le cadre parent ou dans la fen&ecirc;tre parente du cadre
contenant le lien. Si le cadre contenant le lien n’est pas imbriqu&eacute;, le document li&eacute; est charg&eacute;
dans la fen&ecirc;tre de base du navigateur.
■
Cr&eacute;ation de liens
335
■
■
charge le document li&eacute; dans le m&ecirc;me cadre (ou la m&ecirc;me fen&ecirc;tre) que le lien. Il s’agit
de la cible par d&eacute;faut, de sorte qu’il est le plus souvent inutile de la sp&eacute;cifier.
_top charge le document li&eacute; dans la fen&ecirc;tre de base du navigateur, en supprimant tous les
cadres.
_self
Conseil : Si tous les liens de la page doivent &ecirc;tre d&eacute;finis sur la m&ecirc;me cible, vous pouvez sp&eacute;cifier
celle-ci une fois pour toutes en choisissant la commande Insertion &gt; Balise Head &gt; Base et en
s&eacute;lectionnant les informations cible. Pour plus d’informations sur le ciblage de cadres, voir
D&eacute;finition des contenus de cadre avec liens, page 222.
Lien vers des documents &agrave; l’aide de l’ic&ocirc;ne du pointeur
L’ic&ocirc;ne du pointeur vous permet de cr&eacute;er des liens &agrave; partir d’une image, d’un objet ou d’un texte
vers un autre document ou fichier.
Pour cr&eacute;er un lien vers des documents en utilisant l’ic&ocirc;ne du pointeur vers un fichier :
1 S&eacute;lectionnez le texte ou une image dans la fen&ecirc;tre de cr&eacute;ation du document.
2 Faites glisser l’ic&ocirc;ne du pointeur &agrave; droite de la zone Lien de l’inspecteur de propri&eacute;t&eacute;s et pointez
vers un autre document ouvert, une ancre visible dans un document ouvert ou un document du
panneau Fichiers.
La zone Lien est mise &agrave; jour pour indiquer le lien.
Remarque : Vous pouvez cr&eacute;er un lien vers un document ouvert &agrave; condition que vos documents
ne soient pas agrandis dans la fen&ecirc;tre de document. Lorsque vous pointez vers un document
ouvert, celui-ci passe au premier plan de votre &eacute;cran pendant que vous effectuez votre s&eacute;lection.
3 Rel&acirc;chez le bouton de la souris.
Pour cr&eacute;er un lien &agrave; partir d’une s&eacute;lection dans un document ouvert :
1 S&eacute;lectionnez le texte dans la fen&ecirc;tre de document.
2 Faites glisser la s&eacute;lection, en maintenant la touche Maj enfonc&eacute;e.
L’ic&ocirc;ne Pointer vers un fichier s’affiche lorsque vous commencez &agrave; faire glisser la souris.
3 Pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un
fichier du panneau Fichiers.
Remarque : Vous pouvez cr&eacute;er un lien vers un document ouvert &agrave; condition que vos documents
ne soient pas agrandis dans la fen&ecirc;tre de document. Lorsque vous pointez vers un document
ouvert, celui-ci passe au premier plan de votre &eacute;cran pendant que vous effectuez votre s&eacute;lection.
4 Rel&acirc;chez le bouton de la souris.
Lien vers des documents &agrave; l’aide de la carte graphique
Vous pouvez cr&eacute;er des liens &agrave; partir de la carte graphique. Les liens cr&eacute;&eacute;s sont plac&eacute;s en dessous des
fichiers HTML s&eacute;lectionn&eacute;s, ce qui vous permet de cr&eacute;er rapidement des liens au sein d’un site.
Pour cr&eacute;er un lien vers des documents en utilisant la carte du site et l’ic&ocirc;ne Pointer vers un
fichier :
1 Dans le panneau Fichiers, affichez les vues Fichiers du site et Carte du site en appuyant sur
l’ic&ocirc;ne Carte du site et en choisissant Carte et fichiers.
2 S&eacute;lectionnez un fichier HTML dans la carte du site.
L’ic&ocirc;ne Pointer vers un fichier s’affiche &agrave; c&ocirc;t&eacute; du fichier.
336
Chapitre 15 : Liens et navigation
3 Faites glisser l’ic&ocirc;ne Pointer vers un fichier et pointez vers un autre fichier dans la carte du site
ou vers un fichier local dans la vue Fichiers du site.
4 Rel&acirc;chez le bouton de la souris.
Un lien hypertexte portant le nom du fichier li&eacute; est plac&eacute; au bas du fichier HTML s&eacute;lectionn&eacute;.
Cette m&eacute;thode fonctionne correctement lorsque vous construisez votre site et que vous
souhaitez cr&eacute;er rapidement des liens au niveau du site.
Pour lier des documents dans la carte du site, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Faites glisser une page depuis l’Explorateur de Windows ou le S&eacute;lecteur du Macintosh vers une
page dans la carte du site.
Remarque : V&eacute;rifiez que le panneau Fichiers est ancr&eacute;, puis cliquez sur la fl&egrave;che Etendre.
S&eacute;lectionnez Carte et fichiers en maintenant le bouton Carte du site enfonc&eacute;.
• S&eacute;lectionnez une page HTML dans la carte du site, puis choisissez Site &gt; Lier au fichier existant
•
(Windows) ou Site &gt; Affichage de la carte du site &gt; Lier au fichier existant (Macintosh) ou
choisissez Lier au fichier existant dans le menu contextuel.
S&eacute;lectionnez une page HTML dans la carte du plan, puis choisissez Site &gt; Lier au nouveau
fichier (Windows) ou Site &gt; Affichage de la carte du site &gt; Lier au nouveau fichier (Macintosh)
ou choisissez Lier au nouveau fichier dans le menu contextuel.
Utilisation de la commande Hyperlien
La commande Hyperlien vous permet de cr&eacute;er un lien vers une image, un objet ou vers un autre
document ou fichier.
Pour ajouter un hyperlien en utilisant la commande Hyperlien :
1 Placez le curseur &agrave; l’endroit du document o&ugrave; vous souhaitez que l’hyperlien apparaisse.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour afficher la bo&icirc;te de dialogue Hyperlien :
Choisissez Insertion &gt; Hyperlien.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Hyperlien.
La bo&icirc;te de dialogue Hyperlien appara&icirc;t.
■
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Rubriques connexes
• Modification de liens dans la carte du site, page 342
Cr&eacute;ation de liens
337
• Cr&eacute;ation d’un lien de messagerie &eacute;lectronique, page 339
• Cr&eacute;ation de liens nuls et de liens de script, page 340
Lien vers un emplacement sp&eacute;cifique au sein d’un document
Vous pouvez utiliser l’inspecteur de propri&eacute;t&eacute;s pour &eacute;tablir un lien vers une section donn&eacute;e d’un
document en cr&eacute;ant au pr&eacute;alable des ancres nomm&eacute;es. Les ancres nomm&eacute;es permettent de d&eacute;finir
des marqueurs dans un document et sont souvent plac&eacute;es au niveau d’une rubrique sp&eacute;cifique ou
en haut d’un document. Vous pouvez ensuite cr&eacute;er des liens vers ces ancres nomm&eacute;es, qui
am&egrave;nent rapidement le visiteur &agrave; la position sp&eacute;cifi&eacute;e.
La cr&eacute;ation d’un lien vers une ancre nomm&eacute;e s’effectue en deux &eacute;tapes : il faut d’abord cr&eacute;er
l’ancre nomm&eacute;e, puis cr&eacute;er un lien pointant sur elle.
Pour cr&eacute;er une ancre nomm&eacute;e :
1 Dans la fen&ecirc;tre de document, en mode Cr&eacute;ation, placez le curseur &agrave; l’endroit o&ugrave; ins&eacute;rer l’ancre
nomm&eacute;e.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Choisissez Insertion &gt; Ancre nomm&eacute;e.
■ Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Ancre nomm&eacute;e.
La bo&icirc;te de dialogue Ancre nomm&eacute;e appara&icirc;t.
3 Dans la zone de texte Ancre nomm&eacute;e, entrez le nom de l’ancre puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Le marqueur de l’ancre appara&icirc;t au niveau du point d’insertion.
Remarque : Si vous ne voyez pas le marqueur de l’ancre, choisissez Affichage &gt; Assistances
visuelles &gt; El&eacute;ments invisibles.
Pour cr&eacute;er un lien vers une ancre nomm&eacute;e :
1 Dans la fen&ecirc;tre de document en mode Cr&eacute;ation, s&eacute;lectionnez le texte ou l’image &agrave; partir desquels
cr&eacute;er le lien.
2 Dans la zone Lien de l’inspecteur de propri&eacute;t&eacute;s, tapez le signe di&egrave;se (#) et le nom de l’ancre.
Exemple :
■ Pour cr&eacute;er un lien vers une ancre du document actif nomm&eacute;e &laquo;d&eacute;but&raquo;, tapez #d&eacute;but.
■ Pour cr&eacute;er un lien vers une ancre nomm&eacute;e &laquo;d&eacute;but&raquo; dans un autre document figurant dans le
m&ecirc;me dossier, tapez NomDuFichier.html#d&eacute;but.
Remarque : La casse (majuscules/minuscules) est importante dans les noms d’ancre.
Pour cr&eacute;er un lien vers une ancre nomm&eacute;e &agrave; l’aide de la m&eacute;thode Pointer vers un fichier :
1 Ouvrez le document contenant l’ancre nomm&eacute;e souhait&eacute;e.
338
Chapitre 15 : Liens et navigation
Remarque : Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles pour faire
appara&icirc;tre l’ancre, le cas &eacute;ch&eacute;ant.
2 Dans la fen&ecirc;tre de cr&eacute;ation du document, s&eacute;lectionnez le texte ou l’image &agrave; partir desquels cr&eacute;er
le lien (s’il s’agit d’un autre document ouvert, vous devez basculer sur celui-ci).
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Cliquez sur l ’ic&ocirc;ne du pointeur &agrave; droite de la zone Lien de l’inspecteur de propri&eacute;t&eacute;s et
faites-la glisser sur l’ancre vers laquelle vous souhaitez cr&eacute;er un lien, dans le m&ecirc;me document
ou dans tout autre document ouvert.
■ En maintenant la touche Maj enfonc&eacute;e, dans la fen&ecirc;tre de document, faites glisser l’image
ou le texte s&eacute;lectionn&eacute; sur l’ancre vers laquelle vous souhaitez cr&eacute;er un lien, dans le m&ecirc;me
document ou dans tout autre document ouvert.
Rubriques connexes
• Liens entre fichiers et documents, page 334
• Cr&eacute;ation de liens nuls et de liens de script, page 340
Cr&eacute;ation d’un lien de messagerie &eacute;lectronique
Un lien de message &eacute;lectronique ouvre une nouvelle fen&ecirc;tre de message (dans le programme de
messagerie associ&eacute; au navigateur de l’utilisateur) lorsque l’utilisateur clique dessus. La zone A : de
la fen&ecirc;tre du courriel est automatiquement compl&eacute;t&eacute;e par l’adresse indiqu&eacute;e dans le lien.
Pour cr&eacute;er un lien de courriel &agrave; l’aide de la commande Insertion - Lien de messagerie :
1 Dans la fen&ecirc;tre de document, placez le curseur &agrave; l’endroit o&ugrave; afficher le lien de message
&eacute;lectronique ou s&eacute;lectionnez le texte ou l’image qui doit repr&eacute;senter ce lien.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour ins&eacute;rer le lien :
■ Choisissez Insertion &gt; Lien de messagerie.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Lien de messagerie.
La bo&icirc;te de dialogue Lien de messagerie appara&icirc;t.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Pour cr&eacute;er un lien de messagerie &eacute;lectronique &agrave; l’aide de l’inspecteur de propri&eacute;t&eacute;s :
1 S&eacute;lectionnez le texte ou une image dans la fen&ecirc;tre de cr&eacute;ation du document.
2 Dans la zone Lien de l’inspecteur de propri&eacute;t&eacute;s, tapez mailto: suivi d’une adresse &eacute;lectronique.
N’ins&eacute;rez pas d’espaces entre le signe deux points et l’adresse &eacute;lectronique. Par exemple, tapez
mailto:[email protected].
Cr&eacute;ation de liens
339
Rubriques connexes
• Lien vers un emplacement sp&eacute;cifique au sein d’un document, page 338
• Lien vers un emplacement sp&eacute;cifique au sein d’un document, page 338
Cr&eacute;ation de liens nuls et de liens de script
Les types de lien les plus courants sont ceux qui renvoient &agrave; des documents et &agrave; des ancres
nomm&eacute;es (voir Liens entre fichiers et documents, page 334 et Lien vers un emplacement sp&eacute;cifique au
sein d’un document, page 338), mais il en existe d’autres.
est un lien non d&eacute;sign&eacute;. Utilisez des liens nuls pour attacher des comportements &agrave; des
objets ou du texte sur une page. Une fois un lien nul cr&eacute;&eacute;, vous pouvez lui attacher un
comportement pour intervertir une image ou pour afficher un calque lorsque le curseur est
d&eacute;plac&eacute; au-dessus du lien. Pour plus d’informations sur l’association de comportements &agrave; des
objets, voir Application d’un comportement, page 385.
Un lien nul
Les liens de script ex&eacute;cutent un code JavaScript ou appellent une fonction JavaScript et
permettent de fournir aux utilisateurs des informations suppl&eacute;mentaires sur un &eacute;l&eacute;ment sans
quitter la page en cours. Les liens de scripts permettent &eacute;galement d’ex&eacute;cuter des calculs, des
validations de formulaires et autres t&acirc;ches de traitement lorsqu’un visiteur clique sur un &eacute;l&eacute;ment
sp&eacute;cifique.
Pour cr&eacute;er un lien nul :
1 S&eacute;lectionnez du texte, un objet ou une image dans la fen&ecirc;tre de cr&eacute;ation du document.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, tapez javascript:; (le mot javascript suivi par deux points puis
par un point-virgule) dans la zone de texte Lien.
Pour cr&eacute;er un lien de script :
1 S&eacute;lectionnez du texte, un objet ou une image dans la fen&ecirc;tre de cr&eacute;ation du document.
2 Dans la zone Lien de l’inspecteur de propri&eacute;t&eacute;s, tapez javascript: suivi du code JavaScript ou
d’un appel de fonction JavaScript.
Par exemple, la saisie de javascript:alert(’Ce lien am&egrave;ne &agrave; l’index’) dans la zone Lien cr&eacute;e un
lien qui, lorsque l’on clique dessus, affiche une zone d’alerte JavaScript avec le message &laquo; Ce
lien am&egrave;ne &agrave; l’index. &raquo;.
Remarque : Le code JavaScript &eacute;tant ins&eacute;r&eacute; entre guillemets (en tant que valeur de l’attribut
HREF), vous devez utiliser des guillemets simples (apostrophes) dans le code du script ou d&eacute;signer
les guillemets &eacute;ventuels comme faisant partie du code en les faisant pr&eacute;c&eacute;der d’une barre oblique
invers&eacute;e (par exemple, \&quot;Ce lien am&egrave;ne &agrave; l’index\&quot;).
Rubriques connexes
• Lien vers un emplacement sp&eacute;cifique au sein d’un document, page 338
• Cr&eacute;ation d’un lien de messagerie &eacute;lectronique, page 339
Gestion des liens
Pour &eacute;viter tout lien bris&eacute; dans votre site, vous pouvez activer la gestion de liens afin que
Dreamweaver mette automatiquement tous les liens &agrave; jour lorsque vous apportez une
modification. Vous pouvez &eacute;galement utiliser une repr&eacute;sentation visuelle de votre site pour
modifier des liens ou mettre &agrave; jour tous les liens dans un fichier donn&eacute; avec une seule
modification.
340
Chapitre 15 : Liens et navigation
Mise &agrave; jour automatique de liens
Dreamweaver peut mettre &agrave; jour les liens vers un document et &agrave; partir de ce dernier lorsque vous
le d&eacute;placez ou renommez au sein d’un site local. Cette fonction fonctionne de fa&ccedil;on optimale
lorsqu’un site tout entier (ou une section enti&egrave;re de celui-ci) est stock&eacute; sur votre disque dur local.
Dreamweaver ne modifie pas les fichiers du dossier distant avant que vous y placiez les fichiers
locaux ou que vous les archiviez dans le serveur distant.
Pour acc&eacute;l&eacute;rer le processus de mise &agrave; jour, Dreamweaver peut cr&eacute;er un fichier cache dans lequel il
conservera la liste de tous les liens du site local. Le fichier cache est mis &agrave; jour chaque fois que vous
ajoutez, modifiez ou supprimez des liens vers des fichiers du site local.
Pour activer la gestion des liens dans Dreamweaver :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
La bo&icirc;te de dialogue Pr&eacute;f&eacute;rences s’affiche.
2 S&eacute;lectionnez la cat&eacute;gorie G&eacute;n&eacute;ral dans la liste de gauche.
Les options Pr&eacute;f&eacute;rences g&eacute;n&eacute;rales apparaissent.
3 Dans la section Options de document, s&eacute;lectionnez Toujours ou Invite dans le menu d&eacute;roulant
Mettre &agrave; jour les liens lors de la suppression de fichiers.
Si vous choisissez Toujours, Dreamweaver met automatiquement &agrave; jour les liens vers un
document et &agrave; partir de ce dernier lorsque vous le d&eacute;placez ou le renommez (pour plus
d’informations sur la marche &agrave; suivre pour supprimer un fichier, voir Modification d’un lien au
niveau du site, page 343).
Si vous choisissez Invite, Dreamweaver affiche d’abord une bo&icirc;te de dialogue qui r&eacute;pertorie
tous les fichiers affect&eacute;s par le changement. Cliquez sur Mettre &agrave; jour pour mettre &agrave; jour les
liens de ces fichiers, ou sur Ne pas mettre &agrave; jour pour laisser les fichiers intacts.
4 Cliquez sur OK.
Pour cr&eacute;er un fichier cache pour votre site :
1 Choisissez Site &gt; G&eacute;rer les sites.
La bo&icirc;te de dialogue Modifier les sites s’affiche.
2 S&eacute;lectionnez un site, puis cliquez sur Modifier.
Gestion des liens
341
La bo&icirc;te de dialogue D&eacute;finition du site s’ouvre.
3 Cliquez sur l’onglet Avanc&eacute; pour faire appara&icirc;tre la cat&eacute;gorie Avanc&eacute; de la bo&icirc;te de dialogue
D&eacute;finition du site.
4 S&eacute;lectionnez la cat&eacute;gorie Infos locales dans la liste de gauche.
La bo&icirc;te de dialogue D&eacute;finition du site affiche les options des Infos locales.
5 Dans la cat&eacute;gorie Infos locales, s&eacute;lectionnez l’option Activer le cache.
Apr&egrave;s avoir lanc&eacute; Dreamweaver, la premi&egrave;re fois que vous modifiez ou supprimez des liens vers
des fichiers de votre dossier local, Dreamweaver vous invite &agrave; charger le cache. Si vous cliquez sur
Oui, le cache se charge et Dreamweaver met &agrave; jour tous les liens vers le fichier que vous venez de
modifier. Si vous cliquez sur le bouton Non, la modification est consign&eacute;e dans le cache, mais
celui-ci ne se charge pas et Dreamweaver ne met pas les liens &agrave; jour.
Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes ; l’essentiel de
ce temps est utilis&eacute; pour comparer l’heure et la date des fichiers qui se trouvent sur le site local &agrave;
celles enregistr&eacute;es dans le cache, afin de voir si le cache est p&eacute;rim&eacute;. Si vous n’avez pas modifi&eacute; de
fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d’arr&ecirc;t en toute s&eacute;curit&eacute; lorsque
le bouton appara&icirc;t.
Pour recr&eacute;er le cache pour votre site :
• Dans le panneau Fichiers, s&eacute;lectionnez Site &gt; Avanc&eacute; &gt; Recr&eacute;er le cache du site.
Modification de liens dans la carte du site
Vous pouvez modifier la structure du site dans la carte du site, en ajoutant, modifiant ou
supprimant des liens. Dreamweaver met automatiquement &agrave; jour la carte du site pour indiquer les
modifications apport&eacute;es au site.
Pour changer un lien :
1 Dans la carte du site, s&eacute;lectionnez une page dont vous souhaitez changer le lien (de sorte que le
document qui poss&egrave;de un lien vers cette page pointe vers une autre page), puis proc&eacute;dez de l’une
des mani&egrave;res suivantes :
■ Choisissez Site &gt; Modifier le lien (Windows) ou Site &gt; Affichage de la carte du site &gt;
Modifier le lien (Macintosh).
Remarque : Utilisez le menu Site du panneau Fichiers.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh), puis choisissez Modifier le lien dans le menu contextuel.
2 Naviguez jusqu’au fichier vers lequel le lien devra pointer ou tapez une URL.
3 Cliquez sur OK.
■
Pour supprimer un lien :
1 S&eacute;lectionnez la page dans la carte du site.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
Choisissez Site &gt; Supprimer le lien (Windows) ou Site &gt; Affichage de la carte du site &gt;
Supprimer le lien (Macintosh).
Remarque : Utilisez le menu Site du panneau Fichiers.
342
Chapitre 15 : Liens et navigation
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh), puis choisissez Supprimer le lien dans le menu contextuel.
La suppression d’un lien ne supprime pas le fichier mais supprime le lien provenant de la source
HTML sur la page qui pointe vers le lien.
Pour ouvrir la source d’un lien :
1 S&eacute;lectionnez un fichier dans la carte du site.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Site &gt; Ouvrir source du lien (Windows) ou Site &gt; Affichage de la carte du site &gt;
Ouvrir source du lien (Macintosh).
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh) et choisissez Ouvrir source du lien dans le menu contextuel.
L’inspecteur de propri&eacute;t&eacute;s et le fichier source contenant le lien s’ouvrent dans la fen&ecirc;tre de
document. Le lien y est en surbrillance.
Rubriques connexes
• Liens entre fichiers et documents, page 334
• Utilisation d’une carte visuelle de votre site, page 98
Modification d’un lien au niveau du site
Outre la mise &agrave; jour automatique des liens par Dreamweaver &agrave; chaque fois que vous d&eacute;placez ou
renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de
messagerie &eacute;lectronique, ftp, nuls et de scripts) pour qu’ils pointent sur un autre chemin.
Vous pouvez utiliser cette option &agrave; tout moment (par exemple, il se peut que les mots &laquo; au menu
cette semaine &raquo; soient li&eacute;s &agrave; /menus/32.html dans tout le site et que, la semaine suivante, vous
deviez changer ces liens pour qu’ils pointent sur /menus/33.html) ; mais elle est particuli&egrave;rement
utile lorsque vous d&eacute;sirez supprimer un fichier vers lequel pointent des liens dans d’autres fichiers.
Pour changer un lien &agrave; l’&eacute;chelle de tout le site :
1 S&eacute;lectionnez un fichier dans l’affichage local du panneau Fichiers.
Remarque : Si vous changez un lien de messagerie &eacute;lectronique, ftp, nul ou de script, vous n’avez
pas besoin de s&eacute;lectionner de fichier.
2 Choisissez Site &gt; Modifier le lien au niveau du site.
La bo&icirc;te de dialogue Modifier le lien au niveau du site appara&icirc;t.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Gestion des liens
343
Dreamweaver met &agrave; jour tous les documents qui pointent vers le fichier s&eacute;lectionn&eacute;, en les
faisant pointer vers le nouveau fichier suivant le format de chemin d’acc&egrave;s existant (par
exemple, si l’ancien chemin &eacute;tait relatif au document, le nouveau l’est &eacute;galement). Le type de
lien (relatif au document ou &agrave; la racine) n’a pas d’importance. Dreamweaver met
automatiquement le lien &agrave; jour.
Lorsqu’un lien a &eacute;t&eacute; chang&eacute; au niveau de tout le site, le fichier s&eacute;lectionn&eacute; devient orphelin (plus
aucun fichier du disque local ne pointe vers lui). Vous pouvez le supprimer en toute s&eacute;curit&eacute; sans
risque d’alt&eacute;rer des liens sur le site Dreamweaver local.
Remarque : Ces modifications se produisant localement, vous devez supprimer manuellement le
fichier orphelin correspondant sur le site distant et placer ou archiver tous les fichiers dans lesquels
les liens ont &eacute;t&eacute; modifi&eacute;s, sinon les visiteurs ne pourront pas visualiser les modifications.
Insertion de menus de reroutage
Les menus de reroutage vous permettent d’associer des URL avec des options d’un menu
contextuel. En s&eacute;lectionnant un &eacute;l&eacute;ment de la liste, l’utilisateur est redirig&eacute; vers l’URL
s&eacute;lectionn&eacute;e. Ces menus sont ins&eacute;r&eacute;s &agrave; l’aide de l’objet de formulaire Menu de reroutage.
Pour ins&eacute;rer un menu de reroutage :
1 Ouvrez un document, puis placez le curseur dans la fen&ecirc;tre de document.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Choisissez Insertion &gt; Formulaire &gt; Menu de reroutage.
Cliquez sur le bouton Menu de reroutage de la cat&eacute;gorie Formulaire de la barre Ins&eacute;rer.
La bo&icirc;te de dialogue Ins&eacute;rer un Menu de reroutage appara&icirc;t.
3 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Le menu de reroutage appara&icirc;t dans votre document.
Rubriques connexes
• Menus de reroutage, page 332
• D&eacute;pannage des menus de reroutage, page 345
344
Chapitre 15 : Liens et navigation
Modification d’&eacute;l&eacute;ments de menu de reroutage
Pour modifier des &eacute;l&eacute;ments de menu de reroutage, vous pouvez changer l’ordre dans lequel les
&eacute;l&eacute;ments apparaissent dans la liste, modifier le fichier vers lequel pointe un &eacute;l&eacute;ment, et ajouter,
supprimer ou renommer un &eacute;l&eacute;ment.
Pour modifier l’emplacement d’ouverture d’un fichier li&eacute; ou pour ajouter ou modifier une invite
de s&eacute;lection de menu, vous devez utiliser le panneau Comportements (voir Menu de reroutage,
page 396).
Pour modifier un menu de reroutage &agrave; l’aide de l’inspecteur de propri&eacute;t&eacute;s :
1 Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur de propri&eacute;t&eacute;s, s’il n’est pas d&eacute;j&agrave; ouvert.
2 Dans la fen&ecirc;tre de cr&eacute;ation du document, cliquez sur l’objet Menu de reroutage pour le
s&eacute;lectionner.
L’ic&ocirc;ne Liste / Menu appara&icirc;t dans l’inspecteur de propri&eacute;t&eacute;s.
3 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur le bouton Valeurs de la liste.
La bo&icirc;te de dialogue Valeurs de la liste s’affiche.
4 Apportez les modifications requises aux &eacute;l&eacute;ments du menu, puis cliquez sur OK.
Rubriques connexes
• Menus de reroutage, page 332
• Insertion de menus de reroutage, page 344
D&eacute;pannage des menus de reroutage
Lorsqu’un &eacute;l&eacute;ment de menu a &eacute;t&eacute; s&eacute;lectionn&eacute;, il n’est plus possible de le s&eacute;lectionner &agrave; nouveau si
le visiteur revient &agrave; cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux
m&eacute;thodes pour contourner ce probl&egrave;me :
• Utiliser une invite de s&eacute;lection au sein du menu, par exemple une cat&eacute;gorie ou une instruction,
•
du type &laquo; Faites votre choix &raquo;. Une invite de s&eacute;lection au sein du menu est res&eacute;lectionn&eacute;e apr&egrave;s
chaque s&eacute;lection.
Utiliser un bouton Aller, qui permet &agrave; l’utilisateur de visiter &agrave; nouveau le lien d&eacute;j&agrave; s&eacute;lectionn&eacute;.
Remarque : Dans la bo&icirc;te de dialogue Ins&eacute;rer menu de reroutage, vous ne devez s&eacute;lectionner qu’une
option pour chaque menu de reroutage, car elles s’appliquent &agrave; la totalit&eacute; du menu de reroutage.
Rubriques connexes
• Menus de reroutage, page 332
• Insertion de menus de reroutage, page 344
Insertion de menus de reroutage
345
• Modification d’&eacute;l&eacute;ments de menu de reroutage, page 345
Utilisation des barres de navigation
Une barre de navigation est compos&eacute;e d’une image ou d’une s&eacute;rie d’images qui changent en
fonction des actions de l’utilisateur.
Avant d’utiliser la commande Ins&eacute;rer une barre de navigation, cr&eacute;ez un ensemble d’images pour
les &eacute;tats d’affichage de chaque &eacute;l&eacute;ment de navigation (il peut &ecirc;tre utile d’imaginer un &eacute;l&eacute;ment de
barre de navigation en tant que bouton car, lorsque celui-ci est cliqu&eacute;, il am&egrave;ne l’utilisateur &agrave; une
autre page).
Apr&egrave;s avoir cr&eacute;&eacute; une barre de navigation pour un document, vous pouvez lui ajouter des images
ou en supprimer &agrave; l’aide de la commande Modifier la barre de navigation. Cette commande
permet de modifier une image ou un ensemble d’images, de changer le fichier qui s’ouvre lorsque
l’utilisateur clique sur un &eacute;l&eacute;ment, de s&eacute;lectionner un autre cadre ou une autre fen&ecirc;tre cible pour
l’ouverture de ce fichier et de r&eacute;organiser la position des images.
Rubriques connexes
• Barres de navigation, page 333
Insertion d’une barre de navigation
Lorsque vous ins&eacute;rez une barre de navigation, vous nommez ses &eacute;l&eacute;ments et s&eacute;lectionnez les
images &agrave; utiliser pour ces derniers.
Conseil : Vous pouvez cr&eacute;er une barre de navigation, la copier dans d’autres pages de votre site,
l’utiliser avec des cadres et modifier les comportements dans chaque page pour afficher les diff&eacute;rents
&eacute;tats en fonction de la page en cours.
Pour cr&eacute;er une barre de navigation :
1 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
S&eacute;lectionnez Insertion &gt; Objets image &gt; Barre de navigation.
■ Dans la cat&eacute;gorie Commun de la barre d’insertion, cliquez sur le menu Images et
s&eacute;lectionnez le bouton Barre de navigation.
La bo&icirc;te de dialogue Ins&eacute;rer une barre de navigation appara&icirc;t.
■
2 Compl&eacute;tez les options de la bo&icirc;te de dialogue.
346
Chapitre 15 : Liens et navigation
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• Barres de navigation, page 333
Modification d’une barre de navigation
Apr&egrave;s avoir cr&eacute;&eacute; une barre de navigation pour un document, vous pouvez lui ajouter ou en
supprimer des images &agrave; l’aide de l’option Modifier la barre de navigation.
Pour modifier une barre de navigation :
1 S&eacute;lectionnez la barre de navigation de la page active.
2 Choisissez Modifier &gt; Barre de navigation.
La bo&icirc;te de dialogue Modifier la barre de navigation appara&icirc;t.
3 Dans la liste des &eacute;l&eacute;ments de la barre de navigation, s&eacute;lectionnez celui &agrave; modifier.
4 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK.
Rubriques connexes
• Barres de navigation, page 333
• Insertion d’une barre de navigation, page 346
Utilisation de cartes graphiques
Une carte graphique est une image ayant &eacute;t&eacute; divis&eacute;e en r&eacute;gions, ou &laquo; zones r&eacute;actives &raquo;. Lorsque
vous cliquez sur une zone r&eacute;active, une action est ex&eacute;cut&eacute;e, telle que l’ouverture d’un nouveau
fichier.
Rubriques connexes
• A propos des cartes graphiques, page 334
Utilisation de cartes graphiques
347
Insertion de cartes graphiques sur le client
Pour ins&eacute;rer une carte graphique sur le client, cr&eacute;ez une zone r&eacute;active, puis d&eacute;finissez un lien qui
s’ouvre lorsqu’un utilisateur clique sur la zone r&eacute;active.
Remarque : Vous pouvez cr&eacute;er plusieurs zones r&eacute;actives, mais elles font toutes partie de la m&ecirc;me
carte graphique.
Pour cr&eacute;er une carte graphique sur le client :
1 S&eacute;lectionnez l’image dans la fen&ecirc;tre de document.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur la fl&egrave;che d’agrandissement situ&eacute;e dans le coin
inf&eacute;rieur droit pour visualiser toutes les propri&eacute;t&eacute;s.
3 Dans la zone de texte Nom de la carte, entrez un nom unique pour la carte graphique.
Remarque : Si vous utilisez plusieurs cartes graphiques dans le m&ecirc;me document, veillez &agrave; donner
&agrave; chaque carte un nom unique.
4 Pour d&eacute;finir les zones de la carte graphique, proc&eacute;dez de l’une des mani&egrave;res suivantes :
S&eacute;lectionnez l’outil Cercle et faites glisser le pointeur sur l’image pour cr&eacute;er une zone
r&eacute;active circulaire.
■ S&eacute;lectionnez l’outil Rectangle et faites glisser le pointeur sur l’image pour cr&eacute;er une zone
r&eacute;active rectangulaire.
■ S&eacute;lectionnez l’outil Polygone pour d&eacute;finir une zone r&eacute;active de forme irr&eacute;guli&egrave;re en cliquant
pour chaque point de segment de droite. Cliquez sur l’outil Fl&egrave;che pour fermer la forme.
Apr&egrave;s avoir cr&eacute;&eacute; la zone r&eacute;active, l’inspecteur de propri&eacute;t&eacute;s de cette zone appara&icirc;t.
5 Compl&eacute;tez l’inspecteur de propri&eacute;t&eacute;s de la zone r&eacute;active.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propri&eacute;t&eacute;s.
6 Une fois la d&eacute;finition de la carte de l’image termin&eacute;e, cliquez sur une zone vierge du document
pour modifier l’inspecteur de propri&eacute;t&eacute;s.
■
Rubriques connexes
• A propos des cartes graphiques, page 334
Modification d’une carte graphique
Vous pouvez facilement modifier les zones r&eacute;actives que vous cr&eacute;ez dans une carte graphique.
Vous pouvez d&eacute;placer un groupe de zones r&eacute;actives, redimensionner des zones r&eacute;actives ou
d&eacute;placer une zone r&eacute;active vers l’avant ou l’arri&egrave;re dans un calque.
Vous pouvez &eacute;galement copier une image contenant des zones r&eacute;actives d’un document vers un
autre ou copier une ou plusieurs zones r&eacute;actives d’une image et les coller vers une autre image. Les
zones r&eacute;actives associ&eacute;es &agrave; l’image sont &eacute;galement copi&eacute;es vers le nouveau document.
348
Chapitre 15 : Liens et navigation
Pour s&eacute;lectionner plusieurs zones r&eacute;actives dans une carte graphique :
1 Utilisez le pointeur de zone r&eacute;active pour s&eacute;lectionner une zone r&eacute;active.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
En maintenant la touche Maj enfonc&eacute;e, cliquez tour &agrave; tour sur les autres zones r&eacute;actives &agrave;
s&eacute;lectionner.
Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour
s&eacute;lectionner toutes les zones r&eacute;actives.
Pour d&eacute;placer une zone r&eacute;active :
1 Utilisez le pointeur de zone r&eacute;active pour s&eacute;lectionner la zone r&eacute;active &agrave; d&eacute;placer.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
■
Faites glisser la zone r&eacute;active vers une nouvelle zone.
Utilisez la touche Maj et une touche fl&eacute;ch&eacute;e pour d&eacute;placer une zone r&eacute;active de 10 pixels
dans le sens s&eacute;lectionn&eacute;.
Utilisez les touches fl&eacute;ch&eacute;es pour d&eacute;placer une zone r&eacute;active de 1 pixel dans le sens
s&eacute;lectionn&eacute;.
Pour redimensionner une zone r&eacute;active :
1 Utilisez le pointeur de zone r&eacute;active pour s&eacute;lectionner la zone r&eacute;active &agrave; redimensionner.
2 Faites glisser une poign&eacute;e de s&eacute;lection de la zone r&eacute;active pour modifier la taille ou la forme de
celle-ci.
Rubriques connexes
• A propos des cartes graphiques, page 334
• Insertion de cartes graphiques sur le client, page 348
Association de comportements JavaScript &agrave; des liens
Vous pouvez associer un comportement &agrave; n’importe quel lien d’un document (voir Application
d’un comportement, page 385). Les comportements d&eacute;crits ci-dessous peuvent &ecirc;tre tr&egrave;s int&eacute;ressants
lorsque vous ins&eacute;rez des &eacute;l&eacute;ments li&eacute;s dans vos documents.
D&eacute;finir le texte de la barre d’&eacute;tat permet de sp&eacute;cifier le texte d’un message et de l’afficher dans la
barre d’&eacute;tat dans la partie inf&eacute;rieure gauche de la fen&ecirc;tre du navigateur. Par exemple, vous pouvez
utiliser cette action pour d&eacute;crire la destination d’un lien dans la barre d’&eacute;tat, au lieu d’afficher
l’URL associ&eacute;e (voir D&eacute;finir le texte de la barre d’&eacute;tat, page 403).
Ouvrir la fen&ecirc;tre Navigateur ouvre une URL dans une nouvelle fen&ecirc;tre. Vous pouvez sp&eacute;cifier les
propri&eacute;t&eacute;s de la nouvelle fen&ecirc;tre, dont sa taille, ses attributs (redimensionnable ou non, dispose
d’une barre de menu ou non, etc.), ainsi que son nom (voir Ouvrir la fen&ecirc;tre Navigateur,
page 397).
Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu,
sp&eacute;cifier un fichier li&eacute; diff&eacute;rent ou changer l’emplacement du navigateur dans lequel ouvrir le
document li&eacute; (voir Menu de reroutage, page 396).
Association de comportements JavaScript &agrave; des liens
349
D&eacute;finir image barre de navigation modifie
le comportement d’une barre de navigation. Ce
comportement permet de modifier la fa&ccedil;on dont les images s’affichent dans une barre de
navigation. Par exemple, lorsque le pointeur survole une partie de la barre de navigation,
l’affichage d’autres images de la barre de navigation ou du document peut changer (voir D&eacute;finir
image barre de navigation, page 400).
Recherche de liens bris&eacute;s, externes et orphelins
Utilisez la fonction V&eacute;rifier les liens pour rechercher les &eacute;ventuels liens bris&eacute;s et les fichiers non
r&eacute;f&eacute;renc&eacute;s (&eacute;galement appel&eacute;s orphelins, il s’agit de fichiers toujours existant dans le site mais vers
lesquels aucun lien ne pointe) dans un fichier ouvert, dans une partie du site local ou dans le site
local tout entier.
Les seuls liens que Dreamweaver v&eacute;rifie sont ceux qui pointent vers des documents au sein du
m&ecirc;me site. Dreamweaver dresse une liste des liens externes qui apparaissent dans les documents
s&eacute;lectionn&eacute;s, mais ne les v&eacute;rifie pas.
Pour v&eacute;rifier les liens au sein du document actif :
1 Enregistrez le fichier dans un emplacement du site Dreamweaver local.
2 Choisissez Fichier &gt; V&eacute;rifier la page &gt; V&eacute;rifier les liens.
Le rapport Liens bris&eacute;s appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de
panneaux R&eacute;sultats).
3 Dans le panneau V&eacute;rificateur de lien, s&eacute;lectionnez Liens externes dans le menu d&eacute;roulant
Afficher pour afficher un autre rapport.
Le rapport appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de panneaux
R&eacute;sultats).
Conseil : Vous pouvez v&eacute;rifier les fichiers orphelins lorsque vous v&eacute;rifiez les liens dans un site
entier.
4 Pour enregistrer le rapport, cliquez sur le bouton * dans le panneau V&eacute;rificateur de lien.
Remarque : Le rapport sur le navigateur cible est un fichier temporaire ; il sera perdu si vous ne
l’enregistrez pas.
Pour v&eacute;rifier les liens &agrave; l’int&eacute;rieur d’une partie du site local :
1 Dans le panneau Fichiers, choisissez un site dans le menu d&eacute;roulant Sites en cours.
2 Dans Affichage local, s&eacute;lectionnez les fichiers ou les dossiers &agrave; v&eacute;rifier.
3 Suivez l’une des proc&eacute;dures suivantes pour acc&eacute;der aux options :
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contr&ocirc;le
(Macintosh) sur l’un des fichiers s&eacute;lectionn&eacute;s et cliquez sur V&eacute;rifier les liens &gt; Fichiers/
Dossiers s&eacute;lectionn&eacute;s dans le menu contextuel.
■ Choisissez Fichier &gt; V&eacute;rifier la page &gt; V&eacute;rifier les liens.
Le rapport Liens bris&eacute;s appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de
panneaux R&eacute;sultats).
4 Dans le panneau V&eacute;rificateur de lien, s&eacute;lectionnez Liens externes dans le menu d&eacute;roulant
Afficher pour afficher un autre rapport.
Le rapport appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de panneaux
R&eacute;sultats).
■
350
Chapitre 15 : Liens et navigation
Conseil : Vous pouvez v&eacute;rifier les fichiers orphelins lorsque vous v&eacute;rifiez les liens dans un site
entier (voir proc&eacute;dure suivante).
5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau
V&eacute;rificateur de lien.
Pour v&eacute;rifier les liens dans tout le site :
1 Dans le panneau Fichiers, choisissez un site dans le menu d&eacute;roulant Sites en cours.
2 Choisissez Site &gt; V&eacute;rifier tous les liens du site.
Le rapport Liens bris&eacute;s appara&icirc;t dans le panneau V&eacute;rificateur de lien (dans le groupe de
panneaux R&eacute;sultats).
3 Dans le panneau V&eacute;rificateur de lien, s&eacute;lectionnez Liens externes ou Fichiers orphelins dans le
menu d&eacute;roulant Afficher pour afficher un autre rapport.
Une liste des fichiers correspondant au type du rapport s&eacute;lectionn&eacute; s’affiche dans la bo&icirc;te de
dialogue V&eacute;rificateur de lien.
Remarque : Si vous avez s&eacute;lectionn&eacute; Fichiers orphelins comme type de rapport, vous pouvez
directement supprimer des fichiers orphelins du panneau V&eacute;rificateur de lien en s&eacute;lectionnant un
fichier dans la liste et en appuyant sur la touche Supprimer.
4 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau
V&eacute;rificateur de lien.
Correction des liens bris&eacute;s
Une fois le rapport de liens ex&eacute;cut&eacute;, vous pouvez corriger les liens bris&eacute;s et les r&eacute;f&eacute;rences d’images
directement dans la bo&icirc;te de dialogue V&eacute;rificateur de lien, ou ouvrir les fichiers de la liste et
r&eacute;parer les liens dans l’inspecteur de propri&eacute;t&eacute;s.
Pour r&eacute;parer des liens dans la bo&icirc;te de dialogue V&eacute;rificateur de lien :
1 Ex&eacute;cutez un rapport de v&eacute;rification de lien (voir Recherche de liens bris&eacute;s, externes et orphelins,
page 350).
2 S&eacute;lectionnez le lien bris&eacute; dans la colonne Liens bris&eacute;s (pas dans la colonne Fichiers) du panneau
V&eacute;rificateur de lien (dans le groupe de panneaux R&eacute;sultats).
Une ic&ocirc;ne de dossier s’affiche &agrave; c&ocirc;t&eacute; du lien bris&eacute;.
3 Tapez le chemin d’acc&egrave;s et le nom du fichier ou cliquez sur l’ic&ocirc;ne de dossier pour trouver le
fichier et le s&eacute;lectionner.
4 Appuyez sur Tab ou Entr&eacute;e (Windows) ou Retour (Macintosh).
S’il y a d’autres liens bris&eacute;s vers le m&ecirc;me fichier, une bo&icirc;te de dialogue vous invite &agrave; r&eacute;parer
&eacute;galement les r&eacute;f&eacute;rences dans les autres fichiers. Cliquez sur Oui pour que Dreamweaver mette
&agrave; jour tous les documents de la liste faisant r&eacute;f&eacute;rence &agrave; ce fichier. Cliquez sur Non pour que
Dreamweaver mette uniquement &agrave; jour la r&eacute;f&eacute;rence actuelle.
Remarque : Si l’option Activer l’archivage et l’extraction de fichier est activ&eacute;e pour ce site,
Dreamweaver essaie d’extraire les fichiers qui n&eacute;cessitent des modifications. S’il ne peut pas extraire
un fichier, Dreamweaver affiche un avertissement et laisse les r&eacute;f&eacute;rences bris&eacute;es inchang&eacute;es. Voir
Archivage et extraction de fichiers, page 106.
Pour corriger des liens dans l’inspecteur de propri&eacute;t&eacute;s :
1 Ex&eacute;cutez un rapport de v&eacute;rification de lien (voir Recherche de liens bris&eacute;s, externes et orphelins,
page 350).
Correction des liens bris&eacute;s
351
2 Double-cliquez sur une entr&eacute;e de la colonne Fichier dans le panneau V&eacute;rificateur de lien (dans
le groupe de panneaux R&eacute;sultats).
Dreamweaver ouvre le document, s&eacute;lectionne l’image ou le lien probl&eacute;matique, et met en
surbrillance le chemin d’acc&egrave;s et le nom de fichier dans l’inspecteur de propri&eacute;t&eacute;s (si
l’inspecteur de propri&eacute;t&eacute;s n’est pas ouvert, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour l’ouvrir).
3 Pour d&eacute;finir un nouveau chemin d’acc&egrave;s et un nouveau nom de fichier, tapez directement sur
le texte en surbrillance ou cliquez sur l’ic&ocirc;ne du dossier pour naviguer vers le fichier.
Si vous mettez &agrave; jour une r&eacute;f&eacute;rence d’image, et si la nouvelle image s’affiche avec une taille
incorrecte, cliquez sur L et H (ou sur le bouton Actualiser) dans l’inspecteur de propri&eacute;t&eacute;s pour
r&eacute;initialiser les valeurs de hauteur et de largeur. Les mentions L et H passent de caract&egrave;re gras &agrave;
caract&egrave;re normal.
4 Enregistrez le fichier.
D&egrave;s que les liens sont r&eacute;par&eacute;s, leur entr&eacute;e dispara&icirc;t de la liste des liens bris&eacute;s. Si une entr&eacute;e figure
toujours dans la liste apr&egrave;s que vous avez indiqu&eacute; un nouveau chemin d’acc&egrave;s ou nom de fichier
dans le v&eacute;rificateur de lien (ou apr&egrave;s avoir enregistr&eacute; des changements apport&eacute;s &agrave; l’inspecteur de
propri&eacute;t&eacute;s), cela signifie que Dreamweaver ne peut pas trouver le nouveau fichier et qu’il
consid&egrave;re toujours que le lien est bris&eacute;.
Ouverture des documents li&eacute;s dans Dreamweaver
Les liens ne sont pas actifs dans Dreamweaver ; c’est-&agrave;-dire que vous ne pouvez pas ouvrir les
documents li&eacute;s en cliquant sur le lien de la fen&ecirc;tre de document.
Pour ouvrir des documents li&eacute;s dans Dreamweaver, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• S&eacute;lectionnez le lien et choisissez Modifier &gt; Ouvrir la page li&eacute;e.
• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le
lien.
Remarque : Le document li&eacute; doit r&eacute;sider sur le disque local.
Rubriques connexes
• Aper&ccedil;u et test de page dans les navigateurs, page 283
• Recherche de liens bris&eacute;s, externes et orphelins, page 350
• Correction des liens bris&eacute;s, page 351
352
Chapitre 15 : Liens et navigation
CHAPITRE 16
Utilisation d’autres applications
Macromedia Fireworks MX 2004, Macromedia Flash MX 2004 et Macromedia Flash MX
Professionnel 2004 sont de puissants outils de d&eacute;veloppement pour le Web con&ccedil;us pour cr&eacute;er des
graphismes et des animations SWF &agrave; visualiser sur des pages Web. Macromedia Dreamweaver
MX 2004 peut &ecirc;tre int&eacute;gr&eacute; &agrave; ces outils pour simplifier le d&eacute;roulement de vos conceptions Web.
Vous pouvez ins&eacute;rer des images ou des tables Fireworks et des animations Flash (fichiers SWF)
dans un document Dreamweaver. Vous pouvez &eacute;galement utiliser la fonction d’int&eacute;gration entre
Dreamweaver et Fireworks ou Flash pour modifier une image ou une animation apr&egrave;s l’avoir
ins&eacute;r&eacute;e dans un document Dreamweaver.
Remarque : Pour qu’il soit possible d’utiliser Dreamweaver conjointement &agrave; Fireworks et &agrave; Flash, les
trois applications doivent &ecirc;tre install&eacute;es sur votre ordinateur.
Ce chapitre contient les sections suivantes :
•
•
•
•
A propos de l’int&eacute;gration de Fireworks et Flash, page 354
Optimisation de votre environnement de travail pour Fireworks et Flash, page 354
Utilisation de Fireworks, page 355
Utilisation de Flash, page 363
353
A propos de l’int&eacute;gration de Fireworks et Flash
Gr&acirc;ce &agrave; l’&eacute;dition Roundtrip et aux Design Notes, Dreamweaver est capable d’int&eacute;grer des
op&eacute;rations avec Fireworks et Flash. L’&eacute;dition Roundtrip permet de transf&eacute;rer de fa&ccedil;on fiable les
mises &agrave; jour de code entre Dreamweaver et les autres applications, en pr&eacute;servant par exemple les
comportements de survol ou les liens vers d’autres fichiers.
Les Design Notes sont de petits fichiers permettant &agrave; Dreamweaver de localiser le document
source correspondant &agrave; un fichier image ou &agrave; une animation export&eacute;e. Lorsque vous exportez des
fichiers de Fireworks ou Flash directement vers un site d&eacute;fini par Dreamweaver, les Design Notes
qui contiennent des r&eacute;f&eacute;rences au fichier de programmation PNG ou Flash (FLA) sont
automatiquement export&eacute;es vers le site avec le fichier Web (format GIF, JPEG ou SWF). Pour
plus d’informations, voir Design Notes, page 87.
Outre les informations relatives &agrave; l’emplacement, les Design Notes contiennent des informations
pertinentes sur les fichiers export&eacute;s. Lorsque vous exportez une table Fireworks, par exemple,
Fireworks r&eacute;dige une Design Note pour chaque fichier d’image export&eacute; dans la table. Si le fichier
export&eacute; contient des zones r&eacute;actives ou des images survol&eacute;es, le code JavaScript de ces &eacute;l&eacute;ments est
inclus dans le document HTML export&eacute; par Fireworks.
Optimisation de votre environnement de travail pour Fireworks
et Flash
Pour int&eacute;grer parfaitement Fireworks et Flash &agrave; vos t&acirc;ches de d&eacute;veloppement, il convient de
d&eacute;finir un environnement de travail.
Pour optimiser votre environnement de travail pour Fireworks et Flash :
1 Assurez-vous que les Design Notes sont activ&eacute;es pour votre site Dreamweaver.
Les Design Notes sont automatiquement activ&eacute;es tant que vous ne modifiez pas les param&egrave;tres
du site par d&eacute;faut. Pour plus d’informations sur l’activation des Design Notes, voir Activation et
d&eacute;sactivation des Design Notes pour un site, page 116. Pour plus d’informations sur le r&ocirc;le des
Design Notes, voir A propos de l’int&eacute;gration de Fireworks et Flash, page 354.
2 Pour lancer Fireworks depuis Dreamweaver, d&eacute;finissez Fireworks comme &eacute;diteur d’image
externe principal pour Dreamweaver.
Param&eacute;trez Fireworks comme &eacute;diteur principal des types de fichiers graphiques GIF, PNG et
JPEG. Pour plus d’informations, voir Utilisation d’un &eacute;diteur d’image externe, page 327 ou
Param&eacute;trage des pr&eacute;f&eacute;rences pour les &eacute;diteurs d’image externes dans l’aide de Dreamweaver.
3 Enregistrez le code source de Fireworks et Flash, et les fichiers Web dans le dossier du site
Dreamweaver d&eacute;fini.
De cette fa&ccedil;on, tout utilisateur partageant le site pourra localiser le document source lorsqu’il
modifiera une image ou une table Fireworks ou une animation SWF dans Dreamweaver.
4 Effectuez l’exportation de vos fichiers d’image Fireworks vers le dossier du site Dreamweaver.
Lorsque vous exportez un fichier GIF ou JPEG de Fireworks vers le dossier du site
Dreamweaver, Fireworks g&eacute;n&egrave;re un dossier appel&eacute; _notes dans le m&ecirc;me dossier. Ce dossier
contient les Design Notes n&eacute;cessaires &agrave; Dreamweaver pour fonctionner avec Fireworks.
354
Chapitre 16 : Utilisation d’autres applications
Utilisation de Fireworks
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses proc&eacute;dures de modifications
apport&eacute;es aux fichiers, parmi lesquelles celles apport&eacute;es aux liens, aux cartes graphiques, aux
d&eacute;coupes de tables et bien plus. R&eacute;unies, les deux applications rationalisent les t&acirc;ches de
d&eacute;veloppement consistant &agrave; modifier, optimiser et importer des fichiers graphiques Web dans des
pages HTML.
Insertion d’une image Fireworks
Plusieurs m&eacute;thodes permettent de placer des graphiques Fireworks dans un document
Dreamweaver. Vous pouvez placer un graphique Fireworks export&eacute; dans un document
Dreamweaver &agrave; l’aide de la commande Ins&eacute;rer une image ou cr&eacute;er un graphique Fireworks &agrave; partir
d’un espace r&eacute;serv&eacute; pour l’image Dreamweaver (voir Utilisation de Fireworks pour modifier les
espaces r&eacute;serv&eacute;s pour les images Dreamweaver, page 357).
Pour ins&eacute;rer une image Fireworks dans un document Dreamweaver :
1 Dans le document Dreamweaver, placez le point d’insertion &agrave; l’emplacement o&ugrave; vous souhaitez
ins&eacute;rer l’image, puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Choisissez Insertion &gt; Image.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Image ou faites-le
glisser vers le document.
2 Recherchez le fichier Fireworks export&eacute; et cliquez sur OK (Windows) ou Ouvrir (Macintosh).
Remarque : Si le fichier Fireworks ne se trouve pas dans le site courant de Dreamweaver, un
message vous demande si vous souhaitez copier le fichier dans le dossier racine. Cliquez sur Oui.
Modification d’une image ou d’un tableau Fireworks dans Dreamweaver
Vous pouvez lancer Fireworks depuis Dreamweaver pour modifier des images ins&eacute;r&eacute;es dans un
document Dreamweaver. Quand vous ouvrez ou &eacute;ditez une image ou une d&eacute;coupe d’image
faisant partie d’une table Fireworks, Dreamweaver lance Fireworks, ce qui ouvre le fichier PNG &agrave;
partir duquel l’image ou la table a &eacute;t&eacute; export&eacute;e.
Lorsque l’image fait partie d’une table Fireworks, vous pouvez ouvrir cette derni&egrave;re pour la
modifier, &agrave; condition que le commentaire &lt;!--fw table--&gt; soit pr&eacute;sent dans le code HTML. Si le
fichier PNG source a &eacute;t&eacute; export&eacute; &agrave; partir de Fireworks vers un site Dreamweaver &agrave; l’aide du
param&egrave;tre Document HTML et image du style Dreamweaver, le commentaire de la table
Fireworks est automatiquement ins&eacute;r&eacute; dans le code HTML.
Pour lancer et modifier une image Fireworks plac&eacute;e dans Dreamweaver :
1 Dans Dreamweaver, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur de propri&eacute;t&eacute;s, le cas
&eacute;ch&eacute;ant.
2 Cliquez sur une image ou une d&eacute;coupe d’image pour la s&eacute;lectionner.
Lorsque vous s&eacute;lectionnez une image export&eacute;e depuis Fireworks, l’inspecteur de propri&eacute;t&eacute;s
identifie la s&eacute;lection comme image ou table Fireworks et affiche le nom du fichier source PNG.
3 Pour lancer Fireworks afin d’apporter des modifications, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
■ Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur Modifier.
Utilisation de Fireworks
355
Maintenez enfonc&eacute;e la touche Ctrl (Windows) ou Commande (Macintosh) et doublecliquez sur l’image s&eacute;lectionn&eacute;e.
■ Cliquez sur l’image s&eacute;lectionn&eacute;e avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh) et choisissez Modifier avec Fireworks
dans le menu contextuel.
Fireworks d&eacute;marre et ouvre le fichier PNG associ&eacute; pour que vous puissiez le modifier.
■
Remarque : Si Fireworks ne trouve pas le fichier source, un message vous invite &agrave; le faire.
Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont enregistr&eacute;es dans
le fichier source et le fichier export&eacute;, sinon seul le fichier export&eacute; est mis &agrave; jour.
4 Dans Fireworks, modifiez le fichier PNG source.
5 Une fois les modifications effectu&eacute;es, cliquez sur Termin&eacute;.
Fireworks enregistre les modifications dans le fichier PNG, exporte l’image mise &agrave; jour (ou le
document HTML et les images) et active de nouveau Dreamweaver. Dans Dreamweaver,
l’image ou la table mise &agrave; jour appara&icirc;t.
Optimisation d’une image Fireworks depuis Dreamweaver
Vous pouvez lancer Fireworks &agrave; partir de Dreamweaver pour modifier rapidement une image ou
une animation Fireworks plac&eacute;e et export&eacute;e en la redimensionnant ou en modifiant le type de
fichier, par exemple. Fireworks vous permet de modifier les param&egrave;tres d’optimisation et
d’animation, ainsi que la taille et la zone de l’image export&eacute;e.
Pour modifier les param&egrave;tres d’optimisation d’une image Fireworks plac&eacute;e dans
Dreamweaver :
1 Dans Dreamweaver, s&eacute;lectionnez l’image de votre choix et choisissez Commandes &gt; Optimiser
l’image dans Fireworks.
2 Si un message vous y invite, indiquez si un fichier Fireworks source doit &ecirc;tre lanc&eacute; pour l’image
plac&eacute;e.
3 Dans Fireworks, proc&eacute;dez aux modifications requises dans la bo&icirc;te de dialogue d’optimisation :
■ Pour modifier les param&egrave;tres d’optimisation, cliquez sur l’onglet Options. Pour plus
d’informations, voir Utilisation de Fireworks.
■ Pour modifier la taille et la zone de l’image export&eacute;e, cliquez sur l’onglet Fichier.
4 Une fois l’&eacute;dition termin&eacute;e, cliquez sur Mettre &agrave; jour.
Vous exportez ainsi l’image en adoptant les nouveaux param&egrave;tres d’optimisation, mettez &agrave; jour
le fichier GIF ou JPEG plac&eacute; dans Dreamweaver et enregistrez le fichier PNG source si un
fichier source a &eacute;t&eacute; s&eacute;lectionn&eacute;.
Si vous avez modifi&eacute; le format de l’image, le v&eacute;rificateur de lien Dreamweaver vous invite &agrave;
mettre &agrave; jour les r&eacute;f&eacute;rences &agrave; l’image. Par exemple, si vous avez modifi&eacute; le format d’une image
appel&eacute;e mon_image.GIF en mon_image.JPEG, toutes les r&eacute;f&eacute;rences faites &agrave; mon_image.gif sur
votre site deviennent mon_image.jpg lorsque vous cliquez sur OK.
356
Chapitre 16 : Utilisation d’autres applications
Utilisation de Fireworks pour modifier les espaces r&eacute;serv&eacute;s pour les images
Dreamweaver
Vous pouvez cr&eacute;er un espace r&eacute;serv&eacute; dans un document Dreamweaver, puis lancer Fireworks pour
cr&eacute;er une image graphique ou une table Fireworks &agrave; y placer. Pour plus d’informations sur
l’insertion d’un espace r&eacute;serv&eacute; pour l’image, voir insertion d’un espace r&eacute;serv&eacute; pour une image,
page 321.
Pour cr&eacute;er une image &agrave; partir d’un espace r&eacute;serv&eacute;, Dreamweaver MX et Fireworks MX doivent
&ecirc;tre install&eacute;s sur votre syst&egrave;me.
Pour modifier un espace r&eacute;serv&eacute; pour l’image Dreamweaver dans Fireworks :
1 Veillez &agrave; ce que Fireworks soit d&eacute;fini comme &eacute;diteur d’image des fichiers .png. Pour plus
d’informations, voir D&eacute;finition des pr&eacute;f&eacute;rences pour les &eacute;diteurs d’image externes dans l’aide de
Dreamweaver.
2 Dans la fen&ecirc;tre de document, cliquez sur l’espace r&eacute;serv&eacute; pour l’image pour le s&eacute;lectionner.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes pour lancer Fireworks et proc&eacute;der &agrave; des modifications :
■ Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur Cr&eacute;er.
■ Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur
l’espace r&eacute;serv&eacute; pour l’image.
■ Cliquez sur l’espace r&eacute;serv&eacute; pour l’image avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Cr&eacute;er une image dans
Fireworks.
Fireworks est lanc&eacute; en mode d’&eacute;dition &agrave; partir de Dreamweaver.
4 Utilisez les options de Fireworks pour cr&eacute;er l’image.
Fireworks reconna&icirc;t les param&egrave;tres suivants d’espace r&eacute;serv&eacute; pour l’image, d&eacute;finis lors de son
utilisation dans Dreamweaver : la taille de l’image correspondant &agrave; la taille du document
Fireworks, l’ID de l’image utilis&eacute;e par Fireworks comme nom de document par d&eacute;faut pour le
fichier source et le fichier d’exportation cr&eacute;&eacute;, l’alignement du texte et les comportements
reconnus par Fireworks (permutation d’image, menu contextuel, barre de navigation et texte
notamment). Fireworks reconna&icirc;t &eacute;galement les liens associ&eacute;s &agrave; l’espace r&eacute;serv&eacute; pour l’image
lorsque vous travaillez dans Dreamweaver.
Remarque : Bien que les liens ajout&eacute;s &agrave; un espace r&eacute;serv&eacute; pour l’image soient invisibles dans
Fireworks, ils sont n&eacute;anmoins conserv&eacute;s. Si vous dessinez une zone r&eacute;active et que vous ajoutez
un lien dans Fireworks MX, le programme ne supprimera pas le lien ajout&eacute; &agrave; l’espace r&eacute;serv&eacute; pour
l’image dans Dreamweaver. Toutefois, si dans Fireworks vous dessinez une d&eacute;coupe dans la
nouvelle image, le lien sera supprim&eacute; du document Dreamweaver lors du remplacement de
l’espace r&eacute;serv&eacute; pour l’image.
Utilisation de Fireworks
357
Les param&egrave;tres suivants d’espace r&eacute;serv&eacute; pour l’image sont d&eacute;sactiv&eacute;s dans l’inspecteur de
propri&eacute;t&eacute;s correspondant puisqu’ils ne sont pas reconnus par Fireworks : alignement de
l’image, couleur, espacement vertical et horizontal et cartes.
5 Une fois l’op&eacute;ration termin&eacute;e, cliquez sur Termin&eacute;.
La bo&icirc;te de dialogue Enregistrer sous s’affiche. Fireworks vous invite &agrave; enregistrer le fichier
PNG.
6 Dans la zone de texte Enregistrer dans, s&eacute;lectionnez le dossier d&eacute;fini comme dossier du site local
Dreamweaver.
Si vous avez attribu&eacute; un nom &agrave; l’espace r&eacute;serv&eacute; lors de son insertion dans le document
Dreamweaver, Fireworks ins&egrave;re automatiquement ce nom dans la zone de texte Nom de fichier.
Vous pouvez modifier ce nom si vous le souhaitez.
7 Cliquez sur Enregistrer pour enregistrer le fichier PNG.
La bo&icirc;te de dialogue Exporter s’affiche. Cette bo&icirc;te de dialogue vous permet d’exporter l’image
au format GIF, JPEG ou, dans le cas d’images d&eacute;coup&eacute;es, sous la forme de documents HTML
et d’images.
8 S&eacute;lectionnez le dossier du site local de Dreamweaver dans le champ Enregistrer dans de la bo&icirc;te
de dialogue Exporter.
9 La zone de texte Nom est automatiquement mise &agrave; jour pour adopter le nom d&eacute;signant le fichier
PNG. Entrez un nouveau nom si vous le souhaitez.
10 Dans la zone Enregistrer sous le type, s&eacute;lectionnez le type de fichier(s) &agrave; exporter, par exemple
Images uniquement ou Documents HTML et images.
11 Cliquez sur Enregistrer pour enregistrer le fichier export&eacute;.
Le fichier est enregistr&eacute; et Dreamweaver est &agrave; nouveau actif. Dans le document Dreamweaver,
le fichier export&eacute; ou la table Fireworks remplace l’espace r&eacute;serv&eacute; pour l’image.
Ouverture d’un menu contextuel Fireworks dans Dreamweaver
Fireworks prend en charge les menus contextuels bas&eacute;s sur des images et sur du code HTML.
Dreamweaver ne prend en charge que les menus contextuels bas&eacute;s sur du code HTML. Dans
Dreamweaver, vous pouvez ouvrir un menu contextuel Fireworks et modifier les propri&eacute;t&eacute;s de
tous les &eacute;l&eacute;ments de menu, &agrave; l’exception des images d’arri&egrave;re-plan des menus contextuels bas&eacute;s sur
des images.
Pour modifier les images d’arri&egrave;re-plan d’un menu contextuel bas&eacute; sur des images, s&eacute;lectionnez
l’image &agrave; mettre &agrave; jour dans Dreamweaver, puis cliquez sur Modifier. Pour plus d’informations sur
la modification d’une image Fireworks, voir Modification d’une image ou d’un tableau Fireworks
dans Dreamweaver, page 355.
Si le menu contextuel &agrave; modifier repose sur une image et que vous souhaitez pr&eacute;server les arri&egrave;replans de la cellule bas&eacute;s sur des images, il convient de modifier le menu contextuel dans Fireworks
plut&ocirc;t que dans Dreamweaver.
Pour ouvrir le menu contextuel Fireworks :
1 Dans le document Dreamweaver, s&eacute;lectionnez la zone r&eacute;active ou l’image qui d&eacute;clenche le menu
contextuel.
2 Ouvrez le panneau Comportements (Maj+F3), si ce n’est d&eacute;j&agrave; fait, puis, dans la liste Actions,
double-cliquez sur Afficher le menu contextuel.
358
Chapitre 16 : Utilisation d’autres applications
La bo&icirc;te de dialogue Afficher le menu contextuel appara&icirc;t. Le comportement Afficher le menu
contextuel vous permet de modifier ou de mettre &agrave; jour le contenu d’un menu contextuel
Fireworks bas&eacute; sur du code HTML. Vous pouvez ajouter, supprimer ou modifier les &eacute;l&eacute;ments
de menu, les r&eacute;organiser et les positionner dans une page. Pour plus d’informations sur la
d&eacute;finition ou la modification des options des menus contextuels, voir Afficher le menu
contextuel, page 406.
3 Modifiez le menu contextuel comme bon vous semble.
4 Lorsque vous avez modifi&eacute; le menu contextuel, cliquez sur OK.
D&eacute;finition des pr&eacute;f&eacute;rences de lancement et de modification des
fichiers source Fireworks
Lorsque vous modifiez des images dans Fireworks, les images plac&eacute;es dans vos pages Web sont
normalement export&eacute;es par Fireworks depuis un fichier source PNG. Lorsque vous ouvrez une
image (&laquo; lancer &raquo;) dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement le
fichier PNG source, vous invitant &agrave; pr&eacute;ciser l’emplacement du fichier PNG si celui-ci ne peut pas
&ecirc;tre localis&eacute;. Vous pouvez r&eacute;gler vos pr&eacute;f&eacute;rences sous Fireworks afin que Dreamweaver ouvre
l’image ins&eacute;r&eacute;e, &agrave; moins que vous ne pr&eacute;f&eacute;riez que Fireworks vous offre la possibilit&eacute; d’utiliser le
fichier d’image ins&eacute;r&eacute;e ou le fichier source Fireworks chaque fois que vous ouvrez une image sous
Dreamweaver.
Remarque : Dreamweaver ne reconna&icirc;t ces pr&eacute;f&eacute;rences que dans certains cas. Par exemple, vous
devez lancer et optimiser les images qui ne font pas partie d’une table Fireworks et dont le chemin
Design Notes vers un fichier PNG source est correct.
Pour d&eacute;terminer les pr&eacute;f&eacute;rences de lancement et de modification de Fireworks :
1 Dans Fireworks, choisissez Edition &gt; Pr&eacute;f&eacute;rences ou Fireworks &gt; Pr&eacute;f&eacute;rences (Macintosh) et
cliquez sur l’onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le
menu d&eacute;roulant (Macintosh).
2 Indiquez les pr&eacute;f&eacute;rences applicables lors de la modification ou de l’optimisation d’images
Fireworks plac&eacute;es dans une application externe :
Toujours utiliser le fichier PNG source permet de lancer automatiquement le fichier PNG
Fireworks d&eacute;fini dans la Design Note comme fichier source de l’image plac&eacute;e. Les mises &agrave; jour
sont appliqu&eacute;es au fichier PNG source et &agrave; l’image plac&eacute;e correspondante.
Ne jamais utiliser le fichier PNG source permet de lancer automatiquement l’image
Fireworks plac&eacute;e, qu’il existe ou non un fichier PNG source. Les mises &agrave; jour sont appliqu&eacute;es &agrave;
l’image plac&eacute;e uniquement.
Demander lors du lancement vous permet d’indiquer chaque fois si le fichier PNG source
doit &ecirc;tre lanc&eacute; ou non. Lorsque vous modifiez ou optimisez une image plac&eacute;e, Fireworks
affiche un message vous demandant si vous souhaitez lancer l’&eacute;diteur et modifier l’image. Vous
pouvez &eacute;galement d&eacute;terminer les pr&eacute;f&eacute;rences globales de la fonction de lancement et d’&eacute;dition
dans cette fen&ecirc;tre d’invite.
Insertion de code HTML Fireworks dans un document Dreamweaver
Dans Fireworks, la commande Exporter vous permet d’exporter et d’enregistrer des images
optimis&eacute;es et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez
alors ins&eacute;rer le fichier dans Dreamweaver. Pour plus d’informations sur l’exportation de fichiers
Fireworks au format HTML, voir Utilisation de Fireworks.
Utilisation de Fireworks
359
Dreamweaver vous permet d’ins&eacute;rer dans un document du code HTML g&eacute;n&eacute;r&eacute; par Fireworks,
int&eacute;grant des images, des d&eacute;coupes et du code JavaScript. Vous pouvez ainsi facilement cr&eacute;er des
&eacute;l&eacute;ments de conception dans Fireworks et les ins&eacute;rer dans un document Dreamweaver existant.
Pour ins&eacute;rer du code HTML Fireworks dans un document Dreamweaver :
1 Dans Dreamweaver, placez le point d’insertion &agrave; l’endroit du document o&ugrave; vous souhaitez
placer le code HTML Fireworks.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
Choisissez Insertion &gt; Images interactives &gt; HTML Fireworks.
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Ins&eacute;rer HTML
Fireworks.
3 Dans la bo&icirc;te de dialogue qui s’affiche, cliquez sur Parcourir pour choisir un fichier HTML
Fireworks.
4 Choisissez l’option Supprimer fichier apr&egrave;s l’insertion pour placer le fichier HTML Fireworks
d’origine dans la corbeille (Windows et Macintosh) &agrave; l’issue de l’op&eacute;ration.
Faites appel &agrave; cette option si vous n’avez plus besoin du fichier HTML Fireworks apr&egrave;s l’avoir
ins&eacute;r&eacute;. Elle n’a aucun effet sur le fichier PNG source associ&eacute; au fichier HTML.
■
■
Remarque : Si le fichier HTML se trouve sur un lecteur r&eacute;seau, il est d&eacute;finitivement supprim&eacute; (il
n’est pas plac&eacute; dans la corbeille).
5 Cliquez sur OK pour ins&eacute;rer le code HTML, ainsi que les images associ&eacute;es, les d&eacute;coupes et le
code JavaScript dans le document Dreamweaver.
Collage de code HTML Fireworks dans Dreamweaver
Pour placer rapidement dans Dreamweaver des images et tables g&eacute;n&eacute;r&eacute;es dans Fireworks, copiez et
collez directement le code HTML dans un document Dreamweaver.
Pour copier et coller du code HTML Fireworks dans Dreamweaver :
1 Dans Fireworks, choisissez Edition &gt; Copier le code HTML.
2 Suivez les instructions de l’assistant pour s&eacute;lectionner les param&egrave;tres d’exportation des images et
du fichier HTML. Lorsqu’un message vous y invite, identifiez le dossier du site Dreamweaver
devant accueillir les images export&eacute;es.
L’assistant exporte les images &agrave; l’endroit indiqu&eacute; et copie le code HTML dans le Presse-papiers.
3 Dans Dreamweaver, placez le point d’insertion &agrave; l’endroit du document o&ugrave; vous souhaitez coller
le code HTML et choisissez Edition &gt; Coller.
Le code HTML et JavaScript associ&eacute; aux fichiers Fireworks export&eacute;s est copi&eacute; dans le
document Dreamweaver et tous les liens vers des images sont mis &agrave; jour.
Pour exporter et coller du code HTML Fireworks dans Dreamweaver :
1 Dans Fireworks, choisissez Fichier &gt; Exporter.
2 Dans la bo&icirc;te de dialogue Exporter, indiquez le dossier du site Dreamweaver devant accueillir
les images export&eacute;es.
3 Dans le menu d&eacute;roulant Enregistrer sous, choisissez Documents HTML et Images.
4 Dans le menu d&eacute;roulant HTML, choisissez Copier dans le Presse-papiers, puis cliquez sur
Enregistrer.
360
Chapitre 16 : Utilisation d’autres applications
5 Dans Dreamweaver, placez le point d’insertion &agrave; l’endroit du document o&ugrave; vous souhaitez coller
le code HTML, et choisissez Edition &gt; Coller.
Le code HTML et JavaScript associ&eacute; aux fichiers Fireworks export&eacute;s est copi&eacute; dans le
document Dreamweaver et tous les liens vers des images sont mis &agrave; jour.
Mise &agrave; jour du code HTML Fireworks plac&eacute; dans Dreamweaver
Outre la technique de lancement et de modification d&eacute;crite ci-dessus, vous pouvez faire appel &agrave; la
commande Fichier &gt; Mettre &agrave; jour le code HTML pour mettre &agrave; jour des fichiers Fireworks
plac&eacute;s dans Dreamweaver. La commande Mettre &agrave; jour le code HTML vous permet de modifier
l’image PNG source dans Fireworks et de mettre &agrave; jour automatiquement le code HTML et les
fichiers d’image export&eacute;s plac&eacute;s dans un document Dreamweaver. Gr&acirc;ce &agrave; cette commande, vous
pouvez mettre &agrave; jour les fichiers Dreamweaver m&ecirc;me si le programme est inactif.
Pour mettre &agrave; jour du code HTML Fireworks plac&eacute; dans Dreamweaver :
1 Dans Fireworks, ouvrez le fichier PNG source et modifiez-le.
2 Choisissez Fichier &gt; Enregistrer.
3 Dans Fireworks, choisissez Fichier &gt; Mettre &agrave; jour le code HTML.
4 Recherchez le fichier Dreamweaver qui contient le code HTML &agrave; mettre &agrave; jour, puis cliquez sur
Ouvrir.
5 Recherchez le dossier dans lequel placer les fichiers d’image mis &agrave; jour et cliquez sur S&eacute;lectionner
(Windows) ou Choisir (Macintosh).
Fireworks met &agrave; jour le code HTML et JavaScript du document Dreamweaver. Fireworks
exporte &eacute;galement les images mises &agrave; jour associ&eacute;es au code HTML et les place dans le dossier
de destination indiqu&eacute;.
Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d’ins&eacute;rer du nouveau
code HTML dans le document Dreamweaver. Fireworks ins&egrave;re la section JavaScript du
nouveau code au d&eacute;but du document et place la table HTML ou le lien vers l’image &agrave; la fin du
document.
Cr&eacute;ation d’un album photos pour le Web
Vous pouvez g&eacute;n&eacute;rer un site Web de fa&ccedil;on automatique pour pr&eacute;senter un album photo
pr&eacute;sentant les images contenues dans un dossier donn&eacute;. Dreamweaver utilise Fireworks pour cr&eacute;er
une image miniature et une image de plus grande taille pour chaque image du dossier.
Dreamweaver cr&eacute;e ensuite une page Web contenant toutes les miniatures, ainsi que les liens vers
les images de plus grande taille. Pour cr&eacute;er un album photos pour le Web, vous devez avoir install&eacute;
Dreamweaver et Fireworks 4 ou une version ult&eacute;rieure sur votre syst&egrave;me.
Avant de commencer, placez toutes les images que vous souhaitez int&eacute;grer &agrave; l’album photos dans
un dossier (il ne doit pas n&eacute;cessairement se trouver sur un site). Assurez-vous &eacute;galement que les
noms des fichiers d’image portent les extensions suivantes : .gif, .jpg, .jpeg, .png, .psd, .tif ou .tiff.
Les images portant des extensions de fichiers non reconnues ne seront pas int&eacute;gr&eacute;es &agrave; l’album.
Pour cr&eacute;er un album photos pour le Web :
1 Dans Dreamweaver, choisissez Commandes &gt; Cr&eacute;er un album photos pour le Web.
2 Dans la zone Titre de l’album photos, entrez un titre. Il appara&icirc;t alors dans un rectangle gris
dans la partie sup&eacute;rieure de la page contenant les miniatures.
Utilisation de Fireworks
361
3
4
5
6
Si vous le souhaitez, vous pouvez faire figurer jusqu’&agrave; deux lignes de texte suppl&eacute;mentaire sous
le titre en entrant le texte correspondant dans les zones de texte Infos de sous-titre et Autres
infos.
Choisissez le dossier contenant les images sources en cliquant sur le bouton Parcourir, situ&eacute; &agrave;
c&ocirc;t&eacute; de la zone de texte Dossier images sources. Choisissez (ou cr&eacute;ez) ensuite un dossier de
destination dans lequel placer toutes les images export&eacute;es et les fichiers HTML en cliquant sur
le bouton Parcourir, situ&eacute; pr&egrave;s de la zone de texte Dossier de destination.
Ce dernier ne doit pas contenir d’album photos. Dans le cas contraire, si les images portent les
m&ecirc;mes noms que celles que vous souhaitez ajouter, vous risquez d’&eacute;craser les fichiers d’image et
les miniatures pr&eacute;sents dans le dossier de destination.
Sp&eacute;cifiez les options d’affichage des images miniatures :
■ Choisissez une taille pour les images miniatures dans le menu d&eacute;roulant Taille des vignettes.
Les images sont mises &agrave; l’&eacute;chelle proportionnellement pour que les miniatures
correspondantes soient int&eacute;gr&eacute;es dans un carr&eacute; pr&eacute;sentant les dimensions de pixels
indiqu&eacute;es.
■ Pour afficher le nom de fichier de chaque image d’origine sous la miniature correspondante,
choisissez Montrer les noms de fichiers.
■ Indiquez le nombre de colonnes de la table qui affiche les miniatures.
Choisissez un format pour les images miniatures dans le menu d&eacute;roulant Format des vignettes :
GIF WebSnap 128 cr&eacute;e des miniatures GIF qui utilisent une palette adaptative Web de
128 couleurs.
GIF WebSnap 256 cr&eacute;e des miniatures GIF qui utilisent une palette adaptative Web de
256 couleurs.
JPEG—Qualit&eacute; sup&eacute;rieure cr&eacute;e des miniatures JPEG de qualit&eacute; relativement sup&eacute;rieure dont
la taille de fichier est plus importante.
JPEG—Fichier r&eacute;duit cr&eacute;e des miniatures JPEG de qualit&eacute; relativement inf&eacute;rieure dont la
taille de fichier est r&eacute;duite.
Choisissez un format pour les images de grande taille dans le menu d&eacute;roulant Format graphique
des photos. Une image de grande taille est g&eacute;n&eacute;r&eacute;e au format sp&eacute;cifi&eacute; pour chaque image
d’origine. Vous pouvez indiquer un format diff&eacute;rent pour les images de grande taille et les
miniatures correspondantes.
Remarque : La commande Cr&eacute;er un album photos pour le Web ne vous permet pas d’utiliser vos
fichiers image d’origine comme images de grande taille, car les formats des images d’origine
autres que GIF et JPEG risquent de ne pas s’afficher correctement dans tous les navigateurs. Si
les images d’origine sont des fichiers JPEG, les images de grande taille qui sont g&eacute;n&eacute;r&eacute;es peuvent
pr&eacute;senter des tailles de fichier sup&eacute;rieures et une qualit&eacute; inf&eacute;rieure &agrave; celle des fichiers d’origine.
7 Choisissez un pourcentage d’&eacute;chelle pour les images de grande taille.
En utilisant une &eacute;chelle de 100 %, vous cr&eacute;ez des images de grande taille dont le format est
identique &agrave; celui des originaux. Le pourcentage d’&eacute;chelle est appliqu&eacute; &agrave; toutes les images. Par
cons&eacute;quent, si toutes les images d’origine ne sont pas de taille identique, vous risquez de ne pas
obtenir les r&eacute;sultats escompt&eacute;s en les mettant &agrave; l’&eacute;chelle &agrave; l’aide d’un m&ecirc;me pourcentage.
8 S&eacute;lectionnez l’option Cr&eacute;er des pages s&eacute;par&eacute;es pour chaque photo afin de cr&eacute;er une page Web
contenant les liens de navigation Retour, Accueil et Suivant pour chaque image source.
Si vous s&eacute;lectionnez cette option, le lien vers la miniature m&egrave;ne aux pages de navigation. Dans
le cas contraire, le lien vers la miniature permet d’afficher directement les images de grande
taille.
362
Chapitre 16 : Utilisation d’autres applications
9 Cliquez sur OK pour cr&eacute;er les fichiers HTML et d’image de l’album photos pour le Web.
S’il n’est pas d&eacute;j&agrave; actif, Fireworks est lanc&eacute; et cr&eacute;e les miniatures et images de grande taille. Ces
op&eacute;rations peuvent prendre quelques instants si le nombre de fichiers d’image est important.
Une fois le traitement termin&eacute;, Dreamweaver est r&eacute;activ&eacute; et g&eacute;n&egrave;re la page contenant les
miniatures.
10 Lorsqu’une bo&icirc;te de dialogue indiquant &laquo; L’album a &eacute;t&eacute; cr&eacute;&eacute; .&raquo; s’affiche, cliquez sur OK.
Vous devrez peut-&ecirc;tre attendre quelques secondes avant que la page de votre album photos
n’apparaisse. Les noms de fichiers des miniatures apparaissent dans l’ordre alphab&eacute;tique.
Remarque : Si vous cliquez sur le bouton Annuler dans la bo&icirc;te de dialogue Dreamweaver une
fois le traitement lanc&eacute;, vous n’interrompez pas la proc&eacute;dure de cr&eacute;ation de l’album photos, mais
emp&ecirc;chez uniquement Dreamweaver d’afficher la page principale de l’album photos.
Utilisation de Flash
Vous pouvez utiliser Dreamweaver pour d&eacute;finir les options d’affichage et de lecture d’une
animation Flash dans une page Web ou mettre &agrave; jour les liens pr&eacute;sents dans l’animation. Si
Macromedia Flash MX 2004 est install&eacute;, vous pouvez &eacute;galement s&eacute;lectionner un fichier SWF
dans un document Dreamweaver et lancer Flash pour le modifier.
Modification de contenu Flash sous Dreamweaver
Si Macromedia Flash MX est install&eacute;, vous pouvez s&eacute;lectionner un fichier SWF dans un
document Dreamweaver et lancer Flash pour le modifier. Flash ne modifie pas directement le
fichier SWF ; il modifie le document source (fichier FLA), puis exporte &agrave; nouveau le fichier SWF.
Pour ouvrir et modifier un contenu Flash ins&eacute;r&eacute; &agrave; partir de Dreamweaver :
1 Dans Dreamweaver, choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s pour ouvrir l’inspecteur de propri&eacute;t&eacute;s, le cas
&eacute;ch&eacute;ant.
2 Dans le document Dreamweaver, proc&eacute;dez de l’une des mani&egrave;res suivantes :
Utilisation de Flash
363
■
Cliquez sur l’espace r&eacute;serv&eacute; du fichier SWF pour le s&eacute;lectionner, puis sur Modifier dans
l’inspecteur de propri&eacute;t&eacute;s.
Remarque : Si Flash MX n’est pas install&eacute;, le bouton Modifier est d&eacute;sactiv&eacute;.
Maintenez enfonc&eacute;e la touche Contr&ocirc;le (Windows) ou Commande (Macintosh) et doublecliquez sur l’espace r&eacute;serv&eacute; pour l’animation &agrave; modifier.
■ Cliquez sur l’animation de votre choix avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh) et choisissez Modifier avec Flash dans
le menu contextuel.
Dreamweaver lance Flash qui tente &agrave; son tour de localiser le fichier de programmation Flash
(.FLA) correspondant au fichier SWF s&eacute;lectionn&eacute;. Si Flash ne peut pas localiser le fichier de
programmation Flash, un message vous invite &agrave; le faire. Vous ne pouvez pas mettre &agrave; jour
directement un fichier SWF. Vous devez modifier le fichier source et l’exporter en tant que
fichier SWF.
■
Remarque : Si le fichier FLA ou le fichier SWF est verrouill&eacute;, Dreamweaver vous demande
d’extraire le fichier du serveur, d’annuler la demande ou d’afficher le fichier.
364
Chapitre 16 : Utilisation d’autres applications
3 Modifiez l’animation dans Flash. La fen&ecirc;tre de document indique que vous &ecirc;tes en train de
modifier une animation &agrave; partir de Dreamweaver.
4 Une fois les modifications effectu&eacute;es, cliquez sur Termin&eacute;.
Flash met &agrave; jour le document de programmation Flash (fichier FLA), exporte &agrave; nouveau le
fichier d’animation (fichier SWF), se ferme et active le document Dreamweaver.
5 Pour afficher le fichier SWF mis &agrave; jour dans le document, cliquez sur Lecture dans l’inspecteur
de propri&eacute;t&eacute;s ou appuyez sur la touche F12 pour afficher un aper&ccedil;u de votre page dans la fen&ecirc;tre
d’un navigateur.
Mise &agrave; jour des liens vers un fichier SWF
Dreamweaver vous permet de mettre &agrave; jour un lien dans une animation Flash (fichier SWF), puis
d’ins&eacute;rer cette modification dans le document de programmation Flash (fichier FLA).
Pour mettre &agrave; jour un lien URL dans un fichier SWF :
1 D&eacute;finissez une page d’accueil pour le site si ce n’est d&eacute;j&agrave; fait.
Vous devez d&eacute;finir une page d’accueil pour g&eacute;n&eacute;rer une carte du site. Dans la fen&ecirc;tre Affichage
de la carte du site, vous devez afficher les fichiers d&eacute;pendants afin de mettre &agrave; jour un lien dans
un fichier SWF. Par d&eacute;faut, la carte du site n’affiche pas les fichiers d&eacute;pendants. Pour plus
d’informations sur l’affichage des fichiers d&eacute;pendants, voir Affichage et masquage des fichiers de
la carte du site, page 102. Pour plus d’informations sur l’affichage de la carte du site, voir
Affichage d’une carte de site, page 98.
2 Ouvrez la fen&ecirc;tre de la carte du site.
3 Pour afficher les fichiers d&eacute;pendants, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Choisissez Affichage &gt; Afficher les fichiers d&eacute;pendants.
■ Choisissez Affichage &gt; Mise en forme pour ouvrir la bo&icirc;te de dialogue D&eacute;finition du site,
puis s&eacute;lectionnez l’option Afficher les fichiers d&eacute;pendants.
Le lien appara&icirc;t sous le fichier SWF.
Utilisation de Flash
365
4 Utilisez l’une des m&eacute;thodes suivantes pour modifier le lien :
Pour modifier le lien dans le fichier SWF s&eacute;lectionn&eacute;, cliquez dessus avec le bouton droit de
la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis choisissez
Modifier le lien. Dans la bo&icirc;te de dialogue qui s’affiche, entrez le nouveau chemin d’acc&egrave;s &agrave;
l’URL dans la zone de texte URL.
■ Pour mettre &agrave; jour toutes les instances du lien, choisissez Site &gt; Modifier le lien au niveau du
site, puis, dans la zone de texte Modifier tous les liens &agrave; de la bo&icirc;te de dialogue qui s’affiche,
recherchez le lien &agrave; modifier &agrave; l’aide du bouton Parcourir ou tapez son chemin d’acc&egrave;s.
Enfin, dans la zone de texte En liens &agrave;, recherchez la nouvelle URL &agrave; l’aide du bouton
Parcourir ou tapez son chemin d’acc&egrave;s.
5 Cliquez sur OK.
■
Tous les liens mis &agrave; jour par Dreamweaver dans le fichier SWF sont int&eacute;gr&eacute;s au document source
FLA lorsque vous proc&eacute;dez &agrave; une op&eacute;ration de lancement et de modification. Dreamweaver
consigne automatiquement toutes les modifications de lien apport&eacute;es au fichier SWF dans les
Design Notes et, lorsque Flash r&eacute;percute les modifications dans le fichier FLA, il les supprime des
Design Notes.
366
Chapitre 16 : Utilisation d’autres applications
CHAPITRE 17
Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
Macromedia Dreamweaver MX 2004 permet d’ajouter rapidement et facilement du son et des
animations &agrave; un site Web. Vous pouvez joindre des Design Notes &agrave; ces objets pour communiquer
avec votre &eacute;quipe. Il est &eacute;galement possible d’ins&eacute;rer des objets de type texte ou bouton
Macromedia Flash MX 2004 &agrave; partir de l’application Dreamweaver elle-m&ecirc;me.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
A propos des fichiers multim&eacute;dia, page 368
Insertion et modification d’objets multim&eacute;dia, page 369
Lancement d’un &eacute;diteur externe pour des fichiers multim&eacute;dia, page 371
Utilisation des Design Notes (Notes de conception) avec les objets multim&eacute;dia, page 373
Insertion et modification d’un objet de bouton Flash, page 373
Insertion d’un objet texte Flash, page 375
Insertion d’animations Flash, page 375
T&eacute;l&eacute;chargement et installation des &eacute;l&eacute;ments Flash, page 376
Insertion d’&eacute;l&eacute;ments Flash, page 376
Modification des attributs d’un &eacute;l&eacute;ment Flash, page 377
Insertion d’animations Shockwave, page 377
Ajout d’une vid&eacute;o, page 378
Ajout de son &agrave; une page, page 378
Insertion du contenu d’un plug-in Netscape Navigator, page 379
Insertion d’un contr&ocirc;le ActiveX, page 381
Insertion d’une applet Java, page 381
Utilisation de comportements pour contr&ocirc;ler les objets multim&eacute;dias, page 381
367
A propos des fichiers multim&eacute;dia
Vous pouvez incorporer les fichiers multim&eacute;dia suivants dans vos pages Dreamweaver :
animations Flash et Shockwave, QuickTime, AVI, applets Java, contr&ocirc;les ActiveX et fichiers audio
de formats divers.
Types de fichier Flash
Dreamweaver est fourni avec des objets Flash que vous pouvez utiliser m&ecirc;me si Flash n’est pas
install&eacute; sur votre ordinateur. Si Flash est install&eacute; sur votre machine, voir Utilisation de Flash,
page 363 pour plus d’informations sur l’utilisation et l’int&eacute;gration de ces applications.
Avant d’utiliser les commandes Flash disponibles dans Dreamweaver, il est recommand&eacute; de
conna&icirc;tre les diff&eacute;rents types de fichiers Flash :
Le fichier Flash (.fla) est le fichier source pour tout projet et est cr&eacute;&eacute; dans le programme Flash.
Ce type de fichier peut uniquement &ecirc;tre ouvert dans Flash (il ne peut pas l’&ecirc;tre dans Dreamweaver
ni dans des navigateurs). Vous pouvez ouvrir le fichier Flash dans Flash, puis l’exporter en tant
que fichier SWF ou SWT pour l’utiliser dans des navigateurs.
est une version compress&eacute;e du fichier Flash (.fla), optimis&eacute;e
pour l’affichage sur le Web. Ce fichier peut &ecirc;tre lu dans les navigateurs et pr&eacute;visualis&eacute; dans
Dreamweaver, mais il ne peut pas &ecirc;tre modifi&eacute; dans Flash. Il s’agit du type de fichier que vous
cr&eacute;ez lors de l’utilisation des objets de bouton ou de texte Flash. Pour plus d’informations, voir
Insertion et modification d’un objet de bouton Flash, page 373, Insertion d’un objet texte Flash,
page 375 et Insertion d’animations Flash, page 375.
Le fichier d’animation Flash (.swf)
Les fichiers de mod&egrave;le Flash (.swt) permettent de modifier et de remplacer des informations
dans un fichier d’animation Flash. Ces fichiers sont utilis&eacute;s dans l’objet de bouton Flash, ce qui
vous permet de modifier le mod&egrave;le avec votre propre texte ou vos propres liens afin de cr&eacute;er un
fichier SWF personnalis&eacute; &agrave; ins&eacute;rer dans votre document. Dans Dreamweaver, ces fichiers de
mod&egrave;le peuvent &ecirc;tre trouv&eacute;s dans les dossiers Dreamweaver/Configuration/Flash Objects/Flash
Buttons et Flash Text.
Vous pouvez &eacute;galement t&eacute;l&eacute;charger de nouveaux mod&egrave;les de bouton &agrave; partir du site Web
Macromedia Exchange pour Dreamweaver (http://www.macromedia.com/go/
dreamweaver_exchange_fr/) et les placer dans votre dossier de boutons Flash. Pour plus
d’informations sur la cr&eacute;ation de mod&egrave;les de bouton, consultez l’article correspondant sur le site
Web de Macromedia &agrave; l’adresse : www.macromedia.com/go/flash_buttons.
L’&eacute;l&eacute;ment Flash (.swc) est un fichier Flash SWF vous permettant de cr&eacute;er des applications Web
enrichies incorpor&eacute;es &agrave; une page Web. Les &eacute;l&eacute;ments Flash comportent des param&egrave;tres
personnalisables, que vous pouvez modifier pour qu’ils accomplissent diverses fonctions. Pour
plus d’informations, voir Insertion d’&eacute;l&eacute;ments Flash, page 376 et Modification des attributs d’un
&eacute;l&eacute;ment Flash, page 377.
Formats de fichiers audio
La liste ci-dessous d&eacute;crit les formats de fichiers audio les plus courants et pr&eacute;sente certains
avantages et inconv&eacute;nients de chaque conception Web.
368
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
Le format .midi ou .mid (Musical Instrument Digital Interface) est destin&eacute; &agrave; la musique
instrumentale. Les fichiers MIDI sont reconnus par plusieurs navigateurs et ne requi&egrave;rent pas de
plug-in. Bien que leur qualit&eacute; sonore soit tr&egrave;s bonne, elle peut varier en fonction de la carte son du
visiteur. Un petit fichier MIDI peut offrir un clip sonore de longue dur&eacute;e. Les fichiers MIDI ne
peuvent pas &ecirc;tre enregistr&eacute;s et doivent &ecirc;tre synth&eacute;tis&eacute;s sur un ordinateur &eacute;quip&eacute; d’un mat&eacute;riel et
d’un logiciel sp&eacute;ciaux.
Le format .wav (Waveform Extension) qui offre une bonne qualit&eacute; sonore, est pris en charge par
plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers
WAV &agrave; partir d’un CD, d’une cassette, d’un microphone, etc. Toutefois, la taille importante des
fichiers limite s&eacute;rieusement la longueur des clips audio que vous pouvez utiliser dans vos pages
Web.
Le format .aif (Audio Interchange File Format ou AIFF), tout comme le format WAV, offre une
bonne qualit&eacute; sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in.
Vous pouvez &eacute;galement enregistrer des fichiers AIFF &agrave; partir d’un CD, d’une cassette, d’un
microphone, etc. Toutefois, la taille importante des fichiers limite s&eacute;rieusement la longueur des
clips audio que vous pouvez utiliser dans vos pages Web.
Le format .mp3 (Motion Picture Experts Group Audio, ou MPEG-Audio Layer-3) est un
format compress&eacute; qui diminue de mani&egrave;re significative la taille des fichiers audio. La qualit&eacute;
sonore est excellente : si un fichier MP3 est correctement enregistr&eacute; et compress&eacute;, sa qualit&eacute; peut
&ecirc;tre &eacute;quivalente &agrave; celle d’un CD. La technologie MP3 permet de lire le fichier &laquo; en transit &raquo; afin
que les visiteurs n’aient pas &agrave; attendre le t&eacute;l&eacute;chargement du fichier entier avant de pouvoir
l’&eacute;couter. Mais le fichier est plus gros qu’un fichier Real Audio, ce qui signifie que le
t&eacute;l&eacute;chargement d’une chanson enti&egrave;re peut s’av&eacute;rer assez long si l’on utilise une connexion &agrave;
Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent t&eacute;l&eacute;charger et installer une
application d’aide ou un plug-in tel que QuickTime, Windows Media Player ou RealPlayer.
Le format .ra, .ram, .rpm ou Real Audio offre un degr&eacute; tr&egrave;s &eacute;lev&eacute; de compression avec une taille
de fichier inf&eacute;rieure &agrave; celle du format MP3. Le t&eacute;l&eacute;chargement de fichiers de chanson peut &ecirc;tre
effectu&eacute; dans un laps de temps raisonnable. Les fichiers pouvant &ecirc;tre &laquo; diffus&eacute;s &raquo; &agrave; partir d’un
serveur Web normal, les visiteurs peuvent commencer &agrave; &eacute;couter le son avant la fin du
t&eacute;l&eacute;chargement. Les visiteurs doivent t&eacute;l&eacute;charger et installer l’application d’aide ou le plug-in
RealPlayer afin de lire ces fichiers.
est un format &agrave; la fois audio et vid&eacute;o mis au point par Apple
Computer. QuickTime est inclus dans le syst&egrave;me d’exploitation des ordinateurs Apple Macintosh.
Il est utilis&eacute; par la plupart des applications Macintosh utilisant l’audio, la vid&eacute;o ou des
animations. Les PC aussi peuvent lancer les fichiers au format QuickTime, mais cela n&eacute;cessite le
pilote appropri&eacute;. QuickTime prend en charge la plupart des formats de codage, notamment
Cinepak, JPEG et MPEG.
.qt, .qtm, .mov ou QuickTime
Remarque : En plus des formats les plus courants, mentionn&eacute;s ci-dessus, il existe de nombreux
formats audio et vid&eacute;o utilisables sur le Web. Si vous rencontrez un fichier audio ou vid&eacute;o dont le
format vous est inconnu, retrouvez son cr&eacute;ateur afin d’apprendre comment l’utiliser au mieux.
Insertion et modification d’objets multim&eacute;dia
Vous pouvez ins&eacute;rer une animation ou un objet Flash, une animation QuickTime ou Shockwave,
une applet Java, un contr&ocirc;le ActiveX ou d’autres objets audio ou vid&eacute;o dans un document
Dreamweaver.
Insertion et modification d’objets multim&eacute;dia
369
Pour ins&eacute;rer un objet multim&eacute;dia dans une page :
1 Placez le point d’insertion dans la fen&ecirc;tre de document &agrave; l’endroit o&ugrave; vous souhaitez ins&eacute;rer
l’objet.
2 Pour ins&eacute;rer l’objet souhait&eacute;, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Support et s&eacute;lectionnez
le bouton correspondant au type d’objet que vous souhaitez ins&eacute;rer.
Choisissez l’objet appropri&eacute; dans le sous-menu Insertion &gt; M&eacute;dias.
■ Si l’&eacute;l&eacute;ment &agrave; ins&eacute;rer n’est pas un objet Flash, Shockwave, Applet ou ActiveX, utilisez le
bouton Plug-in Netscape Navigator (l’ic&ocirc;ne en forme de pi&egrave;ce de puzzle dans la barre
Insertion) pour l’ins&eacute;rer. Pour plus d’informations, voir Insertion du contenu d’un plug-in
Netscape Navigator, page 379.
Dans la plupart des cas, une bo&icirc;te de dialogue permet alors de choisir un fichier source et de
sp&eacute;cifier certains param&egrave;tres de l’objet multim&eacute;dia.
■
Conseil : Pour &eacute;viter que ces bo&icirc;tes de dialogue ne s’affichent, choisissez Edition &gt; Pr&eacute;f&eacute;rences &gt;
G&eacute;n&eacute;ral (Windows) ou Dreamweaver&gt; Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral (Macintosh) et d&eacute;sactivez l’option
Afficher la bo&icirc;te de dialogue lors de l’insertion d’objets. Pour remplacer la pr&eacute;f&eacute;rence d’affichage
des bo&icirc;tes de dialogue, maintenez enfonc&eacute;e la touche Ctrl (Windows) ou Option (Macintosh) tout
en ins&eacute;rant l’objet. Par exemple, pour ins&eacute;rer un espace r&eacute;serv&eacute; pour une animation Shockwave
sans sp&eacute;cifier le fichier correspondant, maintenez la touche Ctrl ou Option enfonc&eacute;e et cliquez sur
le bouton Shockwave &agrave; partir du menu d&eacute;roulant Support de la cat&eacute;gorie Commun de la barre
Ins&eacute;rer ou s&eacute;lectionnez Insertion &gt; M&eacute;dias &gt; Shockwave.
3 Renseignez la bo&icirc;te de dialogue S&eacute;lectionner un fichier ou Ins&eacute;rer Flash.
4 Cliquez sur OK.
La bo&icirc;te de dialogue Attributs d’accessibilit&eacute; des balises d’objet s’affiche si elle a &eacute;t&eacute; activ&eacute;e dans
Pr&eacute;f&eacute;rences (voir Optimisation de l’espace de travail pour la conception de pages accessibles,
page 56).
5 Si la bo&icirc;te de dialogue Attributs d’accessibilit&eacute; des balises d’objet s’affiche, entrez les
informations requises et cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
370
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
L’objet multim&eacute;dia appara&icirc;t dans le document.
Remarque : Si vous cliquez sur Annuler, un espace r&eacute;serv&eacute; pour l’objet multim&eacute;dia s’affiche dans
le document, mais Dreamweaver ne lui associe ni balises ni attributs d’accessibilit&eacute;.
Pour sp&eacute;cifier un fichier source, d&eacute;finir les dimensions et d’autres param&egrave;tres et attributs,
utilisez l’inspecteur de propri&eacute;t&eacute;s pour chaque objet.
Modification des attributs d’accessibilit&eacute; d’un objet multim&eacute;dia
Si vous ins&eacute;rez des attributs d’accessibilit&eacute; avec un objet multim&eacute;dia (voir Insertion et modification
d’objets multim&eacute;dia, page 369), vous pouvez modifier ces valeurs dans le code HTML.
Pour modifier les valeurs d’accessibilit&eacute; pour un objet multim&eacute;dia :
1 Dans la fen&ecirc;tre de document, s&eacute;lectionnez l’objet.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
Modifiez les attributs en mode Code.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Modifier le code de la balise.
Lancement d’un &eacute;diteur externe pour des fichiers multim&eacute;dia
Vous pouvez lancer un &eacute;diteur externe depuis Dreamweaver pour modifier la plupart des fichiers
multim&eacute;dia. Vous pouvez &eacute;galement d&eacute;cider de l’&eacute;diteur que doit lancer Dreamweaver pour
modifier le fichier.
Lancement d’un &eacute;diteur externe depuis Dreamweaver
Vous pouvez lancer un &eacute;diteur externe depuis Dreamweaver pour modifier la plupart des fichiers
multim&eacute;dia.
Pour lancer un &eacute;diteur externe depuis Dreamweaver :
1 Assurez-vous que le type du fichier multim&eacute;dia est associ&eacute; &agrave; un &eacute;diteur sur votre syst&egrave;me.
Pour savoir quel &eacute;diteur est associ&eacute; au type de fichier, s&eacute;lectionnez Edition &gt; Pr&eacute;f&eacute;rences dans
Dreamweaver, puis Types de fichiers/Editeurs dans la liste Cat&eacute;gorie. Cliquez sur l’extension de
fichier dans la colonne Extensions pour consulter le ou les &eacute;diteurs associ&eacute;s dans la colonne
Editeurs. Vous pouvez modifier l’&eacute;diteur associ&eacute; &agrave; un type de fichier. Pour plus d’informations,
voir Sp&eacute;cification de l’&eacute;diteur &agrave; lancer depuis Dreamweaver, page 372.
2 Double-cliquez sur le fichier multim&eacute;dia dans le panneau Site pour lancer l’&eacute;diteur externe et
ouvrir le fichier.
L’&eacute;diteur qui est ex&eacute;cut&eacute; lorsque vous double-cliquez sur le fichier du panneau Site est appel&eacute;
&laquo; &eacute;diteur principal &raquo;. Si vous double-cliquez sur un fichier image, par exemple, Dreamweaver
ouvre le fichier dans l’application principale de retouche d’image d&eacute;finie (Macromedia
Fireworks ou autre).
3 Si vous ne souhaitez pas utiliser l’&eacute;diteur externe principal pour modifier le fichier, vous pouvez
effectuer l’une des op&eacute;rations suivantes pour utiliser un autre &eacute;diteur :
■ Dans le panneau Site, cliquez avec le bouton droit de la souris (Windows) ou en maintenant
la touche Ctrl enfonc&eacute;e (Macintosh) sur le nom du fichier concern&eacute; et s&eacute;lectionnez Ouvrir
avec dans le menu qui s’affiche.
Lancement d’un &eacute;diteur externe pour des fichiers multim&eacute;dia
371
■
En mode Cr&eacute;ation, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfonc&eacute;e (Macintosh) sur l’&eacute;l&eacute;ment multim&eacute;dia de la page affich&eacute;e, puis
s&eacute;lectionnez Modifier avec dans le menu contextuel.
Sp&eacute;cification de l’&eacute;diteur &agrave; lancer depuis Dreamweaver
Vous pouvez d&eacute;finir l’&eacute;diteur &agrave; lancer par Dreamweaver pour modifier un type de fichier et pour
ajouter ou supprimer des types de fichiers reconnus par Dreamweaver.
Pour indiquer explicitement les &eacute;diteurs externes &agrave; lancer pour un type de fichier donn&eacute; :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis s&eacute;lectionnez Types de fichiers/Editeurs dans la liste
Cat&eacute;gorie.
Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche,
sous le titre Extensions. Les &eacute;diteurs associ&eacute;s &agrave; une extension apparaissent dans la liste de
droite, sous le titre Editeurs.
2 S&eacute;lectionnez l’extension de type de fichier dans la liste Extensions, puis effectuez l’une des
op&eacute;rations suivantes :
■ Pour associer un nouvel &eacute;diteur au type de fichier, cliquez sur le bouton plus (+), au-dessus
de la liste Editeurs et renseignez la bo&icirc;te de dialogue qui s’affiche.
Par exemple, s&eacute;lectionnez l’ic&ocirc;ne de l’application Acrobat pour l’associer au type de fichier.
■ Pour faire d’un &eacute;diteur l’&eacute;diteur principal pour un type de fichier donn&eacute; (c’est-&agrave;-dire celui
qui s’ouvre automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le
panneau Site), s&eacute;lectionnez cet &eacute;diteur dans la liste Editeurs, puis cliquez sur Rendre
principal.
■ Pour qu’un &eacute;diteur ne soit plus li&eacute; &agrave; un type de fichier donn&eacute;, s&eacute;lectionnez cet &eacute;diteur dans
la liste Editeurs et cliquez sur le bouton moins (-) au-dessus de la liste.
Pour ajouter un nouveau type de fichier et un &eacute;diteur associ&eacute; :
1 Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type
de fichier (saisissez le point pr&eacute;c&eacute;dent l’extension) ou plusieurs extensions li&eacute;es et s&eacute;par&eacute;es par
des espaces.
Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un &eacute;diteur
XML install&eacute; sur votre syst&egrave;me.
2 Pour s&eacute;lectionner un &eacute;diteur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de
la liste Editeurs et renseignez la bo&icirc;te de dialogue qui s’affiche.
Pour supprimer un type de fichier :
• S&eacute;lectionnez le type de fichier dans la liste Extensions et cliquez sur le bouton moins (-) audessus de la liste Extensions
Remarque : L’annulation de la suppression d’un type de fichier &eacute;tant impossible, soyez prudent
lors d’une telle op&eacute;ration.
372
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
Utilisation des Design Notes (Notes de conception) avec les
objets multim&eacute;dia
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes &agrave; un
objet multim&eacute;dia. Les Design Notes sont des notes associ&eacute;es &agrave; un fichier particulier et stock&eacute;es
dans un fichier s&eacute;par&eacute;. Les Design Notes vous permettent de conserver des informations
suppl&eacute;mentaires sur les documents, par exemple, des commentaires sur l’&eacute;tat des fichiers ou le
nom des fichiers source des images. Pour plus d’informations sur l’utilisation des Design Notes,
voir Stockage des informations sur les fichiers dans des Design Notes, page 116.
Pour ajouter une Design Note &agrave; un objet multim&eacute;dia :
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh) sur l’objet dans la fen&ecirc;tre de document.
Remarque : Vous devez d&eacute;finir votre site avant d’ajouter des Design Notes &agrave; un objet (voir
Activation et d&eacute;sactivation des Design Notes pour un site, page 116).
2 Cliquez sur Design Notes dans le menu contextuel.
3 Entrez les informations souhait&eacute;es dans la Design Note.
Conseil : Vous pouvez &eacute;galement ajouter une Design Note &agrave; un objet multim&eacute;dia &agrave; partir du
panneau Site en s&eacute;lectionnant le fichier, en affichant le menu contextuel, puis en choisissant
l’option Design Notes dans ce dernier.
Insertion et modification d’un objet de bouton Flash
Vous pouvez cr&eacute;er, ins&eacute;rer et modifier des boutons Flash dans vos documents tout en travaillant
sous Dreamweaver ; il n’est pas n&eacute;cessaire de disposer de Macromedia Flash. L’objet de bouton
Flash est un bouton pouvant &ecirc;tre mis &agrave; jour. Il est bas&eacute; sur un mod&egrave;le Flash. Vous pouvez
personnaliser un objet de bouton Flash en ajoutant du texte, une couleur d’arri&egrave;re-plan et des
liens vers d’autres fichiers.
Cr&eacute;ation et insertion d’un bouton Flash
Vous pouvez cr&eacute;er et ins&eacute;rer des boutons Flash dans vos documents lorsque les modes Cr&eacute;ation ou
Code sont activ&eacute;s.
Remarque : Vous devez enregistrer le document avant d’ins&eacute;rer un objet de bouton ou de texte
Flash.
Pour ins&eacute;rer un objet de bouton Flash :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous voulez ins&eacute;rer le
bouton Flash.
2 Pour ouvrir la bo&icirc;te de dialogue Insertion d’objets Flash, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, choisissez Support et cliquez sur l’ic&ocirc;ne
Bouton Flash.
■ Choisissez Insertion &gt; M&eacute;dias &gt; Bouton Flash.
Insertion et modification d’un objet de bouton Flash
373
La bo&icirc;te de dialogue Ins&eacute;rer le bouton Flash s’affiche.
3 Renseignez la bo&icirc;te de dialogue Ins&eacute;rer le bouton Flash, et cliquez sur Appliquer ou OK pour
ins&eacute;rer le bouton Flash dans la fen&ecirc;tre de document.
Conseil : Pour afficher un aper&ccedil;u du bouton en mode Cr&eacute;ation, cliquez sur Appliquer. La bo&icirc;te de
dialogue reste ouverte et vous pouvez afficher un aper&ccedil;u du bouton dans votre document.
Modification d’un objet de bouton Flash
Vous pouvez modifier les propri&eacute;t&eacute;s et le contenu d’un objet de bouton Flash.
Pour modifier un objet de bouton Flash :
1 Dans la fen&ecirc;tre de document, cliquez sur l’objet de bouton Flash pour le s&eacute;lectionner.
2 Ouvrez l’inspecteur de propri&eacute;t&eacute;s, le cas &eacute;ch&eacute;ant.
L’inspecteur de propri&eacute;t&eacute;s affiche les propri&eacute;t&eacute;s du bouton Flash. Il permet de modifier les
attributs HTML du bouton, tels que la largeur, la hauteur et la couleur d’arri&egrave;re-plan.
3 Pour apporter des modifications au contenu, affichez la bo&icirc;te de dialogue Ins&eacute;rer le bouton
Flash en utilisant l’une des m&eacute;thodes suivantes :
■ Double-cliquez sur l’objet de bouton Flash.
■ Cliquez sur le bouton Modifier dans l’inspecteur de propri&eacute;t&eacute;s.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh), puis choisissez Modifier dans le menu contextuel.
4 Dans la bo&icirc;te de dialogue Ins&eacute;rer le bouton Flash, modifiez le contenu des zones indiqu&eacute;es dans
Insertion et modification d’un objet de bouton Flash, page 373.
Dans la fen&ecirc;tre Cr&eacute;ation, vous pouvez redimensionner l’objet &agrave; l’aide des poign&eacute;es de
redimensionnement. Vous pouvez rendre &agrave; l’objet sa taille d’origine en s&eacute;lectionnant R&eacute;tablir la
taille dans l’inspecteur de propri&eacute;t&eacute;s (voir Redimensionnement d’une image, page 323).
Lecture d’un objet de bouton Flash dans le document
Vous pouvez pr&eacute;visualiser un bouton Flash dans la fen&ecirc;tre de document Dreamweaver.
374
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
Pour afficher l’objet de bouton Flash dans la fen&ecirc;tre de document :
1 En mode Cr&eacute;ation, s&eacute;lectionnez l’objet de bouton Flash dans le document.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur Lecture.
3 Cliquez sur le bouton Arr&ecirc;t pour arr&ecirc;ter la pr&eacute;visualisation.
Remarque : Vous ne pouvez pas modifier l’objet de bouton Flash pendant sa lecture.
Il est toujours judicieux d’afficher un aper&ccedil;u du document dans le navigateur pour obtenir une
repr&eacute;sentation exacte du bouton Flash.
Insertion d’un objet texte Flash
L’objet de texte Flash permet de cr&eacute;er et d’ins&eacute;rer une animation Flash contenant uniquement du
texte. Vous pouvez ainsi cr&eacute;er une petite animation graphique vectorielle avec les polices et le texte
de votre choix.
Pour ins&eacute;rer un objet de texte Flash :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion l&agrave; o&ugrave; vous souhaitez ins&eacute;rer le texte
Flash.
2 Pour ouvrir la bo&icirc;te de dialogue Ins&eacute;rer le texte Flash, proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, choisissez Support et cliquez sur l’ic&ocirc;ne
Texte Flash.
■ Choisissez Insertion &gt; M&eacute;dias &gt; Texte Flash.
La bo&icirc;te de dialogue Ins&eacute;rer le texte Flash s’affiche.
3 Renseignez la bo&icirc;te de dialogue Ins&eacute;rer le texte Flash, et cliquez sur Appliquer ou OK pour
ins&eacute;rer le texte Flash dans la fen&ecirc;tre de document.
Si vous cliquez sur le bouton Appliquer, la bo&icirc;te de dialogue reste ouverte et vous pouvez
pr&eacute;visualiser le texte dans le document.
Pour modifier ou lire l’objet de texte Flash, suivez la m&ecirc;me proc&eacute;dure que pour un bouton Flash
(voir Modification d’un objet de bouton Flash, page 374).
Insertion d’animations Flash
Vous pouvez utiliser Dreamweaver pour ins&eacute;rer des animations Flash dans vos pages.
Insertion d’animations Flash
375
Pour ins&eacute;rer un fichier SWF (animation Flash) :
1 Dans la fen&ecirc;tre de document (mode Cr&eacute;ation), placez le point d’insertion &agrave; l’endroit o&ugrave; vous
souhaitez ins&eacute;rer l’animation, puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, choisissez Support et cliquez sur l’ic&ocirc;ne
Flash.
■ Choisissez Insertion &gt; M&eacute;dias &gt; Flash.
2 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez un fichier d’animation Flash (.swf).
Un espace r&eacute;serv&eacute; Flash s’affiche dans la fen&ecirc;tre de document (contrairement aux objets de
texte et de bouton Flash). Pour plus d’informations sur la d&eacute;finition des propri&eacute;t&eacute;s d’une
animation Flash, s&eacute;lectionnez l’espace r&eacute;serv&eacute;, puis cliquez sur le bouton d’aide de l’inspecteur
de propri&eacute;t&eacute;s.
FlashPour afficher l’aper&ccedil;u d’une animation dans la fen&ecirc;tre de document :
1 Dans cette fen&ecirc;tre, cliquez sur l’espace r&eacute;serv&eacute; pour Flash afin de s&eacute;lectionner l’animation Flash
&agrave; pr&eacute;visualiser.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur le bouton Lecture. Cliquez sur le bouton Arr&ecirc;t pour
arr&ecirc;ter la pr&eacute;visualisation. Vous pouvez &eacute;galement pr&eacute;visualiser l’animation Flash dans un
navigateur en appuyant sur la touche F12.
Conseil : Pour pr&eacute;visualiser tout le contenu Flash dans une page, appuyez sur les touches
Ctrl+Alt+Maj+P (Windows) ou Maj+Option+Commande+P (Macintosh). Tous les objets et animations
Flash sont d&eacute;finis sur le mode de lecture.
T&eacute;l&eacute;chargement et installation des &eacute;l&eacute;ments Flash
Avant d’utiliser des &eacute;l&eacute;ments Flash dans vos pages Web, vous devez commencer par les ajouter &agrave;
Dreamweaver &agrave; l’aide du logiciel Extension Manager. Le logiciel Extension Manager est une
application ind&eacute;pendante permettant d’installer et de g&eacute;rer les extensions dans les applications
Macromedia. Vous pouvez lancer Extension Manager &agrave; partir de Dreamweaver en choisissant
Commandes &gt; G&eacute;rer les extensions.
Pour rechercher les &eacute;l&eacute;ments Flash de Dreamweaver les plus r&eacute;cents, consultez le site Web de
Macromedia Exchange, &agrave; l’adresse suivante : http://www.macromedia.com/go/
dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et t&eacute;l&eacute;charger des &eacute;l&eacute;ments
Flash et d’autres extensions Dreamweaver (un grand nombre d’entre elles sont gratuites),
participer &agrave; des forums de discussion, visualiser les rapports et analyses des utilisateurs et installer
et exploiter Extension Manager. Vous devez installer Extension Manager avant de pouvoir
installer de nouveaux &eacute;l&eacute;ments Flash ou d’autres extensions Dreamweaver.
Pour plus d’informations concernant l’utilisation d’Extension Manager afin d’installer des
&eacute;l&eacute;ments Flash (ainsi que d’autres extensions Dreamweaver), voir Ajout d’extensions dans
Dreamweaver, page 61.
Insertion d’&eacute;l&eacute;ments Flash
Dreamweaver vous permet d’ins&eacute;rer des &eacute;l&eacute;ments Flash dans vos documents. Les &eacute;l&eacute;ments Flash
vous permettent de cr&eacute;er ais&eacute;ment et rapidement des applications Web enrichies &agrave; l’aide
d’&eacute;l&eacute;ments pr&eacute;cr&eacute;&eacute;s. Pour plus d’informations sur les &eacute;l&eacute;ments Flash et la fa&ccedil;on de les utiliser dans
vos pages Web, voir Types de fichier Flash, page 368.
376
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
Pour ins&eacute;rer un &eacute;l&eacute;ment Flash :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous souhaitez ins&eacute;rer un
&eacute;l&eacute;ment Flash et proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie El&eacute;ments Flash de la barre Ins&eacute;rer, cliquez sur l’ic&ocirc;ne de l’&eacute;l&eacute;ment Flash
que vous souhaitez ins&eacute;rer.
■ Choisissez Insertion &gt; El&eacute;ment Flash &gt; Nom de l’&eacute;l&eacute;ment Flash.
La bo&icirc;te de dialogue Enregistrer l’&eacute;l&eacute;ment Flash s’affiche alors.
2 Tapez le nom de fichier choisi pour l’&eacute;l&eacute;ment Flash et enregistrez-le &agrave; l’endroit voulu de votre
site.
3 Cliquez sur OK.
L’espace r&eacute;serv&eacute; &agrave; l’&eacute;l&eacute;ment Flash appara&icirc;t dans le document. Vous pouvez modifier les
propri&eacute;t&eacute;s de l’&eacute;l&eacute;ment Flash &agrave; l’aide des inspecteurs de balises ou de propri&eacute;t&eacute;s.
4 Choisissez Fichier &gt; Aper&ccedil;u dans le navigateur pour afficher un aper&ccedil;u de l’&eacute;l&eacute;ment Flash.
Modification des attributs d’un &eacute;l&eacute;ment Flash
Il est possible de modifier les attributs d’un &eacute;l&eacute;ment Flash &agrave; l’aide des inspecteurs de balises ou de
propri&eacute;t&eacute;s.
Pour modifier les attributs d’un &eacute;l&eacute;ment Flash :
1 Dans la fen&ecirc;tre de document, effectuez l’une des proc&eacute;dures suivantes :
En mode Cr&eacute;ation, s&eacute;lectionnez l’&eacute;l&eacute;ment Flash.
■ En mode Code, cliquez n’importe o&ugrave; sur le nom de l’&eacute;l&eacute;ment Flash ou sur son contenu.
2 Ouvrez l’inspecteur de balises si ce n’est d&eacute;j&agrave; fait (Fen&ecirc;tre &gt; Inspecteur de balises).
3 Modifiez les attributs de l’&eacute;l&eacute;ment Flash &agrave; l’aide de l’inspecteur de balises et de l’inspecteur de
propri&eacute;t&eacute;s.
4 Pour que les modifications apport&eacute;es soient prises en compte dans votre document, appuyez sur
la touche Entr&eacute;e (Windows) ou Retour (Macintosh) ou cliquez ailleurs dans l’inspecteur de
balises.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de balises.
■
Insertion d’animations Shockwave
Vous pouvez utiliser Dreamweaver pour ins&eacute;rer des animations Shockwave dans vos documents.
Shockwave, la norme Macromedia pour les &eacute;l&eacute;ments multim&eacute;dia interactifs sur le Web, est un
format compress&eacute; qui autorise le t&eacute;l&eacute;chargement rapide des fichiers multim&eacute;dia cr&eacute;&eacute;s dans
Macromedia Director, ainsi que leur lecture dans la plupart des navigateurs.
Pour ins&eacute;rer une animation Shockwave :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous souhaitez ins&eacute;rer
une animation Shockwave et proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Support et s&eacute;lectionnez
l’ic&ocirc;ne Shockwave dans le menu.
■ Choisissez Insertion &gt; M&eacute;dias &gt; Shockwave.
2 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez un fichier d’animation.
Insertion d’animations Shockwave
377
3 Dans l’inspecteur de propri&eacute;t&eacute;s, tapez la largeur et la hauteur de l’animation dans les zones L et
H.
Ajout d’une vid&eacute;o
Plusieurs m&eacute;thodes vous permettent d’ajouter une vid&eacute;o &agrave; votre page Web et vous pouvez faire
appel &agrave; divers formats. L’utilisateur peut t&eacute;l&eacute;charger les vid&eacute;os ou elles peuvent &ecirc;tre diffus&eacute;es et
lues pendant leur t&eacute;l&eacute;chargement.
Pour inclure une petite s&eacute;quence vid&eacute;o t&eacute;l&eacute;chargeable par les utilisateurs de votre page :
1 Placez le fichier vid&eacute;o dans le dossier de votre site.
Ces clips se pr&eacute;sentent souvent au format AVI ou MPEG.
2 Ins&eacute;rez un lien vers la s&eacute;quence ou incorporez-la dans votre page.
Pour &eacute;tablir un lien vers la s&eacute;quence, entrez un texte pour le lien (par exemple, &laquo; T&eacute;l&eacute;chargez la
vid&eacute;o &raquo;), s&eacute;lectionnez le texte et cliquez sur l’ic&ocirc;ne de dossier dans l’inspecteur de s&eacute;lections.
Recherchez le fichier vid&eacute;o et s&eacute;lectionnez-le.
Pour plus d’informations &agrave; ce sujet, voir Insertion du contenu d’un plug-in Netscape Navigator,
page 379.
Remarque : L’utilisateur doit t&eacute;l&eacute;charger une application d’aide pour visualiser les formats lus en
transit, comme RealMedia, QuickTime et Windows Media.
Ajout de son &agrave; une page
Il est possible d’ajouter du son &agrave; une page Web. Il existe de nombreux types de fichiers et de
formats audio, par exemple, les fichiers .wav, .midi et .mp3. Pour plus d’informations, voir
Formats de fichiers audio, page 368. Certains facteurs sont &agrave; consid&eacute;rer avant de d&eacute;cider d’un
format et d’une m&eacute;thode d’ajout de son : son objectif, son public, la taille du fichier, la qualit&eacute; du
son et les diff&eacute;rences entre les navigateurs.
Remarque : Le traitement des fichiers est tr&egrave;s diff&eacute;rent et incoh&eacute;rent suivant les navigateurs. Vous
pouvez, si vous le souhaitez, ajouter un fichier audio &agrave; une animation Flash, puis incorporer le fichier
SWF pour assurer une meilleure coh&eacute;rence.
Lien vers un fichier audio
Un lien vers un fichier audio est une m&eacute;thode simple et efficace pour ajouter du son &agrave; une page
Web. Cette m&eacute;thode d’incorporation de fichiers audio permet aux visiteurs de choisir s’ils veulent
&eacute;couter le fichier et rend le fichier disponible pour un plus vaste public.
Pour cr&eacute;er un lien vers un fichier audio :
1 S&eacute;lectionnez le texte ou l’image &agrave; utiliser comme lien vers le fichier audio.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne de dossier pour rechercher le fichier audio
ou tapez le nom et le chemin d’acc&egrave;s au fichier dans la zone Lien.
378
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
Incorporation d’un fichier son
L’op&eacute;ration consistant &agrave; incorporer un son int&egrave;gre le fichier audio directement dans la page, mais
le son est uniquement lu si les visiteurs du site disposent du plug-in appropri&eacute; pour le fichier
audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond
ou pour contr&ocirc;ler le volume, l’apparence du lecteur sur votre page ou encore les points de
d&eacute;marrage et d’arr&ecirc;t du fichier sonore.
Conseil : Lorsque vous incorporez des fichiers sons &agrave; vos pages Web, r&eacute;fl&eacute;chissez bien &agrave; l’usage
qu’il est possible d’en faire et de quelle fa&ccedil;on les visiteurs pourraient s’en servir. Proposez toujours
une commande permettant d’&eacute;teindre ou de couper le son, au cas o&ugrave; certains visiteurs ne
souhaiteraient pas entendre le contenu audio.
Pour incorporer un fichier audio :
1 En mode Cr&eacute;ation, placez le point d’insertion &agrave; l’endroit o&ugrave; vous souhaitez incorporer le fichier
et proc&eacute;dez de l’une des mani&egrave;res suivantes :
Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur le bouton Support et s&eacute;lectionnez
l’ic&ocirc;ne du plug-in.
■ S&eacute;lectionnez Insertion &gt; M&eacute;dias &gt; Plug-in.
Pour plus d’informations sur l’objet Plug-in, voir Insertion du contenu d’un plug-in Netscape
Navigator, page 379.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, cliquez sur l’ic&ocirc;ne de dossier pour rechercher le fichier audio
ou tapez le nom et le chemin d’acc&egrave;s au fichier dans la zone Lien.
3 Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropri&eacute;es ou en
redimensionnant l’espace r&eacute;serv&eacute; au plug-in dans la fen&ecirc;tre de document.
Ces valeurs d&eacute;terminent la taille &agrave; laquelle les contr&ocirc;les audio sont affich&eacute;s dans le navigateur.
■
Insertion du contenu d’un plug-in Netscape Navigator
Vous pouvez cr&eacute;er du contenu, par exemple une s&eacute;quence vid&eacute;o QuickTime pour un plug-in
Netscape Navigator, puis utiliser Dreamweaver pour ins&eacute;rer ce contenu dans un
document HTML. Par exemple, RealPlayer et QuickTime sont des plug-ins par d&eacute;faut, alors que
les fichiers MP3 et les animations QuickTime sont des fichiers de contenu.
Insertion du contenu d’un plug-in dans votre page
Votre page peut renfermer du contenu qui s’ex&eacute;cutera dans un plug-in du navigateur de
l’utilisateur.
Pour ins&eacute;rer le contenu d’un plug-in Netscape Navigator :
1 Dans la fen&ecirc;tre de document (mode Cr&eacute;ation), placez le point d’insertion &agrave; l’endroit o&ugrave; vous
souhaitez ins&eacute;rer le contenu, puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, choisissez Support et cliquez sur l’ic&ocirc;ne du
plug-in.
■ S&eacute;lectionnez Insertion &gt; M&eacute;dias &gt; Plug-in.
2 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez un fichier de contenu pour un plug-in
Netscape Navigator.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Insertion du contenu d’un plug-in Netscape Navigator
379
Lecture de plug-ins dans la fen&ecirc;tre de document
Vous pouvez afficher un aper&ccedil;u des animations qui font directement appel aux plug-ins Netscape
Navigator dans le mode Cr&eacute;ation dans la fen&ecirc;tre de document. Vous pouvez lire simultan&eacute;ment
tous les &eacute;l&eacute;ments des plug-ins pour savoir comment la page s’affichera sur le poste de l’utilisateur
ou lire chaque &eacute;l&eacute;ment individuellement pour vous assurer que vous avez incorpor&eacute; le bon
&eacute;l&eacute;ment multim&eacute;dia.
Remarque : Il n’est pas possible d’afficher un aper&ccedil;u des films ou animations bas&eacute;es sur des
contr&ocirc;les ActiveX.
Pour lire des animations dans le mode Cr&eacute;ation, les plug-ins ad&eacute;quats doivent &ecirc;tre install&eacute;s sur
votre ordinateur.
Pour lire le contenu du plug-in dans la fen&ecirc;tre de document :
1 Ins&eacute;rez un ou plusieurs &eacute;l&eacute;ments multim&eacute;dia en choisissant la commande Insertion &gt; M&eacute;dias &gt;
Shockwave, Insertion &gt; M&eacute;dias &gt; Flash ou Insertion &gt; M&eacute;dias &gt; Plug-in.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
S&eacute;lectionnez un des &eacute;l&eacute;ments multim&eacute;dia que vous avez ins&eacute;r&eacute;s, puis choisissez la
commande Affichage &gt; Plug-ins &gt; Lire ou cliquez sur le bouton de lecture de l’inspecteur de
propri&eacute;t&eacute;s.
Choisissez la commande Affichage &gt; Plug-ins &gt; Lire tout pour lire tous les &eacute;l&eacute;ments
multim&eacute;dia de la page s&eacute;lectionn&eacute;e qui font appel &agrave; des plug-ins.
Remarque : L’option Lire tout s’applique uniquement au document actif. Elle ne s’applique pas
aux autres documents dans un ensemble de cadres par exemple.
Pour arr&ecirc;ter la lecture du contenu d’un plug-in :
• S&eacute;lectionnez un &eacute;l&eacute;ment multim&eacute;dia, puis choisissez la commande Affichage &gt; Plug-ins &gt;
Arr&ecirc;ter ou cliquez sur le bouton d’arr&ecirc;t dans l’inspecteur de propri&eacute;t&eacute;s.
Vous pouvez &eacute;galement s&eacute;lectionner Affichage &gt; Plug-ins &gt; Arr&ecirc;ter tout pour interrompre la
lecture de tous les contenus des plug-ins.
D&eacute;pannage des plug-ins de Netscape Navigator
Vous avez suivi les &eacute;tapes permettant de lire le contenu d’un plug-in dans la fen&ecirc;tre de document,
mais constatez qu’une partie ne fonctionne pas. Essayez l’op&eacute;ration suivante :
• V&eacute;rifiez que le plug-in associ&eacute; est bien install&eacute; sur votre ordinateur et que sa version est
•
•
380
compatible avec le contenu charg&eacute;.
Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un &eacute;diteur de texte et
v&eacute;rifiez si le plug-in posant probl&egrave;me est r&eacute;pertori&eacute;. Ce fichier conserve la trace des plug-ins
&eacute;tant la source de probl&egrave;mes dans Dreamweaver et qui ne sont donc pas pris en charge. Si vous
constatez des probl&egrave;mes avec un plug-in particulier, il est souhaitable de l’ajouter &agrave; ce fichier.
V&eacute;rifiez que vous avez suffisamment de m&eacute;moire. Certains plug-ins n&eacute;cessitent de 2 &agrave; 5 Mo de
m&eacute;moire suppl&eacute;mentaire pour fonctionner.
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
Insertion d’un contr&ocirc;le ActiveX
Vous pouvez ajouter un contr&ocirc;le ActiveX &agrave; votre page. Les contr&ocirc;les ActiveX (autrefois appel&eacute;s
commandes OLE) sont des composants r&eacute;utilisables, un peu comme des applications miniatures,
qui peuvent fonctionner comme des plug-ins de navigateurs. Ils fonctionnent dans Internet
Explorer sous Windows, mais pas sur Macintosh ni dans Netscape Navigator. L’objet ActiveX de
Dreamweaver vous permet de fournir les attributs et param&egrave;tres d’un contr&ocirc;le ActiveX charg&eacute; par
le navigateur du visiteur.
Pour ins&eacute;rer du contenu de contr&ocirc;le ActiveX :
1 Dans la fen&ecirc;tre de document, positionnez le curseur &agrave; l’emplacement o&ugrave; ins&eacute;rer le contenu et
proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che de d&eacute;filement du bouton
Support et s&eacute;lectionnez l’ic&ocirc;ne ActiveX.
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che de d&eacute;filement du bouton
Support et s&eacute;lectionnez l’ic&ocirc;ne ActiveX. Lorsque l’ic&ocirc;ne ActiveX s’affiche dans la barre
Ins&eacute;rer, vous pouvez la faire glisser jusqu’&agrave; la fen&ecirc;tre du document.
■ Choisissez Insertion &gt; M&eacute;dias &gt; ActiveX.
Une ic&ocirc;ne indique l’emplacement de la page o&ugrave; appara&icirc;tra le contr&ocirc;le ActiveX dans Internet
Explorer.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Insertion d’une applet Java
Vous pouvez ins&eacute;rer une applet Java dans un document HTML &agrave; l’aide de Dreamweaver. Java est
un langage de programmation qui permet de d&eacute;velopper des applications l&eacute;g&egrave;res (applets) pouvant
&ecirc;tre incorpor&eacute;es dans des pages Web.
Pour ins&eacute;rer une applet Java :
1 Dans la fen&ecirc;tre de document, placez le point d’insertion &agrave; l’endroit o&ugrave; vous souhaitez ins&eacute;rer
l’applet, puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, cliquez sur la fl&egrave;che de d&eacute;filement du bouton
Support et s&eacute;lectionnez l’ic&ocirc;ne Applet.
■ Choisissez Insertion &gt; M&eacute;dias &gt; Applet.
2 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez un fichier contenant une applet Java.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Utilisation de comportements pour contr&ocirc;ler les objets
multim&eacute;dias
Vous pouvez ajouter des comportements &agrave; votre page pour commencer ou arr&ecirc;ter la lecture de
divers objets multim&eacute;dia.
Contr&ocirc;ler Shockwave ou Flash permet de lire, d’arr&ecirc;ter, de rembobiner ou d’atteindre un cadre
dans une animation Shockwave ou Flash (voir Contr&ocirc;ler Shockwave ou Flash, page 392).
permet de jouer un son. Vous pouvez ainsi jouer un effet sonore d&egrave;s que l’utilisateur
survole un lien &agrave; l’aide de la souris (voir Lire le son, page 398).
Lire le son
Utilisation de comportements pour contr&ocirc;ler les objets multim&eacute;dias
381
V&eacute;rifier le plug-in permet de v&eacute;rifier si les visiteurs de votre site disposent du plug-in requis, puis
de les diriger vers diff&eacute;rentes URL, en fonction du r&eacute;sultat. Cela s’applique uniquement aux plugins de Netscape Navigator, car ce comportement ne v&eacute;rifie pas les contr&ocirc;les ActiveX. Pour plus
d’informations, voir V&eacute;rifier le plug-in, page 391.
382
Chapitre 17 : Ajout d’&eacute;l&eacute;ments audio, vid&eacute;o et interactifs
CHAPITRE 18
Utilisation des comportements JavaScript
Les comportements de Macromedia Dreamweaver MX 2004 ins&egrave;rent du code JavaScript dans les
documents pour permettre aux visiteurs d’une page Web de la modifier ou d’effectuer certaines
t&acirc;ches. Un comportement est la combinaison d’un &eacute;v&eacute;nement et d’une action d&eacute;clench&eacute;e par cet
&eacute;v&eacute;nement. Dans le panneau Comportements, vous pouvez ajouter un comportement &agrave; une page
en sp&eacute;cifiant une action, puis l’&eacute;v&eacute;nement qui d&eacute;clenche cette action.
Remarque : Le code de comportement est un code JavaScript c&ocirc;t&eacute; client, c’est-&agrave;-dire qu’il
s’ex&eacute;cute sur des navigateurs, mais pas sur des serveurs.
Les &eacute;v&eacute;nements sont en r&eacute;alit&eacute; des messages g&eacute;n&eacute;r&eacute;s par les navigateurs, indiquant qu’un
utilisateur a fait quelque chose sur votre page. Par exemple, lorsqu’un utilisateur place le pointeur
sur un lien, le navigateur g&eacute;n&egrave;re un &eacute;v&eacute;nement onMouseOver pour ce lien, puis il v&eacute;rifie s’il existe
un code JavaScript (sp&eacute;cifi&eacute; dans la page affich&eacute;e) qu’il est cens&eacute; appeler lorsqu’il g&eacute;n&egrave;re cet
&eacute;v&eacute;nement pour ce lien. Ces &eacute;v&eacute;nements sont d&eacute;finis pour diff&eacute;rents &eacute;l&eacute;ments de la page ; par
exemple, dans la plupart des navigateurs, onMouseOver et onClick sont des &eacute;v&eacute;nements associ&eacute;s &agrave;
des liens, tandis que onLoad est un &eacute;v&eacute;nement associ&eacute; &agrave; des images et &agrave; la section body du
document.
Une action consiste en un code JavaScript pr&eacute;-r&eacute;dig&eacute; qui effectue une t&acirc;che sp&eacute;cifique, comme
ouvrir une fen&ecirc;tre de navigateur, afficher ou masquer un calque, diffuser un son ou arr&ecirc;ter une
animation Macromedia Shockwave. Les actions propos&eacute;es dans Dreamweaver MX sont
soigneusement r&eacute;dig&eacute;es par les ing&eacute;nieurs Dreamweaver afin d’assurer une compatibilit&eacute; internavigateurs maximale.
Une fois que vous avez associ&eacute; un comportement &agrave; un &eacute;l&eacute;ment de la page, lorsque l’&eacute;v&eacute;nement
sp&eacute;cifi&eacute; a lieu pour cet &eacute;l&eacute;ment, le navigateur appelle l’action (le code JavaScript) associ&eacute;e &agrave; cet
&eacute;v&eacute;nement (les &eacute;v&eacute;nements disponibles pour d&eacute;clencher une action donn&eacute;e varient d’un
navigateur &agrave; l’autre). Par exemple, si vous associez l’action Message contextuel &agrave; un lien et
sp&eacute;cifiez que l’action sera d&eacute;clench&eacute;e par l’&eacute;v&eacute;nement onMouseOver, votre message s’affiche dans
une bo&icirc;te de dialogue lorsqu’un utilisateur pointe la souris sur ce lien dans le navigateur.
Un &eacute;v&eacute;nement unique peut d&eacute;clencher plusieurs actions diff&eacute;rentes et vous pouvez d&eacute;finir l’ordre
d’ex&eacute;cution de ces actions.
383
Dreamweaver MX 2004 propose environ une vingtaine d’actions de comportement ; des actions
suppl&eacute;mentaires sont disponibles sur le site Web de Macromedia Exchange ainsi que sur les sites
d’autres d&eacute;veloppeurs (voir T&eacute;l&eacute;chargement et installation de comportements cr&eacute;&eacute;s par des
d&eacute;veloppeurs tiers, page 388). Vous pouvez &eacute;galement &eacute;crire vos propres actions de comportement
si vous ma&icirc;trisez le langage JavaScript. Pour plus d’informations sur la r&eacute;daction d’actions de
comportement, voir l’aide d’Extension de Dreamweaver (Aide &gt; Extension de Dreamweaver).
Remarque : Les termes comportement et action appartiennent &agrave; la terminologie Dreamweaver et non
&agrave; la terminologie HTML. Du point de vue du navigateur, une action est simplement un &eacute;l&eacute;ment de
code JavaScript.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
Utilisation du panneau Comportements, page 384
A propos des &eacute;v&eacute;nements, page 384
Application d’un comportement, page 385
Association d’un comportement &agrave; du texte, page 386
Modification d’un comportement, page 387
Actualisation d’un comportement, page 387
Cr&eacute;ation de nouvelles actions, page 388
T&eacute;l&eacute;chargement et installation de comportements cr&eacute;&eacute;s par des d&eacute;veloppeurs tiers, page 388
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver, page 388
Utilisation du panneau Comportements
Utilisez le panneau Comportements pour associer des comportements &agrave; des &eacute;l&eacute;ments de la page
(plus pr&eacute;cis&eacute;ment aux balises) et pour modifier les param&egrave;tres des comportements pr&eacute;c&eacute;demment
associ&eacute;s.
Pour ouvrir le panneau Comportement :
• Choisissez Fen&ecirc;tre &gt; Comportements.
Les comportements d&eacute;j&agrave; associ&eacute;s &agrave; l’&eacute;l&eacute;ment de la page actuellement s&eacute;lectionn&eacute;e sont r&eacute;pertori&eacute;s
dans la liste de comportements (la zone principale du panneau), &eacute;tablie par &eacute;v&eacute;nement et par
ordre alphab&eacute;tique. Si un m&ecirc;me &eacute;v&eacute;nement est associ&eacute; &agrave; plusieurs actions, ces derni&egrave;res sont
ex&eacute;cut&eacute;es dans l’ordre dans lequel elles apparaissent dans la liste. Si aucun comportement
n’appara&icirc;t dans la liste, cela signifie qu’aucun comportement n’est associ&eacute; &agrave; l’&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
Pour plus d’informations sur les options du panneau Comportements, choisissez Aide dans le
menu Options qui se trouve dans la barre de titre du groupe de panneaux.
A propos des &eacute;v&eacute;nements
Chaque navigateur propose une s&eacute;rie d’&eacute;v&eacute;nements que vous pouvez associer avec les actions
r&eacute;pertori&eacute;es dans le menu contextuel Actions (+) du panneau Comportements. Lorsqu’un visiteur
de votre page Web d&eacute;clenche une action interactive avec celle-ci, en cliquant sur une image par
exemple, le navigateur g&eacute;n&egrave;re un &eacute;v&eacute;nement. Cet &eacute;v&eacute;nement permet d’appeler une fonction
JavaScript ex&eacute;cutant une action quelconque. Certains &eacute;v&eacute;nements peuvent aussi &ecirc;tre g&eacute;n&eacute;r&eacute;s sans
interaction de la part de l’utilisateur, par exemple lorsque vous configurez la page pour qu’elle se
recharge automatiquement toutes les 10 secondes. Dreamweaver int&egrave;gre un certain nombre
d’actions courantes que vous pouvez d&eacute;clencher &agrave; l’aide de ces &eacute;v&eacute;nements.
384
Chapitre 18 : Utilisation des comportements JavaScript
Pour obtenir les noms et descriptions des &eacute;v&eacute;nements fournis par chacun des navigateurs, voir le
centre de support de Dreamweaver &agrave; l’adresse http://www.macromedia.com/go/
dreamweaver_support_fr/.
Diff&eacute;rents &eacute;v&eacute;nements apparaissent dans le menu contextuel Ev&eacute;nements, selon l’objet s&eacute;lectionn&eacute;
et les navigateurs sp&eacute;cifi&eacute;s dans le menu d&eacute;roulant Afficher les &eacute;v&eacute;nements pour. Pour savoir quels
sont les &eacute;v&eacute;nements pris en charge par un navigateur sp&eacute;cifique pour un &eacute;l&eacute;ment de page donn&eacute;,
ins&eacute;rez l’&eacute;l&eacute;ment de la page dans votre document et associez-lui un comportement, puis reportezvous au menu contextuel Ev&eacute;nements dans le panneau Comportements. Certains &eacute;v&eacute;nements
peuvent appara&icirc;tre en gris&eacute; (d&eacute;sactiv&eacute;s) si les objets pertinents n’existent pas encore dans la page
ou si l’objet s&eacute;lectionn&eacute; ne peut pas recevoir d’&eacute;v&eacute;nements. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s ne s’affichent
pas, v&eacute;rifiez que vous avez s&eacute;lectionn&eacute; l’objet correct ou modifiez les navigateurs cibles dans le
menu d&eacute;roulant Afficher les &eacute;v&eacute;nements pour.
Si vous associez un comportement &agrave; une image, certains &eacute;v&eacute;nements (par exemple onMouseOver)
apparaissent entre parenth&egrave;ses. Ces &eacute;v&eacute;nements ne sont disponibles que pour des liens. Lorsque
vous en s&eacute;lectionnez un, Dreamweaver entoure l’image d’une balise a pour d&eacute;finir un lien nul,
repr&eacute;sent&eacute; par javascript:; dans la zone de texte Lien de l’inspecteur de propri&eacute;t&eacute;s. Vous
pouvez modifier la valeur de ce lien pour le transformer en v&eacute;ritable lien vers une autre page, mais
si vous effacez le lien JavaScript sans le remplacer par un autre lien, vous supprimerez le
comportement.
Pour savoir pr&eacute;cis&eacute;ment quelles balises peuvent &ecirc;tre utilis&eacute;es avec un &eacute;v&eacute;nement donn&eacute; dans un
navigateur donn&eacute;, recherchez l’&eacute;v&eacute;nement dans l’un des fichiers de votre dossier Dreamweaver/
Configuration/Behaviors/Events.
Application d’un comportement
Vous pouvez associer des comportements au document entier (&agrave; la balise body) ou &agrave; des liens, des
images, des &eacute;l&eacute;ments de formulaire ou divers autres &eacute;l&eacute;ments HTML.
Le navigateur cible que vous choisissez d&eacute;termine les &eacute;v&eacute;nements pris en charge pour un &eacute;l&eacute;ment
donn&eacute;. Internet Explorer 4.0, par exemple, propose davantage d’&eacute;v&eacute;nements pour chaque &eacute;l&eacute;ment
que Netscape Navigator 4.0 ou que n’importe quel navigateur de la version 3.0.
Remarque : Vous ne pouvez pas associer un comportement &agrave; un texte brut. Pour plus
d’informations, voir Association d’un comportement &agrave; du texte, page 386.
Vous pouvez attribuer plusieurs actions &agrave; chaque &eacute;v&eacute;nement. Les actions sont ex&eacute;cut&eacute;es dans
l’ordre dans lequel elles sont r&eacute;pertori&eacute;es dans la colonne Actions du panneau Comportements.
Pour toute information sur la modification de l’ordre des actions, voir Modification d’un
comportement, page 387.
Pour associer un comportement :
1 S&eacute;lectionnez un &eacute;l&eacute;ment dans la page, tel qu’une image ou un lien.
Pour associer un comportement &agrave; l’ensemble de la page, cliquez sur la balise &lt;body&gt; dans le
s&eacute;lecteur de balises, situ&eacute; dans le coin inf&eacute;rieur gauche de la fen&ecirc;tre de document.
2 Choisissez Fen&ecirc;tre &gt; Comportements pour ouvrir le panneau Comportements.
3 Cliquez sur le bouton plus (+) et choisissez une action dans le menu contextuel Actions.
Application d’un comportement
385
Vous ne pouvez pas choisir les actions qui apparaissent gris&eacute;es dans le menu. Ces actions
peuvent &ecirc;tre gris&eacute;es quand un objet obligatoire n’existe pas dans le document actif Par exemple,
l’action Contr&ocirc;ler Shockwave ou Flash s’affiche en gris&eacute; si le document ne contient pas de
fichiers SWF Macromedia Flash ou Shockwave. Si aucun &eacute;v&eacute;nement n’est disponible pour
l’objet s&eacute;lectionn&eacute;, toutes les actions s’affichent en gris&eacute;.
Lorsque vous choisissez une action, une bo&icirc;te de dialogue s’affiche avec les param&egrave;tres et les
instructions pour cette action.
4 Saisissez les param&egrave;tres pour l’action et cliquez sur OK.
Toutes les actions propos&eacute;es dans Dreamweaver fonctionnent dans les versions 4.0 ou
ult&eacute;rieures des navigateurs. Certaines d’entre elles sont refus&eacute;es par les navigateurs moins
r&eacute;cents. Voir Utilisation des actions de comportement livr&eacute;es avec Dreamweaver, page 388.
5 L’&eacute;v&eacute;nement par d&eacute;faut qui d&eacute;clenchera l’action appara&icirc;t dans la colonne Ev&eacute;nements. S’il ne
s’agit pas de l’&eacute;v&eacute;nement que vous d&eacute;sirez utiliser, s&eacute;lectionnez-en un autre dans le menu
contextuel Ev&eacute;nements (pour ouvrir le menu contextuel Ev&eacute;nements, s&eacute;lectionnez un
&eacute;v&eacute;nement ou une action dans le panneau Comportements, puis cliquez sur la fl&egrave;che noire
point&eacute;e vers le bas qui appara&icirc;t entre le nom de l’&eacute;v&eacute;nement et le nom de l’action).
Association d’un comportement &agrave; du texte
Vous ne pouvez pas associer un comportement &agrave; un texte brut. Les balises telles que p et span ne
g&eacute;n&eacute;rant pas d’&eacute;v&eacute;nements dans les navigateurs, il n’est donc pas possible de d&eacute;clencher une
action &agrave; partir de ces balises.
Toutefois, vous pouvez associer un comportement &agrave; un lien. La mani&egrave;re la plus simple d’associer
un comportement &agrave; du texte consiste &agrave; ajouter un lien nul (qui ne correspond &agrave; rien) au texte,
puis &agrave; associer le comportement au lien. Dans ce cas, le texte s’affiche en tant que lien (vous
pouvez modifier la couleur du lien et supprimer le soulignement pour qu’il ne ressemble plus &agrave; un
lien, cependant les utilisateurs risquent de ne pas se rendre compte qu’ils peuvent cliquer sur cet
&eacute;l&eacute;ment).
Pour associer un comportement au texte s&eacute;lectionn&eacute; :
1 Dans l’inspecteur de propri&eacute;t&eacute;s, entrez javascript:; dans la zone de texte Lien. N’oubliez pas
les deux points (:) et le point-virgule (;).
Remarque : Vous pouvez &eacute;galement utiliser un signe di&egrave;se (#) dans la zone de texte Lien. Dans ce
cas, lorsqu’un utilisateur clique sur le lien, le navigateur revient en haut de la page. Le fait de cliquer
sur le lien nul JavaScript n’a aucun effet sur la page et il est donc g&eacute;n&eacute;ralement pr&eacute;f&eacute;rable d’utiliser
cette approche JavaScript.
2 Lorsque le texte est s&eacute;lectionn&eacute;, ouvrez le panneau Comportements (Fen&ecirc;tre &gt;
Comportements).
3 S&eacute;lectionnez une action dans le menu contextuel Actions, entrez les param&egrave;tres de l’action, puis
choisissez un &eacute;v&eacute;nement pour la d&eacute;clencher. Pour plus d’informations, voir Application d’un
comportement, page 385.
Pour modifier l’apparence du texte li&eacute; de sorte qu’il ne ressemble plus &agrave; un lien :
1 Choisissez Affichage &gt; Code pour activer le mode Code de la fen&ecirc;tre de document.
2 Trouvez le lien.
3 Dans la balise a href du lien, ins&eacute;rez l’attribut : style=&quot;text-decoration:none; color:black&quot;.
Ce param&egrave;tre d&eacute;sactive le soulignement et d&eacute;finit la couleur du texte sur noir (bien s&ucirc;r, si le
texte environnant est d’une couleur diff&eacute;rente, utilisez cette couleur au lieu du noir).
386
Chapitre 18 : Utilisation des comportements JavaScript
Notez que cet attribut est un style CSS incorpor&eacute;. Tout style CSS incorpor&eacute; &agrave; un lien unique
remplace les autres styles CSS appliqu&eacute;s &agrave; ce dernier, mais il n’a aucun impact en dehors de ce
lien. Pour modifier l’apparence du texte li&eacute; dans toute une page ou sur votre site entier, utilisez
les styles CSS pour cr&eacute;er un nouveau style pour les liens. Pour plus d’informations, voir
Chapitre 13, Insertion et mise en forme de texte, page 287.
Modification d’un comportement
Une fois le comportement associ&eacute;, vous pouvez modifier l’&eacute;v&eacute;nement qui d&eacute;clenche l’action,
ajouter ou supprimer des actions et modifier les param&egrave;tres des actions.
Pour modifier un comportement :
1 S&eacute;lectionnez un objet auquel un comportement a &eacute;t&eacute; associ&eacute;.
2 Choisissez Fen&ecirc;tre &gt; Comportements pour ouvrir le panneau Comportements.
Les comportements sont class&eacute;s dans le panneau par ordre alphab&eacute;tique des &eacute;v&eacute;nements. Si un
m&ecirc;me &eacute;v&eacute;nement dispose de plusieurs actions, ces derni&egrave;res apparaissent dans l’ordre
chronologique d’ex&eacute;cution.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Pour modifier les param&egrave;tres d’une action, double-cliquez sur le nom du comportement ou
s&eacute;lectionnez-le et appuyez sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh), modifiez
les param&egrave;tres dans la bo&icirc;te de dialogue, puis cliquez sur OK.
■ Pour modifier l’ordre d’apparition des actions pour un &eacute;v&eacute;nement donn&eacute;, s&eacute;lectionnez une
action et cliquez sur la touche directionnelle Haut ou Bas. Vous pouvez &eacute;galement
s&eacute;lectionner l’action, puis la copier et la coller &agrave; l’emplacement de votre choix parmi les
autres actions.
■ Pour supprimer un comportement, s&eacute;lectionnez-le et cliquez sur le signe moins (-) ou
appuyez sur Supprimer.
Actualisation d’un comportement
Si vos pages contiennent des comportements cr&eacute;&eacute;s avec Dreamweaver 1 ou Dreamweaver 2, ces
comportements ne sont pas automatiquement actualis&eacute;s lorsque vous ouvrez les pages dans la
version courante de Dreamweaver. Toutefois, quand vous actualisez une occurrence d’un
comportement dans une page (en appliquant la proc&eacute;dure d&eacute;taill&eacute;e dans cette section), toutes les
autres occurrences du comportement pr&eacute;sentes dans la page sont &eacute;galement mises &agrave; jour. Les
comportements cr&eacute;&eacute;s avec Dreamweaver 3 fonctionnent dans Dreamweaver 4 sans devoir &ecirc;tre
modifi&eacute;s.
Remarque : Comme indiqu&eacute; ci-dessus, lorsque vous actualisez une occurrence de comportement
dans une page, toutes les autres occurrences de ce comportement dans la page sont &eacute;galement
actualis&eacute;es. Vous devez n&eacute;anmoins mettre &agrave; jour les comportements de chaque page de votre site.
Pour actualiser un comportement dans une page :
1 S&eacute;lectionnez l’&eacute;l&eacute;ment auquel est attach&eacute; le comportement.
2 Ouvrez le panneau Comportements
3 Double-cliquez sur le comportement.
4 Cliquez sur OK dans la bo&icirc;te de dialogue du comportement.
Toutes les occurrences de ce comportement sont actualis&eacute;es.
Actualisation d’un comportement
387
Cr&eacute;ation de nouvelles actions
Les actions consistent en un code JavaScript et HTML. Si vous ma&icirc;trisez JavaScript, vous pouvez
r&eacute;diger de nouvelles actions et les ajouter dans le menu contextuel Actions du panneau
Comportements. Pour plus d’informations, voir Extension de Dreamweaver.
T&eacute;l&eacute;chargement et installation de comportements cr&eacute;&eacute;s par des
d&eacute;veloppeurs tiers
L’une des fonctions les plus utiles de Dreamweaver est son extensibilit&eacute;, c’est-&agrave;-dire qu’il offre aux
utilisateurs ma&icirc;trisant JavaScript la possibilit&eacute; de r&eacute;diger du code JavaScript qui &eacute;tend les capacit&eacute;s
de Dreamweaver. Bon nombre de ces utilisateurs ont choisi de partager leurs extensions avec
d’autres utilisateurs en les pla&ccedil;ant sur le site Web de Macromedia Exchange pour Dreamweaver
(http://www.macromedia.com/go/dreamweaver_exchange_fr/).
Pour t&eacute;l&eacute;charger et installer de nouveaux comportements &agrave; partir du site Macromedia
Exchange :
1 Ouvrez le panneau Comportements et choisissez l’option T&eacute;l&eacute;charger d’autres comportements
dans le menu contextuel Actions (+).
Votre navigateur principal s’ouvre sur le site d’Exchange (vous devez &ecirc;tre connect&eacute; &agrave; Internet
pour t&eacute;l&eacute;charger des comportements).
2 Localisez les progiciels.
3 T&eacute;l&eacute;chargez et installez le progiciel d’extension souhait&eacute;.
Pour plus d’informations, voir Ajout d’extensions dans Dreamweaver, page 61.
Utilisation des actions de comportement livr&eacute;es avec
Dreamweaver
Les actions de comportement incluses dans Dreamweaver ont &eacute;t&eacute; con&ccedil;ues pour fonctionner avec
les versions 4.0 et ult&eacute;rieures de Netscape Navigator et Internet Explorer. La plupart des actions
de comportement fonctionnent &eacute;galement dans Netscape Navigator version 3.0 et ult&eacute;rieures (en
revanche, les comportements associ&eacute;s aux calques ne fonctionnent pas dans Netscape
Navigator 3.0). La plupart d’entre elles &eacute;chouent sans que l’utilisateur en soit inform&eacute; dans
Internet Explorer version 3.0.
Remarque : Les actions Dreamweaver ont &eacute;t&eacute; r&eacute;dig&eacute;es avec soin afin de fonctionner avec le plus
grand nombre possible de navigateurs. Si vous supprimez manuellement le code d’une action
Dreamweaver ou si vous le remplacez par votre propre code, vous risquez de perdre la compatibilit&eacute;
inter-navigateurs.
Bien que les actions Dreamweaver aient &eacute;t&eacute; r&eacute;dig&eacute;es pour augmenter la compatibilit&eacute; internavigateurs, certaines actions ne fonctionnent pas avec les navigateurs plus anciens. De m&ecirc;me,
certains navigateurs ne prennent pas en charge JavaScript et de nombreuses personnes d&eacute;sactivent
JavaScript sur leur navigateur lorsqu’ils explorent la Toile. Pour optimiser les r&eacute;sultats inter-platesformes, fournissez d’autres interfaces contenues dans des balises noscript afin que votre site reste
accessible aux personnes qui n’utilisent pas JavaScript.
388
Chapitre 18 : Utilisation des comportements JavaScript
Appel JavaScript
L’action Appel JavaScript vous permet d’utiliser le panneau Comportements pour sp&eacute;cifier qu’une
fonction ou une ligne personnalis&eacute;e de code JavaScript doit &ecirc;tre ex&eacute;cut&eacute;e lorsqu’un &eacute;v&eacute;nement se
produit (vous pouvez r&eacute;diger le code JavaScript vous-m&ecirc;me ou utiliser le code fourni gratuitement
par plusieurs biblioth&egrave;ques JavaScript sur Internet).
Pour utiliser l’action Appel JavaScript :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Appel JavaScript dans le menu contextuel Actions.
3 Tapez le code JavaScript &agrave; ex&eacute;cuter ou le nom de la fonction.
Par exemple, pour cr&eacute;er un bouton &laquo; Retour &raquo; vous pouvez saisir if (history.length &gt;
0){history.back()}. Si vous avez encapsul&eacute; votre code dans une fonction, indiquez simplement
le nom de la fonction (par exemple, hogback()).
4 Cliquez sur OK.
5 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Changer la propri&eacute;t&eacute;
Utilisez cette action pour modifier la valeur d’une des propri&eacute;t&eacute;s d’un objet (par exemple, la
couleur d’arri&egrave;re-plan d’un calque ou l’action d’un formulaire). C’est le navigateur qui d&eacute;termine
quelles propri&eacute;t&eacute;s sont modifiables. Beaucoup plus de propri&eacute;t&eacute;s peuvent &ecirc;tre modifi&eacute;es par ce
comportement dans Internet Explorer 4.0 que dans Internet Explorer 3.0 ou Netscape
Navigator 3.0 ou 4.0. Par exemple, vous pouvez modifier de fa&ccedil;on dynamique la couleur
d’arri&egrave;re-plan d’un calque.
Remarque : N’utilisez cette action que si vous &ecirc;tes expert en HTML et en JavaScript.
Pour utiliser l’action Changer la propri&eacute;t&eacute; :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Changer la propri&eacute;t&eacute; dans le menu contextuel
Actions.
3 Dans le menu d&eacute;roulant Type d’objet, s&eacute;lectionnez le type d’objet dont vous souhaitez modifier
une propri&eacute;t&eacute;.
Tous les objets nomm&eacute;s du type d’objet s&eacute;lectionn&eacute; s’affichent dans le menu d&eacute;roulant Objet
nomm&eacute;.
4 S&eacute;lectionnez un objet dans le menu d&eacute;roulant Objet nomm&eacute;.
5 Choisissez ensuite une propri&eacute;t&eacute; dans le menu d&eacute;roulant Propri&eacute;t&eacute; ou tapez le nom de la
propri&eacute;t&eacute; dans la zone de texte.
Pour savoir quelles propri&eacute;t&eacute;s peuvent &ecirc;tre modifi&eacute;es pour chaque navigateur, choisissez
diff&eacute;rents navigateurs ou diff&eacute;rentes versions de navigateurs dans le menu d&eacute;roulant
Navigateur. Si vous tapez directement le nom d’une propri&eacute;t&eacute;, veillez &agrave; utiliser le nom
JavaScript exact (attention, les propri&eacute;t&eacute;s JavaScript tiennent compte des majuscules et
minuscules).
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
389
6 Indiquez la nouvelle valeur de la propri&eacute;t&eacute; dans la zone de texte Nouvelle valeur et cliquez sur
OK.
7 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;. (Lorsque cet &eacute;v&eacute;nement se
produit, l’action est ex&eacute;cut&eacute;e et la propri&eacute;t&eacute; est modifi&eacute;e.)
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
V&eacute;rifier le navigateur
Utilisez cette action pour aiguiller les visiteurs vers des pages diff&eacute;rentes selon le mod&egrave;le et la
version de leur navigateur. Par exemple, vous pouvez d&eacute;cider que les utilisateurs de Netscape
Navigator 4.0 iront sur telle page, les utilisateurs d’Internet Explorer 4.0 ou 5.0 sur telle autre, et
les utilisateurs d’un autre type de navigateur resteront sur la page en cours.
Il est utile d’associer ce comportement &agrave; la balise body d’une page qui est compatible avec presque
tous les navigateurs (et qui n’utilise pas d’autre JavaScript) ; ainsi, les utilisateurs de la page qui ont
d&eacute;sactiv&eacute; JavaScript verront quand m&ecirc;me quelque chose.
Une autre option consiste &agrave; associer ce comportement &agrave; un lien nul (tel que &lt;a
pour que l’action d&eacute;termine &agrave; quelle page le lien renvoie, selon le
mod&egrave;le et la version du navigateur du visiteur.
href=&quot;javascript:;&quot;&gt;)
Pour utiliser l’action V&eacute;rifier le navigateur :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez V&eacute;rifier le navigateur dans le menu contextuel
3
4
5
6
7
8
390
Actions.
Indiquez comment vous souhaitez distinguer les visiteurs : par mod&egrave;le de navigateur, par version
ou les deux.
Par exemple, souhaitez-vous que tous les utilisateurs de la version 4.0 d’un navigateur, quel que
soit son &eacute;diteur, voient telle page, et que tous les utilisateurs d’une marque ou d’une version
diff&eacute;rentes en voient une autre ? Ou encore que les utilisateurs de Netscape Navigator voient
une page et que les utilisateurs de Microsoft Internet Explorer (IE) en voient une autre ?
Sp&eacute;cifiez une version de Netscape Navigator.
Dans les menus contextuels adjacents, s&eacute;lectionnez les options respectives dans le cas o&ugrave; la
version de Netscape Navigator est celle que vous avez sp&eacute;cifi&eacute;e (ou une version plus r&eacute;cente) et
dans le cas contraire.
Les options sont Atteindre l’URL, Atteindre l’URL sec. et Rester sur cette page.
Sp&eacute;cifiez une version de Microsoft Internet Explorer.
Dans les menus contextuels adjacents, s&eacute;lectionnez les options respectives dans le cas o&ugrave; la
version d’Internet Explorer est celle que vous avez sp&eacute;cifi&eacute;e (ou une version plus r&eacute;cente) et dans
le cas contraire.
Les options sont Atteindre l’URL, Atteindre l’URL sec. et Rester sur cette page.
Dans le menu d&eacute;roulant Autres navigateurs, s&eacute;lectionnez l’action qui sera ex&eacute;cut&eacute;e si le
navigateur n’est ni Netscape Navigator, ni Internet Explorer (par exemple, l’utilisateur peut
utiliser un navigateur bas&eacute; sur du texte tel que Lynx).
Chapitre 18 : Utilisation des comportements JavaScript
La meilleure option est Rester sur cette page pour les navigateurs autres que Netscape
Navigator et Internet Explorer, car la plupart ne prennent pas en charge JavaScript – et s’ils ne
peuvent pas g&eacute;rer ce comportement, ils resteront sur cette page de toute fa&ccedil;on.
9 Entrez le noms de fichier et le chemin d’acc&egrave;s &agrave; l’URL et &agrave; l’URL secondaire dans les zones de
texte situ&eacute;es en bas de la bo&icirc;te de dialogue. Si vous indiquez une URL distante, vous devez faire
pr&eacute;c&eacute;der l’adresse www du pr&eacute;fixe http://.
10 Cliquez sur OK.
11 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour. Le but de ce comportement &eacute;tant de v&eacute;rifier les diff&eacute;rentes versions du
navigateur, il est pr&eacute;f&eacute;rable d’opter pour un &eacute;v&eacute;nement qui fonctionne avec les versions 3.0 et
ult&eacute;rieures des navigateurs.
V&eacute;rifier le plug-in
Utilisez cette action pour envoyer les visiteurs sur des pages diff&eacute;rentes selon que le plug-in
sp&eacute;cifi&eacute; est install&eacute; ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s’ils
poss&egrave;dent Shockwave, et sur une autre dans le cas contraire.
Remarque : Il est impossible de d&eacute;tecter des plug-ins sp&eacute;cifiques dans Microsoft Internet Explorer (IE)
&agrave; l’aide de JavaScript. Toutefois, si vous s&eacute;lectionnez les plug-ins Flash ou Director, le code VBScript
appropri&eacute; sera automatiquement ajout&eacute; &agrave; votre page pour les d&eacute;tecter dans Internet Explorer sous
Windows. Il est impossible de d&eacute;tecter les plug-ins dans Internet Explorer sur Macintosh.
Pour utiliser l’action V&eacute;rifier le plug-in :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et choisissez V&eacute;rifier le Plug-in dans le menu contextuel Actions.
3 S&eacute;lectionnez un plug-in dans le menu d&eacute;roulant Plug-in, ou cliquez sur Entr&eacute;e et tapez le nom
exact du plug-in dans la zone de texte adjacente.
Vous devez utiliser le nom exact du plug-in, tel qu’il appara&icirc;t en gras sur la page A propos des
plug-ins dans Netscape Navigator (sous Windows, choisissez la commande Aide &gt; A propos
des plug-ins. Sur Macintosh, choisissez A propos des plug-ins dans le menu Pomme).
4 Dans la zone de texte Si trouv&eacute;, aller &agrave; l’URL, sp&eacute;cifiez l’URL destin&eacute;e aux utilisateurs qui
disposent du plug-in.
Si vous indiquez une URL distante, vous devez faire pr&eacute;c&eacute;der l’adresse www du pr&eacute;fixe http://.
Pour que les utilisateurs disposant du plug-in restent sur la m&ecirc;me page, laissez ce champ vide.
5 Dans la zone de texte Sinon, aller &agrave; l’URL, indiquez une autre URL pour les visiteurs qui ne
disposent pas du plug-in.
Pour que les utilisateurs ne disposant pas du plug-in restent sur la m&ecirc;me page, laissez ce champ
vide.
6 Il est impossible de d&eacute;tecter les plug-ins dans Internet Explorer sur Macintosh, et la plupart des
plug-ins ne peuvent pas &ecirc;tre d&eacute;tect&eacute;s dans Internet Explorer sous Windows. Par d&eacute;faut, lorsque
la d&eacute;tection est impossible, l’utilisateur est envoy&eacute; &agrave; l’URL indiqu&eacute;e dans la zone de texte Sinon.
Pour que l’utilisateur soit envoy&eacute; vers la premi&egrave;re URL (Si trouv&eacute;), activez la case &agrave; cocher
Toujours aller &agrave; la premi&egrave;re URL si la d&eacute;tection n’est pas possible. Lorsqu’elle est s&eacute;lectionn&eacute;e,
cette option signifie &laquo; on suppose a priori que l’utilisateur poss&egrave;de le plug-in, sauf si le navigateur
indique explicitement que ce n’est pas le cas &raquo;.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
391
En g&eacute;n&eacute;ral, si le contenu du plug-in est un &eacute;l&eacute;ment essentiel de votre page, activez l’option
&laquo; Toujours aller &agrave; la premi&egrave;re URL si la d&eacute;tection n’est pas possible &raquo;. Le plus souvent, les
utilisateurs ne disposant pas de ce plug-in se verront proposer de le t&eacute;l&eacute;charger. Si le contenu
du plug-in n’est pas un &eacute;l&eacute;ment essentiel de votre page, laissez cette option d&eacute;sactiv&eacute;e.
Cette option ne concerne qu’Internet Explorer ; Netscape Navigator d&eacute;tecte les plug-ins.
7 Cliquez sur OK.
8 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Contr&ocirc;ler Shockwave ou Flash
Utilisez cette fonction pour diffuser, arr&ecirc;ter ou rembobiner une animation Shockwave ou Flash ou
pour aller &agrave; une image pr&eacute;cise de cette animation. Pour utiliser l’action Contr&ocirc;ler Shockwave ou
Flash :
1 Choisissez, selon le cas, Insertion &gt; M&eacute;dias &gt; Shockwave ou Insertion &gt; M&eacute;dias &gt; Flash pour
2
3
4
5
6
7
8
9
ins&eacute;rer un fichier Shockwave ou Flash SWF.
Choisissez Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s et entrez un nom pour l’animation dans la zone de texte situ&eacute;e
en haut &agrave; gauche (&agrave; c&ocirc;t&eacute; de l’ic&ocirc;ne Shockwave ou Flash). Vous devez nommer l’animation pour
la contr&ocirc;ler avec l’action Contr&ocirc;ler Shockwave ou Flash.
S&eacute;lectionnez l’&eacute;l&eacute;ment &agrave; utiliser pour contr&ocirc;ler l’animation Shockwave ou Flash. Par exemple,
si vous disposez de l’image d’un bouton &laquo; Lecture &raquo; &agrave; utiliser pour diffuser l’animation,
s&eacute;lectionnez cette image.
Ouvrez le panneau Comportements (Fen&ecirc;tre &gt; Comportements).
Cliquez sur le bouton plus (+) et choisissez Contr&ocirc;ler Shockwave ou Flash dans le menu
contextuel Actions.
Une bo&icirc;te de dialogue de param&egrave;tres appara&icirc;t.
S&eacute;lectionnez une animation dans le menu d&eacute;roulant Animation.
Dreamweaver r&eacute;pertorie automatiquement les noms de toutes les animations Shockwave et
Flash du document actif (en particulier, Dreamweaver &eacute;tablit une liste des animations ayant
une extension de fichier .dcr, .dir, .swf ou .spl se trouvant dans les balises object ou embed).
Choisissez l’action de contr&ocirc;le de l’animation d&eacute;sir&eacute;e : Jouer, Arr&ecirc;ter, Rembobiner ou Atteindre
l’image indiqu&eacute;e dans l’animation. L’option Jouer diffuse l’animation en commen&ccedil;ant par
l’image o&ugrave; l’action a lieu.
Cliquez sur OK.
V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, modifiez le navigateur cible dans le sous-menu Afficher les &eacute;v&eacute;nements
pour du menu Ev&eacute;nements.
D&eacute;placement de calque
Cette action permet &agrave; l’utilisateur de d&eacute;placer un calque. Utilisez cette action pour cr&eacute;er des
puzzles, des contr&ocirc;les de d&eacute;placement et autres &eacute;l&eacute;ments mobiles de l’interface.
392
Chapitre 18 : Utilisation des comportements JavaScript
Vous pouvez sp&eacute;cifier la direction vers laquelle l’utilisateur peut faire glisser le calque
(horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l’utilisateur
doit faire glisser le calque, si ce dernier doit &ecirc;tre aimant&eacute; par la cible ou non lorsqu’il arrive &agrave;
moins d’un certain nombre de pixels de la cible, l’action &agrave; d&eacute;clencher lorsque le calque touche la
cible, etc.
L’action D&eacute;placement de calque devant &ecirc;tre appel&eacute;e avant que le calque ne puisse &ecirc;tre d&eacute;plac&eacute; par
l’utilisateur, assurez-vous que l’&eacute;v&eacute;nement qui d&eacute;clenche l’action se produit avant que l’utilisateur
ne tente de faire glisser le calque. Le mieux est d’associer cette action &agrave; l’objet body (&agrave; l’aide de
l’&eacute;v&eacute;nement onLoad), mais vous pouvez &eacute;galement l’associer &agrave; un lien remplissant la totalit&eacute; du
calque (par exemple un lien autour d’une image), &agrave; l’aide de l’&eacute;v&eacute;nement onMouseOver.
Pour utiliser l’action D&eacute;placement de calque :
1 Choisissez Insertion &gt; Calque ou cliquez sur le bouton Dessiner un calque de la barre Ins&eacute;rer,
2
3
4
5
6
7
8
puis dessinez un calque dans le mode Cr&eacute;ation de la fen&ecirc;tre de document.
S&eacute;lectionnez la balise body en cliquant sur &lt;body&gt; dans le s&eacute;lecteur de balises situ&eacute; au bas de la
fen&ecirc;tre de document.
Ouvrez le panneau Comportements.
Cliquez sur le bouton plus (+) et s&eacute;lectionnez D&eacute;placement de calque dans le menu contextuel
Actions.
Si cette action n’est pas disponible, un calque est probablement s&eacute;lectionn&eacute;. Etant donn&eacute; que
les calques ne prennent pas en compte les &eacute;v&eacute;nements dans les navigateurs 4.0, vous devez
s&eacute;lectionner un autre objet (la balise body ou un lien (balise a) par exemple) ou remplacer le
navigateur cible par Internet Explorer 4.0 dans le menu d&eacute;roulant Afficher les &eacute;v&eacute;nements
pour.
Dans le menu d&eacute;roulant Calque, s&eacute;lectionnez le calque que vous voulez rendre d&eacute;pla&ccedil;able.
Dans le menu d&eacute;roulant Mouvement, s&eacute;lectionnez Contraint ou Sans contrainte.
Les mouvements sans contrainte sont adapt&eacute;s aux puzzles et aux autres jeux &agrave; base de glisserd&eacute;placer. Pour les contr&ocirc;les de d&eacute;placement et les objets mobiles (tiroirs, rideaux et stores),
choisissez un mouvement contraint.
Pour la restriction de mouvement, indiquez les valeurs de d&eacute;placement admises (en pixels) dans
les zones de texte Haut, Bas, Gauche et Droite.
Ces valeurs sont relatives &agrave; la position de d&eacute;part du calque. Pour restreindre les d&eacute;placements &agrave;
l’int&eacute;rieur d’une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de
texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour
Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement
horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.
Indiquez les coordonn&eacute;es (exprim&eacute;es en pixels) de la cible de d&eacute;p&ocirc;t dans les zones de texte
Gauche et Haut.
La cible de d&eacute;p&ocirc;t est le point sur lequel vous voulez que l’utilisateur &laquo; d&eacute;pose &raquo; le calque. Un
calque est consid&eacute;r&eacute; comme ayant atteint la cible de d&eacute;p&ocirc;t lorsque ses coordonn&eacute;es d’origine
(en haut &agrave; gauche) correspondent aux valeurs indiqu&eacute;es dans les zones de texte Gauche et
Haut. Ces coordonn&eacute;es sont relatives &agrave; l’angle sup&eacute;rieur gauche de la fen&ecirc;tre du navigateur.
Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec
les coordonn&eacute;es actuelles du calque.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
393
9 Entrez une valeur (exprim&eacute;e en pixels) dans la zone de texte Aligner si dans pour d&eacute;terminer la
distance minimale &agrave; laquelle le visiteur doit approcher le calque de la cible pour que le calque se
place automatiquement sur celle-ci.
Les valeurs importantes permettent &agrave; l’utilisateur de trouver plus facilement la cible de d&eacute;p&ocirc;t.
10 Pour des puzzles simples et des d&eacute;filements d’images, vous pouvez vous en tenir l&agrave;. Pour d&eacute;finir
la poign&eacute;e de d&eacute;placement du calque, suivre le mouvement du calque au cours de son
d&eacute;placement et d&eacute;clencher une action lorsqu’il est d&eacute;pos&eacute;, cliquez sur l’onglet Avanc&eacute;.
11 Pour sp&eacute;cifier que l’utilisateur doit cliquer dans une zone particuli&egrave;re du calque pour pouvoir le
d&eacute;placer, s&eacute;lectionnez Zone dans le calque dans le menu d&eacute;roulant Poign&eacute;e de d&eacute;placement,
puis indiquez les coordonn&eacute;es de l’origine (angle sup&eacute;rieur gauche) de la poign&eacute;e de
d&eacute;placement, ainsi que la largeur et la hauteur de celle-ci.
Cette option est utile lorsque l’image ins&eacute;r&eacute;e &agrave; l’int&eacute;rieur du calque contient un symbole de
d&eacute;placement, par exemple une barre de titre ou une poign&eacute;e de tiroir. N’activez pas cette
option si vous voulez que l’utilisateur soit libre de cliquer n’importe o&ugrave; dans le calque pour le
d&eacute;placer.
12 Choisissez, parmi les options de la zone En d&eacute;pla&ccedil;ant, celles que vous d&eacute;sirez utiliser :
■ Activez l’option Placer le calque au premier plan si le calque doit &ecirc;tre amen&eacute; au niveau le
plus haut de l’ordre de superposition lors de son d&eacute;placement. Si vous activez cette option,
utilisez le menu d&eacute;roulant qui appara&icirc;t pour indiquer si le calque doit &ecirc;tre laiss&eacute; au niveau
de visibilit&eacute; le plus &eacute;lev&eacute; ou si sa position d’origine dans l’ordre de superposition doit &ecirc;tre
r&eacute;tablie.
■ Tapez un code JavaScript ou un nom de fonction (par exemple, monitorLayer()) dans la
zone de texte Appel JavaScript pour que ce code ou cette fonction soit ex&eacute;cut&eacute; en boucle
pendant le d&eacute;placement du calque. Par exemple, vous pouvez &eacute;crire une fonction pour
surveiller les coordonn&eacute;es du calque et afficher des indications, telles que &laquo; Tu br&ucirc;les &raquo; ou
&laquo; Tu t’&eacute;loignes de la cible &raquo;, dans une zone de texte. Pour plus d’informations, voir Collecte
d’informations sur le calque d&eacute;pla&ccedil;able, page 394.
13 Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateLayerPos()) dans la
deuxi&egrave;me zone de texte Appel JavaScript si vous voulez que le code ou la fonction soit ex&eacute;cut&eacute;(e)
lorsque le calque est d&eacute;pos&eacute;. Activez l’option Uniquement si align&eacute; si le code JavaScript indiqu&eacute;
ne doit &ecirc;tre ex&eacute;cut&eacute; que si le calque a atteint la cible de d&eacute;p&ocirc;t.
14 Cliquez sur OK.
15 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour. N’oubliez pas que les calques ne sont pas pris en charge par la version 3.0 des
navigateurs.
Remarque : Vous ne pouvez pas associer l’action D&eacute;placement de calque &agrave; un objet avec les
&eacute;v&eacute;nements onMouseDown ou onClick.
Collecte d’informations sur le calque d&eacute;pla&ccedil;able
Lorsque vous associez l’action D&eacute;placement de calque &agrave; un objet, Dreamweaver ins&egrave;re la fonction
MM_dragLayer() dans la section d’en-t&ecirc;te (head) de votre document. Cette fonction enregistre le
calque comme d&eacute;pla&ccedil;able et d&eacute;finit trois propri&eacute;t&eacute;s pour chaque calque d&eacute;pla&ccedil;able,
et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions
JavaScript pour d&eacute;terminer les positions horizontale et verticale du calque et s’il a atteint la cible
de d&eacute;p&ocirc;t.
MM_LEFTRIGHT, MM_UPDOWN
394
Chapitre 18 : Utilisation des comportements JavaScript
Remarque : Les informations fournies ici sont destin&eacute;es uniquement aux programmeurs JavaScript
exp&eacute;riment&eacute;s.
Par exemple, la fonction suivante affiche la valeur de la propri&eacute;t&eacute; MM_UPDOWN (la position verticale
courante du calque) dans un champ de formulaire appel&eacute; curPosField. (Les champs de
formulaires servent &agrave; afficher des informations pouvant &ecirc;tre continuellement mises &agrave; jour, parce
qu’ils sont dynamiques, c’est-&agrave;-dire que vous pouvez modifier leur contenu apr&egrave;s le chargement
de la page, dans Netscape Navigator et Microsoft Internet Explorer.)
function getPos(layername){
var layerRef = MM_findObj(layername);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Au lieu d’afficher la valeur des propri&eacute;t&eacute;s MM_UPDOWN ou MM_LEFTRIGHT dans un champ de
formulaire, vous pouvez utiliser ces valeurs de diff&eacute;rentes mani&egrave;res. Par exemple, vous pouvez
&eacute;crire une fonction qui affiche un message dans ce champ selon la distance qui reste &agrave; parcourir
jusqu’&agrave; la cible, ou appeler une autre fonction pour afficher ou masquer un calque selon la valeur
de cette distance.
Il est particuli&egrave;rement utile de tester la propri&eacute;t&eacute; MM_SNAPPED lorsque vous disposez, sur une page,
de plusieurs calques qui doivent tous atteindre leur cible pour que l’utilisateur puisse passer &agrave; la
page ou &agrave; la t&acirc;che suivante. Par exemple, vous pouvez &eacute;crire une fonction qui compte le nombre
de calques ayant la valeur MM_SNAPPED &agrave; true et l’appeler chaque fois qu’un calque est d&eacute;pos&eacute;.
Lorsque le nombre de calques arriv&eacute;s sur leur cible atteint le nombre d&eacute;sir&eacute;, vous pouvez envoyer
l’utilisateur &agrave; la page suivante ou afficher un message de f&eacute;licitations.
Si vous avez associ&eacute; l’action D&eacute;placement de calque &agrave; des liens plac&eacute;s sur plusieurs calques &agrave; l’aide
de l’&eacute;v&eacute;nement onMouseOver, vous devrez modifier l&eacute;g&egrave;rement la fonction MM_dragLayer() pour
&eacute;viter que la propri&eacute;t&eacute; MM_SNAPPED d’un calque align&eacute; ne repasse &agrave; false lorsqu’il est survol&eacute; par
la souris (c’est le cas si vous utilisez l’action D&eacute;placement de calque pour cr&eacute;er un puzzle de
photos, car la souris survole probablement des pi&egrave;ces d&eacute;j&agrave; align&eacute;es lors du positionnement des
autres). La fonction MM_dragLayer() n’interdit pas ce comportement, car il est parfois
souhaitable (si par exemple vous d&eacute;sirez &eacute;tablir plusieurs cibles pour un seul calque).
Pour &eacute;viter le r&eacute;-enregistrement de calques align&eacute;s :
1 Effectuez une copie de sauvegarde de votre document avant de modifier le code (vous pouvez
2
3
4
5
effectuer cette op&eacute;ration &agrave; partir du panneau Site dans Dreamweaver ou dans l’Explorateur
Windows ou le Finder de Macintosh).
Choisissez Edition &gt; Rechercher.
S&eacute;lectionnez Source HTML dans le menu d&eacute;roulant Rechercher.
Tapez (!curDrag) (parenth&egrave;ses comprises) dans la zone de texte voisine.
Cliquez sur Rechercher le suivant.
Cliquez sur Oui si Dreamweaver vous demande si vous voulez continuer la recherche depuis le
d&eacute;but du document. Dreamweaver trouve l’instruction :
if (!curDrag) return false ;
6 Fermez la bo&icirc;te de dialogue Rechercher, puis modifiez l’instruction dans l’Affichage de code de
la fen&ecirc;tre de document ou dans l’inspecteur de code pour qu’il affiche :
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
395
Les deux barres verticales (||) signifient &laquo; ou &raquo; et curDrag est une variable qui repr&eacute;sente le
calque qui a &eacute;t&eacute; enregistr&eacute; comme d&eacute;pla&ccedil;able. En fran&ccedil;ais, cette instruction signifie &laquo; si
curDrag n’est pas un objet, ou s’il a d&eacute;j&agrave; la valeur MM_SNAPPED, ce n’est pas la peine d’ex&eacute;cuter
le reste de la fonction &raquo;.
Atteindre l’URL
L’action Atteindre l’URL ouvre une nouvelle page dans la fen&ecirc;tre en cours ou dans l’image
indiqu&eacute;e. Cette action est particuli&egrave;rement utile pour modifier d’un seul clic le contenu de deux
cadres ou plus.
Pour utiliser l’action Atteindre l’URL :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Atteindre l’URL dans le menu contextuel Actions.
3 Choisissez une destination pour l’URL dans la liste Ouvrir dans.
La liste Ouvrir dans &eacute;num&egrave;re automatiquement les noms de tous les cadres qui se trouvent
dans le jeu de cadres actuel, ainsi que la fen&ecirc;tre principale. S’il n’y a pas de cadres, cette derni&egrave;re
est la seule option.
Remarque : Ne donnez pas &agrave; vos cadres les noms top, blank, self ou parent, car cela pourrait
produire des r&eacute;sultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec
les mots r&eacute;serv&eacute;s utilis&eacute;s dans le champ Cible.
4 Cliquez sur Parcourir pour s&eacute;lectionner un document &agrave; ouvrir ou tapez le nom et le chemin
d’acc&egrave;s au fichier recherch&eacute; dans la zone de texte URL.
5 R&eacute;p&eacute;tez les &eacute;tapes 3 et 4 pour ouvrir d’autres documents dans d’autres cadres.
6 Cliquez sur OK.
7 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Menu de reroutage
Lorsque vous cr&eacute;ez un menu de reroutage en utilisant Insertion &gt; Objets de formulaire &gt; Menu de
reroutage, Dreamweaver cr&eacute;e un objet de menu et lui associe le comportement Menu de reroutage
(ou Menu de reroutage / Aller). En principe, il n’est pas n&eacute;cessaire d’associer manuellement
l’action Menu de reroutage &agrave; un objet. Pour plus d’informations sur les menus de reroutage et la
fa&ccedil;on de les cr&eacute;er, voir Menus de reroutage, page 332.
Vous pouvez modifier un menu de reroutage existant de deux mani&egrave;res diff&eacute;rentes :
• Vous pouvez modifier et r&eacute;organiser les &eacute;l&eacute;ments du menu, modifier les fichiers &agrave; rerouter et la
•
396
fen&ecirc;tre dans laquelle s’ouvrent ces fichiers, en double-cliquant sur une action de Menu de
reroutage existante dans le panneau Comportements.
Vous pouvez modifier les &eacute;l&eacute;ments du menu comme vous modifieriez les &eacute;l&eacute;ments de
n’importe quel menu, en s&eacute;lectionnant le menu et en utilisant le bouton Valeurs de la liste dans
l’Inspecteur de propri&eacute;t&eacute;s. Pour plus d’informations, voir Insertion de menus de
formulaire HTML, page 638.
Chapitre 18 : Utilisation des comportements JavaScript
Pour modifier un menu de reroutage &agrave; l’aide du panneau Comportements :
1 Cr&eacute;ez un objet Menu de reroutage s’il n’en existe pas d&eacute;j&agrave; dans votre document.
2 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
3 Double-cliquez sur Menu de reroutage dans la colonne Actions.
4 Effectuez les modifications souhait&eacute;es dans la bo&icirc;te de dialogue Menu de reroutage, puis cliquez
sur OK.
Menu de reroutage / Aller
Cette action est &eacute;troitement associ&eacute;e &agrave; l’action Menu de reroutage ; elle vous permet d’associer un
bouton Aller avec un menu de reroutage (pour utiliser cette action, vous devez cr&eacute;er au pr&eacute;alable
un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement
s&eacute;lectionn&eacute; dans le menu de reroutage. En principe, il n’est pas indispensable d’ajouter un bouton
Aller &agrave; un menu de reroutage : le choix d’un &eacute;l&eacute;ment de ce dernier provoque en g&eacute;n&eacute;ral le
chargement d’une nouvelle URL sans aucune intervention suppl&eacute;mentaire. Toutefois, si
l’utilisateur choisit l’&eacute;l&eacute;ment qui est d&eacute;j&agrave; s&eacute;lectionn&eacute; dans le menu de reroutage, le reroutage ne se
produira pas. En g&eacute;n&eacute;ral cela n’a pas d’importance, mais si le menu de reroutage appara&icirc;t dans
une image et que les &eacute;l&eacute;ments du menu assurent la liaison avec des pages dans d’autres images, un
bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir &agrave; nouveau un &eacute;l&eacute;ment
d&eacute;j&agrave; s&eacute;lectionn&eacute; dans le menu de reroutage.
Pour ajouter une action Menu de reroutage / Aller :
1 S&eacute;lectionnez un objet qui sera utilis&eacute; comme bouton Aller (en g&eacute;n&eacute;ral une image) et ouvrez le
panneau Comportements.
2 Cliquez sur le bouton plus (+) et choisissez Menu de reroutage Aller dans le menu contextuel
Actions.
3 Dans le menu d&eacute;roulant Choisissez un menu de reroutage, s&eacute;lectionnez le menu qui activera le
bouton Aller.
4 Cliquez sur OK.
Ouvrir la fen&ecirc;tre Navigateur
Utilisez l’action Ouvrir la fen&ecirc;tre Navigateur pour ouvrir une URL dans une nouvelle fen&ecirc;tre.
Vous pouvez sp&eacute;cifier les propri&eacute;t&eacute;s de la nouvelle fen&ecirc;tre, dont sa taille, ses attributs
(redimensionnable ou non, dispose d’une barre de menu ou non, etc.), ainsi que son nom. Par
exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une
fen&ecirc;tre individuelle lorsque l’utilisateur clique sur l’image r&eacute;duite ; avec ce comportement, vous
pouvez adapter la fen&ecirc;tre &agrave; la taille exacte de l’image.
Si vous ne sp&eacute;cifiez aucun attribut, elle s’ouvrira avec la taille et les attributs de la fen&ecirc;tre &agrave; partir
de laquelle elle a &eacute;t&eacute; lanc&eacute;e. Choisir des attributs pour la fen&ecirc;tre d&eacute;sactive automatiquement tous
ceux qui ne sont pas explicitement activ&eacute;s. Par exemple, si vous ne d&eacute;finissez pas d’attributs pour
la fen&ecirc;tre, elle peut s’ouvrir en 640 x 480 pixels et avoir une barre de navigation, une barre
d’adresse, une barre d’&eacute;tat et une barre de menus. Si vous d&eacute;finissez explicitement une largeur de
640 et une hauteur de 480 pixels, sans aucun autre attribut, la fen&ecirc;tre s’ouvrira en 640 x 480
pixels et n’aura pas de barre de navigation, pas de barre d’adresse ni de barre d’&eacute;tat, pas de barre de
menus, pas de poign&eacute;es de redimensionnement et pas de barres de d&eacute;filement.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
397
Pour utiliser l’action Ouvrir une fen&ecirc;tre du navigateur :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Ouvrir une fen&ecirc;tre du navigateur dans le menu
contextuel Actions.
3 Tapez l’URL &agrave; afficher ou cliquez sur Parcourir pour s&eacute;lectionner un fichier.
4 Choisissez parmi les options suivantes :
sp&eacute;cifie la largeur de la fen&ecirc;tre en pixels.
Hauteur de fen&ecirc;tre sp&eacute;cifie la hauteur de la fen&ecirc;tre en pixels.
Barre d’outils de navigation est constitu&eacute;e de la barre de boutons de navigation qui comprend
les boutons Pr&eacute;c&eacute;dente, Suivante, D&eacute;marrage et Actualiser.
Barre d’adresses est la barre d’outils qui contient la zone de texte Adresse.
Barre d’&eacute;tat est la zone au bas de la fen&ecirc;tre du navigateur dans laquelle apparaissent des
messages (par exemple, la dur&eacute;e de chargement restante et les URL associ&eacute;es aux liens).
Barre de menus est la zone de la fen&ecirc;tre du navigateur (Windows) ou du Bureau (Macintosh)
o&ugrave; apparaissent les menus Fichier, Edition, Affichage, Aller et Aide. Vous devez explicitement
d&eacute;finir cette option si vous voulez que les utilisateurs puissent naviguer &agrave; partir de la nouvelle
fen&ecirc;tre. Sinon, les utilisateurs ne pourront que fermer ou r&eacute;duire la fen&ecirc;tre (Windows), fermer
la fen&ecirc;tre ou quitter l’application (Macintosh) &agrave; partir de la nouvelle fen&ecirc;tre.
Barre de d&eacute;filement si n&eacute;cessaire permet de sp&eacute;cifier si les barres de d&eacute;filement doivent
appara&icirc;tre si le contenu d&eacute;passe la zone visible. Si vous ne d&eacute;finissez pas explicitement cette
option, les barres de d&eacute;filement n’appara&icirc;tront pas. Si l’option Poign&eacute;es de redimensionnement
est &eacute;galement d&eacute;sactiv&eacute;e, les utilisateurs n’auront aucun moyen de visualiser le contenu situ&eacute; en
dehors de la taille d’origine de la fen&ecirc;tre (bien qu’ils puissent agrandir la fen&ecirc;tre en en
d&eacute;pla&ccedil;ant le bord).
Poign&eacute;es de redimensionnement permet de sp&eacute;cifier si l’utilisateur pourra redimensionner la
fen&ecirc;tre, soit en tirant le coin inf&eacute;rieur droit de la fen&ecirc;tre, soit en cliquant sur le bouton
d’agrandissement en plein &eacute;cran (Windows) ou sur la case de redimensionnement (Macintosh)
dans l’angle sup&eacute;rieur droit. Si cette option n’a pas &eacute;t&eacute; d&eacute;finie explicitement, les contr&ocirc;les de
redimensionnement ne sont pas disponibles et l’angle inf&eacute;rieur droit ne peut &ecirc;tre d&eacute;plac&eacute;.
Nom de la fen&ecirc;tre est le nom de la nouvelle fen&ecirc;tre. La nouvelle fen&ecirc;tre doit poss&eacute;der un nom
si elle doit &ecirc;tre point&eacute;e par des liens ou contr&ocirc;l&eacute;e en JavaScript. Ce nom ne peut contenir
d’espaces ou de caract&egrave;res sp&eacute;ciaux.
5 Cliquez sur OK.
6 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Largeur de fen&ecirc;tre
Lire le son
Utilisez cette action pour reproduire un son. Par exemple, vous pouvez d&eacute;clencher un effet sonore
lorsque l’utilisateur passe sur un lien ou jouer une s&eacute;quence musicale lorsque la page est en cours
de chargement.
398
Chapitre 18 : Utilisation des comportements JavaScript
Remarque : Certains navigateurs n&eacute;cessitent une prise en charge audio externe (par exemple, un
plug-in audio) pour diffuser les sons. C’est pourquoi des navigateurs diff&eacute;rents, poss&eacute;dant des plugins diff&eacute;rents, diffusent souvent les sons de mani&egrave;re diff&eacute;rente. Il est difficile de pr&eacute;voir de mani&egrave;re
fiable la fa&ccedil;on dont les utilisateurs du site vont percevoir les sons.
Pour utiliser l’action Lire le son :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Lire le son dans le menu contextuel Actions.
3 Cliquez sur Parcourir pour s&eacute;lectionner un fichier son ou tapez le nom et le chemin d’acc&egrave;s &agrave; ce
fichier dans la zone de texte Lire le son.
4 Cliquez sur OK.
5 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Message contextuel
Cette action fait appara&icirc;tre un message d’alerte JavaScript, avec le texte que vous avez sp&eacute;cifi&eacute;.
Comme les alertes JavaScript ne disposent que d’un seul bouton (OK), utilisez cette action pour
informer l’utilisateur plut&ocirc;t que pour lui proposer un choix.
Vous pouvez incorporer au texte des appels de fonction, propri&eacute;t&eacute;s, variables globales ou autres
expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des
accolades ({}). Pour afficher une accolade, faites-la pr&eacute;c&eacute;der d’une barre oblique invers&eacute;e (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Remarque : Vous ne pouvez pas contr&ocirc;ler l’apparence d’une alerte JavaScript ; celle-ci est
d&eacute;termin&eacute;e par le navigateur de l’utilisateur. Si vous d&eacute;sirez contr&ocirc;ler davantage l’apparence de votre
message, pensez &agrave; utiliser le comportement Ouvrir la fen&ecirc;tre Navigateur. Pour plus d’informations,
voir Ouvrir la fen&ecirc;tre Navigateur, page 397.
Pour utiliser l’action Message contextuel :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Message contextuel dans le menu contextuel
Actions.
3 Tapez votre message dans la zone de texte pr&eacute;vue &agrave; cet effet.
4 Cliquez sur OK.
5 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
399
Pr&eacute;charger les images
Cette action place dans la m&eacute;moire cache du navigateur les images qui ne sont pas
imm&eacute;diatement affich&eacute;es lors du chargement de la page (par exemple les images de substitution
appel&eacute;es par un comportement ou une fonction en JavaScript). Cela &eacute;vite &agrave; l’utilisateur d’attendre
que ces images soient charg&eacute;es, lorsqu’un &eacute;v&eacute;nement d&eacute;clenche leur apparition.
Remarque : L’action Permuter une image pr&eacute;charge automatiquement toutes les images
s&eacute;lectionn&eacute;es lorsque vous choisissez l’option Pr&eacute;charger les images dans la bo&icirc;te de dialogue
Permuter une image ; dans ce cas, il n’est pas n&eacute;cessaire d’ajouter manuellement l’action Pr&eacute;charger
les images lorsque vous utilisez l’action Permuter une image.
Pour utiliser l’action Pr&eacute;charger les images :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Pr&eacute;charger les images dans le menu contextuel
Actions.
3 Cliquez sur Parcourir pour s&eacute;lectionner un fichier d’image &agrave; pr&eacute;charger ou tapez le chemin
d’acc&egrave;s et le nom du fichier d’une image dans la zone de texte Fichier source des images.
4 Cliquez sur le bouton plus (+) en haut de la bo&icirc;te de dialogue pour ajouter l’image &agrave; la liste
Pr&eacute;charger les images.
Remarque : Vous devez cliquer sur le bouton plus (+) avant d’indiquer l’image suivante, faute de
quoi l’image que vous venez de choisir sera remplac&eacute;e par la suivante.
5 R&eacute;p&eacute;tez les &eacute;tapes 3 et 4 pour les autres images que vous d&eacute;sirez pr&eacute;charger dans la page en
cours.
6 Pour supprimer une image de la liste Pr&eacute;charger les images, s&eacute;lectionnez-la et cliquez sur le
bouton - (signe moins).
7 Cliquez sur OK.
8 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
D&eacute;finir image barre de navigation
Utilisez l’action D&eacute;finir image barre de navigation pour transformer une image en image de barre
de navigation ou pour modifier l’affichage et les actions des images d’une barre de navigation Pour
plus d’informations, voir Insertion d’une barre de navigation, page 346.
L’onglet Base de la bo&icirc;te de dialogue D&eacute;finir image barre de navigation permet de cr&eacute;er ou de
modifier une ou plusieurs images d’une barre de navigation, de modifier l’URL cible des boutons
de la barre de navigation et de s&eacute;lectionner une autre fen&ecirc;tre pour l’affichage de l’URL.
L’onglet Avanc&eacute; de la bo&icirc;te de dialogue D&eacute;finir image barre de navigation permet de modifier
l’&eacute;tat d’autres images du document, en fonction de l’&eacute;tat du bouton actuellement s&eacute;lectionn&eacute;. Par
d&eacute;faut, lorsque vous cliquez sur un &eacute;l&eacute;ment d’une barre de navigation, tous ses autres &eacute;l&eacute;ments
sont automatiquement restaur&eacute;s dans leur &eacute;tat &laquo; Image normale &raquo; ; l’onglet Avanc&eacute; vous permet
de d&eacute;finir un changement d’&eacute;tat pour une autre image lorsque l’image s&eacute;lectionn&eacute;e passe &agrave; l’&eacute;tat
&laquo; Image survol&eacute;e &raquo; ou &laquo; Image cliqu&eacute;e &raquo;.
400
Chapitre 18 : Utilisation des comportements JavaScript
Pour modifier une action D&eacute;finir image barre de navigation :
1 S&eacute;lectionnez une image dans la barre de navigation que vous voulez modifier et ouvrez le
panneau Comportements.
2 Dans la colonne Actions du panneau Comportements, double-cliquez sur l’action D&eacute;finir
image barre de navigation associ&eacute;e &agrave; l’&eacute;v&eacute;nement que vous d&eacute;sirez modifier.
3 Dans l’onglet Base de la bo&icirc;te de dialogue D&eacute;finir image barre de navigation, choisissez des
options de modification de l’image.
Pour d&eacute;finir plusieurs images pour un bouton de barre de navigation :
1 S&eacute;lectionnez une image dans la barre de navigation que vous voulez modifier et ouvrez le
panneau Comportements.
2 Dans la colonne Actions du panneau Comportements, double-cliquez sur l’action D&eacute;finir
image barre de navigation associ&eacute;e &agrave; l’&eacute;v&eacute;nement que vous d&eacute;sirez modifier.
3 Cliquez sur l’onglet Avanc&eacute; de la bo&icirc;te de dialogue D&eacute;finir image barre de navigation.
4 Dans le menu d&eacute;roulant Lorsque l’&eacute;l&eacute;ment &laquo; xxx &raquo; s’affiche, s&eacute;lectionnez un &eacute;tat d’image.
Choisissez Image Abaiss&eacute;e si vous d&eacute;sirez qu’une autre image change d’aspect apr&egrave;s un clic
de l’utilisateur sur l’image s&eacute;lectionn&eacute;e.
■ Choisissez Image Au-dessus ou Image Au-dessus lorsqu’Abaiss&eacute;e si vous d&eacute;sirez qu’une autre
image change d’aspect lorsque le pointeur de la souris se trouve sur l’image s&eacute;lectionn&eacute;e.
Pour plus d’informations sur les &eacute;tats d’image, voir Utilisation des barres de navigation,
page 346.
5 Dans la liste D&eacute;finir aussi image, s&eacute;lectionnez une autre image de la page &agrave; d&eacute;finir.
6 Cliquez sur Parcourir pour s&eacute;lectionner le fichier d’image &agrave; afficher ou tapez le nom et le chemin
d’acc&egrave;s au fichier d’image dans la zone de texte Vers le fichier image.
7 Si vous avez s&eacute;lectionn&eacute; l’&eacute;tat Image Au-dessus ou Image Au-dessus lorsqu’Abaiss&eacute;e &agrave; l’&eacute;tape 4,
vous disposez d’une possibilit&eacute; suppl&eacute;mentaire. Dans la zone de texte Si abaiss&eacute;, vers fichier
image, cliquez sur Parcourir pour s&eacute;lectionner le fichier d’image &agrave; afficher ou tapez le chemin
d’acc&egrave;s et le nom de ce fichier.
■
Texte du cadre
L’action Texte d’un cadre vous permet de d&eacute;finir de fa&ccedil;on dynamique le texte d’un cadre, en
rempla&ccedil;ant le contenu et le formatage d’un cadre par le contenu indiqu&eacute;. Ce contenu peut &ecirc;tre
n’importe quel code source HTML valide. Cette action permet d’afficher les informations de
fa&ccedil;on dynamique.
Bien que l’action Texte d’un cadre permette de remplacer le formatage d’un cadre, vous pouvez
activer l’option Pr&eacute;server Couleur d’arri&egrave;re-plan pour conserver les attributs actuels pour l’arri&egrave;replan de la page et la couleur du texte.
Vous pouvez incorporer au texte des appels de fonction, propri&eacute;t&eacute;s, variables globales ou autres
expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des
accolades ({}). Pour afficher une accolade, faites-la pr&eacute;c&eacute;der d’une barre oblique invers&eacute;e (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
401
Pour cr&eacute;er un jeu de cadres :
• Choisissez Modifier &gt; Jeu de cadres &gt; Fractionner le cadre &agrave; gauche, &agrave; droite, vers le haut ou
vers le bas.
Pour plus d’informations, voir Cr&eacute;ation de cadres et de jeux de cadres, page 214.
Pour utiliser l’action Texte d’un cadre :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Texte &gt; Texte du cadre dans le menu contextuel
3
4
5
6
Actions.
Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez le cadre cible dans le menu d&eacute;roulant Cadre.
Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section
body du cadre cible.
Tapez un message dans la zone de texte Nouveau HTML et cliquez sur OK.
V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;. Si ce n’est pas le cas,
s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant.
Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s n’apparaissent pas dans la liste, changez de navigateur cible dans le
menu d&eacute;roulant Afficher les &eacute;v&eacute;nements pour.
Texte du calque
L’action Texte du calque remplace le contenu et le formatage d’un calque existant sur la page par
le contenu indiqu&eacute;. Ce contenu peut &ecirc;tre n’importe quel code source valide en HTML.
L’action Texte du calque remplace le contenu et le formatage d’un calque existant par le contenu
indiqu&eacute;, mais conserve les attributs du calque, y compris la couleur. Formatez le contenu en
incluant des balises HTML &agrave; la zone de texte Nouveau HTML de la bo&icirc;te de dialogue Texte du
calque.
Vous pouvez incorporer au texte des appels de fonction, propri&eacute;t&eacute;s, variables globales ou autres
expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des
accolades ({}). Pour afficher une accolade, faites-la pr&eacute;c&eacute;der d’une barre oblique invers&eacute;e (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Pour cr&eacute;er un calque :
1 Choisissez Insertion &gt; Calque.
Pour plus d’informations, voir Insertion d’un calque, page 160.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, tapez le nom du calque.
Pour utiliser l’action Texte du calque :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Texte &gt; Texte du calque dans le menu contextuel
Actions.
3 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez le calque cible dans le menu d&eacute;roulant
Calque.
4 Tapez un message dans la zone de texte Nouveau HTML et cliquez sur OK.
402
Chapitre 18 : Utilisation des comportements JavaScript
5 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;. Si ce n’est pas le cas,
s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant.
Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s n’apparaissent pas dans la liste, changez de navigateur cible dans le
menu d&eacute;roulant Afficher les &eacute;v&eacute;nements pour.
D&eacute;finir le texte de la barre d’&eacute;tat
L’action D&eacute;finir le texte de la barre d’&eacute;tat affiche un message dans la barre d’&eacute;tat, dans la partie
inf&eacute;rieure gauche de la fen&ecirc;tre du navigateur. Par exemple, vous pouvez utiliser cette action pour
d&eacute;crire la destination d’un lien dans la barre d’&eacute;tat, au lieu d’afficher l’URL associ&eacute;e. Pour voir un
exemple de message d’&eacute;tat, amenez la souris sur n’importe quel bouton de navigation dans les
pages de l’aide de Dreamweaver. Cependant, il arrive fr&eacute;quemment que les utilisateurs ne
tiennent pas compte des messages de la barre d’&eacute;tat (certains navigateurs ne prennent pas en
charge la d&eacute;finition du texte de la barre d’&eacute;tat). Si votre message est important, pensez &agrave; l’afficher
sous la forme d’un message contextuel ou comme texte d’un calque.
Vous pouvez incorporer au texte des appels de fonction, propri&eacute;t&eacute;s, variables globales ou autres
expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des
accolades ({}). Pour afficher une accolade, faites-la pr&eacute;c&eacute;der d’une barre oblique invers&eacute;e (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Pour utiliser l’action D&eacute;finir le texte de la barre d’&eacute;tat :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Texte &gt; D&eacute;finir le texte de la barre d’&eacute;tat dans le
menu contextuel Actions.
3 Dans la bo&icirc;te de dialogue D&eacute;finir le texte de la barre d’&eacute;tat, tapez un message dans la zone de
texte Message.
Utilisez un message concis. Le navigateur tronquera le message s’il est trop long pour la barre
d’&eacute;tat.
4 Cliquez sur OK.
5 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Texte d’un champ de texte
L’action Texte d’un champ texte remplace le contenu d’un champ texte de formulaire par le
contenu indiqu&eacute;.
Vous pouvez incorporer au texte des appels de fonction, propri&eacute;t&eacute;s, variables globales ou autres
expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des
accolades ({}). Pour afficher une accolade, faites-la pr&eacute;c&eacute;der d’une barre oblique invers&eacute;e (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
403
Pour cr&eacute;er un champ texte nomm&eacute; :
1 Choisissez Insertion &gt; Objets de formulaire &gt; Champ de texte.
Si Dreamweaver vous invite &agrave; ajouter une balise de formulaire, cliquez sur Oui. Pour plus
d’informations, voir Cr&eacute;ation de formulaires, page 631.
2 Dans l’inspecteur de propri&eacute;t&eacute;s, tapez le nom du champ texte. Veillez &agrave; utiliser un nom unique
dans cette page (n’utilisez pas le m&ecirc;me nom pour plusieurs &eacute;l&eacute;ments appartenant &agrave; la m&ecirc;me
page, m&ecirc;me s’ils se trouvent dans des formulaires diff&eacute;rents).
Pour utiliser l’action Texte d’un champ texte :
1 S&eacute;lectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Texte &gt; Texte d’un champ texte dans le menu
contextuel Actions.
3 Dans la bo&icirc;te de dialogue qui s’affiche, s&eacute;lectionnez le champ texte cible dans le menu d&eacute;roulant
Champ de texte.
4 Entrez le nouveau contenu dans la zone de texte Nouveau texte et cliquez sur OK.
5 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;. Si ce n’est pas le cas,
s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant.
Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s n’apparaissent pas dans la liste, changez de navigateur cible dans le
menu d&eacute;roulant Afficher les &eacute;v&eacute;nements pour.
Afficher-masquer les calques
L’action Afficher-masquer les calques affiche, masque ou r&eacute;tablit la visibilit&eacute; par d&eacute;faut d’un ou
plusieurs calques. Cette action permet d’afficher des informations en fonction des interactions de
l’utilisateur avec la page. Par exemple, lorsque le curseur passe sur l’image d’une plante, vous
pouvez afficher un calque comportant des d&eacute;tails sur le climat id&eacute;al de la plante, l’ensoleillement
dont elle a besoin, sa taille adulte, etc.
L’action Afficher-masquer les calques sert &eacute;galement &agrave; cr&eacute;er un calque de pr&eacute;chargement, c’est-&agrave;dire un grand calque qui cachera d’abord le contenu de la page, puis dispara&icirc;tra &agrave; la fin du
chargement de tous les &eacute;l&eacute;ments de la page.
Pour utiliser l’action Afficher-masquer les calques :
1 Choisissez Insertion &gt; Calque ou cliquez sur le bouton Calque de la barre Ins&eacute;rer, puis dessinez
2
3
4
5
404
un calque dans la fen&ecirc;tre de document.
R&eacute;p&eacute;tez cette &eacute;tape pour cr&eacute;er des calques suppl&eacute;mentaires.
Cliquez n’importe o&ugrave; dans la fen&ecirc;tre de document pour d&eacute;s&eacute;lectionner le calque, puis ouvrez le
panneau Comportements.
Cliquez sur le bouton plus (+) et choisissez Afficher-Masquer les calques dans le menu
contextuel Actions.
Si cette action est indisponible, vous avez probablement s&eacute;lectionn&eacute; un calque. Etant donn&eacute;
que les calques ne prennent pas en compte les &eacute;v&eacute;nements dans les navigateurs 4.0, vous devez
s&eacute;lectionner un autre objet (la balise body ou un lien (balise a) par exemple) ou remplacer le
navigateur cible par Internet Explorer 4.0 dans le menu d&eacute;roulant Afficher les &eacute;v&eacute;nements
pour.
S&eacute;lectionnez le calque dont vous voulez modifier la visibilit&eacute; dans la liste Calques nomm&eacute;s.
Cliquez sur Afficher pour afficher le calque, Masquer pour le masquer ou Par D&eacute;faut pour
r&eacute;tablir la visibilit&eacute; par d&eacute;faut du calque.
Chapitre 18 : Utilisation des comportements JavaScript
6 R&eacute;p&eacute;tez les &eacute;tapes 4 et 5 pour tous les autres calques dont vous voulez modifier la visibilit&eacute; (vous
pouvez modifier la visibilit&eacute; des calques multiples avec un comportement unique).
7 Cliquez sur OK.
8 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Dans la fen&ecirc;tre d’un navigateur Netscape Navigator, les dimensions des calques peuvent &ecirc;tre
modifi&eacute;es en fonction de leur contenu. Pour garder la ma&icirc;trise des dimensions du calque, ajoutezlui du texte ou des images ou d&eacute;finissez des valeurs de d&eacute;coupe.
Pour cr&eacute;er un calque de pr&eacute;chargement :
1 Cliquez sur le bouton Dessiner un calque dans la cat&eacute;gorie Commun de la barre Ins&eacute;rer, puis
dessinez un grand calque dans le mode Cr&eacute;ation de la fen&ecirc;tre de document.
Assurez-vous que le calque recouvre bien tout le contenu de la page.
2 Dans le panneau Calques, faites glisser le nom du calque vers le haut de la liste pour indiquer
qu’il doit se trouver au sommet dans l’ordre de superposition.
3 S&eacute;lectionnez le calque, s’il ne l’est pas d&eacute;j&agrave;, et nommez-le chargement, en utilisant la zone de
texte situ&eacute;e &agrave; l’extr&ecirc;me gauche de l’inspecteur de propri&eacute;t&eacute;s du calque.
4 Tout en gardant le calque s&eacute;lectionn&eacute;, d&eacute;finissez dans l’inspecteur de propri&eacute;t&eacute;s sa couleur
d’arri&egrave;re-plan &agrave; la m&ecirc;me valeur que l’arri&egrave;re-plan de la page.
5 Cliquez &agrave; l’int&eacute;rieur du calque (qui doit maintenant cacher le reste du contenu de la page) et
tapez un message si vous d&eacute;sirez.
Par exemple, &laquo; Merci d’attendre la fin du chargement &raquo; ou &laquo; Chargement en cours... &raquo; sont des
messages informatifs qui &eacute;vitent &agrave; l’utilisateur de croire que la page est vide.
6 Cliquez sur la balise &lt;body&gt; dans le s&eacute;lecteur de balises, situ&eacute; dans l’angle inf&eacute;rieur gauche de la
fen&ecirc;tre de document.
7 Dans le panneau Comportements, s&eacute;lectionnez Afficher-Masquer les calques dans le menu
contextuel Actions.
8 S&eacute;lectionnez le calque appel&eacute; chargement dans la liste Calques nomm&eacute;s.
9 Cliquez sur Masquer.
10 Cliquez sur OK.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
405
11 Assurez-vous que l’&eacute;v&eacute;nement figurant dans la liste des comportements &agrave; c&ocirc;t&eacute; de l’action
Afficher-Masquer les calques est onLoad (si ce n’est pas le cas, s&eacute;lectionnez l’&eacute;v&eacute;nement et
cliquez sur le triangle orient&eacute; vers le bas qui appara&icirc;t entre l’&eacute;v&eacute;nement et l’action ; s&eacute;lectionnez
onLoad dans la liste d’&eacute;v&eacute;nements du menu contextuel).
Afficher le menu contextuel
Utilisez le comportement Afficher le menu contextuel pour cr&eacute;er ou modifier un menu contextuel
Dreamweaver ou pour ouvrir et modifier un menu contextuel Fireworks ins&eacute;r&eacute; dans un document
Dreamweaver.
D&eacute;finissez les options dans la bo&icirc;te de dialogue Afficher le menu contextuel pour cr&eacute;er un menu
contextuel horizontal ou vertical. Vous pouvez faire appel &agrave; cette bo&icirc;te de dialogue pour d&eacute;finir ou
modifier la couleur, le texte et la position d’un menu contextuel.
Remarque : Vous devez cliquer sur le bouton Modifier de l’inspecteur de propri&eacute;t&eacute;s Dreamweaver
pour modifier les images dans un menu contextuel bas&eacute; sur des images Fireworks. Toutefois, vous
pouvez ex&eacute;cuter la commande Afficher le menu contextuel pour modifier le texte d’un menu
contextuel bas&eacute; sur des images. Pour plus d’informations sur la modification des images sous
Fireworks, voir Chapitre 16, Utilisation d’autres applications, page 353.
Pour afficher un menu contextuel dans un document, vous devez ouvrir ce dernier dans la fen&ecirc;tre
d’un navigateur, puis placer le pointeur sur l’image ou le lien de d&eacute;clenchement.
Pour utiliser l’action Afficher le menu contextuel :
1 S&eacute;lectionnez un objet &agrave; associer au comportement et ouvrez le panneau Comportements
(Maj+F3).
2 Cliquez sur le bouton plus (+) et choisissez Afficher le menu contextuel dans le menu contextuel
Actions.
3 Dans la bo&icirc;te de dialogue Afficher le menu contextuel qui s’affiche, utilisez les onglets suivants
pour d&eacute;finir les options du menu contextuel :
Sommaire permet de d&eacute;finir le nom, la structure, l’URL et la cible des &eacute;l&eacute;ments de menu
individuels.
Aspect permet de d&eacute;finir l’apparence de l’Etat En haut et de l’Etat Survol&eacute; du menu et de
d&eacute;finir la police du texte de l’&eacute;l&eacute;ment de menu.
Avanc&eacute; permet de d&eacute;finir les propri&eacute;t&eacute;s des cellules du menu. Par exemple, vous pouvez
d&eacute;finir la largeur et la hauteur des cellules, la couleur des cellules ou des bordures, le retrait du
texte et le d&eacute;lai entre le moment o&ugrave; l’utilisateur place le pointeur sur le d&eacute;clencheur et
l’apparition du menu correspondant.
Position permet de d&eacute;finir l’emplacement du menu par rapport &agrave; l’image ou au lien de
d&eacute;clenchement.
Ajout, suppression et modification de l’ordre des &eacute;l&eacute;ments du menu
contextuel
Vous pouvez utiliser l’onglet Sommaire de la bo&icirc;te de dialogue Afficher le menu contextuel pour
cr&eacute;er des &eacute;l&eacute;ments de menu. Cet onglet permet &eacute;galement de supprimer des &eacute;l&eacute;ments ou de
modifier l’ordre dans lequel ils apparaissent dans un menu.
Pour ajouter des &eacute;l&eacute;ments de menu contextuel :
1 Dans l’onglet Sommaire, cr&eacute;ez un &eacute;l&eacute;ment de menu contextuel en proc&eacute;dant comme suit :
406
Chapitre 18 : Utilisation des comportements JavaScript
Dans la zone Texte, s&eacute;lectionnez le texte par d&eacute;faut (Nouvel &eacute;l&eacute;ment), puis tapez le texte que
vous souhaitez voir appara&icirc;tre dans le menu contextuel.
2 Si vous le souhaitez, d&eacute;finissez des options compl&eacute;mentaires :
Si vous voulez que l’&eacute;l&eacute;ment de menu ouvre un autre fichier lorsque vous cliquez dessus, dans
la zone Lien, tapez le chemin d’acc&egrave;s au fichier ou cliquez sur l’ic&ocirc;ne de dossier et s&eacute;lectionnez
le document &agrave; ouvrir.
Si vous souhaitez d&eacute;finir l’endroit o&ugrave; le document va s’ouvrir (une nouvelle fen&ecirc;tre ou un cadre
donn&eacute;, par exemple), choisissez l’emplacement de votre choix dans le menu d&eacute;roulant Cible.
Remarque : Si l’image que vous voulez d&eacute;finir comme cible ne figure pas dans le menu d&eacute;roulant
Cible, fermez la bo&icirc;te de dialogue Afficher le menu contextuel puis, dans la fen&ecirc;tre de document,
s&eacute;lectionnez un cadre et attribuez-lui un nom.
3 Cliquez sur le bouton plus (+) pour ajouter des entr&eacute;es &agrave; la liste d’aper&ccedil;u Afficher le menu
contextuel.
Ensuite, cliquez sur OK pour accepter les param&egrave;tres par d&eacute;faut ou s&eacute;lectionnez un autre
onglet de la bo&icirc;te de dialogue Afficher le menu contextuel pour d&eacute;finir des options
suppl&eacute;mentaires.
Pour cr&eacute;er un &eacute;l&eacute;ment de sous-menu :
Dans la liste Afficher le menu contextuel, s&eacute;lectionnez l’&eacute;l&eacute;ment devant appara&icirc;tre dans un sousmenu, puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
• Pour mettre un &eacute;l&eacute;ment de la liste en retrait, cliquez sur le bouton El&eacute;ment indent&eacute;.
• Pour supprimer le retrait, cliquez sur le bouton El&eacute;ment en retrait n&eacute;gatif.
Remarque : L’&eacute;l&eacute;ment de menu principal d’une liste ne peut pas &ecirc;tre d&eacute;fini comme &eacute;l&eacute;ment de
sous-menu.
Pour modifier l’ordre des &eacute;l&eacute;ments dans un menu :
• Dans la liste Afficher le menu contextuel, s&eacute;lectionnez l’&eacute;l&eacute;ment que vous voulez d&eacute;placer, puis
cliquez sur la fl&egrave;che haut ou bas pour le placer &agrave; l’endroit souhait&eacute;.
Pour supprimer un &eacute;l&eacute;ment du menu :
1 Dans l’onglet Sommaire, s&eacute;lectionnez l’entr&eacute;e de menu que vous voulez supprimer de la liste
Afficher le menu contextuel.
2 Cliquez sur le bouton moins (-).
D&eacute;finition de l’apparence d’un menu contextuel
Lorsque vous avez cr&eacute;&eacute; les &eacute;l&eacute;ments de menu, cliquez sur l’onglet Aspect de la bo&icirc;te de dialogue
Afficher le menu contextuel pour d&eacute;finir l’orientation, ainsi que les attributs de police et d’&eacute;tat des
boutons du menu contextuel.
Remarque : Le volet d’aper&ccedil;u de l’onglet Aspect affiche un rendu approximatif des options d&eacute;finies
dans cet onglet.
Pour d&eacute;finir l’apparence d’un menu contextuel :
1 Dans le menu d&eacute;roulant situ&eacute; en haut de l’onglet Aspect, choisissez Menu vertical ou Menu
horizontal pour d&eacute;finir l’orientation du menu.
2 D&eacute;finissez les options de formatage du texte :
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
407
Dans le menu d&eacute;roulant Police, s&eacute;lectionnez la police que vous souhaitez appliquer aux
&eacute;l&eacute;ments de menu.
Remarque : Si la police que vous souhaitez utiliser ne figure pas dans la liste, s&eacute;lectionnez l’option
Modifier la liste des polices pour ajouter la police de votre choix &agrave; la liste. Choisissez une police que
les visiteurs du site sont susceptibles d’utiliser.
D&eacute;finissez la taille de la police, les attributs de style, ainsi que les options d’alignement et de
justification du texte qui seront assign&eacute;s au texte de l’&eacute;l&eacute;ment de menu.
3 Dans les zones Etat En haut et Etat Survol&eacute;, utilisez le s&eacute;lecteur de couleur pour d&eacute;finir les
couleurs du texte et des cellules des boutons d’&eacute;l&eacute;ment de menu.
4 Ensuite, cliquez sur OK ou s&eacute;lectionnez un autre onglet Afficher le menu contextuel pour
d&eacute;finir des options suppl&eacute;mentaires..
D&eacute;finition des options d’apparence avanc&eacute;es
Utilisez les options de l’onglet Avanc&eacute; pour sp&eacute;cifier d’autres attributs pour les cellules de menu.
Par exemple, vous pouvez d&eacute;finir la largeur, la hauteur, l’espacement ou le remplissage des cellules
du bouton de menu, le retrait du texte et les attributs de bordure.
Pour d&eacute;finir les attributs de formatage avanc&eacute;s d’un menu contextuel :
1 Cliquez sur l’onglet Avanc&eacute;, puis d&eacute;finissez les options que vous souhaitez appliquer aux
&eacute;l&eacute;ments de menu :
Largeur des cellules d&eacute;finit une largeur sp&eacute;cifique en pixels pour les boutons de menu. Cette
largeur est automatiquement d&eacute;finie en fonction de l’&eacute;l&eacute;ment le plus large. Pour l’augmenter,
s&eacute;lectionnez Pixels dans le menu d&eacute;roulant et entrez une valeur sup&eacute;rieure &agrave; celle qui figure
dans la zone de texte Largeur des cellules.
Hauteur des cellules d&eacute;finit une hauteur sp&eacute;cifique en pixels pour les boutons de menu. Pour
l’augmenter, s&eacute;lectionnez Pixels dans le menu d&eacute;roulant et entrez une valeur sup&eacute;rieure &agrave; celle
qui figure dans la zone de texte Hauteur des cellules.
Marge des cellules indique le nombre de pixels qui s&eacute;pare le contenu d’une cellule et ses
limites.
Espacement des cellules indique le nombre de pixels qui s&eacute;pare des cellules adjacentes.
Retrait du texte permet de sp&eacute;cifier le retrait du texte en pixels dans la cellule.
D&eacute;lai de menu d&eacute;finit le d&eacute;lai entre le moment o&ugrave; l’utilisateur place le pointeur sur l’image ou
le lien de d&eacute;clenchement et l’apparition du menu correspondant. Les valeurs &eacute;tant en
millisecondes, le param&egrave;tre par d&eacute;faut 1 000 &eacute;quivaut &agrave; 1 seconde. Ajoutez 000 pour chaque
seconde de d&eacute;lai suppl&eacute;mentaire ; par exemple, tapez 3 000 pour d&eacute;finir un d&eacute;lai de
3 secondes.
Bordures d&eacute;roulantes d&eacute;termine si une bordure appara&icirc;t ou non autour des &eacute;l&eacute;ments du
menu. Si vous souhaitez ajouter une bordure, assurez-vous que la case &agrave; cocher Afficher les
bordures est activ&eacute;e.
Largeur de la bordure d&eacute;finit la largeur de la bordure en pixels.
Ombre, Couleur de la bordure et Mettre en surbrillance permettent de s&eacute;lectionner une
couleur de bordure. Les options d’ombre et de mise en surbrillance n’apparaissent pas en mode
d’aper&ccedil;u.
2 Lorsque vous avez d&eacute;fini les options d’apparence avanc&eacute;es, cliquez sur OK ou s&eacute;lectionnez un
autre onglet Afficher le menu contextuel pour d&eacute;finir des options suppl&eacute;mentaires.
408
Chapitre 18 : Utilisation des comportements JavaScript
D&eacute;finition de la position d’un menu contextuel dans un document
Utilisez les options de position pour d&eacute;finir l’emplacement de l’affichage du menu par rapport &agrave;
l’image ou au lien de d&eacute;clenchement. Vous pouvez &eacute;galement d&eacute;finir si le menu doit &ecirc;tre masqu&eacute;
ou non lorsque l’utilisateur &eacute;loigne le pointeur du d&eacute;clencheur.
Pour d&eacute;finir les options de position du menu contextuel :
1 Dans la bo&icirc;te de dialogue Afficher le menu contextuel, cliquez sur l’onglet Position.
2 D&eacute;finissez la position du menu contextuel en utilisant l’une des m&eacute;thodes suivantes :
S&eacute;lectionnez l’une des options pr&eacute;d&eacute;finies.
■ D&eacute;finissez des coordonn&eacute;es de position personnalis&eacute;es en tapant un nombre dans la zone de
texte X (coordonn&eacute;e horizontale) et dans la zone de texte Y (coordonn&eacute;e verticale). L’angle
sup&eacute;rieur gauche du menu d&eacute;finit le point initial des coordonn&eacute;es.
3 Pour masquer le menu contextuel lorsque le pointeur ne le survole pas, assurez-vous que l’option
Masquer le menu suite &agrave; l’&eacute;v&eacute;nement onMouseOut est activ&eacute;e. D&eacute;s&eacute;lectionnez cette option si
vous voulez que le menu reste affich&eacute;.
4 Lorsque vous avez cr&eacute;&eacute; ou modifi&eacute; le menu contextuel, cliquez sur OK.
■
Modification d’un menu contextuel
Le comportement Afficher le menu contextuel permet de modifier ou de mettre &agrave; jour le contenu
d’un menu contextuel. Vous pouvez ajouter, supprimer ou modifier les &eacute;l&eacute;ments de menu et
d&eacute;finir la position d’un menu par rapport &agrave; l’image ou au lien de d&eacute;clenchement.
Pour ouvrir un menu contextuel HTML :
1 Dans le document Dreamweaver, s&eacute;lectionnez le lien ou l’image qui d&eacute;clenche le menu
contextuel.
2 Ouvrez le panneau Comportements (Maj+F3), si ce n’est d&eacute;j&agrave; fait, puis dans la liste Actions,
double-cliquez sur Afficher le menu contextuel.
La bo&icirc;te de dialogue Afficher le menu contextuel appara&icirc;t.
3 Modifiez le menu contextuel comme bon vous semble.
4 Lorsque vous avez modifi&eacute; le menu contextuel, cliquez sur OK.
Pour plus d’informations sur la d&eacute;finition des options de menu contextuel, voir Afficher le menu
contextuel, page 406.
Permuter une image
Cette action remplace une image par une autre, en modifiant l’attribut src de la balise img.
Utilisez cette action pour cr&eacute;er des substitutions de boutons et autres effets sur des images (y
compris la substitution de plusieurs images &agrave; la fois). L’insertion d’une image survol&eacute;e ajoute
automatiquement &agrave; votre page un comportement Permuter une image.
Remarque : Seul l’attribut src &eacute;tant affect&eacute; par cette action, l’image de substitution doit en principe
avoir les m&ecirc;mes dimensions (hauteur et largeur) que l’original. Sans cela, l’image intervertie
appara&icirc;trait d&eacute;form&eacute;e (compact&eacute;e ou &eacute;largie) par rapport &agrave; l’original.
Pour utiliser l’action Intervertir une image :
1 Choisissez Insertion &gt; Image ou cliquez sur le bouton Image de la barre Ins&eacute;rer pour ins&eacute;rer une
image.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
409
2 Dans l’inspecteur de propri&eacute;t&eacute;s, indiquez un nom pour l’image dans la zone de texte situ&eacute;e &agrave;
l’extr&ecirc;me gauche.
L’action Permuter une image fonctionnera m&ecirc;me si vous ne donnez pas de noms &agrave; vos images ;
en effet, les images sans nom en re&ccedil;oivent automatiquement un lorsque vous associez de
comportement &agrave; un objet. Toutefois, il vous sera plus facile de distinguer les images propos&eacute;es
dans la bo&icirc;te de dialogue Permuter une image si vous avez vous-m&ecirc;me attribu&eacute; un nom &agrave; ces
images.
3 R&eacute;p&eacute;tez les &eacute;tapes 1 et 2 si vous souhaitez ins&eacute;rer des images suppl&eacute;mentaires.
4 S&eacute;lectionnez un objet (en g&eacute;n&eacute;ral, l’image que vous voulez remplacer) et ouvrez le panneau
Comportements.
5 Cliquez sur le bouton plus (+) et s&eacute;lectionnez Permuter une image dans le menu contextuel
Actions.
6 S&eacute;lectionnez l’image dont vous voulez modifier la source dans la liste Images.
7 Cliquez sur Parcourir pour s&eacute;lectionner le nouveau fichier d’image ou indiquez son chemin
d’acc&egrave;s et son nom de fichier dans la zone de texte D&eacute;finir la source &agrave;.
8 R&eacute;p&eacute;tez les &eacute;tapes 6 et 7 si vous d&eacute;sirez ajouter d’autres images &agrave; modifier. Utilisez la m&ecirc;me
action Permuter l’image pour toutes les images que vous voulez modifier simultan&eacute;ment ; dans
le cas contraire, l’action correspondante Restaurer l’image intervertie ne les restaurerait pas
toutes.
9 S&eacute;lectionnez l’option Pr&eacute;charger les images pour charger les nouvelles images dans la m&eacute;moire
cache du navigateur lors du chargement de la page.
Cela &eacute;vite &agrave; l’utilisateur d’attendre que ces images soient charg&eacute;es, lorsqu’un &eacute;v&eacute;nement
d&eacute;clenche leur apparition.
10 Cliquez sur OK.
11 V&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien l’&eacute;v&eacute;nement d&eacute;sir&eacute;.
Si ce n’est pas le cas, s&eacute;lectionnez-en un autre dans le menu d&eacute;roulant. Si les &eacute;v&eacute;nements d&eacute;sir&eacute;s
ne sont pas r&eacute;pertori&eacute;s, changez de navigateur cible dans le menu d&eacute;roulant Afficher les
&eacute;v&eacute;nements pour.
Restaurer l’image intervertie
L’action Restaurer l’image intervertie restaure la derni&egrave;re interversion d’images &agrave; son &eacute;tat
ant&eacute;rieur. Elle est automatiquement ajout&eacute;e lorsque vous associez l’action Permuter une image &agrave;
un objet ; en principe, si vous avez laiss&eacute; cette option activ&eacute;e en associant l’action Permuter une
image, vous n’avez pas besoin de l’utiliser manuellement.
Valider le formulaire
Cette action teste le contenu des champs texte indiqu&eacute;s pour v&eacute;rifier que l’utilisateur a entr&eacute; le
type de donn&eacute;es correct. Associez cette action &agrave; des champs de texte individuels &agrave; l’aide de
l’&eacute;v&eacute;nement onBlur pour valider ces champs au fur et &agrave; mesure que l’utilisateur remplit le
formulaire ou associez-le au formulaire &agrave; l’aide de l’&eacute;v&eacute;nement onSubmit pour &eacute;valuer divers
champs simultan&eacute;ment lorsque l’utilisateur clique sur le bouton d’envoi. Associez cette action au
formulaire pour &eacute;viter qu’il ne soit envoy&eacute; au serveur si l’un des champs de texte contient des
donn&eacute;es non valides.
410
Chapitre 18 : Utilisation des comportements JavaScript
Pour utiliser l’action Valider le formulaire :
1 Pour ins&eacute;rer un formulaire, choisissez Insertion &gt; Formulaire ou cliquez sur le bouton
Formulaire de la barre Ins&eacute;rer.
2 Pour ins&eacute;rer un champ texte, choisissez Insertion &gt; Objets de formulaire &gt; Champ de texte ou
cliquez sur le bouton Champ de texte de la barre Ins&eacute;rer.
R&eacute;p&eacute;tez cette &eacute;tape pour ins&eacute;rer plusieurs champs texte.
3 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Pour valider les champs individuellement au fur et &agrave; mesure que l’utilisateur remplit le
formulaire, s&eacute;lectionnez un champ texte et choisissez Fen&ecirc;tre &gt; Comportements.
■ Pour valider plusieurs champs lorsque l’utilisateur envoie le formulaire, cliquez sur la balise
&lt;form&gt; dans le s&eacute;lecteur de balises situ&eacute; dans l’angle inf&eacute;rieur gauche de la fen&ecirc;tre de
document, puis choisissez Fen&ecirc;tre &gt; Comportements.
4 S&eacute;lectionnez Valider le formulaire dans le menu contextuel Actions.
5 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■ Si vous validez des champs individuellement, s&eacute;lectionnez, dans la liste Champs nomm&eacute;s, le
champ que vous avez s&eacute;lectionn&eacute; dans la fen&ecirc;tre de document.
■ Si vous validez plusieurs champs &agrave; la fois, s&eacute;lectionnez un champ texte dans la liste Champs
nomm&eacute;s.
6 Activez l’option Obligatoire si le champ doit obligatoirement contenir des donn&eacute;es.
7 Dans la zone Accepter, s&eacute;lectionnez l’une des options suivantes :
Utilisez l’option Tout si le champ doit &ecirc;tre rempli, sans pour autant contenir un type
particulier de donn&eacute;es (si l’option Obligatoire n’a pas &eacute;t&eacute; activ&eacute;e, cette option n’a aucun
int&eacute;r&ecirc;t, puisque le r&eacute;sultat sera accept&eacute; dans tous les cas, comme si l’action Valider le formulaire
n’&eacute;tait pas associ&eacute;e au champ).
Utilisez l’option Adresse e-mail pour v&eacute;rifier que le champ contient un symbole @.
Utilisez Nombre pour v&eacute;rifier que le champ ne contient que des caract&egrave;res num&eacute;riques.
Utilisez Nombre de pour v&eacute;rifier que le champ ne contient que des valeurs num&eacute;riques
comprises dans la plage indiqu&eacute;e.
8 Si vous validez plusieurs champs, r&eacute;p&eacute;tez les &eacute;tapes 6 et 7 pour tout champ suppl&eacute;mentaire &agrave;
valider.
9 Cliquez sur OK.
Si vous validez plusieurs champs lorsque l’utilisateur envoie le formulaire, l’&eacute;v&eacute;nement
onSubmit appara&icirc;t automatiquement dans le menu d&eacute;roulant Ev&eacute;nements.
10 Si vous validez des champs individuellement, v&eacute;rifiez que l’&eacute;v&eacute;nement par d&eacute;faut est bien
onBlur ou onChange.
Si ce n’est pas les cas, s&eacute;lectionnez onBlur ou onChange dans le menu d&eacute;roulant. Ces deux
&eacute;v&eacute;nements d&eacute;clenchent l’action Valider le formulaire d&egrave;s que l’utilisateur sort du champ
concern&eacute;. La diff&eacute;rence entre ces deux &eacute;v&eacute;nements est que onBlur est toujours d&eacute;clench&eacute;, que
l’utilisateur ait saisi ou non du texte dans le champ, alors que onChange n’est d&eacute;clench&eacute; que si
l’utilisateur a modifi&eacute; le contenu du champ. L’&eacute;v&eacute;nement onBlur est pr&eacute;f&eacute;rable si vous avez
sp&eacute;cifi&eacute; que ce champ doit &ecirc;tre rempli.
Utilisation des actions de comportement livr&eacute;es avec Dreamweaver
411
412
Chapitre 18 : Utilisation des comportements JavaScript
Cr&eacute;ez ou modifiez des pages &agrave; l’aide des outils de codage avanc&eacute; de Macromedia
Dreamweaver MX 2004.
Cette partie du manuel contient les chapitres suivants :
Chapitre 19, Configuration d’un environnement de codage, page 415
Chapitre 20, Codage dans Dreamweaver, page 429
Chapitre 21, Optimisation et d&eacute;bogage de code, page 447
Chapitre 22, Modification du code en mode Cr&eacute;ation, page 455
PARTIE V
PARTIE V
Utilisation du code de page
CHAPITRE 19
Configuration d’un environnement de codage
Vous pouvez adapter l’environnement de codage de Macromedia Dreamweaver MX 2004 &agrave; votre
propre m&eacute;thode de travail. Vous pouvez par exemple changer le mode d’affichage du code, d&eacute;finir
diff&eacute;rents raccourcis clavier ou importer et utiliser votre biblioth&egrave;que de balises de pr&eacute;dilection.
Ce chapitre couvre les sujets suivants :
•
•
•
•
•
•
•
•
•
•
Affichage du code, page 416
Utilisation de l’espace de travail orient&eacute; en mode Code (Windows uniquement), page 417
D&eacute;finition des pr&eacute;f&eacute;rences d’affichage, page 417
D&eacute;finition des pr&eacute;f&eacute;rences de codage, page 418
Personnalisation des raccourcis clavier, page 420
Ouverture de fichiers en mode Code par d&eacute;faut, page 420
D&eacute;finition des pr&eacute;f&eacute;rences du programme de validation, page 420
Gestion des biblioth&egrave;ques de balises, page 421
Importation de balises personnalis&eacute;es dans Dreamweaver, page 424
Utilisation d’un &eacute;diteur HTML externe avec Dreamweaver, page 426
415
Affichage du code
Vous pouvez visualiser le code source du document actif de plusieurs fa&ccedil;ons : en l’affichant dans la
fen&ecirc;tre de document apr&egrave;s avoir activ&eacute; le mode Code, en fractionnant la fen&ecirc;tre de document
pour afficher &agrave; la fois la page et son code, ou encore en travaillant dans l’inspecteur de code, qui
forme une fen&ecirc;tre de code distincte. L’inspecteur de code fonctionne comme le mode Code ; il
peut &ecirc;tre consid&eacute;r&eacute; comme un mode Code d&eacute;tachable pour le document actif.
Cette section explique comment modifier le mode d’affichage du code.
Pour afficher le code dans la fen&ecirc;tre de document :
• Choisissez Affichage &gt; Code.
Pour pouvoir coder tout en modifiant visuellement une page dans la fen&ecirc;tre de document :
1 Choisissez Affichage&gt; Code et cr&eacute;ation.
Le code appara&icirc;t dans le volet sup&eacute;rieur, et la page dans le volet inf&eacute;rieur.
2 Pour afficher la page au premier plan, choisissez Affichage &gt; Mode Cr&eacute;ation au premier plan.
3 Pour redimensionner les volets dans la fen&ecirc;tre de document, faites glisser la barre de division &agrave;
l’endroit appropri&eacute;.
La barre de division est intercal&eacute;e entre les deux volets.
Toutes les modifications apport&eacute;es dans le mode Cr&eacute;ation se r&eacute;percutent automatiquement
dans le mode Code. Toutefois, apr&egrave;s avoir effectu&eacute; des modifications en mode Code, vous
devez mettre &agrave; jour manuellement le document dans le mode Cr&eacute;ation ; il vous suffit pour cela
de cliquer dans ce mode ou d’appuyer sur la touche F5.
Pour afficher le code dans une fen&ecirc;tre distincte :
• Choisissez Fen&ecirc;tre &gt; Autres &gt; Inspecteur de code.
416
Chapitre 19 : Configuration d’un environnement de codage
Utilisation de l’espace de travail orient&eacute; en mode Code
(Windows uniquement)
Sous Windows, vous pouvez utiliser un espace de travail semblable &agrave; celui de Macromedia
HomeSite, avec les groupes de panneaux rang&eacute;s &agrave; gauche de la fen&ecirc;tre principale et non &agrave; droite.
Dans cette pr&eacute;sentation de l’espace de travail, l’inspecteur de propri&eacute;t&eacute;s est r&eacute;duit par d&eacute;faut et la
fen&ecirc;tre de document s’affiche en mode Code par d&eacute;faut. Pour plus de pr&eacute;cisions quant &agrave;
l’utilisation de cette option, voir Choix de la pr&eacute;sentation de l’espace de travail (sous Windows
uniquement), page 58.
Groupes de panneaux
Panneau Fichiers
S&eacute;lecteur de balises
Barre
Ins&eacute;rer
Barre d’outils du document
Inspecteur de propri&eacute;t&eacute;s (r&eacute;duit)
Fen&ecirc;tre de document
Rubriques connexes
• Ouverture de fichiers en mode Code par d&eacute;faut, page 420.
D&eacute;finition des pr&eacute;f&eacute;rences d’affichage
Vous pouvez configurer le renvoi &agrave; la ligne des mots, l’affichage du num&eacute;ro des lignes de code, la
mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des &eacute;l&eacute;ments de code
ainsi que la mise en retrait du code &agrave; partir du menu Affichage &gt; Options d’affichage de code.
Pour d&eacute;finir les options dans le mode Code et dans l’inspecteur de code :
1 Affichez le document dans le mode Code ou l’inspecteur de code.
2 Cliquez sur le menu Options d’affichage dans la barre d’outils situ&eacute;e en haut du mode Code ou
de l’inspecteur de code.
Les options d&eacute;finies ant&eacute;rieurement sont pr&eacute;c&eacute;d&eacute;es d’une coche dans le menu contextuel qui
appara&icirc;t.
3 Pour activer ou d&eacute;sactiver des options, s&eacute;lectionnez-les dans le menu.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
D&eacute;finition des pr&eacute;f&eacute;rences d’affichage
417
D&eacute;finition des pr&eacute;f&eacute;rences de codage
Vous pouvez personnaliser l’environnement de codage de Dreamweaver afin de l’adapter &agrave; vos
besoins en d&eacute;finissant, par exemple, les pr&eacute;f&eacute;rences de formatage de code, de correction et de
couleur.
Remarque : Pour d&eacute;finir les pr&eacute;f&eacute;rences avanc&eacute;es, utilisez l’&eacute;diteur de la biblioth&egrave;que de balises (voir
Gestion des biblioth&egrave;ques de balises, page 421).
D&eacute;finition des pr&eacute;f&eacute;rences de formatage du code
Vous pouvez modifier l’aspect de votre code en d&eacute;finissant des pr&eacute;f&eacute;rences de formatage telles que
la mise en retrait, la longueur de ligne et la casse des noms de balises et d’attributs.
Notez que toutes les pr&eacute;f&eacute;rences, &agrave; l’exception de Remplacer la casse de, affectent uniquement les
nouveaux documents et les nouvelles additions aux documents existants. En d’autres termes,
lorsque vous ouvrez un document HTML d&eacute;j&agrave; cr&eacute;&eacute;, ces options de mise en forme ne lui sont pas
appliqu&eacute;es. Pour modifier la mise en forme du code de documents HTML existants, utilisez la
commande Appliquer le format source. Pour plus d’informations, voir Application de nouvelles
pr&eacute;f&eacute;rences de formatage aux documents existants, page 418.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de formatage de code :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez la cat&eacute;gorie Format du code dans la liste de gauche.
Les pr&eacute;f&eacute;rences Format de code s’affichent.
3 Ajustez les param&egrave;tres dans la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Application de nouvelles pr&eacute;f&eacute;rences de formatage aux documents existants
Les options de formatage de code d&eacute;finies dans les pr&eacute;f&eacute;rences Format de code ne s’appliquent
automatiquement qu’aux documents nouvellement cr&eacute;&eacute;s dans Dreamweaver. Vous pouvez
n&eacute;anmoins appliquer ces nouvelles pr&eacute;f&eacute;rences aux documents existants.
Pour appliquer les nouvelles pr&eacute;f&eacute;rences de formatage &agrave; un document existant :
1 Ouvrez le document dans Dreamweaver.
2 Choisissez Commandes &gt; Appliquer le format source.
D&eacute;finition des pr&eacute;f&eacute;rences d’indicateurs de code
Les indicateurs de code vous permettent d’ins&eacute;rer rapidement des noms de balises, des attributs et
des valeurs &agrave; mesure que vous entrez du code. Pour plus d’informations, voir Utilisation des
indicateurs de code, page 437.
Conseil : M&ecirc;me si l’affichage des indicateurs de code est d&eacute;sactiv&eacute;, vous pouvez afficher un
indicateur en mode Code en appuyant sur les touches Ctrl+Barre d’espace.
Pour d&eacute;finir les pr&eacute;f&eacute;rences d’indicateur de code :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez la cat&eacute;gorie Indicateurs de code dans la liste de gauche.
Les pr&eacute;f&eacute;rences d’indicateur de code s’affichent.
418
Chapitre 19 : Configuration d’un environnement de codage
3 Ajustez les param&egrave;tres dans la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Rubriques connexes
• Utilisation des indicateurs de code, page 437
D&eacute;finition des pr&eacute;f&eacute;rences de correction de code
A l’ouverture d’un document, Dreamweaver r&eacute;pare (ou corrige) certains types de code non valide
selon les pr&eacute;f&eacute;rences de correction sp&eacute;cifi&eacute;es (ces pr&eacute;f&eacute;rences sont sans effet lorsque vous modifiez
du code HTML ou des scripts dans le mode Code).
Si vous d&eacute;sactivez ces options de correction, Dreamweaver affiche les &eacute;l&eacute;ments de marquage non
valides dans la fen&ecirc;tre de document pour le code HTML qu’il aurait corrig&eacute;.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de correction de code :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Correction du code dans la liste de gauche.
Les pr&eacute;f&eacute;rences de correction du code s’affichent.
3 Ajustez les param&egrave;tres dans la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Rubriques connexes
• Importation d’un fichier HTML Microsoft Word, page 80
D&eacute;finition des pr&eacute;f&eacute;rences de coloration du code
Utilisez les pr&eacute;f&eacute;rences de coloration du code pour sp&eacute;cifier les couleurs des principales cat&eacute;gories
de balises et d’&eacute;l&eacute;ments de code, par exemple les balises li&eacute;es &agrave; la mise en forme ou les
identificateurs JavaScript. Pour d&eacute;finir les pr&eacute;f&eacute;rences de coloration d’une balise sp&eacute;cifique,
modifiez sa d&eacute;finition dans l’&eacute;diteur de la biblioth&egrave;que de balises. Pour plus d’informations, voir
Modification de biblioth&egrave;ques, de balises et d’attributs, page 422.
Pour d&eacute;finir les pr&eacute;f&eacute;rences de coloration de code :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Coloration du code dans la liste de gauche.
Les pr&eacute;f&eacute;rences de coloration de code s’affichent.
3 Ajustez les param&egrave;tres dans la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Rubriques connexes
• Personnalisation des pr&eacute;f&eacute;rences de coloration de code d’un mod&egrave;le, page 239
D&eacute;finition des pr&eacute;f&eacute;rences de codage
419
Personnalisation des raccourcis clavier
Rien ne vous emp&ecirc;che d’utiliser vos raccourcis clavier pr&eacute;f&eacute;r&eacute;s dans Dreamweaver. Si vous &ecirc;tes
habitu&eacute; &agrave; utiliser des raccourcis clavier sp&eacute;cifiques (par exemple, Ctrl+Entr&eacute;e pour ins&eacute;rer un saut
de ligne, Ctrl+G pour atteindre un code pr&eacute;cis ou Maj+F6 pour valider un fichier), vous pouvez
les int&eacute;grer dans Dreamweaver au moyen de l’&eacute;diteur de raccourcis clavier. Pour plus
d’informations, voir Personnalisation des raccourcis clavier, page 60.
Rubriques connexes
Manipulation des fragments de code, page 438
Ouverture de fichiers en mode Code par d&eacute;faut
Lorsque vous ouvrez un fichier qui ne contient normalement aucun code HTML (par exemple,
un fichier JavaScript), il s’ouvre en mode Code (ou dans l’inspecteur de code), et non pas en
mode Cr&eacute;ation. Vous pouvez d&eacute;finir les types de fichiers &agrave; ouvrir en mode Code.
Pour d&eacute;finir le mode par d&eacute;faut des fichiers non HTML :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Types de fichiers/Editeurs dans la liste de gauche.
Les pr&eacute;f&eacute;rences Types de fichiers/Editeurs s’affichent.
3 Dans la zone de texte Ouvrir en mode Code, entrez les extensions des types de fichier que vous
voulez ouvrir automatiquement en mode Code.
Ins&eacute;rez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.
D&eacute;finition des pr&eacute;f&eacute;rences du programme de validation
Le validateur de Dreamweaver vous permet de rep&eacute;rer rapidement les erreurs de balise et de
syntaxe pr&eacute;sentes dans le code (voir Validation de balises, page 451). Vous pouvez sp&eacute;cifier les
langages de balise qui serviront de r&eacute;f&eacute;rence au validateur pour ses v&eacute;rifications, les probl&egrave;mes
sp&eacute;cifiques que le validateur doit relever, ainsi que les types d’erreurs qu’il doit signaler.
Pour d&eacute;finir les pr&eacute;f&eacute;rences du validateur :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences (Windows) ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Macintosh).
2 S&eacute;lectionnez la cat&eacute;gorie Programme de validation dans la liste de gauche.
Les pr&eacute;f&eacute;rences du validateur s’affichent.
3 S&eacute;lectionnez les biblioth&egrave;ques de balises &agrave; utiliser pour la validation et d&eacute;finissez les options de
ces librairies.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
420
Chapitre 19 : Configuration d’un environnement de codage
Gestion des biblioth&egrave;ques de balises
Dans Dreamweaver, une biblioth&egrave;que de balises est une collection de balises d’un type donn&eacute;
accompagn&eacute;e d’informations sur le formatage des balises par Dreamweaver. Les biblioth&egrave;ques de
balises fournissent des informations &agrave; propos des balises utilis&eacute;es par Dreamweaver pour les
indicateurs de code, les v&eacute;rifications de navigateurs cibles, le s&eacute;lecteur de balises et autres options
de codage. L’&eacute;diteur de la biblioth&egrave;que de balises vous permet d’ajouter et de supprimer des
biblioth&egrave;ques de balises, des balises et des attributs, de d&eacute;finir les propri&eacute;t&eacute;s d’une biblioth&egrave;que de
balises, mais aussi de modifier les balises et les attributs.
Voir aussi Importation de balises personnalis&eacute;es dans Dreamweaver, page 424.
Ouverture et fermeture de l’&eacute;diteur de la biblioth&egrave;que de balises
Utilisez l’&eacute;diteur de la biblioth&egrave;que de balises pour g&eacute;rer vos biblioth&egrave;ques de balises.
Pour ouvrir l’&eacute;diteur de la biblioth&egrave;que de balises :
• Choisissez Edition &gt; Biblioth&egrave;ques de balises.
L’&eacute;diteur de la biblioth&egrave;que de balises s’affiche (le contenu de cette bo&icirc;te de dialogue varie selon la
balise s&eacute;lectionn&eacute;e).
Pour fermer l’&eacute;diteur de la biblioth&egrave;que de balises et enregistrer vos modifications :
• Cliquez sur OK.
Pour fermer l’&eacute;diteur de la biblioth&egrave;que de balises sans enregistrer vos modifications :
• Cliquez sur Annuler.
Gestion des biblioth&egrave;ques de balises
421
Remarque : Lorsque vous cliquez sur Annuler, toutes les modifications apport&eacute;es &agrave; la
biblioth&egrave;que de balises sont effac&eacute;es. Si vos modifications incluaient la suppression d’une balise
ou d’une biblioth&egrave;que, celle-ci est restaur&eacute;e.
Ajout de biblioth&egrave;ques, de balises et d’attributs
L’&eacute;diteur de la biblioth&egrave;que de balises de Dreamweaver vous permet d’ajouter des biblioth&egrave;ques
de balises ou des balises et des attributs aux biblioth&egrave;ques de balises.
Remarque : Pour importer une balise, voir Importation de balises personnalis&eacute;es dans Dreamweaver,
page 424.
Pour ajouter une biblioth&egrave;que de balises :
1 Dans la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de
balises), cliquez sur le bouton Plus (+) et choisissez Nouvelle biblioth&egrave;que de balises.
La bo&icirc;te de dialogue Nouvelle biblioth&egrave;que de balises s’affiche.
2 Dans la zone de texte Nom de la biblioth&egrave;que, entrez un nom (par exemple, balises diverses).
3 Cliquez sur OK.
Pour ajouter une balise dans une biblioth&egrave;que :
1 Dans la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de
balises), cliquez sur le bouton Plus (+) et choisissez Nouvelles balises.
La bo&icirc;te de dialogue Nouvelles balises s’affiche.
2 Ajustez les param&egrave;tres dans la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Pour ajouter un ou plusieurs attributs &agrave; une balise :
1 Dans la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de
balises), cliquez sur le bouton Plus (+) et choisissez Nouveaux attributs.
La bo&icirc;te de dialogue Nouveaux attributs s’affiche.
2 Ajustez les param&egrave;tres dans la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• Gestion des biblioth&egrave;ques de balises, page 421
• Suppression de biblioth&egrave;ques, de balises et d’attributs, page 424
Modification de biblioth&egrave;ques, de balises et d’attributs
Vous pouvez utiliser l’&eacute;diteur de la biblioth&egrave;que de balises pour d&eacute;finir les propri&eacute;t&eacute;s d’une
biblioth&egrave;que de balises ou modifier les balises et les attributs d’une biblioth&egrave;que, qu’il s’agisse de
leurs attributs, de leurs valeurs ou de leur format (pour simplifier l’identification du code).
Pour d&eacute;finir les propri&eacute;t&eacute;s d’une biblioth&egrave;que de balises :
1 Dans la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de
balises), s&eacute;lectionnez une biblioth&egrave;que de balises (et non une balise) dans la liste des balises.
422
Chapitre 19 : Configuration d’un environnement de codage
Remarque : Les propri&eacute;t&eacute;s des biblioth&egrave;ques de balises s’affichent uniquement quand une
biblioth&egrave;que de balises est s&eacute;lectionn&eacute;e. Les biblioth&egrave;ques de balises sont repr&eacute;sent&eacute;es par les
dossiers de niveau sup&eacute;rieur dans la liste des balises. Par exemple, le dossier des balises HTML
repr&eacute;sente une biblioth&egrave;que de balises, et dans ce dossier, le sous-dossier abbr repr&eacute;sente une
balise.
2 Dans la liste Utilis&eacute; dans, s&eacute;lectionnez tous les types de document qui seront utilis&eacute;s par la
biblioth&egrave;que de balises.
Les types de documents s&eacute;lectionn&eacute;s ici sont ceux qui fourniront les indicateurs de code pour la
biblioth&egrave;que de balises sp&eacute;cifi&eacute;e. Par exemple, si l’option HTML n’est pas s&eacute;lectionn&eacute;e pour
une biblioth&egrave;que de balises, les indicateurs de code de cette balise ne s’affichent pas dans les
fichiers HTML.
3 Si les balises de la biblioth&egrave;que n&eacute;cessitent un pr&eacute;fixe, entrez-en un dans la zone de texte Pr&eacute;fixe
de balise.
Remarque : Un pr&eacute;fixe est utilis&eacute; pour identifier l’appartenance d’une balise dans le code &agrave; une
biblioth&egrave;que de balises d&eacute;finie. Certaines biblioth&egrave;ques n’utilisent pas de pr&eacute;fixes.
4 Une fois les modifications termin&eacute;es dans l’&eacute;diteur de la biblioth&egrave;que de balises, cliquez sur OK.
Pour d&eacute;finir une balise dans une biblioth&egrave;que :
1 Dans la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de
balises), d&eacute;veloppez une biblioth&egrave;que de balises dans la liste Balises et s&eacute;lectionnez une balise.
2 D&eacute;finissez les options de format de balise suivantes :
Sauts de ligne d&eacute;termine l’endroit o&ugrave; Dreamweaver ins&egrave;re les sauts de ligne pour une balise.
Sommaire d&eacute;termine comment Dreamweaver ins&egrave;re le contenu d’une balise, &agrave; savoir si le saut
de ligne et les r&egrave;gles de formatage s’appliquent au contenu.
Casse indique la casse d’une balise sp&eacute;cifique. Choisissez Par d&eacute;faut, Minuscules, Majuscules
ou Minuscules/majuscules. Si vous choisissez cette derni&egrave;re option, la bo&icirc;te de dialogue Nom
de balise en minuscules/majuscules s’affiche. Saisissez la balise en utilisant la casse dont doit se
servir Dreamweaver lors de l’insertion de cette derni&egrave;re (par exemple, getProperty), puis
cliquez sur OK.
D&eacute;faut d&eacute;finit la casse par d&eacute;faut de toutes les balises. Dans la bo&icirc;te de dialogue Casse de balise
par d&eacute;faut qui s’affiche, choisissez &lt;MAJUSCULES&gt; ou &lt;minuscules&gt;, puis cliquez sur OK.
Conseil : Il est pr&eacute;f&eacute;rable de d&eacute;finir les minuscules comme casse par d&eacute;faut, conform&eacute;ment aux
normes XML et XHTML.
Pour modifier l’attribut d’une balise :
1 Dans la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de
balises), ouvrez une biblioth&egrave;que de balises dans la zone Balises, d&eacute;veloppez une balise et
s&eacute;lectionnez un attribut.
2 Dans le menu d&eacute;roulant Casse d’attribut, choisissez Par d&eacute;faut, Minuscules, Majuscules ou
Minuscules/majuscules.
Si vous choisissez cette derni&egrave;re option, la bo&icirc;te de dialogue Nom d’attribut en minuscules/
majuscules s’affiche. Saisissez l’attribut en utilisant la casse dont doit se servir Dreamweaver lors
de l’insertion de cet attribut (par exemple, onClick), puis cliquez sur OK.
Cliquez sur le lien D&eacute;faut pour d&eacute;finir la casse par d&eacute;faut pour tous les noms d’attributs.
3 Dans le menu d&eacute;roulant Type d’attribut, s&eacute;lectionnez le type de l’attribut.
Gestion des biblioth&egrave;ques de balises
423
Si vous choisissez Enum&eacute;r&eacute;, entrez toutes les valeurs d’attribut autoris&eacute;es dans la zone de
texte Valeurs. S&eacute;parer les valeurs par des virgules, sans ins&eacute;rer d’espaces. Par exemple, les valeurs
&eacute;num&eacute;r&eacute;es de l’attribut showborder de la balise cfchart sont d&eacute;finies comme yes,no.
Rubriques connexes
• Gestion des biblioth&egrave;ques de balises, page 421
• Ajout de biblioth&egrave;ques, de balises et d’attributs, page 422
Suppression de biblioth&egrave;ques, de balises et d’attributs
Vous pouvez utiliser l’&eacute;diteur de la biblioth&egrave;que de balises pour supprimer des biblioth&egrave;ques de
balises, des balises et des attributs.
Pour supprimer une biblioth&egrave;que, une balise ou un attribut :
1 Dans la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de
balises), s&eacute;lectionnez une biblioth&egrave;que de balises, une balise ou un attribut dans la bo&icirc;te de
dialogue Balises.
2 Cliquez sur le bouton Moins (-).
3 Le cas &eacute;ch&eacute;ant, cliquez sur OK pour confirmer la suppression d&eacute;finitive.
L’&eacute;l&eacute;ment dispara&icirc;t de la bo&icirc;te de dialogue Balises.
4 Cliquez sur OK pour fermer l’&eacute;diteur de la biblioth&egrave;que de balises et terminer la proc&eacute;dure de
suppression.
Rubriques connexes
• Gestion des biblioth&egrave;ques de balises, page 421
• Ajout de biblioth&egrave;ques, de balises et d’attributs, page 422
• Modification de biblioth&egrave;ques, de balises et d’attributs, page 422
Importation de balises personnalis&eacute;es dans Dreamweaver
Une fois import&eacute;es dans Dreamweaver, les balises personnalis&eacute;es font partie int&eacute;grante de
l’environnement de cr&eacute;ation de pages Web. Par exemple, lorsque vous commencez &agrave; taper une
balise personnalis&eacute;e import&eacute;e en mode Code, un menu d’indicateurs de code s’affiche avec tous
les attributs de balise et vous permet d’en s&eacute;lectionner un.
Importation de balises &agrave; partir de fichiers XML
Vous pouvez importer des balises &agrave; partir d’un fichier XML DTD (Document Type Definition)
ou d’un sch&eacute;ma.
Pour importer des balises &agrave; partir d’un fichier XML DTD ou Schema :
1 Ouvrez l’&eacute;diteur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de balises).
2 Cliquez sur le bouton Plus (+), puis choisissez DTD Schema &gt; Importer le fichier DTD ou
Schema XML.
3 Entrez le nom ou l’URL du fichier DTD ou schema.
4 Entrez le pr&eacute;fixe qui servira &agrave;
Remarque : Un pr&eacute;fixe est utilis&eacute; pour identifier l’appartenance d’une balise dans le code &agrave; une
biblioth&egrave;que de balises d&eacute;finie. Certaines biblioth&egrave;ques n’utilisent pas de pr&eacute;fixes.
424
Chapitre 19 : Configuration d’un environnement de codage
5 Cliquez sur OK.
Importation de balises ASP.NET personnalis&eacute;es
Vous pouvez importer des balises ASP.NET personnalis&eacute;es dans Dreamweaver.
Au pr&eacute;alable, assurez-vous que la balise personnalis&eacute;e est install&eacute;e sur le serveur d’&eacute;valuation d&eacute;fini
dans la bo&icirc;te de dialogue D&eacute;finition du site (voir D&eacute;finition du dossier de traitement des pages
dynamiques, page 474). Les balises compil&eacute;es (fichiers .dll) doivent &ecirc;tre plac&eacute;es dans le dossier /bin
de la racine du site, tandis que les balises non compil&eacute;es (fichiers .ascx) peuvent r&eacute;sider dans un
r&eacute;pertoire ou un sous-r&eacute;pertoire virtuel sur le serveur. Pour plus d’informations, voir la
documentation Microsoft ASP.NET.
Pour importer les balises ASP.NET personnalis&eacute;es dans Dreamweaver :
1 Ouvrez une page ASP.NET dans Dreamweaver.
2 Ouvrez l’&eacute;diteur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de balises).
3 Cliquez sur le bouton plus (+), puis proc&eacute;dez de l’une des mani&egrave;res suivantes :
Pour importer toutes les balises ASP.NET personnalis&eacute;es &agrave; partir du serveur d’application,
choisissez ASP.NET &gt; Importer toutes les balises personnalis&eacute;es ASP.NET.
■ Pour n’importer que certaines balises personnalis&eacute;es &agrave; partir du serveur d’application,
choisissez ASP.NET &gt; Importer les balises personnalis&eacute;es ASP.NET s&eacute;lectionn&eacute;es.
La bo&icirc;te de dialogue Importer les balises personnalis&eacute;es ASPNet s&eacute;lectionn&eacute;es qui s’affiche
r&eacute;pertorie toutes les balises ASP.NET personnalis&eacute;es install&eacute;es sur le serveur d’application. Tout
en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfonc&eacute;e, cliquez sur les
balises de la liste, puis sur OK.
■
Importation de balises JSP &agrave; partir d’un fichier
Vous pouvez importer une biblioth&egrave;que de balises JSP dans Dreamweaver, &agrave; partir d’une
multitude de types de fichiers.
Pour importer une biblioth&egrave;que de balises JSP dans Dreamweaver :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l’&eacute;diteur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de balises).
3 Cliquez sur le bouton Plus (+), puis choisissez JSP &gt; Importer depuis le fichier (*.tld, *.jar,
*.zip).
4 Entrez un nom de fichier, un URI et un pr&eacute;fixe.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK.
Importation de balises JSP &agrave; partir d’un serveur (web.xml)
Vous pouvez importer une biblioth&egrave;que de balises JSP dans Dreamweaver &agrave; partir d’un fichier
web.xml pr&eacute;sent sur un serveur JSP.
Pour importer des balises JSP &agrave; partir d’un serveur :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l’&eacute;diteur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de balises).
Importation de balises personnalis&eacute;es dans Dreamweaver
425
3 Cliquez sur le bouton Plus (+), puis choisissez JSP &gt; Importer depuis le serveur (web.xml).
La bo&icirc;te de dialogue Importer depuis le serveur s’affiche.
4 Entrez un nom de fichier et un URI.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK.
Importation de balises JRun
Si vous travaillez avec Macromedia JRun, vous pouvez importer vos balises JRun dans
Dreamweaver.
Pour importer des balises JRun dans Dreamweaver :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l’&eacute;diteur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de balises).
3 Dans l’&eacute;diteur de la biblioth&egrave;que de balises, cliquez sur le bouton Plus (+), puis choisissez JSP &gt;
Importer les balises de serveur JRUN depuis le dossier.
4 Entrez un nom de dossier, un URI et un pr&eacute;fixe.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
5 Cliquez sur OK.
Utilisation d’un &eacute;diteur HTML externe avec Dreamweaver
Vous pouvez lancer votre &eacute;diteur HTML externe ou un &eacute;diteur de texte depuis Dreamweaver
pour &eacute;diter le code source du document actif, puis revenir dans Dreamweaver pour continuer &agrave;
utiliser son interface graphique. Dreamweaver d&eacute;tecte toute modification enregistr&eacute;e dans le
document par l’&eacute;diteur externe et vous invite dans ce cas &agrave; recharger le document.
Les &eacute;diteurs HTML int&eacute;gr&eacute;s suivants sont accept&eacute;s : Macromedia HomeSite (Windows
seulement) ou BBEdit (Macintosh seulement). Vous pouvez &eacute;galement utiliser d’autres &eacute;diteurs
de texte, comme Bloc-notes, Wordpad, TextPad, TextEdit, SimpleText, vi ou emacs.
Utilisation d’un &eacute;diteur HTML int&eacute;gr&eacute;
Vous pouvez installer simultan&eacute;ment Dreamweaver, et HomeSite sous Windows ou une version
d’essai de BBEdit sur Macintosh. Gr&acirc;ce &agrave; l’int&eacute;gration &eacute;troite de Dreamweaver avec ces deux
produits,
vous pouvez modifier un document &agrave; la fois dans Dreamweaver et dans HomeSite/BBEdit, en
passant d’une application &agrave; l’autre ; le document reste automatiquement synchronis&eacute; dans les
deux applications. Par ailleurs, ces deux programmes interagissent avec la s&eacute;lection ; ainsi le texte
s&eacute;lectionn&eacute; dans Dreamweaver l’est &eacute;galement lorsque vous passez &agrave; BBEdit, et inversement.
Vous pouvez ouvrir d’autres &eacute;diteurs externes (en plus de HomeSite et BBEdit) depuis
Dreamweaver, mais le document n’est pas synchronis&eacute; dans les deux applications, contrairement &agrave;
HomeSite ou BBEdit. Une fois les modifications termin&eacute;es dans un &eacute;diteur externe autre que
HomeSite ou BBEdit, pensez &agrave; actualiser manuellement le document dans Dreamweaver.
426
Chapitre 19 : Configuration d’un environnement de codage
Utilisation de HomeSite (Windows seulement)
Nul n’est besoin d’activer l’int&eacute;gration pour HomeSite ; cette fonction est int&eacute;gr&eacute;e
automatiquement lors de l’installation des deux applications.
Pour utiliser HomeSite :
1 Choisissez Edition &gt; Modifier avec HomeSite.
2 Modifiez le document dans HomeSite, puis enregistrez vos modifications.
3 Pour revenir dans Dreamweaver, cliquez sur le bouton Dreamweaver dans la barre d’outils de
l’&eacute;diteur.
Utilisation de BBEdit (Macintosh seulement)
Vous pouvez d&eacute;sactiver l’int&eacute;gration de BBEdit si vous ne souhaitez pas travailler avec. Les
s&eacute;lections ne sont pas supervis&eacute;es entre Dreamweaver et BBEdit si l’int&eacute;gration de BBEdit est
d&eacute;sactiv&eacute;e. Toutefois, il peut &ecirc;tre plus rapide d’effectuer les modifications dans Dreamweaver si
l’int&eacute;gration de BBEdit est d&eacute;sactiv&eacute;e.
Pour utiliser BBEdit avec Dreamweaver :
1 Choisissez Edition &gt; Modifier avec BBEdit.
2 Modifiez le document dans BBEdit.
3 Pour revenir dans Dreamweaver, cliquez sur le bouton Dreamweaver dans la palette d’outils
HTML de BBEdit.
Pour d&eacute;sactiver l’int&eacute;gration de BBEdit :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (Mac OS X), puis s&eacute;lectionnez
Types de fichiers/Editeurs.
2 D&eacute;sactivez Activer l’int&eacute;gration de BBEdit, puis cliquez sur OK.
D&eacute;finition des pr&eacute;f&eacute;rences d’&eacute;diteur externe et de type de fichier
Vous pouvez sp&eacute;cifier les applications externes &agrave; utiliser pour apporter des modifications aux
fichiers comportant certaines extensions.
Pour s&eacute;lectionner un &eacute;diteur HTML externe :
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez la cat&eacute;gorie Types de fichiers/Editeurs dans la liste de gauche.
Les pr&eacute;f&eacute;rences Types de fichiers/Editeurs s’affichent.
3 Ajustez les param&egrave;tres dans la bo&icirc;te de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
4 Cliquez sur OK.
Pour ouvrir un &eacute;diteur HTML externe :
• Choisissez Edition &gt; Modifier avec [nom de l’&eacute;diteur].
Utilisation d’un &eacute;diteur HTML externe avec Dreamweaver
427
Rubriques connexes
• Ouverture de fichiers en mode Code par d&eacute;faut, page 420
• Lancement d’un &eacute;diteur externe pour des fichiers multim&eacute;dia, page 371
• Utilisation d’un &eacute;diteur HTML int&eacute;gr&eacute;, page 426
428
Chapitre 19 : Configuration d’un environnement de codage
CHAPITRE 20
Codage dans Dreamweaver
Macromedia Dreamweaver MX 2004 propose un environnement de codage complet con&ccedil;u pour
tout type de d&eacute;veloppement Web, de la r&eacute;daction de pages HTML simples &agrave; la conception, au test
et au d&eacute;ploiement d’applications Web complexes.
Remarque : Pour plus d’informations sur la migration de Macromedia HomeSite vers Dreamweaver,
consultez le centre de support de Dreamweaver &agrave; l’adresse suivante : http://www.macromedia.com/
go/migrate_from_homesite.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
•
•
A propos du codage dans Dreamweaver, page 429
R&eacute;daction et modification de code, page 437
Recherche et remplacement de balises et d’attributs, page 443
Modification rapide d’une s&eacute;lection de code, page 444
Utilisation des documents de r&eacute;f&eacute;rence sur les langages, page 445
Impression du code, page 446
Rubriques connexes
• Configuration d’un environnement de codage, page 415
• Optimisation et d&eacute;bogage de code, page 447
• Modification du code en mode Cr&eacute;ation, page 455
A propos du codage dans Dreamweaver
L’environnement de codage de Dreamweaver permet de r&eacute;diger, de modifier et de tester le code de
vos pages (dans une multitude de langages). Dreamweaver modifie le code que vous r&eacute;digez
uniquement si vous activez les options permettant de r&eacute;&eacute;crire certains &eacute;l&eacute;ments de code erron&eacute;s.
Rubriques connexes
• Affichage du code, page 416
Langages pris en charge
Dreamweaver contient &agrave; la fois des options permettant de lancer des &eacute;diteurs de texte et des
options con&ccedil;ues pour vous assister dans la r&eacute;daction du code, par exemple les indicateurs de code,
et ce dans plusieurs langages. Ces langages incluent :
429
•
•
•
•
•
•
•
•
•
HTML
XHTML
CSS
JavaScript
CFML (ColdFusion Markup Language)
Visual Basic (pour ASP et ASP.NET)
C# (pour ASP.NET)
JSP
PHP
Certains autres langages, par exemple le langage Perl, ne sont pas pris en charge par les fonctions
de codage sp&eacute;cifiques au langage de Dreamweaver ; vous pouvez n&eacute;anmoins cr&eacute;er et modifier des
fichiers en langage Perl dans Dreamweaver, mais vous ne pourrez pas acc&eacute;der aux indicateurs de
code (par exemple).
Rubriques connexes
• Modification automatique du code dans Dreamweaver, page 430
• Utilisation des indicateurs de code, page 437
Correction du marquage non valide
Si votre document contient des &eacute;l&eacute;ments de code non valides, Dreamweaver les affiche en mode
Cr&eacute;ation et, si les options ad&eacute;quates sont activ&eacute;es, les met en surbrillance en mode Code. Si vous
s&eacute;lectionnez ces &eacute;l&eacute;ments dans l’un des deux modes, l’inspecteur de propri&eacute;t&eacute;s affiche des
informations sur les causes de leur non-validit&eacute; et sur la mani&egrave;re dont corriger les erreurs.
Dreamweaver vous permet d’indiquer vos pr&eacute;f&eacute;rences concernant la correction automatique de
certains types d’&eacute;l&eacute;ments de code erron&eacute;s lorsque vous ouvrez un document.
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences de codage, page 418
• D&eacute;finition des pr&eacute;f&eacute;rences d’affichage, page 417
Modification automatique du code dans Dreamweaver
Certaines options de Dreamweaver permettent de nettoyer automatiquement votre code selon vos
propres crit&egrave;res. Toutefois, Dreamweaver corrige le code uniquement si vous activez les options
correspondantes ou si l’une de vos op&eacute;rations entra&icirc;ne une modification du code. Par exemple,
Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous s&eacute;lectionnez
la commande Appliquer le format source.
Quelques-unes des options de r&eacute;&eacute;criture du code sont activ&eacute;es par d&eacute;faut. Pour apprendre
comment les d&eacute;sactiver ou en activer d’autres, voir D&eacute;finition des pr&eacute;f&eacute;rences de correction de code,
page 419.
Les fonctions Roundtrip HTML de Dreamweaver vous permettent d’&eacute;changer des documents
entre Dreamweaver et un &eacute;diteur HTML en mode texte, moyennant un impact nul ou infime sur
le contenu et la structure du code source HTML original du document. Parmi ces fonctionnalit&eacute;s,
on compte les suivantes :
430
Chapitre 20 : Codage dans Dreamweaver
• Dreamweaver permet de lancer un &eacute;diteur de texte tiers pour modifier le document actif. Pour
•
•
•
plus d’informations, voir Utilisation d’un &eacute;diteur HTML externe avec Dreamweaver, page 426.
Par d&eacute;faut, Dreamweaver ne modifie pas le code cr&eacute;&eacute; ou modifi&eacute; par un autre &eacute;diteur HTML,
m&ecirc;me s’il est incorrect, &agrave; moins que vous n’ayez activ&eacute; les options de r&eacute;&eacute;criture.
Dreamweaver conserve telles quelles les balises qu’il ne reconna&icirc;t pas, notamment les
balises XML, en l’absence de crit&egrave;res de r&eacute;f&eacute;rence. Si une balise non reconnue encadre une
autre balise (par exemple, &lt;MyNewTag&gt;&lt;em&gt;text&lt;/MyNewTag&gt;&lt;/em&gt;), Dreamweaver la
marque comme erron&eacute;e, mais ne modifie pas le code.
Vous pouvez activer certaines options de Dreamweaver pour mettre les &eacute;l&eacute;ments de code
HTML incorrects en surbrillance (jaune) dans le mode Code. Si vous s&eacute;lectionnez une section
en surbrillance, l’inspecteur des propri&eacute;t&eacute;s affiche des informations sur l’erreur et la mani&egrave;re de
la corriger.
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences de codage, page 418
• D&eacute;finition des pr&eacute;f&eacute;rences d’affichage, page 417
• A propos du code de comportement de serveur, page 437
A propos du code XHTML g&eacute;n&eacute;r&eacute; par Dreamweaver
Dreamweaver g&eacute;n&egrave;re du code XHTML nouveau et nettoie le code XHTML existant,
conform&eacute;ment &agrave; la plupart des sp&eacute;cifications XHTML. Dreamweaver met &eacute;galement &agrave; votre
disposition les outils permettant de se conformer aux rares sp&eacute;cifications XHTML ignor&eacute;es lors
de ce type d’op&eacute;ration.
Remarque : Certaines configurations d&eacute;crites dans cette section sont communes &agrave; plusieurs
versions de HTML.
Le tableau ci-dessous r&eacute;pertorie les sp&eacute;cifications XHTML automatiquement observ&eacute;es par
Dreamweaver.
Sp&eacute;cification XHTML
Actions ex&eacute;cut&eacute;es par Dreamweaver pour
satisfaire &agrave; cette sp&eacute;cification
Ajoute une d&eacute;claration XML &agrave; un
Si le codage de caract&egrave;res d’un document est
diff&eacute;rent du mode UTF-8 par d&eacute;faut, le document document XHTML et sp&eacute;cifie le mode de
codage ; par exemple :
doit comporter une d&eacute;claration XML.
&lt;?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;
?&gt;
Une d&eacute;claration DOCTYPE doit pr&eacute;c&eacute;der
l’&eacute;l&eacute;ment racine dans le document, laquelle doit
faire r&eacute;f&eacute;rence &agrave; l’un des trois fichiers DTD
(Document Type Definition) pour XHTML (strict,
transitionnel ou jeu de cadres).
Ajoute une d&eacute;claration XHTML DOCTYPE &agrave; un
document XHTML :
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0
Transitional//EN&quot; &quot;http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
Ou, si le document XHTML comporte un jeu de
cadres :
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0
Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/
DTD/xhtml1-frameset.dtd&quot;&gt;
A propos du codage dans Dreamweaver
431
Sp&eacute;cification XHTML
Actions ex&eacute;cut&eacute;es par Dreamweaver pour
satisfaire &agrave; cette sp&eacute;cification
L’&eacute;l&eacute;ment racine du document doit &ecirc;tre html, et
l’&eacute;l&eacute;ment html doit d&eacute;signer l’espace de noms
XHTML.
Ajoute l’attribut namespace &agrave; l’&eacute;l&eacute;ment html
comme suit :
Un document standard doit comporter les
&eacute;l&eacute;ments structurels head, title et body. Un
document de jeu de cadres doit comporter les
&eacute;l&eacute;ments structurels head, title et frameset.
Dans un document standard, inclut les &eacute;l&eacute;ments
structurels head, title et body. Dans un
document de jeu de cadres, inclut les &eacute;l&eacute;ments
head, title et frameset.
L’imbrication de tous les &eacute;l&eacute;ments du document
doit &ecirc;tre correcte :
G&eacute;n&egrave;re correctement le code imbriqu&eacute; et,
pendant le nettoyage du code XHTML, corrige
l’imbrication du code non g&eacute;n&eacute;r&eacute; par
Dreamweaver.
&lt;p&gt;Voici un &lt;i&gt;exemple incorrect.&lt;/p&gt;&lt;/i&gt;
&lt;p&gt;Voici un &lt;i&gt;exemple correct.&lt;/i&gt;&lt;/p&gt;
Tous les noms d’&eacute;l&eacute;ments et d’attributs doivent
&ecirc;tre r&eacute;dig&eacute;s en minuscules.
Impose l’usage des minuscules dans les noms
d’&eacute;l&eacute;ments et d’attributs HTML du code XHTML
g&eacute;n&eacute;r&eacute; par ses soins et pendant le nettoyage du
code XHTML, ind&eacute;pendamment des
pr&eacute;f&eacute;rences de casse d&eacute;finies pour la balise et
l’attribut.
Tous les &eacute;l&eacute;ments doivent se terminer par une
balise de fin, &agrave; moins qu’ils ne soient d&eacute;clar&eacute;s
dans le fichier DTD comme EMPTY.
Ins&egrave;re des balises de fin dans le code g&eacute;n&eacute;r&eacute; par
ses soins, ainsi que pendant le nettoyage du
code XHTML.
Les &eacute;l&eacute;ments vides doivent se terminer par une
balise de fin ou la balise de d&eacute;but doit &ecirc;tre ferm&eacute;e
avec le code /&gt;. Par exemple, &lt;br&gt; est incorrect ;
la forme correcte de la balise est soit &lt;br&gt;&lt;/br&gt;,
soit &lt;br/&gt;. Les &eacute;l&eacute;ments vides sont les suivants :
area, base, basefont, br, col, frame, hr, img, input,
isindex, link, meta et param.
Pour garantir la r&eacute;trocompatibilit&eacute; avec les
navigateurs non XML, un espace doit pr&eacute;c&eacute;der le
code /&gt; (par exemple, &lt;br /&gt; et non &lt;br/&gt;).
Ins&egrave;re les &eacute;l&eacute;ments vides avec un espace avant la
barre oblique de fermeture des balises vides dans
le code g&eacute;n&eacute;r&eacute; par ses soins ainsi que pendant le
nettoyage du code XHTML.
Il est impossible d’abr&eacute;ger les attributs ; ainsi,
Ins&egrave;re des paires attribut/valeur compl&egrave;tes dans
le code g&eacute;n&eacute;r&eacute; par ses soins, ainsi que pendant le
nettoyage du code XHTML.
Remarque : Un navigateur HTML ne prenant pas
en charge HTML 4 risque de ne pas pouvoir
interpr&eacute;ter ces attributs bool&eacute;ens sous leur forme
compl&egrave;te.
&lt;tdnowrap&gt; est incorrect ; la forme correcte est
&lt;tdnowrap=&quot;nowrap&quot;&gt;.
Cette r&egrave;gle s’applique aux &eacute;l&eacute;ments suivants :
checked, compact, declare, defer, disabled,
ismap, multiple, noresize, noshade, nowrap,
readonly et selected.
Tous les attributs doivent &ecirc;tre plac&eacute;s entre
guillemets.
432
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
Chapitre 20 : Codage dans Dreamweaver
Met les valeurs d’attribut entre guillemets dans le
code g&eacute;n&eacute;r&eacute; par ses soins, ainsi que pendant le
nettoyage du code XHTML.
Sp&eacute;cification XHTML
Actions ex&eacute;cut&eacute;es par Dreamweaver pour
satisfaire &agrave; cette sp&eacute;cification
Les &eacute;l&eacute;ments suivants doivent comporter un
attribut id et un attribut name : a, applet, form,
frame, iframe, img et map. Par exemple, &lt;a
name=&quot;intro&quot;&gt;Introduction&lt;/a&gt; est incorrect ; la
forme correcte est
&lt;a id=&quot;intro&quot;&gt;Introduction&lt;/a&gt; ou
Affecte la m&ecirc;me valeur aux attributs name et id,
toutes les fois o&ugrave; l’attribut name est d&eacute;fini par un
inspecteur de propri&eacute;t&eacute;s, dans le code g&eacute;n&eacute;r&eacute;
par Dreamweaver, ainsi que pendant le
nettoyage du code XHTML.
&lt;a id=&quot;section1&quot; name=&quot;intro&quot;&gt;
Introduction&lt;/a&gt;.
Dans le cas d’attributs dont les valeurs sont de
type Enum&eacute;r&eacute;, celles-ci doivent figurer en
minuscules.
Une valeur de type Enum&eacute;r&eacute; est une valeur
appartenant &agrave; une liste donn&eacute;e de valeurs
autoris&eacute;es ; par exemple, l’attribut align
comprend les valeurs autoris&eacute;es suivantes :
center, justify, left et right.
Impose l’utilisation des minuscules pour les
valeurs de type Enum&eacute;r&eacute; dans le code g&eacute;n&eacute;r&eacute; par
ses soins, ainsi que pendant le nettoyage du
code XHTML.
Tous les &eacute;l&eacute;ments de script et de style doivent
comporter un attribut de type.
(La n&eacute;cessit&eacute; de l’attribut de type d’un &eacute;l&eacute;ment
de script a &eacute;t&eacute; introduite avec HTML 4, lors de
la d&eacute;pr&eacute;ciation de l’attribut de langage.)
D&eacute;finit les attributs de type et de langage dans les
&eacute;l&eacute;ments de script ainsi que l’attribut de type
dans les &eacute;l&eacute;ments de style, mais aussi dans le
code g&eacute;n&eacute;r&eacute; par ses soins et pendant le
nettoyage du code XHTML.
Tous les &eacute;l&eacute;ments img et area doivent
comprendre un attribut alt.
D&eacute;finit ces attributs dans le code g&eacute;n&eacute;r&eacute; par ses
soins et, pendant le nettoyage du code XHTML,
signale les attributs alt manquants.
Inclusions c&ocirc;t&eacute; serveur
Une inclusion c&ocirc;t&eacute; serveur correspond &agrave; un fichier incorpor&eacute; dans un document par un serveur
lorsque ce document est sollicit&eacute; par un navigateur.
Lorsque le navigateur du visiteur sollicite le document contenant l’instruction d’inclusion, le
serveur traite cette derni&egrave;re en cr&eacute;ant un nouveau document dans lequel le contenu du fichier
inclus remplace l’instruction d’inclusion. Le serveur envoie ensuite ce nouveau document au
navigateur du visiteur. Cependant, lorsque vous ouvrez un document local directement dans un
navigateur, c’est-&agrave;-dire sans utiliser le serveur pour traiter les instructions d’inclusion dans ce
document, le navigateur ouvre le document sans traiter ces instructions et le fichier cens&eacute; &ecirc;tre
inclus n’appara&icirc;t pas dans le navigateur. Il peut donc s’av&eacute;rer difficile, sans Dreamweaver, de
consulter les fichiers locaux et de les voir tels qu’ils appara&icirc;tront une fois que vous les aurez plac&eacute;s
sur le serveur.
Gr&acirc;ce &agrave; DreamweaverDreamweaver, vous pouvez pr&eacute;visualiser les documents tels qu’ils
apparaissent sur le serveur, &agrave; la fois dans le mode Cr&eacute;ation et lorsque vous affichez un aper&ccedil;u dans
un navigateur.
Placer une instruction c&ocirc;t&eacute; serveur dans un document a pour effet d’ins&eacute;rer une r&eacute;f&eacute;rence &agrave; un
fichier externe, sans ins&eacute;rer le contenu du fichier sp&eacute;cifi&eacute; dans le document actif. Dreamweaver
affiche le contenu du fichier externe en mode Cr&eacute;ation, ce qui facilite la cr&eacute;ation de pages.
A propos du codage dans Dreamweaver
433
Vous ne pouvez pas modifier le fichier inclus directement dans un document. Pour modifier le
contenu d’une SSI, vous devez modifier directement le fichier que vous incluez. Notez que toute
modification apport&eacute;e au fichier externe est automatiquement refl&eacute;t&eacute;e dans chaque document
dans lequel il est inclus.
Il existe deux types d’inclusions &agrave; partir du serveur : les inclusions Virtuel et Fichier. S&eacute;lectionnez
l’instruction correspondant au type de serveur Web utilis&eacute; :
• Si votre serveur est un serveur Web Apache, s&eacute;lectionnez Virtuel. (choix par d&eacute;faut dans
•
Dreamweaver.) Dans Apache, Virtuel fonctionne dans tous les cas, tandis que Fichier
fonctionne seulement dans certains cas.
Si votre serveur est un serveur Microsoft IIS (Internet Information Server), s&eacute;lectionnez Fichier
(Virtuel ne fonctionne avec IIS que dans des cas pr&eacute;cis).
Remarque : Malheureusement, IIS ne vous permet pas d’inclure un fichier dans un dossier situ&eacute;
au-dessus du dossier en cours dans la hi&eacute;rarchie des fichiers, &agrave; moins qu’un logiciel sp&eacute;cial n’ait
&eacute;t&eacute; install&eacute; sur le serveur. Pour pouvoir inclure un fichier d’un dossier plac&eacute; plus haut dans la
hi&eacute;rarchie des dossiers sur un serveur IIS, demandez &agrave; votre administrateur syst&egrave;me si le logiciel
n&eacute;cessaire est install&eacute;.
• Pour les autres types de serveurs ou si vous ne savez pas quel type de serveur vous utilisez,
demandez &agrave; votre administrateur syst&egrave;me quelle option utiliser.
Certains serveurs sont configur&eacute;s de fa&ccedil;on &agrave; examiner tous les fichiers pour voir s’ils contiennent
des inclusions c&ocirc;t&eacute; serveur et d’autres pour examiner uniquement les fichiers portant une
extension particuli&egrave;re, telle que .shtml, .shtm ou .inc. Si une inclusion c&ocirc;t&eacute; serveur ne fonctionne
pas, demandez &agrave; votre administrateur syst&egrave;me si le nom du fichier utilisant l’inclusion doit avoir
une extension sp&eacute;ciale (par exemple, si le fichier porte le nom canoe.html, il vous faudra peut-&ecirc;tre
remplacer ce nom par canoe.shtml). Si vous voulez que vos fichiers conservent leurs extensions
.html ou .htm, demandez &agrave; votre administrateur syst&egrave;me de configurer le serveur de fa&ccedil;on &agrave; ce
qu’il examine tous les fichiers (et pas seulement les fichiers portant une certaine extension) pour
les inclusions &agrave; partir du serveur. L’analyse des inclusions &agrave; partir du serveur demandant toutefois
un peu plus de temps, les pages analys&eacute;es par le serveur s’affichent un peu plus lentement que les
autres pages. Pour cette raison, certains administrateurs syst&egrave;me ne donnent pas la possibilit&eacute;
d’analyser tous les fichiers.
Rubriques connexes
• Insertion d’une inclusion c&ocirc;t&eacute; serveur, page 462
• Modification du contenu d’une inclusion c&ocirc;t&eacute; serveur, page 462
Expressions r&eacute;guli&egrave;res
Les expressions r&eacute;guli&egrave;res sont des mod&egrave;les d&eacute;crivant des combinaisons de caract&egrave;res dans un
texte. Utilisez-les dans vos recherches pour d&eacute;crire des concepts tels que &laquo; lignes commen&ccedil;ant par
‘var’ &raquo; et &laquo; valeurs d’attribut contenant un nombre &raquo;. Pour plus d’informations sur les recherches,
voir Recherche et remplacement de balises et d’attributs, page 443.
434
Chapitre 20 : Codage dans Dreamweaver
Le tableau ci-dessous pr&eacute;sente les caract&egrave;res sp&eacute;ciaux des expressions r&eacute;guli&egrave;res, leur signification
et des exemples d’utilisation. Pour rechercher du texte contenant un des caract&egrave;res sp&eacute;ciaux
pr&eacute;sent&eacute;s dans le tableau, indiquez qu’il s’agit d’un caract&egrave;re sp&eacute;cial &agrave; l’aide d’une barre oblique
invers&eacute;e. Par exemple, pour rechercher l’ast&eacute;risque dans la phrase conditions sp&eacute;ciales*, vous
pouvez utiliser un mod&egrave;le de recherche tel que celui-ci : sp&eacute;ciales\*. Si vous n’indiquez pas
l’ast&eacute;risque comme caract&egrave;re sp&eacute;cial, vous trouverez toutes les occurrences de &laquo; sp&eacute;ciales &raquo; (de
m&ecirc;me que &laquo; sp&eacute;ciale &raquo;, &laquo; sp&eacute;cialess &raquo; et &laquo; sp&eacute;cialesss &raquo;), et pas seulement celles qui sont suivies d’un
ast&eacute;risque.
Caract&egrave;re
trouve
Exemple
^
D&eacute;but de saisie ou de ligne.
^T trouve &laquo; T &raquo; dans &laquo; Tonnerre de
Brest &raquo; mais pas dans &laquo; La case de
l’oncle Tom &raquo;
$
Fin de saisie ou de ligne.
n$ trouve &laquo; n &raquo; dans &laquo; malin &raquo; mais pas
dans &laquo; noir &raquo;
*
Le caract&egrave;re pr&eacute;c&eacute;dent, 0 ou plusieurs
fois.
um* trouve &laquo; um &raquo; dans &laquo; rhum &raquo;,
Le caract&egrave;re pr&eacute;c&eacute;dent, 1 ou plusieurs
fois.
um+ trouve &laquo; um &raquo; dans &laquo; rhum &raquo;,
?
Le caract&egrave;re pr&eacute;c&eacute;dent, une fois au
maximum (en d’autres termes, le
caract&egrave;re pr&eacute;c&eacute;dent est facultatif).
st?on trouve &laquo; son &raquo; dans &laquo; Johnson &raquo;
et &laquo; ston &raquo; dans &laquo; Johnston &raquo;, mais rien
dans &laquo; Appleton &raquo; ou &laquo; tension &raquo;
.
Tout caract&egrave;re, sauf une nouvelle ligne
(retour &agrave; la ligne).
.an trouve &laquo; ran &raquo; &laquo; tan &raquo; et &laquo; lan &raquo; dans
Soit x, soit y.
FF0000|0000FF trouve &laquo; FF0000 &raquo;
dans BGCOLOR=&quot;#FF0000&quot; et
&laquo; 0000FF &raquo; dans FONT
+
x|y
&laquo; umm &raquo; dans &laquo; yummy &raquo; et &laquo; u &raquo; dans
&laquo; bouge &raquo;
&laquo; umm &raquo; dans &laquo; yummy &raquo; mais rien
dans &laquo; bouge &raquo;
le mot &laquo; rantanplan &raquo;
COLOR=&quot;#0000FF&quot;.
{n}
Exactement n occurrences du caract&egrave;re l{2} trouve &laquo; ll &raquo; dans &laquo; elle &raquo; et les
pr&eacute;c&eacute;dent.
deux premiers l de &laquo; ellllle &raquo;, mais ne
trouve rien dans &laquo; l&eacute;ger &raquo;
{n,m}
Au moins n et au plus m occurrences du F{2,4} trouve &laquo; FF &raquo; dans
caract&egrave;re pr&eacute;c&eacute;dent.
&laquo; #FF0000 &raquo; et les quatre premiers F
dans #FFFFFF.
[abc]
L’un des caract&egrave;res entour&eacute;s de
[e-g] trouve &laquo; e &raquo; dans &laquo; œil &raquo;, &laquo; f &raquo;
crochets. Sp&eacute;cifiez une plage de
dans &laquo; fil &raquo; et &laquo; g &raquo; dans &laquo; garde &raquo;
caract&egrave;res &agrave; l’aide d’un trait d’union (par
exemple, [a-f] &eacute;quivaut &agrave; [abcdef]).
[^abc]
Tout caract&egrave;re non inclus entre les
[^aeiou] trouve initialement &laquo; r &raquo; dans
crochets. Sp&eacute;cifiez une plage de
&laquo; orange &raquo;, &laquo; b &raquo; dans &laquo; balle &raquo; et &laquo; k &raquo;
caract&egrave;res &agrave; l’aide d’un trait d’union (par dans &laquo; eek! &raquo;
exemple, [^a-f] &eacute;quivaut &agrave; [^abcdef]).
\b
Limite de mot (par exemple un espace
ou un retour chariot).
\bb trouve &laquo; b &raquo; dans &laquo; balle &raquo; mais pas
dans &laquo; gober &raquo; ou &laquo; snob &raquo;
A propos du codage dans Dreamweaver
435
Caract&egrave;re
trouve
Exemple
\B
Tous les &eacute;l&eacute;ments sauf les limites de
mot
\Bb trouve &laquo; b &raquo; dans &laquo; gober &raquo; mais
pas dans &laquo; balle &raquo;
\d
Tout chiffre. C’est l’&eacute;quivalent de [0-9]. \d trouve &laquo; 3 &raquo; dans &laquo; C3PO &raquo; et &laquo; 2 &raquo;
dans &laquo; appartement 2G &raquo;.
\D
Tout caract&egrave;re alphab&eacute;tique et non
\D trouve &laquo; S &raquo; dans &laquo; 900S &raquo; et &laquo; Q &raquo;
num&eacute;rique. C’est l’&eacute;quivalent de [^0-9]. dans &laquo; Q45 &raquo;.
\f
Saut de page.
\n
Saut de ligne.
\r
Retour chariot.
\s
Tout &laquo; espace blanc &raquo;, ou caract&egrave;re
\sval trouve &laquo; val &raquo; dans &laquo; le val
d’espacement : espace, tabulation, saut Andr&eacute; &raquo; mais pas dans &laquo; aval &raquo;
de page ou saut de ligne.
\S
Tout caract&egrave;re autre qu’un &laquo; espace
blanc &raquo;.
\t
Tabulation.
\w
Tout caract&egrave;re alphanum&eacute;rique, y
compris le caract&egrave;re de soulignement.
C’est l’&eacute;quivalent de [A-Za-z0-9_].
c\w* trouve &laquo; chien &raquo; dans &laquo; le chien
noir &raquo;, ainsi que &laquo; cou &raquo; et &laquo; chien &raquo;
dans &laquo; le cou du chien noir &raquo;
\W
Tout caract&egrave;re non alphanum&eacute;rique.
C’est l’&eacute;quivalent de [^A-Za-z0-9_].
\W trouve &laquo; &amp; &raquo; dans &laquo; Tintin&amp;Milou &raquo;
et &laquo; % &raquo; dans &laquo; 100 % &raquo;
Contr&ocirc;le+Entr&eacute;e
ou Maj+Entr&eacute;e
(Windows), ou
Contr&ocirc;le+ Retour
ou Maj+Retour
ou
Commande+Ret
our (Macintosh)
Retour chariot. Veillez &agrave; d&eacute;sactiver
l’option Ignorer les diff&eacute;rences entre
les espaces blancs lorsque vous
effectuez ce type de recherche si vous
n’utilisez pas des expressions
r&eacute;guli&egrave;res. Notez que cette recherche
porte sur un caract&egrave;re particulier et non
sur la notion de retour &agrave; la ligne ; par
exemple, elle ne trouvera pas une balise
&lt;br&gt; ou &lt;p&gt;. Les caract&egrave;res de retour
chariot apparaissent en tant qu’espaces
en mode Cr&eacute;ation, et non en tant que
sauts de ligne.
\Sval trouve &laquo; val &raquo; dans &laquo; aval &raquo; mais
pas dans &laquo; le val Andr&eacute; &raquo;
Utilisez des parenth&egrave;ses pour d&eacute;finir au sein de l’expression r&eacute;guli&egrave;re des groupes auxquels il sera
fait r&eacute;f&eacute;rence plus tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire r&eacute;f&eacute;rence au
premier, deuxi&egrave;me, troisi&egrave;me, etc., groupe entre parenth&egrave;ses.
Remarque : Dans la zone de texte Rechercher, faites r&eacute;f&eacute;rence au groupe entre parenth&egrave;ses
mentionn&eacute; plus t&ocirc;t dans l’expression r&eacute;guli&egrave;re en indiquant \1, \2, \3 etc. au lieu de $1, $2, $3.
Par exemple, la recherche de (\d+)\/(\d+)\/(\d+) et le remplacement par $2/$1/$3 &eacute;changent le
jour et le mois dans une date s&eacute;par&eacute;e par des barres obliques permettant ainsi la conversion entre
les dates de style am&eacute;ricain et les dates de style europ&eacute;en.
436
Chapitre 20 : Codage dans Dreamweaver
Rubriques connexes
• Recherche de balises, d’attributs ou de texte contenu dans des balises sp&eacute;cifiques, page 443
• Enregistrement de mod&egrave;les de recherche, page 444
A propos du code de comportement de serveur
Lorsque vous s&eacute;lectionnez un comportement de serveur dans le panneau Comportements de
serveur pendant le d&eacute;veloppement d’une page dynamique, Dreamweaver ins&egrave;re un ou plusieurs
blocs de code dans la page pour faire fonctionner le comportement de serveur.
Si vous modifiez manuellement le code contenu dans un bloc de code, les panneaux, par exemple
le panneau Liaisons et le panneau Comportements de serveur, ne sont plus accessibles pour la
modification du comportement du serveur. Dreamweaver d&eacute;tecte les comportements de serveur
en se rep&eacute;rant &agrave; des mod&egrave;les de code sp&eacute;cifiques dans la page, puis les affiche dans le panneau
correspondant. Toute modification du code d’un bloc de code emp&ecirc;che d&egrave;s lors Dreamweaver de
d&eacute;tecter le comportement de serveur et de l’afficher dans le panneau Comportements de serveur.
Le comportement de serveur subsiste toutefois dans la page : vous pouvez donc le corriger dans
l’environnement de codage de Dreamweaver.
R&eacute;daction et modification de code
Dreamweaver met &agrave; votre disposition plusieurs fonctions qui vous aideront &agrave; r&eacute;diger et &agrave; corriger
efficacement le code.
Utilisation des indicateurs de code
Les indicateurs de code vous permettent d’ins&eacute;rer et de modifier le code rapidement et sans erreur
de saisie. Une liste de suggestions appara&icirc;t lorsque vous tapez certains caract&egrave;res, par exemple les
premi&egrave;res lettres d’une balise, d’un attribut ou d’un nom de propri&eacute;t&eacute; CSS. Cette fonction est
aussi pratique pour ins&eacute;rer ou modifier du code que pour consulter simplement les attributs
disponibles pour une balise, les param&egrave;tres associ&eacute;s &agrave; une fonction ou les m&eacute;thodes sp&eacute;cifiques &agrave;
un objet.
Les indicateurs de code sont disponibles pour diff&eacute;rents types de code. Une liste d’&eacute;l&eacute;ments
correspondant au code saisi s’affiche lorsque vous entrez un caract&egrave;re sp&eacute;cifique indiquant le
d&eacute;but d’un segment de ce code ; par exemple, pour afficher une liste d’indicateurs de code
correspondant aux noms de balise HTML, tapez un crochet ouvrant (&lt;).
Conseil : Pour exploiter pleinement cette fonctionnalit&eacute;, en particulier lorsque vous l’utilisez pour des
fonctions et des objets, d&eacute;finissez l’option D&eacute;lai de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences d’indicateurs de
code sur 0 seconde. Pour plus d’informations, voir D&eacute;finition des pr&eacute;f&eacute;rences d’indicateurs de code,
page 418.
Pour faire dispara&icirc;tre la liste des indicateurs de code, appuyez sur la touche Retour arri&egrave;re
(Windows) ou Arri&egrave;re (Macintosh).
Pour afficher manuellement le menu des indicateurs de code s’il ne s’affiche pas
automatiquement :
• Appuyez sur les touches Ctrl+Barre d’espace.
R&eacute;daction et modification de code
437
Pour ins&eacute;rer un marqueur ou d’autres &eacute;l&eacute;ments de code &agrave; l’aide des indicateurs en mode
Code :
1 Saisissez le premier caract&egrave;re du segment de code. Par exemple, pour ins&eacute;rer une balise, tapez un
crochet ouvrant (&lt;) ; pour ins&eacute;rer un attribut, placez le point d’insertion juste apr&egrave;s le nom de
la balise, puis appuyez sur la barre d’espace.
Une liste d’&eacute;l&eacute;ments (par exemple les noms des diff&eacute;rentes balises ou des diff&eacute;rents attributs)
s’affiche.
Conseil : Vous pouvez fermer cette liste &agrave; tout moment en appuyant sur la touche Echap.
2 Faites d&eacute;filer les &eacute;l&eacute;ments de la liste &agrave; l’aide de la barre de d&eacute;filement ou des touches fl&eacute;ch&eacute;es vers
le haut et vers le bas.
3 Double-cliquez sur l’un des &eacute;l&eacute;ments de cette liste pour l’ins&eacute;rer ; vous pouvez &eacute;galement le
s&eacute;lectionner, puis appuyer sur la touche Entr&eacute;e (Windows) ou Retour (Macintosh).
Conseil : Si vous avez cr&eacute;&eacute; un style CSS et que celui-ci ne figure pas dans la liste des indicateurs
de code correspondant aux styles CSS, cliquez sur Actualiser la liste des styles. Si l’application
passe en mode Cr&eacute;ation, il se peut que cette op&eacute;ration ait entra&icirc;n&eacute; la g&eacute;n&eacute;ration temporaire
d’&eacute;l&eacute;ments de code non valides ; pour supprimer ces &eacute;l&eacute;ments du mode Cr&eacute;ation, ins&eacute;rez votre
style, puis actualisez la page en appuyant sur la touche F5.
Pour modifier une balise &agrave; l’aide des indicateurs de code, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Pour remplacer un attribut par un autre, supprimez d’abord l’attribut concern&eacute; ainsi que sa
•
valeur, puis ajoutez le nouvel attribut et la valeur associ&eacute;e en suivant la proc&eacute;dure ci-avant.
Pour modifier une valeur, supprimer d’abord la valeur concern&eacute;e, puis ajoutez une nouvelle
valeur en suivant la proc&eacute;dure ci-avant.
Rubriques connexes
• D&eacute;finition des pr&eacute;f&eacute;rences d’indicateurs de code, page 418.
Manipulation des fragments de code
Les fragments de code permettent de stocker des contenus en vue de pouvoir les r&eacute;utiliser
rapidement. Vous pouvez cr&eacute;er et ins&eacute;rer des fragments de code HTML, JavaScript, CFML, ASP
et JSP, notamment. Dreamweaver contient &eacute;galement quelques fragments de code pr&eacute;d&eacute;finis
pouvant servir de point de d&eacute;part.
Cette section d&eacute;crit les proc&eacute;dures d’insertion, de cr&eacute;ation, de modification et de suppression des
fragments de code. Elle permet &eacute;galement de comprendre comment g&eacute;rer les fragments de code et
les partager avec vos collaborateurs.
Pour ins&eacute;rer un fragment de code :
1 Placez le point d’insertion &agrave; l’endroit o&ugrave; vous souhaitez ins&eacute;rer le fragment de code ou
s&eacute;lectionnez le code &agrave; combiner avec le fragment choisi.
2 Dans le panneau Fragments de code (Fen&ecirc;tre &gt; Fragments de code), double-cliquez sur le
fragment de code.
Vous pouvez &eacute;galement cliquer avec le bouton droit de la souris (Windows) ou en maintenant
la touche Contr&ocirc;le enfonc&eacute;e (Macintosh) sur le fragment de code, puis s&eacute;lectionner Ins&eacute;rer
dans le menu contextuel.
438
Chapitre 20 : Codage dans Dreamweaver
Pour cr&eacute;er un fragment de code :
1 Cliquez sur l’ic&ocirc;ne Nouveau fragment de code situ&eacute; au bas du panneau Fragments de code.
La bo&icirc;te de dialogue Fragment de code s’affiche.
2 Compl&eacute;tez les options de la bo&icirc;te de dialogue, puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
Pour modifier un fragment de code :
• Dans le panneau Fragments de code, s&eacute;lectionnez un fragment de code, puis cliquez sur le
bouton Modifier le fragment de code situ&eacute; en bas du panneau.
Pour effacer un fragment de code :
• Dans le panneau Fragments de code, s&eacute;lectionnez un fragment de code, puis cliquez sur le
bouton Supprimer situ&eacute; en bas du panneau.
Pour cr&eacute;er des dossiers de fragments de code en vue de g&eacute;rer ces fragments :
1 Cliquez sur le bouton Nouveau dossier de fragments de code situ&eacute; au bas du panneau Fragments
de code.
2 Faites glisser des fragments de code vers le nouveau dossier ou d’autres dossiers, &agrave; votre
convenance.
Pour ajouter ou modifier un raccourci clavier pour un fragment de code :
1 Dans le panneau Fragments de code, cliquez avec le bouton droit de la souris (Windows) ou en
2
3
4
5
maintenant la touche Ctrl enfonc&eacute;e (Macintosh) et s&eacute;lectionnez Modifier les raccourcis clavier.
L’&eacute;diteur de raccourcis clavier s’ouvre.
Dans le menu contextuel Commandes, choisissez Fragments de code.
Une liste de fragments de code s’affiche.
S&eacute;lectionnez celui qui vous int&eacute;resse et assignez-lui le raccourci clavier de votre choix. Pour plus
d’informations, voir Personnalisation des raccourcis clavier, page 60.
Pour partager un fragment de code avec d’autres membres de l’&eacute;quipe :
1 Recherchez le fichier correspondant au fragment de code &agrave; partager dans le sous-dossier
Configuration/Snippets du dossier de l’application Dreamweaver MX.
2 Copiez le fichier du fragment de code dans un dossier partag&eacute; sur votre ordinateur ou sur un
ordinateur en r&eacute;seau.
3 Veillez &agrave; ce que les autres membres de l’&eacute;quipe copient le fichier du fragment de code dans leur
dossier Configuration/Snippets respectif.
Insertion rapide de code avec la barre Ins&eacute;rer
Utilisez la barre Ins&eacute;rer pour ajouter rapidement du code dans une page.
Pour ins&eacute;rer rapidement des &eacute;l&eacute;ments de code :
1 Positionnez le point d’insertion dans le code.
2 S&eacute;lectionnez la cat&eacute;gorie appropri&eacute;e de la barre Ins&eacute;rer.
3 Cliquez sur un bouton de la barre Ins&eacute;rer ou s&eacute;lectionnez un &eacute;l&eacute;ment de l’un des menus
contextuels de la barre Ins&eacute;rer.
R&eacute;daction et modification de code
439
D&egrave;s que vous cliquez sur une ic&ocirc;ne, le code peut appara&icirc;tre imm&eacute;diatement dans la page ou
une bo&icirc;te de dialogue peut vous demander de sp&eacute;cifier des informations suppl&eacute;mentaires pour
terminer le code.
Pour conna&icirc;tre la fonction de chaque bouton, placez le pointeur de la souris dessus jusqu’&agrave; ce
qu’une info-bulle s’affiche. Le nombre et le type des boutons de la barre Ins&eacute;rer varient selon la
nature du document affich&eacute; et selon que le mode Code ou Cr&eacute;ation est actif.
Bien que la barre Ins&eacute;rer regroupe les balises fr&eacute;quemment utilis&eacute;es, son contenu n’est pas
exhaustif. Vous trouverez un choix plus vari&eacute; de balises dans le s&eacute;lecteur de balises.
Rubriques connexes
• Barre Ins&eacute;rer, page 39
Insertion de balises avec le S&eacute;lecteur de balises
Vous pouvez utiliser le s&eacute;lecteur de balises pour ins&eacute;rer dans une page n’importe quelle balise
figurant dans les biblioth&egrave;ques de balises de Dreamweaver (notamment les biblioth&egrave;ques de
balises de Macromedia ColdFusion et ASP.NET). Pour plus d’informations sur les biblioth&egrave;ques
de balises, voir Gestion des biblioth&egrave;ques de balises, page 421.
Pour ins&eacute;rer une balise &agrave; l’aide du s&eacute;lecteur de balises :
1 Placez le point d’insertion dans le code, cliquez avec le bouton droit de la souris (Windows) ou
en maintenant la touche Contr&ocirc;le enfonc&eacute;e (Macintosh), puis s&eacute;lectionnez Ins&eacute;rer la balise.
Le S&eacute;lecteur de balises s’affiche. Le panneau de gauche r&eacute;pertorie les biblioth&egrave;ques de balises
prises en charge, tandis que le panneau de droite affiche les balises individuelles du dossier de
biblioth&egrave;ques de balises s&eacute;lectionn&eacute;.
2 S&eacute;lection et insertion d’une balise.
Pour plus d’informations, cliquez sur le bouton Aide de la bo&icirc;te de dialogue.
3 Pour fermer le s&eacute;lecteur de balises, cliquez sur le bouton Fermer.
440
Chapitre 20 : Codage dans Dreamweaver
Modification de balises avec des &eacute;diteurs de balises
Les &eacute;diteurs de balises permettent d’afficher, de sp&eacute;cifier et de modifier les attributs d’une balise.
Pour modifier une balise &agrave; l’aide d’un &eacute;diteur de balises :
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contr&ocirc;le
enfonc&eacute;e (Macintosh) sur une balise (en mode Code) ou sur un objet (en mode Cr&eacute;ation), puis
s&eacute;lectionnez la commande Modifier la balise du menu contextuel.
2 Indiquez ou modifiez les attributs de la balise, puis cliquez sur OK.
Conseil : Pour obtenir davantage d’informations sur la balise &agrave; partir de l’&eacute;diteur de balises, cliquez
sur l’option Infos sur les balises.
Mise en retrait des blocs de code
Lorsque vous r&eacute;digez et modifiez votre code en mode Code ou dans l’inspecteur de code, vous
pouvez corriger le niveau de mise en retrait de la ligne ou du bloc de code s&eacute;lectionn&eacute;s, en les
d&eacute;pla&ccedil;ant d’une tabulation vers la gauche ou vers la droite.
Pour mettre en retrait le bloc de code s&eacute;lectionn&eacute;, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Appuyez sur Tab.
• S&eacute;lectionnez Edition &gt; Code de retrait.
Pour annuler la mise en retrait du bloc de code s&eacute;lectionn&eacute;, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
• Appuyez sur Maj+Tab.
• S&eacute;lectionnez Edition &gt; Code de retrait n&eacute;gatif.
Rubriques connexes
• Modification rapide d’une s&eacute;lection de code, page 444
R&eacute;daction et modification de code
441
Copie et collage du code
Vous pouvez copier et coller du code &agrave; partir d’une autre application ou du mode Code lui-m&ecirc;me.
Vous pouvez choisir de copier et coller le code en tant que texte (il est visible sur la page lors de
l’affichage dans un navigateur) ou en tant que code (les navigateurs interpr&egrave;tent le code, par
exemple les balises HTML).
Pour copier et coller le code en tant que texte :
1 Copiez le code &agrave; partir de Dreamweaver ou d’une autre application.
2 Placez le point d’insertion en mode Cr&eacute;ation, puis s&eacute;lectionnez Edition &gt; Coller.
Le code est visible en mode Cr&eacute;ation. Les crochets sont cod&eacute;s sous forme d’entit&eacute;s HTML,
consid&eacute;r&eacute;es par les navigateurs comme du texte et non comme des balises.
Pour copier et coller le code en tant que code :
1 Copiez le code &agrave; partir de Dreamweaver ou d’une autre application.
Pour effectuer la copie &agrave; partir du mode Cr&eacute;ation, s&eacute;lectionnez Edition &gt; Copier HTML.
2 Proc&eacute;dez de l’une des mani&egrave;res suivantes :
■
■
En mode Code, positionnez le point d’insertion, puis s&eacute;lectionnez Edition &gt; Coller. Pour
mettre &agrave; jour l’affichage en mode Cr&eacute;ation, appuyez sur la touche F5.
En mode Cr&eacute;ation, positionnez le point d’insertion, puis s&eacute;lectionnez Edition &gt;
Coller HTML.
Insertion de commentaires HTML
Un commentaire est un texte descriptif que vous ins&eacute;rez dans le code HTML pour expliciter le
code ou fournir d’autres informations. Le commentaire appara&icirc;t uniquement en mode Code ; il
ne s’affiche pas dans un navigateur.
Pour ins&eacute;rer un commentaire au niveau du point d’insertion :
• S&eacute;lectionnez Insertion &gt; Commentaire.
En mode Code, Dreamweaver ins&egrave;re une balise de commentaire au milieu de laquelle il
positionne le point d’insertion. Saisissez votre commentaire.
En mode Cr&eacute;ation, Dreamweaver affiche la bo&icirc;te de dialogue Commentaire. Entrez votre
commentaire, puis cliquez sur OK.
Pour afficher les marqueurs de commentaires en mode Cr&eacute;ation :
• Choisissez Affichage &gt; Assistances visuelles &gt; El&eacute;ments invisibles.
V&eacute;rifiez que l’option Commentaires est s&eacute;lectionn&eacute;e dans les pr&eacute;f&eacute;rences des &eacute;l&eacute;ments
invisibles. Dans le cas contraire, le marqueur de commentaire ne s’affiche pas.
Pour modifier un commentaire existant, proc&eacute;dez de l’une des mani&egrave;res suivantes :
• En mode Cr&eacute;ation, s&eacute;lectionnez le marqueur Commentaire, puis modifiez le texte de votre
•
442
commentaire dans l’inspecteur de propri&eacute;t&eacute;s.
En mode Code, recherchez le commentaire pour en modifier le texte.
Chapitre 20 : Codage dans Dreamweaver
Affichage des fonctions JavaScript et VBScript dans votre document
Vous pouvez afficher la liste de toutes les fonctions JavaScript ou VBScript de votre document et
aller directement &agrave; la fonction qui vous int&eacute;resse.
Pour afficher le nom des fonctions de script d’un document :
1 Ouvrez le document en mode Code.
2 Toujours en mode Code, cliquez &agrave; n’importe quel endroit avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh). Dans le menu contextuel,
s&eacute;lectionnez le sous-menu Fonctions.
Remarque : Le sous-menu Fonctions ne s’affiche pas en mode Cr&eacute;ation.
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sousmenu.
Conseil : Pour afficher ces fonctions dans l’ordre alphab&eacute;tique, cliquez avec le bouton droit de la
souris tout en appuyant sur la touche Ctrl (Windows) ou en maintenant les touches Ctrl et Option
enfonc&eacute;es (Macintosh) en mode Code, puis s&eacute;lectionnez le sous-menu Fonctions.
Pour afficher une fonction de votre code :
• Choisissez un nom de fonction dans le sous-menu Fonctions.
Le mode Code affiche la fonction en surlignant son nom.
Recherche et remplacement de balises et d’attributs
Dreamweaver vous permet de rechercher et de remplacer des balises et des attributs dans votre
code.
Rubriques connexes
• Expressions r&eacute;guli&egrave;res, page 434
• Recherche et remplacement de texte, page 316
Recherche de balises, d’attributs ou de texte contenu dans des balises
sp&eacute;cifiques
Vous pouvez rechercher certains types de balises, des attributs et des valeurs d’attribut. Par
exemple, vous pouvez rechercher toutes les balises img n’ayant pas l’attribut alt.
Vous pouvez &eacute;galement rechercher des cha&icirc;nes de texte sp&eacute;cifiques se trouvant &agrave; l’int&eacute;rieur ou &agrave;
l’ext&eacute;rieur d’un jeu de balises. Par exemple, vous pouvez rechercher le mot Untitled document
entre les balises title pour trouver toutes les pages sans nom du site.
Pour rechercher des balises, des attributs ou des cha&icirc;nes de texte dans le code :
1 Ouvrez le document contenant l’&eacute;l&eacute;ment recherch&eacute; ou s&eacute;lectionnez des documents ou un
dossier dans le panneau Fichiers.
2 S&eacute;lectionnez la commande Edition &gt; Rechercher et remplacer.
La bo&icirc;te de dialogue Rechercher et remplacer s’affiche.
3 Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de recherche &agrave;
effectuer et enfin le texte ou les balises &agrave; rechercher. Vous pouvez &eacute;galement indiquer le texte
cens&eacute; remplacer l’&eacute;l&eacute;ment recherch&eacute;. Cliquez ensuite sur l’un des boutons Rechercher ou sur
l’un des boutons Remplacer.
Recherche et remplacement de balises et d’attributs
443
Pour plus d’informations, cliquez sur le bouton Aide.
4 Une fois l’op&eacute;ration termin&eacute;e, fermez la bo&icirc;te de dialogue en cliquant sur le bouton Fermer.
Pour effectuer une nouvelle recherche sans afficher la bo&icirc;te de dialogue Rechercher et
remplacer :
• Appuyez sur la touche F3 (Windows) ou Commande+G (Macintosh).
Rubriques connexes
• Expressions r&eacute;guli&egrave;res, page 434
Enregistrement de mod&egrave;les de recherche
Vous pouvez garder vos mod&egrave;les de recherche en m&eacute;moire pour les r&eacute;utiliser ult&eacute;rieurement.
Pour enregistrer un mod&egrave;le de recherche :
1 Dans la bo&icirc;te de dialogue Rechercher et remplacer (Edition &gt; Rechercher et remplacer),
d&eacute;finissez les param&egrave;tres de la recherche.
Si vous ex&eacute;cutez une recherche de balise ou de texte (avanc&eacute;), voir Recherche de balises,
d’attributs ou de texte contenu dans des balises sp&eacute;cifiques, page 443 pour plus d’informations sur
la d&eacute;finition des param&egrave;tres de recherche suppl&eacute;mentaires.
2 Cliquez sur le bouton Enregistrer la requ&ecirc;te (repr&eacute;sentant une disquette).
3 Dans la bo&icirc;te de dialogue qui s’affiche, recherchez le dossier o&ugrave; vous voulez enregistrer les
requ&ecirc;tes. Saisissez un nom pour identifier le fichier correspondant &agrave; la requ&ecirc;te, puis cliquez sur
Enregistrer.
Par exemple, si le mod&egrave;le de recherche inclut la recherche de balises img sans l’attribut alt,
vous pouvez nommer la requ&ecirc;te img_sans_alt.dwr.
Remarque : L’extension des fichiers correspondant aux requ&ecirc;tes enregistr&eacute;es est .dwr. Certains
fichiers de requ&ecirc;te enregistr&eacute;s &agrave; partir de versions ant&eacute;rieures de Dreamweaver peuvent
&eacute;galement avoir l’extension .dwq.
Pour rap">
こんにちは！私はAIチャットボットで、MACROMEDIA DREAMWEAVER MX 2004-UTILISATION DE DREAMWEAVER 取扱説明書に関するサポートをするために特別にトレーニングされています。すでにドキュメントを徹底的に確認しており、必要な情報を正確に見つけたり、内容をわかりやすく説明したりできます。特定の機能に関するガイダンス、トラブルシューティングの手順、または一般的な使い方について知りたい場合でも、遠慮なく質問してください。問題やニーズについて詳細を教えていただければ、より正確かつ効果的にお手伝いできます！