Manuel du propriétaire | MACROMEDIA DREAMWEAVER MX 2004-UTILISATION DE DREAMWEAVER Manuel utilisateur

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 & 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éposées de
Macromedia, Inc. et peuvent être déposées aux Etats-Unis ou dans d’autres pays. Les autres noms de produit, logos, concepts,
titres, mots ou phrases mentionnés dans cette publication peuvent être des marques commerciales, des marques de service ou des
noms commerciaux de Macromedia, Inc. ou d’autres entités et peuvent être déposé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ôlés par Macromedia et Macromedia ne peut en aucun
cas être tenu responsable du contenu de ces sites. Si vous accédez à l’un de ces sites, vous le faites à vos propres risques.
Macromedia propose ces liens dans un but pratique uniquement et ne peut en aucun cas endosser ou accepter la responsabilité du
contenu de ces sites tiers.
Vous trouverez des informations sur les logiciels tiers et/ou d’autres conditions générales à l’adresse suivante :
http://www.macromedia.com/go/thirdparty_fr/.
Navigateur Opera ® Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.
Dénégation de responsabilité d’Apple
APPLE COMPUTER, INC. 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 © 2003 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit,
traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l’autorisation écrite préalable de
Macromedia, Inc. Numéro de référence ZDW70M200F
Remerciements
Direction : Sheila McGinn
Gestion de projet : Charles Nadeau
Ré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ébarte, Julien Levadoux, les évaluateurs de la version bêta et l’ensemble des équipes techniques et AQ de Dreamweaver.
Première é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és de Dreamweaver MX 2004. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Par où débuter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Processus de création de sites Web dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . . 23
Utilisation de Dreamweaver avec d’autres applications. . . . . . . . . . . . . . . . . . . . . . 26
Dreamweaver et l’accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Guide des supports de formation à 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ê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é 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ètres avancés pour configurer un site Dreamweaver . . . . . . .
Modification des paramètres d’un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . .
Modification de sites Web existants dans Dreamweaver . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 3 : Création et ouverture de documents
33
41
44
49
52
56
57
58
64
66
67
72
72
. . . . . . . . . . . . . . . . . . . . . . . 75
Création de nouveaux documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Enregistrement d’un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Définition d’un nouveau type de document par dé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ès aux sites, à 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èques
. . . . . . . . . . . . . . 125
A propos des éléments de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Utilisation des actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Création et gestion d’une liste d’actifs favoris. . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Utilisation des éléments de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
CHAPITRE 6 : Gestion des sites Contribute avec Dreamweaver
. . . . . . . . . . . . 143
A propos de la gestion des sites Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Préparation d’un site à utiliser avec Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Administration d’un site Contribute à l’aide de Dreamweaver . . . . . . . . . . . . . . . 148
Dé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éfinition des préférences et des propriétés de calques. . . . . . . . . . . . . . . . . . . . . 162
Gestion des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Conversion des calques en tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Utilisation des règles et des grilles pour la mise en forme des pages . . . . . . . . . . . 170
Utilisation du tracé de l’image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
4
Table des matières
CHAPITRE 8 : Présentation de contenu à l’aide de tableaux
. . . . . . . . . . . . . . . 173
A propos des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’un tableau et ajout de contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Importation et exportation de données tabulaires . . . . . . . . . . . . . . . . . . . . . . . .
Sélection d’éléments de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation du mode Tableaux développé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é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éplacement de cellules et tableaux de Mise en forme . . . 202
Formatage de cellules et de tableaux de Mise en forme . . . . . . . . . . . . . . . . . . . . 204
Définition de la largeur des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Définition de préfé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être de document . . . . . . . . . . . . . . . . .
Création de cadres et de jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sé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éfinition des propriétés et attributs de cadre . . . . . . . . . . . . . . . . . .
Affichage et définition des propriétés des jeux de cadres . . . . . . . . . . . . . . . . . . .
Dé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èles .
209
213
214
216
218
219
220
221
222
223
223
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
A propos des modèles Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création d’un modèle Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de modèles pour un site Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de régions modifiables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de régions répétées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des régions facultatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Définition d’attributs de balise modifiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des matières
226
238
241
243
245
248
250
5
Création d’un modèle imbriqué. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Modification et mise à jour des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Gestion des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Exportation et importation du contenu XML d’un modèle . . . . . . . . . . . . . . . . . 256
Exportation d’un site sans marqueur de modèle. . . . . . . . . . . . . . . . . . . . . . . . . . 257
Application ou suppression d’un modèle depuis un document existant . . . . . . . . 257
Modification du contenu d’un document basé sur un modè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écification de balises HTML au lieu de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Définition des propriétés de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Utilisation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Sélection d’éléments dans la fenêtre de document . . . . . . . . . . . . . . . . . . . . . . . . 274
Utilisation du panneau Historique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Automatisation des tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Utilisation de comportements JavaScript pour détecter le type et
la version des navigateurs et des plug-ins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Aperçu et test de page dans les navigateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Vérification des préférences de durée et de la taille de télé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 à jour de feuilles de style CSS dans un site Contribute . . . . . . . . . . . . . . . . 314
Vé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 à l’aide de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . 324
Ajustement de la luminosité et du contraste d’une image. . . . . . . . . . . . . . . . . . . 325
Accentuation d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Création d’une image survolée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Utilisation d’un éditeur d’image externe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Application decomportements aux images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
6
Table des matières
CHAPITRE 15 : Liens et navigation .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Description des emplacements et chemins d’accès des documents . . . . . . . . . . . .
Menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A propos des cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestion des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion de menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Association de comportements JavaScript à des liens . . . . . . . . . . . . . . . . . . . . . .
Recherche de liens brisés, externes et orphelins . . . . . . . . . . . . . . . . . . . . . . . . . .
Correction des liens brisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ouverture des documents lié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é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’éléments audio, vidéo et interactifs
. . . . . . . . . . . . . . . . 367
A propos des fichiers multimédia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion et modification d’objets multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . .
Lancement d’un éditeur externe pour des fichiers multimédia . . . . . . . . . . . . . . .
Utilisation des Design Notes (Notes de conception) avec les objets multimédia. .
Insertion et modification d’un objet de bouton Flash . . . . . . . . . . . . . . . . . . . . .
Insertion d’un objet texte Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Téléchargement et installation des éléments Flash . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’éléments Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification des attributs d’un élément Flash . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’animations Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout d’une vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout de son à une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion du contenu d’un plug-in Netscape Navigator . . . . . . . . . . . . . . . . . . . .
Insertion d’un contrôle ActiveX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’une applet Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de comportements pour contrôler les objets multimé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 événements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Application d’un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Association d’un comportement à du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification d’un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Actualisation d’un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des matières
384
384
385
386
387
387
7
Création de nouvelles actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Téléchargement et installation de comportements créés par
des développeurs tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Utilisation des actions de comportement livré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é en mode Code (Windows uniquement) . 417
Définition des préférences d’affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Définition des préférences de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Personnalisation des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Ouverture de fichiers en mode Code par défaut. . . . . . . . . . . . . . . . . . . . . . . . . . 420
Définition des préférences du programme de validation . . . . . . . . . . . . . . . . . . . 420
Gestion des bibliothèques de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Importation de balises personnalisées dans Dreamweaver . . . . . . . . . . . . . . . . . . 424
Utilisation d’un éditeur HTML externe avec Dreamweaver . . . . . . . . . . . . . . . . 426
CHAPITRE 20 : Codage dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . 429
A propos du codage dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Rédaction et modification de code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Recherche et remplacement de balises et d’attributs . . . . . . . . . . . . . . . . . . . . . . . 443
Modification rapide d’une sélection de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Utilisation des documents de référence sur les langages . . . . . . . . . . . . . . . . . . . . 445
Impression du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
CHAPITRE 21 : Optimisation et débogage de code
. . . . . . . . . . . . . . . . . . . . . . 447
Nettoyage du code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
Vérification de l’équilibre des balises et des accolades . . . . . . . . . . . . . . . . . . . . . . 448
Vérification de la compatibilité du navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Validation de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Conformité des pages avec le langage XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Utilisation du débogueur ColdFusion (Windows uniquement) . . . . . . . . . . . . . . 453
CHAPITRE 22 : Modification du code en mode Création .
. . . . . . . . . . . . . . . . . 455
Modification du code avec l’inspecteur de propriétés . . . . . . . . . . . . . . . . . . . . . . 455
Modification d’attributs dans l’inspecteur de balises . . . . . . . . . . . . . . . . . . . . . . 456
Modification du code avec Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Modification du code à l’aide du sélecteur de balises . . . . . . . . . . . . . . . . . . . . . . 460
Modification des scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Utilisation des inclusions côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Utilisation des comportements JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Affichage et modification du contenu de l’en-tête . . . . . . . . . . . . . . . . . . . . . . . . 463
8
Table des matières
PARTIE VI : Préparation à la création de sites dynamiques
CHAPITRE 23 : Configuration d’une application Web
. . . . . . . . . . . . . . . . . . . . 467
Eléments nécessaires à la création d’applications Web . . . . . . . . . . . . . . . . . . . . .
Configuration d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configuration d’un serveur d’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création d’un dossier racine pour l’application . . . . . . . . . . . . . . . . . . . . . . . . . .
Définition d’un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 24 : Connexions à des bases de données pour les développeurs
ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
467
467
468
471
473
475
. . 477
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Modification ou suppression d’une connexion à une base de données . . . . . . . . . 478
CHAPITRE 25 : Connexions à des bases de données pour
les développeurs ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 479
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Modification ou suppression d’une connexion à une base de données . . . . . . . . . 483
CHAPITRE 26 : Connexions à des bases de données pour
les développeurs ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 485
A propos des connexions à des bases de données dans ASP . . . . . . . . . . . . . . . . .
Création d’une connexion DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création d’une connexion sans DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion à une base de données via un fournisseur d’accès . . . . . . . . . . . . . . . .
Modification ou suppression d’une connexion à une base de données . . . . . . . . .
CHAPITRE 27 : Connexions à des bases de données pour
les développeurs JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 495
A propos des connexions à des bases de données dans JSP . . . . . . . . . . . . . . . . . .
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion via un pilote ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification ou suppression d’une connexion à une base de données . . . . . . . . .
CHAPITRE 28 : Connexions à des bases de données pour
les développeurs PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
485
487
490
491
494
495
497
498
501
. . . . . . . . . . . . . . . . 503
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Modification ou suppression d’une connexion à une base de données . . . . . . . . . 504
CHAPITRE 29 : Résolution des problèmes de connexion
à des bases de données . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 505
Résolution des problèmes d’autorisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Résolution des messages d’erreur Microsoft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
Table des matiè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éveloppement visuel . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 515
Affichage de panneaux de développement d’applications Web . . . . . . . . . . . . . . .
Affichage de votre base de données dans Dreamweaver . . . . . . . . . . . . . . . . . . . .
Affichage des données dynamiques en mode Création . . . . . . . . . . . . . . . . . . . .
Travail en mode Création sans données dynamiques . . . . . . . . . . . . . . . . . . . . . .
Aperçu des pages dynamiques dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . .
Limitation des informations de base de données affichées dans Dreamweaver . . .
516
518
518
523
524
524
CHAPITRE 31 : Déroulement de la conception de pages dynamiques . . . . . . . .
527
Conception de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Création d’une source de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Ajout d’un contenu dynamique à une page Web . . . . . . . . . . . . . . . . . . . . . . . . . 530
Amélioration des fonctionnalités d’une page dynamique . . . . . . . . . . . . . . . . . . . 530
Test et débogage d’une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
CHAPITRE 32 : Récupération des données spécifiques à une page
. . . . . . . . . 535
Utilisation d’une base de données pour stocker un contenu . . . . . . . . . . . . . . . . . 536
Collecte de données envoyées par les utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . 537
Accès à des données stockées dans des variables de session . . . . . . . . . . . . . . . . . . 541
CHAPITRE 33 : Définition de sources de contenu dynamique . . . .
. . . . . . . . . . 547
A propos des sources de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
Définition d’un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
Définition de paramètres d’URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
Définition de paramètres de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
Définition de variables de session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Définition de variables d’application dans ASP et ColdFusion. . . . . . . . . . . . . . . 559
Utilisation d’une variable comme source de données pour un jeu
d’enregistrements de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Définition de variables de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
Mise en mémoire cache de sources de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Modification ou suppression de sources de contenu. . . . . . . . . . . . . . . . . . . . . . . 565
Copie d’un jeu d’enregistrements d’une page à une autre. . . . . . . . . . . . . . . . . . . 566
CHAPITRE 34 : Ajout d’un contenu dynamique à une page Web
. . . . . . . . . . . 567
A propos de l’ajout de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568
Ajout d’un texte dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Création d’images dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Création d’attributs HTML dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Création de paramètres d’objet (ActiveX, Flash, etc.) dynamiques . . . . . . . . . . . . 572
Modification du contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573
Suppression d’un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573
Création de pages dynamiques dans un site Contribute . . . . . . . . . . . . . . . . . . . . 574
10
Table des matières
CHAPITRE 35 : Affichage des enregistrements de base de données
. . . . . . . . 575
A propos de l’affichage des enregistrements de base de données . . . . . . . . . . . . . .
Utilisation de formats de données prédéfinis . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de liens de navigation de jeu d’enregistrements . . . . . . . . . . . . . . . . . .
Affichage et masquage des régions en fonction des résultats du jeu
d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Affichage de plusieurs résultats d’un jeu d’enregistrements . . . . . . . . . . . . . . . . .
Création d’un tableau à l’aide du comportement de serveur Région répétée. . . . .
Création d’un compteur d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de contrôles Web Grille de données et Liste de données ASP.NET . . . .
CHAPITRE 36 : Utilisation des composants ColdFusion
596
596
597
598
599
. . . . . . . . . . . . . . . . . . . . . . . . . . . 601
A propos des services Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configuration d’un générateur de proxy destiné à être utilisé
avec Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout d’un proxy de services Web à l’aide de la description WSDL . . . . . . . . . . .
Ajout d’un service Web à une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification de la liste de sites des services Web UDDI . . . . . . . . . . . . . . . . . . .
CHAPITRE 38 : Ajout de comportements de serveur personnalisés
602
605
607
608
609
. . . . . . . . . 611
A propos des comportements de serveur personnalisés. . . . . . . . . . . . . . . . . . . . .
Installation de comportements de serveur créés par des développeurs tiers . . . . .
Utilisation du Créateur de comportements de serveur . . . . . . . . . . . . . . . . . . . . .
Utilisation de paramètres dans des comportements de serveur . . . . . . . . . . . . . . .
Positionnement des blocs de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création d’une boîte de dialogue spécifique à un comportement de serveur
personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification d’un comportement de serveur. . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 39 : Création de formulaires .
587
587
588
589
591
. . . . . . . . . . . . . . . . . . 595
A propos des composants ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création visuelle d’un composant dans Dreamweaver . . . . . . . . . . . . . . . . . . . . .
Affichage de composants ColdFusion dans Dreamweaver . . . . . . . . . . . . . . . . . .
Modification de composants ColdFusion dans Dreamweaver . . . . . . . . . . . . . . .
Cré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éation de formulaires HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’objets de formulaire HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d’objets de formulaire HTML dynamiques. . . . . . . . . . . . . . . . . . . . . .
Validation des données de formulaire HTML . . . . . . . . . . . . . . . . . . . . . . . . . . .
Liaison de comportements JavaScript à des objets de formulaire HTML . . . . . . .
Liaison de scripts personnalisés à des boutons de formulaire HTML . . . . . . . . . .
Création de formulaires HTML accessibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de formulaires ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des matières
632
635
636
640
644
644
645
645
646
11
PARTIE VIII : Développement rapide d’applications
CHAPITRE 40 : Création rapide d’applications ColdFusion . . . . . .
. . . . . . . . . . 653
A propos du développement rapide d’applications (tous les serveurs). . . . . . . . . . 653
Création d’un ensemble de pages Principale-Détails (ColdFusion). . . . . . . . . . . . 658
Création de pages de recherche/résultats (ColdFusion, ASP, JSP, PHP) . . . . . . . . 665
Création d’une page d’insertion d’enregistrement (tous les serveurs) . . . . . . . . . . 671
Création de pages pour mettre à jour un enregistrement (ColdFusion) . . . . . . . . 674
Création de pages de suppression d’un enregistrement (ColdFusion) . . . . . . . . . . 679
Modification d’une base de données à l’aide de procédures stockées
(ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
Création de pages limitant l’accès à votre site (ColdFusion, ASP, JSP, PHP). . . . . 688
CHAPITRE 41 : Création rapide d’applications ASP.NET .
. . . . . . . . . . . . . . . . . 699
Création d’un ensemble de pages Principale-Détails (ASP.NET) . . . . . . . . . . . . . 699
Création d’une page de recherche dans une base de données (ASP.NET) . . . . . . . 705
Création d’une page d’insertion d’enregistrements (ASP.NET) . . . . . . . . . . . . . . 710
Création de pages de mise à jour d’un enregistrement (ASP.NET) . . . . . . . . . . . . 710
Création de pages de suppression d’un enregistrement (ASP.NET) . . . . . . . . . . . 717
Modification d’une base de données à l’aide de procédures stockées
(ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725
Création de pages limitant l’accès à votre site (ASP.NET) . . . . . . . . . . . . . . . . . . 726
CHAPITRE 42 : Création rapide d’applications ASP et JSP
. . . . . . . . . . . . . . . 727
Création d’un ensemble de pages Principale-Détails (ASP et JSP) . . . . . . . . . . . . 727
Création de pages de recherche/résultats (ASP et JSP) . . . . . . . . . . . . . . . . . . . . . 731
Création d’une page d’insertion d’enregistrements (ASP et JSP) . . . . . . . . . . . . . 731
Création de pages de mise à jour d’un enregistrement (ASP et JSP) . . . . . . . . . . . 731
Création de pages de suppression d’un enregistrement (ASP et JSP) . . . . . . . . . . 736
Création de pages comportant des objets de manipulation de données avancés
(ASP et JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739
Création de pages limitant l’accès à votre site (ASP et JSP) . . . . . . . . . . . . . . . . . 743
CHAPITRE 43 : Création rapide d’applications PHP
. . . . . . . . . . . . . . . . . . . . . 745
Création de pages Principale-Détails (PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745
Création de pages de recherche/de résultats (PHP) . . . . . . . . . . . . . . . . . . . . . . . 751
Création d’une page d’insertion d’enregistrements (PHP) . . . . . . . . . . . . . . . . . . 751
Création de pages pour mettre à jour un enregistrement (PHP). . . . . . . . . . . . . . 752
Création de pages de suppression d’un enregistrement (PHP) . . . . . . . . . . . . . . . 757
Création de pages limitant l’accès à votre site (PHP) . . . . . . . . . . . . . . . . . . . . . . 765
12
Table des matières
PARTIE IX : Annexes
ANNEXE A : Guide du débutant en base de données
. . . . . . . . . . . . . . . . . . . . . 769
A propos des bases de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769
Principes fondamentaux pour la conception d’une base de données. . . . . . . . . . . 770
Description des connexions aux bases de données . . . . . . . . . . . . . . . . . . . . . . . . 776
ANNEXE B : Initiation à SQL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781
Notions de syntaxe élémentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dé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ères
13
14
Table des matières
Apprenez à 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éféré. Ensuite, planifiez et configurez un site et commencez à cré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é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 éditeur HTML professionnel destiné à la
conception, au codage et au développement de sites, de pages et d’applications Web. Quel que
soit l’environnement de travail utilisé (codage manuel HTML ou environnement d’édition
visuel), Dreamweaver propose des outils qui vous aideront à créer des applications Web.
Les fonctions d’édition visuelles de Dreamweaver vous permettent de créer rapidement des pages
sans rédiger une seule ligne de code. Vous pouvez afficher tous les éléments ou actifs de votre site
et les faire glisser directement d’un panneau convivial dans un document. Rationalisez les tâches
de développement en cré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 également un environnement de codage complet comprenant des outils de
modification du code (comme la coloration du code et la création de balises) ainsi que des
documents de réfé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é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 également de créer des applications Web reposant sur des bases de données
dynamiques au moyen de technologies serveur comme CFML, ASP.NET, ASP, JSP et PHP.
Dreamweaver est entièrement personnalisable. Vous pouvez créer vos propres objets et commandes,
modifier les raccourcis clavier ou encore rédiger un code JavaScript pour intégrer de nouveaux
comportements, inspecteurs de propriétés et rapports de site aux fonctionnalités de Dreamweaver.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
Nouveautés de Dreamweaver MX 2004, page 18
Par où débuter, page 20
Processus de création de sites Web dans Dreamweaver, page 23
Utilisation de Dreamweaver avec d’autres applications, page 26
Dreamweaver et l’accessibilité, page 27
Guide des supports de formation à Dreamweaver, page 28
Conventions typographiques, page 30
Ressources sur le langage HTML et les technologies Web, page 30
17
Nouveautés de Dreamweaver MX 2004
Dreamweaver MX 2004 contient une nouvelle interface simplifiée et est plus performant. Il
propose également de nombreuses nouvelles fonctions qui en améliorent la convivialité et vous
aident à créer des pages, que vous travailliez dans les environnements de création ou de codage.
Simplification du produit et de l’interface de développement
L’interface de Dreamweaver est plus intuitive pour vous aider à améliorer votre productivité et la
qualité de votre travail.
grâce à sa présentation plus simple, la barre Insérer prend
moins de place dans l’environnement de travail. Une nouvelle catégorie de favoris vous permet en
outre de la personnaliser en regroupant les objets que vous utilisez le plus souvent. Pour plus
d’informations, voir Barre Insérer, page 39.
Amélioration de la barre Insé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énère du code HTML de bonne qualité. Pour plus d’informations, voir Copie et
collage de texte à 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érations de redimensionnement de colonnes sur vos tableaux. Elle simplifie également la
sélection d’éléments dans les tableaux. Pour plus d’informations sur le redimensionnement, voir
Redimensionnement des tableaux, des colonnes et des lignes, page 183. Pour plus d’informations sur
l’utilisation du mode Tableaux développés pour sélectionner des éléments, voir Utilisation du
mode Tableaux développé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 été repensée pour optimiser
l’espace de travail utilisable et afficher le contexte et les éléments actifs de manière plus claire.
Désormais, l’interface est plus logique et intuitive. Pour plus d’informations sur l’espace de travail
de Dreamweaver, voir A propos de l’espace de travail de Dreamweaver, page 33.
Page de démarrage : cette page vous permet d’accéder rapidement aux derniers fichiers utilisés,
de créer de nouveaux fichiers et d’accéder aux didacticiels de Dreamweaver. Elle s’affiche lorsque
vous démarrez Dreamweaver ou lorsque aucun document n’est ouvert. Pour plus d’informations
sur la façon de masquer ou d’afficher la Page de démarrage, voir Affichage et masquage de la page de
démarrage, page 59.
Bureau enregistré : cette option vous permet d’indiquer à Dreamweaver de rouvrir les
documents sur lesquels vous travailliez lorsque vous redémarrez Dreamweaver. Pour plus
d’informations sur la configuration de cette option, voir Définition des préférences générales de
Dreamweaver, 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é des polices de caractères installées sur votre système en ayant la certitude
que Dreamweaver en assurera correctement le rendu et l’enregistrement. Pour plus d’informations
sur la configuration des codages de polices, voir Définition des préférences de police pour l’affichage
Dreamweaver, page 60.
Prise en charge intégrale d’Unicode :
18
Introduction : Bienvenue dans Dreamweaver
Secure FTP : cette fonction vous permet de crypter intégralement tous les transferts de fichiers et
d’empêcher les utilisateurs non autorisés d’accéder à vos données, fichiers, noms d’utilisateur et
mots de passe. Pour plus d’informations sur la configuration d’une connexion à distance avec
FTP, voir Configuration d’un dossier distant, page 70.
Actualisation de la mise en page et de l’environnement de création
Dreamweaver s’enrichit des nouvelles fonctions CSS présentées ci-dessous, qui vous permettent
de rendre vos projets dynamiques et interactifs de manière plus sophistiquée. Il permet également
d’afficher immédiatement les modifications apportées pour améliorer l’édition visuelle.
Validation dynamique entre navigateurs : cette fonction permet de vérifier automatiquement la
compatibilité du document ouvert avec différents navigateurs lors de chaque enregistrement.
Spécifiez les navigateurs à vérifier et Dreamweaver s’assure que les pages ne contiennent pas de
balises ou d’éléments CSS non pris en charge par ces navigateurs. Pour plus d’informations, voir
Vérification de la compatibilité du navigateur, page 448.
CSS pertinents : cet onglet affiche les règles CSS appliquées à la sélection en cours en mode
Code ou Création. Cliquez sur une règle pour connaître les attributs qu’elle gère (style de bordure,
marge, marge intérieure, taille de texte, etc.). Les attributs ignorés sont mis en évidence. Des
modifications rapides peuvent être apportées directement et s’affichent instantanément en mode
Création. Pour plus d’informations, voir L’onglet Propriétés CSS, page 293.
Visualisation de mise en forme CSS : la mise en forme de pages à l’aide de feuilles de style en
cascade (CSS) est désormais beaucoup plus simple. Vous pouvez facilement sélectionner des
balises div et d’autres blocs de contenu en mode Création, puis en modifier les propriétés sous
l’onglet Propriétés CSS. Pour plus d’informations, voir 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écision. L’amélioration du rendu vous permet de réaliser des
mises en forme plus sophistiquées et d’effectuer des manipulations visuelles poussées à l’aide des
outils de création de Dreamweaver.
Amélioration du rendu CSS :
le panneau propose désormais davantage d’options de
modification des styles dans le document. A présent, vous pouvez également appliquer
directement des styles depuis l’inspecteur de propriétés de texte. Pour plus d’informations, voir
Utilisation des feuilles de style en cascade, page 304.
Amélioration du panneau Styles CSS :
cet
inspecteur dresse la liste de tous les styles disponibles applicables au texte et comprend une
fonction d’aperçu permettant de connaître l’aspect du texte après application du style. Pour plus
d’informations, voir Inspecteur de propriétés et formatage de texte, page 292.
Inspecteur de propriétés de texte reposant sur des feuilles de style en cascade (CSS) :
ces propriétés vous
offrent un meilleur contrôle des propriétés de page (affichage des en-têtes et des liens, par
exemple) à l’aide d’éléments de codage CSS récents. Pour plus d’informations, voir A propos de la
définition des propriétés de page, page 266.
Propriétés de page reposant sur des feuilles de style en cascade (CSS) :
Barre d’outils de retouche d’image intégrée : cette fonction vous permet d’effectuer des
retouches d’image simples dans Dreamweaver à l’aide de la technologie Macromedia Fireworks.
Vous avez la possibilité de recadrer, de redimensionner ou encore de rééchantillonner des images
sans quitter Dreamweaver. Pour plus d’informations, voir Modification d’images dans
Dreamweaver, page 318.
Nouveautés de Dreamweaver MX 2004
19
Environnement de codage puissant et ouvert
Dreamweaver offre aux rédacteurs de code les nouvelles fonctions présentées ci-dessous, qui
concernent notamment le mode Création et la possibilité de modifier des fichiers sans créer de site
Dreamweaver. Dreamweaver prend également en charge les technologies de serveur actuelles.
Amélioration de l’inspecteur de balises : cet inspecteur affiche la liste des propriétés disponibles
applicables à la sélection en cours et vous permet d’effectuer des modifications rapides et
complètes. Pour plus d’informations, voir Modification d’attributs dans l’inspecteur de balises,
page 456.
Modification de fichiers sans site : cette fonction vous permet de travailler directement sur un
serveur FTP ou RDS sans créer de site Dreamweaver. Pour plus d’informations sur la
configuration de Dreamweaver pour travailler sur un serveur, voir Configuration de Dreamweaver
pour fonctionner sans avoir à définir de site, 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éer un ensemble de
pages Principale-Détails et des pages d’authentification des utilisateurs. Pour plus d’informations,
voir Création de pages Principale-Détails (PHP), page 745 et Création de pages limitant l’accès à
votre site (PHP), page 765.
de nouvelles
méthodes plus perfectionnées (notamment de nouveaux inspecteurs de propriétés) vous sont
proposées pour créer et modifier des formulaires Web ASP.NET en mode Création. Pour plus
d’informations, voir Chapitre 42, Création rapide d’applications ASP et JSP, page 727.
Amélioration de la prise en charge des contrôles de formulaire ASP.NET :
ce menu vous permet de modifier rapidement la mise en
forme du code sélectionné. Pour plus d’informations, voir Modification rapide d’une sélection de
code, page 444.
Menu contextuel en mode Code :
Par où débuter
La documentation de Dreamweaver contient des informations destinées à des lecteurs ayant divers
niveaux d’expérience. Pour tirer le meilleur parti de cette documentation, commencez par lire les
sections qui correspondent le mieux à votre situation.
Pour plus d’informations sur les ressources de Dreamweaver, voir Guide des supports de formation à
Dreamweaver, page 28.
Concepteurs débutants
Si vous ê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ébutent :
1 Commencez par lire les didacticiels de création d’un site statique dans le guide Bien démarrer
avec Dreamweaver, accessible via le menu Aide.
2 Dans Utilisation de Dreamweaver (Aide > 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é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 à vos pages.
5 C’est tout ce dont vous avez besoin pour commencer à réaliser des sites Web de qualité ; lorsque
vous vous sentirez prêt à utiliser des outils plus sophistiqué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éation de pages Web avant de lire ces chapitres.
Concepteurs expérimentés
Si vous êtes un concepteur de sites Web expérimenté, cette section vous guidera vers les points
essentiels de la documentation Dreamweaver correspondant à vos connaissances. Deux approches
différentes sont proposées : une pour les concepteurs qui n’ont jamais ou peu utilisé Dreamweaver
et une pour les concepteurs qui connaissent déjà bien Dreamweaver mais qui veulent en savoir
plus sur la création de pages dynamiques.
Pour les concepteurs Web expérimentés qui utilisent Dreamweaver pour la première fois :
1 Commencez par lire les didacticiels de création d’un site statique dans le guide Bien dé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é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émentés dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site Dreamweaver.
Pour obtenir des informations utiles sur la cré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ébogage de code, page 447 et Modification du code en mode Création, page 455.
Lisez la présentation au début des autres chapitres de Utilisation de Dreamweaver pour savoir
si les sujets abordés sont susceptibles de vous intéresser.
Pour les concepteurs Web expérimentés qui connaissent bien Dreamweaver et souhaitent
en apprendre davantage sur la création de pages dynamiques :
1 Commencez par lire « Description des applications Web » et le didacticiel de développement
2
3
4
5
6
d’une application Web dans le guide Bien dé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éveloppement visuel,
page 515.
Familiarisez-vous avec la conception de pages dynamiques dans Dreamweaver en lisant
Dé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 à une base de données (voir Connexion à une base de données, page 475).
Lisez la présentation au début de chaque chapitre de Utilisation de Dreamweaver pour savoir si
les sujets abordés sont susceptibles de vous intéresser.
Par où débuter
21
7 Si vous souhaitez personnaliser Dreamweaver manuellement, consultez la section
« Customizing Dreamweaver » du centre de support de Macromedia à l’adresse suivante :
www.macromedia.com/go/customizing_dreamweaver_fr. Si vous voulez écrire des extensions
pour Dreamweaver, lisez Extension de Dreamweaver.
Codeurs manuels expérimentés
Si vous êtes un codeur manuel expérimenté, cette section vous guidera vers les points essentiels de
la documentation Dreamweaver correspondant à vos connaissances.
Pour les codeurs manuels expérimentés :
1 Commencez par lire « Didacticiel : Modification de code » dans Bien dé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é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émentés dans Dreamweaver. Attachez-vous
particuliè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ébogage de code, page 447
et le Chapitre 22, Modification du code en mode Création, page 455 pour en savoir plus sur le
codage dans Dreamweaver.
Lisez la présentation au début de chaque chapitre de Utilisation de Dreamweaver pour savoir si
les sujets abordés sont susceptibles de vous intéresser.
Développeurs d’applications Web
Si vous êtes un développeur d’applications Web expérimenté, cette section vous guidera vers les
points essentiels de la documentation Dreamweaver correspondant à vos connaissances. Deux
approches différentes sont proposées, selon que vous avez déjà utilisé Dreamweaver ou non.
Pour les développeurs d’applications Web n’ayant jamais utilisé Dreamweaver :
1 Commencez par parcourir le guide Bien dé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é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émentés dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site Dreamweaver.
Configurez un serveur Web et un serveur d’application à l’aide de Dreamweaver (voir
Chapitre 23, Configuration d’une application Web, page 467).
Connectez-vous à une base de données (voir Connexion à une base de données, page 475).
Lisez la présentation au début de chaque chapitre de Utilisation de Dreamweaver pour savoir si
les sujets abordés sont susceptibles de vous intéresser.
Pour les développeurs d’applications Web ayant déjà utilisé Dreamweaver :
1 Commencez par lire Nouveauté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
« Customizing Dreamweaver » du centre de support de Macromedia à l’adresse suivante :
www.macromedia.com/go/customizing_dreamweaver_fr. Si vous voulez écrire des extensions
pour Dreamweaver, lisez Extension de Dreamweaver.
Processus de création de sites Web dans Dreamweaver
Vous pouvez créer un site Web de plusieurs façons. Le processus présenté ici commence par la
définition de la stratégie ou des objectifs d’un site. Si vous développez des applications Web, vous
devez configurer les serveurs et bases de données en fonction de votre système. Vous devez ensuite
définir l’aspect général du site. Ensuite, vous devez créer le site et coder les pages pour ajouter un
contenu et définir l’interactivité du site. Vous allez ensuite lier les pages les unes aux autres et
tester la fonctionnalité du site pour savoir s’il remplit les objectifs fixés. Vous pouvez également
inclure des pages dynamiques à votre site. Enfin, vous allez publier le site sur un serveur. De
nombreux développeurs programment également une maintenance régulière pour s’assurer que le
site reste à jour et est opé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éduit pas à déterminer l’emplacement des fichiers : elle inclut
également l’analyse des besoins du site, des profils de ses utilisateurs et de ses objectifs. Il convient
également d’examiner les conditions techniques requises, notamment l’accès utilisateur et les
restrictions en matière de navigateurs, de plug-ins ou de téléchargement.
Après avoir organisé vos informations et défini une structure, vous pouvez commencer la cré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éer des pages simples qui deviendront plus complexes au fur et
à mesure de leur conception. Créez de nouvelles pages vierges ou des pages basées sur des pages
prédéfinies (voir Chapitre 3, Création et ouverture de documents, page 75).
Si vous travaillez au sein d’une équipe de développement Web, les sujets suivants sont également
susceptibles de vous intéresser :
• Configuration d’un système pour empêcher les membres de l’équipe d’écraser les fichiers (voir
•
Archivage et extraction de fichiers, page 106).
Utilisation de Design Notes pour communiquer avec les membres de l’é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éation de sites Web dans Dreamweaver
23
• Dans le panneau Fichiers de Dreamweaver, vous trouverez de nombreux outils qui vous
•
•
aideront à gérer votre site, à transférer vos fichiers vers et depuis un serveur distant, à configurer
un processus d’archivage/extraction pour empêcher l’écrasement des fichiers et à synchroniser
les fichiers sur vos sites locaux et distants (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èques, page 125).
Dreamweaver vous permet de gé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 à votre rythme et selon vos envies dans la mise en forme
de vos pages. Sélectionnez la technique de mise en forme de votre choix ou combinez les options
de mise en forme de Dreamweaver pour définir la présentation de votre site.
• Vous pouvez utiliser des calques ou des styles de positionnement CSS Dreamweaver pour
•
•
•
définir la mise en forme (voir Chapitre 7, Mise en forme des pages avec les styles CSS, page 155).
Les outils de création de tableaux et le mode Mise en forme de Dreamweaver vous permettent
de concevoir rapidement des pages Web en dessinant, puis en réorganisant la structure des
pages (voir Chapitre 8, Présentation de contenu à 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ément dans un navigateur Web, vous
pouvez définir leur mise en forme en utilisant des cadres (voir Chapitre 10, Utilisation de
cadres, page 209).
Les modèles Dreamweaver permettent d’appliquer facilement un contenu réutilisable et des
conceptions de page dans votre site. Vous pouvez créer de nouvelles pages à partir d’un modèle
Dreamweaver, puis actualiser automatiquement leur mise en forme lorsque le modèle change
(voir Chapitre 11, Gestion des modèles, page 225).
Ajout de contenu dans les pages
Avec Dreamweaver, vous pouvez sans difficulté ajouter des contenus variés à vos pages Web.
Ajoutez des actifs et des éléments de conception, par exemple des textes, des images, des couleurs,
des animations, des sons et autres formes de données.
• Les fonctions de création de pages offertes par Dreamweaver vous permettent de spécifier des
•
24
propriétés de page Web, par exemple, le titre d’une page ou encore des images et couleurs
d’arriè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é avec
différents navigateurs Web (voir Chapitre 12, Utilisation des pages, page 265).
Tapez directement du texte dans un document Dreamweaver ou importez du texte à partir
d’autres documents, puis formatez-le avec l’inspecteur de propriétés de Dreamweaver. Vous
pouvez également cré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érez des images telles que des images survolées, des cartes graphiques et des images
•
•
•
Fireworks découpées, et positionnez-les sur la page à l’aide des outils d’alignement. Vous
pouvez é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éer des liens HTML standard, y compris des ancres et des liens
de messagerie, ou configurer facilement des systèmes de navigation graphiques, notamment des
menus de reroutage et des barres de navigation (voir Chapitre 15, Liens et navigation, page 329).
Insérez d’autres types de ressources dans une page Web : animations Flash, Shockwave ou
QuickTime, sons, applets (voir Chapitre 17, Ajout d’éléments audio, vidéo et interactifs,
page 367).
Utilisez les comportements pour exécuter des tâches en réponse à des événements spé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ème
fenê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éthode de création de pages. Dreamweaver
dispose d’outils d’édition visuelle conviviaux ainsi que d’un environnement de codage sophistiqué.
Vous pouvez utiliser l’une ou l’autre de ces méthodes (ou bien les deux) pour cré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éer, de modifier et de formater du code et de vérifier
sa conformité 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ébogage de code, page 447).
Vous pouvez également utiliser des outils de codage Dreamweaver en mode Création
(environnement de conception visuel) (voir Chapitre 22, Modification du code en mode
Cré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ées dans des bases de données, voire d’ajouter ou de modifier des données dans
certains cas. Pour créer ces pages, vous devez d’abord suivre les étapes préparatoires suivantes :
• Configurez un serveur Web et un serveur d’application, puis créez ou modifiez un site
•
Dreamweaver (voir Chapitre 23, Configuration d’une application Web, page 467).
Connectez-vous à une base de données. (Voir Connexion à une base de données, page 475).
Création de pages dynamiques
Dans Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des
jeux d’enregistrements extraits de bases de données, des paramètres de formulaire et des
composants JavaBeans. Pour ajouter le contenu dynamique à une page, il suffit de le faire glisser
vers cette dernière.
Processus de création de sites Web dans Dreamweaver
25
Vous pouvez définir une configuration de page qui affiche un ou plusieurs enregistrements à la
fois (ou plusieurs pages d’enregistrements), ajoute des liens spéciaux permettant de passer d’une
page d’enregistrements à une autre et crée des compteurs d’enregistrements pour faciliter la
gestion de ces derniers.
• Pour savoir comment développer des applications Web dans Dreamweaver, apprenez à utiliser
•
•
•
Dreamweaver et à créer des pages dynamiques (voir Chapitre 30, Optimisation de l’espace de
travail pour tirer parti des fonctions de développement visuel, page 515 et Chapitre 31,
Déroulement de la conception de pages dynamiques, page 527).
Définissez et affichez un contenu dynamique dans vos pages (voir Chapitre 32, Récupération
des données spécifiques à une page, page 535, Chapitre 33, Définition de sources de contenu
dynamique, page 547, Chapitre 34, Ajout d’un contenu dynamique à une page Web, page 567 et
Chapitre 35, Affichage des enregistrements de base de donné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éez vos propres comportements de serveur et formulaires interactifs (voir Chapitre 38, Ajout
de comportements de serveur personnalisés, page 611 et Chapitre 39, Création de formulaires,
page 631).
Développement rapide d’applications
Dreamweaver propose différents outils de développement rapide d’applications, notamment les
comportements de serveur et les objets d’application qui permettent de créer des applications
Web sophistiquées sans avoir à rédiger du code côté serveur.
• Vous pouvez ainsi créer rapidement des pages qui recherchent et modifient des bases de
données, puis affichent les résultats Restreignez l’accès à vos pages pour garantir la sécurité des
informations (voir Création rapide d’applications ColdFusion, page 653, Création rapide
d’applications ASP.NET, page 699, Création rapide d’applications ASP et JSP, page 727 et
Création rapide d’applications PHP, page 745).
Utilisation de Dreamweaver avec d’autres applications
Dreamweaver s’adapte à votre méthode de conception et de développement de site Web en vous
permettant de travailler aisément avec d’autres applications. Pour plus d’informations sur le travail
en collaboration avec d’autres applications (navigateurs, é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 éditeurs HTML, tels
•
•
•
26
que HomeSite ou BBEdit, voir Utilisation d’un éditeur HTML externe avec Dreamweaver,
page 426.
Vous pouvez spécifier vos navigateurs favoris pour l’affichage de votre site (voir Aperçu et test de
page dans les navigateurs, page 283).
Vous pouvez lancer un éditeur d’image externe, tel que Macromedia Fireworks ou Adobe
Photoshop depuis Dreamweaver (voir Utilisation d’un éditeur d’image externe, page 327).
Vous pouvez configurer Dreamweaver pour qu’il lance un éditeur différent pour chaque type
de fichier (voir Lancement d’un éditeur externe pour des fichiers multimédia, page 371).
Introduction : Bienvenue dans Dreamweaver
• Pour plus d’informations sur l’ajout d’interactivité à votre site à 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éléchargement et installation des éléments Flash, page 376.
Pour savoir comment rendre votre site interactif à 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 > Utilisation de ColdFusion).
Dreamweaver et l’accessibilité
L’accessibilité consiste à faire en sorte que les sites ou les produits Web que vous créez puissent être
utilisés par des personnes souffrant de handicaps visuels, auditifs, moteurs ou autres. Les fonctions
d’accessibilité de produits logiciels et de sites Web peuvent être : la prise en charge de lecteurs
d’écran, des é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éer un
contenu accessible :
Utilisation des fonctions d’accessibilité de Dreamweaver Pour les concepteurs Web utilisant
Dreamweaver qui doivent faire appel aux fonctions d’accessibilité, Dreamweaver prend en charge
des lecteurs d’écran, la navigation avec le clavier et les fonctions d’accessibilité de votre système
d’exploitation.
Pour plus d’informations, voir Utilisation des fonctions d’accessibilité de Dreamweaver, page 52.
Pour les concepteurs Web utilisant Dreamweaver qui
souhaitent créer du contenu accessible, Dreamweaver vous aide à créer des pages accessibles au
contenu utile pour les lecteurs d’écran et en conformité avec les directives gouvernementales.
Création de pages Web accessibles
Dreamweaver propose des boîtes de dialogue vous invitant à entrer les attributs d’accessibilité lors
de l’insertion d’éléments de page (voir Optimisation de l’espace de travail pour la conception de pages
accessibles, page 56). Par exemple, la boîte de dialogue d’accessibilité aux images vous invite à
entrer une description textuelle de chaque image. Ainsi, lorsque l’image s’affiche sur le système
d’un utilisateur ayant des problèmes de vue, le lecteur d’écran lit la description.
Dreamweaver propose également des pages Web modèles conçues dans un souci d’accessibilité
optimale (voir Création d’un document basé sur un fichier de conception Dreamweaver, page 76) et
dispose d’un rapport d’accessibilité que vous pouvez exécuter pour vérifier si votre page ou votre
site est conforme aux directives d’accessibilité de la Section 508 (voir Test de votre site, page 119).
Remarque : Néanmoins, aucun outil de création Web ne peut automatiser entièrement le processus
de développement. Pour concevoir des sites Web accessibles, vous devez comprendre les
exigences liées à l’accessibilité et devez prendre de nombreuses décisions faisant appel à votre
subjectivité. Les concepteurs de sites Web ne doivent pas oublier de penser à la façon dont les
personnes souffrant d’un handicap peuvent interagir avec les pages Web. La meilleure façon de
s’assurer qu’un site Web est accessible est de respecter toutes les procédures de préparation, de
développement, de tests et d’évaluation.
Dreamweaver et l’accessibilité
27
Fonction de validation d’accessibilité de Dreamweaver
La fonction de validation d’accessibilité de Dreamweaver MX utilise la technologie de UsableNet.
UsableNet est l’un des principaux développeurs de logiciels simples d’utilisation permettant
d’automatiser les tests de fonctionnalité et d’accessibilité et les corrections. Pour une assistance
supplémentaire concernant les tests d’accessibilité, essayez le service UsableNet LIFT pour
Macromedia Dreamweaver, une solution complète pour le dé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 éditeur ALT
global, la génération de rapports personnalisés et un nouveau mode de contrôle actif qui assure
l’accessibilité du contenu pendant la construction des pages. Demandez une version démo de Lift
pour Macromedia Dreamweaver à l’adresse www.usablenet.com.
Guide des supports de formation à Dreamweaver
Dreamweaver comprend diverses ressources qui vous aideront à vous familiariser rapidement avec
le programme et à créer facilement vos propres sites et pages Web.
• Systèmes d’aide Dreamweaver, page 28
• Ressources du site Web Macromedia, page 29
• Ouvrages et formations supplémentaires, page 29
Pour tirer le meilleur parti des ressources de Dreamweaver, voir Par où dé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èmes d’aide Dreamweaver
Les systè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ème d’exploitation : Microsoft HTML
Help (Windows) ou Aide Apple (Macintosh).
L’aide de Dreamweaver comprend les systèmes d’aide suivants :
Le guide Bien démarrer avec Dreamweaver a été conçu pour vous assister dans la création d’un
site Web simple mais fonctionnel à l’aide de Dreamweaver. Il s’adresse aux utilisateurs qui ont
déjà créé des pages Web, mais qui ne connaissent que certains aspects de Dreamweaver. Il
comporte des didacticiels sur la création et la modification de pages statiques simples, la
modification manuelle du code et la création d’applications Web dynamiques. Ce guide existe
sous forme de manuel imprimé, d’aide en ligne et de fichier PDF.
optimisée pour une utilisation en ligne, fournit des informations
complètes sur toutes les fonctionnalités de Dreamweaver.
L’aide de Dreamweaver,
Extension de Dreamweaver fournit
des informations relatives au modè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éveloppeurs JavaScript et C de créer des
extensions pour Dreamweaver.
28
Introduction : Bienvenue dans Dreamweaver
Rubriques connexes
• Ouvrages et formations supplé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é régulièrement. Il propose des informations à jour sur
Dreamweaver, ainsi que des conseils donnés par des utilisateurs expérimentés, des exemples, des
conseils généraux, des mises à jour et des informations sur des sujets plus techniques. Consultez
régulièrement ce site Web pour trouver les toutes dernières informations sur Dreamweaver et
apprendre à en tirer le meilleur parti.
Le site Web Dreamweaver
Le Centre des développeurs de Macromedia, disponible à 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èmes techniques et
d’échanger des informations utiles avec d’autres utilisateurs de Dreamweaver. Pour savoir
comment accéder aux forums, consultez le site Web de Macromedia à l’adresse suivante :
www.macromedia.com/go/dreamweaver_newsgroup.
Des tableaux de raccourcis clavier relatifs
à la configuration de Dreamweaver par défaut sont
disponibles sur le site Web de Macromedia à l’adresse suivante : www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Rubriques connexes
• Systèmes d’aide Dreamweaver, page 28
Ouvrages et formations supplémentaires
Vous pouvez consulter d’autres ouvrages ou participer à d’autres formations pour vous aider à
maîtriser encore mieux Dreamweaver ; vous trouverez également une documentation
Dreamweaver au format PDF et imprimé, disponibles en ligne :
Les livres Macromedia Press permettent d’acquérir une meilleure maîtrise de Dreamweaver.
Consultez les ouvrages les plus récents rédigés par des experts sur le site Web de Macromedia à
l’adresse www.macromedia.com/go/dw2004_help_mmp.
Macromedia Dreamweaver Training and Certification propose des tâches pratiques et des
scénarios réels. Vous avez le choix entre une formation avec un professeur ou une formation en
ligne. Vous pouvez même combiner les deux solutions de façon à créer une véritable formation
personnalisée. Développez vos connaissances sur le site Web Macromedia à l’adresse
www.macromedia.com/go/dreamweaver_training_fr.
Les fichiers PDF relatifs à Dreamweaver sont disponibles sur le CD fourni avec le produit et
regroupent l’ensemble de la documentation de Dreamweaver. Certains sujets de réfé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 à Dreamweaver
29
Les manuels Dreamweaver,
non fournis avec le produit, sont disponibles à l’achat en ligne.
Pour acheter des exemplaires imprimés de la documentation de Dreamweaver, consultez le site
Web de Macromedia à l’adresse suivante : www.macromedia.com/go/books_and_training/.
Rubriques connexes
• Systèmes d’aide Dreamweaver, page 28
• Ressources du site Web Macromedia, page 29
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
• Les éléments de menus sont indiqués de la manière suivante : nom du menu > nom de
•
•
•
l’élément de menu. Les éléments de sous-menus sont indiqués de la manière suivante : nom du
menu > nom du sous-menu > nom de l’élément de menu.
Police de code indique les noms des balises et attributs HTML, ainsi que le texte utilisé
littéralement dans les exemples.
Police de code en italique indique les éléments remplaçables (parfois appelés
métasymboles) dans le code.
Texte en gras indique le texte que vous devez saisir exactement à l’identique.
Pour obtenir une liste complète des ressources proposées par Dreamweaver, voir Guide des supports
de formation à 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ées par Dreamweaver, voir Guide des
supports de formation à Dreamweaver, page 28.
Les spé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écifications officielles des feuilles de
style CSS, définies par le World Wide Web Consortium.
La spécification HTML 4.01 (www.w3.org/TR/REC-html40/) est la spécification officielle du
code HTML du World Wide Web Consortium.
Index DOT HTML (www.blooberry.com/indexdot/html/)
affiche une liste complète des balises,
attributs et valeurs HTML, ainsi que leur compatibilité respective avec les divers navigateurs.
La spécification XHTML 1.0 (www.w3.org/TR/xhtml1/)
est la spé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ésente la liste des noms d’entités utilisé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çon exhaustive le langage
JavaScript 1.2.
JavaScript : The Definitive Guide,
par David Flanagan (O’Reilly & Associates), propose des
informations de référence sur chaque fonction, objet, méthode, propriété et gestionnaire
d’événements de JavaScript.
(www.cgi-resources.com/) est un site de référence sur tout ce qui
concerne les scripts CGI, avec des scripts prêts à l’emploi, de la documentation, des manuels et
même des programmeurs à votre disposition.
Le site CGI Resource Index
Le site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)
comporte une
pré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électionner les options, utiliser les inspecteurs et les panneaux et définir les préférences qui
conviennent le mieux à votre façon de travailler.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
•
•
•
•
A propos de l’espace de travail de Dreamweaver, page 33
Utilisation de la fenê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é 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é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étés des objets. Il
comporte des barres d’outils donnant accès aux opérations les plus courantes, vous permettant
ainsi de modifier rapidement vos documents.
33
Présentation de l’espace de travail
Sous Windows, Dreamweaver propose une présentation intégrée en une seule fenêtre. Dans
l’espace de travail intégré, toutes les fenêtres et tous les panneaux sont rassemblés dans une grande
fenêtre d’application.
Barre Insérer
Barre d’outils du document
Sélection de
balise
Fenêtre de document
Inspecteur de
propriétés
Groupes de panneaux
Panneau Fichiers
Remarque : L’espace de travail Windows dispose également d’une option Codeur, qui ancre les
groupes de panneaux sur le côté gauche et affiche par défaut la fenêtre du document en mode Code.
Pour plus d’informations, voir Utilisation de l’espace de travail orienté en mode Code (Windows
uniquement), page 417. Pour l’utilisation de cette option, voir Choix de la pré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ésentation flottante, où chaque document se
trouve dans une fenêtre distincte. Les groupes de panneaux sont initialement ancrés ensemble,
mais vous pouvez les séparer pour les faire apparaître dans leur propre fenêtre. Les fenêtres
s’alignent automatiquement les unes sur les autres sur les côtés de l’écran, et sur la fenêtre du
document au fur et à mesure que vous les faites glisser ou que vous les redimensionnez.
Barre d’outils du document
Fenêtre de document
Barre Insérer
Groupes de panneaux
Panneau Fichiers
Inspecteur de propriétés
Sélecteur de balises
Rubriques connexes
• Elé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éments de l’espace de travail de Dreamweaver
Cette section décrit rapidement quelques éléments de l’espace de travail de Dreamweaver.
Remarque : Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres. Pour
ouvrir les panneaux, inspecteurs et fenêtres Dreamweaver, utilisez le menu Fenêtre. Si vous n’arrivez
pas à localiser un panneau, un inspecteur ou une fenêtre indiqués comme ouverts, choisissez
Fenêtre > Réorganiser Panneaux pour présenter tous les panneaux ouverts à l’écran.
A propos de l’espace de travail de Dreamweaver
35
La page de démarrage permet d’ouvrir un document récent ou de créer un nouveau document.
Vous pouvez également, à partir de la page de démarrage, survoler Dreamweaver ou accéder à un
didacticiel.
contient des boutons permettant d’insérer divers types d’« objets », tels que des
images, tableaux et calques dans un document. Chaque objet est une portion de code HTML
vous permettant de définir différents attributs lors de son insertion. Vous pouvez, par exemple,
insérer un tableau en cliquant sur le bouton Tableau de la barre Insérer. Si vous le préférez, vous
pouvez insérer les objets à partir du menu Insertion.
La barre Insérer
contient des boutons permettant d’accéder aux différents modes
d’affichage de la fenêtre du document (tels que le mode Création ou le mode Code), de définir les
différentes options d’affichage et d’effectuer certaines opérations courantes, telles que la
prévisualisation dans un navigateur.
La barre d’outils du document
La barre d’outils standard (non affichée par défaut dans l’espace de travail) contient des boutons
correspondant aux opérations courantes des menus Fichier et Edition : Nouveau, Ouvrir,
Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Répéter. Pour afficher la barre
d’outils standard, choisissez Affichage > Barres d’outils > Standard.
La fenêtre de document
affiche le document que vous créez et modifiez.
L’inspecteur de propriétés permet de visualiser et de modifier diverses propriétés de l’objet ou
du texte sélectionné. Chaque objet contient des propriétés différentes. L’inspecteur de propriétés
n’est pas développé par défaut dans la présentation de l’espace de travail Codeur.
qui se trouve dans la barre d’état, en bas de la fenêtre de document,
affiche la hiérarchie des balises entourant la sélection courante. Cliquez sur une balise quelconque
dans la hiérarchie pour la sélectionner avec son contenu.
Le sélecteur de balises,
sont des ensembles de panneaux associés regroupés sous un même
titre. Pour développer un groupe de panneaux, cliquez sur la flèche d’agrandissement située à
gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée
d’ancrage sur le côté gauche de la barre de titre du groupe.
Les groupes de panneaux
vous permet de gérer vos fichiers et dossiers, qu’ils fassent partie d’un site
Dreamweaver ou qu’ils se trouvent sur un serveur distant. Il permet également d’accéder à tous les
fichiers situé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ê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être de document
La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes
d’affichage suivants :
: environnement de création pour la mise en forme visuelle des pages, l’édition
visuelle et le développement rapide d’applications. Dans ce mode, Dreamweaver affiche une
représentation visuelle entièrement modifiable du document, similaire à la représentation de la
page sur un navigateur. Vous pouvez configurer le mode Création pour qu’il affiche le contenu
dynamique pendant que vous travaillez sur le document (voir Affichage des données dynamiques en
mode Création, page 518).
Mode Création
Mode Code : environnement de codage manuel pour ré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éation : environnement mixte affichant les modes Création et Code du
document dans une même fenêtre.
Lorsque la fenêtre de document dispose d’une barre de titre, cette dernière affiche le titre de la
page, et, entre parenthèses, le chemin et le nom de fichier du document. Dreamweaver affiche un
astérisque à la suite du nom de fichier si vous avez apporté des modifications et que vous ne les
avez pas encore enregistrées.
Lorsque vous agrandissez la fenêtre de document de la présentation de l’espace de travail intégré
(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être principale de l’espace de
travail.
Lorsqu’une fenêtre de document est agrandie, des onglets s’affichent en haut de la zone de la
fenêtre de document indiquant les noms de fichier de tous les documents ouverts. Pour passer à
un autre document, cliquez sur son onglet.
Rubriques connexes
• Utilisation de la fenêtre de document, page 41
Barre d’outils de document
La barre d’outils de document est composée de boutons qui permettent d’accéder rapidement aux
différents modes d’affichage : Code, Création et un mode d’affichage divisé pour afficher les
modes Code et Création en même temps.
La barre d’outils contient également plusieurs commandes et options courantes permettant
d’afficher le document et de le transférer d’un site local vers un site distant.
Mode Code
Modes Code et Création
Aucune erreur du navigateur
Gestion de fichiers
Mode Création
Aperçu/Débogage dans le navigateur
Options d’affichage
Débogage du serveur
Titre du document
Actualiser mode Cré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être de document.
pour afficher les deux modes simultanément dans deux volets distincts
de la fenêtre de document. Dans ce cas, l’option Mode Création en haut est activée dans le menu
Options d’affichage. Utilisez cette option pour préciser quel mode doit s’afficher en haut de la
fenêtre de document.
Modes Code et Création
Mode Création
pour afficher uniquement le mode Création dans la fenêtre de document.
Débogage de serveur affiche un rapport pour vous aider à déboguer la page ColdFusion en
cours. Le rapport indique les erreurs éventuellement présentes sur votre page.
pour attribuer un titre à votre document et l’afficher dans la barre de titre du navigateur. Si
votre document possède déjà un titre, celui-ci s’affiche dans ce champ.
Titre
Aucune erreur du navigateur
Gestion des fichiers
permet de vérifier la compatibilité avec différents navigateurs.
pour afficher le menu déroulant correspondant.
pour prévisualiser ou déboguer un document dans un
navigateur. Sélectionnez un navigateur dans le menu déroulant.
Aperçu/Débogage dans le navigateur
Actualiser le mode Création pour actualiser le mode Création du document après avoir apporté
des modifications dans le mode Code. Les modifications apportées dans le mode Code
n’apparaissent pas automatiquement dans le mode Création : vous devez exécuter tout d’abord
certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.
pour définir les options d’affichage des modes Code et Création,
notamment le mode devant s’afficher au-dessus de l’autre. Les options du menu s’appliquent à
l’affichage actuel : Mode Création, mode Code ou les deux. Pour plus d’informations sur les
options du mode Code, voir Définition des préférences d’affichage, page 417. Pour plus
d’informations sur les options d’affichage du mode Création, voir Sélection d’éléments dans la
fenêtre de document, page 274, Affichage et modification du contenu de l’en-tê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érations courantes des
menus Fichier et Edition : Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller,
Annuler et Répéter. Utilisez ces boutons comme vous utiliseriez les commandes de menu
équivalentes.
Pour plus d’informations sur les opérations telles que Ouvrir et Enregistrer, voir Chapitre 3,
Cré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’état
La barre d’état, située au bas de la fenêtre de document, fournit des informations supplémentaires
sur le document en cours de création.
Taille du document et estimation
du temps de téléchargement
Sélecteur de balises
Menu déroulant Taille de fenêtre
Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection courante. Cliquez sur
une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu. Cliquez sur
<body> pour sélectionner tout le corps du document. Pour définir les attributs class ou id d’une
balise dans le sélecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Option enfoncée (Macintosh) sur la balise et choisissez une classe ou un ID
dans le menu contextuel.
Le menu déroulant Taille de la fenêtre (visible en mode Création uniquement) permet de
redimensionner la fenêtre du document selon des dimensions prédéfinies ou personnalisées. Pour
plus d’informations, voir Redimensionnement de la fenêtre de document, page 42.
A droite du menu déroulant Taille de fenêtre figurent une estimation de la taille du document et
du temps de téléchargement de la page, ainsi que la liste de tous les fichiers dépendants, tels que
les images et autres fichiers de données. Pour plus d’informations, voir Vérification des préférences
de durée et de la taille de téléchargement, page 284.
Rubriques connexes
• Définition des préférences de la barre d’état, page 43
Barre Insérer
Les boutons qui composent la barre Insérer permettent de créer et d’insé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ît.
Les boutons sont organisés en plusieurs catégories, sur le côté gauche de la barre Insérer. D’autres
catégories s’affichent lorsque le document sélectionné contient du code serveur, tel que des
documents ASP ou CFML. Au démarrage de Dreamweaver, la dernière catégorie utilisée s’ouvre.
Remarque : Si vous préférez afficher les catégories sous forme d’onglets en haut de la barre Insérer,
vous pouvez changer la présentation de cette barre (voir Définition des préférences de police pour
l’affichage Dreamweaver, page 60).
Certaines catégories disposent de boutons ouvrant des menus déroulants. Lorsque vous
sélectionnez une option dans l’un de ces menus déroulants, l’action associée est attribuée par
défaut au bouton. Par exemple, si vous sélectionnez le menu déroulant du bouton Image, puis
Espace réservé pour l’image, la prochaine fois que vous cliquerez sur le bouton Image,
Dreamweaver insérera un espace réservé pour l’image. Lorsque vous sélectionnez une nouvelle
option dans l’un de ces menus déroulants, l’action attribuée par défaut au bouton change.
A propos de l’espace de travail de Dreamweaver
39
La barre Insérer est organisée en différentes catégories, comme suit :
La catégorie Commun permet de créer et d’insérer les objets les plus couramment utilisés,
comme les images et les tableaux.
La catégorie Mise en forme permet d’insérer des tableaux, des balises div, des couches et des
cadres. Vous pouvez également choisir parmi trois types de tableaux : Standard (par défaut),
Tableaux étendus et Mise en forme. Si le mode Mise en forme est sélectionné, 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égorie Formulaires contient des boutons permettant de créer des formulaires et d’y insérer
des éléments.
La catégorie Texte insère diverses balises de mise en forme de texte et de liste, telles que b, em, p,
h1 et ul.
La catégorie HTML insère des balises HTML pour les règles horizontales, le contenu de l’en-tête,
les tableaux, les cadres et les scripts.
Les catégories de code serveur sont disponibles uniquement pour les pages utilisant un langage
serveur spécifique comme ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP et
PHP. Ces catégories proposent des objets de type code serveur que vous pouvez insérer en mode
Code.
La catégorie Application insère des éléments dynamiques, tels que les jeux d’enregistrements, les
régions répétées et les formulaires d’insertion d’enregistrements et de mise à jour.
La catégorie éléments Flash
insère des éléments Flash.
La catégorie Favoris permet de regrouper et d’organiser, dans un espace commun, les boutons
de la barre Insérer que vous utilisez le plus fréquemment.
Vous pouvez modifier les objets de la barre Insérer ou créer vos propres objets (voir « Customizing
Dreamweaver » sur le centre de support Macromedia, à l’adresse www.macromedia.com/go/
customizing_dreamweaver_fr).
Rubriques connexes
• Utilisation de la barre Insérer, page 45
Rapports dans Dreamweaver
Dans Dreamweaver, vous pouvez exécuter des rapports afin de rechercher ou de tester des
contenus ou encore de corriger des erreurs. Vous pouvez générer les types de rapports suivants :
Recherche permet de rechercher des balises, des attributs ou une portion de texte spé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éterminer s’il contient des balises ou des attributs non pris en charge par les navigateurs cibles.
Pour effectuer une vérification du navigateur cible, voir Vérification de la compatibilité du
navigateur, page 448.
Vérification du navigateur cible
40
Chapitre 1 : Exploration de l’espace de travail
Vérificateur de lien permet de rechercher et de corriger les liens brisés, externes et orphelins. Pour
effectuer une vérification des liens, voir Recherche de liens brisés, externes et orphelins, page 350.
Rapports du site permet d’améliorer le déroulement du travail et de tester les attributs HTML
dans votre site. Les rapports sur le déroulement du travail incluent les fonctions Extrait par,
Modifiés récemment et Design Notes ; les rapports HTML incluent les balises de polices
imbriquées combinables, l’accessibilité, les textes secondaires manquants, les balises imbriquées
redondantes, les balises vides amovibles et les documents sans nom. Pour exé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écessaires au débogage d’une
application ColdFusion. Pour consulter les informations de débogage, voir Utilisation du
débogueur ColdFusion (Windows uniquement), page 453.
Débogage du serveur
A propos de la personnalisation de Dreamweaver dans les systèmes
multiutilisateurs
Dreamweaver peut être personnalisé selon les besoins, même dans les systèmes multiutilisateurs
tels que Windows XP ou MacOS X.
Dreamweaver empêche que la configuration personnalisée d’un utilisateur n’affecte celle d’un
autre. Pour ce faire, la première fois que vous exécutez Dreamweaver sur l’un des systèmes
multiutilisateurs reconnus, l’application crée des copies de divers fichiers de configuration à votre
intention. Ces fichiers sont enregistrés dans un dossier vous appartenant.
Par exemple, sous Windows XP, ils sont situés dans le répertoire C:\Documents and
Settings\nom_utilisateur\Application Data\Macromedia\Dreamweaver MX\Configuration (qui
peut se trouver dans un dossier caché).
Sous Mac OS X, ils sont situés dans votre dossier personnel, dans Utilisateurs/nom_utilisateur/
Bibliothèque/Application Support/Macromedia/Dreamweaver MX/Configuration.
Remarque : Sur des systèmes d’exploitation plus anciens (Windows 98, Windows ME et Mac OS
9.x), un seul groupe de fichiers de configuration Dreamweaver est partagé par tous les utilisateurs,
même si la configuration du système d’exploitation prend en charge plusieurs utilisateurs.
Si vous réinstallez ou mettez à niveau Dreamweaver, Dreamweaver crée automatiquement des
copies de sauvegarde des fichiers de configuration existants. Ainsi, si vous avez personnalisé
manuellement ces fichiers, vos modifications restent disponibles.
Rubriques connexes
• Dreamweaver personnalisation, notions de base
Utilisation de la fenêtre de document
La fenêtre de document affiche le document actif. Vous pouvez afficher un document en mode
Création, en mode Code ou en mode Code et Création. La barre d’état de la fenêtre de document
affiche des informations sur le document actuel.
Utilisation de la fenêtre de document
41
Rubriques connexes
• Fenêtre de document, page 37
• Barre d’état, page 39
Basculement d’un mode à un autre dans la fenêtre de document
Vous pouvez afficher un document dans la fenêtre de document en mode Code, en mode
Création ou en mode Code et création.
Pour passer d’un mode à l’autre dans la fenêtre de document, procédez de l’une des façons
suivantes :
• Utilisez le menu Affichage :
Choisissez Affichage > Code.
■ Choisissez Affichage > Création.
■ Choisissez Affichage > Code et cré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éation.
■
Cliquez sur le bouton Afficher le mode Création.
Pour basculer entre les modes Code et Création :
• Appuyez sur les touches Ctrl+tilde (~) (Windows) ou Commande+guillemet simple
d’ouverture (‘) (Macintosh).
Remarque : Si les deux modes sont affichés simultanément dans la fenêtre de document, ce
raccourci clavier permet d’activer tour à tour les deux modes.
Rubriques connexes
• Fenêtre de document, page 37
Redimensionnement de la fenêtre de document
La barre d’état affiche les dimensions de la fenêtre de document sélectionnée (en pixels). Pour
qu’une page s’affiche de façon optimale à une taille spécifique, vous pouvez régler la fenêtre de
document sur l’une des tailles prédéterminées, modifier ces tailles prédéterminées ou créer de
nouvelles tailles.
Pour redimensionner la fenêtre de document selon une taille prédéterminée :
• Choisissez l’une des tailles affichées dans le menu déroulant Taille de fenêtre qui se trouve dans
la barre d’état de la fenêtre de document.
42
Chapitre 1 : Exploration de l’espace de travail
Remarque : Sous Windows, vous pouvez agrandir la fenêtre de document pour qu’elle occupe
tout l’espace de la zone de document de la fenêtre intégrée. Vous ne pouvez pas redimensionner
une fenêtre de document agrandie.
La taille de la fenêtre correspond aux dimensions internes de la fenêtre de navigateur, bordures
exclues ; la résolution de l’écran est indiquée entre parenthèses. Optez, par exemple, pour le
format « 536 x 196 (640 x 480, valeur par défaut) » si les visiteurs de votre site utilisent Microsoft
Internet Explorer ou Netscape Navigator par défaut sur un moniteur de 640 x 480.
Conseil : Pour un redimensionnement moins précis des fenêtres, utilisez les méthodes standard de
votre système d’exploitation, par exemple, en faisant glisser le coin inférieur droit d’une fenêtre.
Pour modifier les valeurs figurant dans le menu déroulant Taille de fenêtre :
1 Cliquez sur Modifier les tailles dans le menu déroulant Taille de fenêtre.
2 Cliquez sur une valeur de largeur ou de hauteur dans la liste Taille de la fenêtre, puis entrez une
nouvelle valeur.
Pour que la fenêtre de document adopte uniquement une largeur spécifique sans que sa
hauteur change, sélectionnez une valeur de hauteur et supprimez-la.
3 Cliquez sur la zone de texte Description pour saisir un texte décrivant la taille spécifique.
4 Cliquez sur OK pour enregistrer la modification et revenir à la fenêtre de document.
Pour ajouter un nouveau format d’affichage au menu déroulant Taille de fenêtre :
1 Cliquez sur Modifier les tailles dans le menu déroulant Taille de fenêtre.
2 Cliquez dans l’espace vierge qui apparaît sous la dernière valeur de la colonne Largeur.
3 Indiquez les valeurs désirées pour Largeur et Hauteur.
Pour définir soit la largeur, soit la hauteur, laissez l’un des champs vide.
4 Cliquez dans le champ Description pour saisir un texte décrivant la taille ajoutée.
5 Cliquez sur OK pour enregistrer la modification et revenir à la fenêtre de document.
Par exemple, vous pouvez entrer SVGA ou PC standard à côté de l’entrée correspondant à un
moniteur d’une résolution de 800 x 600 pixels, et Mac 17 à côté de l’entrée correspondant à un
moniteur d’une résolution de 832 x 624 pixels. Diverses résolutions peuvent être réglées sur la
plupart des moniteurs.
Définition des préférences de la barre d’état
Vous pouvez définir les préférences de la barre d’état dans la boîte de dialogue Préférences.
Pour définir les préférences de la barre d’état :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
Utilisation de la fenêtre de document
43
2 Sélectionnez la catégorie Barre d’état dans la liste de gauche.
3 Définissez les options de préférence.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Rubriques connexes
• Barre d’é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é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érer comporte des boutons permettant de créer et d’insérer des objets tels que
des tableaux, des calques et des images. En outre, l’inspecteur de propriétés permet de modifier les
propriétés de ces objets.
Remarque : Vous pouvez également utiliser l’inspecteur de balises pour afficher et modifier les
propriété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é à une balise, alors que l’inspecteur de
propriétés n’affiche que les attributs les plus fréquents.
Les menus contextuels représentent une alternative aux fonctions de création et de modification
d’objets de la barre Insérer et de l’inspecteur de propriétés.
Affichage des barres d’outils
Les barres d’outils du document et standard permettent d’effectuer des opé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ètre d’affichage des barres d’outils choisi est
spécifique à un document ; ce paramètre ne s’applique qu’au document actuel.
Pour afficher ou masquer la barre d’outils de document, procédez de l’une des façons
suivantes :
• Choisissez Fenêtre > Barres d’outils > Document.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) dans la barre Insé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édez de l’une des façons suivantes :
• Choisissez Fenêtre > Barres d’outils > Standard.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) dans la barre Insé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érer
Les boutons qui composent la barre Insérer permettent de créer et d’insérer des objets, tels que des
tableaux et des images. Ces boutons sont organisés en plusieurs catégories. Lorsque vous placez le
curseur de la souris sur un bouton, une info-bulle indiquant le nom de ce bouton apparaît.
Rubriques connexes
• Barre Insérer, page 39
Affichage de la barre Insérer et des catégories et menus associés
Vous pouvez afficher, masquer, développer ou réduire la barre Insérer selon qu’elle vous est utile
ou non. De même, vous pouvez afficher ou masquer les différentes catégories de cette barre.
Certaines catégories de la barre Insérer comportent des boutons dont les menus permettent
d’exécuter des commandes courantes.
Si vous préférez afficher les catégories sous forme d’onglets en haut de la barre Insérer, changez la
présentation de la barre Insérer.
Pour masquer ou afficher la barre Insérer, procédez de l’une des façons suivantes :
• Choisissez Fenêtre > Insérer.
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) dans la barre Insérer ou la barre d’outil standard ou de document, puis choisissez
Barre Insérer.
Pour afficher les boutons d’une catégorie :
• Cliquez sur la flèche du menu déroulant située près du nom de la catégorie, à l’extrémité
gauche de la barre Insérer, puis choisissez une autre catégorie dans le menu déroulant.
Utilisation des barres d’outils, des inspecteurs et des menus contextuels
45
Pour afficher le menu déroulant d’un bouton :
• Cliquez sur le bouton fléché pointant vers le bas situé près de l’icône du bouton.
Pour afficher les catégories de la barre Insérer sous forme d’onglets :
• Cliquez sur la flèche du menu déroulant située près du nom de la catégorie, à l’extrémité
gauche de la barre Insérer, puis choisissez Afficher en tant qu’onglets.
La barre Insérer affiche les catégories sous forme d’onglets apparaissant le long de la barre Insérer,
en haut.
Remarque : Si vous le souhaitez, vous pouvez cliquer sur le titre de la barre Insérer pour la rouvrir.
Pour afficher les catégories de la barre Insérer sous forme de menus :
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée Macintosh)
dans la barre Insérer, puis choisissez Afficher en tant que menu.
La barre Insérer affiche les catégories sous forme de menus plutôt que d’onglets.
Rubriques connexes
• Personnalisation et utilisation de la catégorie Favoris dans la barre Insérer, page 47
Utilisation de la barre Insérer pour insérer des objets
La barre Insérer représente un moyen pratique de créer et d’insérer des objets.
Pour insérer un objet :
1 Sélectionnez une catégorie dans la partie gauche de la barre Insérer.
2 Procédez de l’une des manières suivantes :
■
■
Cliquez sur un bouton d’objet ou faites glisser l’icône du bouton dans la fenêtre de
document.
Cliquez sur la flèche du menu déroulant d’un bouton, puis sélectionnez une option dans le
menu.
Selon le type d’objet que vous sélectionnez, une boîte de dialogue d’insertion d’objet s’affiche, le
cas échéant, et vous invite à rechercher un fichier ou à spécifier les paramètres d’un objet
spécifique. En outre, Dreamweaver vous permet d’insérer du code dans le document ou d’ouvrir
un éditeur de balises (voir Modification de balises avec des éditeurs de balises, page 441) ou un
panneau vous permettant de spé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îte de dialogue ne s’affiche si vous insérez les objets en
mode Création, mais un éditeur de balises s’affiche si vous insérez les objets en mode Code. Pour
d’autres objets, lorsque vous essayez d’insérer des objets en mode Création, Dreamweaver passe en
mode Code avant de réaliser l’insertion.
Remarque : Certains objets, tels que les ancres nommées, ne sont pas visibles lorsque vous visualisez
la page dans la fenêtre d’un navigateur. Pour afficher des icônes en mode Création indiquant
l’emplacement de ces objets invisibles, voir Affichage et masquage des éléments invisibles, page 275.
Pour contourner cette boîte de dialogue et insérer un espace réservé vide :
• Appuyez sur la touche Ctrl (Windows) ou Option (Macintosh) tout en cliquant avec la souris
sur le bouton correspondant à l’objet.
Par exemple, pour insérer un espace réservé d’image sans spé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édure ne contourne pas toutes les boî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èrent pas d’espaces réservés ni d’objets avec des valeurs par défaut.
Pour modifier les préférences de la barre Insérer :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences générales s’affiche.
2 Désactivez l’option Afficher la boîte de dialogue lors de l’insertion d’objets pour supprimer les
boîtes de dialogue lors de l’insertion d’objets, tels que des images, des tableaux, des scripts ou
des éléments d’en-tête. Vous pouvez également maintenir la touche Ctrl (Windows) ou Option
(Macintosh) enfoncée tandis que vous créez l’objet.
Conseil : Si cette option est désactivée lorsque vous insérez un objet, celui-ci aura des valeurs par
défaut. Utilisez l’inspecteur de propriétés pour modifier les propriétés de l’objet après l’avoir inséré.
3 Cliquez sur OK.
Rubriques connexes
• Affichage de la barre Insérer et des catégories et menus associés, page 45
Personnalisation et utilisation de la catégorie Favoris dans la barre Insérer
La catégorie Favoris de la barre Insérer permet de grouper et d’organiser les boutons fréquemment
utilisés de la barre Insérer. Vous pouvez ajouter, gérer ou supprimer des boutons de la catégorie
Favoris.
Pour ajouter, supprimer ou gérer les boutons de la catégorie Favoris :
1 Sélectionnez l’une des catégories de la barre Insérer.
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh)
dans la zone où apparaissent les boutons (ne cliquez pas sur le nom de la catégorie), puis
sélectionnez Personnaliser les objets favoris.
La boî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îte de dialogue.
4 Cliquez sur OK.
Les modifications que vous avez effectuées sont appliquées à la catégorie Favoris.
Utilisation des barres d’outils, des inspecteurs et des menus contextuels
47
Conseil : Si la catégorie Favoris n’est pas la catégorie active, sélectionnez-la afin de voir les
modifications apportées.
Pour insérer des objets à l’aide des boutons de la catégorie Favoris :
• Sélectionnez la catégorie Favoris dans la partie gaude de la barre Insérer, puis cliquez sur le
bouton correspondant à un objet Favori que vous avez ajouté.
Remarque : La catégorie Favoris ne contient des boutons qu’une fois que vous l’avez
personnalisée de façon à ajouter des objets.
Rubriques connexes
• Affichage de la barre Insérer et des catégories et menus associés, page 45
• Utilisation de la barre Insérer pour insérer des objets, page 46
Utilisation de l’inspecteur de propriétés
L’inspecteur de propriétés permet d’examiner et de modifier les propriétés les plus fréquentes de
l’élément de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de l’inspecteur de
propriétés varie en fonction de l’élément sélectionné.
Remarque : Utilisez l’inspecteur de balises pour afficher et modifier les attributs associés à des
propriétés de balises (voir Modification d’attributs dans l’inspecteur de balises, page 456).
Conseil : Par défaut, l’inspecteur de propriété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éplacement de l’inspecteur de propriétés,
voir Ancrage et annulation d’ancrage de panneaux et de groupes de panneaux, page 50.
Pour afficher ou masquer l’inspecteur de propriétés :
• Choisissez Fenêtre > Propriétés.
Pour développer ou réduire l’inspecteur de propriétés :
• Cliquez sur la flèche d’agrandissement dans l’angle inférieur droit de l’inspecteur de propriétés.
Pour afficher les propriétés d’un élément de page :
• Sélectionnez l’élément de la page dans la fenêtre de document.
Remarque : Si nécessaire, agrandissez l’inspecteur de propriétés afin que toutes les propriétés de
l’élément sélectionné puissent apparaître.
Pour modifier les propriétés d’un élément de page :
1 Sélectionnez l’élément de la page dans la fenêtre de document.
2 Modifiez les propriétés de votre choix dans l’inspecteur de propriétés.
Remarque : Pour obtenir des informations sur des propriétés particulières, sélectionnez un
élément dans la fenêtre de document, puis cliquez sur l’icône Aide (?) dans le coin supérieur droit
de l’inspecteur de propriétés.
La plupart des changements apportés à une propriété sont immédiatement appliqués dans la
fenêtre de document.
48
Chapitre 1 : Exploration de l’espace de travail
3 Si les changements ne s’appliquent pas immédiatement, effectuez l’une des actions suivantes :
■
■
■
Cliquez hors des champs de texte de modification des propriétés.
Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Appuyez sur la touche de tabulation pour passer à une autre propriété.
Utilisation des menus contextuels
Dreamweaver comporte beaucoup de menus contextuels, qui vous permettent d’accéder
rapidement aux commandes et propriétés les plus utiles relatives à l’objet ou à la fenêtre avec
lesquels vous travaillez. Les menus contextuels répertorient uniquement les commandes en
rapport avec la sé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ée
(Macintosh) sur l’objet ou la fenêtre qui vous intéresse.
Le menu contextuel associé à l’objet ou à la fenêtre sélectionné(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és entre eux pour former dans des groupes de panneaux.
Un panneau sélectionné dans un groupe de panneaux apparaît comme un onglet. Vous pouvez
développer ou réduire les groupes de panneaux, les ancrer ou les détacher des autres groupes.
Vous pouvez également les ancrer dans la fenêtre de l’application intégrée (Windows
uniquement). Cela vous permet d’accéder aisément aux panneaux nécessaires sans encombrer
votre espace de travail.
Remarque : Lorsqu’un groupe de panneaux est flottant (détaché), une étroite barre vide apparaît audessus du groupe. Dans cette documentation, le terme « barre de titre du groupe de panneaux » fait
référence à la zone où s’affiche le nom du groupe de panneaux, plutôt qu’à cette é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évelopper ou réduire un groupe de panneaux, procédez de l’une des manières
suivantes :
• Cliquez sur la flè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 à l’é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ît de l’écran.
Pour ouvrir un groupe de panneaux ou un panneau qui n’est pas visible à l’écran :
• Choisissez le menu Fenêtre, puis sélectionnez un nom de panneau.
Une coche en regard d’un élément dans le menu Fenêtre indique que l’élément est ouvert (il est
possible qu’il n’apparaisse pas à l’écran s’il est masqué derrière d’autres fenêtres).
Conseil : Si vous n’arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués
comme ouverts, choisissez Fenêtre > Réorganiser Panneaux pour présenter tous les panneaux
ouverts à l’écran.
Pour sélectionner un panneau à l’inté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éjà :
• Cliquez sur le nom du groupe de panneaux ou sur sa flèche d’agrandissement pour développer
le groupe de panneaux.
Le menu Options est visible uniquement lorsque le groupe de panneaux est développé.
Conseil : Plusieurs options sont disponibles dans le menu contextuel du groupe de panneaux
même lorsque celui-ci est réduit ; cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfoncé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éplacer les panneaux et groupes de panneaux et les réorganiser afin qu’ils flottent ou
qu’ils soient ancrés dans l’espace de travail.
La plupart des panneaux ne peuvent être ancrés que sur le côté gauche ou droit de la fenêtre de
document dans l’espace de travail intégré, tandis que d’autres (l’inspecteur de propriétés et la barre
Insérer, par exemple) ne peuvent être ancrés qu’en haut ou en bas dans la fenêtre intégrée.
Pour détacher un groupe de panneaux :
• Faites glisser le groupe de panneaux en le saisissant par sa poignée d’ancrage (sur le côté gauche
de la barre de titre) jusqu’à ce que son contour indique qu’il n’est plus ancré.
50
Chapitre 1 : Exploration de l’espace de travail
Pour ancrer un groupe de panneaux à d’autres groupes de panneaux (espace de travail
flottant) ou à la fenêtre intégrée (sous Windows uniquement) :
• Faites glisser le groupe de panneaux en le saisissant par sa poignée d’ancrage jusqu’à ce que son
contour indique qu’il est ancré.
Pour détacher un panneau d’un groupe de panneaux :
• Dans le menu Options de la barre de titre du groupe de panneaux, sélectionnez Associer à >
Nouveau groupe de panneaux (le nom de la commande Associer à peut varier selon le nom du
panneau actif ).
Le panneau s’affiche dans son propre groupe de panneaux.
Pour ancrer un panneau à un groupe de panneaux :
• Sélectionnez le nom d’un groupe de panneaux dans le sous-menu Associer à du menu Options
du groupe de panneaux (le nom de la commande Associer à peut varier selon le nom du
panneau actif ).
Pour faire glisser un groupe de panneaux flottant (détaché) sans l’ancrer :
• Faites glisser le groupe de panneaux par la barre situé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é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être quelconque de votre système
d’exploitation.
Par exemple, en faisant glisser la zone de redimensionnement dans le coin inférieur droit de
l’ensemble de groupes de panneaux.
Panneaux ancrés : faites glisser la barre de séparation entre les panneaux et la fenêtre de
document.
Pour développer un groupe de panneaux, procédez de l’une des manières suivantes :
• Choisissez Agrandir le groupe de panneaux dans le menu Options de la barre de titre du
•
groupe de panneaux.
Double-cliquez à 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éfinition des préférences des panneaux
Vous pouvez définir les préférences pour indiquer les panneaux et les inspecteurs que vous voulez
toujours afficher au premier plan dans la fenêtre de document, et ceux qui peuvent être masqués
par la fenêtre de document.
Pour définir les préférences des panneaux :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Panneaux dans la liste de gauche.
3 Sélectionnez les options.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Utilisation des fonctions d’accessibilité de Dreamweaver
Dreamweaver inclut des fonctions qui le rendent accessible aux utilisateurs souffrant d’un
handicap. Il prend notamment en charge les lecteurs d’écran, les fonctions d’accessibilité du
système d’exploitation et la navigation avec le clavier.
Rubriques connexes
• Dreamweaver et l’accessibilité, page 27
Utilisation de lecteurs d’écran avec Dreamweaver
Un lecteur d’écran récite le texte qui s’affiche sur l’écran de l’ordinateur. Il lit aussi les
informations non textuelles, tels que les étiquettes de boutons ou les descriptions d’images dans
l’application, fournis dans les balises ou les attributs d’accessibilité lors de la création.
En tant qu’utilisateur de Dreamweaver, vous pouvez utiliser un lecteur d’écran pour vous assister
dans la création de vos pages Web. Le lecteur d’écran commence sa lecture par le coin supérieur
gauche de la fenêtre de document.
Dreamweaver prend en charge les lecteurs d’é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é du système d’exploitation
(Windows uniquement)
Dreamweaver prend en charge le paramètre de contraste élevé du système d’exploitation
Windows. Vous pouvez activer cette option à l’aide du panneau de configuration de Windows.
Lorsque le contraste élevé est activé, cela affecte Dreamweaver de la façon suivante :
52
Chapitre 1 : Exploration de l’espace de travail
• Les boîtes de dialogue et les panneaux utilisent des paramètres de couleurs système.
•
•
Par exemple, si vous définissez les couleurs sur Blanc sur Noir, les boîtes de dialogue et les
panneaux Dreamweaver utilisent du blanc comme couleur de premier plan et du noir en
arrière-plan.
La coloration de la syntaxe en mode Code est désactivée.
Le mode Code utilise les couleurs système des fenêtres et du texte de fenêtres et ignore les
paramètres de couleurs définis dans Préférences. Par exemple, si vous avez défini les couleurs
système sur Blanc sur Noir et que vous changez les couleurs de texte dans Préférences >
Coloration du Code, Dreamweaver ignore les couleurs définies dans Préférences et affiche le
texte de code avec du blanc comme couleur de premier plan et du noir en arrière-plan.
Le mode Création utilise les couleurs d’arrière-plan et de texte que vous avez défini dans
Modifier > Propriétés de la page pour que les pages que vous créez aient un rendu des couleurs
similaire à celui d’un navigateur.
Rubriques connexes
• Utilisation de lecteurs d’é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îtes de dialogue,
les cadres et les tableaux Dreamweaver sans utiliser de souris.
Rubriques connexes
• Utilisation de lecteurs d’écran avec Dreamweaver, page 52
• Prise en charge des fonctions d’accessibilité du systè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échées n’est prise en charge que
sous Windows.
Pour naviguer dans les panneaux :
1 Dans la fenê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’écran lit la barre de titre du panneau actif.
2 Appuyez sur Ctrl+Alt+Tab de nouveau pour activer le panneau suivant.
Continuez jusqu’à ce que le panneau dans lequel vous voulez travailler soit actif.
3 Appuyez sur Ctrl+Alt+Maj+Tab pour activer le panneau précédent, si nécessaire.
4 Si le panneau dans lequel vous voulez travailler n’est pas ouvert, utilisez les raccourcis clavier
répertoriés dans le menu Fenêtre pour afficher le panneau approprié, puis appuyez sur
Ctrl+Alt+Tab pour l’activer.
Si le panneau dans lequel vous voulez travailler est ouvert, mais affiché sous sa forme ré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éduire le panneau.
Utilisation des fonctions d’accessibilité de Dreamweaver
53
5 Appuyez sur la touche de tabulation pour passer d’une option à une autre dans le panneau.
Un contour en pointillé indique que l’option est active.
6 Utilisez les touches fléchées de façon appropriée :
■
■
Si une option comporte des choix, utilisez les touches fléchées pour faire défiler ces choix,
puis appuyez sur la barre d’espace pour valider la sélection.
Si le groupe de panneaux comporte des onglets pour ouvrir d’autres panneaux, activez
l’onglet ouvert puis utilisez la touche fléchée gauche ou droite pour ouvrir un autre onglet.
Après avoir ouvert un nouvel onglet, appuyez sur la touche de tabulation pour faire défiler
les options de ce panneau.
Rubriques connexes
• Navigation dans les boîtes de dialogue, page 54
• Navigation dans les cadres, page 55
• Navigation dans les tableaux, page 55
Navigation dans l’inspecteur de propriétés
Vous pouvez utiliser le clavier pour naviguer dans l’inspecteur de propriétés et effectuer des
modifications sur votre document.
Remarque : L’utilisation de la touche de tabulation et des touches fléchées n’est prise en charge que
sous Windows.
Pour naviguer dans l’inspecteur de propriétés :
1 Appuyez sur Ctrl+F3 pour afficher l’inspecteur de propriétés, s’il n’est pas visible.
2 Appuyez sur Ctrl+Alt+Tab jusqu’à ce que l’inspecteur de propriétés soit actif.
3 Appuyez sur la touche de tabulation pour passer d’une option de l’inspecteur de propriétés à une
autre.
4 Utilisez les touches fléchées comme vous le désirez pour faire défiler les choix d’options et
appuyez sur Entrée (Windows) ou Retour (Macintosh) pour effectuer une sélection.
5 Appuyez sur Ctrl+Tab (Windows) ou Option+Tab (Macintosh) pour ouvrir et fermer la section
développée de l’inspecteur de propriétés ou appuyez sur la barre d’espace lorsque la flèche
d’agrandissement en bas à 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îtes de dialogue
Vous pouvez utiliser le clavier pour naviguer dans les boîtes de dialogue.
Remarque : L’utilisation de la touche de tabulation et des touches fléchées n’est prise en charge que
sous Windows.
Pour naviguer dans une boîte de dialogue :
1 Appuyez sur la touche de tabulation pour passer d’une option à une autre dans la boîte de
dialogue.
54
Chapitre 1 : Exploration de l’espace de travail
2 Utilisez les touches fléchées pour faire défiler les choix d’une option.
Par exemple, si une option dispose d’un menu déroulant, activez cette option puis utilisez la
touche fléchée bas pour faire défiler les choix.
3 Si la boîte de dialogue comporte une liste Catégorie, appuyez sur Ctrl+Tab (Windows) ou
Option+Tab (Macintosh) pour activer la liste Catégorie puis utilisez les touches fléchées pour
vous dé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égorie.
5 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour quitter la boîte de dialogue.
Rubriques connexes
• Navigation dans les panneaux, page 53
• Navigation dans l’inspecteur de propriété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échées pour activer un
cadre.
Remarque : L’utilisation de la touche de tabulation et des touches fléchées n’est prise en charge que
sous Windows.
Pour sélectionner un cadre :
1 Placez le point d’insertion dans la fenêtre de document.
2 Appuyez sur Alt+Flèche vers le haut pour sélectionner le cadre actif.
3
4
5
6
Une ligne en pointillé indique quel cadre est actif.
Continuez d’appuyer sur Alt+Flèche vers le haut pour activer le jeu de cadres, puis les jeux de
cadres parents, s’il existe des jeux de cadres imbriqués.
Appuyez sur Alt+Flè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èche gauche ou droite pour vous déplacer entre les
cadres.
Appuyez sur Alt+Flèche vers le bas pour placer le point d’insertion dans la fenêtre de document.
Rubriques connexes
• Navigation dans les panneaux, page 53
• Navigation dans l’inspecteur de propriétés, page 54
• Navigation dans les boîtes de dialogue, page 54
Navigation dans les tableaux
Après avoir sélectionné un tableau, vous pouvez utiliser le clavier pour le parcourir.
Remarque : L’utilisation de la touche de tabulation et des touches fléchées n’est prise en charge que
sous Windows.
Utilisation des fonctions d’accessibilité de Dreamweaver
55
Pour naviguer dans un tableau :
1 Dans la fenêtre de document, procédez de l’une des manières suivantes pour sélectionner le
tableau.
■ Si le point d’insertion est situé sur la gauche de la cellule, appuyez sur Maj+Flèche droite.
■ Si le point d’insertion est situé sur la droite de la cellule, appuyez sur Maj+Flèche gauche.
2 Appuyez sur la touche fléchée bas pour placer le point d’insertion dans la première cellule.
3 Utilisez les touches fléchées ou appuyez sur la touche de tabulation pour vous déplacer vers
d’autres cellules.
Conseil : Si vous appuyez sur la touche de tabulation lorsque vous être dans la cellule la plus à
droite, vous ajoutez une ligne au tableau.
4 Pour sé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électionner tout (Ctrl+A sous Windows ou
Option+A sous Macintosh) deux fois puis appuyez sur la touche fléchée haut, gauche ou droite.
Rubriques connexes
•
•
•
•
Navigation dans les panneaux, page 53
Navigation dans l’inspecteur de propriétés, page 54
Navigation dans les boî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éez des pages accessibles, vous devez associer des informations aux objets présents
sur les pages, telles que des étiquettes et des descriptions, pour rendre votre contenu accessible à
tous les utilisateurs.
Pour ce faire, activez la boîte de dialogue Accessibilité de chaque objet, de façon à ce que
Dreamweaver vous demande d’entrer les informations d’accessibilité lorsque vous insérez des
objets. Vous pouvez activer une boîte de dialogue pour n’importe quel objet de la catégorie
Accessibilité dans les préférences.
Pour activer les boîtes de dialogue Accessibilité :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Accessibilité dans la liste de gauche.
56
Chapitre 1 : Exploration de l’espace de travail
La boîte de dialogue Préférences affiche les options d’accessibilité.
3 Sélectionnez les objets pour lesquels vous voulez activer les boîtes de dialogue Accessibilité.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Remarque : Les attributs d’accessibilité apparaissent automatiquement dans la boîte de dialogue
Tableau lors de l’insertion d’un nouveau tableau.
4 Cliquez sur OK.
Pour chaque objet que vous sélectionnez, une boîte de dialogue Accessibilité vous invitera à entrer
les balises et les attributs d’accessibilité lorsque vous insérerez cet objet dans un document.
Rubriques connexes
•
•
•
•
•
•
Dreamweaver et l’accessibilité, page 27
Insertion d’une image, page 319
Validation des données de formulaire HTML, page 644
Création de cadres et de jeux de cadres, page 214
Insertion et modification d’objets multimédia, page 369
Insertion d’un tableau et ajout de contenu, page 175
Utilisation de guides visuels dans Dreamweaver
Dreamweaver met à votre disposition plusieurs types de guides visuels pour vous aider à concevoir
vos documents et à savoir (approximativement) l’aspect qu’ils auront dans un navigateur. Vous
pouvez effectuer les opérations suivantes :
• Adapter instantanément la taille de la fenêtre de document à un format d’affichage donné, afin
•
de contrôler la disposition des éléments sur la page (voir Redimensionnement de la fenêtre de
document, page 42).
Utiliser des règles comme repère visuel pour le positionnement et le redimensionnement des
calques et des tableaux (voir Utilisation des règles et des grilles pour la mise en forme des pages,
page 170).
Utilisation de guides visuels dans Dreamweaver
57
• Utiliser un tracé d’image en arrière-plan de la page, de manière à pouvoir reproduire plus
•
aisément une mise en forme créée dans une application graphique telle que Macromedia
Fireworks (voir Utilisation du tracé de l’image, page 171).
Utilisez la grille afin d’effectuer un positionnement et un redimensionnement précis des
calques (voir Utilisation des règles et des grilles pour la mise en forme des pages, page 170).
Si la fonction d’alignement automatique est activée, les calques s’alignent automatiquement sur
le croisillon de grille le plus proche lorsqu’ils sont déplacés ou redimensionnés (d’autres objets,
par exemple les images et les paragraphes, ne sont pas aimantés par la grille). L’alignement
fonctionne même si la grille n’est pas visible.
Dreamweaver personnalisation, notions de base
Vous pouvez personnaliser Dreamweaver en fonction de vos besoins, à l’aide de certaines
techniques élémentaires sans avoir à comprendre le code complexe ni à modifier aucun fichier
texte. Par exemple, vous pouvez modifier la présentation de l’espace de travail, afficher ou
masquer la page de démarrage, définir des préférences, créer des raccourcis clavier et ajouter des
extensions à Dreamweaver.
Pour plus d’informations sur la personnalisation de la pré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 « Customizing Dreamweaver » sur le centre de support Macromedia, à l’adresse
www.macromedia.com/go/customizing_dreamweaver_fr.
Cette section ne décrit que les options de préférences les plus courantes. Pour plus d’informations
sur une option de préférence spécifique non dé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èmes multiutilisateurs
• Extension de Dreamweaver
Choix de la présentation de l’espace de travail (sous Windows uniquement)
Sous Windows, vous pouvez choisir entre les présentations Création et Codeur de l’espace de
travail. La première fois que vous démarrez Dreamweaver, une boîte de dialogue s’ouvre, vous
permettant de choisir la présentation de l’espace de travail. Vous pouvez changer d’espace de
travail à tout moment.
Pour choisir la présentation de l’espace de travail la première fois que vous démarrez
Dreamweaver :
1 Sélectionnez l’une des présentations suivantes :
: il s’agit d’un espace de travail intégré utilisant l’interface MDI (Multiple Document
Interface), dans laquelle toutes les fenêtres de document et tous les panneaux sont rassemblés
dans une grande fenêtre d’application, les groupes de panneaux étant ancrés sur la droite.
Codeur : il s’agit du même espace de travail intégré, mais avec les groupes de panneaux ancrés
sur la gauche, dans une présentation similaire à celle utilisée par Macromedia HomeSite et
Macromedia ColdFusion Studio. Les fenêtres de document affichent par dé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 à droite
ou à gauche.
2 Cliquez sur OK.
Pour changer la présentation de l’espace de travail après le choix initial :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2
3
4
5
6
7
La boîte de dialogue Préférences s’affiche.
Sélectionnez la catégorie Général dans la liste de gauche, si cela n’est pas déjà fait.
Cliquez sur le bouton Changer d’espace de travail.
Sélectionnez une présentation et cliquez sur OK.
Un message d’avertissement vous indique que la nouvelle présentation sera activée lors du
prochain redémarrage de Dreamweaver.
Cliquez sur OK pour fermer la fenêtre du message d’avertissement.
Cliquez sur OK pour fermer la boîte de dialogue Préférences.
Quittez et redémarrez Dreamweaver.
Rubriques connexes
• Présentation de l’espace de travail, page 34
Affichage et masquage de la page de démarrage
La page de démarrage de Dreamweaver s’affiche lorsque vous démarrez Dreamweaver ou lorsque
aucun document n’est ouvert. Vous pouvez masquer ou afficher cette page selon vos besoins.
Lorsque la page de démarrage est masquée et qu’aucun document n’est ouvert, la fenêtre de
document est vide.
Remarque : Vous pouvez faire en sorte que Dreamweaver ouvre le dernier document utilisé à chaque
démarrage. Pour plus d’informations, voir Définition des préférences générales de Dreamweaver,
page 59.
Pour masquer la page de démarrage :
• Activez la case Ne plus afficher cette fenêtre dans la page de démarrage.
Cette page ne s’affichera plus lors du démarrage de Dreamweaver ni après l’ouverture et la
fermeture d’un document.
Pour afficher la page de démarrage :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences générales s’affiche.
2 Activez la case Afficher la page de démarrage.
Cette page s’affichera lors du démarrage de Dreamweaver ou après l’ouverture et la fermeture d’un
document.
Définition des préférences générales de Dreamweaver
Les préférences générales commandent l’aspect général de Dreamweaver.
Dreamweaver personnalisation, notions de base
59
Pour modifier les préférences générales :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences générales s’affiche.
2 Définissez les options de préférence.
Pour plus d’informations, cliquez sur Aide.
3 Cliquez sur OK.
Définition des préférences de police pour l’affichage Dreamweaver
Le codage d’un document détermine la façon dont ce document apparaît dans un navigateur. Les
préférences de polices de Dreamweaver vous permettent d’utiliser un texte affiché dans la police et
la taille de votre choix, sans affecter l’aspect qu’aura le document dans un navigateur.
Pour définir la police à utiliser dans Dreamweaver pour chaque type de codage :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Polices dans la liste de gauche.
3 Sélectionnez le type de codage désiré (par exemple, Occidental (Latin1) ou Japonais) dans la
liste Paramètres de la police, puis choisissez les polices à utiliser dans Dreamweaver pour ce
codage dans les menus de polices, sous la liste Paramè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’éditeur de raccourcis clavier pour créer vos propres touches de raccourci, y compris pour
les fragments de code. Vous pouvez également supprimer des raccourcis clavier, les modifier, et
sélectionner un jeu prédéfini de raccourcis dans l’éditeur de raccourcis clavier.
Remarque : Des tableaux de raccourcis clavier relatifs à la configuration par défaut de Dreamweaver
sont disponibles sur le site Web de Macromedia à l’adresse suivante : www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Pour personnaliser les raccourcis clavier :
1 Sélectionnez Edition > Raccourcis clavier (Windows) ou Dreamweaver > Raccourcis clavier
(Macintosh).
60
Chapitre 1 : Exploration de l’espace de travail
La boî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 à inté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 à des bases de données d’arrière-plan ou qui vous
aident à rédiger des scripts pour les navigateurs.
Remarque : Pour installer des extensions accessibles à tous les utilisateurs dans un système
d’exploitation multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root
(Mac OS X). Pour plus d’informations sur les systèmes multiutilisateurs, voir A propos de la
personnalisation de Dreamweaver dans les systèmes multiutilisateurs, page 41.
Pour rechercher les extensions de Dreamweaver les plus récentes, consultez le site Web de
Macromedia Exchange, à l’adresse suivante : www.macromedia.com/go/dreamweaver_exchange_fr/.
Sur ce site, vous pouvez vous connecter et télécharger des extensions (un grand nombre d’entre elles
sont gratuites), participer à 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élécharger des extensions.
Le logiciel Extension Manager est une application indépendante permettant d’installer et de gérer
les extensions dans les applications Macromedia. Vous pouvez lancer Extension Manager à partir
de Dreamweaver en choisissant Commandes > Gérer les extensions.
Pour installer et gérer les extensions :
1 Sur le site Web Macromedia Exchange, cliquez sur le lien de téléchargement de l’extension qui
vous intéresse.
Votre navigateur vous permet peut-ê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éléchargé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 > Installer l’extension.
Le fichier sera installé dans Dreamweaver. Certaines extensions ne sont accessibles qu’après
avoir redémarré Dreamweaver ; un message vous invite à quitter et à redé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és les uns aux autres et partageant des
attributs, par exemple une rubrique connexe, une conception similaire ou un même objectif.
Outil logiciel de création et de gestion de sites, Macromedia Dreamweaver MX 2004 permet de
réaliser des sites Web complets, en sus de documents individuels.
Pour créer un site Web, la première étape consiste à le planifier. Pour obtenir des résultats
optimaux, concevez et planifiez la structure de votre site Web avant de créer les pages dont il sera
constitué.
L’étape suivante consiste à configurer Dreamweaver de façon à pouvoir travailler sur la structure
basique du site. Si vous disposez déjà d’un site installé sur un serveur Web, vous pouvez utiliser
Dreamweaver pour le modifier.
Conseil : Il peut être judicieux de concevoir votre site d’après un modèle Dreamweaver. Voir A propos
des modèles Dreamweaver, page 226 et Création d’un modè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ètres avancés pour configurer un site Dreamweaver, page 67
Modification des paramè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és à un site Web.
L’organisation de vos fichiers dans un site vous permet d’exploiter Dreamweaver pour télécharger
votre site sur le serveur Web, suivre et gérer automatiquement vos liens, puis gérer et partager les
fichiers en équipe. Dé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éveloppez :
représente votre répertoire de travail. Dreamweaver désigne ce dossier comme
votre « site local ». Il peut se trouver sur un ordinateur local ou sur un serveur de réseau. Il s’agit
de l’endroit dans lequel sont stockés les fichiers en cours de développement de votre site
Dreamweaver.
Le dossier local
Pour définir un site Dreamweaver, il vous suffit de créer un dossier local. Pour transférer des
fichiers vers un serveur Web ou pour développer des applications Web, vous devez également
ajouter des informations concernant un site distant et un serveur d’évaluation.
est le répertoire dans lequel sont stockés les fichiers, selon votre
environnement de développement, que vous réservez aux tâches suivantes : évaluation,
production, collaboration, etc. Dreamweaver désigne ce dossier comme votre « site distant » dans
le panneau Fichiers. En règle générale, votre dossier distant se trouve sur l’ordinateur à partir
duquel vous exécutez votre serveur Web.
Le dossier distant
Ces deux dossiers (local et distant) vous permettent de transfé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’évaluation est
l’emplacement dans lequel Dreamweaver traite les pages
dynamiques. Pour plus d’informations, voir Dé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éfinition de l’accès au dossier distant pour votre site Dreamweaver (voir Configuration
d’un dossier distant, page 70), vous devez déterminer le répertoire hôte du dossier distant. Le
répertoire hôte à spécifier doit correspondre au dossier racine du dossier local. Le schéma cidessous représente un exemple de dossier local à gauche et un exemple de dossier distant à droite.
non
Site local
(dossier
racine)
oui
Assets
HTML
non
Répertoire de connexion
(Ne doit pas correspondre au
répertoire hôte dans ce cas)
Public_html
(Doit correspondre au
répertoire hôte)
Assets
(Ne doit pas correspondre
au répertoire hôte)
HTML
Si la structure de votre dossier distant ne correspond pas à celle de votre dossier local, les fichiers
transférés par Dreamweaver ne seront pas stockés au bon endroit et risquent de ne pas être visibles
pour les visiteurs du site. De plus, les chemins de vos images et de vos liens peuvent être rompus.
Le dossier racine distant doit déjà exister pour que Dreamweaver puisse s’y connecter. Si aucun
répertoire racine n’existe pour votre dossier distant, créez-en un ou demandez à l’administrateur
du serveur de se charger de cette opération.
Notez que même si vous avez l’intention de ne modifier qu’une partie du site distant, il est
fortement conseillé de dupliquer localement la structure complète de la branche concernée du site
distant (du dossier racine du site distant jusqu’aux fichiers que vous désirez modifier).
A propos des sites Dreamweaver
65
Si, par exemple, le dossier racine de votre site distant, appelé public_html, contient deux sousdossiers, Projetc1 et Projetc2, et si vous ne désirez modifier que les fichiers HTML contenus dans
Project1, il n’est pas nécessaire de télé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ée, ou si vous disposez déjà d’un site, vous devez, si
possible, définir un site dans Dreamweaver avant de commencer son développement. Un site
Dreamweaver vous permet d’organiser tous les documents associés à un site Web. Pour plus
d’informations, voir A propos des sites Dreamweaver, page 64.
Remarque : Vous pouvez également modifier des fichiers sans définir de site Dreamweaver. Pour
plus d’informations, voir Accès aux sites, à un serveur et aux disques locaux, page 88.
Une fois que vous avez défini un site Dreamweaver, il est fortement conseillé de l’exporter, de
façon à 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 > Gérer les sites.
66
Chapitre 2 : Configuration d’un site Dreamweaver
La boîte de dialogue Gérer les sites s’affiche.
Remarque : Si vous ne disposez pas de site Dreamweaver, la boîte de dialogue Définition de site
apparaît. Vous pouvez alors ignorer l’étape suivante.
2 Cliquez sur le bouton Nouveau.
La boîte de dialogue Définition du site s’ouvre.
3 Procédez de l’une des manières suivantes :
■ Cliquez sur l’onglet Elémentaire pour utiliser l’assistant de définition de site qui vous guide
tout au long de la procédure.
Remarque : Les utilisateurs qui découvrent Dreamweaver sont invités à suivre l’assistant de
définition d’un site ; les utilisateurs chevronnés de Dreamweaver lui préféreront sans doute les
paramètres avancés.
■
Cliquez sur l’onglet Avancé pour utiliser les paramètres avancés qui vous permettent de
définir individuellement le dossier local, le dossier distant et enfin le dossier d’évaluation,
selon vos besoins.
Remarque : Pour commencer, vous avez le choix entre configurer entièrement un site
Dreamweaver et vous limiter à la première étape, à savoir configurer votre dossier local.
4 Procédez à la configuration du site Dreamweaver :
■
■
Avec l’Assistant de définition de site, répondez aux questions qui apparaissent à l’écran, puis
cliquez sur Suivant pour passer à l’étape suivante du processus de création, ou cliquez sur
Retour pour revenir à l’écran précédent.
Complétez les catégories de paramètres avancés Infos locales, Infos distantes et Serveur
d’évaluation, si nécessaire (voir Utilisation des paramètres avancés pour configurer un site
Dreamweaver, page 67).
Conseil : Une fois que vous avez défini un site Dreamweaver, il est fortement conseillé de l’exporter,
de façon à 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ètres avancés pour configurer un site
Dreamweaver
Vous pouvez utiliser les paramètres avancés de la boîte de dialogue de définition d’un site pour
configurer un site Dreamweaver. Ces paramètres vous permettent de définir individuellement le
dossier local, le dossier distant et enfin le dossier d’évaluation (pour le traitement des pages
dynamiques), selon vos besoins. Il est conseillé aux utilisateurs chevronnés de Dreamweaver
d’utiliser cette méthode.
Remarque : Pour commencer votre travail rapidement, vous pouvez compléter uniquement la
première étape de configuration d’un site Dreamweaver, c’est-à-dire la configuration du dossier local.
Vous pourrez ajouter les informations distantes et d’évaluation ultérieurement, Vous devez
impérativement définir un dossier local avant de vous attaquer à Dreamweaver.
Si vous n’êtes pas familiarisé avec Dreamweaver, utilisez plutôt l’assistant de définition de site que
les Paramètres avancés. Cet assistant vous guidera tout au long de la procédure de configuration
(voir Configuration d’un nouveau site Dreamweaver, page 66).
Utilisation des paramètres avancé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éfini un site Dreamweaver, il est fortement conseillé de l’exporter,
de façon à 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éfinition du dossier de traitement des pages dynamiques, page 474
Configuration d’un dossier local
Le dossier local représente le répertoire de travail de votre siteDreamweaver. Il peut se trouver sur
un ordinateur local ou sur un serveur de réseau.
Pour configurer un dossier local :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
Remarque : Si vous ne disposez pas de site Dreamweaver, la boîte de dialogue Définition de site
apparaît. Vous pouvez alors ignorer l’étape suivante.
2 Cliquez sur Nouveau.
La boîte de dialogue Définition du site s’ouvre.
68
Chapitre 2 : Configuration d’un site Dreamweaver
3 Cliquez sur le bouton Avancé si les paramètres avancés ne sont pas visibles.
L’onglet Avancé de la boîte de dialogue Définition du site affiche le contenu de la catégorie
Infos locales.
4 Spécifiez les options relatives aux informations locales.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
5 (Facultatif) Si vous êtes prêt à configurer votre serveur distant, ignorez l’étape restante ;
sélectionnez la catégorie Infos distantes à gauche, puis renseignez la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
6 Cliquez sur OK.
Dreamweaver crée le cache initial du site, et le nouveau site Dreamweaver apparaît dans le
panneau Fichiers.
Une fois le dossier local configuré, vous pouvez ajouter un dossier distant et un dossier
d’évaluation (voir Configuration d’un dossier distant, page 70 et Dé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ètres avancés pour configurer un site Dreamweaver
69
Configuration d’un dossier distant
Une fois configuré 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éveloppement, le dossier distant se trouve avec les fichiers destinés aux évaluations, à la
collaboration, à la production, au déploiement, etc.
Remarque : Il n’est pas nécessaire de spécifier un dossier distant si le dossier local est le même que
celui créé pour les fichiers de votre site, sur le système exécutant votre serveur Web. Ce scénario
suppose que le serveur Web s’exécute sur votre ordinateur local.
Déterminez le mode d’accè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 > Gérer les sites.
2
3
4
5
6
7
La boîte de dialogue Gérer les sites s’affiche.
Sélectionnez un site Dreamweaver préexistant.
Si vous n’avez pas encore défini de site Dreamweaver, créez un dossier local avant de poursuivre
(voir Configuration d’un dossier local, page 68).
Cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
Cliquez sur le bouton Avancé si les paramètres avancés ne sont pas visibles.
Sélectionnez la catégorie Infos distantes dans la liste de gauche.
Sélectionnez une option d’accès.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Cliquez sur OK.
Dreamweaver crée une connexion avec le dossier distant. Si vous développez un site
dynamique, vous pouvez définir un dossier pour le traitement des pages dynamiques (voir
Définition du dossier de traitement des pages dynamiques, page 474).
Pour vous connecter à un dossier distant via un accès FTP :
• Dans le panneau Fichiers, cliquez sur le bouton Connecter à un hôte distant de la barre
d’outils.
Si votre site utilise FTP avec un serveur SSH pour accéder à votre dossier distant, une invite de
commande s’exé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îte de dialogue
Dreamweaver après votre connexion.
Remarque : Si vous utilisez un accès réseau pour votre dossier distant, il n’est pas nécessaire de
vous connecter à ce dossier ; la connexion est permanente. Cliquez sur le bouton Actualiser pour
afficher vos fichiers distants.
Pour vous déconnecter d’un dossier distant :
• Dans le panneau Fichiers, cliquez sur le bouton Dé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ésolution des problèmes de configuration du dossier distant, page 71
Résolution des problèmes de configuration du dossier distant
Il existe de très nombreuses façons de configurer un serveur Web. Cette section vise à vous
expliquer certains problèmes courants que vous pouvez rencontrer en configurant un dossier
distant (voir Configuration d’un dossier distant, page 70), et à vous aider à les résoudre.
• L’implémentation FTP de Dreamweaver peut ne pas fonctionner correctement avec certains
•
•
•
•
•
serveurs proxy, pare-feu multiniveaux et autres formes d’accès indirect à un serveur.
Si vous avez des problèmes d’accès en FTP, demandez l’aide de votre administrateur système.
Pour l’implémentation FTP de Dreamweaver, il est indispensable de se connecter au dossier
racine du système distant (dans de nombreuses applications, vous pouvez vous connecter à
n’importe quel répertoire distant, puis naviguer dans le système de fichiers distants pour
rechercher un répertoire).
Veillez à indiquer le dossier racine du système distant comme répertoire hôte.
Si vous rencontrez des problèmes de connexion et avez spécifié le répertoire hôte avec une seule
barre oblique (/), c’est peut-être qu’il vous faut spécifier un chemin relatif à partir du répertoire
auquel vous vous connectez et du dossier racine distant.
Si, par exemple, le dossier racine distant est un répertoire de niveau supérieur, vous devez
parfois spécifier ../../ pour le répertoire hôte.
Par ailleurs, les noms de dossiers et de fichiers qui contiennent des espaces ou des caractères
spéciaux peuvent souvent occasionner des problèmes à l’occasion d’un transfert sur un site
distant.
Utilisez des traits de soulignement à la place des espaces, et évitez, dans la mesure du possible,
d’utiliser des caractères spéciaux pour les noms de fichiers et de dossiers. En particulier, les
points, barres obliques, virgules et apostrophes sont à éviter dans les noms de fichiers et de
dossiers. Il arrive que la présence de caractères spéciaux dans les noms de fichiers ou de dossiers
empêche Dreamweaver de créer une carte du site.
En cas de problème avec un nom de fichier long, raccourcissez ce nom. Sur Macintosh, les
noms de fichiers ne peuvent pas compter plus de 31 caractères.
Notez que certains serveurs utilisent ce qui est appelé, suivant le système d’exploitation, des
liens symboliques (Unix), des raccourcis (Windows) ou des alias (Macintosh), pour connecter
un dossier situé en un point du disque du serveur à un autre dossier situé ailleurs.
Par exemple, le sous-répertoire public_html de votre répertoire principal sur le serveur peut
n’ê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égatif sur votre capacité à vous connecter au dossier ou répertoire
approprié, mais si vous ne pouvez vous connecter qu’à une partie du serveur, il s’agit peut-être
d’un problème d’alias.
Si vous découvrez un message d’erreur du type « impossible de placer le fichier », votre dossier
distant peut être saturé. Pour plus d’informations, consultez le journal FTP.
Remarque : En général, si vous avez un problème durant un transfert via FTP, examinez le journal
FTP en choisissant Fenêtre > Résultats (Windows) ou Site > Journal FTP (Macintosh), puis en
cliquant sur l’onglet Journal FTP.
Utilisation des paramètres avancés pour configurer un site Dreamweaver
71
Modification des paramètres d’un site Dreamweaver
Utilisez les paramètres avancés de la boîte de dialogue Définition du site pour modifier vos
sites Dreamweaver.
Pour modifier les paramètres d’un site Dreamweaver, procédez de l’une des manières
suivantes:
• Sélectionnez Site > Gérer les sites, sélectionnez un site dans la boîte de dialogue Gérer les sites,
•
puis cliquez sur Modifier.
Dans le panneau Fichiers, sélectionnez Gérer les sites dans le menu déroulant dans lequel
apparaît le site, serveur ou lecteur courant ; sélectionnez un site dans la boîte de dialogue Gé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ême si vous n’avez pas
utilisé Dreamweaver pour créer le site original. Ces sites peuvent se trouver sur votre système ou
sur un systè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ême
si vous n’avez pas utilisé Dreamweaver pour créer le site original.
Remarque : Cette section permet de configurer un site Dreamweaver pour modifier un site Web
local existant. Il est également possible de modifier le site Web existant sans créer de site
Dreamweaver. Pour plus d’informations, voir Accès aux sites, à un serveur et aux disques locaux,
page 88.
Pour modifier un site Web local existant :
1 Choisissez Site > Gérer les sites.
2
3
4
5
La boîte de dialogue Gérer les sites s’affiche.
Cliquez sur Nouveau.
La boîte de dialogue Définition du site s’ouvre.
Cliquez sur le bouton Avancé si les paramètres avancés ne sont pas visibles.
L’onglet Avancé de la boîte de dialogue Définition du site affiche le contenu de la catégorie
Infos locales.
Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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ême si vous n’avez pas utilisé
Dreamweaver pour cré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 également possible de modifier le site Web existant sans créer de site
Dreamweaver. Pour plus d’informations, voir Accès aux sites, à un serveur et aux disques locaux,
page 88.
Pour modifier un site distant existant :
1 Créez un dossier local contenant le site existant, puis dé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ète de la branche concerné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 à choisir le dossier racine correct pour le site distant.
3 Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Connecter à un hôte distant
(pour un accès FTP) ou sur Actualiser (pour un accès réseau) dans la barre d’outils pour afficher
le site distant.
4 Selon la taille de la partie du site distant que vous désirez modifier, procédez de l’une des
manières suivantes :
■ Si vous souhaitez travailler sur l’ensemble du site, sélectionnez, dans le panneau Fichiers, le
dossier racine du site distant, puis cliquez sur Acquérir dans la barre d’outils pour
télécharger l’ensemble du site sur votre disque local.
■ Si vous désirez travailler sur un seul des fichiers ou dossiers du site, sélectionnez ce fichier ou
dossier dans le volet Affichage distant du panneau Fichiers et cliquez sur Acquérir dans la
barre d’outils pour télécharger ce fichier sur votre disque dur local.
Dreamweaver duplique automatiquement toute la partie de la structure du site distant
nécessaire pour replacer le fichier téléchargé au niveau adéquat dans la hiérarchie du site. Si
vous ne modifiez qu’une partie d’un site, il est en général conseillé de charger également les
fichiers dé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éation et ouverture de documents
Macromedia Dreamweaver MX 2004 propose un environnement de travail flexible pour la
conception Web et le développement de documents. Vous pouvez bien entendu créer et ouvrir des
documents HTML, mais également divers types de documents texte, comme CFML, ASP,
JavaScript et CSS. Dreamweaver prend également en charge les fichiers de code source comme
Visual Basic, .NET, C# et Java.
Dreamweaver propose diverses options pour la création d’un nouveau document. Vous pouvez
utiliser les éléments suivants :
• Un nouveau document ou un modèle vierge
• Un document basé sur une des conceptions de pages prédéfinies fournies avec Dreamweaver
• Un document basé sur un de vos modèles existants
D’autres options sont également disponibles. Par exemple, si vous avez l’habitude de travailler
avec un type particulier de document, vous pouvez le définir comme type par défaut pour les
nouvelles pages.
Dans Dreamweaver, il est facile de définir des propriétés de document, telles que les balises meta,
le titre du document et la couleur de l’arrière-plan, ainsi que d’autres propriétés de page, en mode
Création ou en mode Code.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
Création de nouveaux documents, page 76
Enregistrement d’un nouveau document, page 78
Définition d’un nouveau type de document par défaut, page 79
Ouverture de documents existants, page 79
Importation d’un fichier HTML Microsoft Word, page 80
75
Création de nouveaux documents
Dreamweaver propose de nombreux choix pour sélectionner un nouveau document. Voici les
diverses méthodes de création d’un nouveau document :
• Commencer avec un document vierge (voir Création d’un document vierge, page 76).
• Créer un document ou un modèle vierge basé sur un fichier de conception Dreamweaver (voir
•
Création d’un document basé sur un fichier de conception Dreamweaver, page 76).
Utiliser un modèle avec un aspect prédéfini et indiquant les éléments que vous pouvez modifier
(voir Création d’un document basé sur un modèle existant, page 77).
Conseil : Si vous avez l’habitude de travailler avec un type de document spécifique, vous pouvez
définir un document par défaut et baser le nouveau document automatiquement sur le document par
défaut à l’ouverture. Pour plus d’informations, voir Définition d’un nouveau type de document par
défaut, page 79.
Création d’un document vierge
Vous pouvez sélectionner le type de document vierge que vous souhaitez créer.
Pour créer un nouveau document vierge :
1 Sélectionnez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche. L’onglet Général est déjà sélectionné.
2 Sélectionnez l’une des catégories suivantes dans la liste : Page de base, Page dynamique, Modèle,
Autre ou Jeux de cadres. Sélectionnez ensuite le type de document que vous souhaitez créer dans
la liste de droite.
Par exemple, sélectionnez Page de base pour créer un document HTML, ou sélectionnez Page
dynamique pour créer un document ColdFusion ou ASP, et ainsi de suite.
Pour plus d’informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton Aide dans la boîte de dialogue.
3 Cliquez sur le bouton Créer.
Le nouveau document s’ouvre dans la fenêtre de document.
4 Enregistrez le document (voir Enregistrement d’un nouveau document, page 78).
Rubriques connexes
• Création d’un document basé sur un modèle existant, page 77
Création d’un document basé sur un fichier de conception Dreamweaver
Dreamweaver inclut plusieurs mises en formes de page professionnelles, ainsi que des fichiers
d’éléments de conception. Vous pouvez utiliser ces fichiers de conception comme point de départ
pour la création de pages sur vos sites Web. Lorsque vous créez un document basé sur un fichier
de conception, Dreamweaver crée une copie du fichier.
Remarque : Si vous créez un document basé sur un jeu de cadres prédéfini, seule la structure du jeu
de cadres est copiée, sans le contenu des cadres. En outre, vous devrez enregistrer séparé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éation et ouverture de documents
Pour créer un nouveau document à partir d’un fichier de conception Dreamweaver :
1 Sélectionnez Fichier > Nouveau.
2
3
4
5
La boîte de dialogue Nouveau document s’affiche. L’onglet Général est déjà sélectionné.
Sélectionnez l’une des catégories suivantes dans la liste : Feuilles de style en cascade (CSS), Mises
en forme basées sur un tableau, Conception de page ou Conception de page (Accessibilité).
Sélectionnez ensuite un fichier de conception dans la liste de droite.
Il est possible de prévisualiser un fichier de conception et de consulter une brève description
des éléments de conception d’un document.
Pour plus d’informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton Aide dans la boîte de dialogue.
Cliquez sur le bouton Créer.
Le nouveau document s’ouvre dans la fenêtre de document. Si vous avez sélectionné une feuille
de style CSS, le document CSS s’affiche dans la fenê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îte de dialogue Copier les fichiers
dépendants s’affiche pour vous permettre d’enregistrer une copie des fichiers dépendants.
Si la boîte de dialogue Copier les fichiers dépendants apparaît, définissez les options, puis cliquez
sur Copier pour copier les actifs dans le dossier sélectionné.
Vous pouvez choisir l’emplacement des fichiers dépendants ou enregistrer les fichiers dans le
dossier par défaut créé par Dreamweaver (ce dossier est créé en fonction du nom source du
fichier de conception).
Rubriques connexes
• Création d’un document vierge, page 76
Création d’un document basé sur un modèle existant
Vous pouvez sélectionner, prévisualiser et créer un nouveau document à partir d’un modèle
existant. La boîte de dialogue Nouveau document vous permet de sélectionner un modèle parmi
les sites définis dans Dreamweaver ou d’utiliser le panneau Actifs pour créer un nouveau
document sur la base d’un modèle existant.
Pour plus d’informations sur la création de modèles, voir Création d’un modèle Dreamweaver,
page 238.
Conseil : Si votre site ne contient aucun modèle, vous pouvez enregistrer comme modèle un
document dans l’une des catégories de fichier de conception de la boîte de dialogue Nouveau
document, puis créer des pages à partir de ce modèle. Pour plus d’informations sur l’enregistrement
d’un fichier de conception comme modèle, voir Création d’un document basé sur un fichier de
conception Dreamweaver, page 76.
Pour créer un document basé sur un modèle :
1 Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’ouvre.
2 Cliquez sur l’onglet Modèles.
3 Dans la liste Modèles pour, sélectionnez le site Dreamweaver contenant le modèle à utiliser, puis
sélectionnez un modèle dans la liste de droite.
Création de nouveaux documents
77
Pour plus d’informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton Aide dans la boîte de dialogue.
4 Cliquez sur Créer.
Le nouveau document s’ouvre dans la fenêtre de document.
5 Enregistrez le document (voir Enregistrement d’un nouveau document, page 78).
Pour créer un document à partir d’un modèle à l’aide du panneau Actifs :
1 Ouvrez le panneau Actifs (Fenêtre > Actifs) s’il n’est pas déjà ouvert.
2 Dans le panneau Actifs, cliquez sur l’icône Modèles située à gauche pour afficher la liste des
modèles utilisés dans votre site actuel.
Conseil : Si le modèle que vous souhaitez utiliser vient d’être créé, il peut être nécessaire de
cliquer sur le bouton Actualiser pour l’afficher.
3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh)
sur le modèle à appliquer, puis sélectionnez Nouveau à partir d’un modèle.
Le document s’ouvre dans la fenêtre de document.
Rubriques connexes
• Création d’un document vierge, page 76
• Création d’un document basé sur un fichier de conception Dreamweaver, page 76
Enregistrement d’un nouveau document
Il est nécessaire d’enregistrer tout nouveau document que vous créez.
Pour enregistrer un document :
1 Choisissez Fichier > Enregistrer.
2 Dans la boîte de dialogue qui s’affiche, recherchez le dossier où vous voulez enregistrer le fichier.
Conseil : Il est conseillé 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ères spé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ères
spéciaux (par exemple é, ç ou ¥) 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ères lors du transfert, rendant ainsi
inopérants les liens vers ces fichiers.
4 Cliquez sur Enregistrer.
78
Chapitre 3 : Création et ouverture de documents
Définition d’un nouveau type de document par défaut
Dans Dreamweaver, vous pouvez définir le type de document par défaut utilisé par Dreamweaver
pour un site.
Par exemple, si la plupart des pages de votre site sont de type spécifique (tel que les documents
ColdFusion, HTML ou ASP), vous pouvez définir des préférences de document pour créer
automatiquement les nouveaux documents de ce type.
Pour définir un nouveau type de document et de nouvelles préférences par défaut :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
Conseil : Vous pouvez également cliquer sur le bouton Préférences dans la boîte de dialogue
Nouveau document pour définir les nouvelles préférences liées au document en cours de création
(voir Création d’un document vierge, page 76).
2 Cliquez sur la catégorie Nouveau document dans la liste de gauche.
3 Définissez ou modifiez les préférences à votre convenance.
Pour plus d’informations sur les options de la boîte de dialogue, cliquez sur le bouton d’aide.
4 Cliquez sur OK.
Dreamweaver enregistre vos préférences.
Ouverture de documents existants
Dans Dreamweaver, vous pouvez ouvrir une page Web existante ou un document texte, même si
celui-ci n’a pas été créé avec Dreamweaver. Vous pouvez ouvrir le document et le modifier dans les
modes de travail Création ou Code de Dreamweaver.
Si le document que vous ouvrez est un fichier Microsoft Word enregistré au format HTML, il est
conseillé d’utiliser la commande Nettoyage du HTML Word pour supprimer les balises superflues
ajoutées par Word au fichier HTML.
Conseil : Plutôt que d’utiliser la procédure présentée dans cette section pour ouvrir un fichier
Microsoft Word enregistré 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 à nettoyer le fichier.
Vous pouvez également ouvrir des fichiers texte non HTML, comme des fichiers JavaScript,
XML, feuilles de style en cascade (CSS) ou des fichiers texte enregistrés dans des traitements de
texte ou des éditeurs de texte.
Pour ouvrir un fichier existant :
1 Choisissez Fichier > Ouvrir.
La boîte de dialogue Ouvrir s’affiche.
Conseil : Vous pouvez é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électionnez le fichier à ouvrir.
Remarque : Si cette opération n’a pas encore été effectuée, il est conseillé 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être de document.
Par défaut, JavaScript, texte et les feuilles de style en cascade (CSS) s’ouvrent en mode Code.
Vous pouvez mettre à jour le document pendant que vous travaillez dans Dreamweaver, puis
enregistrer les modifications dans le fichier. Pour plus d’informations sur la définition des
paramètres d’un éditeur de texte externe afin de visualiser ces types de fichiers, voir Lancement
d’un éditeur externe pour des fichiers multimédia, page 371.
4 Si vous ouvrez un document Microsoft Word, sélectionnez Commandes > Nettoyage du
HTML Word, désélectionnez les options souhaitées dans la boîte de dialogue, puis cliquez sur
OK.
Il peut se produire un certain délai pendant que Dreamweaver tente de déterminer la version de
Word qui a été utilisée pour enregistrer ce fichier. Si Dreamweaver n’y parvient pas, sélectionnez
la version correcte dans le menu contextuel.
Pour plus d’informations sur les options de la boîte de dialogue Nettoyage du HTML Word,
cliquez sur le bouton d’aide.
Dreamweaver applique les paramètres de nettoyage au nouveau document et un journal
contenant une liste des modifications apportées s’affiche (sauf si cette option a été
désélectionnée dans la boîte de dialogue).
Importation d’un fichier HTML Microsoft Word
Dans Dreamweaver, vous pouvez importer des documents enregistrés par Microsoft Word en tant
que fichiers HTML, puis utiliser la commande Nettoyer HTML Word pour supprimer le code
HTML superflu généré par Word. La commande Nettoyer HTML Word est utilisable pour les
documents enregistrés sous forme de fichiers HTML par Word 97 ou Word 2000.
Le code que Dreamweaver supprime est principalement utilisé par Word pour mettre en forme et
afficher les documents dans Word même, et n’est pas nécessaire dans un véritable fichier HTML.
Conservez une copie de votre fichier Word original (.doc) comme sécurité, car il se peut que vous
ne puissiez plus ouvrir ce document HTML dans Word après avoir appliqué la fonction Nettoyer
HTML Word.
Pour nettoyer un fichier HTML ou XHTML non généré par Microsoft Word, voir Nettoyage du
code, page 447.
Pour importer et nettoyer un fichier HTML Microsoft Word :
1 Si cette opération n’a pas encore été effectuée, enregistrez votre document au format HTML
dans Microsoft Word.
2 Dans Dreamweaver, choisissez Fichier > Importer > Document Word.
La boîte de dialogue Ouvrir s’affiche.
3 Recherchez et sélectionnez le fichier HTML Word à ouvrir.
Le document s’ouvre et la boîte de dialogue Nettoyage du HTML Word s’affiche.
Il peut se produire un certain délai pendant que Dreamweaver tente de déterminer la version
de Word qui a été utilisée pour enregistrer ce fichier. Si Dreamweaver n’y parvient pas,
sélectionnez la version correcte dans le menu contextuel.
4 Désélectionnez les options de votre choix dans la boîte de dialogue.
Pour plus d’informations concernant les options de cette boîte de dialogue, cliquez sur le
bouton d’aide.
80
Chapitre 3 : Création et ouverture de documents
5 Cliquez sur OK.
Dreamweaver applique les paramètres de nettoyage au nouveau document et un journal
reprenant les modifications apportées s’affiche (sauf si cette option a été désélectionnée dans la
boîte de dialogue).
Rubriques connexes
• Copie et collage de texte à partir de documents MS Office, page 295
Importation d’un fichier HTML Microsoft Word
81
82
Chapitre 3 : Création et ouverture de documents
Apprenez à gérer des sites Macromedia Dreamweaver MX 2004, ainsi que des actifs propres à 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è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 à organiser et à gérer vos fichiers.
Dreamweaver comprend une série de fonctions permettant de gérer et de transférer des fichiers
depuis et vers un serveur distant. Lorsque vous transférez des fichiers entre le site local et le site
distant, Dreamweaver conserve la même structure de fichiers et de dossiers sur les deux sites.
Dreamweaver crée automatiquement les dossiers nécessaires s’ils n’existent pas déjà sur le site de
destination. Vous pouvez é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 échéant,
les fichiers inutiles.
Certaines fonctions de Dreamweaver facilitent le travail en é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’équipe Web puissent savoir qui travaille sur un fichier. Vous pouvez ajouter des Design Notes à
vos fichiers afin de partager des informations avec d’autres membres de l’équipe sur l’état, la
priorité ou autre d’un fichier. Vous pouvez également utiliser la fonction de rapports sur le
déroulement du travail afin de générer des rapports sur votre site et obtenir ainsi des informations
sur l’é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ès aux sites, à 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érie de fonctions permettant de gérer un site et de transférer des
fichiers depuis et vers un serveur distant. Certaines fonctions de Dreamweaver, notamment le
système d’archivage et d’extraction et les Design Notes, facilitent également le travail en équipe
sur tout projet de site Web.
Système d’archivage et d’extraction de fichiers
Si vous travaillez en équipe, vous avez la possibilité d’archiver et d’extraire des fichiers sur les
serveurs local et distant.
Remarque : Vous pouvez utiliser la fonctionnalité d’acquisition et de placement de fichiers sur un
serveur d’évaluation, mais le systè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érir et Placer, voir Acquisition et
placement de fichiers depuis ou vers votre serveur, page 109.
L’extraction d’un fichier équivaut à 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é l’opération et insère une coche de couleur
rouge (si le fichier a été extrait par un autre membre de l’équipe) ou verte (si vous êtes la personne
à avoir extrait le fichier) en regard de son icône.
L’archivage d’un fichier équivaut à le mettre à la disposition des autres membres de l’équipe, qui
peuvent l’extraire et le modifier. Lorsque vous archivez un fichier après l’avoir modifié, la version
locale de ce fichier devient accessible en lecture seule et un cadenas apparaît en regard du fichier
dans le panneau Fichiers pour vous empêcher de le modifier.
Dreamweaver ne rend pas les fichiers extraits accessibles en lecture seule sur le serveur distant. Si
vous transférez des fichiers à l’aide d’une application autre que Dreamweaver, vous risquez
d’écraser les fichiers extraits. Toutefois, dans les applications autres que Dreamweaver, le fichier
.lck est visible près du fichier extrait dans la hiérarchie de fichiers afin d’éviter ce type d’incident.
Rubriques connexes
• Configuration du systè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éfinir les dossiers et les types de fichier du site que vous souhaitez
exclure de certaines opérations (acquisition et placement, par exemple). Vous pouvez voiler
certains dossiers, mais pas des fichiers individuels. Pour voiler des fichiers, sélectionnez un type de
fichier : Dreamweaver voilera tous les fichiers de ce type. Comme Dreamweaver conserve en
mémoire tous les paramètres définis pour chaque site, vous n’avez pas à sé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élécharger vos fichiers
multimédias chaque jour, vous pouvez utiliser la fonction de voilage sur le site pour voiler votre
dossier multimédia. Le système exclut alors les fichiers de ce dossier lorsque vous effectuez des
opé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és des opérations suivantes :
86
Chapitre 4 : Gestion des fichiers
•
•
•
•
•
•
•
Réalisation d’opérations de placement, d’acquisition, d’archivage et d’extraction
Génération de rapports
Recherche des fichiers locaux et distants les plus récents
Réalisation d’opérations portant sur le site entier, telles que la vérification et la modification des
liens
Synchronisation
Utilisation du contenu du panneau Actifs
Mise à jour des modèles et des bibliothèques
Remarque : Dreamweaver exclut les modèles et les éléments de bibliothèque voilés lors des
opérations d’acquisition et de placement de fichiers seulement. Dreamweaver n’exclut aucun de ces
éléments lors des opérations par lots, car cela pourrait les désynchroniser par rapport à leurs instances.
Rubriques connexes
• Voilage des dossiers et des fichiers du site, page 113
Design Notes
Les Design Notes sont des notes créées pour un fichier donné. Les Design Notes sont associées au
fichier qu’elles décrivent, mais stockées dans un autre fichier. Le panneau Fichiers vous permet de
voir les fichiers auxquels sont jointes des Design Notes, car une icône spécifique s’affiche dans la
colonne Notes.
Les Design Notes vous permettent de conserver des informations supplémentaires sur les
documents, telles que des commentaires sur l’é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 à 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 également de conserver des informations confidentielles, qu’il est
impossible de laisser dans un document pour des raisons de sécurité, par exemple des notes sur la
façon dont un devis a été calculé, dont une configuration a été élaborée ou encore sur les facteurs
de marketing qui ont influencé une dé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é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="file:///Mydisk/sites/assets/orig/myhouse.png"
Supposons à présent qu’une Design Note Flash similaire contienne la ligne suivante :
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Remarque : Pour pouvoir partager des Design Notes, les utilisateurs doivent définir le même chemin
d’accè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é sur le site, en même temps que l’image. Si vous sélectionnez cette image
dans Dreamweaver et décidez de la modifier à l’aide de Fireworks (voir Lancement d’un éditeur
externe pour des fichiers multimédia, page 371), ce dernier ouvre directement le fichier d’origine
pour vous permettre de le modifier.
Rubriques connexes
• Activation et désactivation des Design Notes pour un site, page 116
• Association de Design Notes à un fichier, page 117
Accès aux sites, à 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éder à un serveur, à un disque local ou à votre bureau.
Avant de pouvoir accéder à un serveur distant, vous devez configurer Dreamweaver de façon à ce
qu’il puisse fonctionner avec ce serveur (voir Configuration de Dreamweaver pour fonctionner sans
avoir à définir de site, page 90).
Remarque : La meilleure façon de gérer des fichiers est de créer un site Dreamweaver (voir
Configuration d’un nouveau site Dreamweaver, page 66).
Pour ouvrir un site Dreamweaver existant :
• Dans le panneau Fichiers (Fenêtre > Fichiers), sé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être > Fichiers), sé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és pour fonctionner avec
Dreamweaver apparaissent. Si vous n’avez pas encore configuré de serveur, voir Configuration de
Dreamweaver pour fonctionner sans avoir à dé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éder à un disque local ou à votre bureau :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sé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é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 à un autre site ou à un dossier
non lié à un site Dreamweaver, Dreamweaver copie le fichier, puis l’ajoute à l’emplacement
où vous le déposez. Si vous faites glisser un fichier et le déposez au sein du même site
Dreamweaver, Dreamweaver déplace le fichier à l’emplacement où vous le déposez. Lorsque
vous faites glisser un fichier qui n’est associé à aucun site Dreamweaver vers un dossier qui
n’est pas non plus associé à un site Dreamweaver, Dreamweaver déplace le fichier à
l’emplacement où vous le déposez.
Accès aux sites, à un serveur et aux disques locaux
89
Remarque : Pour que Dreamweaver déplace un fichier au lieu de le copier, maintenez la
touche Maj (Windows) ou Commande (Macintosh) enfoncée pendant que vous faites glisser et
déposez le fichier. Pour copier un fichier que Dreamweaver déplace par défaut, maintenez la
touche Ctrl (Windows) ou Option (Macintosh) enfoncée pendant que vous faites glisser et
déposez le fichier.
Rubriques connexes
• Gestion de fichiers et de dossiers dans le panneau Fichiers, page 94
Configuration de Dreamweaver pour fonctionner sans avoir à définir de site
Dreamweaver vous permet de vous connecter à un serveur FTP ou RDS de façon à pouvoir
travailler sur vos documents sans avoir à créer de site Dreamweaver.
Remarque : Ce type de connexion ne permet toutefois pas d’effectuer des opérations au niveau du
site Dreamweaver, par exemple vérifier les liens. Pour configurer un site Dreamweaver, voir
Configuration d’un nouveau site Dreamweaver, page 66.
Pour configurer Dreamweaver de façon à ce qu’il fonctionne avec un serveur dans la fenêtre
Document :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Cliquez sur Nouveau, puis sélectionnez Serveurs FTP et RDS.
La boîte de dialogue Configurer le serveur s’affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Remarque : Vous ne devez compléter cette boî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 êtes connecté
et le nom du serveur apparaît dans le menu contextuel situé en haut de ce même panneau.
Pour configurer Dreamweaver de façon à ce qu’il fonctionne avec le panneau Fichiers :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez Bureau dans le menu contextuel
(menu dans lequel est affiché 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ée (Macintosh)
sur le nœud des Serveurs FTP et RDS dans le panneau Fichiers, puis sélectionnez Ajouter un
serveur FTP ou Ajouter un serveur RDS.
La boîte de dialogue Configurer le serveur s’affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Remarque : Vous ne devez compléter cette boî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 êtes connecté
et le nom du serveur apparaît dans le menu contextuel situé en haut de ce même panneau.
Remarque : Pour les dossiers plus volumineux, le panneau Fichiers peut mettre un petit moment à
afficher le dossier.
Rubriques connexes
• Accès aux sites, à 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és
à 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évelopper ou réduire le panneau Fichiers.
Pour les sites Dreamweaver, il est également possible de personnaliser le panneau Fichiers en
modifiant la vue (site local ou distant) qui s’affiche par défaut dans le panneau réduit. Vous
pouvez également basculer l’affichage du contenu dans le panneau Fichiers développé (utilisez
l’option Toujours afficher, voir Définition des préférences du panneau Fichiers, page 94).
Pour ouvrir ou fermer le panneau Fichiers :
• Choisissez Fenêtre > Fichiers.
Pour modifier la taille de la zone d’affichage dans le panneau Fichiers développé :
• Effectuez l’une des opérations suivantes lorsque le panneau Fichiers (Fenêtre > Fichiers) est
développé :
■ Faites glisser la barre séparant les volets gauche et droit pour modifier la taille de la zone
d’affichage du volet souhaité.
■ Utilisez les barres de défilement situées dans la partie inférieure du panneau Fichiers pour
faire défiler le contenu des volets.
Affichage de fichiers et de dossiers
91
■
Dans la carte du site, faites glisser la flèche au-dessus d’un fichier pour modifier l’espace
entre les fichiers.
Pour développer ou réduire le panneau Fichiers (sites Dreamweaver uniquement) :
• Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez sur le bouton Développer/Réduire dans
la barre d’outils.
Remarque : Si vous cliquez sur le bouton Développer/Réduire pour développer le panneau alors
qu’il est ancré, celui-ci s’agrandit et vous empêche de travailler dans la fenêtre de document. Pour
revenir à la fenêtre de document, cliquez de nouveau sur le bouton Développer/Réduire afin de
réduire le panneau. Si vous cliquez sur le bouton Développer/Réduire pour développer le panneau
alors qu’il n’est pas ancré, vous pouvez poursuivre votre travail dans la fenêtre de document. Avant
de pouvoir ancrer de nouveau le panneau, vous devez le réduire.
Dans sa forme réduite, le panneau Fichiers affiche le contenu du site local, du site distant ou du
serveur d’évaluation sous la forme d’une liste de fichiers. Sous sa forme développée, le panneau
affiche le site local et soit le site distant, soit le serveur d’évaluation. Le panneau Fichiers peut
également afficher une carte visuelle du site local.
Pour modifier l’affichage du site dans le panneau Fichiers, effectuez l’une des opérations
suivantes (site Dreamweaver uniquement) :
• Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, sélectionnez
Affichage local, Affichage distant, Serveur d’évaluation ou Affichage de la carte dans le menu
contextuel (où la vue actuelle s’affiche).
Remarque : L’option Affichage local apparaît par défaut dans le menu déroulant.
• Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme développée, cliquez sur le
bouton Fichiers du site (pour le site distant), Serveur d’évaluation ou Carte du site dans la
barre d’outils.
Serveur d’é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’évaluation, vous devez le
configurer (voir Configuration d’un dossier distant, page 70 ou Définition du dossier de traitement des
pages dynamiques, page 474). Avant de pouvoir afficher une carte du site, vous devez avoir configuré
une page d’accueil (voir Affichage d’une carte de site, page 98).
Rubriques connexes
• Accès aux sites, à 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étails de fichiers et de dossiers affichés dans la forme
développée du panneau Fichiers
Lorsqu’un site Dreamweaver est affiché dans le panneau Fichiers (en mode développé) (voir
Affichage de fichiers et de dossiers, page 91), Dreamweaver affiche dans des colonnes les
informations liées aux fichiers et dossiers. Vous pouvez, par exemple, consulter le type du fichier
ou la date de sa dernière modification.
Vous pouvez personnaliser les colonnes en procédant de l’une des façons suivantes (certaines
opérations sont disponibles uniquement pour les colonnes que vous ajoutez, et non pas pour les
colonnes par défaut) :
•
•
•
•
•
•
•
Retrier ou réaligner les colonnes
Ajouter des colonnes (jusqu’à 10 colonnes maximum)
Masquer les colonnes (sauf la colonne des noms de fichiers)
Définir les colonnes devant être partagées entre tous les utilisateurs connectés à un site
Supprimer les colonnes (colonnes personnalisées uniquement)
Renommer les colonnes (colonnes personnalisées uniquement)
Associer à une Design Note (colonnes personnalisées uniquement)
Pour effectuer un tri en fonction d’une colonne dans le panneau Fichiers :
• Pour trier les listes, cliquez sur l’en-tête de la colonne en fonction de laquelle vous souhaitez
effectuer le tri.
Conseil : Si vous cliquez plusieurs fois sur un même en-tête de colonne, l’ordre dans lequel
Dreamweaver trie la colonne est inversé (ordre croissant ou décroissant).
Pour ajouter, supprimer ou modifier des colonnes :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
3 Sélectionnez Colonnes en mode Fichier dans la liste de catégories, à gauche.
Affichage de fichiers et de dossiers
93
La boîte de dialogue Définition du site affiche les options Colonnes en mode Fichier.
4 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
5 Cliquez sur OK.
Gestion de fichiers et de dossiers dans le panneau Fichiers
Vous pouvez organiser et gérer les fichiers et dossiers de votre site, qu’ils soient intégrés à un site
Dreamweaver situé sur un serveur auquel vous êtes connecté ou qu’ils se trouvent sur un disque
local ou votre bureau.
Remarque : Dans les versions précédentes de Dreamweaver, le panneau Fichiers s’appelait le
panneau Site.
Rubriques connexes
• Accès aux sites, à un serveur et aux disques locaux, page 88
• Affichage de fichiers et de dossiers, page 91
Définition des préférences du panneau Fichiers
Sélectionnez vos préférences pour le contrôle des fonctions de transfert de fichiers dans le panneau
Fichiers.
94
Chapitre 4 : Gestion des fichiers
Pour modifier les préférences du panneau Fichiers :
1 Sélectionnez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Site dans la liste de gauche.
Les options des préférences Site s’affichent.
3 Modifiez les options de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Conseil : Vous pouvez définir si les types de fichiers transférés doivent l’être au format ASCII (texte)
ou binaire, et ce en personnalisant le fichier FTPExtensionMap.txt situé 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éplacer ou supprimer des fichiers ; ou
encore actualiser le panneau Fichiers après avoir modifié les fichiers.
Pour les sites Dreamweaver, vous pouvez également identifier les fichiers (sur le site local ou
distant) mis à 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être > Fichiers), sé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électionnez le fichier à ouvrir.
3 Procédez de l’une des manières suivantes :
■ Double-cliquez sur l’icône du fichier.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur l’icône du fichier, puis choisissez Ouvrir.
Le fichier s’ouvre dans la fenêtre de document de Dreamweaver.
Gestion de fichiers et de dossiers dans le panneau Fichiers
95
Pour créer un nouveau fichier ou un nouveau dossier :
1 Sélectionnez un fichier ou un dossier dans le panneau Fichiers (Fenêtre > Fichiers).
Dreamweaver crée le fichier ou le dossier dans le dossier sélectionné actuellement ou dans le
même dossier que celui dans lequel le fichier sélectionné se trouve.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis sélectionnez Nouveau fichier ou Nouveau dossier.
3 Saisissez le nom du nouveau fichier ou dossier.
4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Pour supprimer un fichier ou un dossier :
1 Sélectionnez le fichier à supprimer dans le panneau Fichiers (Fenêtre > Fichiers).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Supprimer.
Pour renommer un fichier ou un dossier :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le fichier ou le dossier à renommer.
2 Procédez de l’une des maniè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ée (Macintosh) sur l’icône du fichier, puis sélectionnez Renommer.
3 Saisissez le nouveau nom à la place du nom existant.
4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
■
■
Pour déplacer un fichier ou un dossier :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le fichier ou le dossier à déplacer.
2 Procédez de l’une des manières suivantes :
Copiez le fichier ou le dossier, puis collez-le à 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 à son nouvel emplacement.
■
Pour actualiser le contenu du panneau Fichiers, effectuez l’une des opérations suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncé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 à Dreamweaver.
Rubriques connexes
• Affichage de fichiers et de dossiers, page 91
• Accès aux sites, à un serveur et aux disques locaux, page 88
• Définition des préfé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électionnés,
ouverts, extraits ou modifiés récemment dans votre site. Vous pouvez également rechercher les
fichiers les plus récents dans votre site local ou distant.
Pour localiser un fichier ouvert dans votre site :
1 Ouvrez le fichier dans la fenêtre de document.
2 Sélectionnez Site > Repérer dans le site.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Remarque : Si le fichier ouvert dans la fenêtre de document n’est pas associé au site actuel affiché
dans le panneau Fichiers, Dreamweaver tente de déterminer à quel site Dreamweaver le fichier
appartient. S’il ne correspond qu’à un seul site local, Dreamweaver ouvre ce site dans le panneau
Fichiers, puis met le fichier en surbrillance.
Pour localiser et sélectionner des fichiers extraits dans un site Dreamweaver :
• Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu
Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier >
Sélectionner les fichiers extraits.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Pour rechercher un fichier sélectionné dans votre site local ou distant :
1 Sélectionnez le fichier depuis l’affichage local ou distant du panneau Fichiers (Fenêtre >
Fichiers).
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis sélectionnez Retrouver sur le site local ou Retrouver sur le site distant (selon
l’emplacement où le fichier a été sélectionné).
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Pour localiser et sélectionner des fichiers qui sont plus récents sur le site local que sur le site
distant :
• Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu
Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier >
Sélectionner Local plus récent.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Pour localiser et sélectionner des fichiers qui sont plus récents sur le site distant que sur le
site local :
• Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu
Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier >
Sélectionner Distant plus récent.
Dreamweaver sélectionne les fichiers dans le panneau Fichiers.
Gestion de fichiers et de dossiers dans le panneau Fichiers
97
Pour rechercher les fichiers récemment modifiés sur votre site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu
Options dans le coin supérieur droit du panneau Fichiers, puis sélectionnez Modifier >
Sélectionner Modifiés récemment.
La boîte de dialogue Sélectionner Modifiés récemment s’affiche.
2 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK pour enregistrer vos paramètres.
Dreamweaver sélectionne les fichiers modifiés durant la période sélectionnée dans le panneau
Fichiers.
Rubriques connexes
• Accès aux sites, à 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ônes liées. Ceci est connu sous le nom de carte de site. Utilisez cette carte pour ajouter de
nouveaux fichiers à un site Dreamweaver ou pour ajouter, modifier ou supprimer des liens.
La carte du site présente la structure du site sur deux niveaux en partant de la page d’accueil. Les
pages sont présentées sous la forme d’icônes et les liens sont affichés dans l’ordre où ils
apparaissent dans le code source.
La carte du site est idéale pour agencer la structure d’un site. Vous pouvez définir rapidement la
structure d’ensemble du site, puis cré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é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érer les sites pour définir le site en tant que site local (voir Configuration d’un dossier
local, page 68).
Rubriques connexes
• Lien vers des documents à l’aide de la carte graphique, page 336
Affichage d’une carte de site
Vous devez définir la page d’accueil du site avant de pouvoir en afficher la carte. Cette page
d’accueil peut correspondre à toute page du site (il n’est pas nécessaire que ce soit la page
principale du site). Dans le cas présent, la page d’accueil constitue simplement le point de départ
de la carte.
Pour définir la page d’accueil d’un site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sé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ée
(Macintosh) sur le fichier de votre choix, puis cliquez sur Définir comme page d’accueil pour
définir ce fichier comme page d’accueil.
98
Chapitre 4 : Gestion des fichiers
Remarque : Vous pouvez également définir la page d’accueil dans les options Mise en forme de la
carte du site dans la boîte de dialogue Dé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être > Fichiers), effectuez l’une des
opérations suivantes :
■ Dans le panneau Fichiers affiché sous sa forme réduite, sélectionnez Vue Carte du site dans le
menu contextuel Vue du site.
■
Dans le panneau Fichiers affiché sous sa forme développée, cliquez sur le bouton Carte du
site dans la barre d’outils, puis sé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 été définie ou si Dreamweaver ne trouve pas de page
intitulée index.html ou index.htm dans le site actuel (qu’il utilise alors comme page d’accueil),
Dreamweaver vous invite à sélectionner une page d’accueil.
Le panneau Fichiers affiche une carte du site présentant la structure du site sur deux niveaux.
Remarque : Par défaut, la carte du site n’affiche ni les fichiers masqués, ni les fichiers dé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ées sous le second niveau.
3 Attention aux couleurs présentes dans la carte du site :
■ Le texte affiché en rouge indique un lien brisé.
■ Le texte affiché en bleu et marqué d’une icône en forme de globe indique un fichier sur un
autre site ou un lien spé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é (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 à 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 à afficher, préciser si les
étiquettes des icônes doivent afficher le nom du fichier ou le titre de la page et indiquer si les
fichiers dépendants et masqués doivent être affichés.
Pour modifier la mise en forme de la carte du site :
1 Procédez de l’une des manières suivantes pour ouvrir la boîte de dialogue Définition du site :
Choisissez Site > Gérer les sites.
Dans le panneau Fichiers, sélectionnez Gérer les sites dans le menu contextuel où est affiché
le site, serveur ou disque dur.
La boîte de dialogue Gérer les sites s’affiche.
2 Cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
3 Sélectionnez la catégorie Mise en forme de la carte du site dans la liste de gauche.
La boîte de dialogue Dé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îte de dialogue.
5 Cliquez sur OK pour fermer la boîte de dialogue Définition du site.
100
Chapitre 4 : Gestion des fichiers
6 Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites, le cas éché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électionner des pages, ouvrir une page
pour la modifier, ajouter des pages au site, créer des liens entre les fichiers et modifier le titre des
pages.
Pour sélectionner plusieurs pages dans la carte du site, procédez de l’une des manières
suivantes :
• Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série de pages consécutives.
• En partant d’une partie vierge de l’affichage, faites glisser le curseur autour d’un groupe de
•
fichiers pour les sélectionner.
Cliquez en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour
sélectionner des pages non consécutives.
Pour ouvrir une page à modifier dans la carte du site, procédez de l’une des manières
suivantes :
• Double-cliquez sur le fichier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) sur l’icône du fichier, puis choisissez Ouvrir.
Pour ajouter un fichier existant au site, procédez de l’une des maniè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ée au site et un lien est créé 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ée
(Macintosh) sur le fichier de la carte du site, sélectionnez Lier au fichier existant, puis
recherchez le fichier.
Pour créer un fichier et ajouter un lien à la carte du site :
1 Sé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ée
(Macintosh), puis sélectionnez Lier au nouveau fichier.
La boî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ême dossier que le fichier sélectionné. Si vous
ajoutez un fichier à une branche masquée, le fichier est également masqué (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é dans
l’angle supérieur droit du panneau Fichiers réduit, puis en sélectionnant Fichier > Renommer
Affichage > Afficher les titres des pages.
2 Sélectionnez un fichier dans la carte du site, puis procédez de l’une des manières suivantes :
Cliquez sur le titre. Lorsque le titre devient modifiable, saisissez un nouveau titre.
Cliquez sur le menu Options situé dans l’angle supérieur droit, puis sélectionnez Fichier >
Renommer.
3 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) après avoir tapé le nouveau
nom.
■
■
Remarque : Lorsque vous travaillez dans le panneau Fichiers, Dreamweaver met automatiquement à
jour tous les liens vers les fichiers renommés.
Pour utiliser une nouvelle page d’accueil dans la carte du site, procédez de l’une des
manières suivantes :
• Dans l’affichage local du panneau Fichiers, sélectionnez un fichier, cliquez avec le bouton droit
•
de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez
Définir comme page d’accueil.
Dans le panneau Fichiers, sélectionnez Gérer les sites dans le menu contextuel où est affiché le
site, serveur ou disque dur, puis cliquez sur Modifier. Choisissez Mise en forme de la carte du
site parmi les catégories répertoriées dans la boîte de dialogue Définition du site. Recherchez la
nouvelle page d’accueil, puis cliquez sur OK.
Pour mettre à jour l’affichage de la carte du site après avoir effectué des changements :
1 Cliquez n’importe où dans la carte du site afin de désé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ésentation de la carte du site de façon à afficher ou masquer les fichiers
masqués et dépendants. Ceci est utile pour mettre l’accent sur des rubriques ou des éléments de
contenu importants et ne pas présenter des éléments de moindre intérêt.
102
Chapitre 4 : Gestion des fichiers
Pour masquer un fichier en utilisant la carte du site, vous devez d’abord le marquer comme étant
masqué. Lorsque vous masquez un fichier, ses liens sont également masqués. Lorsque vous
affichez un fichier masqué, son icône et ses liens sont visibles dans l’affichage de la carte du site,
mais les noms s’affichent en italique.
Remarque : Par défaut, les fichiers dépendants sont déjà masqués.
Pour marquer des fichiers comme étant masqués dans la carte du site :
1 Dans la fenêtre de document, sélectionnez un ou plusieurs fichiers.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis sélectionnez Afficher/masquer le lien.
Pour désactiver le marquage de fichiers marqués comme étant masqués dans la carte du
site :
1 Dans la fenêtre de document, sélectionnez un ou plusieurs fichiers.
2 Procédez de l’une des manières suivantes :
■
■
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) dans la carte du site, puis sélectionnez Afficher/masquer le lien.
Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le
menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Afficher les
fichiers identifiés comme masqués.
Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le
menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Afficher/Masquer
le lien.
Pour afficher ou masquer des fichiers indiqués comme masqués dans la carte du site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu
Options dans le coin supérieur droit.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Affichage > Afficher les fichiers identifiés comme masqués.
Choisissez Affichage > Mise en forme pour ouvrir la boîte de dialogue Définition du site,
puis sélectionnez l’option Afficher les fichiers identifiés comme masqués.
Pour afficher les fichiers dépendants dans la carte du site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu
Options dans le coin supérieur droit.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Affichage > Afficher les fichiers dépendants.
Choisissez Affichage > Mise en forme pour ouvrir la boîte de dialogue Définition du site,
puis sélectionnez l’option Afficher les fichiers dé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 à partir d’une branche
Vous pouvez afficher les détails d’une section spécifique d’un site en faisant d’une branche le
centre de la carte du site.
Pour afficher une branche différente dans la carte du site :
1 Sélectionnez la page à afficher.
2 Procédez de l’une des manières suivantes :
■
■
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) dans la carte du site, puis sélectionnez Afficher comme racine.
Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le
menu Options dans le coin supérieur droit, puis sélectionnez Affichage > Afficher comme
racine.
La carte du site est retracée dans la fenêtre comme si la page spécifiée était à la racine du site. La
zone Navigation dans le site, au-dessus de la carte du site, affiche le chemin de la page spécifiée
par rapport à la page d’accueil. Sélectionnez un élément du chemin pour afficher la carte du site à
partir de ce niveau en cliquant dessus.
Pour développer et ré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 à
partir d’un éditeur d’image.
Pour créer un fichier d’image de la carte du site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers) affiché sous sa forme réduite, cliquez sur le menu
Options dans le coin supérieur droit, puis sélectionnez Fichier > Enregistrer la carte du site.
La boî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électionnez l’emplacement où 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éimporter
dans Dreamweaver. Cela vous permet de déplacer des sites entre plusieurs ordinateurs et versions
de produit ainsi que de les partager avec d’autres utilisateurs.
Conseil : Pensez à exporter régulièrement vos sites, de façon à disposer d’une copie de sauvegarde
en cas de problème.
Pour exporter un site :
1 Sélectionnez Site > Gérer les sites.
2
3
4
5
La boîte de dialogue Gérer les sites s’affiche.
Cliquez sur le bouton Exporter.
La boîte de dialogue Exporter le site s’affiche.
Recherchez et sélectionnez l’emplacement où enregistrer le site.
Cliquez sur Enregistrer.
Dreamweaver enregistre le site en tant que fichier XML en lui attribuant l’extension STE et le
place à l’endroit indiqué.
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Pour importer un site :
1 Sélectionnez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Cliquez sur le bouton Importer.
La boîte de dialogue Importer le site s’affiche.
3 Recherchez le site à importer (enregistré en tant que fichier XML), puis sélectionnez-le.
Remarque : Pour pouvoir importer un site, vous devez d’abord l’avoir exporté depuis
Dreamweaver, qui l’enregistre en tant que fichier XML.
4 Cliquez sur Ouvrir.
Dreamweaver importe le site, dont le nom apparaît dans la boîte de dialogue Gérer les sites.
5 Cliquez sur Terminé pour fermer la boîte de dialogue Gé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és par cette opération.
Remarque : Si vous supprimez un site de votre liste de sites, toutes les informations sur la
configuration de ce site sont définitivement effacées.
Pour retirer un site de la liste des sites :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Sélectionnez le nom du site.
3 Cliquez sur Supprimer.
Une boî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ît de la liste lorsque vous cliquez sur Oui.
5 Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Archivage et extraction de fichiers
Si vous travaillez en équipe, le système d’archivage et d’extraction vous permet de vérifier les
fichiers entrants et sortants du serveur local et du serveur distant.
Si vous êtes la seule personne à travailler sur le serveur distant, vous pouvez utiliser les commandes
Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à les extraire (voir
Acquisition et placement de fichiers depuis ou vers votre serveur, page 109).
Rubriques connexes
• Système d’archivage et d’extraction de fichiers, page 86
Configuration du système d’archivage et d’extraction de fichiers
Pour utiliser le système d’archivage et d’extraction, vous devez associer votre site local à un serveur
distant (voir Configuration d’un dossier distant, page 70).
Pour configurer le système d’archivage et d’extraction de fichiers :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
3 Sélectionnez la catégorie Infos distantes dans la liste de gauche.
106
Chapitre 4 : Gestion des fichiers
La boîte de dialogue Définition du site affiche les options des Infos distantes. La section
Archiver/Extraire apparaît dans la partie inférieure de la boîte de dialogue.
Remarque : Si vous ne voyez pas les options Archiver/Extraire, cela signifie que vous n’avez pas
configuré le serveur distant (voir Configuration d’un dossier distant, page 70).
4 Complétez la section Archiver/Extraire.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
5 Cliquez sur OK.
Rubriques connexes
• Systè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ème d’archivage et d’extraction défini (voir Configuration du systè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être de document.
Pour extraire des fichiers à l’aide du panneau Fichiers :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à extraire du serveur
distant.
Remarque : Vous pouvez sélectionner des fichiers dans l’affichage du site local ou distant mais
pas dans la vue Serveur d’évaluation.
Une coche de couleur rouge indique qu’un autre membre de l’équipe dispose du fichier extrait.
Un symbole représentant un cadenas indique que le fichier est en lecture seule (Windows) ou
verrouillé (Macintosh).
2 Procédez de l’une des maniè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ée (Macintosh), puis choisissez Extraire dans le menu contextuel.
La boîte de dialogue Fichiers dépendants s’affiche.
3 Cliquez sur Oui si vous souhaitez télécharger les fichiers dépendants associés aux fichiers
sélectionnés ou sur Non si vous ne voulez pas les télécharger.
■
Remarque : D’une manière générale, il est conseillé de télécharger les fichiers dépendants
lorsque le fichier extrait est un nouveau fichier, mais c’est inutile si les versions les plus récentes
des fichiers dépendants sont déjà présentes sur le disque local.
Une coche de couleur verte apparaît en regard de l’icône du fichier local pour signaler que vous
l’avez extrait.
Pour archiver des fichiers à l’aide du panneau Fichiers :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers extraits ou sélectionnez
de nouveaux fichiers.
Remarque : Vous pouvez sélectionner des fichiers dans l’affichage du site local ou distant mais
pas dans la vue Serveur d’évaluation.
2 Procédez de l’une des maniè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ée (Macintosh), puis choisissez Archiver dans le menu contextuel.
La boîte de dialogue Fichiers dépendants s’affiche.
3 Cliquez sur Oui si vous souhaitez télécharger les fichiers dépendants associés aux fichiers
sélectionnés ou sur Non si vous ne voulez pas les télécharger.
■
Remarque : Il est en général conseillé de transférer les fichiers dépendants lorsque vous archivez
un nouveau fichier, mais si les versions les plus récentes des fichiers dépendants figurent déjà sur
le serveur distant, il n’est pas utile de les transférer à nouveau.
Un cadenas apparaît en regard de l’icône du fichier local pour indiquer que ce dernier n’est
désormais accessible qu’en lecture seule.
Pour archiver ou extraire un fichier ouvert à partir de la fenêtre de document :
1 Assurez-vous que le fichier à archiver ou à extraire est actif dans la fenêtre de document.
Remarque : Vous ne pouvez archiver qu’un seul fichier ouvert à la fois.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Site > Archiver ou Site > Extraire.
Dans la barre d’outils de la fenêtre de document, cliquez sur l’icône Gestion des fichiers,
puis choisissez Archiver ou Extraire dans le menu déroulant.
Remarque : Si le fichier actuel n’est pas associé au site sélectionné dans le panneau Fichiers,
Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si ce
fichier n’appartient qu’à un seul site local, Dreamweaver ouvre ce site, puis effectue l’opération
d’archivage ou d’extraction.
Si vous extrayez le fichier actif, la version ouverte du fichier est écrasée par la nouvelle version
extraite. Si vous archivez le fichier actif, il se peut que ce fichier soit automatiquement enregistré
avant d’être archivé, selon les options définies dans les préférences (voir Définition des préférences
du panneau Fichiers, page 94).
108
Chapitre 4 : Gestion des fichiers
Rubriques connexes
• Système d’archivage et d’extraction de fichiers, page 86
• Configuration du systè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écidez de ne pas le modifier (ou si vous décidez
d’éliminer les modifications que vous avez apportées), vous pouvez annuler l’opération
d’extraction. Le fichier reprend alors son état d’origine.
Pour annuler l’extraction d’un fichier, procédez de l’une des façons suivantes :
• Ouvrez le fichier dans la fenêtre de document, puis sélectionnez Site > Annuler extraction.
• Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Annuler l’extraction.
La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez
apportées sont perdues.
Rubriques connexes
• Système d’archivage et d’extraction de fichiers, page 86
• Configuration du systè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ème d’extraction et d’archivage
pour transférer des fichiers entre le serveur distant et l’ordinateur local (voir Archivage et extraction
de fichiers, page 106). Si vous êtes la seule personne à travailler sur le site distant, vous pouvez
utiliser les commandes Acquérir et Placer pour transférer des fichiers sans avoir à les archiver ou à
les extraire.
Acquisition de fichiers depuis un serveur distant
La commande Acquérir permet de copier les fichiers du site distant sur le site local. Vous pouvez
utiliser le panneau Fichiers ou la fenêtre du document pour acquérir des fichiers.
Dreamweaver enregistre l’activité 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 à déterminer le
problème.
Pour acquérir des fichiers depuis un serveur distant via le panneau Fichiers :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers que vous voulez
télécharger.
Les fichiers sont généralement sélectionnés dans l’affichage distant, mais il est également
possible de les sélectionner dans l’affichage local. Si l’affichage distant est actif, Dreamweaver
copie les fichiers sélectionnés sur le site local ; si l’affichage local est actif, Dreamweaver copie la
version distante des fichiers locaux sélectionnés sur le site local.
Remarque : Pour n’acquérir que les fichiers dont la version distante est plus ré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édez de l’une des manières suivantes pour acquérir un fichier:
Cliquez sur le bouton Acqué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ée (Macintosh) sur le fichier dans le panneau Fichiers, puis sélectionnez Acquérir
dans le menu contextuel.
La boîte de dialogue Fichiers dépendants s’affiche.
3 Pour télécharger également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez sur
Non.
■
■
Remarque : Si vous disposez déjà de copies locales des fichiers dépendants, cliquez sur Non.
Dreamweaver télécharge les fichiers sélectionnés comme suit :
■ Si vous utilisez le système d’archivage et d’extraction, l’obtention d’un fichier consistera à
transférer une copie locale accessible en lecture seule. Le fichier reste disponible sur le site
distant ou sur le serveur d’évaluation et peut être extrait par d’autres membres de l’équipe
(voir Archivage et extraction de fichiers, page 106).
■ Si vous n’utilisez pas le système d’archivage et d’extraction, l’obtention d’un fichier
consistera à transférer une copie accessible en lecture et écriture.
Remarque : Si vous travaillez en équipe et que d’autres personnes sont susceptibles de travailler
sur les mêmes fichiers, ne désactivez pas l’option Activer l’archivage et l’extraction de fichier. De
plus, si d’autres personnes utilisent le système d’extraction et d’archivage sur le site, vous devez
l’utiliser également.
Pour interrompre à tout moment le transfert de fichier, cliquez sur le bouton Annuler dans la
boîte de dialogue d’état. Le transfert en cours peut ne pas s’interrompre immédiatement.
Pour acquérir un fichier d’un serveur distant via la fenêtre de document :
1 Assurez-vous que le document est actif dans la fenêtre du document.
2 Procédez de l’une des manières suivantes pour acquérir un fichier:
■
■
Choisissez Site > Acquérir.
Cliquez sur l’icône Gestion des fichiers dans la barre d’outils de la fenêtre du document,
puis sélectionnez Acquérir dans le menu contextuel.
Remarque : Si le fichier actuel n’est pas associé au site sélectionné dans le panneau Fichiers,
Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si ce
fichier courant n’appartient qu’à un seul site local, Dreamweaver ouvre ce site, puis effectue
l’opération d’acquisition.
Pour afficher le journal FTP :
• Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez
Affichage > Journal FTP du site.
Rubriques connexes
• Systè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’état d’extraction du fichier.
Il existe deux types de circonstances dans lesquels il est préférable d’utiliser la commande Placer
plutôt que la commande Archiver :
• Lorsque vous ne travaillez pas en équipe et que vous n’utilisez pas le système d’archivage et
d’extraction.
• Lorsque vous souhaitez placer la version actuelle du fichier sur le serveur, mais que vous allez
continuer à y apporter des modifications.
Remarque : Si vous placez un fichier qui n’existait pas encore sur le site distant et que vous utilisez
le système d’extraction et d’archivage, le fichier est copié sur le site distant, puis extrait pour vous
permettre de continuer à le modifier.
Vous pouvez utiliser le panneau Fichiers ou la fenêtre du document pour placer des fichiers.
Dreamweaver enregistre l’activité de tous les transferts de fichiers effectués via FTP. Si une erreur
se produit lors du transfert d’un fichier en FTP, le journal du site FTP peut vous aider à
déterminer le problème.
Pour placer des fichiers sur un serveur distant ou un serveur d’évaluation à l’aide du
panneau Fichiers :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez les fichiers à télécharger.
Les fichiers sont généralement sélectionnés dans la vue Site local, mais il est également possible
de les sélectionner dans la vue Site distant.
Remarque : Pour ne placer que les fichiers dont la version locale est plus récente que la version
distante, voir Synchronisation des fichiers entre le site local et le site distant, page 112.
2 Procédez de l’une des maniè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ée (Macintosh) sur le fichier dans le panneau Fichiers, puis sélectionnez Placer dans le
menu contextuel.
Si le fichier n’a pas encore été enregistré, il se peut qu’une boîte de dialogue s’ouvre (selon les
préférences définies dans la catégorie Site de la boîte de dialogue Préférences) pour vous
permettre de l’enregistrer avant de le placer sur le serveur distant.
3 Si une boîte de dialogue s’affiche, cliquez sur Oui pour enregistrer le fichier ou sur Non pour
placer la version précédemment enregistrée sur le serveur distant.
■
Remarque : Si vous n’enregistrez pas le fichier, aucune des modifications effectuées depuis le
dernier enregistrement ne sera placée sur le serveur distant. Toutefois, le fichier reste ouvert, ce
qui vous permet encore d’enregistrer les changements après avoir placé le fichier sur le serveur.
La boîte de dialogue Fichiers dépendants s’affiche.
4 Pour transférer également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez sur
Non.
Remarque : Si le site distant contient déjà des copies des fichiers dépendants, cliquez sur Non.
Pour interrompre le transfert de fichier, cliquez sur le bouton Annuler de la boîte de dialogue
d’état. Le transfert en cours peut ne pas s’interrompre immédiatement.
Acquisition et placement de fichiers depuis ou vers votre serveur
111
Pour placer des fichiers sur un serveur distant à l’aide de la fenêtre du document :
1 Assurez-vous que le document est actif dans la fenêtre du document.
2 Procédez de l’une des manières suivantes pour placer un fichier :
■
■
Choisissez Site > Placer.
Cliquez sur l’icône Gestion des fichiers dans la barre d’outils de la fenêtre du document,
puis sélectionnez Placer dans le menu contextuel.
Remarque : Si le fichier actuel n’est pas associé au site sélectionné dans le panneau Fichiers,
Dreamweaver tente de déterminer à quel site défini localement le fichier actuel appartient. Si ce
fichier courant n’appartient qu’à un seul site local, Dreamweaver ouvre ce site, puis effectue
l’opération de placement.
Pour afficher le journal FTP :
• Cliquez sur le menu Options dans le coin supérieur droit du panneau Fichiers, puis choisissez
Affichage > Journal FTP du site.
Rubriques connexes
• Systè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ès avoir créé 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éseau), la synchronisation
de vos fichiers s’effectuera en FTP.
Avant de synchroniser les sites, vous pouvez vérifier les fichiers à placer ou à acquérir sur le serveur
distant. Par ailleurs, une fois la synchronisation effectuée, Dreamweaver vous indique les fichiers
qui ont été mis à jour.
Pour identifier les fichiers qui sont plus récents sur le site local ou le site distant sans
effectuer de synchronisation, procédez de l’une des manières suivantes :
• Dans le panneau Fichiers, cliquez sur le menu Options dans le coin supérieur droit, puis
sélectionnez Edition > Sélectionner locaux plus récents ou Edition > Sélectionner distants plus
récents, dans le menu contextuel.
• Dans le panneau Fichiers, cliquez avec le bouton droit (Windows) ou en maintenant la touche
Ctrl enfoncée (Macintosh), puis choisissez Sélectionner > Sélectionner locaux plus récents ou
Sélectionner > Sélectionner distants plus récents.
Pour synchroniser vos fichiers :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu déroulant où
s’affiche le site, le serveur ou le disque dur.
2 (facultatif) Sélectionnez des fichiers ou des dossiers spécifiques.
112
Chapitre 4 : Gestion des fichiers
Si vous souhaitez synchroniser l’ensemble du site, ignorez cette étape.
3 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Synchroniser dans le menu contextuel.
La boîte de dialogue Synchroniser les fichiers s’affiche.
4 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Dreamweaver synchronise automatiquement les fichiers. Si les fichiers sont déjà synchronisés,
Dreamweaver vous informe qu’il n’est pas nécessaire de procéder à 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éfinir les dossiers et les types de fichiers du site que vous souhaitez
exclure de certaines opérations (acquisition et placement, par exemple).
Rubriques connexes
• Voilage de site, page 86
Activation et désactivation du voilage sur un site
Le voilage est activé par défaut sur un site. Vous pouvez le désactiver définitivement ou
provisoirement afin d’effectuer une opération sur tous les fichiers, y compris les fichiers voilés.
Lorsque vous désactivez le voilage sur un site, cela supprime tous les voiles des fichiers voilés.
Lorsque vous le réactivez, tous les fichiers qui étaient précédemment voilés retrouvent cet état.
Remarque : Vous pouvez également utiliser l’option Supprimer tous les voiles pour supprimer le
voilage de tous les fichiers, mais cela ne désactive pas le voilage. De plus, cette option ne vous
permet pas de rétablir automatiquement le voilage de tous les dossiers et fichiers qui étaient
auparavant voilés ; il vous faut ensuite redéfinir manuellement le voilage de chaque dossier et type de
fichier concerné.
Pour activer et désactiver le voilage sur un site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site dans le menu déroulant où
s’affiche le site, le serveur ou le disque dur.
2 Sélectionnez un fichier ou un dossier.
3 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis procédez de l’une des façons suivantes :
Voilage des dossiers et des fichiers du site
113
■
■
Sélectionnez Activer ou Désactiver le voilage.
Sélectionnez Paramètres, puis choisissez Voilage dans la liste des catégories située à gauche
de la boîte de dialogue Définition du site, onglet Avancé. Sélectionnez ou désélectionnez
Activer le voilage, puis cliquez sur OK.
Cela active ou dé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écifiques, mais pas tous les dossiers existants ou un site
entier. Il est toutefois possible de voiler plusieurs dossiers simultanément.
Pour voiler ou supprimer le voile de dossiers spécifiques au sein d’un site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché le site, le serveur ou le disque dur.
2 Sé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ée
(Macintosh), puis choisissez Voilage > Voiler ou Voilage > Supprimer le voile dans le menu
contextuel.
Une ligne rouge apparaît ou disparaît sur l’icône du dossier pour indiquer que le dossier est voilé
ou dévoilé.
Remarque : Vous pouvez effectuer une opération sur un dossier voilé précis en le sélectionnant dans
le panneau Fichiers, puis en effectuant l’opération voulue. Toute opération effectuée directement sur
un fichier ou un dossier annule le voilage.
Rubriques connexes
• Voilage de site, page 86
• Activation et dé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 à voiler afin que Dreamweaver voile tous les fichiers se
terminant d’une certaine manière. Ainsi pouvez-vous, par exemple, voiler tous les fichiers se
terminant par l’extension .txt. Les types de fichier indiqués ne doivent pas nécessairement
correspondre à des extensions de fichier ; il peut s’agir de n’importe quel élément apparaissant à la
fin d’un nom de fichier.
Pour voiler certains types de fichier au sein d’un site :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché 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ée
(Macintosh), puis choisissez Paramètres.
114
Chapitre 4 : Gestion des fichiers
La boîte de dialogue Définition du site affiche les options de voilage.
3 Activez la case à cocher Voiler les fichiers se terminant avec.
4 Saisissez les types de fichier à 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éparez chaque type par un espace ; n’utilisez ni
virgule ni point-virgule.
5 Cliquez sur OK.
Une ligne rouge apparaît sur les fichiers concernés pour indiquer qu’ils sont voilés.
Conseil : Certains logiciels créent des fichiers de sauvegarde se terminant par un suffixe donné, tel
que .bak. Vous pouvez voiler ces fichiers.
Remarque : Vous pouvez effectuer une opération sur un dossier voilé précis en le sélectionnant dans
le panneau Fichiers, puis en effectuant l’opération voulue. Toute opération effectué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être > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché 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ée
(Macintosh), puis sélectionnez Voilage > Paramètres.
La boîte de dialogue Définition du site s’ouvre et affiche l’onglet Avancé.
3 Procédez de l’une des manières suivantes :
■ Désactivez la case à cocher Voiler les fichiers se terminant avec pour supprimer le voile de
tous les types de fichier répertorié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és pour indiquer qu’ils ne sont plus voilés.
Rubriques connexes
• Voilage de site, page 86
• Activation et dé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ération.
Comme il est impossible d’annuler ce type d’opération, vous ne pourrez pas rétablir le voile de tous
les éléments qui étaient auparavant voilés. Vous devrez revoiler les élé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ésactivez le voilage sur le site (voir Activation et dé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être > Fichiers), sélectionnez un site pour lequel le voilage est
activé dans le menu contextuel où est affiché le site, le serveur ou le disque dur.
2 Sé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ée
(Macintosh), puis sélectionnez Voilage > Supprimer tous les voiles.
Remarque : Cela désactive également la case à cocher Voiler les fichiers se terminant avec, sous
Site > Voilage > Paramètres.
Les lignes rouges sur les icônes des dossiers et des fichiers disparaissent pour indiquer que tous les
fichiers et dossiers du site ne sont plus voilés.
Rubriques connexes
•
•
•
•
Voilage de site, page 86
Activation et dé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ées à un fichier mais sont conservées dans un fichier séparé. Les
Design Notes vous permettent de conserver des informations supplémentaires sur les documents,
telles que des commentaires sur l’état des fichiers ou le nom des fichiers source des images.
Rubriques connexes
• Design Notes, page 87
Activation et désactivation des Design Notes pour un site
L’activation et la désactivation des Design Notes pour un site donné s’effectuent depuis la
catégorie Design Notes de la boîte de dialogue Définition du site. Lorsque vous activez les Design
Notes, vous pouvez, si vous le souhaitez, décider de ne les utiliser que localement.
116
Chapitre 4 : Gestion des fichiers
Pour activer ou désactiver les Design Notes sur un site ou pour ne les utiliser que
localement :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
3 Sélectionnez la catégorie Design Notes dans la liste de gauche.
La boîte de dialogue Définition du site apparaît avec les options Design Notes.
4 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
5 Cliquez sur OK.
Rubriques connexes
• Design Notes, page 87
• Utilisation des Design Notes, page 118
Association de Design Notes à un fichier
Vous pouvez créer un fichier de Design Notes pour chaque document ou modèle de votre site.
Vous pouvez également créer des Design Notes pour des applets, des contrô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 à un fichier modèle, les documents que vous créez à
partir du modèle n’héritent pas des Design Notes.
Pour ajouter des Design Notes à un document :
1 Procédez de l’une des manières suivantes :
■
Ouvrez le fichier dans la fenêtre du document, puis sélectionnez Fichier > 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ée (Macintosh) sur le fichier, puis sélectionnez Design
Notes.
Remarque : Si le fichier se trouve sur un site distant, vous devez d’abord l’extraire ou l’acquérir,
puis le sé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îte de dialogue Design Notes s’ouvre.
2 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK pour enregistrer les notes.
Dreamweaver enregistre les notes au même endroit que le fichier en cours, dans un dossier portant
le nom « _notes ». 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 « index.html », le fichier de Design Notes
associé s’appellera « index.html.mno ».
Rubriques connexes
• Design Notes, page 87
• Activation et désactivation des Design Notes pour un site, page 116
Utilisation des Design Notes
Après avoir associé des Design Notes à un fichier (voir Association de Design Notes à un fichier,
page 117), vous pouvez ouvrir le fichier Design Notes, modifier son état ou le supprimer.
Pour ouvrir une Design Notes associée à un fichier, procédez de l’une des manières
suivantes :
• Ouvrez le fichier dans la fenêtre du document, puis sélectionnez Fichier > Design Notes.
• Dans le panneau Fichiers, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh) sur le fichier, puis sélectionnez Design Notes.
• Dans la colonne Notes du panneau Fichiers, double-cliquez sur l’icône jaune Design Notes.
Pour attribuer un état de Design Notes personnalisé :
1 Ouvrez les Design Notes du fichier ou de l’objet concerné (voir la procé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 état.
S’il existe déjà une valeur d’état, elle est remplacée par la nouvelle.
6 Cliquez sur l’onglet Infos de base et remarquez que la nouvelle valeur de l’état apparaît dans le
menu déroulant Etat.
Remarque : Vous ne pouvez avoir qu’une valeur personnalisée à la fois dans le menu d’état. Si vous
suivez cette procédure une nouvelle fois, Dreamweaver remplace la valeur de l’état saisie la première
fois par la nouvelle valeur.
Pour effacer de votre site des Design Notes non associées :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Sélectionnez le site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
3 Sélectionnez la catégorie Infos locales dans la liste de gauche.
4 Cliquez sur le bouton Nettoyer.
Dreamweaver vous invite alors à vérifier que tous les fichiers de Design Notes qui ne sont plus
associés à un fichier dans le site doivent bien être supprimés.
Si vous utilisez Dreamweaver pour supprimer un fichier auquel est associé un fichier de Design
Notes, Dreamweaver supprime également le fichier de Design Notes. En général, il ne peut
donc exister de fichiers de Design Notes orphelins que si vous supprimez ou renommez un
fichier à l’extérieur de Dreamweaver.
Remarque : Si vous désactivez l’option Gé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é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évisualisation de pages et la vérification de la compatibilité avec les navigateurs. Vous
pouvez également exécuter divers rapports pour, par exemple, repérer les liens brisés.
Instructions pour tester les sites
Avant de télécharger le site sur un serveur, et de le déclarer prêt à être diffusé, il convient de le
tester localement (en fait, il est judicieux de tester et de résoudre les problèmes de votre site
fréquemment au cours de son élaboration, afin de traiter les problèmes avant qu’ils ne s’aggravent
et de les empêcher de se répéter).
Test de votre site
119
Vous devez vous assurer que vos pages ont l’apparence et le fonctionnement désirés dans les
navigateurs ciblés, qu’il n’y a pas de liens rompus et que les pages ne sont pas trop longues à
télécharger. Vous pouvez également tester l’ensemble de votre site et y régler les problèmes
éventuels en effectuant un rapport de site.
Les conseils suivants vous aideront à garantir aux visiteurs de votre site une expérience positive :
• Assurez-vous que les pages fonctionnent comme prévu dans les navigateurs visés et qu’elles
•
•
•
•
•
•
•
120
« échouent élégamment » dans les autres.
Vos pages doivent être lisibles et fonctionnelles dans les navigateurs qui ne prennent pas en
charge les styles, les calques, les plug-ins ou les éléments JavaScript (voir Vérification de la
compatibilité du navigateur, page 448). Pour les pages qui ne s’affichent pas dans des
navigateurs anciens, songez à utiliser le comportement Vérifier le navigateur pour rediriger
automatiquement les visiteurs vers une autre page (voir Vé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é de constater les différences de présentation, de couleur, de
taille de police et de format de fenêtre par défaut, autant d’éléments qu’il est impossible de
prévoir lors de la vérification dans le navigateur cible (voir Aperçu et test de page dans les
navigateurs, page 283).
Vérifiez que le site ne contient pas de liens brisés (réparez-les s’il en contient).
Les autres sites étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers
lesquelles vos liens pointent soient déplacées ou supprimées. Vous pouvez exécuter un rapport
de vérification des liens pour les tester (voir Recherche de liens brisés, externes et orphelins,
page 350 et Correction des liens brisés, page 351).
Contrôlez la taille de vos pages et leur durée de téléchargement (voir Vérification des préférences
de durée et de la taille de téléchargement, page 284).
Pour les pages constitué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èrement chargé. Envisagez de
fragmenter les grands tableaux ; si c’est impossible, envisagez de placer du contenu, par
exemple un message de bienvenue ou une bannière publicitaire, en dehors du tableau, en haut
de la page, de manière à ce que les utilisateurs puissent au moins voir ce contenu pendant le
chargement du tableau
Effectuez quelques rapports sur le site pour tester et dépanner le site entier.
Vous pouvez rechercher sur le site entier d’éventuels problèmes, tels que des documents sans
nom, des balises vides ou des balises imbriquées redondantes (voir Test de votre site, page 119).
Validez votre code pour détecter toute erreur de balise ou de syntaxe (voir Validation de balises,
page 451).
Une fois que la plus grande partie du site a été publiée, continuez à le mettre à jour et à en
assurer la maintenance.
La publication d’un site peut être accomplie de différentes manières et constitue un processus
continu. La définition et l’implémentation d’un système de contrôle de version constituent une
partie importante du processus, que ce soit avec les outils intégrés à Dreamweaver ou par le
biais d’une application de contrôle de version externe.
Utilisez les forums de discussion Dreamweaver du site Web Macromedia à l’adresse
www.macromedia.com/go/dreamweaver_newsgroup.
Chapitre 4 : Gestion des fichiers
Vous y trouverez des informations nombreuses et précieuses sur les différents navigateurs,
plates-formes, etc. Vous pouvez également discuter de questions techniques et échanger des
informations utiles avec d’autres utilisateurs de Dreamweaver.
Utilisation des rapports pour tester votre site
Vous pouvez exécuter des rapports sur le déroulement du travail ou les attributs HTML du site,
comprenant des points comme l’accessibilité, pour le document actuel, les fichiers sélectionnés ou
le site complet.
Les rapports sur le déroulement du travail peuvent améliorer la collaboration entre les membres
d’une équipe Web. Ces rapports permettent de savoir qui a extrait un fichier, quels fichiers sont
associés à des Design Notes et quels fichiers ont été modifiés récemment. Vous pouvez définir
davantage les rapports des Design Notes en spécifiant des paramètres nom/valeur.
Remarque : Vous devez avoir défini une connexion à un site distant pour exécuter des rapports sur le
déroulement du travail. Pour définir un site distant, voir Configuration d’un dossier distant, page 70.
Les rapports HTML vous permettent de compiler et de générer des rapports pour plusieurs
attributs HTML. Vous pouvez contrôler les balises de polices imbriquées combinables,
l’accessibilité, les textes secondaires manquants, les balises imbriquées redondantes, les balises
vides amovibles et les documents sans nom.
Après avoir exécuté un rapport, vous pouvez l’enregistrer au format XML, puis l’importer dans un
modèle, une base de données ou une feuille de calcul et l’imprimer, ou encore l’afficher sur un site
Web.
Remarque : Vous pouvez également ajouter différents types de rapport à 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érifier les liens de votre site, voir Recherche de liens
brisés, externes et orphelins, page 350.
Test de votre site
121
Pour exécuter des rapports afin de tester un site :
1 Choisissez Site > Rapports.
Conseil : Si vous souhaitez uniquement exécuter un rapport d’accessibilité pour votre site,
sélectionnez Fichier > Vérifier la page > Vérifier l’accessibilité. Le rapport s’affiche alors dans le
panneau Rapports du site du groupe de panneaux Résultats.
La boîte de dialogue Rapports s’affiche.
2 Choisissez une catégorie sur laquelle effectuer un rapport et le type de rapport à exécuter.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur Exécuter pour créer le rapport.
Selon le type de rapport à exécuter, vous pouvez être invité à enregistrer votre fichier, à définir
votre site ou à sélectionner un dossier (si vous ne l’avez pas déjà fait).
Une liste de résultats apparaît dans le panneau Rapports du site (dans le groupe de panneaux
Résultats).
Pour utiliser et enregistrer un rapport :
1 Exécuter un rapport (voir la procédure précédente).
2 Dans le panneau Rapports du site, effectuez l’une des opérations suivantes pour consulter le
rapport :
■ Cliquez sur l’en-tête de la colonne en fonction de laquelle vous souhaitez effectuer le tri des
résultats.
Vous pouvez trier les résultats par nom de fichier, numéro de ligne ou description. Vous
pouvez également exécuter plusieurs rapports et garder les différents rapports ouverts.
■ Sélectionnez une ligne quelconque du rapport, puis cliquez sur le bouton Plus d’infos situé à
gauche du panneau Rapports du site pour obtenir la description du problème.
Les informations s’affichent dans le panneau Référence (dans le groupe de panneaux Code).
■ Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant
dans la fenêtre de document.
122
Chapitre 4 : Gestion des fichiers
Remarque : Si vous vous trouvez en mode Création, Dreamweaver passe à un affichage à
deux volets et indique le problème identifié directement dans le code.
3 Cliquez sur Enregistrer le rapport.
Lorsque vous enregistrez un rapport, vous pouvez l’importer dans un fichier modèle existant.
Vous pouvez alors soit importer le fichier dans une base de données ou un tableur puis
l’imprimer, soit l’afficher sur un site Web.
Conseil : Après avoir exécuté les rapports HTML, utilisez la commande Nettoyer HTML pour
corriger les erreurs HTML signalé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èques
A mesure que vous développez des sites Web, vous assemblez un nombre croissant d’actifs. Dans
certains cas, vous pouvez utiliser les mêmes actifs dans plusieurs sites ou recourir à un groupe
d’actifs favoris dans tous vos sites. Macromedia Dreamweaver MX 2004 permet de gérer les actifs
de votre site. Vous pouvez répertorier et prévisualiser certains types d’actifs inclus dans un site,
notamment les images, les animations, les couleurs, les scripts et les liens. Vous pouvez également
faire glisser un actif directement vers votre document actuel pour l’insérer dans une page.
Dreamweaver permet également d’accéder à deux types d’actifs spéciaux : les bibliothèques et les
modèles. Les éléments de bibliothèque et les modèles sont des actifs liés : lorsqu’une modification
est apportée à un élément de bibliothèque ou à un modèle, l’ensemble des documents contenant
cet actif sont mis à jour. Les éléments de bibliothèque constituent des éléments de conception
individuels, tels que les informations de copyright d’un site ou un logo. Les modèles permettent
de définir la conception de zones plus larges. Pour plus d’informations, voir Chapitre 11, Gestion
des modèles, page 225.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
A propos des éléments de bibliothèque, page 125
Utilisation des actifs, page 127
Création et gestion d’une liste d’actifs favoris, page 133
Utilisation des éléments de bibliothèque, page 135
A propos des éléments de bibliothèque
Une bibliothèque est un fichier Dreamweaver spécifique regroupant l’ensemble des actifs
individuels ou copies d’actifs créés en vue d’une insertion dans des pages Web. Ces actifs présents
dans une bibliothèque portent le nom d’éléments de bibliothèque. Vous pouvez mettre à jour
toutes les pages qui utilisent un élément de bibliothèque chaque fois que vous modifiez le contenu
de l’élément. Vous pouvez stocker divers types d’éléments de page dans une bibliothèque : images,
tableaux, sons, animations Flash, etc.
125
Voici un exemple de la façon dont vous pouvez utiliser un élément de bibliothèque. Supposons
que vous construisiez un site de grande taille pour une société. Cette société souhaite que son
slogan apparaisse sur chaque page du site. Or, le service marketing n’a pas encore finalisé le texte
du slogan. Si vous créez un élément de bibliothèque destiné à contenir le slogan et utilisez cet
élément sur chaque page, vous pourrez, lorsque le service de marketing vous communiquera le
slogan définitif, modifier l’élément de bibliothèque et automatiquement mettre à jour chaque
page sur laquelle il figure.
Dreamweaver stocke les éléments de la bibliothèque dans un dossier nommé Library, au sein du
dossier racine local de chaque site. Chaque site possède sa propre bibliothèque.
Remarque : Si l’élément de bibliothèque contient des liens, ils ne fonctionneront pas nécessairement
sur le nouveau site. En outre, les images d’un élément de bibliothèque ne sont pas copiées vers le
nouveau site.
Lorsque vous utilisez un élément de bibliothèque, Dreamweaver n’insère pas l’élément lui-même
dans la page Web mais un lien vers cet élément. Cela signifie que Dreamweaver insère une copie
du code source HTML pour cet élément dans le document et ajoute un commentaire HTML
contenant une référence à l’élément externe original.
La référence à l’élément de bibliothèque externe rend possible la mise à jour du contenu d’un site
entier en une seule fois, en modifiant l’élément de bibliothèque et en utilisant les commandes de
mise à jour du menu Modifier > Bibliothèque. Si, par la suite, vous souhaitez apporter des
modifications (texte ou image par exemple), la mise à jour de la bibliothèque entraîne
automatiquement celle de l’instance de la bibliothèque dans toutes les pages où l’élément de
bibliothèque a été inséré.
Lorsque vous créez un élément de bibliothèque comportant un élément auquel est attaché un
comportement Dreamweaver, ce dernier copie l’élément et son gestionnaire d’événements
(l’attribut qui spécifie l’événement déclenchant l’action tel que onClick, onLoad ou
onMouseOver et l’action à appeler lorsque l’événement se produit) dans le fichier de l’élément de
bibliothèque. Dreamweaver ne copie pas les fonctions JavaScript associées dans l’élément de la
bibliothèque. Au lieu de cela, lorsque vous insérez l’élément de bibliothèque dans un document,
Dreamweaver insère automatiquement les fonctions JavaScript appropriées dans la section head
de ce document (si elles ne s’y trouvent pas déjà).
Remarque : Si vous rédigez manuellement le code JavaScript (c’est-à-dire si vous le créez sans
utiliser de comportements Dreamweaver), vous pouvez l’intégrer à votre élément de bibliothèque à
l’aide du comportement Appel JavaScript pour exécuter le code. Si vous n’utilisez pas de
comportement Dreamweaver pour exécuter le code, le code n’est pas conservé dans l’élément de
bibliothèque.
La modification des comportements dans les éléments de bibliothèque doit respecter certaines
conditions (voir Modification d’un comportement dans un élément de bibliothèque, page 141). Les
éléments de bibliothèque ne peuvent pas contenir de feuilles de style, car le code associé à ces
éléments figure dans la section HEAD.
Rubriques connexes
• Utilisation des éléments de bibliothèque, page 135
126
Chapitre 5 : Gestion des actifs de site et des bibliothèques
Utilisation des actifs
Le terme actif désigne un certain nombre d’éléments utilisés dans un site, tels qu’un fichier
d’image ou d’animation.
Vous pouvez obtenir des actifs à partir de différentes sources. Par exemple, vous pouvez créer des
actifs dans une application, telle que Macromedia Fireworks ou Macromedia Flash, les recevoir
d’un collègue, les copier à partir d’un CD-ROM de graphiques ou encore les copier à partir d’un
site Web d’images.
Rubriques connexes
• Création et gestion d’une liste d’actifs favoris, page 133
• Utilisation des éléments de bibliothèque, page 135
Visualisation des actifs dans le panneau Actifs
Vous pouvez afficher et gérer les actifs dans le site actuel à l’aide du panneau Actifs. Ce dernier
présente les actifs du site associés au document actif dans la fenêtre du document.
Remarque : Vous devez dé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ésente tous les actifs de votre site, y compris les couleurs et adresses URL utilisées
dans les documents de votre site.
La liste Favoris
affiche uniquement les actifs explicitement sélectionnés.
Dans ces deux listes, les actifs sont répartis en catégories (sur le côté gauche du panneau Actifs).
Les listes Site et Favoris sont toutes deux disponibles pour toutes les catégories d’actifs à l’exception
des modèles et éléments de bibliothèque.
Remarque : La plupart des fonctions du panneau Actifs peuvent être utilisées à la fois dans les listes
Site et Favoris. Toutefois, il existe quelques tâches qui ne peuvent être réalisées que dans la liste
Favoris (voir Création et gestion d’une liste d’actifs favoris, page 133).
Par défaut, les actifs d’une catégorie donnée sont répertoriés suivant leur nom dans l’ordre
alphabétique. Vous pouvez également trier les actifs suivant plusieurs autres critères ou modifier la
taille des colonnes. Vous pouvez également prévisualiser les actifs d’une catégorie et modifier la
taille de la zone d’aperçu.
Utilisation des actifs
127
Pour ouvrir le panneau Actifs :
• Choisissez Fenêtre > Actifs
Le panneau Actifs s’affiche. La catégorie Images est sélectionnée par défaut.
Pour afficher la liste Site:
• Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez l’option Site située en haut du panneau.
Remarque : Dans les catégories Modèles et Bibliothèques (sur le côté gauche du panneau
Actifs), les options Site et Favoris ne sont pas disponibles.
Pour afficher la liste Favoris:
• Dans le panneau Actifs (Fenêtre > Actifs), sé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égories Modèles et Bibliothèques (sur le côté gauche du panneau
Actifs), les options Site et Favoris ne sont pas disponibles.
Pour afficher les actifs d’une catégorie spécifique :
• Cliquez sur l’icône appropriée sur le côté gauche du panneau Actifs (Fenêtre > Actifs).
Pour répertorier les actifs dans un ordre différent :
• Cliquez sur l’un des en-tê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ête de la colonne Type.
Pour modifier la largeur d’une colonne :
• Faites glisser la ligne qui sépare deux en-têtes de colonne.
Pour prévisualiser un actif :
• Sélectionnez l’actif dans le panneau Actifs.
La zone d’aperçu en haut du panneau affiche une prévisualisation de l’actif.
Par exemple, lorsque vous sélectionnez un actif de type animation, une icône s’affiche dans la
zone d’aperçu. Pour visualiser l’animation, cliquez sur le bouton Lecture (le triangle vert) dans
l’angle supérieur droit de la zone d’aperçu.
128
Chapitre 5 : Gestion des actifs de site et des bibliothèques
Pour modifier la taille de la zone d’aperçu :
• Faites glisser la barre de séparation (entre la zone d’aperçu et la liste des actifs) vers le haut ou
vers le bas.
Rubriques connexes
• Ajout d’un actif à un document, page 129
• Sélection et édition d’actifs, page 131
Actualisation du panneau Actifs
La création de la liste Site par le panneau Actifs peut prendre quelques secondes, le panneau
devant lire le cache du site pour créer la liste.
Certaines modifications n’apparaissent pas immédiatement dans le panneau Actifs :
• Lorsque vous ajoutez ou supprimez un actif du site, les modifications ne sont pas répercuté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éer le cache du site pour
actualiser le panneau Actifs.
Lorsque vous supprimez l’unique instance d’une URL ou d’une couleur donnée du site, ou
lorsque vous enregistrez un nouveau fichier contenant une couleur ou une URL n’ayant pas
encore été utilisée dans le site, les modifications ne sont répercutées dans le panneau Actifs
qu’une fois la liste Site actualisée.
Pour actualiser manuellement la liste Site :
1 Dans le panneau Actifs (Fenêtre > Actifs), sé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ée le cache du site ou le met à jour, et le panneau Actifs est actualisé pour
afficher tous les actifs du site.
Pour reconstruire manuellement le cache du site et actualiser la liste Site :
• Dans le panneau Actifs (Fenêtre > Actifs), cliquez avec le bouton droit de la souris (Windows)
ou en maintenant la touche Ctrl enfoncée (Macintosh) dans la liste Actifs, puis cliquez sur
Actualiser la liste du site.
Rubriques connexes
• Sélection et édition d’actifs, page 131
• Réutilisation d’actifs dans un autre site, page 132
Ajout d’un actif à un document
Vous pouvez insérer la plupart des actifs dans un document en les faisant glisser dans la fenêtre de
document en mode Code ou en mode Création, ou bien en utilisant le bouton Insérer. Vous
pouvez insérer des couleurs et des URL ou les appliquer au texte sélectionné en mode Création
(les URL peuvent également être appliquées aux autres éléments, tels que des images, en mode
Création).
Utilisation des actifs
129
Pour insérer un actif dans un document :
1 En mode Création, placez le point d’insertion à l’endroit où afficher l’actif.
2 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie correspondant au type d’actif
à insérer sur le côté gauche du panneau.
Remarque : Sélectionnez toute catégorie autre que Modèles. Un modèle peut uniquement être
appliqué à un document entier. Il ne peut pas être inséré dans un document. Pour plus
d’informations sur les modèles, voir Chapitre 11, Gestion des modèles, page 225.
3 Sélectionnez Site ou Favoris en haut du panneau, puis sélectionnez l’actif à insérer.
Il n’existe pas de liste Site ou Favoris pour les éléments de bibliothèque. Omettez cette étape si
vous insérez un tel élément.
4 Procédez de l’une des maniè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ête de la fenêtre de
document. Si cette zone n’est pas visible, choisissez Affichage > Contenu de l’en-tête.
■ Sélectionnez l’actif dans le panneau, puis cliquez sur le bouton Insérer en bas du panneau.
L’actif est inséré dans le document. Si l’actif est une couleur, son application commence au
niveau du point d’insertion. Tout le texte à la suite de ce point apparaît dans cette couleur.
Rubriques connexes
• Application d’une URL à une image ou du texte à l’aide du panneau Actifs, page 131
• Sélection et édition d’actifs, page 131
• Réutilisation d’actifs dans un autre site, page 132
Application d’une couleur à un texte à l’aide du panneau Actifs
Les couleurs répertoriées dans le panneau Actifs correspondent aux couleurs que vous avez
appliquées aux différents éléments du site : texte, bordures de tableau, arrière-plan, etc. La
catégorie Couleurs permet d’appliquer de façon homogène les couleurs sélectionnées à plusieurs
objets d’une même page.
Pour plus d’informations sur l’ajout de couleurs à la catégorie Couleurs, voir Ajout et suppression
d’actifs dans la liste Favoris, page 133.
Pour modifier la couleur du texte sélectionné dans un document :
1 Sélectionnez du texte dans le document.
2 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Couleurs sur le côté gauche
du panneau.
3 Sélectionnez la couleur souhaitée.
4 Cliquez sur le bouton Appliquer, au bas du panneau.
Rubriques connexes
• Ajout d’un actif à un document, page 129
• Sélection et édition d’actifs, page 131
• Réutilisation d’actifs dans un autre site, page 132
130
Chapitre 5 : Gestion des actifs de site et des bibliothèques
Application d’une URL à une image ou du texte à l’aide du panneau Actifs
Vous pouvez utiliser le panneau Actifs pour transformer le texte ou l’image sélectionnée en lien
actif.
Pour ajouter un lien à la sélection courante dans un document :
1 Sélectionnez le texte ou l’image que vous souhaitez convertir en lien URL.
2 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie URL sur le côté gauche du
panneau.
3 Sélectionnez l’URL de votre choix.
4 Procédez de l’une des manières suivantes :
■
■
Faites glisser l’URL depuis le panneau vers la sélection dans la fenêtre de document en mode
Création.
Sélectionnez l’URL et cliquez sur le bouton Insérer.
Rubriques connexes
• Ajout d’un actif à un document, page 129
• Application d’une couleur à un texte à l’aide du panneau Actifs, page 130
• Réutilisation d’actifs dans un autre site, page 132
Sélection et édition d’actifs
Le panneau Actifs permet de sélectionner simultanément plusieurs actifs ; il offre également un
moyen rapide pour commencer l’édition d’actifs.
Pour sélectionner plusieurs actifs :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez un des actifs.
2 Sélectionnez les autres actifs à l’aide de l’une des méthodes suivantes :
■
■
Cliquez en maintenant la touche Maj enfoncée pour sélectionner une série consécutive
d’actifs.
Cliquez en maintenant la touche Contrôle (Windows) ou la touche Commande
(Macintosh) enfoncée pour ajouter un actif individuel à la sélection (qu’il soit adjacent ou
non à la sélection existante). Cliquez en maintenant la touche Contrôle (Windows) ou la
touche Commande (Macintosh) enfoncée sur un actif sélectionné pour le désélectionner.
Pour modifier un actif :
1 Dans le panneau Actifs (Fenêtre > Actifs), effectuez l’une des opérations suivantes :
Double-cliquez sur l’actif.
■ Sélectionnez l’actif, puis cliquez sur le bouton Modifier en bas du panneau.
Pour certains types d’actifs tels que les images, l’édition de l’actif démarre une application
d’édition externe. Dans le cas des couleurs et des URL, l’é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èles et des éléments de bibliothèque, l’édition
des actifs permet d’apporter des modifications à un actif au sein de Dreamweaver.
■
Utilisation des actifs
131
Remarque : Si aucun éditeur externe ne s’ouvre pour un actif qui doit en utiliser un, choisissez
Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), sélectionnez la
catégorie Types de fichiers/Editeurs, puis assurez-vous qu’un éditeur externe est défini pour le
type de fichier de l’actif (voir Lancement d’un éditeur externe pour des fichiers multimédia,
page 371).
2 Modifiez les actifs suivant vos besoins.
3 Une fois l’édition d’un actif terminée, procédez de l’une des manières suivantes :
■
■
■
Si l’actif est un actif basé sur un fichier (tout objet autre qu’une couleur ou une URL),
enregistrez-le (via l’éditeur utilisé pour le modifier), puis fermez-le.
Si l’actif est une URL, cliquez sur OK une fois l’édition terminée dans la boîte de dialogue
Modifier l’URL.
Si l’actif est une couleur, le sélecteur de couleur de Dreamweaver est automatiquement
fermé lorsque vous sélectionnez une couleur.
Remarque : Pour fermer le sélecteur de couleur sans sé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é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écessaire de le copier. Vous pouvez copier un actif
individuel, un ensemble d’actifs individuels ou un dossier Favoris entier en une seule opération.
Vous devrez peut-être localiser le fichier dans le panneau Fichiers correspondant à un actif dans le
panneau Actifs avant de transférer l’actif depuis ou vers votre site distant.
Remarque : Le panneau Fichiers peut afficher un site différent de celui présenté par le panneau
Actifs, car le panneau Actifs est associé au document actif.
Pour localiser un fichier d’actif dans le panneau Fichiers :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie correspondant au type d’actif
à insérer sur le côté gauche du panneau.
2 Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur l’icône ou le nom de l’actif dans le panneau Actifs, puis choisissez l’option
Repérer dans le site dans le menu contextuel.
Remarque : L’option Repérer dans le site n’est pas disponible pour les couleurs et les URL, qui ne
correspondent pas à des fichiers dans le site.
Le panneau Fichiers s’ouvre, avec le fichier d’actif sélectionné. La commande Repérer dans le
site repère le fichier correspondant à l’actif lui-mê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être > Actifs), sélectionnez la catégorie correspondant au type d’actif
à copier, sur le côté gauche du panneau.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) sur le ou les actifs à copier, sélectionnez Copier dans le site, puis sélectionnez le
nom du site de destination dans le sous-menu (le sous-menu répertorie tous les sites définis).
132
Chapitre 5 : Gestion des actifs de site et des bibliothè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és dans le site spécifié, aux emplacements correspondant à leurs
emplacements dans le site actuel. Dreamweaver crée des dossiers dans la hiérarchie du site cible
suivant les besoins. Les actifs sont également ajoutés à la liste Favoris du site spécifié.
Lorsque vous ouvrez un document dans le site cible, le panneau Actifs bascule sur ce site et affiche
l’actif copié.
Remarque : Si l’actif copié est une couleur ou une URL, il apparaît uniquement dans la liste Favoris
de l’autre site et non dans la liste Site de ce dernier. Dans la mesure où il n’existe pas de fichier
correspondant à la couleur ou à l’URL, aucun fichier n’est copié vers l’autre site.
Rubriques connexes
• Visualisation des actifs dans le panneau Actifs, page 127
• Actualisation du panneau Actifs, page 129
• Sélection et édition d’actifs, page 131
Cré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ée pour certains sites volumineux. Vous pouvez ajouter des actifs fréquemment utilisés à
une liste Favoris, grouper des actifs connexes, leur attribuer des surnoms pour mémoriser leur
objet et les retrouver aisément dans le panneau Actifs.
Remarque : Les actifs favoris ne sont pas stockés en tant que fichiers distincts sur le disque. Ils font
référence aux actifs de la liste Site. Dreamweaver conserve la trace des actifs de la liste Site à afficher
dans la liste Favoris.
La plupart des opérations du panneau Actifs sont identiques dans les listes Favoris et Site.
Toutefois, il existe plusieurs tâches que vous pouvez réaliser uniquement dans la liste Favoris.
Ajout et suppression d’actifs dans la liste Favoris
Il existe plusieurs méthodes pour ajouter des actifs à la liste Favoris du site dans le panneau Actifs.
L’ajout d’une couleur ou d’une URL à la liste Favoris nécessite une étape supplémentaire. Notez
que vous ne pouvez pas ajouter de nouvelles couleurs ou URL à la liste Site. Cette dernière
contient uniquement les actifs déjà utilisés dans le site.
Remarque : Il n’existe pas de liste Favoris pour les modèles et les éléments de bibliothèque.
Pour ajouter des actifs à la liste Favoris, procédez de l’une des manières suivantes :
• Sélectionnez un ou plusieurs actifs dans la liste Site du panneau Actifs, puis cliquez sur le
bouton Ajouter aux favoris situé en bas du panneau.
• Sé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ée (Macintosh), puis sélectionnez
Ajouter aux favoris.
Sélectionnez un ou plusieurs fichiers dans le panneau Fichiers, cliquez avec le bouton droit
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Ajouter
aux favoris.
Dreamweaver ignore les fichiers n’appartenant pas à une catégorie dans le panneau Actifs.
Création et gestion d’une liste d’actifs favoris
133
• Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur un élément dans la fenêtre de document en mode Création, puis choisissez
l’option du menu contextuel pour ajouter l’élément à la catégorie de favoris approprié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é au texte. Notez également
que seuls les éléments appartenant aux catégories du panneau Actifs peuvent être ajoutés à la
liste Favoris.
Ajout d’une nouvelle couleur ou d’une nouvelle URL à la liste Favoris :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Couleurs URL sur le côté
gauche du panneau.
2 Sé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édez de l’une des manières suivantes :
■ Sélectionnez une couleur dans le sélecteur de couleur et donnez-lui un nom si vous le
souhaitez (voir Création d’un surnom pour un actif favori, page 134).
Pour quitter le sélecteur de couleur sans sélectionner de couleur, appuyez sur la touche
Echap ou cliquez sur la barre de couleur grise en haut du sélecteur de couleur (pour plus
d’informations sur l’utilisation du sélecteur de couleur, voir Utilisation des couleurs,
page 273).
■ Entrez une URL et un surnom dans la boîte de dialogue Ajouter URL, puis cliquez sur OK.
Pour supprimer des actifs de la liste Favoris :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez l’option Favoris en haut du panneau.
2 Sé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é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és de la liste
Favoris.
Rubriques connexes
• Visualisation des actifs dans le panneau Actifs, page 127
• Création d’un surnom pour un actif favori, page 134
Création d’un surnom pour un actif favori
Vous pouvez attribuer des surnoms aux actifs de la liste Favoris. Le surnom est affiché au lieu de la
valeur ou du nom du fichier d’actif. Par exemple, si vous avez une couleur nommée #999900,
vous pouvez utiliser un surnom plus descriptif tel que CouleurArriè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épertoriés suivant leur nom de fichier réel (ou valeur, dans le cas de
couleurs et d’URL).
134
Chapitre 5 : Gestion des actifs de site et des bibliothèques
Pour attribuer un surnom à un actif favori :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie contenant votre actif sur le
côté gauche du panneau.
2 Sélectionnez l’option Favoris en haut du panneau pour afficher la liste Favoris.
3 Procédez de l’une des manières suivantes :
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) sur le nom ou l’icône de l’actif dans le panneau Actifs, puis
sélectionnez Modifier le surnom.
■ Cliquez une fois sur le nom de l’actif, effectuez une pause, puis cliquez à nouveau.
4 Tapez un surnom pour l’actif, puis appuyez sur la touche Entrée (Windows) ou Retour
(Macintosh).
Le surnom apparaî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 électronique, vous pouvez les grouper dans un dossier nommé
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éer un dossier Favoris :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez l’option Favoris en haut du panneau.
2 Cliquez sur le bouton Nouveau dossier Favoris situé au bas du panneau.
3 Tapez un nom pour le dossier, puis appuyez sur la touche Entré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éation d’un surnom pour un actif favori, page 134
Utilisation des éléments de bibliothèque
Les bibliothèques permettent de stocker les éléments de pages (images, texte et autres objets) que
vous souhaitez réutiliser ou mettre à jour fréquemment sur votre site Web. Ces éléments portent
le nom d’éléments de bibliothèque.
Rubriques connexes
• A propos des éléments de bibliothèque, page 125
Utilisation des éléments de bibliothèque
135
Création d’un élément de bibliothèque
Vous pouvez créer un élément de bibliothèque à partir de n’importe quel élément dans la section
d’un document, notamment du texte, des tableaux, des formulaires, des applets Java, des
plug-ins, des éléments ActiveX, des barres de navigation et des images.
body
Pour les éléments liés tels que les images, la bibliothèque enregistre uniquement une référence à
l’élément. Le fichier d’origine doit rester à l’emplacement spécifié pour que l’élément de la
bibliothèque fonctionne correctement.
Il peut s’avérer utile d’enregistrer une image d’un élément de bibliothèque. Par exemple, vous
pouvez enregistrer une balise img complète dans un élément de bibliothèque, ce qui vous
permettrait de facilement changer le texte alt de l’image, ou mê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 également un éditeur d’image pour changer la taille réelle de l’image).
Pour créer un élément de bibliothèque basé sur une sélection :
1 Dans la fenêtre de document, sélectionnez une partie d’un document que vous souhaitez
enregistrer comme élément de la bibliothèque.
2 Procédez de l’une des manières suivantes :
■ Faites glisser la sélection dans la catégorie Bibliothèque du panneau Actifs (Fenêtre > Actifs).
■ Cliquez sur le bouton Nouvel élément de la bibliothèque au bas de la catégorie Bibliothèque
du panneau Actifs (Fenêtre > Actifs).
■ Choisissez Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque.
3 Tapez un nom pour le nouvel élément de la bibliothèque, puis appuyez sur la touche Entrée
(Windows) ou Retour (Macintosh).
Dreamweaver enregistre chaque élément de bibliothèque dans un fichier séparé (avec
l’extension de fichier .lbi), dans le dossier Library du dossier racine local du site.
Pour créer un élément de bibliothèque vide :
1 Vérifiez que rien n’est sélectionné dans la fenêtre de document.
Si un élément est sélectionné, il est placé dans le nouvel élément de bibliothèque.
2 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
3 Cliquez sur le bouton Nouvel élément de bibliothèque au bas du panneau Actifs.
Un nouvel élément sans nom est ajouté à la liste du panneau.
4 Sélectionnez l’élément et entrez son nom, puis appuyez sur Entrée (Windows) ou sur Retour
(Macintosh).
Rubriques connexes
• Modification d’un élément de bibliothèque, page 137
• Définition des préférences de couleur de surbrillance des éléments de bibliothèque, page 139
Insertion d’un élément de bibliothèque dans un document
Lorsque vous ajoutez un élément de bibliothèque à une page, le contenu réel est inséré dans le
document avec une référence à l’élément de bibliothèque.
136
Chapitre 5 : Gestion des actifs de site et des bibliothèques
Pour insérer un élément de bibliothèque dans un document :
1 Placez le point d’insertion dans la fenêtre de document.
2 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
3 Procédez de l’une des manières suivantes :
■
Faites glisser un élément de bibliothèque du panneau Actifs vers la fenêtre de document.
Conseil : Pour insérer le contenu d’un élément de bibliothèque sans inclure de référence à
l’élément dans le document, appuyez sur la touche Contrôle (Windows) ou Option (Macintosh)
tout en faisant glisser l’élément hors du panneau Actifs. Lorsque vous insérez un élément de
cette façon, vous pouvez le modifier dans le document, mais le document ne sera pas mis à jour
lorsque vous mettrez à jour les pages qui utilisent cet élément.
■
Sélectionnez un élément de bibliothèque, puis cliquez sur le bouton Insérer en bas du
panneau.
Rubriques connexes
• Création d’un élément de bibliothèque, page 136
• Modification des propriétés d’un élément de bibliothèque, page 140
• Rendre des éléments de bibliothèque modifiables dans un document, page 140
Modification d’un élément de bibliothèque
Lorsque vous modifiez un élément de bibliothèque, vous pouvez choisir de mettre à jour tous les
documents qui utilisent cet élément. Si vous choisissez de ne pas les mettre à jour, les documents
restent associés à l’élément de bibliothèque. Il est toujours possible de les mettre à jour
ultérieurement.
D’autres types de modifications peuvent être apportées aux éléments de bibliothèque : vous
pouvez les renommer pour rompre leur lien avec des documents ou modèles, supprimer des
éléments de la bibliothèque du site et recréer un élément de bibliothèque manquant.
Remarque : Les panneaux Styles CSS ne sont pas disponibles lorsque vous modifiez des éléments
de bibliothèque : en effet, ceux-ci ne peuvent contenir que des éléments body, alors que le code
associé aux feuilles de style CSS est inséré dans la section head du document. La boîte de dialogue
Propriétés de la page est également indisponible : en effet, un élément de bibliothèque ne peut pas
comporter de balise body ni d’attributs de cette balise.
Pour modifier un élément de la bibliothèque :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
2 Sélectionnez un élément de bibliothèque.
Un aperçu de l’élément de bibliothèque s’affiche en haut du panneau Actifs (vous ne pouvez
rien modifier dans l’aperçu).
3 Procédez de l’une des manières suivantes :
■ Cliquez sur le bouton Modifier, au bas du panneau.
■ Double-cliquez sur l’élément de bibliothèque.
Utilisation des éléments de bibliothèque
137
Dreamweaver ouvre une nouvelle fenêtre permettant de modifier l’élément de bibliothèque.
Cette fenêtre ressemble beaucoup à la fenêtre de document, mais son mode Création possède
un arrière-plan gris pour indiquer que vous modifiez un élément de bibliothèque et non pas un
document.
4 Modifiez l’élément de la bibliothèque, puis enregistrez les modifications.
5 Dans la boîte de dialogue qui s’affiche, choisissez de mettre à jour ou non les documents du site
local qui utilisent l’élément de bibliothèque modifié :
■ Cliquez sur Oui pour mettre à jour tous les documents du site local qui utilisent l’élément
modifié ;
■ cliquez sur Non pour ne mettre à jour aucun document jusqu’à ce que vous utilisiez
Modifier > Bibliothèque > Mettre à jour la page en cours ou Mettre à jour les pages.
Pour mettre à jour le document actif afin d’utiliser la version actuelle de tous les éléments de
bibliothèque :
• Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Pour mettre à jour le site entier ou tous les documents utilisant un élément de bibliothèque
particulier :
1 Choisissez Modifier > Bibliothèque > Mettre à jour les pages.
La boîte de dialogue Mettre à jour les pages s’affiche.
2 Dans le menu contextuel Regarder dans, procédez de l’une des manières suivantes :
Choisissez Site entier, puis sélectionnez le nom du site dans le menu contextuel adjacent.
Toutes les pages du site sélectionné sont mises à jour en fonction de la version actuelle de
tous les éléments de bibliothèque.
■ Choisissez Fichiers utilisant, puis sélectionnez un nom d’élément de bibliothèque dans le
menu contextuel adjacent.
Cette opération met à jour toutes les pages du site en cours qui utilisent l’élément de
bibliothèque sélectionné.
3 Sous Mettre à jour, assurez-vous que l’option Eléments de bibliothèque est activée.
■
Conseil : Pour mettre les modèles à jour en même temps, vérifiez que Modèles est également
sélectionné. Pour plus d’informations, voir Ouverture d’un modèle à modifier, page 252.
4 Cliquez sur Démarrer.
Dreamweaver met à jour les fichiers indiqués. Si vous avez sélectionné l’option Afficher le
journal, Dreamweaver affiche des informations sur les fichiers qu’il essaie de mettre à jour et
précise si la mise à jour a réussi.
Pour renommer un élément de la bibliothèque :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
2 Sélectionnez l’élément de bibliothèque à renommer, marquez une pause, puis cliquez à
nouveau.
3 Lorsque le nom devient modifiable, tapez un nouveau nom.
Remarque : Cette méthode fonctionne de la même façon que celle utilisé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’élément de bibliothèque pour modification.
138
Chapitre 5 : Gestion des actifs de site et des bibliothèques
4 Cliquez ailleurs ou appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
5 Dreamweaver vous demande si vous voulez mettre à jour les documents qui utilisent l’élément :
■
■
Pour mettre à jour tous les documents du site qui utilisent l’élément, cliquez sur Mettre à
jour.
Pour ne mettre à jour aucun des documents qui utilisent l’élément, cliquez sur Ne pas
mettre à jour.
Pour supprimer un élément d’une bibliothèque :
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
2 Sélectionnez l’élément de bibliothèque à supprimer.
3 Procédez de l’une des manières suivantes :
■ Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l’opération.
■ Appuyez sur la touche Suppr, puis confirmez que vous voulez supprimer le modèle.
Attention : Si vous supprimez un élément de bibliothèque, vous ne pourrez pas utiliser Annuler
pour le récupérer. Vous pourrez cependant le recréer, comme expliqué dans la prochaine
procédure.
Dreamweaver supprime l’élément de la bibliothèque mais ne modifie pas le contenu des
documents qui l’utilisent.
Pour recréer un élément de bibliothèque manquant ou supprimé :
1 Sélectionnez une instance de l’élément dans un de vos documents.
2 Cliquez sur le bouton Créer à nouveau de l’inspecteur de propriétés (Fenêtre > Propriétés).
Rubriques connexes
• Création d’un élément de bibliothèque, page 136
• Rendre des éléments de bibliothèque modifiables dans un document, page 140
• Modification d’un comportement dans un élément de bibliothèque, page 141
Définition des préférences de couleur de surbrillance des éléments de
bibliothèque
Vous pouvez personnaliser la couleur de surbrillance des éléments de bibliothèque et afficher ou
masquer la surbrillance des éléments de bibliothèque en définissant des préférences de
surbrillance.
Pour modifier la couleur de surbrillance des éléments de bibliothèque :
1 Sélectionnez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3 Cliquez dans la case de couleur Eléments de la bibliothèque et sélectionnez une couleur de
surbrillance à l’aide du sélecteur de couleurs (ou entrez la valeur hexadécimale correspondant à
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 éléments de bibliothèque
139
4 Activez l’option Afficher pour afficher la couleur de surbrillance des éléments de bibliothèque
dans la fenêtre de document.
5 Cliquez sur OK.
Pour afficher les couleurs de surbrillance dans la fenêtre de document :
• Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Les couleurs de surbrillance apparaissent dans la fenêtre de document uniquement lorsque
l’option Affichage > Assistances visuelles > Eléments invisibles est activée et que les options
appropriées sont activées dans les préférences de surbrillance.
Rubriques connexes
• Création d’un élément de bibliothèque, page 136
• Modification d’un élément de bibliothèque, page 137
• Modification des propriétés d’un élément de bibliothèque, page 140
Modification des propriétés d’un élément de bibliothèque
L’inspecteur de propriétés vous permet d’ouvrir un élément de bibliothèque pour le modifier,
détacher un élément sélectionné de son fichier source ou remplacer un élément par celui
sélectionné actuellement.
Pour modifier les propriétés d’un élément de bibliothèque :
1 Sélection d’un élément de bibliothèque dans un document.
2 Cliquez sur le bouton correspondant à votre choix dans l’inspecteur de propriétés (Windows >
Propriétés).
Pour plus d’informations, cliquez sur l’icône Aide de l’inspecteur de propriétés.
Rubriques connexes
• Création d’un élément de bibliothèque, page 136
• Insertion d’un élément de bibliothèque dans un document, page 136
• Définition des préférences de couleur de surbrillance des éléments de bibliothèque, page 139
Rendre des éléments de bibliothèque modifiables dans un document
Si vous avez inséré un élément de bibliothèque dans un document et que vous désirez modifier
celui-ci uniquement sur cette page, vous devez briser le lien qui existe entre cet élément et la
bibliothèque. Lorsqu’une instance d’élément de bibliothèque a été rendue modifiable, elle ne peut
plus être mise à jour quand l’élément de bibliothèque est modifié.
Pour rendre un élément de la bibliothèque modifiable :
1 Sélectionnez un élément de la bibliothèque dans le document actif.
2 Dans l’inspecteur de propriétés, cliquez sur Détacher de l’original (Fenêtre > Propriétés).
L’instance sélectionnée de l’élément de bibliothèque perd sa surbrillance (si elle est visible) et ne
peut plus être mise à jour lorsque l’élément de bibliothèque d’origine change.
Rubriques connexes
• Création d’un élément de bibliothèque, page 136
140
Chapitre 5 : Gestion des actifs de site et des bibliothèques
• Insertion d’un élément de bibliothèque dans un document, page 136
• Modification d’un élément de bibliothèque, page 137
• Modification des propriétés d’un élément de bibliothèque, page 140
Modification d’un comportement dans un élément de bibliothèque
Pour modifier un comportement dans un élément de bibliothèque, vous devez tout d’abord
insérer l’élément dans un document, puis le rendre modifiable dans ce document. Une fois les
changements voulus apportés, vous pouvez recréer l’élément de bibliothèque, en remplaçant
l’élément de la bibliothèque par l’élément modifié de votre document.
Pour plus d’informations sur les comportements, voir Utilisation des comportements JavaScript,
page 383.
Pour modifier un comportement dans un élément de la bibliothèque :
1 Ouvrez un document contenant l’élément de la bibliothèque.
Notez le nom de l’élément de la bibliothèque, ainsi que les balises exactes qu’il contient. Vous
aurez besoin de cette information plus tard.
2 Sélectionnez l’élément de bibliothèque et cliquez sur Détacher de l’original dans l’inspecteur de
propriétés (Fenêtre > Propriétés).
3 Sélectionnez l’élément auquel est attaché le comportement.
4 Dans le volet Comportements (Fenêtre > Comportements), double-cliquez sur l’action que
vous voulez modifier.
5 Dans la boîte de dialogue qui s’affiche, effectuez les modifications nécessaires et cliquez sur OK.
6 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Bibliothèque sur le côté
gauche du panneau.
7 Notez précisément le nom de l’élément de bibliothèque d’origine ; sélectionnez l’élément de
bibliothèque d’origine, puis cliquez sur le bouton Supprimer situé au bas du panneau.
8 Dans la fenêtre de document, sélectionnez tous les éléments qui constituent l’élément de
bibliothèque.
Veillez à sélectionner exactement les mêmes éléments que ceux qui se trouvaient dans l’élément
de bibliothèque original.
9 Dans le panneau Actifs, cliquez sur le bouton Nouvel élément de bibliothèque et donnez au
nouvel élément le nom de l’élément que vous avez supprimé.
Veillez à respecter la même orthographe et la même casse.
10 Pour mettre à jour l’élément de bibliothèque dans les autres documents de votre site, choisissez
Modifier > Bibliothèque > Mettre à jour les pages.
11 Dans la boîte de dialogue qui s’affiche, sélectionnez Fichiers utilisant dans le menu déroulant
Regarder dans.
12 Dans le menu déroulant adjacent, sélectionnez le nom de l’élément de bibliothèque que vous
venez de créer.
13 Sous Mettre à jour, vérifiez que l’option Eléments de bibliothèque est sélectionnée, puis cliquez
sur Démarrer.
14 Une fois les mises à jour effectuées, cliquez sur Fermer pour sortir de la boîte de dialogue Mettre
à jour les pages.
Utilisation des éléments de bibliothèque
141
Rubriques connexes
• Création d’un élément de bibliothèque, page 136
• Insertion d’un élément de bibliothèque dans un document, page 136
• Modification d’un élément de bibliothèque, page 137
142
Chapitre 5 : Gestion des actifs de site et des bibliothèques
CHAPITRE 6
Gestion des sites Contribute avec Dreamweaver
ContributeMacromedia regroupe les fonctions d’un navigateur Web et d’un éditeur de pages Web
de base. Il permet à vos collègues et à vos clients de parcourir une page d’un site que vous avez
créé, ainsi que de modifier ou de mettre à jour cette page s’ils disposent des droits appropriés. Les
utilisateurs de Contribute peuvent ajouter et mettre à 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érations effectuées par les utilisateurs ordinaires (non-administrateurs)
sur un site.
Remarque : La plupart des utilisateurs de Macromedia Dreamweaver MX 2004 qui se connectent à
un site Contribute sont administrateurs du site. Pour réaliser les opérations présentées dans ce
chapitre, vous devez ê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érations de configuration de site dans
Dreamweaver. Vous pouvez ensuite exporter vos informations de définition de site en tant que clé
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 à utiliser avec Contribute, consultez la section relative à l’administration de Contribute
dans l’aide de Contribute.
Vous pouvez vous connecter à un site Contribute à 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éparation d’un site à utiliser avec Contribute, page 147
Administration d’un site Contribute à l’aide de Dreamweaver, page 148
Dé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 à 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èrent.
143
Structure du site et conception de pages pour un site Contribute
Pour que votre site Web puisse être modifié par les utilisateurs de Contribute, vous devez créer
une structure de site appropriée.
Pour ce faire, vous devez créer les dossiers destinés au stockage des pages des utilisateurs de
Contribute, réaliser des pages d’index pour les dossiers et ajouter des éléments de navigation de
base à ces pages. Vous pouvez concevoir des dossiers spécifiques aux utilisateurs, dans lesquels ils
pourront s’entraîner, et créer des feuilles de style CSS pour définir les styles de chaque page ou
dossier. Une partie des opérations de configuration peuvent être effectuées dans Contribute, mais
il est plus facile de définir un site dans Dreamweaver.
En outre, vous pouvez réaliser des modèles que les utilisateurs de Contribute peuvent utiliser pour
la création de nouvelles pages (voir Création de modèles pour un site Contribute, page 241).
Les suggestions suivantes peuvent vous aider à créer un site auxquels les utilisateurs de Contribute
peuvent facilement contribuer :
• Utilisez une structure de site simple.
•
•
•
•
•
•
Evitez de créer de nombreux niveaux de dossiers. Regroupez les éléments associés dans un
même dossier.
Définissez des droits en lecture et en écriture appropriés pour les dossiers sur le serveur.
Pour plus d’informations, voir Activation de l’accès aux modèles sans l’accès au dossier racine pour
les utilisateurs de Contribute, page 151.
Lorsque vous créez votre structure de dossiers, ajoutez des pages d’index aux dossiers pour
inciter les utilisateurs de Contribute à placer les nouvelles pages dans les dossiers appropriés.
Par exemple, si les utilisateurs de Contribute fournissent des pages contenant des comptes
rendus de réunions, vous pouvez créer un dossier dans le dossier racine du site appelé
comptes_rendus et y insérer une page d’index. Vous pouvez ensuite créer un lien qui renvoie à
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éaliser une page de procès-verbal pour une réunion
donnée, désignée par un lien depuis cette page. La nouvelle page est automatiquement créé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 évitant des mises en forme fantaisistes.
Attribuez un nom descriptif à vos styles CSS.
Si les utilisateurs de Contribute qui travaillent sur votre site utilisent un jeu de styles standard
dans Microsoft Word, attribuez à vos styles CSS les mêmes noms que ceux des styles Word
correspondants, afin que Contribute puisse faire correspondre les styles lorsqu’un utilisateur
copie des donné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 « mmhide_ » (sans guillemets).
Par exemple, si vous utilisez un style nommé Justifié_droite dans une page mais que vous ne
souhaitez pas que les utilisateurs de Contribute puissent utiliser ce style, renommez-le en
mmhide_Justifié_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ôt que des balises HTML.
Contribute reconnaît les styles CSS et permet aux utilisateurs de les appliquer.
• Dans un souci de simplicité, utilisez aussi peu de styles CSS que possible.
• Si vous utilisez des inclusions côté serveur pour des éléments de pages HTML, par exemple des
en-tête ou des pieds de page, créez une page HTML simple non lié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éation de nouveaux documents, page 76
Utilisation des feuilles de style en cascade, page 304
Utilisation des inclusions côté serveur, page 462
Connexion à un site pour la compatibilité avec Contribute
Dans Dreamweaver, vous pouvez vous connecter à 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 à un site défini en tant que site Contribute (qui dispose
déjà d’un administrateur), Dreamweaver vous invite à activer la compatibilité avec Contribute.
Si vous préparez un site Dreamweaver existant pour les utilisateurs de Contribute, vous devez
activer la compatibilité avec Contribute de manière explicite pour utiliser les fonctions
Contribute. Dreamweaver n’affiche pas de message d’invite. Pour plus d’informations, voir
Préparation d’un site à utiliser avec Contribute, page 147.
Dreamweaver vous permet de vous connecter à un site distant, y compris un site Contribute, de
différentes façons. Cependant, tous les types de connexion ne prennent pas en charge la
compatibilité avec Contribute. Les restrictions suivantes s’appliquent aux types de connexion :
• Si vous vous connectez à votre site distant à l’aide de WebDAV ou de SourceSafe, vous ne
•
•
pouvez pas activer la compatibilité avec Contribute, car ces systèmes de commande source ne
sont pas compatibles avec les Design Notes et les systèmes d’archivage et d’extraction utilisé par
Dreamweaver pour les sites Contribute.
Si vous utilisez RDS pour vous connecter à votre site distant, vous pouvez activer la
compatibilité 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éfinir le site à l’aide
d’une connexion FTP ou ré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ème similaire au système d’archivage et d’extraction de Dreamweaver
afin qu’un seul utilisateur à la fois puisse modifier une page Web donnée. Lorsque vous activez la
compatibilité avec Contribute dans Dreamweaver, le système d’archivage et d’extraction de
Dreamweaver est automatiquement activé.
A propos de la gestion des sites Contribute
145
Pour transférer des fichiers depuis et vers un site Contribute à l’aide de Dreamweaver, utilisez
toujours les commandes Archiver et Extraire. Si vous utilisez les commandes Placer et Acquérir
pour transférer les fichiers, vous risquez d’écraser les dernières modifications apportées à 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 à nouveau, afin de ré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éroule de la même faç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écédemment archivée du fichier dans le
dossier _baks et ajoute votre nom d’utilisateur et la date à un fichier Design Notes afin que les
autres utilisateurs sachent qui a archivé le fichier et à quel moment. Pour plus d’informations sur
les copies de sauvegarde automatiques, voir Activation de l’accès aux modèles sans l’accès au dossier
racine pour les utilisateurs de Contribute, page 151.
Rubriques connexes
• Archivage et extraction de fichiers, page 106
• Préparation d’un site à utiliser avec Contribute, page 147
Autorisations de fichiers et de dossiers Contribute sur le serveur
Contribute offre la possibilité de gérer les autorisations de fichiers et de dossiers pour chaque
groupe d’utilisateurs défini. Pour plus d’informations, voir la section relative à 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éanmoins, Contribute ne permet pas de gérer les autorisations de lecture et d’écriture sousjacentes attribuées aux fichiers et aux dossiers par le serveur. Vous pouvez gérer ces autorisations
directement sur le serveur.
Les groupes d’autorisations Contribute sont comme superposés aux autorisations de lecture et
d’écriture du serveur. Par exemple, si un utilisateur ne dispose pas d’autorisation en écriture sur un
dossier du serveur, il ne peut pas enregistrer ce dossier même s’il est membre d’un groupe
d’autorisations qui peut, selon les autorisations Contribute, écrire dans ce dossier.
Si un utilisateur de Contribute ne dispose pas de droit d’accès en lecture sur le serveur pour un
fichier donné, tel qu’une image affichée dans une page, le contenu de ce fichier ne s’affiche pas
dans la fenêtre Contribute. Par exemple, si un utilisateur ne dispose pas de droit d’accès en lecture
à un dossier d’images, les images contenues dans ce dossier s’affichent sous la forme d’icônes
d’image déchirée dans Contribute. De même, les modèles Dreamweaver sont stockés dans un
sous-dossier du dossier racine du site. Ainsi, si un utilisateur de Contribute ne dispose pas d’accès
en lecture au dossier racine, il ne peut pas utiliser les modèles de ce site, sauf si vous copiez les
modèles dans un dossier accessible.
Lorsque vous définissez un site, nous vous conseillons d’accorder aux utilisateurs des droits d’accès
en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu’au
dossier /Templates et à tous les dossiers contenant des ressources dont ils auront besoin.
Si pour une raison quelconque, vous ne pouvez pas accorder de droits d’accès en lecture au
dossier /Templates, voir Activation de l’accès aux modèles sans l’accès au dossier racine pour les
utilisateurs de Contribute, page 151 pour fournir les modèles aux utilisateurs.
146
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
Fichiers spéciaux Contribute
Contribute utilise divers fichiers spéciaux qui ne sont pas destinés à être consultés par les visiteurs
du site. Ces fichiers comprennent :
• le fichier de paramètres partagés, fichier XML portant un nom du type contribute.xml, qui
•
•
•
•
s’affiche dans un dossier nommé _mm dans le dossier racine du site et contient des
informations utilisées par Contribute pour la gestion du site ;
des versions précédentes de fichiers, dans des dossiers nommés _baks (voir Activation de l’accès
aux modèles sans l’accès au dossier racine pour les utilisateurs de Contribute, page 151) ;
des versions temporaires de pages, afin que les utilisateurs puissent afficher un aperçu des
modifications ;
des fichiers de verrouillage temporaires, indiquant qu’une page spécifique est en cours de
modification ou affichée en aperçu ;
des fichiers Design Notes contenant des métadonnées relatives aux pages du site.
En général, vous ne devez pas modifier ces fichiers spéciaux Contribute dans Dreamweaver ;
Dreamweaver les gère automatiquement.
Si vous ne souhaitez pas que ces fichiers spéciaux Contribute apparaissent sur votre serveur
publiquement accessible, vous pouvez définir un serveur intermédiaire sur lequel les utilisateurs
de Contribute pourront travailler sur les pages. Vous pouvez ensuite régulièrement copier ces
pages Web du serveur intermédiaire au serveur de production qui se trouve sur Web. Si vous
utilisez un serveur intermédiaire, copiez uniquement les pages Web sur le serveur de production.
Ne copiez aucun des fichiers spéciaux Contribute mentionné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 éviter que les visiteurs ne
voient les fichiers des dossiers commençant par un souligné, voir le chapitre traitant de la sécurité des
sites Web de l’aide de Contribute, dans la section relative à l’administration de Contribute.
Si vous n’utilisez pas de serveur intermédiaire, vous pouvez, de temps à 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éciaux.
Par exemple, si Contribute n’arrive pas à supprimer des pages temporaires d’aperçu, une fois
l’aperçu fermé par l’utilisateur, vous devez supprimer ces pages temporaires manuellement. Le
nom de fichier des pages temporaires d’aperçu commence par TMP.
De même, un fichier de verrouillage obsolè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éverrouillage
d’un fichier dans un site Contribute, page 152.
Préparation d’un site à utiliser avec Contribute
Avant de pouvoir utiliser Dreamweaver pour la gestion d’un site Contribute, vous devez activer la
compatibilité avec Contribute. En fonction du site auquel vous vous connectez, vous serez peutêtre invité à activer la compatibilité avec Contribute.
Remarque : Lorsque vous activez la compatibilité avec Contribute, Dreamweaver active
automatiquement Design Notes (y compris l’option Télécharger les Design Notes pour les partager),
ainsi que le système d’archivage et d’extraction de fichiers.
Préparation d’un site à utiliser avec Contribute
147
Pour activer la compatibilité avec Contribute pour un site Dreamweaver défini :
1 Choisissez Site > Gérer les sites.
2
3
4
5
6
7
La boîte de dialogue Gérer les sites s’affiche.
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
Cliquez sur l’onglet Avancé.
Sélectionnez la catégorie Contribute dans la liste de gauche.
Sélectionnez l’option Activer la compatibilité de Contribute et renseignez la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide.
Cliquez sur OK pour fermer la boîte de dialogue Définition du site.
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Rubriques connexes
• Connexion à un site pour la compatibilité avec Contribute, page 145
Administration d’un site Contribute à l’aide de Dreamweaver
Après avoir activé la compatibilité avec Contribute (voir Préparation d’un site à utiliser avec
Contribute, page 147), vous pouvez utiliser Dreamweaver pour lancer Contribute afin d’effectuer
les tâches d’administration du site.
Remarque : Contribute doit être installé sur le même ordinateur que Dreamweaver.
En tant qu’administrateur d’un site Contribute, vous pouvez effectuer les opérations suivantes :
• modifier les paramètres au niveau du site ;
•
•
Les paramètres au niveau du site sont composés du mot de passe administrateur, de l’adresse
électronique de l’administrateur et du nombre de révisions enregistrées sur le serveur.
modifier les autorisations accordées aux groupe d’utilisateurs de Contribute ;
définir les utilisateurs de Contribute.
Les utilisateurs de Contribute nécessitent certaines informations sur le site pour pouvoir s’y
connecter. Vous pouvez regrouper toutes ces informations dans un fichier, appelé clé de
connexion, que vous envoyez aux utilisateurs de Contribute.
Remarque : Une clé de connexion ne correspond pas à un fichier de site Dreamweaver exporté.
Pour exporter les informations de site à 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éer la hié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èles et les feuilles de style CSS nécessaires au site (voir Création de modèles pour un
site Contribute, page 241).
Pour administrer un site Web Contribute dans Dreamweaver :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
148
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
3 Cliquez sur l’onglet Avancé.
4 Sélectionnez la caté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é la compatibilité avec Contribute.
Pour plus d’informations sur la façon d’activer cette option, voir Préparation d’un site à utiliser avec
Contribute, page 147.
Si le site est protégé par un mot de passe, une boîte de dialogue apparaî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î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î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îte de dialogue Administration du site Web s’affiche.
7 Procédez de l’une des manières suivantes :
■ Pour modifier les paramètres d’administration, cliquez sur le bouton Paramètres au niveau
du site, puis modifiez les paramètres nécessaires dans la boîte de dialogue Paramètres au
niveau du site.
■ Pour modifier les paramètres de groupe d’autorisations, sélectionnez un groupe
d’autorisations (le cas échéant), cliquez sur l’un des boutons des sections Groupes
d’autorisations, puis renseignez la boîte de dialogue.
■ Pour envoyer une clé de connexion afin de définir les utilisateurs, cliquez sur le bouton
Envoyer la clé de connexion, puis renseignez l’Assistant de connexion.
Remarque : Pour plus d’informations sur les paramètres au niveau du site, la gestion des
utilisateurs et des autorisations ou la création d’un code de connexion, voir la section relative à
l’administration de Contribute dans l’aide de Contribute.
8 Cliquez sur OK pour fermer la boîte de dialogue Administration du site Web.
9 Cliquez sur OK pour fermer la boîte de dialogue Définition du site.
10 Cliquez sur Terminé pour fermer la boîte de dialogue Modifier les sites.
Rubriques connexes
• Gestion des fichiers Contribute dans Dreamweaver, page 150
Dépannage d’un site Contribute
Si vous rencontrez un problème avec un site Contribute, reportez-vous aux rubriques ci-après
pour obtenir des informations sur la résolution du problème :
• Pour les problèmes de connexion à un site Contribute, voir Dépannage des problèmes de
connexion pour un site Contribute, page 150.
• Pour les problèmes d’utilisation des outils d’administration, voir Dépannage des outils
d’administration de Contribute, page 150.
Pour plus d’informations de dépannage, consultez la section consacrée au dépannage dans la
section relative à l’administration de Contribute, dans l’aide de Contribute.
Dépannage d’un site Contribute
149
Dépannage des problèmes de connexion pour un site Contribute
Lorsque vous cliquez sur un bouton lié à l’administration d’un site Contribute, Dreamweaver
vérifie qu’il peut se connecter au site distant et que l’URL de la racine du site indiqué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érifier une connexion Contribute :
1 Vérifiez l’URL de la racine du site dans la catégorie Contribute de la boîte de dialogue
Dé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égorie Infos distantes de la boîte de dialogue Dé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ème pour obtenir de l’aide.
Dépannage des outils d’administration de Contribute
Si les outils d’administration ne fonctionnent pas correctement, cela peut être dû au dossier _mm.
Pour vérifier le dossier _mm :
1 Sur le serveur, assurez-vous que vous disposez des autorisations de lecture et d’écriture pour le
dossier _mm.
2 Vérifiez que le dossier _mm contient un fichier de paramètres partagés portant un nom du type
contribute.xml.
3 Si ce n’est pas le cas, utilisez l’Assistant de connexion pour créer une connexion au site et devenir
administrateur du site.
Le fichier de paramètres partagés est créé automatiquement lorsque vous devenez
administrateur. Pour plus d’informations sur la façon de devenir administrateur d’un site Web
Contribute existant, voir la section relative à l’administration de Contribute dans l’aide de
Contribute.
Rubriques connexes
• Dépannage des problè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érations de gestion de fichiers, telles que l’enregistrement de
différentes versions d’un document.
Cette section décrit les aspects de l’utilisation des fichiers dans un site Contribute qui diffè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éciaux Contribute, voir Fichiers spéciaux Contribute, page 147.
150
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
Remarque : Un administrateur de site Contribute peut affecter des utilisateurs à des groupes appelés
groupes d’autorisations et spécifier les opérations que les membres de chaque groupe peuvent
effectuer. Lorsque vous gérez les fichiers d’un site Contribute dans Dreamweaver, les restrictions du
groupe d’autorisations ne s’appliquent pas à vous ; les seules restrictions qui vous concernent sont
les autorisations de lecture et d’écriture sur le serveur. Pour plus d’informations sur les différents
types d’autorisations, voir Autorisations de fichiers et de dossiers Contribute sur le serveur, page 146.
Suppression, déplacement ou changement de nom d’un fichier distant d’un
site Contribute
Pour supprimer un fichier d’un serveur distant qui héberge un site Contribute, procédez de la
même faç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écidez de les conserver,
Dreamweaver enregistre également une copie de la version actuelle afin que vous puissiez la
restaurer ultérieurement.
Pour modifier le nom d’un fichier distant ou déplacer le fichier d’un dossier à un autre dans un
site Contribute, procédez de la même façon que sur tout site Dreamweaver. Dans un site
Contribute, Dreamweaver renomme ou déplace également les anciennes versions du fichier
associées qui sont enregistrées dans le dossier _baks.
Pour supprimer un fichier distant :
1 Sélectionnez le fichier dans le volet distant du panneau Fichiers (Fenêtre > Fichiers) et appuyez
sur Retour arrière (Windows) ou Arrière (Macintosh).
Une boî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îte de dialogue de
confirmation, procédez de l’une des manières suivantes :
■ Pour supprimer toutes les versions précédentes du fichier ainsi que la version actuelle,
sélectionnez l’option Supprimer les versions de restauration.
■ Pour conserver les anciennes versions sur le serveur, désélectionnez l’option Supprimer les
versions de restauration.
3 Cliquez sur Oui pour supprimer le fichier.
Le fichier est supprimé. Si vous avez choisi de supprimer les versions précédentes, elles sont
également supprimées. Si vous avez choisi de ne pas les supprimer, une copie de la version
actuelle est enregistrée dans le dossier _baks en tant que nouvelle révision du fichier.
Rubriques connexes
• Déverrouillage d’un fichier dans un site Contribute, page 152
Activation de l’accès aux modèles sans l’accès au dossier racine pour les
utilisateurs de Contribute
Dans un site Contribute, vous devez gérer les autorisations de lecture et d’écriture sous-jacentes
attribué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éfinissez un site, nous vous conseillons d’accorder aux utilisateurs des droits d’accès
en lecture au dossier /_mm sur le serveur (sous-dossier _mm du dossier racine), ainsi qu’au
dossier /Templates et à 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ès en lecture au
dossier /Templates, vous pouvez tout de même rendre les modèles accessibles aux utilisateurs.
Pour que les utilisateurs de Contribute puissent utiliser les modèles sans disposer de droits
d’accès en lecture au dossier racine du site principal :
1 Dé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èles du dossier racine du site principal dans le dossier
racine du site Contribute, à l’aide du panneau Fichiers.
3 Après avoir modifié le site principal, recopiez les modèles modifiés dans les sous-dossiers
appropriés.
Si vous faites appel à cette méthode de « sous-site », n’utilisez pas de liens relatifs à la racine du site
dans les sous-sites. Les liens relatifs à la racine du site sont associés au dossier racine principal du
serveur, et non au dossier racine défini dans Dreamweaver. Les utilisateurs de Contribute ne
peuvent pas créer de liens relatifs à la racine du site. Pour plus d’informations sur les liens relatifs à
la racine du site, voir Description des emplacements et chemins d’accès des documents, page 330.
Si les liens d’une page Contribute apparaissent rompus, il peut s’agir d’un problème
d’autorisations pour le dossier, en particulier si les liens renvoient à des pages qui ne se trouvent
pas dans le dossier racine de l’utilisateur de Contribute. Vérifiez les autorisations de lecture et
d’écriture pour les dossiers sur le serveur.
Déverrouillage d’un fichier dans un site Contribute
Il peut arriver qu’un fichier distant d’un site Contribute apparaisse comme étant extrait mais qu’il
ne soit pas vraiment verrouillé sur l’ordinateur de l’utilisateur. Dans ce cas, déverrouillez le fichier
pour que les utilisateurs puissent le modifier.
Remarque : Avant de suivre cette procédure, assurez-vous que le fichier n’est pas extrait. Si vous
déverrouillez un fichier alors qu’un utilisateur de Contribute est en train de le modifier, plusieurs
utilisateurs risquent de modifier le fichier en même temps, ce qui peut entraîner une perte de données.
Pour déverrouiller un fichier extrait :
1 Procédez de l’une des manières suivantes :
Ouvrez le fichier dans la fenêtre Document, puis choisissez Site > Annuler extraction.
Dans le panneau Fichiers (Fenêtre > Fichiers), cliquez avec le bouton droit (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Annuler extraction.
Une boîte de dialogue peut s’afficher, qui indique l’utilisateur ayant extrait le fichier et
demande de confirmer le déverrouillage du fichier.
2 Si cette boîte de dialogue s’affiche, cliquez sur Oui pour confirmer.
Le fichier est déverrouillé sur le serveur.
■
■
152
Chapitre 6 : Gestion des sites Contribute avec Dreamweaver
Créez des mises en page sophistiquées à l’aide des outils de cré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ésentation de contenu à 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è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 à un document pour en effectuer la mise en forme. Vous pouvez
insérer des balises div et appliquer les styles de positionnement CSS ou utiliser les calques
Dreamweaver pour réaliser votre mise en forme.
Remarque : Dreamweaver traite toutes les balises div à position absolue ou relative comme des
calques.
Conseil : Vous pouvez utiliser un fichier de conception de Dreamweaver comme point de départ pour
la mise en forme CSS. Sélectionnez un fichier dans la catégorie Conceptions de page (CSS) de la
boîte de dialogue Nouveau document (voir Création d’un document basé 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ègles et de grilles pour vous guider. Dreamweaver dispose également
d’une fonction de tracé de l’image que vous pouvez utiliser pour recréer la conception d’une page
précédemment réalisé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îtrisez l’utilisation de tableaux, préférez les tableaux ou le mode Mise en
forme pour effectuer la mise en forme de vos pages (voir Présentation de contenu à 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éfinition des préférences et des propriété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ègles et des grilles pour la mise en forme des pages, page 170
Utilisation du tracé de l’image, page 171
155
A propos des calques de Dreamweaver
Un calque est un élément de page HTML que vous pouvez placer à l’endroit de votre choix sur
votre page. Les calques peuvent comporter du texte, des images ou tout autre contenu à 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é par Dreamweaver
pour la mise en forme, et non pas à la balise layer.
Description des calques
Dreamweaver vous permet d’effectuer la mise en forme d’une page à l’aide de calques. Vous
pouvez placer les calques devant ou derrière d’autres calques, masquer certains d’entre eux et en
montrer d’autres ou encore déplacer les calques à l’écran. Vous pouvez placer une image d’arrièreplan dans un calque, puis placer un deuxième calque contenant du texte avec un arrière-plan
transparent devant ce dernier.
Les calques offrent une grande souplesse dans le placement de contenu. Les navigateurs Web
antérieurs à 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ême façon.
Pour que votre page Web puisse être visualisé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éanmoins, si vous pensez que les visiteurs de votre
site disposeront de navigateurs plus ré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ère la balise HTML
correspondant à ce calque dans votre code. Selon vos préférences, Dreamweaver peut utiliser la
balise div ou la balise span pour vos calques. Par défaut, Dreamweaver crée des calques en
utilisant la balise div. Pour changer la balise par défaut, voir Définition des préférences des calques,
page 162.
Remarque : Deux autres balises peuvent être utilisées pour la création de calques : layer et ilayer.
Cependant, seul Netscape Navigator 4 prend ces balises en charge, contrairement à Internet
Explorer et aux versions les plus récentes de Netscape. Dreamweaver reconnaît les balises layer et
ilayer, mais il ne les utilise pas pour la cré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émentaires avant et après la balise div ; la balise div est
un élément au niveau du bloc, alors que la balise span est un élément incorporé. En général, dans
les navigateurs qui ne prennent pas les calques en charge, il est préférable que le contenu de ces
derniers apparaisse dans un paragraphe indépendant ; c’est pourquoi il est conseillé d’utiliser la
balise div plutôt que la balise span.
156
Chapitre 7 : Mise en forme des pages avec les styles CSS
Pour améliorer la lisibilité du contenu dans les navigateurs plus anciens, il est important de bien
placer le code du calque. Le code qui définit le calque peut se trouver n’importe où dans le fichier
HTML. Lorsque vous dessinez un calque dans Dreamweaver, il apparaît à l’endroit du dessin,
mais Dreamweaver insère le code du calque au début de la page, juste après la balise body. Si vous
utilisez la commande Insérer un calque au lieu de dessiner un calque, le code du calque est inséré
à l’emplacement du point d’insertion. Si vous créez un calque imbriqué, Dreamweaver insère le
code au sein de la balise qui définit le calque parent.
Remarque : Quelle que soit la balise utilisée, les versions d’Internet Explorer et de Netscape
Navigator antérieures à la version 4.0 affichent le contenu des calques, mais ne les positionnent pas.
Le contenu du calque apparaît à l’emplacement de son code sur la page ; par exemple, si le code se
trouve en début de page, le contenu du calque apparaît aussi en début de page dans les navigateurs
qui ne prennent pas les calques en charge.
Ce qui suit est un échantillon de code HTML pour un calque :
<div id="Layer1" style="position:absolute; visibility:inherit; width:200px;
height:115px; z-index:1">
</div>
Ce qui suit est un échantillon de code HTML pour un calque imbriqué dans un autre calque :
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px;
height:158px; z-index:1;">
Contenu du calque parent.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px;
height:69px; z-index:1;">
Contenu du calque imbriqué.
</div>
</div>
Vous pouvez définir les propriétés des calques de votre page, y compris les coordonnées x et y,
l’index z (également appelé ordre de superposition) et la visibilité. Pour plus d’informations, voir
Définition des préférences et des propriété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èrement utile si une feuille de style CSS existante, contenant des styles de
positionnement, est associée à votre document. Dreamweaver vous permet d’insé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épart
pour la mise en forme CSS. Sélectionnez un fichier dans la catégorie Conceptions de page (CSS) de
la boîte de dialogue Nouveau document (voir Création d’un document basé sur un fichier de conception
Dreamweaver, page 76).
Pour insérer une balise div :
1 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous voulez insérer la
balise div.
2 Procédez de l’une des manières suivantes :
■
Choisissez Insertion > Objets mise en forme > Balise Div.
Insertion de blocs de contenu pour la mise en forme
157
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Insérer la balise
Div.
La boîte de dialogue Insérer la balise Div s’affiche.
■
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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éservé. Lorsque vous déplacez le pointeur à l’intérieur de la zone, Dreamweaver met
cette zone en surbrillance.
Si la balise div est placée de manière absolue ou relative, elle se comporte comme un calque
Dreamweaver. Pour plus d’informations sur l’utilisation des calques, voir Définition des préférences
et des propriété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ées de maniè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éplacez le pointeur sur un bloc de contenu, Dreamweaver met ce bloc en
surbrillance. Dreamweaver met en surbrillance les blocs auxquels sont associés une classe, un id ou
un style. Vous pouvez activer et désactiver la surbrillance à votre convenance ou en modifier la
couleur dans les préférences.
Pour modifier les préférences de surbrillance des blocs de contenu :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Choisissez la caté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électionnez une couleur de surbrillance à l’aide du sélecteur de couleur
(ou tapez la valeur hexadécimale correspondant à 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ésactiver la surbrillance des blocs de contenu, activez ou désactivez la case à
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éplacez le pointeur au-dessus.
4 Cliquez sur OK.
Utilisation des blocs de contenu pour la mise en forme
Après avoir inséré 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ées de maniè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éfinition des préférences et des propriété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ées de manière absolue ou
relative ne sont pas visibles, mais lorsque vous déplacez le pointeur au-dessus d’un bloc de
contenu, Dreamweaver le met en surbrillance (s’il est associé à une classe, un id ou un style).
Pour modifier la couleur de surbrillance ou désactiver la surbrillance, voir Modification de la
couleur de surbrillance des blocs de contenu, page 158.
Si vous sélectionnez un bloc de contenu qui n’est pas placé de manière absolue ou relative, vous
pouvez en afficher et modifier les règles depuis l’inspecteur de balises. Vous pouvez ajouter du
contenu à un bloc en plaçant simplement le point d’insertion sur celui-ci, puis procédez à l’ajout
du contenu comme vous le feriez pour celui d’une page.
Pour afficher et modifier les règles appliquées à un bloc de contenu :
1 Procédez de l’une des manières suivantes pour sélectionner une balise div :
■
Cliquez sur les bordures du bloc.
Conseil : Recherchez la surbrillance afin de voir les bordures.
Cliquez à l’intérieur du bloc, puis sélectionnez la balise div à partir du sélecteur de balise
figurant au bas de la fenêtre du document.
2 Si l’inspecteur de balises et l’onglet CSS ne sont pas déjà ouverts, choisissez Fenêtre > Inspecteur
de balises, puis cliquez sur l’onglet CSS.
Les règles appliquées à la balise div s’affichent dans le panneau.
3 Effectuez les modifications nécessaires.
■
Pour placer le point d’insertion dans un bloc afin d’y ajouter du contenu :
• Cliquez n’importe où à l’intérieur du bloc.
Pour modifier le texte de l’espace réservé dans un bloc de contenu :
• Sélectionnez le texte, puis tapez un nouveau texte par-dessus ou appuyez sur la touche Suppr.
Remarque : Vous pouvez ajouter du contenu à un bloc comme vous en ajouteriez à 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éer facilement des calques sur votre page et de les positionner avec
précision. Vous pouvez également créer des calques imbriqué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épart
pour la mise en forme CSS. Sélectionnez un fichier dans la catégorie Conceptions de page (CSS) de
la boîte de dialogue Nouveau document (voir Création d’un document basé sur un fichier de conception
Dreamweaver, page 76).
Lorsque vous insérez un calque, un marqueur de calque apparaît en mode Création. Dreamweaver
affiche par défaut les bordures de ce calque et met le bloc en surbrillance (s’il est associé à une
classe, un id ou un style) lorsque vous placez le pointeur dessus. Vous pouvez désactiver le
marqueur de calque en désactivant les éléments invisibles. Vous pouvez également masquer les
bordures du calque. Pour modifier la couleur de surbrillance ou désactiver la surbrillance, voir
Modification de la couleur de surbrillance des blocs de contenu, page 158.
Remarque : Lorsque l’option Eléments invisibles est activée, les éléments de votre page peuvent
sembler se décaler hors de la page. Cependant, les éléments invisibles n’apparaissent pas dans les
navigateurs, ce qui signifie que tous les éléments visibles apparaissent au bon emplacement lorsque
vous visualisez votre page dans un navigateur.
Une fois le calque créé, vous pouvez y ajouter du contenu en plaç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 à la suite :
1 Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Dessiner un calque.
2 Dans la fenêtre de création du document, procédez de l’une des manières suivantes :
■
■
Faites glisser le pointeur pour dessiner un seul calque.
Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour dessiner
plusieurs calques à la fois.
Vous pouvez continuer à tracer des calques tant que vous n’avez pas relâché les touches Ctrl
ou Commande.
Pour insérer un calque à un endroit précis du document :
• Placez le point d’insertion dans la fenêtre de document, puis choisissez Insertion > Calque.
Pour placer le point d’insertion dans un calque :
• Cliquez n’importe où à l’intérieur du calque.
Le contour du calque est en surbrillance et la poignée de sélection apparaît, mais le calque luimême n’est pas sélectionné. Pour plus d’informations sur la sélection de calques, voir Sélection des
calques, page 164.
Pour afficher ou masquer les marqueurs de calque :
• Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Pour afficher ou masquer les bordures de calque :
• Choisissez Affichage > Assistances visuelles > Bordures de calque.
160
Chapitre 7 : Mise en forme des pages avec les styles CSS
Rubriques connexes
• Définition des préférences et des propriétés de calques, page 162
• Gestion des calques, page 163
• Manipulation des calques, page 166
Imbrication des calques
Un calque imbriqué est un calque dont le code est contenu dans un autre calque. L’imbrication est
souvent utilisée pour regrouper des calques. Un calque imbriqué se déplace avec son calque parent
et peut être configuré pour hériter de la visibilité de son parent.
Activez l’option Imbrication si vous voulez que les calques que vous dessinez à l’intérieur d’autres
calques soient automatiquement imbriqués.
Pour dessiner un calque imbriqué :
1 Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Dessiner un calque.
2 Dans la fenêtre de création du document, dessinez le calque à l’intérieur d’un autre claque en
faisant glisser la souris :
Si l’option Imbriquer est désactivée dans les préférences de calque, maintenez la touche Alt
(Windows) ou Option (Macintosh) enfoncée et faites glisser un calque pour l’imbriquer dans
un calque existant.
Conseil : Les calques imbriqués peuvent être présentés différemment suivant les navigateurs.
Lorsque vous créez des calques imbriqués, contrôlez régulièrement leur présentation dans les
divers navigateurs au cours du processus de création.
Pour insérer un calque imbriqué :
• Placez le point d’insertion à l’intérieur d’un calque existant dans la fenêtre de création du
document, puis choisissez Insertion > Calque.
Pour imbriquer un calque existant dans un autre calque en utilisant le panneau Calques :
1 Choisissez Fenêtre > Calques pour ouvrir le panneau Calques.
2 Sélectionnez un calque dans le panneau Calques, puis maintenez la touche Ctrl (Windows) ou
Commande (Macintosh) enfoncée tout en faisant glisser la souris pour diriger le calque vers le
calque cible, dans le panneau Calques.
3 Relâ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 à partir d’un
autre calque :
• Sélectionnez l’option Imbrication dans les préférences de calque.
Pour plus d’informations, voir Définition des préférences des calques, page 162.
Rubriques connexes
• Insertion d’un calque, page 160
• Gestion des calques, page 163
• Manipulation des calques, page 166
Définition des préférences et des propriétés de calques
Vous pouvez spécifier des paramètres de calque par défaut. Vous pouvez également afficher et
définir les différents attributs d’un ou de plusieurs calques à l’aide de l’inspecteur de propriétés.
Définition des préférences des calques
Utilisez la catégorie Calques dans la boîte de dialogue Préférences pour indiquer les paramètres
par défaut des nouveaux calques créés.
Pour afficher ou définir les préférences de calque :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Choisissez la caté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îte de dialogue.
4 Cliquez sur OK.
Rubriques connexes
• Affichage et définition des propriétés de plusieurs calques, page 163
Affichage et définition des propriétés pour un seul calque
Lorsque vous sélectionnez un calque, l’inspecteur de propriétés affiche les propriétés du calque.
Pour afficher et définir les propriétés du calque :
1 Sélectionnez un calque (voir Sélection des calques, page 164).
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur la flèche d’agrandissement
située dans le coin inférieur droit (si l’inspecteur est affiché en mode réduit) pour visualiser
toutes les propriétés.
3 Modifiez les attributs du calque en définissant les propriétés, si nécessaire.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propriétés.
162
Chapitre 7 : Mise en forme des pages avec les styles CSS
Rubriques connexes
• Définition des préférences des calques, page 162
• Gestion des calques, page 163
Affichage et définition des propriétés de plusieurs calques
Lorsque vous sélectionnez plusieurs calques, l’inspecteur de propriétés des calques affiche les
propriétés du texte et un sous-ensemble de propriétés de calque standard, ce qui vous permet de
modifier plusieurs calques simultanément.
Pour sélectionner plusieurs calques :
• Sélectionnez les calques en maintenant la touche Maj enfoncée (voir Sélection des calques,
page 164).
Pour afficher et définir les propriétés de plusieurs calques :
1 Sélectionnez plusieurs calques.
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur la flèche d’agrandissement
située dans le coin inférieur droit (si l’inspecteur est affiché en mode réduit) pour visualiser
toutes les propriétés.
3 Modifiez les attributs des calques en définissant les propriétés.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propriétés.
Rubriques connexes
• Définition des préférences des calques, page 162
• Affichage et définition des propriétés pour un seul calque, page 162
Gestion des calques
Vous pouvez travailler avec les calques que vous sélectionnez. Vous pouvez modifier l’ordre de
superposition et la visibilité des calques. Le panneau Calques permet de gérer facilement les
calques.
Utilisation du panneau Calques
Le panneau Calques vous permet de gérer les calques dans votre document. Utilisez le panneau
Calques pour empêcher les calques de se chevaucher, pour en modifier la visibilité, pour les
imbriquer ou les superposer et pour en sélectionner un ou plusieurs.
Les calques sont affichés sous la forme d’une liste de noms, dans l’ordre de l’index Z ; le premier
calque créé apparaît en bas de la liste et le dernier calque créé apparaît en haut de la liste.
Pour ouvrir le panneau Calques :
• Choisissez Fenêtre > Calques.
Gestion des calques
163
Pour afficher ou masquer les calques imbriqués :
• Cliquez sur les boutons Plus (+) ou Moins (–) (Windows) ou sur la flèche d’agrandissement
(Macintosh) en regard du nom du calque.
Les calques imbriqués s’affichent sous la forme de noms liés à des calques parents.
Rubriques connexes
• Insertion d’un calque, page 160
• Modification de l’ordre de superposition des calques, page 165
• visibilité des calques, page 166
Sélection des calques
Vous pouvez sélectionner un ou plusieurs calques pour les manipuler ou en modifier les
propriétés.
Pour sélectionner un calque dans le panneau Calques :
• Dans le panneau Calques (Fenêtre > Calques), cliquez sur le nom du calque.
Pour sélectionner un calque dans la fenêtre de document, procédez de l’une des manières
suivantes :
• Cliquez sur la poignée de sélection d’un calque.
Si la poignée n’est pas visible, cliquez n’importe où dans le calque pour la faire apparaître.
• Cliquez sur la bordure d’un calque.
• Cliquez à l’intérieur du calque en appuyant sur les touches Contrôle et Maj (Windows) ou
•
164
Commande et Maj (Macintosh).
Si plusieurs calques étaient sélectionnés, ils sont tous désélectionnés et seul le calque sur lequel
vous avez cliqué est sélectionné.
Cliquez sur le marqueur de calque (en mode Création) qui représente l’emplacement du calque
dans le code HTML.
S’il n’est pas visible, choisissez Affichage > Assistances visuelles > Eléments invisibles.
Chapitre 7 : Mise en forme des pages avec les styles CSS
Pour sélectionner plusieurs calques, procédez de l’une des manières suivantes :
• Dans le panneau Calques (Fenêtre > Calques), appuyez sur la touche Maj tout en cliquant sur
•
plusieurs noms de calques.
Dans la fenêtre de document, appuyez sur la touche Maj tout en cliquant à l’intérieur d’un ou
de plusieurs calques ou sur leur bordure.
Lorsque plusieurs calques sont sélectionnés, les poignées du dernier calque sélectionné
apparaissent en surbrillance noire. Les poignées des autres calques apparaissent en blanc.
Rubriques connexes
•
•
•
•
Insertion d’un calque, page 160
Définition des préférences et des propriété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étés ou le panneau Calques pour modifier l’ordre de superposition
des calques. Le calque situé dans le haut de la liste du panneau Calques est au premier rang de
l’ordre de superposition et apparaît avant les autres calques.
En code HTML, l’ordre de superposition, ou index Z, détermine l’ordre dans lequel les calques
sont dessinés dans un navigateur. Vous pouvez modifier l’index Z de chaque calque dans le
panneau Calques ou dans l’inspecteur de propriétés.
Pour modifier l’ordre de superposition des calques dans le panneau Calques :
1 Choisissez Fenêtre > Calques pour ouvrir le panneau Calques.
2 Procédez de l’une des manières suivantes :
■
■
Faites glisser un calque à l’emplacement désiré dans la hiérarchie de l’ordre de superposition.
Une ligne indiquant le futur emplacement du calque apparaît lorsque vous déplacez le
calque. Relâchez le bouton de la souris lorsque la ligne apparaît à l’emplacement souhaité
dans l’ordre de superposition.
Dans la colonne Z, cliquez sur le numéro du calque à modifier. Tapez ensuite une valeur
supérieure ou inférieure à la valeur existante pour dé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 à l’aide de l’inspecteur de propriétés :
1 Choisissez Fenêtre > Calques pour ouvrir le panneau Calques et visualiser l’ordre de
superposition en cours.
2 Sélectionnez un calque dans le panneau Calques ou dans la fenêtre de document.
3 Dans l’inspecteur de propriétés du calque (Fenêtre > Propriétés), tapez un nombre dans la zone
de texte Index Z.
■ Tapez une valeur supérieure pour « monter » le calque dans l’ordre de superposition.
■ Tapez une valeur inférieure pour « descendre » le calque dans l’ordre de superposition.
Rubriques connexes
• Utilisation du panneau Calques, page 163
Gestion des calques
165
• Sélection des calques, page 164
visibilité des calques
Lorsque vous travaillez sur votre document, vous pouvez afficher ou masquer les calques
manuellement, à l’aide du panneau Calques, pour voir comment la page apparaîtra dans
différentes situations.
Remarque : Le calque sélectionné devient toujours visible et apparaît devant les autres calques.
Pour modifier la visibilité d’un calque :
1 Choisissez Fenêtre > Calques pour ouvrir le panneau Calques.
2 Cliquez sur l’icône en forme d’œil pour en changer la visibilité.
■
■
■
Un œil ouvert signifie que le calque est visible.
Un œil fermé signifie que le calque est invisible.
Si l’icône de l’œil n’apparaît pas, le calque hérite de la visibilité de son parent (lorsque les
calques ne sont pas imbriqués, le calque parent correspond au corps du document, qui est
toujours visible).
Aucune icône en forme d’œil ne s’affiche lorsque la visibilité n’est pas indiquée (apparaît
dans l’inspecteur de propriétés comme Visibilité par défaut).
Pour modifier la visibilité de tous les calques à la fois :
• Dans le panneau Calques (Fenêtre > Calques), cliquez sur l’icône en forme d’œil en haut de la
colonne.
Remarque : Cette procédure permet de définir la visibilité ou la non-visibilité de tous les autres
calques, mais elle ne leur permet pas d’hé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électionner, déplacer,
redimensionner et aligner des calques. Vous devez sélectionner un calque pour pouvoir le
déplacer, le redimensionner ou l’aligner.
Pour empêcher les calques de se chevaucher lorsque vous les déplacez et redimensionnez, utilisez
l’option Empê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 à la fois pour qu’ils aient tous la même
largeur et la même hauteur.
Si l’option Empêcher le chevauchement est activé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éation, sélectionnez un calque (voir Sélection des calques, page 164).
2 Pour redimensionner le calque, procédez de l’une des manières suivantes :
■
■
■
■
Pour redimensionner le calque en le faisant glisser, faites glisser l’une des poignées.
Pour redimensionner le calque par incréments d’un pixel, maintenez la touche Ctrl
(Windows) ou Option (Macintosh) enfoncée tout en utilisant les touches fléchées.
Les flèches déplacent les bords droit et inférieur du calque ; cette technique ne permet pas de
redimensionner le calque en utilisant les bords supérieur et gauche.
Pour redimensionner en alignant sur la grille, appuyez sur Maj-Contrôle-flèche (Windows)
ou Maj-Option-flèche (Macintosh).
Pour plus d’informations sur la définition des incréments de la grille, voir Utilisation des
règles et des grilles pour la mise en forme des pages, page 170.
Dans l’inspecteur de propriétés (Fenêtre > Propriété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éfinit pas
la partie visible du contenu du calque. Pour définir la région visible d’un calque, voir Définition
des préférences et des propriétés de calques, page 162.
Pour redimensionner plusieurs calques à la fois :
1 En mode Création, sélectionnez au moins deux calques (voir Sélection des calques, page 164).
2 Procédez de l’une des manières suivantes :
Choisissez Modifier > Aligner > Même largeur ou Modifier > Aligner > Même hauteur.
Les premiers calques sélectionnés prendront la largeur ou la hauteur du dernier sélectionné
(dont le contour est affiché en surbrillance noire).
■ Dans l’inspecteur de propriétés (Fenêtre > Propriétés), sous Calques multiples, tapez les
valeurs de largeur et de hauteur.
Ces valeurs sont appliquées à tous les calques sélectionnés.
■
Rubriques connexes
• Alignement des calques, page 168
• Utilisation des règles et des grilles pour la mise en forme des pages, page 170
Déplacement des calques
Vous pouvez déplacer les calques en mode Création de la même manière que les objets dans la
plupart des applications graphiques de base.
Si l’option Empêcher le chevauchement est activée, vous ne pourrez pas déplacer un calque s’il
doit pour cela en chevaucher un autre (voir des calques, page 169).
Manipulation des calques
167
Pour déplacer un ou plusieurs calques sélectionnés :
1 En mode Création, sélectionnez un ou plusieurs calques (voir Sélection des calques, page 164).
2 Procédez de l’une des manières suivantes :
■
■
Pour déplacer des calques en les faisant glisser, sélectionnez-les et faites glisser la poignée de
sélection du dernier calque sélectionné (en surbrillance noire).
Pour déplacer l’image par incréments d’un pixel, utilisez les touches fléchées.
Maintenez la touche Maj enfoncée tout en appuyant sur les touches fléchées pour déplacer
le calque par incréments de la grille. Pour plus d’informations sur la définition des
incréments de la grille, voir Utilisation des règles et des grilles pour la mise en forme des pages,
page 170.
Rubriques connexes
• Redimensionnement des calques, page 167
• Utilisation des rè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ôtés du
dernier calque sélectionné.
Lors de l’alignement, les calques enfants qui ne sont pas sélectionnés seront déplacés en même
temps que leur parent, si celui-ci est sélectionné. Pour éviter ce déplacement, n’utilisez pas de
calques imbriqués.
Pour aligner plusieurs calques :
1 En mode Création, sélectionnez le calque (voir Sélection des calques, page 164).
2 Choisissez Modifier > Aligner, puis sélectionnez une option d’alignement.
Par exemple, si vous sélectionnez Haut, tous les calques se déplacent de façon telle que leurs
bordures supérieures sont au même niveau que celle du dernier calque sélectionné (en
surbrillance noire).
Rubriques connexes
• Redimensionnement des calques, page 167
• Déplacement des calques, page 167
• Utilisation des règles et des grilles pour la mise en forme des pages, page 170
Conversion des calques en tableaux
Pour créer leur mise en forme, certains concepteurs de pages Web préfèrent utiliser des calques
plutôt que des tableaux ou le mode Mise en forme. Dreamweaver vous permet de créer votre mise
en forme à l’aide de calques, puis de les convertir en tableaux, le cas échéant. Par exemple, il peut
être nécessaire de convertir les calques en tableaux pour pouvoir prendre en charge les navigateurs
antérieurs à la version 4.0.
Remarque : Il est impossible de convertir des calques en tableaux, ou vice-versa, dans un modèle de
document ou dans un document auquel un modèle a été appliqué. Dans ce cas, vous devez créer
votre mise en forme dans un document sans modèle et le convertir avant de l’enregistrer comme
modè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ésentation de la page. Vous ne pouvez pas convertir un tableau ou un calque donné
figurant sur une page. Il n’est possible de convertir des calques en tableaux et vice versa que pour
la totalité d’une page.
Remarque : La conversion de calques en tableaux peut engendrer la cré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éer de
tableau à partir de calques qui se chevauchent. Si vous envisagez de convertir les calques d’un
document en tableaux, activez l’option Empêcher le chevauchement pour restreindre le
déplacement et le positionnement des calques et en éviter le chevauchement.
Si cette option est activée, aucun calque ne peut être créé, déplacé ou redimensionné au-dessus
d’un calque existant, ni y être imbriqué. Si cette option est activée après la cré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êcher le chevauchement des calques.
Si cette option et l’option d’alignement sont activées, aucun calque ne sera aligné sur la grille si
cela doit causer un chevauchement de calques. Dans ce cas, le calque sera aligné sur le bord du
calque le plus proche.
Remarque : Certaines opérations autorisent le chevauchement des calques, même lorsque l’option
Empêcher le chevauchement est activée. Si vous insérez un calque en utilisant le menu Insertion, si
vous entrez les valeurs dans l’inspecteur de propriété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ée. En cas de chevauchement, faites glisser les calques qui se chevauchent
dans le mode Création pour les séparer.
Pour empêcher le chevauchement de calques, procédez de l’une des manières suivantes :
• Dans le panneau Calques (Fenêtre > Calques), activez l’option Empêcher le chevauchement.
• Dans la fenêtre de document, choisissez Modifier > Réorganiser > Empêcher le chevauchement
des calques.
calques et tableaux
Créez votre mise en forme à 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é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 > Convertir > Calques en tableau.
La boîte de dialogue Convertir les calques en tableau s’affiche.
2 Activez les options souhaitées.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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 > Convertir > Tableaux en calques.
La boîte de dialogue Convertir les tableaux en calques s’affiche.
2 Activez les options souhaitées.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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èdent une couleur d’arrière-plan.
Remarque : Les éléments de la page qui se trouvaient en dehors des tableaux sont également
placés dans les calques.
Utilisation des règles et des grilles pour la mise en forme des
pages
Utilisez les règles et les grilles pour vous guider visuellement dans le dessin et vous aider à
positionner ou redimensionner les éléments dans la fenêtre de création du document.
Vous pouvez afficher les règles graduées en pixels, pouces ou en centimètres sur les bords gauche et
supérieur de la page.
Vous pouvez aligner automatiquement des éléments de page sur la grille en les déplaçant, et
changer la grille ou définir le comportement d’alignement en indiquant des paramètres
spécifiques pour la grille. L’alignement fonctionne, que la grille soit visible ou non.
Pour modifier les paramètres des règles, procédez de l’une des manières suivantes :
• Pour activer et désactiver les règles, choisissez Affichage > Règles > Afficher.
• Pour changer l’origine, faites glisser l’icône de l’origine de la règle, située dans le coin supérieur
•
gauche de la fenêtre de document en mode Création, sur un point de la page.
Pour rétablir la position par défaut de l’origine, choisissez Affichage > Règles > Rétablir origine.
Pour changer d’unité de mesure, choisissez Affichage > Règles, puis Pixels, Pouces ou
Centimètres.
Pour afficher ou masquer la grille :
• Choisissez Affichage > Grille > Afficher la grille.
Pour activer l’alignement :
• Choisissez Affichage > Grille > Aligner sur la grille.
Pour modifier les paramètres de la grille :
1 Choisissez Affichage > Grille > Paramètres de la grille.
170
Chapitre 7 : Mise en forme des pages avec les styles CSS
La boîte de dialogue Paramètres de la grille apparaît.
2 Définissez les options de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• Redimensionnement des calques, page 167
• Déplacement des calques, page 167
• Alignement des calques, page 168
Utilisation du tracé de l’image
Vous pouvez utiliser un tracé de l’image comme guide pour reproduire une mise en page ayant été
créée dans une application graphique telle que Macromedia Freehand ou Fireworks.
Un tracé est une image JPG, GIF ou PNG qui apparaît à l’arrière-plan de la fenêtre de document.
Vous pouvez masquer cette image, définir son opacité et la déplacer.
Pour placer un tracé de l’image dans la fenêtre de document :
1 Procédez de l’une des manières suivantes :
Choisissez Affichage > Tracé de l’image > Charger.
■ Choisissez Modifier > Propriétés de la page, puis cliquez sur le bouton Parcourir situé à côté
de la zone de texte Tracé de l’image.
2 Dans la boîte de dialogue qui s’affiche, sélectionnez un fichier d’image, puis cliquez sur
Sélectionner (Windows) ou Choisir (Macintosh).
La boîte de dialogue Propriétés de la page s’affiche.
3 Définissez la transparence de l’image en faisant glisser le curseur Transparence de l’image, puis
cliquez sur OK.
■
Pour passer à un autre tracé ou modifier à tout moment la transparence du tracé en cours,
choisissez Modifier > Propriétés de la page.
Pour afficher ou masquer le tracé de l’image :
• Choisissez Affichage > Tracé de l’image > Afficher.
Le tracé de l’image n’est visible que dans Dreamweaver. Il est toujours invisible lorsque vous
affichez la page dans un navigateur. Lorsque le tracé de l’image est visible, les véritables image et
couleur d’arrière-plan de la page ne sont pas visibles dans la fenêtre de document, mais le sont
lorsque la page est affichée dans un navigateur.
Utilisation du tracé de l’image
171
Pour déplacer un tracé de l’image :
1 Sélectionnez Affichage > Tracé de l’image > Ajuster la position.
2 Procédez de l’une des manières suivantes :
■
■
■
Pour définir avec précision la position du tracé de l’image, indiquez les valeurs des
coordonnées dans les zones de texte X et Y.
Pour déplacer l’image par incréments d’un pixel, utilisez les touches fléchées.
Pour déplacer l’image par incrément de 5 pixels, appuyez simultanément sur la touche Maj
et sur l’une des touches fléchées.
Pour rétablir la position du tracé de l’image :
• Choisissez Affichage > Tracé de l’image > Rétablir la position.
Le tracé de l’image se replace dans le coin supérieur gauche de la fenêtre de document (0,0).
Pour aligner le tracé de l’image sur un élément sélectionné :
1 Sélectionnez un élément dans la fenêtre de document.
2 Choisissez Affichage > Tracé de l’image > Aligner l’image avec la sélection.
Le coin supérieur gauche du tracé de l’image est aligné avec le coin supérieur gauche de
l’élément sélectionné.
172
Chapitre 7 : Mise en forme des pages avec les styles CSS
CHAPITRE 8
Présentation de contenu à l’aide de tableaux
Les tableaux sont très utiles pour présenter des donné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éthodes pour afficher et modifier les tableaux :
le mode Standard, dans lequel les tableaux sont présentés comme une grille de lignes et de
colonnes, et le mode Mise en forme, qui permet de dessiner, redimensionner et dé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é de mettre vos pages en forme à 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ées tabulaires, page 176
Sélection d’éléments de tableau, page 177
Utilisation du mode Tableaux développé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ès utiles pour présenter des donné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énéralement pas spécifié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électionné ou que le point d’insertion se trouve dedans. En regard des largeurs se trouvent les
flèches du menu des en-têtes de tableau et des menus des en-têtes de colonne. Utilisez les menus
pour accéder rapidement à des commandes standard relatives aux tableaux. Vous pouvez activer
ou désactiver les largeurs et les menus à 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écifiée pour ces éléments dans le code HTML. Si deux nombres s’affichent, cela signifie que la
largeur visuelle d’une colonne telle qu’elle apparaît en mode Création ne correspond pas à la
largeur spécifiée dans le code HTML. Cela peut se produire lorsque vous redimensionnez un
tableau en faisant glisser son coin inférieur droit ou lorsque vous ajoutez du contenu à une cellule
plus grande que sa valeur définie.
Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du
contenu qui étend la largeur à 250 pixels, deux nombres s’affichent pour cette colonne : 200 (la
largeur spécifiée dans le code) et (250) entre parenthèses (la largeur visuelle de la colonne telle
qu’elle apparaît à l’é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é de mise en forme des tableaux dans le code HTML
Lorsque vous mettez des tableaux en forme en mode Création, vous pouvez définir des propriétés
s’appliquant au tableau tout entier ou à une série de lignes, de colonnes ou de cellules
sélectionnées dans le tableau. Lorsqu’une propriété, (une couleur d’arrière-plan ou un alignement,
par exemple) est définie par une valeur pour tout le tableau et par une autre valeur pour chaque
cellule, les propriétés de mise en forme des cellules prévalent sur les propriétés de mise en forme
de lignes, qui à leur tour prévalent sur les propriétés de mise en forme du tableau.
L’ordre de priorité pour la mise en forme de tableau est le suivant :
1 Cellules
2 Lignes
3 Tableau
Par exemple, si vous définissez une couleur bleue pour l’arriè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été de
mise en forme de cellule a la priorité sur la propriété de mise en forme du tableau.
Remarque : Lorsque vous définissez les propriétés d’une colonne, Dreamweaver modifie les
attributs de la balise td correspondant à chaque cellule de la colonne.
174
Chapitre 8 : Présentation de contenu à 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élection
correspond à une ligne ou à un rectangle de cellules) pour produire une cellule unique s’étendant
sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombre quelconque
de lignes et de colonnes, qu’elle ait été précédemment fusionnée ou non. Dreamweaver réorganise
automatiquement le tableau (en ajoutant les attributs colspan ou rowspan nécessaires) pour
obtenir l’agencement spécifié.
Dans l’illustration ci-dessous, les cellules au milieu des deux premières lignes ont été fusionnées en
une seule cellule qui s’é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érer pour créer un nouveau tableau. Ajoutez ensuite du texte et des
images aux cellules du tableau de la même faç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érer un tableau :
1 Dans la fenêtre Création du document, placez le point d’insertion à l’endroit où vous voulez que
le tableau apparaisse.
Remarque : Si votre document est vide, le point d’insertion peut uniquement être placé au début
du document.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Insertion > Tableau.
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Tableau.
Insertion d’un tableau et ajout de contenu
175
La boîte de dialogue Tableau s’affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Le tableau apparaît dans le document.
Rubriques connexes
• Affichage et définition des propriétés de tableau, de cellule, de ligne et de colonne, page 181
• Modification des attributs d’accessibilité d’un tableau, page 182
Importation et exportation de données tabulaires
Vous pouvez importer dans un tableau Dreamweaver des données tabulaires créées dans une autre
application (par exemple Microsoft Excel) et enregistrées dans un format texte délimité (éléments
séparés par des tabulations, virgules, deux-points, points-virgules ou autres délimiteurs).
Vous pouvez également exporter les données d’un tableau Dreamweaver vers un fichier texte, avec
le contenu de cellules contiguës séparé par un délimiteur. Les caractères que vous pouvez utiliser
comme délimiteurs sont la virgule, les deux-points, le point-virgule ou l’espace. Lorsque vous
exportez un tableau, tout le tableau est exporté ; vous ne pouvez pas exporter certaines parties du
tableau seulement.
Conseil : Si vous souhaitez ne récupérer qu’une partie des données d’un tableau, par exemple les six
premières lignes ou les six premières colonnes, copiez les cellules contenant ces données et collezles hors du tableau (pour créer un nouveau tableau) avant d’exporter le nouveau tableau.
Pour importer les données d’un tableau :
1 Procédez de l’une des manières suivantes :
■
■
176
Choisissez Fichier > Importer > Données tabulées.
Choisissez Insertion > Objets du tableau > Importer les données tabulaires.
Chapitre 8 : Présentation de contenu à l’aide de tableaux
La boîte de dialogue Importer les données tabulaires s’affiche.
2 Dans la boîte de dialogue, entrez des informations sur le fichier contenant vos données.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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 > Exporter > Tableau.
La boîte de dialogue Exporter tableau s’affiche.
3 Dans la boîte de dialogue Exporter tableau, spécifiez les options pour l’exportation du tableau.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur Exporter.
La boîte de dialogue Exporter tableau sous s’affiche.
5 Entrez le nom du fichier.
6 Cliquez sur Enregistrer.
Sélection d’éléments de tableau
Vous pouvez sélectionner un tableau entier ou encore l’ensemble d’une ligne ou d’une colonne.
Vous pouvez également sélectionner une ou plusieurs cellules individuelles.
Lorsque vous déplacez le pointeur sur un tableau, une ligne, une colonne ou une cellule,
Dreamweaver met toutes les cellules de cette sélection en surbrillance afin que vous sachiez quelles
cellules seront sélectionnées lorsque vous cliquerez sur la sélection. Ceci est utile pour les tableaux
sans bordures, les cellules comprenant plusieurs colonnes ou lignes ou dans le cas de tableaux
imbriqués. Vous pouvez modifier la couleur de la mise en surbrillance dans les préférences.
Sélection d’élé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ée, la totalité de la structure du tableau (c’est-àdire toutes les cellules) est mise en surbrillance. Ceci peut être utile lorsque vous disposez de tableaux
imbriqués et que vous souhaitez afficher la structure de l’un d’eux.
Pour modifier la couleur de surbrillance pour la sélection des éléments de tableau :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3 Effectuez l’une des modifications suivantes :
■ Pour modifier la couleur de surbrillance des éléments du tableau, cliquez dans la case de
couleur Survol et sélectionnez une couleur de surbrillance à l’aide du sélecteur de couleur
(ou tapez la valeur hexadécimale correspondant à 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ésactiver la surbrillance des éléments du tableau, activez ou désactivez la
case à 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é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élection d’une table
Plusieurs méthodes vous permettent de sélectionner un tableau entier.
Pour sélectionner un tableau entier, procédez de l’une des manières suivantes :
• Cliquez dans le coin supérieur gauche du tableau, sur le bord supérieur ou inférieur du tableau
ou sur une ligne ou une bordure de colonne.
Remarque : Le pointeur prend la forme de l’icône de grille du tableau pour vous indiquer que vous
pouvez sé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électionnez la balise <table> dans le sélecteur de
•
•
178
balises dans le coin inférieur gauche de la fenêtre de document.
Cliquez dans une cellule du tableau, puis choisissez Modifier > Tableau > Sélectionner le
tableau.
Cliquez dans une cellule du tableau, puis sur le menu d’en-tête du tableau et choisissez
Sélectionner le tableau.
Chapitre 8 : Présentation de contenu à l’aide de tableaux
Des poignées de sélection apparaissent sur les bords inférieurs et droits du tableau sélectionné.
Rubriques connexes
• Sélection de cellules, page 179
Sélection de lignes ou de colonnes
Vous pouvez sélectionner une ligne ou une colonne individuelle, ou plusieurs lignes ou colonnes.
Pour sélectionner une ou plusieurs lignes ou colonnes :
1 Positionnez le pointeur sur le bord gauche d’une ligne ou le bord supérieur d’une colonne.
2 Lorsque le pointeur se transforme en flèche de sélection, cliquez pour sélectionner une ligne ou
une colonne ou faites-le glisser pour sélectionner plusieurs lignes ou colonnes.
Pour sélectionner une seule colonne :
1 Cliquez dans la colonne.
2 Cliquez sur le menu des en-têtes de colonne, puis choisissez Sélectionner la colonne.
Rubriques connexes
• Sélection d’une table, page 178
Sélection de cellules
Vous pouvez sélectionner une cellule individuelle, une ligne ou un bloc de cellules, ou encore des
cellules non contiguës. Pour sélectionner des lignes ou des colonnes entières, voir Sélection de
lignes ou de colonnes, page 179.
Pour sélectionner une seule cellule, procédez de l’une des manières suivantes :
• Cliquez dans la cellule, puis sélectionnez la balise <td> dans le sélecteur de balises dans le coin
inférieur gauche de la fenêtre de document.
Sélection d’éléments de tableau
179
• Cliquez dans la cellule en maintenant la touche Ctrl (Windows) ou Commande (Macintosh)
•
enfoncée.
Cliquez dans la cellule, puis choisissez Edition > Sélectionner tout.
Conseil : Lorsqu’une cellule est déjà sélectionnée, choisissez Edition > Sélectionner tout à
nouveau pour sélectionner tout le tableau.
Pour sélectionner une ligne ou un bloc rectangulaire de cellules, procédez de l’une des
manières suivantes :
• Faites glisser la souris d’une cellule à une autre.
• Cliquez sur une cellule. Tout en appuyant sur la touche Ctrl (Windows) ou Commande
(Macintosh), cliquez sur la même cellule, puis cliquez dans une autre cellule en maintenant la
touche Maj enfoncée.
Toutes les cellules se trouvant à l’intérieur de la zone rectangulaire ou linéaire ainsi délimitée
par les deux cellules sont sélectionnées.
Pour sélectionner des cellules non contiguës :
• Appuyez sur Ctrl (Windows) ou Commande (Macintosh), puis cliquez sur les cellules, les
lignes ou les colonnes que vous voulez sélectionner.
Si chaque cellule, ligne ou colonne sur laquelle vous cliquez après avoir appuyé sur Ctrl ou sur
Commande n’est pas déjà sélectionnée, elle est ajoutée à la sélection. Si elle est déjà
sélectionnée, elle est retirée de la sélection.
Rubriques connexes
• Sélection d’une table, page 178
Utilisation du mode Tableaux développés pour une modification
de tableau plus simple
Le mode Tableaux développés ajoute provisoirement de la marge à l’intérieur des cellules et de
l’espacement à 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 éléments dans les
tableaux ou de placer le point d’insertion de manière précise.
Par exemple, vous pouvez développer un tableau pour placer le point d’insertion à gauche ou à
droite d’une image, sans sélectionner l’image ou la cellule du tableau par inadvertance.
180
Chapitre 8 : Présentation de contenu à l’aide de tableaux
Remarque : Après avoir choisi ou placé le point d’insertion, vous devez revenir au mode Standard du
mode Création pour effectuer vos modifications. En mode Tableaux développés, certaines
opérations, telles que le redimensionnement, ne produisent pas les résultats attendus.
Pour passer au mode Tableaux développés :
1 Si vous travaillez en mode Code, choisissez Affichage > Création ou Affichage > Code et
création.
Il est impossible d’activer le mode Tableaux développés en mode Code.
2 Procédez de l’une des manières suivantes :
■ Choisissez Affichage > Mode Tableau > Mode Tableaux développés.
■ Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Développé.
Une barre intitulée Mode Tableaux développés apparaît en haut de la fenêtre de document.
Dreamweaver ajoute de la marge à l’intérieur des cellules et de l’espacement à tous les tableaux de
la page et augmente les bordures des tableaux.
Pour passer au mode Tableaux développés, procédez de l’une des manières suivantes :
• Cliquez sur [quitter] dans la barre intitulée Mode Tableaux développés en haut de la fenêtre de
document.
• Choisissez Affichage > Mode Tableau > Mode Standard.
• Dans la catégorie Mise en forme de la barre Insé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éfinissant des propriétés pour l’ensemble ou une
partie de leurs cellules, ou en leur appliquant une mise en forme prédéfinie. Avant de définir les
propriétés des tableaux et des cellules, il est judicieux de comprendre quelles propriétés ont
priorité sur les autres (voir Priorité 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ême procé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éfinition des propriétés de tableau, de cellule, de ligne et de
colonne
Lorsqu’un tableau ou une cellule est sélectionné, l’inspecteur de propriétés vous permet de
visualiser et de modifier ses propriétés.
Remarque : Avant de modifier les propriétés des éléments de tableau, il est judicieux de comprendre
quelles propriétés ont priorité sur les autres (voir Priorité de mise en forme des tableaux dans le
code HTML, page 174).
Pour afficher et définir les propriétés des tableaux et les propriétés d’un élément de tableau :
1 Sélectionnez un tableau, une cellule, une ligne ou une colonne (voir Sélection d’éléments de
tableau, page 177).
Mise en forme des tableaux et des cellules
181
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur la flèche d’agrandissement
située dans le coin inférieur droit pour visualiser toutes les propriétés.
3 Modifiez les propriétés de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propriétés.
Remarque : Lorsque vous définissez les propriétés d’une colonne, Dreamweaver modifie les
attributs de la balise td correspondant à chaque cellule de la colonne. Lorsque vous définissez
certaines propriétés d’une ligne, Dreamweaver modifie les attributs de la balise tr plutôt que de
modifier les attributs de chaque balise td dans la ligne. Lorsque vous appliquez le même format à
toutes les cellules d’une ligne, en appliquant le format à la balise tr, vous obtenez un code HTML
plus net et plus concis.
Modification des attributs d’accessibilité d’un tableau
Si vous n’avez pas ajouté d’attributs d’accessibilité à 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é, vous pouvez le faire en mode Code ou Création.
Pour ajouter ou modifier les valeurs d’accessibilité d’un tableau en mode Code :
• Modifiez les attributs dans le code.
Conseil : Pour repérer rapidement les balises dans le code, cliquez dans le tableau, puis
sélectionnez la balise <table> dans le sélecteur de balises situé au bas de la fenêtre de document.
Pour ajouter ou modifier les valeurs d’accessibilité d’un tableau en mode Création, procédez
de l’une des manières suivantes :
• Pour modifier la légende du tableau, mettez-la en surbrillance, puis tapez une nouvelle légende.
• Pour modifier l’alignement de la légende du tableau, placez le point d’insertion dans la légende,
•
cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Modifier le code de la balise.
Pour modifier le résumé du tableau, sélectionnez le tableau, cliquez du bouton droit de la
souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez
Modifier le code de la balise.
Rubriques connexes
• Affichage et définition des propriétés de tableau, de cellule, de ligne et de colonne, page 181
Utilisation d’un modèle de mise en forme pour formater un tableau
Utilisez la commande Formater le tableau pour appliquer rapidement une mise en forme
prédéfinie à un tableau. Vous pouvez alors choisir des options de mise en forme.
Remarque : Seuls les tableaux simples peuvent être mis en forme à l’aide de conceptions
prédéfinies. Vous ne pouvez pas utiliser ces conceptions pour mettre en forme des tableaux
contenant des cellules fusionné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édéfinie :
1 Sélectionnez un tableau (voir Sélection d’une table, page 178).
2 Choisissez Commandes > Formater le tableau.
182
Chapitre 8 : Présentation de contenu à l’aide de tableaux
La boî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îte de dialogue.
4 Cliquez sur Appliquer ou sur OK pour mettre en forme votre tableau avec la mise en forme
sélectionné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èmes pour le redimensionnement, vous pouvez
effacer la largeur des colonnes ou la hauteur des lignes et recommencer.
Les largeurs de colonne définies dans le code HTML ne correspondent pas nécessairement aux
largeurs apparentes à l’é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êtes pour vous aider à
mettre les tableaux en forme. Vous pouvez activer ou désactiver ces informations à votre
convenance.
Redimensionnement d’un tableau
Vous pouvez redimensionner un tableau en faisant glisser l’une de ses poignées de sélection.
Dreamweaver affiche la largeur du tableau, ainsi que le menu des en-têtes du tableau, en haut ou
en bas du tableau lorsque celui-ci est sélectionné ou que le point d’insertion se trouve dedans.
Remarque : Vous pouvez activer ou désactiver ces informations à 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écifiées explicitement, le
redimensionnement du tableau modifie la taille visuelle des cellules dans la fenêtre de document
mais ne modifie pas la largeur et la hauteur spécifiées des cellules. Pour effacer les largeurs et les
hauteurs définies, voir Suppression des largeurs et hauteurs définies, page 186.
Pour redimensionner un tableau :
1 Sélectionnez le tableau (voir Sélection d’une table, page 178).
Des poignées de sélection s’affichent sur le tableau.
2 Procédez de l’une des manières suivantes :
■
■
■
Pour redimensionner le tableau horizontalement, faites glisser la poignée de sélection vers la
droite.
Pour redimensionner le tableau verticalement, faites glisser la poignée de sélection vers le
bas.
Pour redimensionner le tableau verticalement et horizontalement, faites glisser la poignée de
sélection vers le coin infé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étés ou en faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des
problè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éfinies, page 186).
Remarque : Vous pouvez aussi modifier la largeur et la hauteur des cellules directement dans le code
HTML à 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êtes de colonne, en haut
ou en bas des colonnes lorsque le tableau est sélectionné 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ésactiver ces informations à 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ême largeur de tableau :
• Faites glisser la bordure droite de la colonne à modifier.
184
Chapitre 8 : Présentation de contenu à l’aide de tableaux
La largeur de la colonne contiguë est également modifiée, si bien que vous redimensionnez
deux colonnes. L’affichage visuel vous montre la manière dont les colonnes seront ajusté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ême droite du tableau, la largeur du tableau est modifié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ée, puis faites glisser la bordure de la colonne.
Seule la largeur de cette colonne change. L’affichage visuel vous montre la manière dont les
colonnes seront ajustées, la largeur totale du tableau variant en fonction de la colonne
redimensionnée.
Pour modifier la hauteur d’une ligne visuellement :
• Faites glisser la bordure inférieure de la ligne.
Pour définir la largeur d’une colonne ou la hauteur d’une ligne à l’aide de l’inspecteur de
propriétés :
1 Sélectionnez une colonne ou une ligne (voir Sélection de lignes ou de colonnes, page 179).
2 Dans l’inspecteur de propriétés (Fenêtre > Propriété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étés.
Conseil : Vous pouvez spé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ée (Windows) ou Retour (Macintosh) pour appliquer la valeur.
Rubriques connexes
• Redimensionnement d’un tableau, page 183
• Suppression des largeurs et hauteurs dé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éfinie dans
le code HTML est différente de la largeur apparente à l’é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êtes de colonne, puis choisissez Uniformiser toutes les largeurs.
Dreamweaver redéfinit la largeur spécifié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éfinies
Pour recommencer depuis le début, il peut être utile d’effacer les largeurs et les hauteurs définies
avant de redimensionner un tableau ou en cas de problè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ées de
sélection, vous modifiez la dimension visuelle des cellules dans le tableau mais vous ne modifiez pas
les largeurs et hauteurs spécifiées des cellules. Il est judicieux de supprimer des largeurs et des
hauteurs définies avant le redimensionnement.
Pour effacer toutes les largeurs et les hauteurs définies dans un tableau :
1 Sélectionnez le tableau (voir Sélection d’une table, page 178).
2 Procédez de l’une des manières suivantes :
■
■
■
186
Choisissez Modifier > Tableau > Effacer les largeurs de colonnes ou Modifier > Tableau >
Effacer les hauteurs de cellules.
Dans l’inspecteur de propriétés (Fenêtre > Propriété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êtes de colonne, puis choisissez Effacer toutes les hauteurs ou
Effacer toutes les largeurs.
Chapitre 8 : Présentation de contenu à l’aide de tableaux
Pour effacer une largeur de colonne définie :
1 Cliquez dans la colonne.
2 Cliquez sur le menu des en-tê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èches permettant
d’accéder au menu des en-têtes du tableau et aux menus des en-têtes des colonnes, lorsque le
tableau est sélectionné 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ésactiver ces informations à votre
convenance.
Pour activer ou désactiver les largeurs et les menus de tableau et de colonnes, procédez de
l’une des manières suivantes :
• Choisissez Affichage > Assistances visuelles > Largeurs de tableau.
• Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) dans le tableau, puis choisissez Tableau > 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 à l’aide des commandes Modifier > Tableau ou
du menu des en-têtes de colonne.
Conseil : Le fait d’appuyer sur la touche de tabulation lorsque le curseur se trouve dans la dernière
cellule d’un tableau ajoute automatiquement une ligne.
Pour ajouter une ligne ou une colonne individuelle :
1 Cliquez dans une cellule.
2 Procédez de l’une des manières suivantes :
■
Choisissez Modifier > Tableau > Insérer une ligne ou Modifier > Tableau > Insérer une
colonne.
Une ligne apparaît au-dessus du point d’insertion ou une colonne apparaît à gauche du
point d’insertion.
Ajout et suppression de lignes et de colonnes
187
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une colonne à gauche ou
Insérer une colonne à droite.
Une colonne s’affiche à gauche ou à droite du point d’insertion.
Pour ajouter plusieurs lignes ou colonnes :
1 Cliquez dans une cellule.
2 Choisissez Modifier > Tableau > Insérer des lignes ou des colonnes.
La boîte de dialogue Insérer des lignes ou des colonnes s’affiche.
3 Choisissez Lignes ou Colonnes, puis complétez la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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édez de l’une des manières suivantes :
• Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer, puis choisissez
Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la colonne.
• Sélectionnez une ligne ou une colonne entière (voir Sélection de lignes ou de colonnes, page 179),
puis choisissez Edition > Effacer ou appuyez sur la touche Suppr.
La ligne ou la colonne entière disparaît du tableau.
Pour ajouter ou supprimer des lignes ou des colonnes en utilisant l’inspecteur de propriétés :
1 Sélectionnez le tableau (voir Sélection d’une table, page 178).
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), procédez de l’une des manières
suivantes :
■ Augmentez ou ré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éduisez la valeur indiquant le nombre de colonnes pour en ajouter ou en
supprimer.
Dreamweaver ajoute ou supprime des colonnes à droite du tableau.
Remarque : Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes
contenant des données.
Rubriques connexes
• Insertion d’un tableau répété, page 246
• Affichage de plusieurs résultats d’un jeu d’enregistrements, page 587
188
Chapitre 8 : Présentation de contenu à l’aide de tableaux
Fractionnement et fusion de cellules
Utilisez l’inspecteur de propriétés ou les commandes du sous-menu Modifier > 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 également d’augmenter ou de
réduire le nombre de lignes et de colonnes occupées par une cellule.
Pour fusionner deux cellules ou plus d’un tableau :
1 Sélectionnez les cellules dans une ligne contiguë et sous forme rectangulaire.
Dans l’illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc
être fusionnées.
Dans l’illustration ci-dessous, la sélection n’est pas un rectangle ; les cellules ne peuvent donc
pas être fusionnées.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Modifier > Tableau > Fusionner les cellules.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés) en mode agrandi, cliquez sur le
bouton Fusionner les cellules.
Remarque : Si le bouton n’est pas visible, cliquez sur la flèche dans le coin inférieur droit de
l’inspecteur de propriétés pour afficher toutes les options.
Le contenu des cellules individuelles est placé dans la cellule produite par la fusion. Les
propriétés de la première cellule sélectionnée sont appliquées à la cellule fusionnée.
Pour fractionner une cellule :
1 Cliquez dans la cellule.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Modifier > Tableau > Fractionner la cellule.
Dans l’inspecteur de propriétés (Fenêtre > Propriété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èche dans le coin inférieur droit de
l’inspecteur de propriétés pour afficher toutes les options.
3 Dans la boîte de dialogue Fractionner la cellule, spécifiez comment vous voulez fractionner la
cellule.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Pour augmenter ou réduire le nombre de lignes ou de colonnes occupées par une cellule :
1 Sélectionnez une cellule.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Modifier > Tableau > Augmenter l’étendue de ligne ou Modifier > Tableau >
Augmenter l’étendue de colonne.
Choisissez Modifier > Tableau > Réduire l’étendue de ligne ou Modifier > Tableau > Réduire
l’étendue de colonne.
Copie, collage et suppression de cellules
Vous pouvez copier, coller ou supprimer une ou plusieurs cellules tout en préservant leur mise en
forme.
Vous pouvez coller les cellules au niveau d’un point d’insertion ou à la place d’une sé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élection du tableau dans laquelle les
cellules seront collées.
Pour couper ou copier les cellules d’un tableau :
1 Sélectionnez une ou plusieurs cellules dans une ligne contiguë et sous forme rectangulaire.
Dans l’illustration ci-dessous, la sélection est un rectangle de cellules ; les cellules peuvent donc
être coupées ou copiées.
Dans l’illustration ci-dessous, la sélection n’est pas un rectangle ; les cellules ne peuvent donc
pas être coupées ou copiées.
2 Choisissez Edition > Couper ou Edition > Copier.
190
Chapitre 8 : Présentation de contenu à l’aide de tableaux
Remarque : Si vous avez sélectionné une ligne ou une colonne entière et que vous choisissez
Edition > Couper, la ligne ou la colonne entière est supprimée du tableau (et non pas seulement le
contenu des cellules).
Pour coller des cellules de tableau :
1 Choisissez l’emplacement où coller les cellules :
■
■
■
Pour remplacer des cellules existantes par les cellules que vous collez, sélectionnez une série
de cellules existantes dont la mise en forme est la même que celle des cellules du Pressepapiers.
Par exemple, si vous avez copié ou coupé un bloc de 3 x 2 cellules, vous pouvez sélectionner
un autre bloc de 3 x 2 cellules pour le remplacer par les cellules coupées ou copiées.
Pour coller une ligne entière de cellules au-dessus d’une cellule spécifique, cliquez dans celleci.
Pour coller une colonne entière de cellules à gauche d’une cellule spécifique, cliquez dans
celle-ci.
Remarque : Si vous avez placé moins d’une ligne ou d’une colonne entiè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é et les cellules voisines
(selon leur emplacement dans le tableau) soient remplacées par les cellules que vous avez
collées.
Pour créer un nouveau tableau avec les cellules collées, placez le point d’insertion hors du
tableau.
2 Sélectionnez Edition > Coller.
Si vous collez des lignes ou des colonnes entiè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électionnée est remplacé.
Si vous collez le contenu du Presse-papiers en dehors d’un tableau, les lignes, colonnes ou
cellules que vous collez sont utilisées pour définir un nouveau tableau.
■
Pour supprimer le contenu d’une cellule en conservant les cellules intactes :
1 Sélectionnez une ou plusieurs cellules.
Remarque : Veillez à ce que la sélection ne comprenne pas de lignes ou de colonnes entières.
2 Choisissez Edition > Effacer ou appuyez sur la touche Suppr.
Remarque : Si seules des lignes ou des colonnes entières sont sélectionnées lorsque vous
choisissez Edition > Effacer ou que vous appuyez sur Suppr, les lignes ou les colonnes entières (pas
seulement leurs contenus) sont supprimées du tableau.
Pour effacer des lignes ou des colonnes contenant des cellules fusionnées :
1 Sélectionnez une ligne ou une colonne.
2 Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la
colonne.
Copie, collage et suppression de cellules
191
Imbrication de tableaux
Un tableau imbriqué est un tableau à l’intérieur d’une cellule d’un autre tableau. Vous pouvez le
mettre en forme comme n’importe quel tableau, mais sa largeur est limitée par la largeur de la
cellule dans laquelle il se trouve.
Pour imbriquer un tableau à l’intérieur d’une cellule de tableau :
1 Cliquez dans une cellule du tableau.
2 Choisissez Insertion > Tableau.
La boîte de dialogue Tableau s’affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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
é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-à-dire les
tableaux contenant des cellules fusionnées. Pour plus d’informations, voir Fractionnement et fusion
de cellules, page 189.
Pour trier un tableau :
1 Sélectionnez le tableau (voir Sélection d’une table, page 178) ou cliquez dans une cellule.
2 Choisissez Commandes > Trier le tableau.
La boîte de dialogue Trier le tableau s’affiche.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
192
Chapitre 8 : Présentation de contenu à l’aide de tableaux
CHAPITRE 9
Mise en forme des pages avec le mode
Mise en forme
Une méthode courante pour créer une mise en page consiste à utiliser des tableaux HTML pour
positionner les éléments. Cependant, il peut être difficile d’utiliser les tableaux pour les mises en
page, car ils ont été créés à l’origine pour afficher des donné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 à votre disposition un mode Mise en forme.
En mode Mise en forme, vous pouvez créer votre page en utilisant des tableaux comme structure
sous-jacente, tout en évitant certains problèmes qui surviennent souvent lors de la création de
pages réalisée à partir de tableaux à l’aide de méthodes traditionnelles.
Remarque : Pour plus d’informations sur l’utilisation de tableaux en mode Standard, voir Chapitre 8,
Présentation de contenu à l’aide de tableaux, page 173. Vous pouvez également effectuer la mise en
page à 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é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éplacement de cellules et tableaux de Mise en forme, page 202
Formatage de cellules et de tableaux de Mise en forme, page 204
Définition de la largeur des colonnes, page 204
Définition de préfé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 à 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érieur de votre page pour y placer une image d’en-tête, une autre cellule sur le
côté gauche pour y placer une barre de navigation et une troisième cellule sur la droite pour les
contenus. Lorsque vous ajoutez du contenu, vous pouvez déplacer les cellules afin d’ajuster la mise
en forme.
193
Conseil : Pour bénéficier d’une flexibilité maximale, vous pouvez dessiner chaque cellule uniquement
lorsque vous ê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é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éfaut, voir Définition
de préfé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é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 à l’aide de plusieurs cellules de mise en
forme à l’intérieur d’un même tableau. Il s’agit de la méthode la plus utilisée sur les pages Web.
Vous pouvez également effectuer une mise en forme plus sophistiquée à l’aide de plusieurs
tableaux. L’utilisation de plusieurs tableaux permet d’isoler certaines zones afin qu’elles ne soient
pas affectées par les changements opérés dans d’autres.
Vous pouvez également imbriquer des tableaux, c’est-à-dire insérer un nouveau tableau de mise en
forme dans un tableau existant (voir Dessin d’un tableau de Mise en forme imbriqué, page 199). Ce
procédé 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ées avec celles qui figurent ailleurs dans la mise en forme. Par
exemple, en utilisant des tableaux imbriqués, vous pouvez facilement créer une mise en forme à
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é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électionné ou lorsque le
point d’insertion se trouve à l’intérieur. Près de la largeur se trouvent des flèches permettant
d’ouvrir les menus d’en-tête de tableau et de colonne. Vous pouvez accéder rapidement à des
commandes courantes à l’aide de ces menus.
Remarque : Pour désactiver la largeur des colonnes, ainsi que les onglets de tableau et les menus
d’en-tête, vous devez désactiver toutes les assistances visuelles (Affichage > Assistances visuelles >
Masquer tout).
Parfois, la largeur d’une colonne ne s’affiche pas. Elle peut alors être remplacée par l’un des
élé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écifiée dans le code HTML. Pour spécifier une largeur fixe, voir Application
de l’extension automatique ou d’une largeur fixe à une colonne, page 204.
Deux nombres. Si deux nombres s’affichent, cela signifie que la largeur visuelle qui apparaît en
mode Création est différente de la largeur spécifiée dans le code HTML. Cela peut se produire
lorsque vous redimensionnez un tableau en faisant glisser son coin inférieur droit ou lorsque
vous ajoutez du contenu à une cellule plus grande que sa valeur définie.
Par exemple, si vous définissez une largeur de colonne de 200 pixels, puis que vous ajoutez du
contenu qui étend la largeur à 250 pixels, deux nombres s’affichent en haut de la colonne : 200
(la largeur spécifiée dans le code) et (250) entre parenthèses (la largeur visuelle de la colonne
telle qu’elle apparaît à l’écran).
Pour uniformiser les largeurs de colonne, voir Uniformisation des largeurs de colonne en mode
Code avec les largeurs visuelles, page 206.
Ligne ondulée. Une ligne ondulée s’affiche pour les colonnes dont l’option Extension
automatique est activé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 à
une colonne, page 204.
Barre double. La largeur des colonnes qui contiennent des images d’espacement est entouré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é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 à aligner les nouvelles cellules avec les anciennes et à 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és sur ceux du tableau de Mise en forme qui les contient si vous dessinez
une cellule à proximité du bord d’un tableau.
Vous pouvez é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è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 à extension automatique
En mode Mise en forme, une colonne peut avoir une largeur fixe ou une largeur qui s’étend
automatiquement pour remplir autant que possible la fenêtre du navigateur (extension
automatique).
Les colonnes à largeur fixe ont une largeur numérique spécifique, par exemple 300 pixels.
Dreamweaver affiche la largeur de chacune en haut ou en bas de la colonne.
Les colonnes à extension automatique changent automatiquement selon la largeur de la fenêtre
du navigateur. Si votre mise en forme inclut une colonne d’extension automatique, elle remplit
toujours la largeur totale de la fenêtre de navigateur de l’utilisateur. Dans un tableau de Mise en
forme, vous ne pouvez appliquer l’extension automatique qu’à une seule colonne. Une ligne
ondulée s’affiche dans la zone de largeur des colonnes à extension automatique.
La mise en page la plus courante consiste à appliquer l’extension automatique à la colonne qui
contient le plus grand nombre de données, la largeur fixe étant attribuée à toutes les autres
colonnes. Supposons, par exemple, que votre mise en page comporte une grande image sur le côté
gauche de votre page et une colonne de texte sur la droite. Vous pouvez dans ce cas définir une
largeur fixe pour la colonne de gauche et une extension automatique pour la zone d’encadré.
Lorsque vous attribuez une extension automatique à une colonne, Dreamweaver insère des images
d’espacement dans les colonnes à largeur fixe pour garantir que ces colonnes conservent une
largeur appropriée, sauf si vous désactivez cette option. Une image d’espacement est une image
transparente, donc invisible dans la fenêtre du navigateur, utilisée pour contrôler l’espacement.
Rubriques connexes
• Application de l’extension automatique ou d’une largeur fixe à 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 (également appelée GIF d’espacement) est une image transparente utilisée
pour contrô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’étendre à une largeur bien précise en termes de
pixels. Un navigateur ne peut pas dessiner une colonne de tableau plus étroite que l’image la plus
large contenue dans une des cellules de cette colonne. Par conséquent, placer une image
d’espacement dans la colonne d’un tableau né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 à une colonne, sauf si vous désactivez cette option. Vous pouvez
également insé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érer et supprimer manuellement des images d’espacement dans des colonnes
spé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é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 à vos tableaux ou de les modifier.
Remarque : Si vous créez un tableau en mode Standard, puis que vous basculez en mode Mise en
forme, le tableau créé peut contenir des cellules de mise en forme vides. Vous devrez peut-être
supprimer ces cellules vides avant de créer ou de déplacer des cellules.
Pour passer en mode Mise en forme :
1 Si vous travaillez en mode Code, choisissez Affichage > Création ou Affichage > Code et
création.
Vous ne pouvez pas passer du mode Code au mode Mise en forme.
2 Procédez de l’une des manières suivantes :
■ Choisissez Affichage > Mode Tableau > Mode Mise en forme.
■ Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Mise en forme.
Une barre étiquetée Mode Mise en forme s’affiche en haut de la fenê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édez de l’une des manières suivantes :
• Cliquez sur [quitter] sur la barre étiquetée Mode Mise en forme située en haut de la fenêtre de
•
•
document.
Choisissez Affichage > Mode Tableau > Mode Standard.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Standard.
Dreamweaver repasse en mode Standard.
Basculement du mode Standard au mode Mise en forme
197
Ré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és dans d’autres tableaux. La grille d’alignement vous aide à aligner les cellules
(voir Utilisation des rè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éez une cellule de Mise en forme à l’extérieur d’un tableau,
Dreamweaver cré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é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ée automatiquement un tableau de Mise en forme, celui-ci remplit la page
entière du mode Création, même si vous modifiez la taille de votre fenêtre de document. Ce
tableau vous permet de dessiner des cellules de Mise en forme à n’importe quel endroit en mode
Création. Vous pouvez définir une taille spécifique pour le tableau en cliquant sur une bordure et
en faisant glisser les poigné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ésactiver la surbrillance ou en changer la couleur dans les
préférences.
Pour dessiner une cellule de Mise en forme :
1 Assurez-vous que vous êtes en mode Mise en forme (voir Basculement du mode Standard au mode
Mise en forme, page 197).
2 Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Dessiner la cellule de
Mise en forme.
Le pointeur se change en réticule (+).
3 Cliquez à l’endroit où vous souhaitez placer la cellule sur la page, puis faites glisser le pointeur
pour créer la cellule.
Conseil : Pour dessiner plusieurs cellules de Mise en forme sans avoir à sélectionner plusieurs fois
le bouton Dessiner la cellule de Mise en forme, maintenez la touche Ctrl (Windows) ou Commande
(Macintosh) enfoncée tout en cliquant sur le bouton Dessiner la cellule de Mise en forme. Tant que
vous maintenez la touche Ctrl ou Commande enfoncée, vous pouvez dessiner des cellules de
Mise en forme les unes après les autres
Si vous dessinez la cellule près du bord du tableau de mise en forme, les bords de la cellule
s’alignent automatiquement sur les bords du tableau. Pour désactiver temporairement
l’alignement, maintenez la touche Alt (Windows) ou Option (Macintosh) enfoncé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éfinition de préférences pour le mode Mise en forme, page 207.
Pour dessiner un tableau de Mise en forme :
1 Assurez-vous que vous ê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égorie Mise en forme de la barre Insérer, cliquez sur le bouton Tableau de Mise en
forme.
Le pointeur se change en réticule (+).
3 Placez le pointeur sur la page, puis faites-le glisser pour créer le tableau de Mise en forme.
Conseil : Pour dessiner plusieurs tableaux de Mise en forme sans avoir à sélectionner plusieurs
fois le bouton Dessiner le tableau de Mise en forme, maintenez la touche Ctrl (Windows) ou
Commande (Macintosh) enfoncée tout en cliquant sur le bouton Dessiner le tableau de Mise en
forme. Tant que vous maintenez la touche Ctrl ou Commande enfoncée, vous pouvez dessiner
des tableaux de Mise en forme les uns après les autres
Vous pouvez créer un tableau de Mise en forme dans une zone vide de votre mise en page,
autour d’autres cellules et tableaux ou à l’intérieur d’un tableau existant. Si votre page contient
des élé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être de document pour créer
davantage d’espace vide entre le bas du contenu existant et celui de la fenê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é, page 199.
Le tableau de Mise en forme s’affiche avec un contour vert. Pour modifier la couleur du contour,
voir Définition de préférences pour le mode Mise en forme, page 207.
Pour modifier les préférences de surbrillance des cellules de mise en forme :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Choisissez la caté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électionnez une couleur de surbrillance à l’aide du sélecteur de couleur (ou entrez la valeur
hexadécimale correspondant à 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ésactiver la mise en surbrillance, activez ou désactivez l’option Afficher de
la case Survol.
Remarque : Ces options s’appliquent à 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é
Vous pouvez dessiner un tableau de Mise en forme à l’intérieur d’un autre tableau pour créer un
tableau imbriqué. Les cellules qui se trouvent à l’intérieur d’un tableau imbriqué ne sont pas
affectées par les modifications apporté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éalisation de dessins en mode Mise en forme
199
Vous pouvez constituer plusieurs niveaux de tableaux imbriqués. Un tableau de Mise en forme
imbriqué ne peut pas ê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é dans un tableau plus grand.
Pour dessiner un tableau de Mise en forme imbriqué :
1 Assurez-vous que vous êtes en mode Mise en forme (voir Basculement du mode Standard au mode
Mise en forme, page 197).
2 Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Tableau de Mise en
forme.
Le pointeur se change en réticule (+).
3 Placez le curseur dans une zone vide (grise) d’un tableau de Mise en forme existant, puis faitesle glisser afin de créer le tableau imbriqué.
Remarque : Vous ne pouvez pas créer de tableau à l’intérieur d’une cellule de Mise en forme.
Vous pouvez créer un tableau de Mise en forme imbriqué 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 êtes en mode Mise en forme (voir Basculement du mode Standard au mode
Mise en forme, page 197).
2 Dans la catégorie Mise en forme de la barre Insérer, cliquez sur le bouton Tableau de Mise en
forme.
Le pointeur se change en ré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é apparaît autour des cellules ou tableaux existants.
Conseil : Si vous souhaitez qu’une cellule de Mise en forme existante s’adapte parfaitement à un
coin du nouveau tableau imbriqué, faites-la glisser vers l’emplacement souhaité ; le coin du
nouveau tableau s’aligne avec celui de la cellule. Vous ne pouvez pas opérer de glissement à partir
du milieu d’une cellule de Mise en forme, car il est impossible de créer de tableau à l’inté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 à des
cellules de Mise en forme tout comme vous le feriez en mode Standard. Cliquez dans la cellule où
vous souhaitez insérer un contenu, puis entrez du texte ou insérez un autre contenu.
Vous pouvez insé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éer des cellules de Mise en forme avant
d’ajouter du contenu (voir Ré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ù vous souhaitez ajouter du texte.
2 Procédez de l’une des manières suivantes :
■
■
Tapez le texte dans la cellule.
Si nécessaire, cette dernière s’étend automatiquement au fur et à mesure de la saisie.
Collez du texte copié depuis un autre document.
Pour plus d’informations, voir Insertion de texte, page 294.
La cellule de Mise en forme s’étend automatiquement au fur et à mesure que vous y ajoutez des
données. Lorsque la cellule s’étend, la colonne contenant cette cellule s’étend également, ce qui
peut modifier la taille des cellules voisines. La largeur de cette colonne affiche la largeur qui
apparaît dans le code, suivie de la largeur visuelle de la colonne (telle qu’elle apparaît sur votre
écran) entre parenthèses. Pour plus d’informations sur la largeur des colonnes, voir Définition de
la largeur des colonnes, page 204.
Pour ajouter une image à une cellule de Mise en forme :
1 Placez le point d’insertion dans la cellule de Mise en forme où vous souhaitez ajouter l’image.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Insertion > Image.
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Images, puis
choisissez Image.
Conseil : Si le bouton Image est affiché (comme dans l’exemple suivant) dans la barre Insérer,
vous pouvez cliquer dessus au lieu d’utiliser le menu déroulant.
La boîte de dialogue Sé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ît dans la cellule de Mise en forme.
Suppression automatique des hauteurs de cellule
Lorsque vous créez une cellule de Mise en forme, Dreamweaver spécifie automatiquement une
hauteur pour la cellule, afin que celle-ci, même vide, s’affiche à la hauteur que vous avez dessinée.
Une fois que vous avez inséré du contenu dans la cellule, il n’est pas forcément nécessaire de
spécifier la hauteur. Vous pouvez alors supprimer les hauteurs de cellule explicites du tableau.
Pour ce faire, procédez de l’une des manières suivantes :
• Cliquez sur le menu des en-têtes du tableau, puis choisissez Effacer toutes les hauteurs.
• Sé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étés (Fenêtre >
Propriétés).
Dreamweaver efface toutes les hauteurs spécifiées dans le tableau. Il se peut que certaines cellules
se rétrécissent verticalement.
Redimensionnement et déplacement de cellules et tableaux de
Mise en forme
Afin d’ajuster la mise en page, vous pouvez déplacer et redimensionner des cellules de Mise en
forme et des tableaux de Mise en forme imbriqués. (Le tableau de Mise en forme le plus à
l’extérieur peut uniquement être redimensionné.)
Remarque : Pour utiliser la grille Dreamweaver comme guide afin de déplacer ou de redimensionner
des cellules et des tableaux, voir Utilisation des règles et des grilles pour la mise en forme des pages,
page 170.
Redimensionnement et déplacement de cellules de Mise en forme
Vous pouvez redimensionner ou déplacer des cellules de Mise en forme, mais elles ne peuvent pas
se chevaucher. Vous ne pouvez pas déplacer ou redimensionner une cellule en deçà des limites du
tableau qui la contient. La taille d’une cellule de Mise en forme ne peut pas être inférieure à son
contenu.
Pour plus d’informations sur le redimensionnement ou le déplacement des tableaux de Mise en
forme, voir Redimensionnement et déplacement de tableaux de Mise en forme, page 203.
Pour redimensionner une cellule de Mise en forme :
1 Pour sélectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfoncée, puis cliquez n’importe où dans la cellule.
Des poignées de sé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ées de sélection pour redimensionner la cellule.
Les bords de la cellule s’alignent automatiquement sur ceux des autres cellules.
Pour déplacer une cellule de Mise en forme :
1 Pour sélectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfoncée, puis cliquez n’importe où dans la cellule.
Des poignées de sélection s’affichent autour de la cellule.
2 Procédez de l’une des manières suivantes :
■ Faites glisser la cellule vers un autre emplacement à l’intérieur du tableau de Mise en forme.
■ Appuyez sur les touches fléchées pour déplacer la cellule par incréments de 1 pixel.
Conseil : Maintenez la touche Maj enfoncée tout en appuyant sur une touche directionnelle
pour déplacer la cellule par incréments de 10 pixels.
Redimensionnement et déplacement de tableaux de Mise en forme
La taille d’un tableau de Mise en forme ne peut pas être inférieure à 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éplacer des cellules de Mise en forme, voir Redimensionnement et
déplacement de cellules de Mise en forme, page 202.
Pour redimensionner un tableau de Mise en forme :
1 Sélectionnez un tableau en cliquant sur l’onglet en haut du tableau.
Des poignées de sélection s’affichent autour du tableau.
2 Faites glisser ces poignées de sélection pour redimensionner le tableau.
Les bords du tableau s’alignent automatiquement sur ceux des autres cellules et tableaux.
Pour déplacer un tableau de Mise en forme :
1 Sélectionnez un tableau en cliquant sur l’onglet en haut du tableau.
Des poignées de sélection s’affichent autour du tableau.
Remarque : Vous pouvez déplacer un tableau de Mise en forme uniquement si celui-ci est
imbriqué dans un autre tableau de Mise en forme.
2 Procédez de l’une des manières suivantes :
■
■
Faites glisser le tableau vers un autre emplacement sur la page.
Appuyez sur les touches fléchées pour déplacer le tableau par incréments de 1 pixel.
Conseil : Maintenez la touche Maj enfoncée tout en appuyant sur une touche directionnelle
pour déplacer la tableau par incréments de 10 pixels.
Redimensionnement et dé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étés.
Formatage des cellules de Mise en forme
Dans l’inspecteur de propriétés, vous pouvez définir différents attributs pour votre cellule de Mise
en forme, notamment la largeur et la hauteur, la couleur d’arrière-plan et l’alignement du
contenu.
Pour formater une cellule de Mise en forme dans l’inspecteur de propriétés :
1 Pour sélectionner la cellule, cliquez sur un de ses bords ou maintenez la touche Ctrl (Windows)
ou Commande (Macintosh) enfoncée, puis cliquez n’importe où dans la cellule.
2 Ouvrez l’inspecteur de propriétés (Fenêtre > Propriétés), s’il n’est pas déjà ouvert.
3 Modifiez le formatage de la cellule en définissant des propriétés.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propriétés.
Formatage des tableaux de Mise en forme
Vous pouvez définir différents attributs pour vos tableaux de Mise en forme dans l’inspecteur de
propriétés, notamment la largeur, la hauteur, le remplissage et l’espacement.
Pour formater un tableau de Mise en forme :
1 Sélectionnez un tableau en cliquant sur l’onglet en haut du tableau.
2 Ouvrez l’inspecteur de propriétés (Fenêtre > Propriétés), s’il n’est pas déjà ouvert.
3 Modifiez le formatage du tableau en définissant des propriétés.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propriétés.
Définition de la largeur des colonnes
Vous pouvez attribuer une largeur spécifique à une colonne ou la laisser s’étendre
automatiquement pour remplir autant que possible la fenêtre du navigateur. Vous pouvez
également attribuer une largeur minimale à une colonne à l’aide d’une image d’espacement.
Parfois, la largeur des colonnes définie dans le code HTML ne correspond pas à leur largeur
apparente sur l’écran. Dans ce cas, vous pouvez uniformiser les largeurs.
Application de l’extension automatique ou d’une largeur fixe à une colonne
Une colonne dans un tableau peut être de largeur fixe ou à extension automatique. Pour plus
d’informations, voir Largeur de colonne fixe et colonnes à extension automatique, page 196.
204
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
L’application de l’extension automatique à une colonne avant d’avoir terminé la mise en forme
peut avoir des effets inattendus sur la mise en forme du tableau. Pour empêcher les colonnes de
s’élargir ou de rétrécir inopinément, créez votre mise en forme avant d’appliquer l’extension
automatique à une colonne, et utilisez des images d’espacement à ce moment. (Cependant, si
chaque colonne contient des données susceptibles de maintenir la colonne à la largeur désirée,
vous n’avez pas besoin d’utiliser d’images d’espacement.)
Pour appliquer l’extension automatique à une colonne :
1 Procédez de l’une des manières suivantes :
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Extension automatique de la
colonne.
■
Pour sélectionner une cellule dans la colonne, cliquez sur l’un des bords de la cellule, puis
sur Extension automatique dans l’inspecteur de propriétés.
Remarque : Dans un tableau, vous ne pouvez appliquer l’extension automatique qu’à une seule
colonne.
Si vous n’avez pas défini d’image d’espacement pour ce site, la boîte de dialogue Choisissez
l’image d’espacement s’affiche.
2 Si la boî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îte de dialogue.
Une ligne ondulée apparaît en haut ou en bas de la colonne à extension automatique. Une double
barre apparaît en haut ou en bas des colonnes qui contiennent des images d’espacement.
Pour attribuer une largeur fixe à une colonne, procédez de l’une des manières suivantes :
• Cliquez sur le menu des en-têtes de colonne, puis choisissez Créer une colonne Largeur fixe.
•
L’option Créer une colonne Largeur fixe attribue une largeur à la colonne (dans le code)
correspondant à sa largeur visuelle actuelle.
Pour sélectionner une cellule dans la colonne, cliquez sur l’un des bords de la cellule, puis sur
Fixe et tapez une valeur numérique dans l’inspecteur de propriétés.
Si vous entrez une valeur inférieure à la largeur du contenu, Dreamweaver définit
automatiquement une largeur correspondant à celle du contenu.
La largeur de la colonne apparaî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é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éfinition de la largeur des colonnes
205
La première fois que vous insérez une image d’espacement, vous devez en définir une pour le site.
Vous pouvez définir des préférences pour les images d’espacement (voir Définition de préférences
pour le mode Mise en forme, page 207).
Pour insérer une image d’espacement dans une colonne :
1 Cliquez sur le menu des en-têtes de colonne, puis choisissez Ajouter image d’espacement.
Si vous n’avez pas défini d’image d’espacement pour ce site, la boîte de dialogue Choisissez
l’image d’espacement s’affiche.
2 Si la boî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îte de dialogue.
Dreamweaver insère l’image d’espacement dans la colonne. L’image ne s’affiche pas à l’écran, mais
la colonne peut se décaler légè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êtes de colonne, puis choisissez Supprimer image d’espacement.
Dreamweaver supprime l’image d’espacement. La colonne peut se décaler.
Pour supprimer toutes les images d’espacement du tableau, procédez de l’une des manières
suivantes :
• Cliquez sur le menu des en-têtes de tableau, puis choisissez Supprimer toutes les images
•
d’espacement.
Sélectionnez le tableau, puis cliquez sur le bouton Supprimer toutes les images d’espacement
dans l’inspecteur de propriétés (Fenêtre > Propriétés).
La mise en forme de votre tableau tout entier peut changer. Si certaines colonnes sont vides, elles
risquent de disparaître complètement en mode Cré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éfinie dans le code HTML est différente de la largeur apparente à l’écran. Vous pouvez
uniformiser la largeur spécifié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édez de l’une des manières suivantes :
206
Chapitre 9 : Mise en forme des pages avec le mode Mise en forme
■
Cliquez sur le menu des en-têtes de colonne, puis choisissez Uniformiser toutes les largeurs.
Sélectionnez le tableau, puis cliquez sur le bouton Supprimer toutes les images d’espacement
dans l’inspecteur de propriétés (Fenêtre > Propriétés).
Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.
■
Rubriques connexes
• Application de l’extension automatique ou d’une largeur fixe à une colonne, page 204
• Utilisation des images d’espacement, page 205
Définition de préférences pour le mode Mise en forme
Vous pouvez spécifier des préférences pour les fichiers d’image d’espacement et les couleurs
utilisées par Dreamweaver pour dessiner les tableaux et les cellules de mise en forme.
Pour définir les préférences du mode Mise en forme :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Choisissez la caté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îte de dialogue.
4 Cliquez sur OK.
Définition de préfé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être du navigateur en plusieurs zones, chacune d’entre
elles pouvant afficher un document HTML distinct. En règle géné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ésenter de manière exhaustive toutes les méthodes
permettant de concevoir et d’utiliser des cadres, ni le code requis pour les coder manuellement. Si
vous souhaitez obtenir des informations détaillées sur le code utilisé dans les mises en forme de
cadre avancées, reportez-vous à 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être de document, page 213
Création de cadres et de jeux de cadres, page 214
Sé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éfinition des propriétés et attributs de cadre, page 220
Affichage et définition des propriétés des jeux de cadres, page 221
Dé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être du navigateur pouvant afficher un document HTML indépendamment de
ce qui apparaît dans le reste de la fenêtre constitue un cadre.
Un jeu de cadres est un fichier HTML qui définit la mise en forme et les propriété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, à 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être de document, page 213
• Cré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être du navigateur pouvant afficher un document HTML indépendamment de
ce qui apparaît dans le reste de la fenêtre constitue un cadre. Un jeu de cadres est un fichier HTML
qui définit la mise en forme et les propriété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 être affichés dans les cadres. Le fichier du jeu
de cadres relatif à un site s’appelle généralement index.html et s’affiche par défaut si le visiteur ne
spécifie pas de nom de fichier.
L’exemple suivant présente une mise en forme de cadre contenant trois cadres : un cadre étroit qui
contient la barre de navigation dans la partie laté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é dans le cadre supérieur ne change jamais lorsque les
visiteurs consultent le site. La barre de navigation du cadre latéral contient des liens qui, lorsqu’ils
sont activés, modifient le contenu du cadre principal, mais pas le contenu du cadre latéral. Le
cadre de contenu principal à droite affiche le document correspondant à tous les liens activés par
le visiteur dans la partie gauche.
Un cadre n’est pas un fichier. On pourrait croire que le document affiché dans un cadre fait partie
inté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ésigner un seul document HTML ou l’ensemble du contenu d’une
fenêtre du navigateur à un moment donné, même si plusieurs documents HTML sont affichés
simultanément. Par exemple, l’expression « une page qui utilise des cadres » s’applique
généralement à un jeu de cadres et aux documents qui y figurent.
210
Chapitre 10 : Utilisation de cadres
Tout site affiché dans un navigateur sous forme d’une page unique constituée de trois cadres
contient en fait au moins quatre documents HTML, à savoir le fichier du jeu de cadres et les trois
documents qui incluent le contenu et sont initialement affichés dans les cadres. Lorsque vous
concevez une page à 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és, page 212
Choix de l’utilisation des cadres
Les cadres sont le plus souvent utilisés pour la navigation. Un jeu de cadres inclut généralement
un cadre contenant une barre de navigation et un cadre destiné à afficher le contenu principal.
Cependant, la conception d’un site à l’aide de cadres peut s’avérer fastidieuse. Dans la plupart des
cas, il est possible de créer une page Web sans faire appel à un jeu de cadres. Par exemple, si vous
voulez afficher une barre de navigation à 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éer plusieurs pages dont la mise en forme est identique ; voir A
propos des modèles Dreamweaver, page 226.) Dans l’illustration suivante, la mise en forme de la
page ressemble à 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éfè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é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 être très
utiles dans certains sites.
La prise en charge des cadres varie en fonction du navigateur utilisé. En outre, la navigation des
cadres peut s’avérer difficile pour les visiteurs souffrant de handicaps. Par conséquent, si vous
utilisez des cadres, incorporez systé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 é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ésente les avantages suivants :
• Le navigateur d’un visiteur n’a pas besoin de recharger les graphiques liés à la navigation à
•
chaque page.
Chaque cadre possède sa propre barre de défilement (si le contenu ne tient pas entièrement
dans une fenêtre) pour que le visiteur puisse faire défiler les cadres indépendamment les uns des
autres.
Par exemple, un visiteur ayant fait défiler une longue page jusqu’en bas n’est pas obligé de la
faire défiler à nouveau vers le haut pour afficher la barre de navigation si celle-ci figure dans un
autre cadre.
L’utilisation des cadres présente les inconvénients suivants :
• L’alignement graphique des éléments de différents cadres n’est pas toujours précis.
• Le test de la navigation peut être long.
• Comme l’URL de chacune des pages contenues dans les cadres n’est pas affichée dans le
navigateur, les visiteurs risquent de ne pas pouvoir ajouter de signet à une page donnée (à
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és
Un jeu de cadres imbriqué est un jeu de cadres situé à l’intérieur d’un autre jeu de cadres. Un
fichier de jeu de cadres peut contenir plusieurs jeux de cadres imbriqués. La plupart des pages
Web avec des cadres utilisent en fait des cadres imbriqués, de même que la plupart des jeux de
cadres prédéfinis dans Dreamweaver. Tout jeu de cadres comportant un nombre différent de
cadres dans différentes lignes ou colonnes doit être imbriqué.
Par exemple, la mise en forme de cadre la plus courante affiche un cadre sur la ligne supérieure (où
figure le logo de l’entreprise) et deux cadres sur la ligne inférieure (cadre de navigation et cadre de
contenu). Dans ce cas, un jeu de cadres doit être imbriqué : vous obtenez alors un jeu de cadres de
deux lignes et un jeu de cadres de deux colonnes imbriqué dans la deuxième ligne.
Jeu de cadres principal
Le cadre de menus et
le cadre de contenu
sont imbriqués dans le
jeu de cadres principal.
212
Chapitre 10 : Utilisation de cadres
Dreamweaver gè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éfinir les
cadres qui doivent être imbriqué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çons dans HTML : le jeu de cadres interne
peut être défini comme jeu de cadres externe dans le même fichier ou dans un fichier distinct.
Chaque jeu de cadres prédéfini dans Dreamweaver définit tous ses jeux de cadres dans le même
fichier.
Les deux types d’imbrication produisent des résultats visuels identiques. A moins d’examiner le
code, il n’est pas facile de savoir quel type d’imbrication est utilisé. En règle générale,
Dreamweaver utilise un fichier de jeu de cadres externe lorsque vous exécutez la commande
Ouvrir dans un cadre pour ouvrir un fichier de jeu de cadres à l’intérieur d’un cadre. Dans ce cas,
vous risquez de ne pas pouvoir définir correctement les cibles des liens. Il est souvent plus simple
de garder tous les jeux de cadres dé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être de document
Dreamweaver permet d’afficher et de modifier tous les documents associés à un jeu de cadres dans
une seule fenêtre de document. Vous pouvez ainsi afficher un aperçu approximatif des pages
insérées dans des cadres et les modifier à votre convenance dans le navigateur. Toutefois, certains
aspects de cette approche peuvent être déroutants si vous ne les maîtrisez pas parfaitement.
N’oubliez pas que chaque cadre affiche un document HTML distinct. Même si les documents
sont vides, vous devez les enregistrer avant de les prévisualiser. En effet, vous ne pouvez afficher un
aperçu précis du jeu de cadres que s’il contient l’URL d’un document à afficher dans chaque
cadre.
Pour vous assurer que le jeu de cadres s’affiche correctement dans les navigateurs :
1 Créez un jeu de cadres et spécifiez le document qui devra apparaître dans chaque cadre (voir
Création de cadres et de jeux de cadres, page 214).
2 Enregistrez chaque fichier qui apparaî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érent et que vous devez
enregistrer chaque document avec le fichier de jeu de cadres.
3 Définissez les propriétés de chaque cadre et du jeu de cadres (voir Affichage et définition des
propriétés et attributs de cadre, page 220 et Affichage et définition des propriétés des jeux de cadres,
page 221).
notamment l’attribution d’un nom à chaque cadre, la définition des options de défilement et
de non-défilement, etc.
4 Dans l’inspecteur de propriétés, vérifiez que la propriété Cible est définie pour tous les liens afin
que le contenu lié apparaisse dans la zone appropriée (voir Définition des contenus de cadre avec
liens, page 222).
Utilisation des jeux de cadres dans la fenêtre de document
213
Création de cadres et de jeux de cadres
Il y a deux façons de créer un jeu de cadres dans Dreamweaver : vous pouvez sélectionner un jeu
de cadres prédéfini ou le concevoir vous-même.
Si vous choisissez un jeu de cadres prédéfini, tous les jeux de cadres et cadres nécessaires à la
création de la mise en forme sont automatiquement configurés, ce qui représente le moyen le plus
simple d’insérer rapidement une mise en forme avec des cadres dans la page. Vous pouvez
uniquement insérer un jeu de cadres prédéfini dans la fenêtre de document en mode Création.
Utilisation d’un jeu de cadres prédéfini
Les jeux de cadres prédéfinis vous permettent de sélectionner facilement le type de jeu de cadres
que vous voulez créer. Si vous préférez concevoir votre propre jeu de cadres, voir Conception d’un
jeu de cadres, page 215.
Il y a deux façons de créer un jeu de cadres prédéfini :
• La barre Insérer permet de créer un jeu de cadres et d’afficher le document courant dans un des
•
nouveaux cadres.
La boîte de dialogue Nouveau document crée un jeu de cadres vide.
Pour créer un jeu de cadres prédéfini et afficher un document existant dans un cadre :
1 Placez le point d’insertion dans le document.
2 Procédez de l’une des manières suivantes :
Choisissez un cadre prédéfini dans le sous-menu Insertion > HTML > Cadres.
■ Dans la catégorie Mise en forme de la barre Insérer, cliquez sur la flèche du bouton Cadres,
puis choisissez un jeu de cadres prédéfini.
Les icônes de jeu de cadres fournissent une représentation visuelle de chaque jeu de cadres
appliqué au document en cours. La zone bleue de l’icône du jeu de cadres repré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é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îte de dialogue Attributs d’accessibilité des balises de cadre s’affiche si vous avez configuré
Dreamweaver de telle sorte qu’un message vous invite à saisir des attributs d’accessibilité de
cadre (voir Optimisation de l’espace de travail pour la conception de pages accessibles, page 56).
3 Si la boîte de dialogue Attributs d’accessibilité des balises de cadre s’affiche, renseignez la boîte
de dialogue pour chaque cadre, puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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é.
Pour modifier les attributs d’accessibilité des balises de cadre, voir Affichage et définition des
propriétés et attributs de cadre, page 220.
Pour créer un jeu de cadres prédéfini vide :
1 Sélectionnez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Jeux de cadres.
3 Sélectionnez un jeu de cadres dans la liste Jeux de cadres.
4 Cliquez sur Créer.
Le jeu de cadres apparaît dans votre document et la boîte de dialogue Attributs d’accessibilité
des balises de cadre s’affiche si vous avez activé la boîte de dialogue dans Préférences (voir
Optimisation de l’espace de travail pour la conception de pages accessibles, page 56).
5 Si la boîte de dialogue Attributs d’accessibilité des balises de cadre s’affiche, renseignez la boîte
de dialogue pour chaque cadre, puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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é.
Pour modifier les attributs d’accessibilité des balises de cadre, voir Affichage et définition des
propriété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
« séparateurs » à la fenêtre. Si vous préférez utiliser un jeu de cadres prédéfini, voir Utilisation d’un
jeu de cadres prédéfini, page 214.
Conseil : Avant de créer un jeu de cadres ou d’utiliser des cadres, affichez les bordures de cadres en
mode Création dans la fenêtre de document en choisissant Affichage > Assistances visuelles >
Bordures de cadre.
Pour créer un jeu de cadres :
• Dans le sous-menu Modifier > Jeu de cadres, choisissez une option de fractionnement (par
exemple, Fractionner le cadre à gauche ou Fractionner le cadre à droite).
Dreamweaver fractionne la fenêtre en cadres. Si vous aviez un document existant ouvert, il
apparaît dans l’un des cadres.
Pour fractionner un cadre en cadres plus petits, procédez de l’une des manières suivantes :
• Pour fractionner le cadre au niveau du point d’insertion, choisissez une option de
fractionnement dans le sous-menu Modifier > Jeu de cadres.
Cré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être en mode Création.
Pour fractionner un cadre à l’aide d’une bordure de cadre qui ne se trouve pas sur le bord de la
fenêtre en mode Création, faites glisser une bordure de cadre tout en maintenant la touche Alt
(Windows) ou Option (Macintosh) enfoncée.
Pour diviser un cadre en quatre, faites glisser une bordure de cadre de l’un des coins de la
fenêtre en mode Création vers le centre d’un cadre.
Conseil : Pour créer trois cadres, créez-en d’abord deux, puis fractionnez l’un d’eux. L’opération
de fusion de deux cadres adjacents sans modifier le code du jeu de cadres é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 été enregistré,
Dreamweaver vous invite à enregistrer ce dernier.
Remarque : Vous ne pouvez pas entièrement supprimer un jeu de cadres en faisant glisser ses
bordures. Pour le supprimer complètement, fermez la fenêtre de document qui l’affiche. Si le
fichier du jeu de cadres a été enregistré, supprimez le fichier.
Pour redimensionner un cadre, procédez de l’une des manières suivantes :
• Pour définir la taille approximative des cadres, faites glisser une bordure de cadre dans la fenêtre
•
de document en mode Création.
Pour définir des tailles exactes et spécifier l’espace alloué par le navigateur à une ligne ou une
colonne de cadres lorsque la taille de la fenêtre du navigateur ne permet pas d’afficher les cadres
dans leur totalité, utilisez l’inspecteur de propriétés (voir Affichage et définition des propriétés des
jeux de cadres, page 221).
Sélection de cadres et de jeux de cadres
Pour modifier les propriétés d’un cadre ou d’un jeu de cadres, vous devez au préalable le
sélectionner, dans la fenêtre de document ou en utilisant le panneau Cadres.
216
Chapitre 10 : Utilisation de cadres
Sélection de cadres et de jeux de cadres dans le panneau Cadres
Le panneau Cadres donne une représentation visuelle des cadres dans un jeu de cadres. Il affiche
la hiérarchie de la structure du jeu de cadres qui n’apparaît pas forcément dans la fenêtre de
document. Dans le panneau Cadres, une épaisse bordure entoure le jeu de cadres, une fine ligne
grise entoure chaque cadre et chaque cadre est identifié par un nom.
Pour afficher le panneau Cadres :
• Choisissez Fenêtre > Cadres.
Pour sélectionner un cadre dans le panneau Cadres :
• Cliquez sur le cadre dans le panneau Cadres.
Des lignes de sélection apparaissent autour du cadre dans le panneau Cadres et dans la fenêtre
de document, en mode Création.
Pour sé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élection apparaissent autour du jeu de cadres dans le panneau Cadres et dans la
fenêtre de document, en mode Création.
Rubriques connexes
• Affichage et définition des propriétés et attributs de cadre, page 220
• Affichage et définition des propriétés des jeux de cadres, page 221
Sélection de cadres et de jeux de cadres dans la fenêtre de document
Lorsqu’un cadre est sélectionné dans la fenêtre de document, en mode Création, sa bordure
s’affiche avec une ligne en pointillé ; lorsqu’un jeu de cadres est sélectionné, toutes les bordures
des cadres à l’intérieur de ce jeu s’affichent avec une ligne en pointillé plus fine.
Remarque : La sélection d’un cadre et le placement d’un point d’insertion dans un document affiché
dans un cadre sont deux opérations différentes. Vous serez amené à sélectionner un cadre dans de
nombreux cas (par exemple, lorsque vous définissez les propriétés d’un cadre).
Sélection de cadres et de jeux de cadres
217
Pour sélectionner un cadre dans la fenêtre de document :
• En mode Création, cliquez dans le cadre tout en maintenant les touches Alt (Windows) ou
Option+Maj (Macintosh) enfoncées.
Des lignes de sélection apparaissent autour du cadre.
Pour sélectionner un jeu de cadres dans la fenêtre de document :
• En mode Cré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 > Assistances
visuelles > Bordures de cadre.
Des lignes de sélection apparaissent autour du jeu de cadres.
Remarque : Il est souvent plus simple de sélectionner les jeux de cadres dans le panneau Cadres
que dans la fenêtre de document. Pour plus d’informations, voir Sélection de cadres et de jeux de
cadres dans le panneau Cadres, page 217.
Pour sélectionner un cadre ou un jeu de cadres différent, procédez de l’une des manières
suivantes :
• Pour sélectionner le cadre ou le jeu de cadres suivant ou précédent au même niveau
•
•
hiérarchique que la sélection en cours, appuyez sur la flèche gauche ou droite tout en
maintenant la touche Alt (Windows) ou Commande (Macintosh) enfoncée. Ces touches vous
permettent de parcourir les cadres et jeux de cadres dans l’ordre dans lequel ils sont définis dans
le fichier du jeu de cadres.
Pour sélectionner le jeu de cadres parent (celui qui contient la sélection en cours), appuyez sur
la flèche haut tout en maintenant la touche Alt (Windows) ou Commande (Macintosh)
enfoncée.
Pour sélectionner le premier cadre ou jeu de cadres enfant de la sélection courante (en
respectant l’ordre dans lequel ils sont définis dans le fichier du jeu de cadres), appuyez sur la
flèche bas tout en maintenant la touche Alt (Windows) ou Commande (Macintosh) enfoncée.
Rubriques connexes
• Sélection de cadres et de jeux de cadres dans le panneau Cadres, page 217
• Affichage et définition des propriétés et attributs de cadre, page 220
• Affichage et définition des propriétés des jeux de cadres, page 221
Ouverture d’un document dans un cadre
Vous pouvez spécifier le contenu initial d’un cadre en insé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 > Ouvrir dans un cadre.
3 Sélectionnez un document à ouvrir dans le cadre, puis cliquez sur OK (Windows) ou Choisir
(Macintosh).
Le document apparaît dans le cadre.
4 (Facultatif) Si vous voulez afficher ce document par dé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çu d’un jeu de cadres dans un navigateur, vous devez enregistrer le fichier
correspondant et tous les documents qui seront affiché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ément.
Remarque : Si vous faites appel aux outils visuels de Dreamweaver pour créer un jeu de cadres, un
nom de fichier par défaut est attribué à 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électionnez le jeu de cadres dans le panneau Cadres ou dans la fenêtre de document (voir
Sélection de cadres et de jeux de cadres, page 216).
2 Procédez de l’une des manières suivantes :
Pour enregistrer le fichier de jeu de cadres, choisissez Fichier > Enregistrer le jeu de cadres.
Pour enregistrer le fichier de jeu de cadres en tant que nouveau fichier, choisissez Fichier >
Enregistrer le jeu de cadres sous.
Si le fichier du jeu de cadres n’a pas été enregistré, ces deux commandes sont équivalentes.
■
■
Pour enregistrer le document qui apparaît à l’intérieur d’un cadre :
• Cliquez dans le cadre, puis choisissez Fichier > Enregistrer le cadre ou Fichier > Enregistrer le
cadre sous.
Pour enregistrer tous les fichiers associés à un jeu de cadres :
• Choisissez Fichier > 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és. Si le fichier du jeu de cadres n’a pas été
enregistré, une épaisse bordure entoure le jeu de cadres en mode Création. Dans la boîte de
dialogue qui s’affiche, choisissez un nom de fichier. Chaque cadre non enregistré est entouré
d’une épaisse bordure. Dans la boî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é la commande Fichier > 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éfaut qui sera affiché dans ce cadre. N’enregistrez pas le fichier du jeu de cadres si
vous ne voulez pas que ce document soit utilisé par défaut.
Affichage et définition des propriétés et attributs de cadre
Utilisez l’inspecteur de propriétés pour afficher et définir la plupart des propriétés de cadre.
Si vous le souhaitez, définissez des attributs de cadre, comme l’attribut title (qui est différent de
l’attribut name), pour améliorer l’accessibilité. Vous pouvez activer l’option de programmation de
l’accessibilité pour les cadres afin de définir des attributs lorsque vous créez des cadres (voir
Optimisation de l’espace de travail pour la conception de pages accessibles, page 56) ou bien définir
des attributs après avoir inséré un cadre. Vous pouvez modifier les attributs d’un cadre en
modifiant directement le code HTML à l’aide de l’inspecteur de balises.
Pour définir des propriétés pour un jeu de cadres, voir Affichage et définition des propriétés des jeux
de cadres, page 221.
Pour afficher ou définir les propriétés des cadres :
1 Sélectionnez un cadre en utilisant l’une des méthodes suivantes :
Dans la fenêtre de document (mode Création), cliquez dans le cadre tout en maintenant les
touches Alt (Windows) ou Maj+Option (Macintosh) enfoncées.
■ Cliquez sur le cadre dans le panneau Cadres (Fenêtre > Cadres).
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur la flèche d’agrandissement
située dans le coin inférieur droit pour visualiser toutes les propriétés des cadres.
■
3 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propriétés.
Conseil : Pour modifier la couleur d’arrière-plan d’un cadre, vous devez définir la couleur d’arrièreplan du document dans le cadre dans les propriétés de la page.
Pour définir les valeurs d’accessibilité d’un cadre :
1 Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaçant le point
d’insertion dans l’un des cadres.
2 Choisissez Modifier > Modifier la balise.
L’éditeur de balises s’affiche.
3 Sélectionnez Feuille de style/Accessibilité dans la liste de catégories située à gauche.
4 Spécifiez les valeurs de votre choix.
5 Cliquez sur OK.
Pour modifier les valeurs d’accessibilité d’un cadre :
1 Affichez votre document en mode Code ou Code et création si vous êtes en mode Création.
220
Chapitre 10 : Utilisation de cadres
2 Dans le panneau Cadres (Fenêtre > Cadres), sélectionnez un cadre en plaç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ée (Macintosh), puis choisissez Modifier la balise.
L’éditeur de balises s’affiche.
4 Apportez les modifications de votre choix.
5 Cliquez sur OK.
Pour modifier la couleur d’arrière-plan d’un document dans un cadre :
1 Placez le point d’insertion dans le cadre.
2 Choisissez Modifier > Propriétés de la page.
La boîte de dialogue Propriétés de la page s’affiche.
3 Cliquez sur le menu contextuel Couleur d’arrière-plan, puis sélectionnez une couleur.
4 Cliquez sur OK.
Rubriques connexes
• Création de cadres et de jeux de cadres, page 214
Affichage et définition des propriétés des jeux de cadres
Utilisez l’inspecteur de propriétés pour afficher et définir la plupart des propriétés de jeux de
cadres. Pour définir des propriétés pour un cadre, voir Affichage et définition des propriétés et
attributs de cadre, page 220.
Pour afficher ou définir les propriétés des jeux de cadres :
1 Sélectionnez un jeu de cadres en utilisant l’une des méthodes suivantes :
Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fenêtre de document en
mode Création.
■ Cliquez sur la bordure d’un jeu de cadres dans le panneau Cadres (Fenêtre > Cadres).
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur la flèche d’agrandissement
située dans le coin inférieur droit pour visualiser toutes les propriété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étés.
Pour définir le titre du document d’un jeu de cadres :
1 Sélectionnez un jeu de cadres en utilisant l’une des méthodes suivantes :
■
Cliquez sur une bordure entre deux cadres du jeu de cadres dans la fenêtre de document en
mode Création.
Affichage et définition des propriétés des jeux de cadres
221
Cliquez sur la bordure d’un jeu de cadres dans le panneau Cadres (Fenêtre > 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ît dans la barre de
titre.
Rubriques connexes
• Création de cadres et de jeux de cadres, page 214
Dé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éfinir la cible du lien. L’attribut target d’un lien spécifie le cadre ou la fenêtre dans lequel ou
laquelle le contenu associé 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é dans le cadre de contenu principal à droite, vous devez dé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écifié s’ouvre dans le cadre principal.
Pour cibler un cadre :
1 En mode Création, choisissez un texte ou un objet.
2 Dans le champ Lien de l’inspecteur de propriétés (Fenêtre > Propriétés), procédez de l’une des
manières suivantes :
■ Cliquez sur l’icône de dossier, puis sélectionnez le fichier avec lequel établir le lien.
■ Faites glisser l’icône Pointer vers un fichier dans le panneau Fichiers pour sélectionner le
fichier avec lequel établir le lien.
3 Dans le menu déroulant Cible de l’inspecteur de propriétés, sélectionnez la fenêtre ou le cadre
dans lequel doit s’afficher le document lié :
■ _blank ouvre le document lié dans une nouvelle fenêtre du navigateur sans toucher à la
fenêtre courante.
■ _parent ouvre le document lié dans le jeu de cadres parent du cadre dans lequel figure le
lien, en remplaçant tout le jeu de cadres.
■ _self ouvre le lien dans le cadre en cours, en remplaçant le contenu de ce cadre.
■ _top ouvre le document lié dans la fenêtre du navigateur courant, en remplaçant tous les
cadres.
Les noms des cadres apparaissent également dans ce menu. Sélectionnez un cadre nommé dans
lequel s’ouvrira le document lié.
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être, les noms des cadres
n’apparaissent pas dans le menu dé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 établissez un lien avec une page qui ne se trouve pas sur votre site, utilisez
target="_top" ou target="_blank" pour vous assurer que la page ne soit pas considéré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éfinir le contenu à afficher dans les navigateurs graphiques plus
anciens et basés sur le texte qui ne prennent pas en charge les cadres. Ce contenu, encadré de
balises noframes, est stocké dans le fichier du jeu de cadres. Lorsqu’un navigateur qui ne gè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étaillé que « Vous devez mettre votre
navigateur à jour pour pouvoir utiliser des cadres ». En effet, certaines personnes choisissent
délibérément un système qui ne leur permet pas d’afficher de cadres. Essayez de définir un contenu
accessible à ces visiteurs.
Pour définir un contenu pour les navigateurs qui ne prennent pas en charge les cadres :
1 Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres.
Dreamweaver efface ce qui se trouve dans la fenêtre en mode Création et les mots « Contenu
sans cadres » apparaissent dans la zone supérieure.
2 Pour créer le Contenu sans cadres, procédez de l’une des manières suivantes :
■ Dans la fenêtre de document, tapez ou insérez le contenu, comme vous le feriez pour un
document ordinaire.
■ Choisissez Fenêtre > Inspecteur de code, placez le point d’insertion entre les balises body qui
se trouvent à l’intérieur des balises noframes, puis tapez le code HTML du contenu.
3 Choisissez de nouveau Modifier > Jeu de cadres > 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èrement bien
adaptés à l’utilisation de cadres :
Texte du cadre remplace le contenu et le formatage d’un cadre par le contenu que vous spécifiez.
Ce contenu peut être n’importe quel texte valide en HTML Cette action permet d’afficher les
informations dans un cadre de façon dynamique (voir Texte du cadre, page 401).
Atteindre l’URL ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Cette
action est particulièrement utile pour modifier d’un seul clic le contenu de deux cadres ou plus
(voir Atteindre l’URL, page 396).
L’option Insérer une barre de navigation ajoute une barre de navigation à une page. Ceci étant
fait, vous pouvez ajouter des comportements à ses images et définir l’image qui s’affiche en
fonction des actions des visiteurs. Vous pouvez, par exemple, afficher une image de bouton à l’é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érer menu de reroutage permet de configurer une liste de liens, dans un menu, qui ouvrent
des fichiers dans une fenêtre du navigateur lorsque l’on clique dessus. Vous pouvez également
cibler une fenê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èles
Un modèle Macromedia Dreamweaver MX 2004 est un type spécial de document qui sert à
concevoir une mise en page « fixe ». Il est alors possible de créer des documents basés sur le
modèle, qui en héritent la mise en page. Lors de la conception d’un modèle, vous spécifiez les
zones des documents basés sur ce modèle que les utilisateurs pourront modifier.
Remarque : Les modèles permettent de définir la conception d’une grande zone et de réutiliser des
mises en page complètes. Si vous souhaitez réutiliser des éléments de conception individuels, tels
que les informations sur le copyright d’un site ou un logo, vous pouvez créer des éléments de
bibliothèque. Pour plus d’informations, voir Chapitre 5, Gestion des actifs de site et des bibliothèques,
page 125.
Ce chapitre comprend les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
•
•
A propos des modèles Dreamweaver, page 226
Création d’un modèle Dreamweaver, page 238
Création de modèles pour un site Contribute, page 241
Création de régions modifiables, page 243
Création de régions répétées, page 245
Utilisation des régions facultatives, page 248
Définition d’attributs de balise modifiables, page 250
Création d’un modèle imbriqué, page 251
Modification et mise à jour des modèles, page 252
Gestion des modèles, page 255
Exportation et importation du contenu XML d’un modèle, page 256
Exportation d’un site sans marqueur de modèle, page 257
Application ou suppression d’un modèle depuis un document existant, page 257
Modification du contenu d’un document basé sur un modèle, page 259
225
A propos des modèles Dreamweaver
Le créateur d’un modèle y conçoit une mise en page « fixe ». Il crée ensuite des régions dans le
modèle, qui seront modifiables dans les documents basés sur ce modèle. Si le créateur définit une
région comme n’étant pas modifiable, les utilisateurs du modèle ne pourront pas modifier le
contenu de cette zone. Les créateurs de modèles peuvent contrôler les éléments de la page que les
utilisateurs des modèles (rédacteurs, infographistes ou autres développeurs) pourront modifier. Le
créateur peut inclure plusieurs types de régions de modèle dans un document.
L’un des principaux avantages du modèle est qu’il donne la possibilité de modifier plusieurs pages
simultanément. Tout document créé à partir d’un modèle reste associé à ce modèle (sauf si vous
décidez de détacher le document ultérieurement). Lorsque vous modifiez un modèle, la
conception de tous les documents créés à partir de ce modèle est immédiatement mise à jour.
Rubriques connexes
• Création d’un modèle Dreamweaver, page 238
Types de régions de modèle
Dreamweaver verrouille automatiquement la plupart des régions d’un document lorsque vous
enregistrez celui-ci comme modèle. Vous devez insérer des régions ou paramètres modifiables dans
un modèle pour définir les régions qui pourront être modifiées dans les documents basés sur ce
modèle.
Lors de la création du modèle, vous pouvez apporter des modifications aux régions modifiables et
aux régions verrouillées. En revanche, dans le cas d’un document créé à partir d’un modèle, seules
les régions modifiables peuvent subir des modifications ; les régions verrouillées ne peuvent pas
être modifiées.
Il existe quatre types de régions de modèle :
Une région modifiable est une région non verrouillée dans un document basé sur un modèle. Ce
type de section peut être modifié. Le créateur du modèle peut définir toute région du modèle
comme modifiable. Pour être fonctionnel, un modèle doit contenir au moins une région
modifiable. S’il n’en contient pas, les pages créées à partir du modèle ne pourront pas être
modifiées. Pour plus d’informations sur l’insertion d’une région modifiable, voir Insertion d’une
région modifiable, page 243.
Une région répétée est une section de la mise en page d’un document qu’il est possible de
reproduire. Par exemple, vous pouvez définir une ligne de tableau à reproduire. En général, les
sections répétées sont modifiables afin que l’utilisateur du modèle puisse modifier le contenu de
l’élément répété, tandis que le créateur du modèle contrôle la conception elle-même. Selon ses
besoins, l’utilisateur du modèle choisit des options de contrôle de région répétée pour ajouter ou
supprimer des copies de la région répétée dans un document basé sur le modèle.
Deux types de régions répétées peuvent être insérées dans un modèle : région répétée et tableau
répété. Pour plus d’informations sur l’insertion de régions répétées dans un modèle, voir Création
d’une région répétée dans un modèle, page 245. Pour plus d’informations sur la création de tableaux
répétées, voir Insertion d’un tableau répété, page 246. Pour plus d’informations sur l’utilisation
d’une région répétée dans une page basée sur un modèle, voir Ajout et suppression d’entrées et
modification de l’ordre des entrées dans une région répétée, page 260.
226
Chapitre 11 : Gestion des modèles
Une région facultative est
une section d’un modèle que vous avez définie comme facultative,
c’est-à-dire une section contenant des éléments facultatifs tels que du texte ou des images, qui
apparaîtront ou non dans les documents créés à partir du modèle. Sur la page basée sur le modèle,
l’utilisateur du modèle décide généralement si le contenu doit être affiché ou non. Pour plus
d’informations sur la définition de régions facultatives dans un modèle, voir Insertion d’une région
facultative, page 248. Pour plus d’informations sur la modification de régions facultatives dans
une page basée sur un modèle, voir Modification des propriétés du modèle, page 259.
sont des attributs de balise d’un modèle qui sont
déverrouillés afin que les utilisateurs puissent les modifier dans les pages créées à partir de ce
modèle. Par exemple, vous pouvez « verrouiller » les images contenues dans le document tout en
permettant à l’utilisateur du modèle d’en définir l’alignement à gauche, à droite ou au centre.
Pour plus d’informations sur la définition des attributs de balise modifiables, voir Définition
d’attributs de balise modifiables dans un modèle, page 250. Pour plus d’informations sur la
modification de balises dans une page basée sur un modèle, voir Modification des propriétés du
modèle, page 259.
Les attributs de balise modifiables
Rubriques connexes
•
•
•
•
Création de régions modifiables, page 243
Création de régions répétées, page 245
Utilisation des régions facultatives, page 248
Définition d’attributs de balise modifiables, page 250
Modèles et documents basés sur un modèle en mode Code ou Création
Vous pouvez afficher des modèles et des documents basés sur un modèle en mode Code ou
Création.
Affichage d’un modèle en mode Création
En mode Création, les régions modifiables des modèles s’affichent dans la fenêtre de document
entourées d’un cadre rectangulaire d’une couleur de surbrillance prédéfinie. Un petit onglet
indiquant le nom de la région s’affiche dans le coin supérieur gauche de chaque région.
Remarque : Pour plus d’informations sur la définition des préférences de couleur de surbrillance, voir
Définition des préférences de surbrillance pour des régions de modèle, page 240.
A propos des modèles Dreamweaver
227
La barre de titre de la fenêtre de document permet d’identifier les fichiers de modèle. La barre de
titre d’un fichier de modèle contient le mot <<Modèle>> et l’extension du nom du fichier est
.dwt.
Rubriques connexes
• Affichage d’un document basé sur un modèle en mode Création, page 229
• Affichage d’un document basé sur un modèle en mode Code, page 230
Affichage d’un modèle en mode Code
En mode Code, vous pouvez apporter des modifications à la fois au contenu modifiable et au
code source HTML verrouillé du modèle.
Conseil : Vous pouvez utiliser les préférences de couleur de code pour définir votre propre modèle
de coloration afin de pouvoir distinguer facilement les régions du modèle lorsque vous affichez un
document en mode Code (voir Personnalisation des préférences de coloration de code d’un modèle,
page 239).
Les régions de contenu modifiables sont repérées dans le code HTML par les commentaires
suivants :
<!-- TemplateBeginEditable>
et <!-- TemplateEndEditable -->
Tous les éléments compris entre ces commentaires sont modifiables dans les documents créés à
partir du modèle. Le code source HTML d’une région modifiable peut se présenter comme suit :
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- TemplateBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- TemplateEndEditable -->
</table>
228
Chapitre 11 : Gestion des modèles
Remarque : Lorsque vous modifiez le code du modèle en mode Code, prenez garde à ne pas
modifier de balise de commentaire liée au modèle et utilisée par Dreamweaver.
Rubriques connexes
• Affichage d’un modèle en mode Création, page 227
• Affichage d’un document basé sur un modèle en mode Code, page 230
Affichage d’un document basé sur un modèle en mode Création
Dans un document basé sur un modèle, les régions modifiables s’affichent dans la fenêtre de
document en mode Création, entourées d’un cadre rectangulaire d’une couleur de surbrillance
prédéfinie. Un petit onglet indiquant le nom de la région s’affiche dans le coin supérieur gauche
de chaque région.
Remarque : Pour plus d’informations sur la définition des préférences de couleur de surbrillance, voir
Définition des préférences de surbrillance pour des régions de modèle, page 240.
Outre les régions modifiables, la page entière est entourée d’un cadre d’une couleur différente et
un onglet en haut à droite indique le nom du modèle sur lequel le document est basé. Ce cadre a
pour fonction de vous rappeler que le document a été créé à partir d’un modèle et que vous ne
pouvez rien changer en dehors des régions modifiables.
Rubriques connexes
• Affichage d’un modèle en mode Création, page 227
• Affichage d’un modèle en mode Code, page 228
A propos des modèles Dreamweaver
229
Affichage d’un document basé sur un modèle en mode Code
En mode Code, les régions modifiables d’un document dérivé d’un modèle s’affichent dans une
couleur différente du code dans les régions non modifiables. Vous pouvez modifier uniquement
les régions ou paramètres modifiables ; Dreamweaver vous empêche de taper dans les régions
verrouillées.
Le contenu modifiable est repéré dans le code HTML par les commentaires Dreamweaver
suivants :
<!-- InstanceBeginEditable>
et <!-- InstanceEndEditable -->.
Tous les éléments compris entre ces commentaires sont modifiables dans un document basé sur le
modèle. Le code source HTML d’une région modifiable peut se présenter comme suit :
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
La couleur par défaut du texte non modifiable est le gris. Vous pouvez associer des couleurs
différentes aux régions modifiables et aux régions non modifiables en accédant à la boîte de
dialogue Préférences. Pour plus d’informations, voir Personnalisation des préférences de coloration de
code d’un modèle, page 239.
Rubriques connexes
• Affichage d’un modèle en mode Création, page 227
• Affichage d’un modèle en mode Code, page 228
• Affichage d’un document basé sur un modèle en mode Création, page 229
Syntaxe des balises du modèle
Cette section décrit les règles générales de syntaxe et donne la liste des balises de commentaire
HTML utilisées par Dreamweaver pour définir les régions dans les modèles et les documents
basés sur un modèle. Dreamweaver insère automatiquement des balises de modèle dans le code
lorsque vous insérez un objet de modèle.
Remarque : Dreamweaver fait appel à des balises de commentaire pour définir les régions du
modèle, de telle façon que les documents basés sur un modèle restent des fichiers HTML valides.
Règles générales de syntaxe
Vous trouverez ci-dessous les règles de syntaxe générales :
230
Chapitre 11 : Gestion des modèles
• Là où 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ébut ou à la toute
fin d’un commentaire.
Les attributs peuvent être saisis dans n’importe quel ordre. Par exemple, dans le cas de
TemplateParam, vous pouvez spécifier le type avant le nom.
Les noms des commentaires et des attributs sont sensibles à la casse.
Tous les attributs doivent être entre guillemets. Il est possible d’utiliser des guillemets simples
ou doubles.
Pour plus d’informations sur la vérification de votre syntaxe, voir Vérification de la syntaxe du
modèle, page 254.
Rubriques connexes
• Balises d’instance, page 232
Balises de modèle
Dreamweaver utilise les balises de modèle suivantes :
<!-- TemplateBeginEditable name="..." -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="..." type="..." value="..." -->
<!-- TemplateBeginRepeat name="..." -->
<!-- TemplateEndRepeat -->
<!-- TemplateBeginIf cond="..." -->
<!-- TemplateEndIf -->
<!-- TemplateBeginPassthroughIf cond="..." -->
<!-- TemplateEndPassthroughIf -->
<!-- TemplateBeginMultipleIf -->
<!-- TemplateEndMultipleIf -->
<!-- TemplateBeginPassthroughMultipleIf -->
<!-- TemplateEndPassthroughMultipleIf -->
<!-- TemplateBeginIfClause cond="..." -->
<!-- TemplateEndIfClause -->
<!-- TemplateBeginPassthroughIfClause cond="..." -->
<!-- TemplateEndPassthroughIfClause -->
<!-- TemplateExpr expr="..." --> (equivalent to @@...@@)
<!-- TemplatePassthroughExpr expr="..." -->
<!-- TemplateInfo codeOutsideHTMLIsLocked="..." -->
Rubriques connexes
• Règles générales de syntaxe, page 230
A propos des modèles Dreamweaver
231
Balises d’instance
Dreamweaver utilise les balises d’instance suivantes :
<!-- InstanceBegin template="..." codeOutsideHTMLIsLocked="..." -->
<!-- InstanceEnd -->
<!-- InstanceBeginEditable name="..." -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="..." type="..." value="..." passthrough="..." -->
<!-- InstanceBeginRepeat name="..." -->
<!-- InstanceEndRepeat -->
<!-- InstanceBeginRepeatEntry -->
<!-- InstanceEndRepeatEntry -->
Rubriques connexes
• Règles générales de syntaxe, page 230
• Balises de modèle, page 231
Liens des modèles
Pour créer un lien dans un fichier de modèle, cliquez sur l’icône de dossier ou sur l’icône Pointer
vers un fichier dans l’inspecteur de propriétés. Ne tapez pas le nom du fichier à lier, car le lien
pourrait ne pas fonctionner. Cette section explique comment Dreamweaver gère les liens dans les
modèles.
Lorsque vous créez un fichier de modèle à partir d’une page existante, puis que vous enregistrez
cette page comme modèle, Dreamweaver met à jour les liens de sorte qu’ils pointent vers les
fichiers d’origine. Les modèles étant enregistrés dans le dossier Templates, le chemin d’un lien
relatif à un document change lorsque vous enregistrez la page comme modèle. Lorsque vous créez
un nouveau document à partir du modèle et que vous enregistrez ce nouveau document, tous les
liens relatifs à un document sont mis à jour pour qu’ils continuent de pointer vers les fichiers
adéquats.
En revanche, si vous insérez un nouveau lien relatif à un document dans un fichier de modèle et
que vous tapez le chemin dans la zone de texte du lien de l’inspecteur de propriétés, il est facile de
faire une faute de frappe. Le chemin correct est le chemin d’accès au document lié à partir du
dossier Templates, et non pas à partir du dossier du document basé sur le modèle.
Pour plus d’informations sur l’établissement de liens à l’aide de l’icô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’événement des modèles), vous ne pouvez pas utiliser l’icône de dossier ni l’icône Pointer vers un
fichier. Vous devez alors taper le chemin, en prenant garde à ne pas faire de faute de frappe.
232
Chapitre 11 : Gestion des modèles
Modèles imbriqués
Un modèle imbriqué est un modèle dont la conception et les régions modifiables sont basées sur
un autre modèle. Pour créer un modèle imbriqué, vous devez au préalable enregistrer le modèle de
base ou le modèle original, puis créer un document à partir de ce modèle et enregistrer ce
document comme modèle. Vous pouvez ensuite définir dans le nouveau modèle des régions
modifiables supplémentaires au niveau des sections définies initialement comme modifiables dans
le modèle de base.
Les modèles imbriqués sont utiles pour gérer le contenu de certaines pages d’un site qui ont de
nombreux éléments de présentation en commun avec les autres pages du site mais qui présentent
malgré tout quelques différences. Par exemple, vous pouvez créer un modèle de base définissant la
conception de zones plus larges, qui sera utilisé par une grande partie des responsables du contenu
du site, et créer un modèle imbriqué définissant de nouvelles régions modifiables dans les pages
d’une section spécifique du site.
Les régions modifiables d’un modèle de base sont transmises aux modèles imbriqués et restent
modifiables dans les pages créées à partir d’un modèle imbriqué, à moins que de nouvelles régions
de modèle ne soient insérées dans ces régions.
Les modifications apportées à un modèle de base sont automatiquement répercutées dans les
modèles basés sur ce modèle de base et dans tous les documents basés sur les modèles principal et
imbriqué.
Dans l’exemple suivant, le modèle contient trois régions modifiables, nommées Body, Nav Bar et
:
Footer
A propos des modèles Dreamweaver
233
Pour créer un modèle imbriqué, nous avons créé un document à partir du modèle, puis nous
avons enregistré ce document comme modèle que nous avons appelé TrioNested. Dans le modèle
imbriqué, nous avons ajouté deux régions modifiables et du contenu dans la région nommée
Body.
Lorsque vous insérez une nouvelle région modifiable dans une région modifiable transmise au
modèle imbriqué, la couleur de surbrillance de la région modifiable devient orange. Le contenu
inséré dans une région modifiable, par exemple l’image insérée dans editableColumn, n’est plus
modifiable dans les documents créés à partir du modèle imbriqué. Qu’elles aient été ajoutées au
modèle imbriqué ou qu’elles soient héritées du modèle de base, les régions modifiables entourées
d’un cadre de surbrillance bleu restent modifiables dans les documents créés à partir du modèle
imbriqué. Les régions de modèle dans lesquelles aucune région modifiable n’a été insérée sont
transmises sous la forme de régions modifiables aux documents basés sur le modèle.
Rubriques connexes
• Création d’un modèle imbriqué, page 251
Scripts de serveur dans un modèle et documents basés sur un modèle
Certains scripts de serveur sont insérés au tout début ou à la toute fin du document (avant la
balise <html> ou après la balise </html>). Ces scripts requièrent un traitement spécial dans les
modèles et les documents créés à partir de modèles. En règle générale, lorsque vous apportez des
modifications au code situé avant la balise <html> ou après la balise </html> dans un modèle, les
modifications ne sont pas répercutées dans les documents créés à partir du modèle, ce qui peut
entraîner des erreurs de serveur lorsqu’un script de serveur situé dans le corps principal du modèle
dépend d’un script non mis à jour. C’est la raison pour laquelle Dreamweaver vous avertit lorsque
vous tentez de modifier des scripts situés avant la balise <html> ou après la balise </html> dans
un modèle.
Pour éviter ce problème, vous pouvez insérer le code suivant dans la section head du modèle :
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
234
Chapitre 11 : Gestion des modèles
Lorsque vous insérez ce code dans un modèle, toutes les modifications apportées aux scripts situés
avant la balise <html> ou après la balise </html> sont répercutées dans les documents créés à
partir du modèle. Toutefois, vous ne pourrez plus modifier ces scripts dans les documents créés à
partir du modèle. Vous pouvez donc soit modifier les scripts dans le modèle, soit dans les
documents créés à partir du modèle, mais pas dans les deux à la fois.
Paramètres de modèle
Les paramètres de modèle indiquent les valeurs qui permettent de personnaliser le contenu des
documents basés sur le modèle. Ils permettent de définir des régions facultatives, des attributs de
balise modifiables et des valeurs à transmettre aux documents joints. Pour chaque paramètre, vous
devez définir un nom, un type de donnée et une valeur par défaut. Vous devez attribuer un nom
unique à chaque paramètre. En outre, les paramètres sont sensibles à la casse.
Les paramètres de modèle sont transmis au document sous forme de paramètres d’instance. En
général, l’utilisateur d’un modèle est autorisé à modifier les valeurs par défaut du paramètre pour
personnaliser le contenu du document basé sur le modèle. Dans d’autres cas, le créateur du
modèle peut déterminer ce qui apparaît dans le document, selon la valeur d’une expression de
modèle.
Rubriques connexes
• Utilisation des régions facultatives, page 248
• Définition d’attributs de balise modifiables, page 250
Expressions de modèle
Les expressions de modèle sont des instructions qui permettent de calculer ou d’évaluer une
valeur.
Vous pouvez utiliser une expression pour enregistrer une valeur et l’afficher dans un document.
Vous pouvez notamment rédiger une expression simple se limitant à la valeur d’un paramètre, par
exemple @@(Param)@@, ou bien une expression plus complexe permettant de calculer les valeurs
qui feront alterner la couleur d’arrière-plan de la ligne d’un tableau, par exemple @@((_index &
1) ? red : blue)@@.
Vous pouvez également rédiger des expressions pour définir des conditions If et MultipleIf (voir,
par exemple, La condition Multiple If dans le code du modèle, page 237). Lorsqu’une instruction
conditionnelle contient une expression, Dreamweaver évalue si celle-ci est true ou false. Si la
condition est true, la région facultative s’affiche dans le document basé sur le modèle ; si elle est
false, elle n’apparaît pas.
Vous pouvez définir des expressions en mode Code ou dans la boîte de dialogue de la région
facultative que vous insérez. Pour plus d’informations sur la rédaction d’expressions de modèle,
voir Le langage d’expression de modèle, page 236.
En mode Code, il existe deux façons de définir des expressions de modèle : l’insertion du
commentaire <!-- TemplateExpr expr=“votre expression”--> ou @@(votre
expression)@@. Lorsque vous insérez l’expression dans le code du modèle, un marqueur
d’expression apparaît en mode Création. Lorsque vous appliquez le modèle, Dreamweaver évalue
l’expression et affiche la valeur dans le document basé sur le modèle.
A propos des modèles Dreamweaver
235
Le langage d’expression de modèle
Le langage d’expression de modèle utilise la syntaxe et les règles de priorité de JavaScript, dont il
constitue un sous-ensemble. Vous pouvez utiliser des opérateurs JavaScript pour rédiger des
expressions, comme dans l’exemple suivant :
@@(firstName+lastName)@@
Les fonctions et opérateurs suivants sont pris en charge :
• constantes numériques, constantes de chaîne (syntaxe avec guillemets doubles uniquement),
•
•
•
•
•
•
constantes booléennes (true ou false)
référence à une variable (voir le modèle d’objet d’expression pour connaître les variables
définies)
référence à un champ (opérateur « point »)
opérateurs unaires : +, -, ~, !
opérateurs binaires : +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
opérateurs conditionnels : ?:
parenthèses : ()
Les types de données suivants sont pris en charge : booléen, virgule flottante 64 bits IEEE, chaîne
et objet. Les modèles Dreamweaver ne prennent pas en charge l’utilisation des types JavaScript
« null » et « undefined ». Ils ne permettent pas non plus de convertir implicitement les types
scalaires en objet. Par conséquent, l’expression "abc".length provoquera une erreur au lieu de
fournir la valeur 3.
Les seuls objets disponibles sont ceux qui sont définis par le modèle d’objet d’expression. Les
variables suivantes sont définies :
_document
Contient les données de modèle de niveau document. Comprend un champ pour chaque
paramètre du modèle et un ensemble de champs fournissant des informations prédéfinies sur le
document.
_repeat
Définie uniquement pour les expressions situées à l’intérieur d’une région répétée. Fournit des
informations prédéfinies sur la région :
_index
Index numérique (à partir de 0) de l’entrée en cours.
_numRows
Nombre total d’entrées dans la région répétée.
_isFirst
Vrai (true) si l’entrée en cours est la première entrée de la région répétée.
_isLast
Vrai (true) si l’entrée en cours est la dernière entrée de la région répétée.
Objet _repeat de l’entrée précédente. L’accès à cette propriété provoque une
erreur si l’entrée est la première de la région.
_prevRecord
Objet _repeat de l’entrée suivante. L’accès à cette propriété provoque une erreur
si l’entrée est la dernière de la région.
_nextRecord
Dans une région répétée imbriquée, donne l’objet _repeat correspondant à la région
répétée extérieure. L’accès à cette propriété en dehors d’une région répétée imbriquée provoque
une erreur.
_parent
236
Chapitre 11 : Gestion des modèles
Lors de l’é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éder au paramètre de titre du document.
En cas de conflit de champ, les champs de l’objet _repeat ont la priorité sur les champs de l’objet
_document. Vous n’avez donc pas à référencer explicitement _document ou _repeat. Toutefois, il
se peut que _document soit nécessaire à l’intérieur d’une région répétée pour référencer les
paramètres de document masqués par les paramètres de région répétée.
Dans le cas de régions répétées imbriquées, seuls les champs de la région répétée intérieure sont
disponibles implicitement. Les régions extérieures doivent être référencées explicitement à l’aide
de _parent.
La condition Multiple If dans le code du modèle
Vous pouvez rédiger des expressions de modèle pour définir des conditions If et MultipleIf (voir
Expressions de modèle, page 235). Dans l’exemple suivant, un paramètre appelé "Dept" est créé,
une valeur initiale est définie et une condition MultipleIf est utilisée pour déterminer le logo qui
doit s’afficher.
Voici un exemple de code pouvant être inséré dans la section head du modèle :
<!-- TemplateParam name="Dept" type ="number" value ="1" -->
L’instruction conditionnelle suivante vérifie la valeur attribuée au paramètre Dept. Si la condition
renvoie "true" ou la valeur correspondante, l’image adéquate s’affiche.
<!-- TemplateBeginMultipleIf -->
<!-- vérifier la valeur de Dept et afficher l’image adéquate-->
<!-- TemplateBeginClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif">
<!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif">
<!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
Lorsque vous créez un document basé sur un modèle, les paramètres du modèle lui sont
automatiquement transmis. L’utilisateur du modèle détermine l’image à afficher (voir
Modification des propriétés du modèle, page 259).
A propos des modèles Dreamweaver
237
Création d’un modèle Dreamweaver
Vous pouvez créer un modèle à partir d’un document existant (tel qu’un document HTML,
Macromedia ColdFusion ou Microsoft ASP) ou bien à partir d’un nouveau document vierge.
Après avoir créé un modèle, vous pouvez y insérer des régions (voir Types de régions de modèle,
page 226). Vous pouvez également y définir des préférences en matière de coloration du code et
de couleur de surbrillance des régions (voir Personnalisation des préférences de coloration de code
d’un modèle, page 239 et Définition des préférences de surbrillance pour des régions de modèle,
page 240).
Conseil : Si vous souhaitez enregistrer des informations supplémentaires sur un modèle (par
exemple, le nom de la personne qui l’a créé, la date de sa dernière modification ou les raisons justifiant
certaines décisions relatives à la mise en forme), vous pouvez créer un fichier Design Notes pour le
modèle (voir Association de Design Notes à un fichier, page 117). Les documents basés sur un modèle
n’héritent pas des Design Notes associées à ce dernier.
Pour créer un modèle :
1 Ouvrez le document que vous souhaitez enregistrer comme modèle :
■
■
Pour ouvrir un document existant, choisissez Fichier > Ouvrir et sélectionnez le document.
Pour ouvrir un document vierge, choisissez Fichier > Nouveau. Dans la boîte de dialogue
qui apparaît, sélectionnez Page de base ou Page dynamique et le type de page avec lequel
vous souhaitez travailler, puis cliquez sur le bouton Créer.
Remarque : Pour plus d’informations sur la création d’un nouveau document, voir Création d’un
document vierge, page 76.
2 Une fois le document ouvert, procédez de l’une des manières suivantes :
■
■
Choisissez Fichier > Enregistrer comme modèle.
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Modèles, puis
choisissez Créer un modèle.
Remarque : Si vous n’avez pas sélectionné Ne plus afficher ce message, un message s’affiche
vous indiquant que le document que vous enregistrez ne comporte aucune région modifiable.
Cliquez sur OK pour enregistrer le document comme modèle, ou bien sur Annuler pour fermer la
boîte de dialogue sans créer de modèle.
La boîte de dialogue Enregistrer comme modèle s’affiche.
3 Sélectionnez le site dans lequel vous souhaitez enregistrer le modèle dans le menu déroulant Site,
puis tapez un nom unique pour le modèle dans la zone de texte Enregistrer sous.
4 Cliquez sur Enregistrer.
238
Chapitre 11 : Gestion des modèles
Dreamweaver enregistre le fichier de modè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ée
automatiquement au moment de l’enregistrement du nouveau modèle.
Remarque : Ne retirez pas vos modèles du dossier Templates et placez dans celui-ci uniquement
des fichiers de modè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ès des modèles.
Pour créer un modèle à l’aide du panneau Actifs
1 Dans le panneau Actifs (Fenêtre > Actifs), sélectionnez la catégorie Modèles sur le côté gauche
du panneau.
La catégorie Modèles du panneau Actifs s’affiche.
2 Cliquez sur le bouton Nouveau modèle en bas du panneau Actifs.
Un nouveau modèle, sans nom, est ajouté à la liste de modèles du panneau Actifs.
3 Le modèle étant toujours sélectionné, donnez-lui un nom, puis appuyez sur Entrée (Windows)
ou Retour (Macintosh).
Dreamweaver crée un nouveau modèle vierge dans le panneau Actifs et dans le dossier
Modèles.
Rubriques connexes
• Définition des préférences de surbrillance pour des régions de modèle, page 240
• Création de modèles pour un site Contribute, page 241
• Insertion d’une région modifiable, page 243
Personnalisation des préférences de coloration de code d’un modèle
Utilisez ces préférences pour définir la couleur des caractères, la couleur de l’arrière-plan et les
attributs de style du texte affiché en mode Code. Vous pouvez définir votre propre modèle de
couleur afin de pouvoir distinguer facilement les régions de modèle lorsque vous affichez un
document en mode Code.
Pour définir un modèle de couleurs à appliquer aux modèles en mode Code :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2
3
4
5
La boîte de dialogue Préférences s’affiche.
Sélectionnez la catégorie Coloration du code dans la liste de gauche.
Sélectionnez HTML dans la liste Type de document, puis cliquez sur le bouton Modifier le
modèle de coloration.
La boîte de dialogue Modifier le modèle de coloration pour HTML s’affiche.
Dans la liste Styles pour, sélectionnez Balises de modèle.
Définissez la couleur des caractères, la couleur de l’arrière-plan et les attributs de style du texte
affiché en mode Code. Pour ce faire, procédez de la manière suivante :
■ Tapez dans la zone de texte Couleur de texte la valeur hexadécimale de la couleur que vous
souhaitez appliquer au texte sélectionné, ou bien utilisez le sélecteur de couleur pour
sélectionner cette couleur. Procédez de la même manière pour le champ Couleur d’arrièreplan si vous souhaitez appliquer une couleur à l’arrière-plan du texte sélectionné, ou bien
modifier la couleur courante.
Création d’un modèle Dreamweaver
239
Si vous souhaitez appliquer un attribut de style au code sélectionné, utilisez les boutons B
(gras), I (italique) et U (souligné) pour appliquer le style souhaité.
6 Cliquez sur OK.
■
Définition des préférences de surbrillance pour des régions de modèle
Les préférences de surbrillance Dreamweaver permettent de personnaliser les couleurs de
surbrillance appliquées aux cadres entourant les régions modifiables et les régions verrouillées d’un
modèle en mode Création. La couleur de surbrillance des régions modifiables est utilisée dans le
modèle, mais aussi dans les documents basés sur ce modèle.
Pour plus d’informations sur l’affichage des modèles et des documents basés sur un modèle en
mode Création, voir Affichage d’un modèle en mode Création, page 227 et Affichage d’un document
basé sur un modèle en mode Création, page 229.
Pour modifier les couleurs de surbrillance :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Surbrillance dans la liste de gauche.
3 Cliquez dans la case de couleur Régions modifiables, Régions modifiables imbriquées ou
Régions verrouillées, puis sélectionnez une couleur de surbrillance à l’aide de la pipette (ou tapez
la valeur hexadécimale correspondant à 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épétez cette opération pour les autres types de région de modèle, autant de fois que
nécessaire.
5 Cochez la case Afficher pour activer l’affichage des couleurs dans la fenêtre de document ou
décochez- la pour désactiver l’affichage.
Remarque : La case de couleur Régions modifiables imbriquées ne s’accompagne pas de l’option
Afficher : l’affichage des régions imbriquées est en effet contrôlé par l’option Régions modifiables.
6 Cliquez sur OK.
Pour afficher les couleurs de surbrillance dans la fenêtre de document :
• Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Les couleurs de surbrillance apparaissent dans la fenêtre de document uniquement lorsque
l’option Affichage > Assistances visuelles > Eléments invisibles est activée et que les options
appropriées sont activées dans les préférences de surbrillance.
Remarque : Si des éléments invisibles apparaissent mais pas les couleurs de surbrillance,
choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis
sélectionnez la catégorie Surbrillance. Vérifiez que l’option Afficher est activée près de la couleur
de surbrillance appropriée. Vérifiez également que la couleur souhaitée est contrastée par rapport
à la couleur d’arrière-plan de votre page.
Rubriques connexes
• Personnalisation des préférences de coloration de code d’un modèle, page 239
240
Chapitre 11 : Gestion des modèles
Création de modèles pour un site Contribute
A l’aide de Dreamweaver, vous pouvez créer des modèles afin d’aider les utilisateurs de
Macromedia Contribute à créer de nouvelles pages, à définir l’aspect général du site et à mettre à
jour la mise en forme de plusieurs pages à la fois.
Lorsque vous créez un modèle et que vous le chargez sur le serveur, il devient disponibles pour
tous les Contribute utilisateurs se connectant à votre site, sauf si vous avez limité l’utilisation du
modèle aux groupes d’autorisations de Contribute. Si vous avez défini des restrictions sur
l’utilisation des modèles, il peut s’avérer nécessaire d’ajouter chaque nouveau modèle à la liste des
modè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éfini est le
même que le dossier racine de votre définition de site dans Dreamweaver. Si un dossier racine de site
utilisateur ne correspond pas au vôtre, cet utilisateur ne pourra pas utiliser les modèles.
En complément des modèles Dreamweaver, vous pouvez créer des modèles non Dreamweaver à l’aide
des outils d’administration de Contribute. Un modèle non-Dreamweaver est une page existante dont
les utilisateurs de Contribute peuvent se servir pour créer de nouvelles pages. Cette page est similaire à
un modèle Dreamweaver, à l’exception que les pages basées sur ce modèle ne se mettent pas à jour
lorsque vous apportez des modifications à ce dernier. Les modèles non-Dreamweaver ne peuvent pas
contenir d’éléments de modèles Dreamweaver, tels que des régions modifiables ou verrouillées, des
répétitions de régions ou autres régions facultatives.
Lorsqu’un utilisateur de Contribute crée un nouveau document au sein d’un site contenant
des modèles Dreamweaver, Contribute établit la liste des modèles disponibles (Dreamweaver et
non-Dreamweaver) dans la boîte de dialogue Nouvelle page.
Création de modèles pour un site Contribute
241
Pour inclure dans votre site des pages contenant des encodages autres que Latin-1, vous devez
créer des modèles (Dreamweaver ou non Dreamweaver). Contribute permet de modifier des
pages, quels que soient leurs encodages. Cependant, lorsqu’un utilisateur de Contribute crée une
nouvelle page, celle-ci est basée sur l’encodage Latin-1. Pour créer une page utilisant un encodage
différent, l’utilisateur de Contribute peut créer une copie d’une page existante basée sur un
encodage différent ou utiliser un modèle basé sur un encodage différent. Cela dit, si le site
utilisant d’autres encodages ne contient pas de pages ni de modèles, créez d’abord, dans
Dreamweaver, une page ou un modèle utilisant cet autre encodage.
Pour plus d’informations sur la création, la modification et la mise à jour des modèles
Dreamweaver, voir A propos des modèles Dreamweaver, page 226.
Pour créer un modèle non-Dreamweaver :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site s’ouvre.
3 Cliquez sur l’onglet Avancé.
4 Sélectionnez la catégorie Contribute dans la liste de gauche.
5 Si vous ne l’avez pas déjà fait, vous devez activer la compatibilité avec Contribute.
Activez l’option Activer la compatibilité 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édez de l’une des manières suivantes :
■ Si la boîte de dialogue Mot de passe administrateur s’affiche, tapez le mot de passe
administrateur, puis cliquez sur OK.
■ Si aucun administrateur ne gère ce site, une boî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îte de dialogue Administration du site Web s’affiche.
8 Sélectionnez un groupe d’autorisations, puis cliquez sur le bouton Modifier le groupe.
9 Sélectionnez la catégorie Nouvelles pages, puis ajoutez les pages existantes à la liste située en
dessous de l’option Cré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îte de dialogue Groupe d’autorisations.
11 Cliquez sur OK pour fermer la boîte de dialogue Administration du site Web.
Rubriques connexes
• Création d’un modèle Dreamweaver, page 238
242
Chapitre 11 : Gestion des modèles
Création de régions modifiables
Il est possible de créer des régions modifiables dans un modèle pour définir les zones qui pourront
être modifiées dans les pages basées sur ce modèle.
Rubriques connexes
• Types de régions de modèle, page 226
Insertion d’une région modifiable
Avant d’insérer une région modifiable, il est conseillé d’enregistrer le document actif comme
modèle (voir Création d’un modèle Dreamweaver, page 238).
Remarque : Si vous insérez une région modifiable non pas dans un fichier de modèle mais dans un
document, Dreamweaver vous informe que le document sera automatiquement enregistré comme
modèle.
Vous pouvez placer une région modifiable n’importe où 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ême région modifiable. Si une balise <td> est sélectionnée, la région modifiable comprend
la région située autour de la cellule. Dans le cas contraire, la région modifiable concerne
uniquement le contenu de la cellule.
Les calques et leur contenu sont deux élé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érer une région de modèle modifiable :
1 Dans la fenêtre de document, procédez de l’une des manières suivantes pour sélectionner la
région.
■ Sélectionnez le texte ou le contenu que vous souhaitez définir comme région modifiable.
■ Placez le point d’insertion à l’endroit où vous voulez insérer une région modifiable.
2 Procédez de l’une des manières suivantes pour insérer une région modifiable :
■ Choisissez Insertion > Objets de modèle > Région modifiable.
■ Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Modèles > Nouvelle région modifiable.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Modèles, puis
choisissez Région modifiable.
La boîte de dialogue Nouvelle région modifiable s’affiche.
3 Dans la zone de texte Nom, tapez un nom unique pour la région (vous ne pouvez pas utiliser le
même nom pour plusieurs régions modifiables dans un modèle donné).
Remarque : Ne tapez pas de caractères spéciaux dans la zone de texte Nom.
4 Cliquez sur OK.
Création de régions modifiables
243
La région modifiable est entourée d’un cadre rectangulaire dans le modèle, de la couleur de
surbrillance définie dans les préférences. Dans le coin supérieur gauche de la région, un onglet
indique le nom de la région. Si vous insérez une région modifiable vide dans le document, son
nom s’affiche également dans le cadre qui la délimite.
Remarque : Pour plus d’informations sur les options de mise en surbrillance du contenu d’un
modèle, voir Définition des préférences de surbrillance pour des régions de modèle, page 240.
Rubriques connexes
• Suppression d’une région modifiable, page 244
• Modification du nom d’une région modifiable, page 245
Sélection de régions modifiables
Vous pouvez facilement identifier et sélectionner les différentes régions présentes dans un modèle
et dans un document basé sur un modèle.
Pour sélectionner une région modifiable dans la fenêtre de document :
• Cliquez sur l’onglet situé dans le coin supérieur gauche de la région modifiable.
Pour rechercher une région modifiable et la sélectionner dans le document :
• Choisissez Modifier > Modèles, puis le nom de la région dans la liste figurant en bas de ce sousmenu.
Remarque : Les régions modifiables situées à l’intérieur d’une région répétée ne sont pas
répertoriées dans le menu. Pour localiser ces régions, vous devez rechercher les cadres à onglet
qui figurent dans la fenêtre de document.
La région modifiable est sélectionnée dans le document.
Rubriques connexes
• Définition des préférences de surbrillance pour des régions de modèle, page 240
• Insertion d’une région modifiable, page 243
• Modification du nom d’une région modifiable, page 245
Suppression d’une région modifiable
Si vous avez marqué une région de votre fichier de modèle comme étant modifiable, vous pouvez
la verrouiller (pour la rendre non modifiable dans les documents basés sur le modèle) à l’aide de la
commande Supprimer le marqueur de modèle.
Pour supprimer une région modifiable :
1 Cliquez sur l’onglet situé dans le coin supérieur gauche de la région modifiable pour la
sélectionner.
2 Procédez de l’une des manières suivantes :
Choisissez Modifier > Modèles > Supprimer le marqueur de modèle.
Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Modèles > Supprimer le marqueur de modèle.
La région n’est alors plus modifiable.
■
■
244
Chapitre 11 : Gestion des modèles
Rubriques connexes
• Insertion d’une région modifiable, page 243
Modification du nom d’une région modifiable
Après avoir inséré une région modifiable, vous pouvez en modifier le nom.
Pour modifier le nom d’une région modifiable :
1 Cliquez sur l’onglet situé dans le coin supérieur gauche de la région modifiable pour la
sélectionner.
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), tapez un nouveau nom.
3 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Dreamweaver applique le nouveau nom à la région modifiable.
Rubriques connexes
• Insertion d’une région modifiable, page 243
Création de régions répétées
Une région répétée est une section d’un modèle qui peut être reproduite autant de fois qu’on le
souhaite dans les pages basées sur ce modèle. On utilise généralement les régions répétées dans le
cas de tableaux. Toutefois, il est possible de définir des régions répétées pour d’autres éléments de
page.
Les régions répétées permettent de définir la mise en page au moyen de la répétition de certains
éléments (article de catalogue et description, par exemple) ou de lignes, par exemple dans le cas
d’une liste d’éléments.
Il existe deux objets de modèle de région répétée : région répétée et tableau répété.
Rubriques connexes
• Types de régions de modèle, page 226
Création d’une région répétée dans un modèle
La répétition de régions permet de copier une région spécifique autant de fois que nécessaire dans
un modèle. Une région répétée n’est pas modifiable.
Pour rendre modifiable le contenu d’une région répétée (par exemple pour autoriser un utilisateur
à taper du texte dans une cellule de tableau dans un document basé sur un modèle), vous devez
insérer une région modifiable dans la région répétée (voir Insertion d’une région modifiable,
page 243).
Pour plus d’informations sur la création de tableaux répétés modifiables, voir Insertion d’un
tableau répété, page 246.
Création de régions répétées
245
Pour insérer une région répétée dans un modèle :
1 Dans la fenêtre Document, procédez de l’une des manières suivantes :
Sélectionnez le texte ou le contenu que vous souhaitez définir comme région répétée.
■ Placez le point d’insertion dans le document à l’endroit où vous souhaitez insérer la région
répétée.
2 Procédez de l’une des manières suivantes pour créer une région répétée :
■ Choisissez Insertion > Objets de modèle > Région répétée.
■ Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Modèles > Nouvelle région répétée.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Modèles, puis
choisissez Région répétée.
■
La boîte de dialogue Nouvelle région répétée s’affiche.
3 Dans la zone de texte Nom, tapez un nom unique pour la région de modèle (vous ne pouvez
pas utiliser le même nom pour plusieurs régions répétées dans un modèle donné).
Remarque : N’insérez pas de caractères spéciaux dans un nom de région.
4 Cliquez sur OK.
La région répétée est insérée dans le modèle.
Remarque : Une région répétée ne peut pas être modifiée dans un document basé sur un modèle
si elle ne contient pas de région modifiable. Pour plus d’informations sur l’insertion d’une région
modifiable, voir Insertion d’une région modifiable, page 243.
Insertion d’un tableau répété
Vous pouvez créer une région modifiable (sous forme de tableau) à lignes répétées à l’aide d’un
tableau répété. Vous pouvez définir des attributs de tableau et indiquer les cellules du tableau
pouvant être modifiées.
Pour insérer un tableau répété :
1 Placez le point d’insertion dans la fenêtre de document à l’endroit où vous souhaitez insérer le
tableau répété.
2 Procédez de l’une des manières suivantes :
■ Choisissez Insertion > Objets de modèle > Tableau répété.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Modèles, puis
choisissez Tableau répété.
246
Chapitre 11 : Gestion des modèles
La boîte de dialogue Insérer un tableau répété s’affiche.
3 Spécifiez les nouvelles valeurs de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Le tableau répété s’affiche dans le modèle.
Définition d’une couleur d’arrière-plan alternée dans un tableau répété
Après avoir inséré un tableau répété dans un modèle (voir Insertion d’un tableau répété, page 246),
vous pouvez le personnaliser en alternant la couleur d’arrière-plan des lignes du tableau.
Pour faire alterner la couleur d’arrière-plan des lignes d’un tableau :
1 Dans la fenêtre de document, sélectionnez une ligne du tableau répété.
2 Cliquez sur le bouton Afficher le mode code ou Afficher les modes Code et Création de la barre
d’outils du document pour accéder au code de la ligne sélectionnée.
3 En mode Code, modifiez la balise <tr> pour qu’elle se présente de la façon suivante :
<tr bgcolor="@@(_index & 1) ? ’#FFFFFF’ : ’#CCCCCC’@@">
Vous pouvez modifier les valeurs hexadécimales #FFFFFF et #CCCCCC si vous souhaitez utiliser
d’autres couleurs.
4 Enregistrez le modèle.
Exemple de code correspondant à un tableau dont la couleur d’arrière-plan des lignes est alternée :
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>
<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1) ? ’#FFFFFF’ : ’#CCCCCC’ @@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-TemplateEndEditable -->
</td>
</tr>
<!-- TemplateEndRepeat -->
</table>
Création de régions répétées
247
Utilisation des régions facultatives
Une région facultative est une région de modèle que les utilisateurs peuvent programmer pour
qu’elle s’affiche ou reste masquée dans les documents basés sur ce modèle. Utilisez une région
facultative si vous souhaitez définir les conditions suivant lesquelles certains éléments d’un
document doivent s’afficher.
Lorsque vous insérez une région facultative, vous pouvez associer des valeurs spécifiques à un
paramètre de modèle ou bien définir des instructions conditionnelles dans un modèle. Vous
pouvez modifier la région facultative ultérieurement si nécessaire. Suivant les conditions définies,
l’utilisateur du modèle peut modifier les paramètres dans les documents qu’il crée à partir du
modèle et décider si la région facultative doit s’afficher ou non (voir Modification des propriétés du
modèle, page 259).
Rubriques connexes
• Types de régions de modèle, page 226
Insertion d’une région facultative
Une région facultative permet de décider si des éléments doivent s’afficher ou être masqués dans
les documents basés sur le modèle. Il existe deux types d’objets de régions facultatives :
• Une région facultative permet à l’utilisateur du modèle d’afficher ou de masquer des régions
•
spécialement marquées sans devoir les activer pour en modifier le contenu.
L’onglet d’une région facultative est précédé du mot if dans un modèle. Suivant la condition
définie dans le modèle, l’utilisateur du modèle peut décider si la région doit apparaître dans les
pages qu’il crée.
Une région facultative modifiable permet à l’utilisateur du modèle de décider si elle doit être
affichée ou masquée et d’en modifier le contenu.
Par exemple, si la région facultative comprend une image ou du texte, l’utilisateur du modèle
peut décider si le contenu doit s’afficher et peut y apporter des modifications si nécessaire. Une
région modifiable est contrôlée par une instruction conditionnelle.
Remarque : Pour déterminer si les régions facultatives doivent être affichées ou masquées dans les
documents basés sur un modèle, voir Modification des propriétés du modèle, page 259.
Pour insérer une région facultative :
1 Dans la fenêtre de document, sélectionnez l’élément que vous souhaitez définir comme région
facultative.
2 Procédez de l’une des manières suivantes :
■ Choisissez Insertion > Objets de modèle > Région facultative.
■ Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh) sur le contenu sélectionné, puis choisissez Modèles > Nouvelle région
facultative.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Modèles, puis
choisissez Région facultative.
La boîte de dialogue Région facultative s’affiche.
3 Définissez les options de la région facultative.
248
Chapitre 11 : Gestion des modèles
Pour plus d’informations sur la définition d’une région facultative, cliquez sur le bouton Aide
de la boîte de dialogue.
4 Cliquez sur OK.
Pour insérer une région facultative modifiable :
1 Dans la fenêtre de document, placez le point d’insertion là où vous voulez insérer la région
facultative.
Conseil : Il est impossible d’envelopper une sélection pour créer une région facultative modifiable.
Insérez la région puis insérez le contenu dans la région.
2 Procédez de l’une des manières suivantes pour ouvrir la boîte de dialogue Région optionnelle :
■
■
Choisissez Insertion > Objets de modèle > Région facultative modifiable.
Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Modèles, puis
choisissez Région facultative modifiable.
La boîte de dialogue Région facultative s’affiche.
3 Tapez un nom pour la région facultative, puis cliquez sur l’onglet Avancé si vous souhaitez
définir d’autres options.
Pour plus d’informations sur la définition d’une région facultative, cliquez sur le bouton Aide
de la boîte de dialogue.
4 Cliquez sur OK.
Modification d’une région facultative
Il est possible de modifier les paramètres d’une région facultative insérée dans un modèle. Par
exemple, vous pouvez indiquer si le contenu doit ou non s’afficher par défaut, lier un paramètre à
une région facultative existante ou modifier une expression de modèle.
Remarque : Pour déterminer si les régions facultatives doivent être affichées ou masquées dans les
documents basés sur un modèle, voir Modification des propriétés du modèle, page 259.
Pour accéder à la boîte de dialogue Région optionnelle :
1 Dans la fenêtre Document, procédez de l’une des manières suivantes :
En mode Création, cliquez sur l’onglet correspondant à la région facultative que vous
souhaitez modifier.
■ En mode Création, placez le point d’insertion dans la région du modèle, puis, dans le
sélecteur de balises situé en bas de la fenêtre de document, sélectionnez la balise de modèle
<mmtemplate:if>.
■ En mode Code, cliquez sur la balise de commentaire de la région que vous souhaitez
modifier.
2 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur le bouton Modifier.
La boîte de dialogue Région facultative s’affiche.
3 Apportez les modifications de votre choix.
Pour plus d’informations sur l’option de la boîte de dialogue, cliquez sur le bouton Aide de la
boîte de dialogue.
4 Cliquez sur OK.
■
Utilisation des régions facultatives
249
Définition d’attributs de balise modifiables
Vous pouvez permettre aux utilisateurs d’un modèle de modifier des attributs de balise spécifiques
dans les documents créés à partir de ce modèle.
Vous pouvez par exemple appliquer une couleur d’arrière-plan au modèle tout en permettant aux
utilisateurs du modèle d’appliquer une couleur d’arrière-plan différente aux pages qu’ils créent.
Les utilisateurs peuvent mettre à jour uniquement les attributs que vous définissez comme étant
modifiables.
Remarque : Pour modifier des attributs de balise modifiables dans des documents basés sur un
modèle, voir Modification des propriétés du modèle, page 259.
Rubriques connexes
• Types de régions de modèle, page 226
Définition d’attributs de balise modifiables dans un modèle
Vous pouvez définir plusieurs attributs modifiables sur une page afin que les utilisateurs du
modèle puissent modifier les attributs dans les documents basés sur ce modèle. Les types de
données suivants sont pris en charge : texte, valeur booléenne (true/false), couleur et URL.
Pour définir un attribut de balise modifiable :
1 Dans la fenêtre de document, sélectionnez l’élément pour lequel vous souhaitez définir un
attribut de balise modifiable.
2 Sélectionnez Modifier > Modèles > Rendre l’attribut modifiable.
La boîte de dialogue Attributs de balise modifiables s’affiche.
3 Complétez la boîte de dialogue pour chaque attribut que vous souhaitez rendre modifiable.
Pour plus d’informations sur la façon de compléter la boîte de dialogue, cliquez sur le bouton
Aide de la boîte de dialogue.
4 Cliquez sur OK.
Lorsque vous créez un attribut de balise modifiable, un paramètre de modèle est inséré dans le
code. L’attribut reçoit une valeur initiale dans le modèle. Tous les documents créés à partir du
modèle héritent de ce paramètre. L’utilisateur du modèle peut alors modifier le paramètre dans
le document basé sur le modèle (voir Modification des propriétés du modèle, page 259).
Conversion d’un attribut de balise modifiable en attribut non modifiable
Une balise marquée comme modifiable peut être marquée comme non modifiable.
Pour redéfinir un attribut de balise modifiable :
1 Dans le modèle, cliquez sur l’élément associé à l’attribut modifiable, ou bien sélectionnez la
balise au moyen du sélecteur de balises.
2 Sélectionnez Modifier > Modèles > Rendre l’attribut modifiable.
La boîte de dialogue Attributs de balise modifiables s’affiche.
3 Dans le menu déroulant Attributs, sélectionnez l’attribut souhaité.
4 Décochez la case Rendre l’attribut modifiable.
5 Cliquez sur OK.
6 Mettez à jour les documents basés sur le modèle.
250
Chapitre 11 : Gestion des modèles
Rubriques connexes
• Définition d’attributs de balise modifiables dans un modèle, page 250
Création d’un modèle imbriqué
Les modèles imbriqués permettent de créer des variantes du modèle de base. Pour créer un modèle
imbriqué, enregistrez un document basé sur un modèle, puis enregistrez ce document comme
nouveau modèle. Vous pouvez créer une série de modèles imbriqués en chaîne pour obtenir une
mise en forme chaque fois plus précise. Pour plus d’informations, voir Modèles imbriqués,
page 233.
Par défaut, toutes les régions modifiables du modèle de base sont transmises, via le modèle
imbriqué, aux documents basés sur ce modèle imbriqué. En d’autres termes, si vous définissez une
région modifiable dans un modèle de base, puis que vous créez un modèle imbriqué, la région
modifiable apparaîtra dans les documents basés sur le modèle imbriqué, à condition que vous
n’ayez inséré aucune nouvelle région de modèle dans cette région du modèle imbriqué.
Dans les modèles imbriqués, les régions modifiables qui seront transmises aux documents sont
entourées d’un cadre bleu. Vous pouvez insérer un marqueur de modèle à l’intérieur d’une région
modifiable afin qu’elle ne soit pas modifiable dans les documents basés sur le modèle imbriqué.
Ces régions ont un cadre orange au lieu de bleu.
Pour créer un modèle imbriqué :
1 Créez un document à partir du modèle sur lequel vous souhaitez baser le modèle imbriqué :
Dans la catégorie Modèles du panneau Actifs, cliquez du bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le modèle à partir
duquel vous souhaitez créer un document, puis choisissez Nouveau à partir d’un modèle
dans le menu contextuel.
■ Choisissez Fichier > Nouveau. Dans la boîte de dialogue Nouveau document, cliquez sur
l’onglet Modèles, puis sélectionnez le site qui contient le modèle que vous souhaitez utiliser.
Dans la liste de documents, double-cliquez sur le modèle pour créer un document.
Un nouveau document s’affiche dans la fenêtre de document.
2 Procédez de l’une des manières suivantes pour enregistrer le nouveau document comme modèle
imbriqué :
■ Choisissez Fichier > Enregistrer comme modèle.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton Modèles, puis
choisissez Créer un modèle imbriqué.
■
La boîte de dialogue Enregistrer comme modèle s’affiche.
3 Tapez un nom dans la zone de texte Enregistrer sous, puis cliquez sur OK.
Lorsque vous créez un document à partir d’un modèle imbriqué, vous pouvez modifier et enrichir
le contenu des régions modifiables héritées du modèle de base et des régions modifiables créées
dans le nouveau modèle.
Création d’un modèle imbriqué
251
Pour qu’une région modifiable d’un modèle imbriqué devienne non modifiable dans les
documents basés sur ce modèle :
1 En mode Code, localisez la région modifiable que vous souhaitez rendre non modifiable dans
les documents basés sur ce modèle.
Les régions modifiables sont définies par les balises de commentaire du modèle.
2 Entourez la région modifiable (y compris les balises de commentaire) des marqueurs suivants :
@@" "@@
Modification et mise à jour des modèles
Lorsque vous apportez des modifications à un modèle et que vous l’enregistrez, Dreamweaver met
automatiquement à jour tous les documents joints à ce modèle. Vous pouvez aussi manuellement
mettre à jour les documents basés sur un modèle, si nécessaire.
Remarque : Pour modifier un modèle pour un site Contribute, vous devez utiliser Dreamweaver. Il est
impossible de modifier des modèles dans Contribute.
Dreamweaver vérifie automatiquement la syntaxe d’un modèle lorsque vous l’enregistrez. Vérifiez
aussi la syntaxe du modèle lorsque vous le modifiez, si désiré.
Remarque : Pour plus d’informations sur la modification de documents basés sur un modèle, voir
Modification du contenu d’un document basé sur un modèle, page 259.
Ouverture d’un modèle à modifier
Vous pouvez ouvrir un fichier de modèle directement pour le modifier ou bien ouvrir un
document basé sur un modèle, puis ouvrir le modèle joint pour le modifier.
Lorsque vous apportez des modifications à un modèle, Dreamweaver vous invite à mettre à jour
les documents basés sur ce modèle.
Remarque : Vous pouvez aussi manuellement mettre à jour les documents selon les modifications
apportées au modèle, si nécessaire (voir Mise à jour manuelle des documents basés sur un modèle,
page 253).
Pour ouvrir et modifier un fichier de modèle :
1 Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche du
panneau.
Le panneau Actifs contient tous les modèles disponibles pour votre site et affiche un aperçu du
modèle sélectionné.
2 Dans la liste des modèles disponibles, procédez de l’une des manières suivantes :
■ Double-cliquez sur le nom du modèle à modifier.
■ Sélectionnez un modèle à modifier, puis cliquez sur le bouton Modifier en bas du panneau
Actifs.
Le modèle s’ouvre dans la fenêtre de document.
3 Apportez les modifications souhaitées au contenu du modèle.
Conseil : Pour modifier les propriétés de page du modèle, choisissez Modifier > Propriétés de la
page (les documents basés sur un modèle héritent des propriétés de page associées à ce dernier).
4 Enregistrez le modèle.
Un message s’affiche, vous invitant à mettre à jour les pages basées sur le modèle.
252
Chapitre 11 : Gestion des modèles
5 Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié ;
cliquez sur Ne pas mettre à jour si vous ne souhaitez pas mettre à jour les documents basés sur
le modèle modifié.
Dreamweaver affiche un journal indiquant les fichiers mis à jour.
Pour ouvrir et modifier le modèle joint au document en cours :
1 Ouvrez le document basé sur le modèle dans la fenêtre de document.
2 Procédez de l’une des manières suivantes :
Choisissez Modifier > Modèles > Ouvrir le modèle joint.
■ Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Modèles > Ouvrir le modèle joint.
3 Apportez les modifications souhaitées au contenu du modèle.
■
Conseil : Pour modifier les propriétés de page du modèle, choisissez Modifier > Propriétés de la
page (les documents basés sur un modèle héritent des propriétés de page associées à ce dernier).
4 Enregistrez le modèle.
Un message s’affiche, vous invitant à mettre à jour les pages basées sur le modèle.
5 Cliquez sur Mettre à jour pour mettre à jour tous les documents basés sur le modèle modifié ;
cliquez sur Ne pas mettre à jour si vous ne souhaitez pas mettre à jour les documents basés sur
le modèle modifié.
Dreamweaver affiche un journal indiquant les fichiers mis à jour.
Rubriques connexes
• Mise à jour de modèles dans un site Contribute, page 254
• Vérification de la syntaxe du modèle, page 254
Mise à jour manuelle des documents basés sur un modèle
Lorsque vous modifiez un modèle, Dreamweaver vous invite à mettre à jour les documents basés
sur ce modèle, mais vous pouvez manuellement mettre à jour le document en cours ou le site tout
entier si nécessaire. La mise à jour manuelle des documents basés sur le modèle a le même effet
qu’une nouvelle application du modèle.
Pour que les modifications apportées au modèle soient appliquées au document en cours :
1 Ouvrez le document dans la fenêtre de document.
2 Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Dreamweaver applique au document les modifications apportées au modèle.
Pour mettre à jour le site entier ou tous les documents utilisant le modèle spécifié :
1 Choisissez Modifier > Modèles > Mettre à jour les pages.
La boîte de dialogue Mettre à jour les pages s’affiche.
2 Complétez la boîte de dialogue, puis cliquez sur le bouton Démarrer.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Dreamweaver met à jour les fichiers indiqués. Si vous avez sélectionné l’option Afficher le
journal, Dreamweaver affiche des informations sur les fichiers qu’il essaie de mettre à jour et
précise si la mise à jour a réussi.
Modification et mise à jour des modèles
253
3 Cliquez sur le bouton Fermer pour fermer la boîte de dialogue.
Rubriques connexes
• Ouverture d’un modèle à modifier, page 252
• Vérification de la syntaxe du modèle, page 254
Mise à jour de modèles dans un site Contribute
Les utilisateurs de Contribute ne peuvent pas modifier de modèles Dreamweaver. Vous pouvez
cependant utiliser Dreamweaver pour apporter des modifications dans un modèle de site
Contribute.
Gardez à l’esprit les points suivants lorsque vous mettez à jour des modèles dans un site
Contribute :
• Contribute récupère les nouveaux modèles et les modèles modifié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 à un modèle lorsqu’un utilisateur de Contribute
modifie un fichier basé sur ce modèle, l’utilisateur ne peut pas visualiser vos modifications tant
qu’il ne relance pas Contribute.
Si vous supprimez une région modifiable d’un modèle lorsqu’un utilisateur de Contribute est
en train de modifier une page basée sur ce modèle, le contenu de cette région modifiable peut
troubler cet utilisateur.
Pour modifier un modèle dans un site Contribute :
1 Modifiez le modèle à l’aide de Dreamweaver.
Pour plus d’informations, voir Ouverture d’un modèle à modifier, page 252.
2 Indiquez à tous les utilisateurs de Contribute travaillant sur ce site de quitter Contribute puis
de le relancer.
Vérification de la syntaxe du modèle
Dreamweaver vérifie automatiquement la syntaxe du modèle lorsque vous l’enregistrez, mais vous
pouvez la vérifier manuellement avant d’enregistrer le modèle. Par exemple, si vous ajoutez un
paramètre ou une expression de modèle en mode Code, vous pouvez vérifier que le code suit la
syntaxe correcte.
Pour vérifier si la syntaxe d’un modèle est correcte :
1 Ouvrez le document que vous souhaitez vérifier dans la fenêtre de document.
2 Choisissez Modifier > Modèles > Vérifier la syntaxe du modèle.
Un message d’erreur s’affiche lorsque cette syntaxe est incorrecte. Le message décrit l’erreur et
indique la ligne du code à l’origine de cette erreur.
Rubriques connexes
• Syntaxe des balises du modèle, page 230
• Expressions de modèle, page 235
254
Chapitre 11 : Gestion des modèles
Gestion des modèles
Gérez les modèles existants à l’aide de la catégorie Modèles du panneau Actifs. Elle permet entre
autres de renommer ou supprimer des fichiers de modèle.
Remarque : A l’aide du panneau Actifs, vous pouvez également appliquer un modèle à un document
(voir Modification et mise à jour des modèles, page 252) ou modifier un modèle (voir Ouverture d’un
modèle à modifier, page 252).
Pour renommer un modèle dans le panneau Actifs :
1 Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche du
panneau.
2 Cliquez sur le nom du modèle pour le sélectionner.
3 Cliquez une nouvelle fois sur le nom de sorte que le texte soit modifiable, puis tapez le nouveau
nom.
cette méthode fonctionne de la même façon que celle utilisé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èle pour modification.
4 Cliquez sur une autre zone du panneau Actifs ou appuyez sur Entrée (Windows) ou Retour
(Macintosh) pour appliquer la modification.
Un message apparaît pour vous demander si vous voulez mettre à jour les documents créés à
partir de ce modèle.
5 Pour mettre à jour tous les documents du site créés à partir de ce modèle, cliquez sur Mettre à
jour. Pour ne mettre à jour aucun des documents créés à partir de ce modèle, cliquez sur Ne pas
mettre à jour.
Pour supprimer un fichier de modèle :
1 Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche du
panneau.
2 Cliquez sur le nom du modèle pour le sélectionner.
3 Cliquez sur le bouton Supprimer en bas du panneau, puis confirmez l’opération.
Attention : Une fois que vous avez supprimé un fichier de modèle, vous ne pouvez pas le
récupérer. Le fichier de modèle est supprimé de votre site.
Les documents créés à partir de ce modèle ne sont pas détachés du modèle. Ils conservent la
structure et les régions modifiables dont le fichier de modèle disposait avant d’être supprimé.
Pour convertir un document de ce type en fichier HTML normal sans régions modifiables ou
verrouillées, voir Détachement d’un document d’un modèle, page 258.
Rubriques connexes
• Création d’un modèle Dreamweaver, page 238
• Application ou suppression d’un modèle depuis un document existant, page 257
• Modification et mise à jour des modèles, page 252
Gestion des modèles
255
Exportation et importation du contenu XML d’un modèle
Vous pouvez imaginer qu’un document basé sur un modèle contient des données représentées par
des paires nom/valeur. Chaque paire se compose du nom d’une région modifiable et du contenu
de cette région.
Dreamweaver vous permet d’exporter les paires nom/valeur dans un fichier XML pour que vous
puissiez utiliser les données du document en dehors de Dreamweaver (par exemple dans un
éditeur XML, dans un éditeur de texte ou même dans une application de base de données).
Inversement, si vous disposez d’un document XML structuré de manière appropriée, vous pouvez
importer ses données dans un document basé sur un modèle Dreamweaver.
Pour exporter les régions modifiables d’un document sous XML :
1 Ouvrez un document basé sur un modèle qui contient des régions modifiables.
2 Choisissez Fichier > Exporter > Données du modèle en XML.
La boîte de dialogue Exporter les données du modèle en XML s’affiche.
3 Activez l’une des options Notation :
Si le modèle contient des régions répétées ou des paramètres de modèle, choisissez Utiliser
les balises XML standard de Dreamweaver.
■ Si le modèle ne contient ni région répétée ni paramètre de modèle, choisissez Utiliser noms
de régions modifiables comme balises XML.
4 Cliquez sur OK.
Une boîte de dialogue s’affiche afin que vous puissiez enregistrer le fichier XML.
5 Sélectionnez un dossier, nommez le fichier XML, puis cliquez sur le bouton Enregistrer.
Dreamweaver génère un fichier XML contenant le matériau des paramètres et des régions
modifiables du document (y compris le matériau des régions facultatives et des régions
modifiables situées à l’intérieur de régions répétées). Le fichier XML comporte le nom du
modèle original, ainsi que le nom et le contenu de chaque région de modèle.
■
Remarque : Le contenu des régions non modifiables n’est pas exporté vers le fichier XML.
Pour importer du contenu XML :
1 Choisissez Fichier > Importer > XML dans le modèle.
La boîte de dialogue Importer XML s’affiche.
2 Sélectionnez le fichier XML, puis cliquez sur le bouton Ouvrir.
Dreamweaver crée un nouveau document basé sur le modèle spécifié dans le fichier XML. Il
remplit le contenu de chaque région modifiable de ce document à l’aide des données du
fichier XML. Le document résultant apparaît dans une nouvelle fenêtre de document.
Conseil : Si votre fichier XML n’est pas configuré exactement de la façon prévue par Dreamweaver,
vous ne pourrez peut-être pas importer vos données. Une solution à ce problème consiste à exporter
un fichier XML fictif de Dreamweaver, de façon à avoir un fichier XML ayant exactement la bonne
structure, puis à copier les données de votre fichier XML original dans le fichier XML exporté. Vous
obtenez ainsi un fichier XML ayant une structure correcte et contenant les données appropriées,
prêtes à être importées.
256
Chapitre 11 : Gestion des modèles
Exportation d’un site sans marqueur de modèle
Si vous souhaitez que les documents basés sur un modèle ne contiennent pas de marqueur de
modèle lorsque vous les exportez vers un autre site, utilisez la commande Exporter un site sans
marqueur de modèle.
Pour exporter un site sans marqueur de modèle :
1 Choisissez Modifier > Modèles > Exporter sans marqueur.
La boîte de dialogue Exporter un site sans marqueur de modèle s’affiche.
2 Sélectionnez le dossier dans lequel exporter le site, puis activez les options d’exportation
supplémentaires désirées.
Remarque : Sélectionnez un dossier situé à l’extérieur du site courant.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK.
Application ou suppression d’un modèle depuis un document
existant
Lorsque vous appliquez un modèle à un document existant, Dreamweaver relie son contenu aux
régions du modèle ou vous demande de résoudre les éléments non cohérents. Vous pouvez
supprimer le modèle par la suite pour apporter des modifications aux régions verrouillées.
Application d’un modèle à un document existant
Lorsque vous appliquez un modèle à un document contenant déjà des éléments, Dreamweaver
tente de faire concorder le contenu existant avec une région du modèle. Si le modèle que vous
appliquez au document est une version révisée de l’un des modèles existants, il est probable que les
noms concordent.
Si vous appliquez un modèle à un document auquel aucun modèle n’a encore été appliqué, les
régions modifiables ne peuvent pas être comparées et un cas de non-concordance se présente.
Dreamweaver les localise et vous pouvez alors sélectionner la région ou les régions vers lesquelles le
contenu de la page courante doit être transféré, ou bien décider de supprimer le contenu non
cohérent.
Vous pouvez appliquer un modèle à un document existant à l’aide du panneau Actifs ou à partir
de la fenêtre de document. Vous pouvez annuler l’application d’un modèle si nécessaire.
Pour appliquer un modèle à un document existant à l’aide du panneau Actifs :
1 Ouvrez le document auquel vous souhaitez appliquer le modèle.
2 Dans le panneau Actifs (Fenêtre > Actifs), choisissez la catégorie Modèles sur le côté gauche du
panneau.
3 Procédez de l’une des manières suivantes :
■ Faites glisser le modèle que vous souhaitez appliquer du panneau Actifs dans la fenêtre de
document.
■ Sélectionnez le modèle que vous souhaitez appliquer, puis cliquez sur le bouton Appliquer
en bas du panneau Actifs.
Application ou suppression d’un modèle depuis un document existant
257
Si le document comporte des éléments qui ne peuvent pas être automatiquement attribués à
une région de modèle, la boîte de dialogue Noms de région incohérents s’affiche.
4 Le cas échéant, sé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égions modifiables, voir
Résolution des incohérences de noms de région dans l’aide Utilisation de Dreamweaver.
Pour appliquer un modèle à un document existant à partir de la fenêtre de document :
1 Ouvrez le document auquel vous souhaitez appliquer le modèle.
2 Choisissez Modifier > Modèles > Appliquer le modèle à la page.
La boîte de dialogue Sélectionner le modèle s’affiche.
3 Sélectionnez un modèle dans la liste, puis cliquez sur le bouton Sélectionner.
Si le document comporte des éléments qui ne peuvent pas être automatiquement attribués à
une région de modèle, la boîte de dialogue Noms de région incohérents s’affiche.
4 Le cas échéant, sé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égions modifiables, voir
Résolution des incohérences de noms de région dans l’aide Utilisation de Dreamweaver.
Pour annuler les modifications apportées à un modèle :
• Choisissez Edition > Annuler l’application du modèle.
Le document retrouve l’état dans lequel il se trouvait avant l’application du modèle.
Détachement d’un document d’un modèle
Pour apporter des modifications aux régions verrouillées d’un document basé sur un modèle, vous
devez au préalable détacher le document du modèle. Lorsqu’un document est détaché, toutes les
régions qui le composent deviennent modifiables.
Pour détacher un document d’un modèle :
1 Ouvrez le document basé sur un modèle que vous souhaitez détacher.
2 Choisissez Modifier > Modèles > Détacher du modèle.
Le document est détaché du modèle et tout le code du modèle est supprimé.
Rubriques connexes
• Application d’un modèle à un document existant, page 257
258
Chapitre 11 : Gestion des modèles
Modification du contenu d’un document basé sur un modèle
Les modèles de Dreamweaver spécifient les régions qui sont verrouillées (non modifiables) et les
autres qui sont modifiables dans les documents basés sur ces modèles (voir A propos des modèles
Dreamweaver, page 226).
Sur les pages basées sur un modèle (voir Création d’un document basé sur un modèle existant,
page 77), les utilisateurs peuvent modifier uniquement le contenu des régions modifiables. Vous
pouvez facilement identifier et sélectionner les régions modifiables afin d’en modifier le contenu
(voir Sélection de régions modifiables, page 244). Les utilisateurs du modèle ne peuvent pas
modifier le contenu des régions verrouillées.
Remarque : Si vous essayez de modifier une région verrouillée dans un document basé sur un
modèle lorsque la surbrillance est désactivée, le pointeur de la souris se transforme pour indiquer que
vous ne pouvez pas cliquer dans une région modifiable.
Les utilisateurs du modèle peuvent également modifier les propriétés et les entrées d’une région
répétée dans les documents basés sur ce modèle.
Modification des propriétés du modèle
Lorsque l’auteur crée des paramètres dans un modèle (voir Paramètres de modèle, page 235), les
documents basés sur ce modèle héritent automatiquement des paramètres et de leur valeur
initiale. L’utilisateur du modèle peut mettre à jour les attributs de balise modifiables et d’autres
paramètres du modèle (ceux d’une région facultative, par exemple).
Pour modifier un attribut de balise modifiable :
1 Ouvrez le document basé sur un modèle.
2 Choisissez Modifier > Propriétés du modèle.
La boîte de dialogue Propriétés du modèle s’ouvre et affiche la liste des propriétés disponibles.
Elle indique les régions facultatives et les attributs de balise modifiables.
3 Sélectionnez la propriété dans la liste Nom.
L’étiquette et la valeur de la propriété sélectionnée s’affichent dans la partie inférieure de la
boîte de dialogue.
4 Si vous souhaitez modifier la valeur de la propriété dans le document courant, saisissez une autre
valeur dans le champ situé à droite de l’étiquette de la propriété.
Remarque : Le nom du champ et les valeurs modifiables sont définis dans le modèle. Les attributs
non répertoriés dans la liste Nom ne peuvent pas être modifiés dans le document basé sur un
modèle.
5 Activez l’option Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que la
propriété modifiable soit transmise aux documents basés sur le modèle imbriqué.
Pour modifier les paramètres de modèle des régions facultatives :
1 Ouvrez le document basé sur un modèle.
2 Choisissez Modifier > Propriétés du modèle.
La boîte de dialogue Propriétés du modèle s’ouvre et affiche la liste des propriétés disponibles.
Elle indique les régions facultatives et les attributs de balise modifiables.
3 Sélectionnez une propriété dans la liste Nom.
L’étiquette et la valeur de la propriété sélectionnée s’affichent dans la boîte de dialogue.
Modification du contenu d’un document basé sur un modèle
259
4 Activez l’option Afficher si vous souhaitez que la région facultative apparaisse dans le document,
ou bien désactivez-la si vous souhaitez qu’elle soit masquée.
Remarque : Le nom du champ et la valeur par défaut sont définis dans le modèle.
5 Activez l’option Autoriser les modèles imbriqués pour contrôler ceci si vous souhaitez que la
propriété modifiable soit transmise aux documents basés sur le modèle imbriqué.
Rubriques connexes
• Définition d’attributs de balise modifiables, page 250
• Utilisation des régions facultatives, page 248
Ajout et suppression d’entrées et modification de l’ordre des entrées dans une
région répétée
Vous pouvez ajouter ou supprimer des entrées ou bien modifier l’ordre des entrées dans une
région répétée. Lorsque vous ajoutez une entrée de région répétée, l’ensemble de la région répétée
est reproduit dans le document. La région répétée doit contenir une région modifiable dans le
modèle original pour que l’utilisateur puisse en modifier le contenu.
Pour ajouter et supprimer des entrées et pour modifier l’ordre des entrées dans une région
répétée :
1 Placez le point d’insertion sur la région répétée pour la sélectionner.
2 Procédez de l’une des manières suivantes :
■
■
■
■
Cliquez sur le bouton plus (+) pour ajouter une entrée de région répétée sous l’entrée
sélectionnée.
Cliquez sur le bouton moins (–) pour supprimer l’entrée de région répétée sélectionnée.
Cliquez sur le bouton Flèche bas pour déplacer l’entrée sélectionnée d’un niveau vers le bas.
Cliquez sur le bouton Flèche haut pour déplacer l’entrée sélectionnée d’un niveau vers le
haut.
Remarque : Vous pouvez également choisir Modifier > Modèles, puis activer l’une des options
d’entrée répétée près du bas du menu contextuel. Celui-ci permet d’insérer une nouvelle entrée de
région répétée et de modifier l’emplacement de l’entrée sélectionnée.
260
Chapitre 11 : Gestion des modèles
Pour couper, copier et supprimer des entrées :
1 Placez le point d’insertion sur la région répétée pour le sélectionner.
2 Procédez de l’une des manières suivantes :
■
■
■
■
Pour couper une entrée répétée, choisissez Edition > Entrées répétées > Couper l’entrée
répétée.
Pour copier une entrée répétée, choisissez Edition > Entrées répétées > Couper l’entrée
répétée.
Pour supprimer une entrée répétée, choisissez Edition > Entrées répétées > Supprimer
l’entrée répétée.
Pour coller une entrée répétée, choisissez Edition > Coller.
Remarque : Lorsque vous collez une entrée de région répétée, celle-ci s’insère dans le
document sans écraser d’entrée existante.
Rubriques connexes
• Création de régions répétées, page 245
Modification du contenu d’un document basé sur un modèle
261
262
Chapitre 11 : Gestion des modèles
Ajoutez des contenus variés à vos pages Web à l’aide des outils visuels de Macromedia
Dreamweaver MX 2004. Ajoutez des textes, images, couleurs, animations, sons et autres formes
de donné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’éléments audio, vidé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éer
de nouvelles pages Web en toute facilité. Vous pouvez ainsi aisément définir de nombreuses
propriétés de page (titre, image et couleur d’arriè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éer et de tester vos pages pour assurer une compatibilité totale avec
différents navigateurs.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
A propos de l’utilisation des pages, page 266
Enregistrement de pages Web, page 269
Spécification de balises HTML au lieu de CSS, page 270
Définition des propriétés de page, page 270
Utilisation des couleurs, page 273
Sélection d’éléments dans la fenêtre de document, page 274
Utilisation du panneau Historique, page 276
Automatisation des tâches, page 277
Utilisation de comportements JavaScript pour détecter le type et la version des navigateurs et des
plug-ins, page 282
Aperçu et test de page dans les navigateurs, page 283
Vérification des préférences de durée et de la taille de téléchargement, page 284
265
A propos de l’utilisation des pages
Lors de la création d’une nouvelle page Web, vous devez considérer les navigateurs et systèmes
d’exploitation des visiteurs qui consulteront votre site et, éventuellement, les langues à utiliser. Les
sections suivantes vous guideront dans le choix de couleurs définies qui s’afficheront de manière
identique sur différents navigateurs Web, l’encodage de divers caractères pour certaines langues ou
encore la vérification de la compatibilité d’un navigateur défini avec votre site.
A propos de la définition des propriétés de page
Pour chaque page que vous créez dans Dreamweaver, vous pouvez spécifier les propriétés de mise
en forme dans la boîte de dialogue Propriétés de la page (Modifier > Propriétés de la page). Cette
boîte de dialogue permet de spécifier la famille et la taille par défaut de la police, la couleur
d’arrière-plan, les marges, le style des liens ainsi que d’autres aspects de la conception de page.
Vous pouvez attribuer de nouvelles propriétés à chaque nouvelle page que vous créez et modifier
celles des pages existantes.
Par défaut Dreamweaver met le texte en forme à 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îte
de dialogue Préférences (Edition > Préférences). Lors de l’utilisation des propriétés de page CSS,
Dreamweaver utilise des balises CSS pour l’ensemble des propriétés définies dans les catégories
Aspect, Liens et En-têtes de la boîte de dialogue Propriétés de la page. Les balises CSS qui
définissent ces attributs sont intégrées dans la section head de la page.
Remarque : Les propriété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’écrase pas les balises définies dans
la feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.
Comparaison des propriétés de page CSS et HTML
Par défaut, Dreamweaver utilise les balises CSS pour attribuer les propriétés de page. Si vous
souhaitez utiliser des balises HTML à la place, vous devez le spécifier dans la boîte de dialogue
Préférences (voir Spé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étés
affiche quand même le menu déroulant Style. Cependant, les commandes de police, taille,
couleur et alignement indiquent uniquement les propriétés qui utilisent les balises HTML. Les
valeurs des propriétés CSS appliquées à la sélection en cours ne sont plus visibles et le menu
déroulant Taille est désactivé.
Rubriques connexes
• Spécification de balises HTML au lieu de CSS, page 270
• Définition des propriétés de page, page 270
A propos du panneau Historique
Le panneau Historique répertorie un nombre défini d’actions réalisées au sein du document actif
depuis que vous l’avez créé ou ouvert, mais il n’affiche pas les actions réalisées dans d’autres cadres,
d’autres fenêtres de document ou dans le panneau Site. Il vous permet d’annuler une ou plusieurs
actions, de reproduire des actions et de créer de nouvelles commandes pour automatiser les tâches
répétitives.
Etapes
Curseur (index)
Bouton
Reproduire
Bouton Enregistrer comme commande
Bouton Copier les étapes
Lors de l’ouverture du panneau Historique, le curseur, ou index, pointe sur la dernière action que
vous avez accomplie.
Rubriques connexes
• Utilisation du panneau Historique, page 276
A propos des couleurs sécurisées pour le Web
En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou,
pour les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une
couleur qui, en mode 256 couleurs, reste toujours la mê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écimale combinant les paires 00, 33, 66, 99, CC ou FF
(correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une
couleur sécurisée pour le Web.
Des tests approfondis ont cependant révélé qu’en réalité seules 212 couleurs sont sécurisé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é de la palette adaptée à tous les navigateurs est donc
bien moindre si vous développez votre site pour les utilisateurs de systèmes informatiques
modernes.
La palette de couleurs sécurisée pour le Web peut s’avérer utile si vous créez des sites pour des
appareils différents, comme les organisateurs personnels et les téléphones mobiles. Un grand
nombre de ces appareils sont équipés d’un écran noir et blanc (1 bit) ou 256 couleurs (8 bits).
Les palettes Cubes de couleur (valeur par défaut) et Ton continu de Dreamweaver utilisent la
palette sécurisée pour le Web de 216 couleurs ; lorsque vous sélectionnez une couleur dans ces
palettes, c’est la valeur hexadécimale correspondante qui s’affiche.
Pour choisir une couleur en dehors de la gamme sécurisée pour le Web, ouvrez le nuancier du
système en cliquant sur le bouton Roue chromatique en haut à droite du sélecteur de couleurs de
Dreamweaver. Celle-ci n’est pas limitée aux couleurs sécurisées pour le Web.
Les versions UNIX de Netscape Navigator utilisent une palette de couleurs différente de celle des
versions Windows et Macintosh. Si vous développez exclusivement pour des plates-formes UNIX
(ou si le public visé est composé d’utilisateurs de Windows ou de Macintosh équipés de moniteurs
24 bits et d’utilisateurs d’UNIX équipés de moniteurs 8 bits), vous pouvez utiliser des valeurs
hexadécimales combinant les paires 00, 40, 80, BF ou FF, qui produisent des couleurs sécurisées
pour le Web sur les ordinateurs exécutant SunOS.
Rubriques connexes
• Utilisation des couleurs, page 273
Description de l’encodage de document
L’encodage de document précise le codage utilisé pour les caractères dans le document. L’encodage
du document est spécifié dans une balise meta, insérée dans l’en-tête du document ; il indique au
navigateur et à Dreamweaver le mode de décodage du document et les polices à utiliser pour
afficher le texte décodé.
Par exemple, si vous spécifiez Occidental (Latin1), la balise meta suivante est insérée : <meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. Le document
affiché dans Dreamweaver contient les polices que vous spécifiez dans Préférences de polices pour
l’encodage Occidental (Latin1) ; ce même document affiché dans un navigateur contient les
polices que l’utilisateur du navigateur précise pour l’encodage Occidental (Latin1).
Si vous spécifiez Japonais (Maj JIS), la balise meta suivante est insérée : <meta httpequiv="Content-Type" content="text/html; charset=Shift_JIS">. Le document affiché
dans Dreamweaver contient les polices que vous spécifiez pour les encodages du japonais ; ce
même document affiché dans un navigateur contient les polices que l’utilisateur du navigateur
précise pour les encodages du japonais.
Pour modifier l’encodage du document dans une page, voir Définition des propriétés de page,
page 270. Pour modifier l’encodage utilisé par défaut par Dreamweaver pour créer de nouveaux
documents, voir Définition d’un nouveau type de document par défaut, page 79. Pour modifier les
polices utilisées dans Dreamweaver pour afficher chaque encodage, voir Définition des préférences
de police pour l’affichage Dreamweaver, page 60.
268
Chapitre 12 : Utilisation des pages
Comparatif utilisation de commandes enregistrées / reproduction d’étapes
Dreamweaver permet d’enregistrer une commande temporaire à utilisation limitée ou de
reproduire des étapes du panneau Historique.
Lorsque vous enregistrez une commande temporaire :
• Les étapes sont enregistrées au fur et à mesure que vous les effectuez, vous n’avez donc pas
•
•
besoin de les sélectionner dans le panneau Historique.
Durant la mémorisation, Dreamweaver vous empêche d’effectuer des actions à l’aide de la
souris lorsqu’il ne peut pas les mémoriser (par exemple un clic pour sélectionner un objet dans
une fenêtre ou glisser et déposer un élément sur une page).
Si vous passez dans un autre document durant une mémorisation, Dreamweaver ne mémorise
pas les actions effectuées dans l’autre document. Pour savoir à tout moment si vous êtes en
train de mémoriser, regardez le pointeur de la souris.
Rubriques connexes
• Automatisation des tâches, page 277
• Répétition d’étapes, page 278
• Mé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ère spécial dans les noms de fichier ou de dossier. En particulier,
n’utilisez pas de caractères spéciaux (par exemple é, ç ou ¥) 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ères lors du transfert,
rendant ainsi inopérants les liens vers ces fichiers. En outre, ne commencez pas le nom de fichier
par un numéro.
Pour enregistrer un document :
1 Procédez de l’une des manières suivantes :
Pour écraser la version présente sur le disque et enregistrer toute modification effectuée,
sélectionnez Fichier > Enregistrer.
■ Pour enregistrer le fichier dans un dossier différent ou sous un autre nom, sélectionnez
Fichier > Enregistrer sous.
2 Dans la boî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 > Enregistrer tout.
2 Si des documents non enregistrés sont ouverts, la boîte de dialogue Enregistrer sous s’affiche
pour chacun d’entre eux.
Enregistrement de pages Web
269
Dans la boîte de dialogue qui s’affiche, recherchez le dossier où 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 à la version précédemment enregistrée d’un document :
1 Choisissez Fichier > Rétablir.
Une boîte de dialogue s’affiche, vous invitant à confirmer que vous souhaiter annuler vos
modifications et revenir à la version précédemment enregistrée.
2 Cliquez sur Oui pour revenir à la version précédente ou cliquez sur Non pour conserver les
modifications apportées.
Remarque : Si vous enregistrez un document, puis que vous quittez Dreamweaver, il ne sera pas
possible de revenir à la version précédente lors de la prochaine utilisation de Dreamweaver.
Rubriques connexes
• Création de nouveaux documents, page 76
• Enregistrement d’un nouveau document, page 78
Spécification de balises HTML au lieu de CSS
Par défaut, Dreamweaver utilise les balises CSS pour attribuer les propriétés de page. Si vous
préférez utiliser des balises HTML, désactivez l’option Utiliser des balises CSS au lieu de balises
HTML dans la catégorie Général de la boîte de dialogue Préférences.
Pour spécifier des balises HTML au lieu de balises CSS pour les propriétés de la page :
1 Choisissez Edition > Préférences.
La boîte de dialogue Préférences s’affiche.
2 Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l’option Utiliser des
balises CSS au lieu de balises HTML.
Cette case à cocher se trouve dans la catégorie Options d’édition du panneau Préférences
générales.
3 Cliquez sur OK.
Rubriques connexes
• A propos de la définition des propriétés de page, page 266
Définition des propriétés de page
Les propriétés de base des documents Web sont les suivantes : titre de la page, images et couleurs
d’arrière-plan, couleur de base du texte et des liens et marges. Vous pouvez définir ou modifier les
propriétés de page à l’aide de la boîte de dialogue Propriétés de la page.
270
Chapitre 12 : Utilisation des pages
Pour définir les propriétés de document :
1 Choisissez Modifier > Propriétés de la page ou cliquez sur le bouton Propriétés de la page de
l’inspecteur de propriétés.
La boîte de dialogue Propriétés de la page s’ouvre.
2 Effectuez les changements de votre choix dans les propriétés de la page.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• A propos de la définition des propriétés de page, page 266
• Définition du style de soulignement des liens CSS, page 272
• Définition d’une image ou d’une couleur d’arrière-plan de la page, page 272
Modification du titre d’un document
Le titre d’une page HTML permet au visiteur de connaî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 à la page, elle apparaîtra sous le nom de Document sans
nom dans la fenê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 à
voir avec le titre de la page.
Pour localiser tous les documents sans nom de votre site, utilisez la commande Site > Rapports
(voir Test de votre site, page 119).
Pour changer le titre d’une page :
1 La fenêtre de document étant active, procédez de l’une des manières suivantes :
Choisissez Modifier > Propriétés de la page.
Choisissez Affichage > Barres d’outils > Document (si celle-ci n’est pas déjà sélectionnée).
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) sur une zone vide du document, puis sélectionnez Propriétés de la
page.
2 Dans la zone de texte Titre, tapez le titre de la page, puis appuyez sur la touche Entrée
(Windows) ou Retour (Macintosh).
3 Si vous modifiez le titre dans la boîte de dialogue Propriétés de la page, cliquez sur OK.
Le titre apparaît dans la barre de titre de la fenêtre de document (et dans la barre d’outils
Document si elle est affichée). Le nom de fichier de la page et le nom du dossier dans lequel ce
fichier est enregistré apparaissent entre parenthèses à côté du titre, dans la barre de titre. Un
astérisque indique que le document contient des modifications qui n’ont pas encore été
enregistrées.
■
■
Rubriques connexes
• A propos de la définition des propriétés de page, page 266
Définition des propriétés de page
271
Définition du style de soulignement des liens CSS
Si vous utilisez la boîte de dialogue de propriétés de page CSS par défaut, vous pouvez facilement
modifier le style des liens CSS. A l’aide des options de liens CSS, vous pouvez décider que les liens
ne soient jamais soulignés ou alors qu’ils soient soulignés ou désactivés uniquement lorsque la
souris est placée dessus.
Pour définir un style de lien CSS :
1 Choisissez Modifier > Propriétés de la page ou sélectionnez Propriétés de la page dans le menu
contextuel de la fenêtre de document en mode Création.
2 Sélectionnez la catégorie Liens dans la boîte de dialogue Propriétés de la page CSS.
3 Dans le menu déroulant Style souligné, sélectionnez le style souligné à utiliser par défaut pour
votre page.
4 Cliquez sur OK.
Rubriques connexes
• A propos de la définition des propriétés de page, page 266
• Chapitre 15, Liens et navigation, page 329
Définition d’une image ou d’une couleur d’arrière-plan de la page
Pour définir une image ou une couleur d’arrière-plan de la page, utilisez la boîte de dialogue
Propriétés de la page.
Si vous utilisez à la fois une image et une couleur d’arrière-plan, la couleur apparaît pendant le
téléchargement de l’image, puis elle est recouverte par l’image. Toutefois, si l’image d’arrière-plan
comprend des pixels transparents, la couleur d’arrière-plan reste visible dans ces zones.
Pour définir une image ou une couleur d’arrière-plan :
1 Choisissez Modifier > Propriétés de la page ou sélectionnez Propriétés de la page dans le menu
contextuel de la fenêtre de document en mode Création.
2 Sélectionnez la catégorie Aspect dans la boîte de dialogue Propriétés de la page.
3 Pour définir une image d’arrière-plan, cliquez sur le bouton Parcourir, puis naviguez jusqu’à
l’image et sélectionnez-la. Vous pouvez également indiquer le chemin de l’image d’arrière-plan
dans le champ Image d’arrière-plan.
Comme les navigateurs, Dreamweaver génère une mosaïque (multiplication) de l’image
d’arrière-plan si elle ne remplit pas entièrement sa fenêtre. Pour éviter la création de cette
mosaïque, désactivez cette fonction à l’aide des feuilles de style en cascade. Voir Définition des
propriétés d’arrière-plan de style CSS dans l’aide de Dreamweaver.
4 Pour définir une couleur d’arrière-plan, cliquez sur la case Couleur d’arrière-plan puis choisissez
une couleur dans le sélecteur.
Rubriques connexes :
• A propos de la définition des propriétés de page, page 266
272
Chapitre 12 : Utilisation des pages
Utilisation des couleurs
Dans Dreamweaver, les inspecteurs de propriétés de la plupart des éléments de page, ainsi que de
nombreuses boîtes de dialogue, comportent une icône permettant d’ouvrir un sélecteur de
couleur. Choisissez la couleur d’un élément de page dans le sélecteur.
Pour sélectionner une couleur dans Dreamweaver :
1 Cliquez sur l’icône des couleurs dans n’importe quelle boîte de dialogue ou dans l’inspecteur de
propriétés.
Le sélecteur de couleur s’affiche à l’écran.
2 Procédez de l’une des manières suivantes :
■
■
■
Utilisez la pipette pour sélectionner une nuance de couleur dans la palette. Toutes les
couleurs des palettes Cubes de couleur (valeur par défaut) et Ton continu sont sécurisées
pour le Web ; les autres palettes ne le sont pas. Pour plus d’informations, voir A propos des
couleurs sécurisées pour le Web, page 267.
Utilisez la pipette pour sélectionner une couleur à partir d’un point visible à l’écran, même à
l’extérieur de la fenêtre de Dreamweaver. Pour sélectionner une couleur sur le bureau ou
dans une autre application, appuyez sur le bouton de la souris et maintenez-le enfoncé. La
pipette peut ainsi rester active et sélectionner une couleur en dehors de Dreamweaver. Si
vous cliquez sur le bureau ou sur une autre application, Dreamweaver sélectionne la couleur
de l’emplacement où vous avez cliqué. Cependant, si vous passez à une autre application, il
peut s’avérer nécessaire de cliquer sur une fenêtre de Dreamweaver pour continuer à
travailler dans Dreamweaver.
Pour élargir plus amplement la sélection, utilisez le menu déroulant en haut à droite du
nuancier. Vous pouvez sélectionner les palettes Cubes de couleur, Ton continu, Système
d’exploitation Windows, Mac OS, Niveaux de gris et Couleurs web.
Remarque : Les palettes Cubes de couleur et Ton continu sont sécurisées pour le Web,
contrairement aux palettes Système d’exploitation Windows, Mac OS et Niveaux de gris. Si la
palette que vous utilisez n’est pas sécurisée pour le Web et que vous cliquez sur Couleurs web,
Dreamweaver remplace la couleur sélectionnée par la couleur sécurisée pour le Web la plus
proche. Autrement dit, la couleur que vous voyez n’est pas forcé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éfaut.
Pour ouvrir le nuancier du système, cliquez sur le bouton Roue chromatique. Pour plus
d’informations, voir A propos des couleurs sécurisées pour le Web, page 267.
Utilisation des couleurs
273
Définition des couleurs par défaut du texte
La boîte de dialogue Propriétés de la page permet de définir les couleurs par défaut pour le texte
ordinaire, les liens, les liens visités et les liens actifs. Vous pouvez aussi choisir une palette de
couleurs prédéfinie pour les couleurs de l’arriè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écifiée.
Pour définir les couleurs de texte par défaut, procédez de l’une des manières suivantes :
• Choisissez Modifier > Propriétés de la page, puis choisissez la couleur pour les options Couleur
du texte, Couleur du lien, Liens visités et Liens actifs.
• Choisissez Commandes > Définir le modèle de couleur, puis choisissez la couleur d’arriè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éfinissez ces paramètres à l’aide de la boîte de dialogue Propriétés de la page,
avec les balises CSS par défaut, la commande Modè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éfinition des propriétés de page, page 266
Sélection d’éléments dans la fenêtre de document
Pour sélectionner un élément dans le mode Création de la fenêtre de document, il suffit
généralement de cliquer dessus. Si un élément est invisible, vous devez le rendre visible pour le
sélectionner. Pour plus d’informations sur les éléments invisibles, voir Affichage et masquage des
éléments invisibles, page 275.
Pour sélectionner des éléments, utilisez ces techniques :
• Pour sélectionner un élément visible dans la fenêtre de document, cliquez dessus ou entourez-le
•
274
du rectangle de sélection.
Pour sélectionner un élément invisible, choisissez Affichage > Assistances visuelles > Eléments
invisibles (si ce n’est pas déjà fait), puis cliquez sur le marqueur de l’élément dans la fenêtre de
document.
Certains objets apparaissent sur la page à un endroit différent de celui dans lequel leur code est
inséré. Par exemple, un calque peut se trouver n’importe où sur la page, mais le code qui le
définit se trouve à un emplacement fixe. Lorsque les éléments invisibles sont affichés,
Dreamweaver affiche des marqueurs dans la fenêtre de document pour indiquer l’emplacement
du code de ces éléments. En sélectionnant le marqueur, vous sélectionnez tout l’élément : si,
par exemple, vous sélectionnez le marqueur d’un calque, tout le calque est sélectionné (voir
Affichage et masquage des éléments invisibles, page 275).
Chapitre 12 : Utilisation des pages
• Pour sélectionner une balise complète (avec son contenu, le cas échéant), cliquez sur son
symbole dans le sélecteur de balise, dans la partie inférieure gauche de la fenêtre de document.
Le sélecteur de balises apparaît en mode Création et en mode Code. Le sélecteur de balises
affiche toujours les balises qui contiennent la sélection ou le point d’insertion en cours. La
balise à l’extrême gauche est la balise ultrapériphérique contenant la sélection ou le point
d’insertion en cours. La balise suivante est contenue dans cette balise ultrapériphérique, et ainsi
de suite. La balise à l’extrême droite est la balise la plus à l’intérieur contenant la sélection ou le
point d’insertion en cours.
Dans l’exemple suivant, le point d’insertion est situé dans une balise de paragraphe, <p>. Pour
sélectionner le tableau contenant le paragraphe que vous souhaitez sélectionner, sélectionnez la
balise <table> à gauche de la balise <p>.
Pour afficher le code HTML associé au texte ou à l’objet sélectionné, procédez de l’une des
manières suivantes :
• Dans la barre d’outils du document, cliquez sur le bouton Afficher le mode Code.
• Choisissez Affichage > Code.
• Dans la barre d’outils du document, cliquez sur le bouton Afficher les modes Code et
Création.
• Choisissez Affichage > Code et création.
• Choisissez Fenêtre> Inspecteur de code.
Pour plus d’informations sur le mode Code, voir Affichage du code, page 416.
Lorsque vous sélectionnez un élément dans l’un des deux éditeurs de code (mode Code ou
inspecteur de code), il est également sélectionné dans la fenêtre de document. Il est parfois
nécessaire de synchroniser les deux affichages pour que la sélection apparaisse. Voir Affichage du
code, page 416.
Affichage et masquage des éléments invisibles
Certains codes HTML ne sont pas visibles dans un navigateur, comme par exemple les balises
Il est cependant utile de pouvoir sélectionner, modifier, déplacer et supprimer ces
éléments invisibles lorsque vous créez une page.
comment.
Dreamweaver vous permet d’afficher des icônes à l’emplacement de ces éléments invisibles dans la
fenêtre de document en mode Création. Pour indiquer les marqueurs d’élément qui doivent
s’afficher lorsque vous choisissez Affichage > Assistances visuelles > Eléments invisibles, définissez
les préférences liées aux éléments invisibles. Par exemple, vous pouvez spécifier que les ancres
nommées soient visibles, mais pas les sauts de ligne.
Vous pouvez créer certains éléments invisibles (tels que les commentaires et les ancres nommées) à
l’aide des boutons dans la catégorie Commun de la barre Insérer (voir Utilisation de la barre
Insérer, page 45). Vous pouvez ensuite modifier ces éléments à l’aide de l’inspecteur de propriétés.
Pour afficher ou masquer les icônes des éléments invisibles :
• Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Remarque : L’affichage des éléments invisibles risque de modifier légèrement la mise en page, en
déplaçant d’autres éléments de quelques pixels. Pour conserver une mise en page précise, vous
devez donc masquer ces éléments invisibles.
Sélection d’éléments dans la fenêtre de document
275
Pour modifier les préférences pour les éléments invisibles :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis
cliquez sur Eléments invisibles.
2 Sélectionnez les éléments dont le marqueur doit être visible.
Une coche à côté du nom de l’élément dans la boîte de dialogue signifie que l’élément est
visible lorsque l’option Affichage > Assistances visuelles > Eléments invisibles est activée.
Pour obtenir des explications sur chacune des préférences Eléments invisibles, voir Définition
des préférences des éléments invisibles dans l’aide de Dreamweaver.
3 Cliquez sur OK.
Utilisation du panneau Historique
Le panneau Historique enregistre toutes les étapes de votre travail dans Dreamweaver. Vous
pouvez utiliser le panneau Historique pour annuler plusieurs étapes simultanément.
Pour annuler la dernière opération effectuée dans un document, choisissez Edition > Annuler,
comme dans la plupart des applications (dans le menu Edition, le nom de la commande Annuler
change en fonction de la dernière opération exécutée).
Le panneau Historique permet également de reproduire des étapes déjà réalisées et d’automatiser
des tâches en créant de nouvelles commandes. Pour plus d’informations, voir Automatisation des
tâches, page 277.
Pour ouvrir le panneau Historique :
• Choisissez Fenêtre > Historique.
Pour annuler la dernière action :
• Déplacez le curseur du panneau Historique d’une étape vers le haut dans la liste. Cette
opération a le même effet que lorsque vous cliquez sur Edition > Annuler.
L’étape annulée apparaît alors en grisé.
Pour annuler plusieurs opérations à la fois, procédez de l’une des manières suivantes :
• Déplacez le curseur jusqu’à une étape de la liste.
• Cliquez à gauche d’une étape le long de la trajectoire du curseur ; le curseur se dirige
automatiquement vers cette étape, annulant toutes celles qui sont sur son passage.
Remarque : Pour provoquer un déplacement automatique vers une étape spécifique, cliquez à
gauche de cette étape ; si vous cliquez sur l’étape elle-même, elle sera sélectionnée. La sélection
d’une étape est une opération différente du retour à cette étape dans l’historique des actions.
Tout comme pour l’annulation d’une seule action, si vous annulez une série d’étapes, puis
effectuez une autre opération dans le document, il ne vous sera plus possible de rétablir les actions
annulées : elles disparaissent du panneau Historique.
Pour définir le nombre maximal d’étapes que le panneau Historique conserve et affiche :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Général dans la liste de gauche.
3 Tapez un chiffre dans la zone Nombre maximal d’étapes de l’historique.
276
Chapitre 12 : Utilisation des pages
La valeur par défaut doit être suffisante pour les besoins de la plupart des utilisateurs. Plus ce
chiffre est élevé, plus le panneau Historique utilisera de mémoire. Cela peut affecter les
performances et ralentir considérablement votre système. Lorsque le panneau Historique
atteint le nombre maximal d’étapes, les premières étapes sont supprimées.
Remarque : Il est impossible de modifier l’ordre dans lequel les étapes sont affiché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éjà effectuées.
Pour effacer la liste des actions du panneau Historique pour le document actif :
• Dans le menu contextuel du panneau Historique, sélectionnez Effacer l’historique.
Cette commande efface également toutes les informations permettant d’annuler les actions
effectuées dans le document actif : après avoir cliqué sur Effacer l’historique, il vous sera
impossible d’annuler les actions dont la trace a été effacée. (Notez bien que la fonction Effacer
l’historique n’annule aucune action passée, mais se limite à supprimer l’enregistrement de ces
étapes dans la mémoire de Dreamweaver.)
Rubriques connexes
• A propos du panneau Historique, page 267
Automatisation des tâches
Lors de la création de documents, vous avez parfois besoin d’effectuer de nombreuses fois la
même opération.
Pour recommencer une ou deux fois une série d’étapes, répétez-les directement depuis le panneau
Historique, qui enregistre chaque é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âche fréquente, vous pouvez créer une nouvelle commande qui effectuera cette
tâche automatiquement.
Notez qu’il est impossible de reproduire ou d’enregistrer (dans le cadre de commandes
enregistrées) certains mouvements de la souris, comme par exemple la sélection d’un élément en
cliquant avec la souris ou en la faisant glisser dans la fenê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 éviter des
mouvements qui ne peuvent pas être reproduits, déplacez le point d’insertion à l’aide des touches
fléchées, et non de la souris, dans la fenêtre de document. Pour effectuer ou étendre une sélection,
maintenez la touche Maj enfoncée tout en appuyant sur les touches fléchées.
Conseil : Si un trait noir indiquant un mouvement de la souris apparaît pendant que vous effectuez
une tâche que vous voulez réitérer ultérieurement, vous pouvez annuler cette dernière action et tenter
une autre approche (utilisez les touches fléchées, par exemple).
Il existe quelques autres actions qui ne peuvent pas être reproduites, par exemple le glisserdéplacer d’un élément de la page. Lorsque vous effectuez ce type d’action, une icône représentant
une commande de menu barrée d’un petit X rouge s’affiche dans le panneau Historique.
Rubriques connexes
• Application d’étapes à un autre objet, page 279
• Application d’étapes à plusieurs objets, page 279
• Copie et collage d’étapes entre les documents, page 280
Automatisation des tâches
277
• Création de nouvelles commandes à partir d’étapes de l’historique, page 281
• Mémorisation de commandes, page 282
Répétition d’étapes
Vous pouvez répéter la dernière étape effectuée ou bien une série d’étapes contiguës ou non à
l’aide du panneau Historique. Pour toutes informations de base sur le panneau Historique, voir A
propos du panneau Historique, page 267.
Pour répéter une étape, procédez de l’une des manières suivantes :
• Choisissez Edition > Répéter.
•
Le nom de cette commande change dans le menu Edition pour refléter la dernière étape
effectuée ; par exemple, si vous venez de saisir du texte, le nom de la commande sera Répéter
frappe.
Dans le panneau Historique, sélectionnez une étape et cliquez sur le bouton Reproduire.
L’étape est reproduite et une nouvelle instance de cette action apparaît dans le panneau
Historique.
Pour répéter une série d’étapes contiguës :
1 Sélectionnez des étapes dans le panneau Historique, en utilisant l’une des méthodes suivantes :
Faites glisser la souris d’une étape à une autre (ne faites pas glisser le curseur ; faites
simplement glisser de l’étiquette de texte d’une étape vers l’étiquette de texte d’une autre).
■ Sélectionnez la première étape, puis maintenez la touche Maj enfoncée tout en cliquant sur
la dernière étape ou sélectionnez la dernière étape, puis maintenez la touche Maj enfoncée
tout en cliquant sur la première.
Seules les actions sélectionnées (en surbrillance), et pas nécessairement celle sur laquelle se
trouve le pointeur, sont répétées.
■
Remarque : Bien que vous puissiez sélectionner une série d’étapes contenant un trait noir
signalant un mouvement de la souris, ce mouvement est ignoré lorsque vous reproduisez les
étapes.
2 Cliquez sur Reproduire.
Les étapes sont reproduites dans l’ordre chronologique et une nouvelle étape, « Reproduire les
étapes », apparaît dans le panneau Historique.
Pour répéter des étapes non contiguës :
1 Sélectionnez une étape, puis cliquez tour à tour sur toutes les autres étapes désirées tout en
maintenant appuyée la touche Contrôle (Windows) ou Commande (Macintosh).
Recliquez sur une étape sélectionnée en maintenant la touche Ctrl ou Commande appuyée
pour la désélectionner.
2 Cliquez sur Reproduire.
Les étapes sélectionnées sont reproduites dans leur ordre chronologique et une nouvelle étape,
libellée « Reproduire les étapes », apparaît dans le panneau Historique.
Rubriques connexes
• Application d’étapes à plusieurs objets, page 279
278
Chapitre 12 : Utilisation des pages
Application d’étapes à un autre objet
Vous pouvez appliquer un ensemble d’étapes affichées dans le panneau Historique à n’importe
quel objet figurant dans la fenêtre de document.
Pour appliquer des étapes du panneau Historique à un nouvel objet :
1 Sélectionnez l’objet.
2 Sélectionnez l’étape à appliquer dans le panneau Historique, puis cliquez sur Reproduire.
Application d’étapes à plusieurs objets
Si vous sélectionnez plusieurs objets dans un document, puis leur appliquez des étapes à partir du
panneau Historique, ces objets sont traités comme une sélection unique et Dreamweaver tente
d’appliquer les étapes à cette sélection combinée.
Vous ne pouvez pas, par exemple, sélectionner cinq images et leur appliquer simultanément le
même redimensionnement : le redimensionnement doit être appliqué individuellement à chaque
image.
Pour appliquer une série d’étapes à chaque objet d’un ensemble d’objets, vous devez faire en sorte
que la dernière étape de la série sélectionne l’objet suivant de l’ensemble. La procédure suivante
illustre ce principe dans un scénario particulier : définition de l’espacement vertical et horizontal
d’une série d’images.
Pour définir l’espacement vertical et horizontal d’une série d’images :
1 Ouvrez un document dans lequel chaque ligne est composée d’une petite image (par exemple
une puce graphique ou une icône) suivie de texte. L’objectif est d’espacer davantage ces images,
à la fois du texte et des autres images situées au-dessus et en dessous.
2 Ouvrez l’inspecteur de propriétés (Fenêtre > Propriétés), si nécessaire.
3 Sélectionnez la première image.
4 Dans l’inspecteur de propriétés, indiquez des valeurs dans les zones de texte Espace V. et
Espace H. pour définir l’espacement de l’image.
5 Cliquez sur l’image de nouveau pour activer la fenêtre de document sans déplacer le point
d’insertion.
6 Appuyez sur la touche fléchée gauche pour amener le point d’insertion à gauche de l’image.
Appuyez ensuite sur la touche fléchée bas pour descendre le point d’insertion d’une ligne, tout
en le laissant juste à gauche de la seconde image de la série. Appuyez ensuite sur la touche fléchée
droite tout en maintenant la touche Maj. enfoncée, pour sélectionner cette seconde image.
Remarque : Ne sélectionnez surtout pas l’image en cliquant dessus, car vous ne pourriez plus
reproduire toutes les étapes.
Automatisation des tâches
279
7 Dans le panneau Historique, sélectionnez les étapes correspondant à la modification de
l’espacement de l’image et à la sélection de l’image suivante. Cliquez sur le bouton Reproduire
pour reproduire ces actions.
L’espacement de l’image courante est modifié, et l’image suivante est sélectionnée.
8 Continuez à cliquer sur le bouton Reproduire jusqu’à ce que toutes les images soient
correctement espacées.
Pour appliquer des étapes à un objet dans un autre document, cliquez sur le bouton Copier les
étapes
Copie et collage d’étapes entre les documents
Chaque document ouvert possède son propre historique. Vous pouvez copier des étapes d’un
document et les coller dans un autre document.
La fermeture d’un document supprime son historique. Si vous prévoyez de réutiliser des étapes
d’un document après l’avoir fermé, copiez ces étapes à l’aide du bouton Copier les étapes (ou
enregistrez-les comme nouvelle commande, voir Création de nouvelles commandes à partir d’étapes
de l’historique, page 281) avant de fermer le document.
Pour réutiliser des étapes d’un document à un autre :
1 Activez le document contenant les étapes que vous désirez réutiliser.
2 Sélectionnez les étapes désirées dans le panneau Historique.
3 Dans le panneau Historique, cliquez sur le bouton Copier les étapes.
Remarque : Le bouton Copier les étapes (dans le panneau Historique) est différent de la
commande Copier (dans le menu Edition). Vous ne pouvez pas utiliser la commande Edition >
Copier pour copier des étapes, mais vous pouvez utiliser la commande Edition > Coller pour les
coller.
Soyez prudent lorsque vous copiez des étapes qui comportent une commande Copier ou
Coller :
■ N’utilisez pas Copier les étapes si l’une des étapes contient une commande Copier, car le
collage de ces étapes risque de ne pas s’effectuer comme souhaité.
■ Si vos étapes contiennent une commande Coller, vous ne pouvez pas les coller, à moins
qu’elles ne comprennent également une commande Copier avant la commande Coller.
4 Ouvrez l’autre document.
5 Placez le curseur au point désiré, ou sélectionnez l’objet auquel vous voulez appliquer les étapes.
280
Chapitre 12 : Utilisation des pages
6 Choisissez Edition > Coller pour coller les étapes.
Les étapes sont reproduites dès qu’elles sont collées dans le panneau Historique du document.
Le panneau Historique les affiche comme une seule étape, appelée « Coller les étapes ».
Si vous collez des étapes dans un éditeur de texte, en mode Code ou dans l’inspecteur de code,
elles s’affichent sous forme de code JavaScript. Ce point peut vous être très utile pour
apprendre à écrire vos propres scripts. Pour plus d’informations sur l’utilisation du JavaScript
dans Dreamweaver, voir Rédaction et modification de code, page 437.
Création de nouvelles commandes à partir d’étapes de l’historique
Vous pouvez enregistrer un ensemble d’étapes affichées dans la palette Historique, sous la forme
d’une commande à laquelle vous donnerez un nom et qui deviendra alors disponible dans le menu
Commandes.
Si vous voulez réutiliser un ensemble d’étapes par la suite, créez et enregistrez une nouvelle
commande, en particulier si vous voulez effectuez ces étapes la prochaine fois que vous lancerez
Dreamweaver. Les commandes enregistrées sont en effet conservées jusqu’à ce que vous les
effaciez, tandis que les commandes mémorisées sont perdues lorsque vous quittez Dreamweaver.
De plus, les séquences d’étapes copiées sont supprimées dès la copie suivante.
Vous pouvez modifier les noms des commandes que vous avez inséré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égrées dans le menu Commandes (c’est-à-dire celles
que vous n’avez pas ajoutées vous-même).
Pour créer une commande :
1 Sélectionnez la ou les étapes désiré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ît dans le menu Commandes.
Remarque : La commande est enregistrée sous la forme d’un fichier JavaScript (ou parfois
HTML) dans votre dossier Dreamweaver/Configuration/Commandes. Si vous utilisez
Dreamweaver sur un système d’exploitation à plusieurs utilisateurs, le fichier est enregistré dans le
dossier Commandes de l’utilisateur spécifique.
Pour utiliser une commande que vous avez enregistrée :
1 Sélectionnez l’objet auquel vous désirez appliquer la commande ou placez le curseur à
l’emplacement désiré.
2 Sélectionnez la commande de votre choix dans le menu Commandes.
Pour modifier le nom d’une commande tel qu’il apparaît dans le menu Commandes :
1 Choisissez Commandes > Modifier la liste des commandes.
2 Sélectionnez la commande à renommer et indiquez son nouveau nom.
3 Cliquez sur Fermer.
Pour supprimer un nom du menu Commandes :
1 Choisissez Commandes > Modifier la liste des commandes.
2 Sélectionnez une commande.
Automatisation des tâches
281
3 Cliquez sur Supprimer, puis sur Fermer.
Mémorisation de commandes
Vous pouvez mémoriser de façon temporaire une commande utilisée à court terme. Dreamweaver
ne retient qu’une commande mémorisée à la fois ; dès que vous commencez à mémoriser une
nouvelle commande, la précédente est oubliée.
Pour enregistrer une nouvelle commande sans perdre la commande actuellement mémorisée,
enregistrez-la à partir du panneau Historique. Pour plus d’informations, voir Pour un comparatif
détaillé entre l’utilisation de commandes mémorisées et la reproduction d’étapes à partir du
panneau Historique, voir Utilisation du panneau Historique, page 276.
Pour mémoriser provisoirement une série d’étapes fréquemment utilisées :
1 Choisissez Commandes > Dé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émorisez une commande.
2 Lorsque l’opération est terminée, choisissez Commandes > Arrêter l’enregistrement ou appuyez
à nouveau sur la combinaison de touches Ctrl+Maj+X (Windows) ou Commande+Maj+X
(Macintosh).
Pour reproduire une commande mémorisée :
• Choisissez Commandes > Reproduire la commande enregistrée ou appuyez sur la combinaison
de touches Ctrl+Maj+R (Windows) ou Commande+Maj+R (Macintosh).
Pour enregistrer une commande mémorisée :
1 Choisissez Commandes > Reproduire la commande enregistrée pour exécuter la commande.
Une étape nommée Exécuter commande apparaît dans la liste des étapes du panneau
Historique.
2 Dans la palette Historique, sélectionnez l’étape Exécuter commande et cliquez sur le bouton
Enregistrer comme commande.
3 Indiquez le nom de la commande et cliquez sur OK.
La commande apparaît dans le menu Commandes.
Utilisation de comportements JavaScript pour détecter le type et
la version des navigateurs et des plug-ins
Vous pouvez utiliser des comportements pour déterminer le type de navigateur utilisé 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érifier le navigateur permet d’envoyer les visiteurs sur des pages différentes selon le type et la
version de leur navigateur (voir Vérifier le navigateur, page 390). Par exemple, vous pouvez
envoyer les utilisateurs de Netscape Navigator 4.0 ou version ultérieure sur une page, les
utilisateurs de Microsoft Internet Explorer 4.0 ou version ulté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érifier le plug-in permet d’envoyer les visiteurs sur des pages différentes selon qu’ils disposent ou
non du plug-in indiqué (voir Vé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érente.
Aperçu et test de page dans les navigateurs
Vous pouvez prévisualiser des documents à tout moment dans vos navigateurs cibles ; il n’est pas
nécessaire d’enregistrer au préalable le document.
Vous pouvez définir jusqu’à 20 navigateurs pour avoir un aperçu des pages de votre site. Il est
conseillé de demander un aperç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çu et tester votre document dans un navigateur :
1 Procédez de l’une des manières suivantes pour afficher un aperçu de la page :
■
Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans la liste.
Remarque : Si vous n’avez pas encore sélectionné de navigateur, choisissez Edition >
Préférences ou Dreamweaver > Préférences (Macintosh), puis sélectionnez la catégorie Aperçu
située dans la partie gauche du navigateur pour sélectionner un navigateur
Appuyez sur la touche F12 pour afficher la page en cours dans votre navigateur par défaut.
■ Appuyez sur la combinaison de touches Contrô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ées au navigateur sont opérationnelles, y compris les comportements
JavaScript, les liens absolus et relatifs au document, les contrôles ActiveX et les plug-ins
Netscape Navigator, à condition que vous ayez installé les plug-ins ou contrôles ActiveX requis.
■
Remarque : Le contenu lié à un chemin relatif à la racine n’apparaît pas lorsque vous lancez
l’aperçu de documents dans un navigateur local, sauf si vous activez l’option Aperçu à l’aide d’un
fichier temporaire dans Préférences (voir Aperçu et test de page dans les navigateurs, page 283).
En effet, à la différence des serveurs, les navigateurs ne reconnaissent pas les racines de sites.
Conseil : Pour lancer l’aperçu d’un contenu lié à des chemins relatifs à la racine, placez le fichier
sur un serveur distant, puis choisissez Fichier > Aperçu dans le navigateur pour l’afficher (voir
Chemins relatifs à la racine du site, page 332).
3 Fermez la page dans le navigateur après avoir effectué le test.
Pour définir ou modifier vos préférences pour le navigateur principal et le navigateur
secondaire :
1 Procédez de l’une des manières suivantes pour ouvrir les options Aperçu dans le navigateur :
■
■
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Macintosh), puis
sélectionnez la catégorie Aperçu dans le navigateur dans la liste de gauche.
Choisissez Fichier > Aperçu dans le navigateur > Modifier la liste des navigateurs.
Aperçu et test de page dans les navigateurs
283
La boîte de dialogue Préférences contenant les options Aperçu dans le navigateur apparaît.
2 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK.
Vérification des préférences de durée et de la taille de
téléchargement
Dreamweaver calcule la taille sur la base du contenu de toute la page, y compris tous les objets
liés, tels que les images et les plug-ins. Dreamweaver estime la durée de téléchargement en
fonction de la vitesse de connexion entrée dans les préférences de la Barre d’état. Le temps de
téléchargement réel dépend de l’état du trafic sur Internet.
Conseil : Pour vérifier les durées de téléchargement pour une page Web particulière, il est
intéressant d’utiliser la « règle des huit secondes » ; c’est-à-dire que la plupart des utilisateurs
n’attendront pas plus de huit secondes pour le téléchargement d’une page.
Pour définir des préférences en matière de taille et de temps de téléchargement :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Barre d’état dans la liste de gauche.
284
Chapitre 12 : Utilisation des pages
Les options de la préférence Barre d’état apparaissent.
3 Choisissez la vitesse de connexion à partir de laquelle le temps de téléchargement sera calculé.
En Europe et aux USA, la vitesse de connexion la plus répandue est 28,8 Kb/s. Si vous
concevez ce site pour un intranet, vous pouvez sélectionner 1500 (vitesse T1).
Pour plus d’informations sur les préférences de barre d’état, voir Définition des préférences de la
barre d’état, page 43.
4 Cliquez sur OK.
Vérification des préférences de durée et de la taille de télé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çons. Vous pouvez insérer du texte, définir un type, une taille ou une
couleur de police, des attributs d’alignement ou encore créer et appliquer vos propres styles à
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 à jour de feuilles de style CSS dans un site Contribute, page 314
Vé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 à
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é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ées tabulaires, page 295
287
• Copie et collage de texte à partir de documents MS Office, page 295
A propos du formatage de texte
Les méthodes de mise en forme du texte dans Dreamweaver s’apparentent à celles d’un logiciel de
traitement de texte standard. Vous pouvez définir le style de mise en forme par défaut
(Paragraphe, En-tête 1, En-tête 2, etc.) pour un bloc de texte, modifier la police, la taille la
couleur et l’alignement du texte sélectionné ou appliquer des styles de texte tels que gras, italique,
code (monospace) et souligné.
Par défaut, Dreamweaver met le texte en forme à l’aide des feuilles de style en cascade (CSS). Les
styles CSS offrent aux concepteurs et développeurs Web un meilleur contrôle de l’aspect de la
page Web tout en proposant des fonctions qui permettent d’améliorer l’accessibilité et de réduire
la taille des fichiers. Les règles CSS sont intégrées au document en cours au fur et à mesure que
vous y alignez le texte et insérez des styles à l’aide des commandes de mise en forme de
Dreamweaver. Vous pouvez ainsi plus facilement réutiliser les styles que vous créez et nommer
ceux que vous utilisez. Le CSS est aujourd’hui une des méthodes les plus répandues pour mettre
en forme textes et pages Web.
Si vous le préférez, vous pouvez mettre en forme et aligner le texte de vos pages Web à l’aide de
balises de marquage HTML. Si vous souhaitez utiliser des balises HTML au lieu des styles CSS,
vous devez modifier les préférences de mise en forme du texte par défaut de Dreamweaver. Pour
plus d’informations, voir Spé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éparant les éléments de conception visuelle (polices, couleurs, marges, etc.) des éléments
logiques internes à la structure d’une page Web, les feuilles de style CSS offrent aux concepteurs
un contrôle à la fois visuel et typographique sans nuire à l’intégrité du contenu. De plus, définir
une conception typographique et une mise en page depuis un bloc unique de code (sans avoir
recours aux cartes graphiques, aux balises <font>, aux tableaux et aux GIF d’espacement) permet
un chargement plus rapide, simplifie la maintenance du site et fournit un point central à partir
duquel il est possible de contrôler les attributs de conception sur plusieurs pages Web.
En revanche, les styles CSS définissent une mise en forme pour tout le texte appartenant à une
classe particulière ou redéfinissent le format d’une balise HTML spécifique (par exemple h1, h2, p
ou li).
Vous pouvez dé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 à plusieurs
pages Web, toutes les pages s’adapteront automatiquement si vous effectuez une modification
dans cette feuille de style. Pour accéder aux styles CSS, utilisez le panneau Styles CSS ou le menu
contextuel Style de l’inspecteur de propriétés de texte. Pour plus d’informations sur l’utilisation de
l’inspecteur de propriétés de texte pour appliquer des styles HTML ou CSS, voir Définition des
options relatives aux propriété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ême
page. Le formatage est appliqué de façon hiérarchique. Le formatage HTML 3.2 supplante celui
appliqué par des feuilles de style CSS externes. Les styles CSS intégré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ègles de mise en forme qui déterminent
l’aspect du contenu d’une page Web. Les styles CSS vous permettent de gérer en souplesse l’aspect
d’une page, tant en termes de précision de l’emplacement de la présentation qu’en termes de choix
de polices et de styles de caractères spécifiques.
Par ailleurs, les styles CSS permettent de contrôler plusieurs propriétés qui ne peuvent pas être
gérées via le langage HTML seul. Par exemple, vous pouvez attribuer des puces de liste
personnalisées et spécifier différentes tailles et unités de police (pixels, points, etc.). En utilisant
des styles CSS et en définissant des tailles de police en pixels, vous garantissez un traitement plus
homogène de la présentation et de l’aspect de votre page dans différents navigateurs. Outre la mise
en forme du texte, vous êtes à même de gérer le format et le positionnement des éléments blocs
d’une page Web. Vous pouvez ainsi définir des marges et des bordures, habiller du texte avec du
texte, etc.
Une règle de style CSS se compose de deux entités : le sélecteur et la déclaration. Le sélecteur
correspond au nom du style (par exemple, TR ou P), tandis que la déclaration définit les éléments
de ce style. La déclaration est composée de deux entités : la propriété (par exemple, font-family)
et la valeur (par exemple, Helvetica). Le terme « en cascade » signifie qu’il est possible
d’appliquer plusieurs feuilles de style à une même page Web. Vous pouvez, par exemple, créer une
feuille de style pour définir la couleur et une autre pour définir les marges, puis les appliquer
toutes les deux à la même page afin d’obtenir la conception recherchée.
Les styles CSS présentent l’avantage majeur d’être facilement mis à jour ; lorsque vous modifiez
un style CSS, la mise en forme de tous les documents dotés de ce style reflète automatiquement le
nouveau style.
Vous pouvez définir les types de styles CSS suivants dans Dreamweaver :
• Les styles CSS personnalisés, également appelés styles de classe, dé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és aux balises HTML redéfinissent le formatage de ces balises, par
•
exemple h1. Lorsque vous créez ou modifiez un style CSS pour la balise h1, tout le texte
formaté à l’aide de cette balise h1 est immédiatement modifié en conséquence.
Les styles des sélecteurs CSS redéfinissent le formatage d’une combinaison particulière de
balises (par exemple, td h2 s’applique lorsque la balise d’en-tête h2 apparaît dans une cellule de
tableau) ou à toutes les balises contenant un attribut id spécifique (par exemple #monStyle
s’applique à toutes les balises qui contiennent la paire attribut/valeur id="monStyle").
Les balises CSS peuvent résider aux emplacements suivants :
Les feuilles de style CSS externes regroupent des styles CSS enregistrés dans un fichier .css
externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d’un
site Web à l’aide d’un lien situé dans la section head d’un document.
Les feuilles de style CSS internes (ou incorporées) regroupent des styles CSS inclus dans une
balise style dans la section head d’un document HTML.
Les styles en ligne
sont définis avec des instances spécifiques de balises dans un document
HTML.
A propos du formatage de texte dans Dreamweaver
289
Les styles CSS peuvent définir les attributs de mise en forme pour les balises HTML, plages de
texte identifiées par un attribut class. Dreamweaver MX reconnaît les styles dé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éférence CSS d’O’Reilly inclus dans Dreamweaver, choisissez
Aide > Référence et sélectionnez O’Reilly - Référence CSS dans le menu déroulant du panneau
Référence.
La mise en forme manuelle du code HTML a toujours la priorité sur la mise en forme appliquée à
l’aide de styles CSS. Pour permettre aux styles CSS de contrô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és dans la fenêtre de document. Vous
pouvez également afficher un aperçu du style appliqué au document dans une fenêtre de
navigateur. Certains attributs de style CSS s’affichent diffé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ême texte, il peut y avoir entre ces styles un
conflit qui produira des résultats inattendus. Les navigateurs appliquent les attributs de style selon
les règles suivantes :
• Si deux styles sont appliqués au même texte, le navigateur affiche tous les attributs des deux
•
•
styles, sauf en cas de conflit entre deux attributs spécifiques. Par exemple, un style peut spécifier
le bleu comme couleur du texte, alors que l’autre style indiquera le rouge.
Si des attributs de deux styles appliqués au même texte sont en conflit, le navigateur choisira
l’attribut du style en aval, c’est-à-dire celui qui est le plus près du texte lui-même. Ainsi, si un
élément de texte est régi par une feuille de style externe et par un style CSS incorporé, c’est ce
dernier qui est appliqué.
En cas de conflit direct entre deux styles, les attributs des styles CSS (qui sont appliqués à l’aide
de l’attribut class) sont prépondérants sur les attributs des styles de balises HTML.
Dans l’exemple qui suit, le style défini pour h1 peut spécifier la police, la taille et la couleur de
tous les paragraphes h1, mais le style CSS personnalisé .Bleu appliqué à ce paragraphe est
prépondérant sur la valeur de couleur déclarée dans le style h1. Le second style CSS personnalisé
.Rouge l’emporte à son tour sur le style .Bleu, car il se trouve à l’intérieur du style .Bleu.
<H1><SPAN CLASS="Bleu">Ce paragraphe est contrôlé par le style personnalisé
.Bleu et par le style de balise HTML H1.
<SPAN CLASS="Rouge">... sauf cette phrase, qui est contrôlée par le style
.Rouge.</span>
Nous revenons maintenant au style .Bleu.</SPAN></H1>
Propriétés de la forme courte des styles CSS
La spécification CSS permet la création de styles à l’aide d’une syntaxe abrégée ou forme courte.
Elle permet de spécifier la valeur de plusieurs propriétés à l’aide d’une seule balise de propriété.
Par exemple, la propriété font permet de définir les propriété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étés dont la valeur est omise reçoivent
leur valeur par défaut. Certaines pages risquent donc d’être incorrectement affichées lorsque
plusieurs styles CSS sont attribués à la même balise.
Par exemple, la balise H1 ci-dessous utilise la syntaxe longue. Remarquez que les propriétés fontvariant, font-stretch, font-size-adjust et font-style ont reçu leur valeur par dé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érée en tant que propriété unique sous forme courte, la même balise se présente ainsi :
H1 { font: bold 16pt/18pt Arial }
Sous forme courte, les propriétés dont la valeur est omise reçoivent automatiquement leur valeur
par dé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éfinis en plusieurs emplacements (par exemple, incorporés dans une page
HTML et importés d’une feuille de style externe) sous deux formes, longue et courte, n’oubliez
pas que les propriétés omises risquent d’écraser les propriétés explicitement définies dans un autre
style. (On parle de cascade de styles.)
Dreamweaver utilise donc la forme longue par défaut, afin d’éviter les problèmes qui risquent de
survenir lorsqu’un style CSS rédigé sous forme courte en écrase un autre sous forme longue. Si
vous ouvrez une page Web codée sous forme courte dans Dreamweaver, n’oubliez pas que
Dreamweaver crée tous les nouveaux styles CSS sous forme longue. Pour spécifier la façon dont
Dreamweaver crée et modifie les styles CSS, vous pouvez modifier les préférences de modification
CSS dans la catégorie Styles CSS de la boîte de dialogue Préférences (Edition > Préférences dans
Windows ; Dreamweaver > Préférences dans Macintosh).
Remarque : Les onglets CSS pertinents et Propriétés CSS créent uniquement des styles CSS sous
forme longue. Si vous créez une page ou une feuille de style CSS à l’aide des onglets CSS pertinents
ou Propriétés CSS, n’oubliez pas que le codage manuel de styles CSS sous forme courte risque de
provoquer l’écrasement des propriétés créées sous forme longue par celles qui ont été créées sous
forme courte. Il est donc préférable de cré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étés CSS, page 293
A propos du formatage de texte dans Dreamweaver
291
Inspecteur de propriétés et formatage de texte
L’inspecteur de propriétés vous permet de mettre en forme et d’appliquer un style au texte
sélectionné. Lorsque vous effectuez ces opérations, Dreamweaver conserve en mémoire les
propriétés de formatage appliquées à chaque élément de texte et attribue à chacun une étiquette
en les nommant de la manière suivante : Style1, Style2, Style3, Stylen. Si vous appliquez les
mêmes attributs de formatage à plusieurs éléments de texte, Dreamweaver leur donne le même
titre d’étiquette, éliminant ainsi toute redondance dans les noms de style. L’étiquette appliquée
par Dreamweaver à un corps de texte donné peut alors être appliquée à l’aide du menu déroulant
Style. Vous pouvez ainsi constituer une bibliothèque de styles à l’intérieur d’une page et appliquer
ces styles en sélectionnant simplement l’élément de texte sur la page et un style dans le menu
déroulant Style. Vous pouvez renommer les styles afin d’en faciliter l’identification, par exemple
En-tête1, En-tête2, Corps et Tableau.
Le menu contextuel Style affiche les deux noms du style de votre page et propose un aperçu des
propriétés du style. Les propriétés indiquées dans l’aperçu sont la famille, la taille et l’épaisseur de
la police, ainsi que la couleur du texte et de l’arrière-plan.
Rubriques connexes
•
•
•
•
292
Mise en forme des paragraphes, page 297
Dé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ègles CSS appliquées à l’élément de texte
sélectionné et de modifier les propriétés de la règle. Situé dans l’inspecteur de balises (Fenêtre >
Inspecteur de balises), l’onglet CSS pertinents est constitué de deux sections. La partie supérieure
indique les règles qui s’appliquent à la sélection en cours ainsi que les balises affectées. La partie
inférieure affiche les propriétés de l’élément sélectionné dans une grille modifiable. Les propriétés
sont classées par ordre alphabétique, les propriétés utilisées étant placées en haut de l’onglet. Les
propriétés utilisées dans la sélection s’affichent en bleu, les autres s’affichent en rouge et sont
barrées. Si vous placez le curseur de la souris sur une règle étrangère à la sélection, un message
d’explication s’affiche. Dans la plupart des cas, il s’agit de propriétés écrasées par d’autres ou de
propriétés qui ne sont pas héritées.
Vous pouvez également modifier les propriétés d’une sélection à l’aide de la partie inférieure du
panneau de l’onglet CSS pertinents. La grille modifiable vous permet de modifier les valeurs des
propriétés affichées. Toute modification apportée à une sélection s’applique immédiatement, ce
qui vous permet d’avoir un aperçu direct de votre travail.
Rubriques connexes
•
•
•
•
Utilisation du panneau Styles CSS, page 305
Utilisation de l’onglet CSS pertinents, page 306
Création d’un style CSS, page 308
Modification d’attributs dans l’inspecteur de balises, page 456
L’onglet Propriétés CSS
L’onglet Propriétés CSS affiche les propriétés de la règle sélectionnée dans le panneau Styles CSS
(Fenêtre > Styles CSS), en mode Code (Affichage > Code) ou en double-cliquant sur une règle ou
une propriété dans l’onglet CSS pertinents (Fenêtre > Inspecteur de balises).
Remarque : L’onglet Propriétés CSS s’affiche uniquement lorsque vous sélectionnez une règle dans
le panneau Styles CSS ou en mode Code ou bien lorsque vous double-cliquez sur une règle ou une
propriété dans l’onglet CSS pertinents. Pour revenir à l’onglet CSS pertinents, sélectionnez un
élément de texte sur une page HTML active.
A propos du formatage de texte dans Dreamweaver
293
L’onglet Propriétés CSS permet d’afficher facilement les paramètres de propriété d’une règle et de
modifier rapidement un style CSS incorporé dans le document en cours ou lié par l’intermédiaire
d’une feuille de style jointe. La grille modifiable vous permet de modifier les valeurs des propriétés
affichées. Toute modification apportée à une sélection s’applique immédiatement, ce qui vous
permet d’avoir un aperçu direct de votre travail.
Vous pouvez choisir d’afficher les propriétés par ordre alphabétique ou par catégories en cliquant
sur les boutons Afficher la vue par catégorie ou Afficher la vue sous forme de liste, situés dans le
coin supérieur gauche de l’onglet Propriétés CSS.
répartit les propriétés CSS prises en charge par Dreamweaver en huit
catégories distinctes : police, arrière-plan, bloc, bordure, boîte, liste, positionnement et
extensions. Les propriétés de chaque catégorie sont conservées dans une liste que vous pouvez
développer ou réduire en cliquant sur le bouton plus (+) en regard de la catégorie de votre choix.
Les propriétés de chaque catégorie sont triées par ordre alphabétique. Les propriétés utilisées sont
placées en tête de liste et sont affichées en bleu. La vue par catégories constitue la vue par défaut.
La vue par catégories
La vue sous forme de liste affiche toutes les propriétés CSS prises en charge par Dreamweaver
par ordre alphabétique. Les propriétés utilisées sont placées en tête de liste et sont affiché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étés CSS, page 307
Modification d’attributs dans l’inspecteur de balises, page 456
Insertion de texte
Dreamweaver vous permet d’insérer facilement du texte dans un document. Vous pouvez le taper
directement, effectuer un copier/coller ou réaliser une importation. Vous pouvez également
insérer des espaces supplémentaires entre les caractè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être du document ou effectuer un copier/coller. Il est également possible d’importer du texte
depuis d’autres documents (voir Importation de documents contenant des données tabulaires,
page 295).
Pour ajouter du texte dans un document, procédez de l’une des manières suivantes :
• Tapez le texte directement dans la fenêtre de document.
• Copiez du texte à partir d’une autre application, passez dans Dreamweaver, placez le point
d’insertion dans la fenêtre de document en mode Création, puis choisissez Edition > Coller.
Dreamweaver ne conserve pas la mise en forme du texte de l’autre application, mais les sauts de
ligne sont préservés.
Importation de documents contenant des données tabulaires
Vous pouvez importer des données tabulaires dans un document en enregistrant d’abord ces
fichiers (tels que des fichiers Microsoft Excel ou d’une base de données) sous forme de fichiers
texte délimités.
Pour plus d’informations sur l’importation et le formatage de données de tableau, voir
Importation et exportation de données tabulaires, page 176. Pour plus d’informations sur
l’importation de texte à partir de documents HTML Microsoft Word, voir Ouverture de
documents existants, page 79.
Vous pouvez é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 à partir de documents MS Office, page 295).
Pour importer des données tabulaires :
1 Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > Objets du
2
3
4
5
tableau > Importer les données tabulaires.
La boîte de dialogue Importer le tableau s’affiche.
Recherchez le fichier souhaité ou entrez son nom dans la zone de texte.
Sélectionnez le délimiteur utilisé lors de l’enregistrement du fichier en tant que texte délimité.
Les options sont Tab, Virgule, Point-virgule, Deux points et Autre.
Si vous sélectionnez Autre, un champ vierge s’affiche à côté de l’option. Entrez le caractère
utilisé comme délimiteur.
Utilisez les options restantes pour formater ou définir le tableau dans lequel importer les
données.
Une fois terminé, cliquez sur OK.
Copie et collage de texte à 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ès conversion au format HTML par Dreamweaver, doit être
inférieure à 300 Ko.
Insertion de texte
295
Lorsque vous ajoutez du contenu à 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é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é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 à une page Web nouvelle ou
existante :
1 Ouvrez la page Web dans laquelle copier le contenu du document Word ou Excel.
2 Procédez de l’une des manières suivantes pour sélectionner le fichier :
Déplacez le fichier de son emplacement actuel vers la page où le contenu doit s’afficher. Si la
boîte de dialogue Insé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 > Importer > Document Word ou Fichier > Importer > Document Excel.
Dans la boîte de dialogue Ouvrir, recherchez le fichier à 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érer un lien vers un document Microsoft Word ou Excel dans une page existante.
Pour créer un lien vers un document Word ou Excel :
1 Ouvrez la page où le lien doit être affiché.
2 Faites glisser le fichier de son emplacement actuel vers la page Dreamweaver sur laquelle vous
voulez que le lien apparaisse.
La boîte de dialogue Insérer un document Microsoft Word ou Excel s’affiche.
3 Sélectionnez Créer un lien, puis cliquez sur OK.
4 Si le document vers lequel vous créez un lien réside hors du dossier racine de votre site,
Dreamweaver vous invite à le copier dans ce dossier.
En copiant le document dans le dossier racine du site, vous êtes assuré 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ès
cré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 éléments de mise en forme de page et d’objet
standard. Cette section indique comment formater des paragraphes et comment insérer des barres
horizontales ainsi que la date.
Rubriques connexes
• Définition des propriété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éroulant Format de l’inspecteur de propriétés ou le sous-menu Texte > Format
de paragraphe pour appliquer des balises standard de paragraphe et d’en-tête.
Pour appliquer une balise de paragraphe ou d’en-tête :
1 Placez le point d’insertion dans le paragraphe, ou sélectionnez une partie du texte du
paragraphe.
2 Sélectionnez Texte > Format de paragraphe ou le menu déroulant Format de l’inspecteur de
propriétés, puis sélectionnez une option :
■ Choisissez un format de paragraphe (par exemple, En-tête 1, En-tête 2, Texte pré-formaté,
etc.). La balise HTML associée au style choisi (par exemple, h1 pour En-tête 1, h2 pour Entête 2, pre pour Texte pré-formaté, etc.) est appliquée à tout le paragraphe.
■ Choisissez Aucun pour supprimer un format de paragraphe.
Lorsque vous appliquez une balise d’en-tête à un paragraphe, Dreamweaver insère
automatiquement la ligne de texte suivante comme un paragraphe. Pour modifier ce paramètre,
choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis
assurez-vous que l’option Passer en paragraphe normal après le titre est désactivée dans les
Options d’édition de la catégorie Général.
texte
Vous pouvez aligner le texte sur la page en utilisant l’inspecteur de propriétés ou à partir du sousmenu Texte > Aligner. Vous pouvez centrer un élément sur la page à l’aide de la commande
Texte > Aligner > Centre.
Pour aligner du texte :
1 Sélectionnez le texte à aligner ou insérez le pointeur au début du texte.
2 Cliquez sur l’une des options d’alignement (Gauche, Droite ou Centre) dans l’inspecteur de
propriétés ou choisissez Texte > Aligner, puis une commande d’alignement.
Pour centrer des éléments :
1 Sélectionnez l’élément (image, plug-in, tableau ou tout autre élément de la page) que vous
désirez aligner au centre.
2 Choisissez Texte > Aligner > 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ête ou d’un paragraphe.
Mise en retrait du texte
La commande Retrait applique la balise HTML blockquote à un paragraphe de texte, ce qui a
pour effet de renfoncer le texte de chaque côté de la page.
Pour insérer un retrait ou le supprimer :
1 Placez le point d’insertion à l’emplacement où insérer le retrait.
Mise en forme de paragraphes et structure du document
297
2 Dans l’inspecteur de propriétés, cliquez sur le bouton Retrait ou Retrait négatif, choisissez
Texte > Retrait ou Retrait négatif ou choisissez Liste > Retrait ou Retrait négatif dans le menu
contextuel.
Remarque : Un paragraphe accepte plusieurs indentations. Chaque application de cette commande
produit un retrait supplémentaire du texte de chaque côté du document.
Ajout d’espacements de paragraphe
Dreamweaver fonctionne comme une application classique de traitement de texte : Appuyez sur
la touche Entrée (Windows) ou Retour (Macintosh) pour commencer un nouveau paragraphe.
Les navigateurs Web insèrent automatiquement une ligne vierge entre les paragraphes. Vous
pouvez vous-même espacer les paragraphes d’une ligne vierge en insérant un saut de ligne.
Pour insérer un saut de paragraphe :
• Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Pour insérer un saut de ligne, procédez de l’une des manières suivantes :
• Appuyez sur les touches Maj+Entrée (Windows) ou Maj+Retour (Macintosh).
• Dans la catégorie Texte de la barre Insérer, choisissez Caractères et cliquez sur l’icône Saut de
•
ligne.
Choisissez Insertion > HTML > Caractères spéciaux > 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 être visuellement séparés par une ou plusieurs barres.
Pour créer une barre horizontale :
1 Dans la fenêtre de document, placez le curseur là où vous voulez insérer une barre horizontale.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Insertion > HTML > Barre horizontale.
Dans la catégorie HTML de la barre Insérer, cliquez sur le bouton Barre horizontale.
Pour modifier une barre horizontale :
1 Dans la fenêtre de document, sélectionnez la barre horizontale.
2 Choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur de propriétés et modifier les propriétés
selon vos besoins :
L et H : spécifient la largeur et la hauteur de la barre, en pixels ou en pourcentage de la taille de
la page.
Aligner : spécifie l’alignement de la barre (Par défaut, Gauche, Centre ou Droite). Ce
paramétrage ne s’applique que si la largeur de la barre est inférieure à celle de la fenêtre du
navigateur.
Ombrage : spécifie si la barre est accompagnée d’un effet d’ombre portée. Désactivez cette
option pour dessiner la barre en couleur pleine.
298
Chapitre 13 : Insertion et mise en forme de texte
Création de liste à puces ou numérotées
Vous pouvez créer des listes numérotées (triées), des listes à puces (non triées) et des listes de
définitions à partir d’un texte existant ou d’un nouveau texte que vous tapez dans la fenêtre de
document.
Les listes de définitions n’utilisent pas de caractères d’en-tête tels que des puces ou des nombres et
sont souvent utilisées dans les glossaires ou les descriptions. Les listes peuvent également être
imbriquées, c’est-à-dire qu’elles contiennent d’autres listes. Par exemple, vous pouvez imbriquer
une liste numérotée ou à puces au sein d’une autre liste de même type.
Pour plus d’informations sur la définition d’un type de liste spécifique et d’autres options de liste
pour une liste complète ou un élément de liste donné (par exemple, la numérotation ou l’emploi
des chiffres romains dans une liste numérotée ou la définition de puces carrées), voir Définition
des options relatives aux propriétés des listes dans l’aide de Dreamweaver.
Pour créer une liste :
1 Dans le document Dreamweaver, placez le point d’insertion à l’emplacement où insérer la liste,
puis procédez de l’une des manières suivantes :
■ Cliquez sur le bouton Liste simple ou Liste numérotée dans l’inspecteur de propriétés.
■ Choisissez Texte > Liste, puis sélectionnez le type de liste qui vous convient : Liste simple (à
puces), Liste numérotée ou Liste de définitions.
Le caractère de tête de l’élément de liste spécifié apparaît dans la fenêtre de document.
2 Tapez le texte de l’élément de la liste, puis appuyez sur la touche Entrée (Windows) ou Retour
(Macintosh) pour créer un autre élément de liste.
3 Pour marquer la fin de la liste, appuyez à deux reprises sur la touche Entrée (Windows) ou
Retour (Macintosh).
Pour créer une liste à partir d’un texte existant :
1 Sélectionnez une suite de paragraphes pour les transformer en liste.
2 Cliquez sur le bouton Liste simple ou Liste numérotée dans l’inspecteur de propriétés ou
choisissez Texte > Liste, puis sélectionnez le type de liste désiré : Liste simple, Liste numérotée
ou Liste de définitions.
Pour créer une liste imbriquée :
1 Sélectionnez les éléments de liste à imbriquer.
2 Cliquez sur le bouton Retrait de l’inspecteur de propriétés ou choisissez Texte > Retrait.
Dreamweaver met le texte en retrait et cré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ême procédure
que celle utilisé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 à une seule lettre, à des paragraphes entiers du site
ou encore à 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ères spéciaux, page 303
Ajout d’espacements entre les caractères, page 304
Création d’un style CSS, page 308
Définition et modification des polices et styles
Utilisez les options de l’inspecteur de propriétés ou le menu Texte pour définir ou modifier les
caractéristiques de la police du texte sélectionné. Vous pouvez définir le type, le style (par
exemple, gras ou italique) et la taille d’une police de caractères.
Pour définir ou modifier des caractéristiques de police :
1 Sélectionnez le texte. Si aucun texte n’est sélectionné, le changement s’appliquera au texte que
vous taperez ensuite.
2 Faites votre choix parmi les options suivantes :
■ Pour changer de police de caractères, choisissez une combinaison de polices dans
l’inspecteur de propriétés ou dans Texte > Police.
Choisissez Par défaut pour supprimer les polices préalablement appliquées. Cette option
applique la police par défaut au texte sélectionné (en l’occurrence, la police par défaut du
navigateur ou la police affectée à cette balise dans une feuille de style CSS).
■ Pour changer de style de police, cliquez sur Gras ou Italique dans l’inspecteur de propriétés
ou choisissez un style de police (Gras, Italique, Souligné, etc.) dans le sous-menu Texte >
Style.
Remarque : Lorsque vous utilisez l’inspecteur de propriétés pour appliquer un style gras ou
italique, Dreamweaver applique automatiquement la balise<strong> ou <em>, respectivement.
Si vous concevez des pages pour des utilisateurs disposant de navigateurs de version 3.0 ou
ultérieure, vous devez modifier cette préférence dans la catégorie Général de la boîte de
dialogue Préférences (Edition > Préférences).
■
300
Pour changer la taille de la police de caractères, choisissez une taille (de 1 à 7) dans
l’inspecteur de propriétés ou dans Texte > Taille.
En langage HTML, les tailles de polices sont exprimées en valeurs relatives, et non
spécifiques, de points. L’utilisateur définit la taille, en points, de la police par défaut de son
navigateur ; c’est cette taille de police qui est utilisée si vous choisissez Par défaut ou 3 dans
l’inspecteur de propriétés ou via le sous-menu Texte > Taille. Les tailles 1 et 2 sont plus
petites que la taille par défaut ; les tailles 4 à 7 sont plus grandes. De plus, les polices
semblent généralement plus grandes sous Windows que sur Macintosh, bien qu’Internet
Explorer 5 pour Macintosh utilise la même taille de police par défaut que Windows.
Chapitre 13 : Insertion et mise en forme de texte
Conseil : Afin que la taille de la police reste homogène, vous pouvez utiliser des feuilles de
style CSS pour dé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électionné, choisissez une taille
relative (de + ou -1 à +4 ou -3) dans l’inspecteur de propriétés ou via Texte > Modification
des dimensions.
Remarque : Ces valeurs indiquent une différence relative par rapport à la taille définie par
basefont. La valeur par dé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éfinir des valeurs plus élevé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éfini sur 3 et un texte
défini sur +3.
Changement de nom d’un style
Lors de la mise en forme de texte, Dreamweaver conserve en mémoire les styles créés sur chaque
page et constitue une bibliothèque de styles pouvant être réutilisés. Ceci facilite l’application d’un
même style à plusieurs blocs de texte. La présentation de vos pages est ainsi plus cohérente.
Pour renommer un style :
1 Choisissez Renommer dans le menu déroulant Style de l’inspecteur de propriétés du texte.
La boîte de dialogue Renommer un style s’affiche.
2 Sélectionnez le style à 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éfinir la combinaison de polices qui apparaît dans l’inspecteur de propriétés et dans Texte >
Police, utilisez la commande Modifier la liste des polices.
Les combinaisons de polices de caractères déterminent la façon dont le texte des pages Web est
affiché par les navigateurs. Ces derniers utilisent, au sein de la combinaison de polices choisie, la
première police installée sur l’ordinateur de l’utilisateur. Si aucune des polices de cette
combinaison n’est installée, le navigateur affiche le texte avec la police par défaut indiquée dans
ses préférences.
Pour modifier les combinaisons de polices :
1 Choisissez Texte > Police > Modifier la liste des polices.
2 Choisissez la combinaison de polices dans la liste qui apparaît en haut de la boîte de dialogue.
Les polices de la combinaison sélectionnée apparaissent dans la liste Polices choisies, dans le
coin inférieur gauche de la boîte de dialogue. Une liste de toutes les polices disponibles
installées sur votre système se trouve à sa droite.
Mise en forme de texte
301
3 Procédez de l’une des manières suivantes :
■
■
■
■
Pour ajouter ou retirer des polices d’une combinaison, cliquez selon le cas sur l’un des
boutons << ou >> 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érieure de la boîte de
dialogue.
Pour ajouter une police qui n’est pas installée sur votre ordinateur, tapez son nom dans le
champ texte en dessous de la liste Polices disponibles, et cliquez sur le bouton << pour
ajouter cette police à la combinaison courante. Il peut être utile d’ajouter une police qui
n’est pas installée sur votre système, par exemple pour indiquer une police spécifique à
Windows lorsque vous travaillez sur un Macintosh.
Pour déplacer la combinaison de polices au sein de la liste, cliquez sur les boutons fléchés en
haut de la boîte de dialogue.
Pour ajouter une nouvelle combinaison à la liste des polices :
1 Choisissez Texte > Police > Modifier la liste des polices.
2 Sélectionnez une police dans la liste Polices disponibles, et cliquez sur le bouton << pour
l’insérer dans la liste Polices choisies.
3 Répétez l’étape 2 pour chaque police nécessaire dans la combinaison.
Pour ajouter une police qui n’est pas installée sur votre ordinateur, tapez son nom dans le
champ texte en dessous de la liste Polices disponibles et cliquez sur le bouton << pour ajouter
cette police à la combinaison courante. Il peut être utile d’ajouter une police qui n’est pas
installée sur votre système, par exemple pour indiquer une police spécifique à Windows lorsque
vous travaillez sur un Macintosh.
4 Lorsque vous avez fini de choisir des polices, sélectionnez une famille de polices générique dans
la liste Polices disponibles et cliquez sur le bouton << pour l’insérer dans la liste Polices choisies.
Les familles géné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ît dans la police par
défaut associée à la famille de polices générique. Par exemple, avec la plupart des systèmes
d’exploitation, la police non proportionnelle (monospace) par défaut est Courier.
Modification de la couleur du texte
Vous pouvez modifier la couleur du texte sélectionné. La nouvelle couleur prend alors le dessus
sur la couleur de texte définie dans les propriétés de la page (si aucune couleur n’a été définie pour
le texte dans Propriétés de la page, le texte possède la couleur par défaut, le noir).
Pour modifier la couleur du texte :
1 Sélectionnez le texte.
2 Procédez de l’une des manières suivantes :
■
■
302
Choisissez une couleur dans la palette en cliquant sur le sélecteur de couleur dans
l’inspecteur de propriétés.
Choisissez Texte > Couleur. Le sélecteur de couleur système s’affiche. Sé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écimale directement dans le champ de
l’inspecteur de propriétés.
Pour définir la couleur du texte par défaut, utilisez la commande Modifier > Propriétés de la
page (voir Définition des couleurs par défaut du texte, page 274).
Pour permettre au texte de reprendre la couleur par défaut :
1 Dans l’inspecteur de propriétés, cliquez sur la case de couleur du texte pour ouvrir la palette de
couleurs sécurisées pour le Web.
2 Cliquez sur le bouton Barré (le carré blanc barré d’une ligne rouge, situé dans l’angle supérieur
droit).
Insertion de dates
Dreamweaver comporte un objet Date pratique qui insère la date actuelle dans le format de votre
choix (avec ou sans heure), ainsi qu’une option pour mettre à jour cette date lorsque vous
enregistrez le fichier.
Remarque : Les dates et heures affichées dans la boîte de dialogue Insérer date ne représentent pas
la date actuelle ni ne reflètent les dates/heures visualisées par un visiteur lorsqu’il affiche votre site.
Elles ne sont qu’un exemple de la manière dont vous souhaitez afficher ces informations.
Pour insérer la date courante dans un document :
1 Dans la fenêtre de document, placez le curseur là où vous désirez insérer la date.
2 Procédez de l’une des manières suivantes :
Choisissez Insertion > Date.
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Date.
3 Dans la boîte de dialogue qui apparaît alors, sélectionnez un format d’affichage pour le jour de
la semaine, pour la date et pour l’heure.
4 Si vous désirez que cette date soit actualisée à chaque nouvel enregistrement du document,
activez l’option Mettre à jour automatiquement lors de l’enregistrement. Si vous préférez que la
date soit insérée comme du texte normal et ne soit jamais actualisée, désactivez cette option.
5 Cliquez sur OK pour insérer la date.
■
■
Conseil : Si vous avez sélectionné Mettre à jour automatiquement lors de l’enregistrement, vous
pouvez modifier le format de la date après l’avoir insérée dans le document, en cliquant sur le texte
mis en forme et en sélectionnant Modifier le format de date dans l’inspecteur de propriétés.
Insertion de caractères spéciaux
Certains caractères spéciaux sont représentés en HTML par un nom ou par un numéro, qui est
alors appelé entité. Le langage HTML prévoit des noms d’entités pour de nombreux caractères
spéciaux, par exemple le symbole « Copyright » (©), l’« esperluette » (&) et le symbole
« Marque déposée » (trademark, ®). Chaque entité est représentée à la fois par un nom
HTML (par exemple — pour le tiret cadratin) et son équivalent numérique (dans ce cas,
—).
Conseil : Le langage HTML utilise des crochets <> dans son code, mais vous devez exprimer les
caractères spéciaux supérieur à et inférieur à sans que Dreamweaver les interprète comme du code.
Dans ce cas, utilisez > pour le signe supérieur à (>) et ⁢ pour le signe inférieur à (<).
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és.
Pour insérer un caractère spécial dans un document :
1 Dans la fenêtre de document, placez le curseur là où vous voulez insérer un caractère spécial.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez le nom du caractère dans le sous-menu Insertion > HTML > Caractères spéciaux.
Dans la catégorie Texte de la barre Insérer, cliquez sur le bouton Caractères et choisissez le
caractère de votre choix.
Conseil : Un grand nombre d’autres caractères spéciaux sont disponibles. Pour en sélectionner un,
choisissez Insertion > HTML > Caractères spéciaux > Autre ou choisissez la catégorie HTML de la
barre Insérer, cliquez sur le menu Caractères, puis choisissez Autres caractères. Choisissez un
caractère dans la boîte de dialogue Insérer autre caractère et cliquez sur OK.
Ajout d’espacements entre les caractères
Le langage HTML n’autorisant qu’un seul espace entre les caractères, il convient d’insérer un
espace insécable afin d’ajouter un espace supplémentaire dans un document. Vous pouvez définir
une préférence pour l’insertion automatique d’un espace insécable dans un document.
Pour insérer un espace insécable, procédez de l’une des manières suivantes :
• Dans la catégorie HTML de la barre Insérer, cliquez sur le bouton Caractères et choisissez
•
•
Insérer un espace insécable.
Choisissez Insertion > HTML > Caractères spéciaux > Espace insécable.
Appuyez sur les touches Contrôle+Maj+Espace (Windows) ou Option+Espace (Macintosh).
Pour définir une préférence pour l’ajout d’espaces insécables :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Dans la catégorie Général, assurez-vous que l’option Autoriser plusieurs espaces consécutifs est
activée.
Utilisation des feuilles de style en cascade
Par défaut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en
forme. Les styles appliqués au texte à l’aide de l’inspecteur de propriétés ou des commandes de
menu génèrent des règles CSS intégrées à la section head du document. Les styles CSS offrent
plus de flexibilité et un meilleur contrôle sur l’aspect de votre page : positionnement précis dans la
mise en page, utilisation de polices et de styles de texte spécifiques, etc.
Outre les styles et feuilles de style de votre composition, libre à vous d’utiliser les feuilles de style
livrées avec Dreamweaver pour styliser vos documents (voir Création d’un document basé 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éer, de modifier et de supprimer des styles CSS, mais
également d’attacher des feuilles de style externes aux documents.
Pour ouvrir le panneau Styles CSS :
• Procédez de l’une des manières suivantes :
Choisissez Fenêtre > Styles CSS.
■ Appuyez sur les touches Maj+F11.
Le panneau Styles CSS permet de consulter la définition des styles associés au document en
cours et la hiérarchie des styles. Le panneau Styles CSS affiche la définition des styles CSS
personnalisés (de classe), des balises HTML redéfinies et des styles des sélecteurs CSS.
■
Lorsque vous cré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ésente une liste des
sélecteurs définis dans toutes les balises de style et des feuilles de styles externes liées ou
importées. Lorsque vous créez un style personnalisé (de classe), il apparaît dans le panneau
Styles CSS, dans le menu déroulant Style de l’inspecteur de propriétés et dans le sous-menu
Texte > Styles CSS.
Les boutons suivants sont situés au bas du panneau Styles CSS :
: affiche la boîte de dialogue Ajouter une feuille de style externe.
Sélectionnez une feuille de style externe pour cré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éer une feuille de style CSS, page 310.
Attacher une feuille de style
: affiche la boîte de dialogue Nouveau style CSS. Utilisez la boîte de dialogue
Nouveau style CSS pour sélectionner le type du style que vous créez (par exemple, pour définir un
style de classe, redéfinissez une balise HTML) ou pour définir un sélecteur CSS. Pour plus
d’informations sur la création d’un nouveau style, voir Création d’un style CSS, page 308.
Nouveau style CSS
Utilisation des feuilles de style en cascade
305
: affiche la boîte de dialogue Dé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 à jour d’une feuille de style, voir Modification d’un style CSS,
page 312.
Modifier une feuille de style
: supprime le style sélectionné du panneau Styles CSS et supprime la
mise en forme de tous les éléments auxquels il est appliqué.
Supprimer le style CSS
Remarque : Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) sur le panneau Styles CSS pour ouvrir un menu contextuel d’options
disponibles pour l’exécution des commandes de feuilles de style CSS.
Rubriques connexes
•
•
•
•
•
Cré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étés des éléments CSS sélectionnés dans le document en cours à
l’aide de l’onglet CSS pertinents. Il permet également d’afficher les règles qui s’appliquent à la
sélection actuelle et les balises concernées par ces règles.
Pour ouvrir l’onglet CSS pertinents :
1 Choisissez Fenêtre > Inspecteur de balises.
L’inspecteur de balises s’affiche.
2 Cliquez sur l’onglet CSS pertinents pour afficher les propriétés de la page en cours.
3 Sélectionnez un élément de texte dans la page pour afficher ses propriétés.
L’onglet CSS pertinents affiche les règles CSS de la sélection en cours, le nom et l’emplacement
du fichier contenant les règles CSS et les propriétés applicables de la règle.
Pour modifier une règle CSS à l’aide de l’onglet CSS pertinents, procédez de l’une des
manières suivantes :
• Double-cliquez sur la règle dans l’onglet CSS pertinents pour modifier le code de la règle et
•
afficher l’inspecteur de propriétés CSS.
Modifiez les propriétés de la règle à l’aide des commandes situées dans la partie inférieure de
l’onglet CSS pertinents.
Rubriques connexes
• L’onglet CSS pertinents, page 293
• Cré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étés CSS
L’onglet Propriétés CSS permet de modifier directement les propriétés et les valeurs d’une règle
CSS. Par défaut, les propriétés CSS sont organisées en catégories. Vous pouvez modifier les
propriétés de chaque règle CSS en entrant les valeurs dans les champs de texte et en sélectionnant
des valeurs dans les menus contextuels associés à chaque propriété.
Remarque : L’onglet Propriétés CSS affiche les propriété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étés des
feuilles de style verrouillées ou en lecture seule, tout en protégeant les valeurs CSS qu’elles
contiennent. Dreamweaver tente d’extraire la feuille de style verrouillée et peut vous inviter à définir
vos préférences de site de façon à pouvoir extraire le fichier.
Ouverture de l’onglet Propriétés CSS :
1 Choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS.
2 Choisissez Fenêtre > Inspecteur de balises pour afficher le panneau de l’inspecteur de balises.
3 Sélectionnez un style CSS à l’un des emplacements suivants :
Styles CSS, panneau
■ feuille de style CSS ouverte dans la fenêtre de document
■ page HTML en mode Code avec style CSS incorporé dans la section head de la page.
4 Lorsque vous sélectionnez un style CSS à l’un de ces emplacements, l’onglet Propriétés CSS
apparaît dans le panneau de l’inspecteur de balises et les propriétés de ce style sont affichées.
Vous pouvez choisir l’affichage des propriétés CSS en cliquant sur le bouton Afficher la vue par
catégorie ou le bouton Afficher la vue sous forme de liste situés dans le coin supérieur gauche
de l’onglet Propriétés CSS.
■
répartit les propriétés CSS prises en charge par Dreamweaver en huit
catégories distinctes : police, arrière-plan, bloc, bordure, boîte, liste, positionnement et
extensions. Les propriétés de chaque catégorie sont conservées dans une liste que vous pouvez
développer ou réduire en cliquant sur le bouton plus (+) en regard de la catégorie de votre choix.
Les propriétés de chaque catégorie sont triées par ordre alphabétique. Les propriétés utilisées sont
placées en tête de liste et sont affichées en bleu. La vue par catégories constitue la vue par défaut.
La vue sous forme de liste affiche l’ensemble des propriétés CSS prises en charge par
Dreamweaver par ordre alphabétique. Les propriétés utilisées sont placées en tête de liste et
sont affichées en bleu.
La vue par caté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éation d’un style CSS
Vous pouvez créer une feuille de style CSS pour automatiser la mise en forme de balises HTML
ou d’une plage de texte identifiée par un attribut class.
Pour créer un nouveau style CSS :
1 Placez le point d’insertion dans le document, puis procédez de l’une des manières suivantes pour
ouvrir la nouvelle boîte de dialogue Nouveau style CSS :
■ Dans l’angle inférieur droit du panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le
bouton Nouveau style CSS (+).
■ Dans l’inspecteur de propriétés de texte, choisissez Gérer les styles dans le menu déroulant
Style et cliquez sur le bouton Nouveau dans la boîte de dialogue qui s’affiche.
■ Dans l’onglet CSS pertinents (choisissez Fenêtre > Inspecteur de balises et cliquez sur
l’onglet CSS pertinents), cliquez avec le bouton droit de la souris et choisissez Nouvelle règle
dans le menu contextuel.
■ Choisissez Texte > Styles CSS > Nouveau.
La boîte de dialogue Nouveau style CSS apparaît.
2 Définissez le type de style CSS que vous souhaitez créer :
■ Pour créer un style personnalisé applicable en tant qu’attribut class à une plage ou un bloc
de texte, choisissez Créer un style personnalisé (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ête1). Si vous
omettez le point, Dreamweaver l’insère à votre place.
Pour redéfinir la mise en forme par défaut d’une balise HTML spécifique, choisissez Balise
(permet de redéfinir l’aspect d’une balise), puis entrez une balise HTML dans le champ
Balise ou choisissez-en une dans le menu déroulant.
■ Pour définir la mise en forme d’une combinaison particulière de balises ou de toutes les
balises contenant un attribut Id spécifique, choisissez Utiliser le sélecteur CSS, puis entrez
une ou plusieurs balises HTML dans le champ Sélecteur ou choisissez-en une dans le menu
déroulant. Les sélecteurs (appelés sélecteurs de pseudo-classe) disponibles dans le menu
déroulant sont a:active, a:hover, a:link et a:visited.
Sélectionnez l’emplacement dans lequel définir le style :
■ Pour cré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îte de dialogue Définition du style s’affiche.
Choisissez les options du nouveau style CSS.
Lorsque vous avez défini les attributs de style, cliquez sur OK.
■
3
4
5
6
Pour plus d’informations sur des paramètres de style CSS spécifiques, voir les rubriques suivantes
dans l’aide de Dreamweaver :
• Définition des propriétés de type CSS
• Définition des propriétés d’arrière-plan de style CSS
• Définition des propriétés de bloc de style CSS
308
Chapitre 13 : Insertion et mise en forme de texte
•
•
•
•
•
Définition des propriétés de boîte de style CSS
Définition des propriétés de bordure de style CSS
Définition des propriétés de liste de style CSS
Définition des propriétés de positionnement de style CSS
Définition des propriété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 être appliqué à n’importe quel texte dans
un document, quelles que soient les balises qui contrôlent ce texte. Tous les styles de classe
associés au document en cours sont affichés dans le panneau Styles CSS (le nom précédé d’un
point (.)) et dans le menu déroulant Style de l’inspecteur de propriétés de texte.
Même si la plupart des styles sont actualisés immédiatement, il est préconisé d’afficher votre page
dans un navigateur et de vérifier que le style a été appliqué comme prévu. Lorsque vous appliquez
plusieurs styles au même texte, ils risquent d’être contradictoires et de produire des résultats
inattendus. Pour plus d’informations, voir A propos des conflits de styles CSS, page 290.
Conseil : Lorsque vous affichez un aperçu des styles définis dans une feuille de style CSS externe,
n’oubliez pas d’enregistrer la feuille de style afin que vos modifications soient appliquées lorsque
vous afficherez la page dans un navigateur.
Pour appliquer un style CSS personnalisé :
1 Sé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électionnez une plage de texte au sein d’un même paragraphe, le style CSS n’affectera
que cette sélection.
Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, sélectionnez cette
balise dans le sélecteur situé dans la partie inférieure gauche de la fenêtre de document.
2 Pour appliquer un style de classe, procédez de l’une des manières suivantes :
■ Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez avec le bouton droit de la souris
sur le nom du style à appliquer et choisissez Appliquer dans le menu contextuel.
■ Dans l’inspecteur de propriétés de texte, choisissez le style de classe à appliquer dans le menu
déroulant Style.
■ Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh) sur le texte sélectionné, choisissez
Styles CSS dans le menu contextuel, puis choisissez le style à appliquer.
■ Choisissez Texte > Styles CSS, puis sélectionnez le style à appliquer dans le sous-menu.
Utilisation des feuilles de style en cascade
309
Pour supprimer un style personnalisé de la sélection :
1 Sélectionnez l’objet ou le texte auquel le style ne doit plus être appliqué.
2 Procédez de l’une des manières suivantes :
■
■
Dans l’inspecteur de propriétés de texte, choisissez Aucun dans le menu déroulant Style.
Cliquez avec le bouton droit de la souris sur la règle à supprimer dans l’onglet CSS
pertinents, puis choisissez Définir classe > 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éer une feuille de style CSS
Vous pouvez exporter des styles d’un document pour créer une feuille de style CSS. Vous pouvez
ensuite créer des liens vers d’autres documents pour appliquer ces styles.
Pour exporter des styles CSS d’un document et créer une feuille de style CSS :
1 Choisissez Fichier > Exporter > Styles CSS ou Texte > Styles CSS > Exporter.
La boî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é 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 à 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étés dans tous les
documents liés à cette feuille de style. Vous pouvez exporter les styles CSS trouvés dans un
document afin de créer une nouvelle feuille de style CSS, et attacher ou créer un lien vers une
feuille de style externe pour appliquer les styles trouvés à cet endroit.
Bien entendu, vous pouvez attacher toute feuille de style de votre création à vos pages ou copier
ces feuilles dans votre site. De plus, Dreamweaver est fourni avec des feuilles de style prédéfinies
qui peuvent être automatiquement placées dans votre site et attachées à vos pages. Pour plus
d’informations sur l’utilisation des feuilles de style à la conception livrées avec Dreamweaver,
voir Création d’un document basé 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éer un lien vers ou importer une feuille de style CSS externe :
1 Ouvrez le panneau Styles CSS en procédant de l’une des manières suivantes :
Choisissez Fenêtre > Styles CSS.
■ Appuyez sur les touches Maj + F11.
Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style.
La boîte de dialogue Ajouter une feuille de style externe apparaît.
Dans la boîte de dialogue Ajouter une feuille de style externe, procédez de l’une des maniè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électionnez une des options suivantes :
■ Pour créer un lien entre le document actif et une feuille de style externe, choisissez Lien.
Cette sélection a pour effet de créer une balise de lien href dans le code HTML et de
référencer l’URL de l’emplacement de la feuille de style publiée. Microsoft Internet Explorer
et Netscape Navigator prennent tous deux en charge cette méthode.
■ Vous ne pouvez pas utiliser une balise de lien pour ajouter une référence d’une feuille de
style externe à une autre. Pour imbriquer des feuilles de style, vous devez utiliser une
directive d’importation. Certains navigateurs reconnaissent également la directive
d’importation dans une page (plutôt que simplement dans des feuilles de style). Il existe
quelques différences dans la méthode de résolution des conflits entre propriétés lorsque des
règles se chevauchent dans des feuilles de style externes liées et des feuilles importées dans
une page. Pour importer une feuille de style externe, plutôt que d’y créer un lien, choisissez
Importer.
Cliquez sur le bouton d’aperçu pour vérifier que la feuille de style applique effectivement les
styles de votre choix à la page active.
Si les styles appliqués ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille
de style. La page retrouve son aspect précédent.
Cliquez sur OK.
Le nom de la feuille de style CSS externe s’affiche dans le panneau Styles CSS et les styles
personnalisés (de classe) sont précédés de l’identificateur de feuille de style externe.
■
2
3
4
5
6
Rubriques connexes
• Exportation de styles pour cré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 à vos
pages ou que vous pouvez utiliser comme points de départ pour créer vos propres styles.
Pour appliquer une feuille de style de Dreamweaver :
1 Ouvrez le panneau Styles CSS en procédant de l’une des manières suivantes :
Choisissez Fenêtre > Styles CSS.
■ Appuyez sur les touches Maj+F11.
Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style.
La boîte de dialogue Ajouter une feuille de style externe apparaît.
Dans la boîte de dialogue Ajouter une feuille de style externe, cliquez sur Exemples de feuilles
de style.
La boîte de dialogue Exemples de feuilles de style s’affiche.
Sélectionnez une feuille de style dans la zone de liste.
Lorsque vous sélectionnez des feuilles de style dans la zone de liste, le formatage du texte et des
couleurs s’affiche dans le panneau d’aperçu.
Cliquez sur le bouton Aperçu pour appliquer la feuille de style et vérifier que le style de votre
choix est bien appliqué à la page active.
Si les styles appliqués ne sont pas ceux que vous escomptiez, sélectionnez une autre feuille de
style dans la liste et cliquez sur le bouton Aperçu pour visualiser les styles correspondants.
Par défaut, Dreamweaver enregistre la feuille de style dans un dossier nommé CSS au niveau
juste en dessous de la racine du site défini pour votre page. Si ce dossier n’existe pas,
Dreamweaver le cré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ègles correspondent à vos critè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és à un document.
Lorsque vous modifiez une feuille de style CSS qui contrôle du texte dans votre document, vous
reformatez instantanément tout ce texte. Les modifications apportées à une feuille de style externe
se répercutent sur tous les documents auxquels elle est liée.
Libre à vous de définir un éditeur externe pour la modification des feuilles de style. Pour plus
d’informations sur la définition d’un éditeur externe, voir Lancement d’un éditeur externe pour des
fichiers multimédia, page 371.
Pour modifier un style CSS :
1 Choisissez Fenêtre > 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électionné dans la page s’affiche dans le panneau CSS.
4 Cliquez sur le style que vous voulez modifier pour le sélectionner, puis procédez de l’une des
manières suivantes :
312
Chapitre 13 : Insertion et mise en forme de texte
Double-cliquez sur le style sélectionné dans le panneau Styles CSS.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis sélectionnez Modifier une règle dans le menu qui s’affiche.
■ Cliquez sur le bouton Modifier le style au bas du panneau CSS.
■ Sélectionnez le style dans le panneau CSS et modifiez ses propriétés dans l’inspecteur de
propriétés de style.
Les modifications apportées s’appliquent immédiatement au document actif, ce qui vous
permet de connaître directement le résultat de vos opérations. Si vous modifiez des styles
enregistrés dans une feuille de style externe, n’oubliez pas d’enregistrer vos modifications afin
de les appliquer.
5 Une fois les modifications effectuées, enregistrez votre travail.
Si vous modifiez des styles CSS qui se trouvent dans des feuilles de style utilisées dans plusieurs
documents, les modifications s’appliqueront également aux autres documents.
■
Rubriques connexes
• Utilisation de l’onglet CSS pertinents, page 306
• Utilisation de l’onglet Propriétés CSS, page 307
Modification d’une feuille de style CSS
En règle géné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écessaire.
La boîte de dialogue Modifier feuille de style vous permet de manipuler les feuilles de style de
plusieurs manières. Utilisez-la pour créer un lien vers une feuille de style externe ou pour cré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électionner, puis procédez de l’une des maniè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électionnez la feuille de style à modifier dans la boîte de
dialogue qui s’ouvre et cliquez sur Modifier.
Les styles de la feuille de style CSS sélectionnée apparaissent dans la boîte de dialogue.
2 Dans la boîte de dialogue, sélectionnez le style que vous voulez modifier, puis cliquez sur Modifier.
La boîte de dialogue Définition du style CSS s’affiche.
3 Modifiez les styles à 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 à jour de feuilles de style CSS dans un site Contribute
Les utilisateurs de Contribute ne peuvent pas apporter de modifications à une feuille de style
CSS. Pour modifier une feuille de style pour un site Contribute, utilisez Dreamweaver.
Les facteurs suivants doivent être pris en compte lors de la mise à jour de feuilles de style pour un
site Contribute :
• Si vous apportez des modifications à 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és à la feuille de style jusqu’à 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é des pages qui utilisent cette feuille, mais, puisque le style n’existe plus, il n’est pas
appliqué à la page comme l’utilisateur de Contribute pourrait s’y attendre. Ainsi, si un
utilisateur vous déclare que rien ne se passe lorsque celui-ci applique un style donné, il est
possible que le style ait été supprimé 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é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 à la publication des pages que vous
utilisez une feuille de style définie. Modifiez ensuite à nouveau ces pages pour voir la nouvelle
feuille de style.
Utilisation de feuilles de style à la conception
Les feuilles de style à la conception permettent d’afficher ou de masquer la conception appliqué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éation d’une page.
Les feuilles de style à la conception s’appliquent uniquement lorsque vous travaillez dans un
document Dreamweaver ; lorsque la page est affichée dans une fenêtre de navigateur, seuls les
styles réellement attachés au document ou qui y sont incorporés apparaissent.
Pour afficher ou masquer une feuille de style CSS à la conception :
1 Ouvrez la boîte de dialogue Feuilles de style à la conception en procédant de l’une des manières
suivantes :
■ Cliquez avec le bouton droit de la souris dans le panneau Styles CSS et choisissez
Conception dans le menu contextuel.
■ Choisissez Texte > Styles CSS > Conception.
2 Dans la boîte de dialogue, définissez les options d’affichage ou de masquage de la feuille de style
sélectionnée :
■ Pour afficher une feuille de style CSS à la conception, cliquez sur le bouton plus (+) situé
au-dessus d’Afficher à la conception uniquement, puis recherchez la feuille de style CSS à
afficher dans la boîte de dialogue Sélectionner une feuille de style.
■ Pour masquer une feuille de style CSS, cliquez sur le bouton plus (+) situé au-dessus de
Masquer à la conception, puis recherchez la feuille de style CSS à masquer dans la boîte de
dialogue Sé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é.
3 Cliquez sur OK pour fermer la boîte de dialogue.
■
Le panneau Styles CSS est actualisé avec le nom de la feuille de style sélectionnée ainsi qu’un
indicateur, « masqué » ou « concevoir », selon l’état de la feuille de style.
Rubriques connexes
•
•
•
•
Utilisation du panneau Styles CSS, page 305
Exportation de styles pour cré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érification orthographique
Dans le menu Texte, la commande Orthographe permet de vérifier l’orthographe du document
actif. La commande Orthographe ignore les balises HTML et les valeurs d’attributs.
Par défaut, le correcteur orthographique utilise le dictionnaire Anglais US. Pour changer de
dictionnaire, choisissez Edition > Préférences > Général (Windows) ou Dreamweaver >
Préférences > Général (Macintosh), puis choisissez le dictionnaire que vous souhaitez utiliser dans
le menu déroulant Dictionnaire du correcteur d’orthographe. Vous pouvez télécharger des
dictionnaires dans d’autres langues sur le centre de support de Dreamweaver, à l’adresse suivante :
http://www.macromedia.com/go/dreamweaver_support_fr/.
Pour vérifier puis corriger l’orthographe :
1 Choisissez Texte > Orthographe ou appuyez sur les touches Maj+F7.
Lorsque Dreamweaver ne reconnaît pas un mot, la boîte de dialogue Vérifier l’orthographe
s’affiche.
2 Sélectionnez l’option correspondant au traitement que vous souhaitez appliquer à l’occurrence.
Vé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 être effectuée ou sélectionnez des documents
ou un dossier dans le panneau Fichiers.
2 Sélectionnez la commande Edition > Rechercher et remplacer.
La boîte de dialogue Rechercher et remplacer s’affiche.
3 Indiquez les fichierssur lesquels doit porter la recherche, puis indiquez le type de recherche à
effectuer et enfin le texte ou les balises à rechercher. Le cas échéant, spécifiez é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ération terminée, cliquez sur le bouton Fermer pour fermer la boîte de dialogue.
Pour effectuer une nouvelle recherche sans afficher la boî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éation ou en mode
Code pour insérer des images dans un document. Lorsque vous ajoutez des images dans un
document Dreamweaver, vous pouvez définir ou modifier les propriétés d’image et visualiser les
modifications directement dans la fenêtre de document.
Pour améliorer l’efficacité de votre environnement de conception, vous pouvez sélectionner une
préférence pour l’é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 à l’aide de Fireworks, page 324
Ajustement de la luminosité et du contraste d’une image, page 325
Accentuation d’une image, page 325
Création d’une image survolée, page 326
Utilisation d’un éditeur d’image externe, page 327
Application decomportements aux images, page 327
A propos des images
Différents types de formats de fichiers graphiques existent, mais trois formats de fichiers
graphiques sont généralement utilisé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 être visualisés
par la plupart des navigateurs.
Les fichiers PNG sont les plus adaptés pour la plupart des types de graphiques Web en raison de
leur souplesse et de leur taille réduite ; toutefois, l’affichage d’images PNG n’est que partiellement
pris en charge dans Microsoft Internet Explorer (4.0 et versions ultérieures) et dans Netscape
Navigator (4.04 et versions ultérieures). A moins que votre site ne soit spécifiquement destiné à
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és à l’affichage d’images à tons non continus ou d’images comportant de larges zones de
couleurs unies, telles que les barres de navigation, les boutons, les icô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érieur destiné
aux photographies ou aux images à tons continus, car de tels fichiers peuvent contenir des
millions de couleurs. Lorsque la qualité d’un fichier JPEG augmente, sa taille et son temps de
téléchargement augmentent également. Il est souvent possible d’obtenir un bon compromis entre
la qualité 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é pour les fichiers GIF, qui inclut la prise en charge des images à couleurs indexé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ées) et tous ces éléments peuvent être modifiés à tout
moment. Les fichiers doivent avoir l’extension .png pour être reconnus comme fichiers PNG par
Dreamweaver.
Modification d’images dans Dreamweaver
Dreamweaver comprend des fonctions basiques de retouche d’image, ce qui vous évite de devoir
lancer une application externe pour effectuer cette tâche (par exemple, Macromedia Fireworks).
Les outils de retouche d’image de Dreamweaver sont conçus pour un travail simplifié avec les
concepteurs de contenu responsables de la création des fichiers d’image utilisés sur votre site Web.
Remarque : Vous n’avez pas besoin d’avoir installé 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ève des pixels d’images JPEG ou GIF
redimensionnées afin qu’elles correspondent le mieux possible à l’aspect des images originales. Le
rééchantillonnage d’une image en réduit la taille, ce qui permet d’en accélérer le téléchargement.
Le rééchantillonnage d’image
Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin
de l’adapter à ses nouvelles dimensions. Lorsqu’un objet bitmap est rééchantillonné, des pixels
sont ajoutés à l’image ou en sont enlevés afin de l’agrandir ou de la réduire. En général, le
rééchantillonnage d’une image à une résolution supérieure provoque une faible perte de qualité.
Le rééchantillonnage à une résolution inférieure, en revanche, provoque toujours une perte de
données et donne une moins bonne qualité.
Le recadrage permet de réduire la surface des images. En général, il est utile pour mettre en
évidence le sujet de l’image et supprimer les aspects indésirables qui entourent le centre d’intérêt
de l’image.
Luminosité/Contraste modifie la luminosité 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é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érique, la plupart
des logiciels de capture d’images estompent par défaut les bords des objets photographiés. Cela
empêche les détails extrêmement précis de se perdre dans les pixels dont sont constituées les
images numériques. Cependant, il est souvent nécessaire d’accentuer l’image pour faire ressortir
les détails dans les fichiers d’image numé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 être modifiés à l’aide de ces fonctions.
Rubriques connexes
•
•
•
•
Redimensionnement d’une image, page 323
Recadrage d’une image, page 324
Ajustement de la luminosité et du contraste d’une image, page 325
Accentuation d’une image, page 325
Insertion d’une image
Lorsque vous insérez une image dans un document Dreamweaver, le programme crée
automatiquement une référence à ce fichier d’image dans le code source HTML. Pour que cette
référence soit correcte, le fichier d’image doit résider sur le site. Dans le cas contraire,
Dreamweaver vous invite à copier le fichier sur le site.
Vous pouvez également insérer des images de façon dynamique. Les images dynamiques sont des
images qui changent souvent ; par exemple, les systèmes de rotation de bannières publicitaires qui
sélectionnent les bannières de manière aléatoire, puis affichent l’image de la bannière sélectionnée
lors de l’affichage d’une page. Pour plus d’informations, voir Création d’images dynamiques,
page 570.
Pour insérer une image :
1 Placez le point d’insertion à l’endroit où doit apparaître l’image dans la fenêtre de document,
puis procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, cliquez sur l’icône Image.
■ Dans la catégorie Commun de la barre Insérer, faites glisser l’icône Image vers la fenêtre du
document (ou la fenêtre du mode Code si vous travaillez sur le code).
■ Choisissez Insertion > Image.
■ Faites glisser une image à partir du panneau Actifs (Fenêtre > Actifs) vers l’emplacement
souhaité dans la fenêtre de document, puis passez à l’étape 3.
■ Faites glisser une image à partir du panneau Site vers l’emplacement souhaité dans la fenêtre
de document, puis passez à l’étape 3.
■ Faites glisser une image à partir du bureau vers l’emplacement désiré sur la page, puis passez
à l’étape 3.
2 Dans la boîte de dialogue qui s’affiche, procédez de l’une des manières suivantes :
■ Sélectionnez Système de fichiers pour choisir un fichier graphique.
■ Sélectionnez Source de données pour choisir une source d’images dynamiques.
Insertion d’une image
319
3 Parcourez l’arborescence pour sélectionner l’image ou la source de contenu à insérer.
Tant que le document sur lequel vous travaillez n’a pas encore été enregistré, Dreamweaver crée
automatiquement une référence d’emplacement de fichier de type file://. Lorsque vous
enregistrez le document sur le site, Dreamweaver convertit cette référence en indiquant un
chemin relatif au document. Cliquez sur le bouton Aide de la boîte de dialogue pour en savoir
plus sur les options qu’elle contient.
4 Cliquez sur OK.
La boîte de dialogue Attributs d’accessibilité aux balises d’image s’affiche si elle a été activée
dans les préfé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îte de dialogue.
L’image apparaî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é.
6 Dans l’inspecteur de propriétés (Fenêtre > Propriétés), définissez les propriétés de l’image.
Pour plus d’informations, voir Définition des propriétés de l’image dans l’aide de
Dreamweaver.
Pour modifier les attributs d’accessibilité de l’image, voir Modification des attributs d’accessibilité
d’une image, page 320.
Rubriques connexes
• Définition d’une image ou d’une couleur d’arrière-plan de la page, page 272
• Utilisation des images d’espacement, page 205
Modification des attributs d’accessibilité d’une image
Si vous avez inséré des attributs d’accessibilité 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é d’une image :
1 Sélectionnez l’image dans la fenêtre de document.
2 Procédez de l’une des maniè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ôle
enfoncée (Macintosh), puis sélectionnez Modifier le code de la balise.
Chapitre 14 : Insertion d’images
■
Modifiez la valeur Alt dans l’inspecteur de propriétés.
insertion d’un espace réservé pour une image
Un espace réservé pour une image est un graphique que vous utilisez jusqu’à ce que le dessin final
soit prêt pour être ajouté à une page Web.
Pour insérer un espace réservé pour une image :
1 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous voulez insérer un
espace réservé pour un graphique.
2 Procédez de l’une des manières suivantes :
Dans la catégorie Commun de la barre Insérer, cliquez sur l’icône Espace réservé pour
l’image.
■ Choisissez Insertion > Espace réservé pour l’image.
La boîte de dialogue Espace réservé pour l’image s’affiche.
3 Dans la boîte de dialogue, sélectionnez les options de l’espace réservé pour l’image.
Vous pouvez définir la taille et la couleur de l’espace réservé et lui donner une étiquette de
texte. Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
■
Les attributs de couleur et de taille ainsi que l’étiquette de l’espace réservé s’affichent comme suit :
Lorsqu’ils sont visualisés dans un navigateur, le texte de l’é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éservés pour les images Dreamweaver, page 357.
Remplacement d’un espace réservé pour une image
Un espace réservé 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éservés pour une image que vous avez
ajoutés par des fichiers graphiques adaptés au Web, tels que des images GIF ou JPEG.
Si vous possédez Fireworks, vous pouvez créer un nouveau graphique à partir d’un espace réservé
pour image dans Dreamweaver. La nouvelle image reprend la même taille que celle de l’espace
réservé pour l’image. Vous pouvez modifier l’image, puis la remplacer dans Dreamweaver. Pour
plus d’informations sur la création d’une image de remplacement dans Fireworks, voir Utilisation
de Fireworks pour modifier les espaces réservés pour les images Dreamweaver, page 357.
Pour mettre à jour la source d’image :
1 Dans la fenêtre Document, procédez de l’une des manières suivantes :
■
■
Double-cliquez sur l’espace réservé pour l’image.
Cliquez sur l’espace réservé pour l’image pour le sélectionner, puis dans l’inspecteur de
propriétés (Fenêtre > Propriétés), cliquez sur l’icône du dossier à côté de la zone de texte Src.
Insertion d’une image
321
La boîte de dialogue Source de l’image s’affiche.
2 Dans la boîte de dialogue, localisez l’image que vous voulez utiliser pour remplacer l’espace
réservé.
3 Cliquez sur OK.
L’image sélectionnée apparaî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
éléments de la ligne. Vous pouvez également définir l’alignement horizontal d’une image.
Pour aligner une image :
1 Sélectionnez l’image dans le mode Création.
2 Définissez les attributs d’alignement de l’image dans l’inspecteur de propriétés.
Vous pouvez définir l’alignement selon d’autres éléments situés dans le même paragraphe ou la
même ligne.
Remarque : Le langage HTML ne permet pas de placer un texte autour des contours d’une image,
contrairement à certaines applications de traitement de texte.
Les options d’alignement sont les suivantes :
Défaut provoque généralement un alignement sur la ligne de base. La valeur par dé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 élément du même
paragraphe) sur le bas de l’objet sélectionné.
Haut aligne
le haut d’une image sur le haut de l’élément le plus élevé (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è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érieurs comme dans la lettre g).
322
Chapitre 14 : Insertion d’images
Gauche aligne l’image sélectionnée sur la marge de gauche et place le texte qui l’entoure à sa
droite. Si le texte aligné à gauche précède l’objet sur la ligne, les objets alignés à gauche sont
généralement placés automatiquement sur une nouvelle ligne.
aligne l’image sur la marge de droite et place le texte qui l’entoure à sa gauche. Si le texte
aligné à droite précède l’objet sur la ligne, les objets alignés à droite sont généralement placés
automatiquement sur une nouvelle ligne.
Droite
Redimensionnement d’une image
Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des
images, des plug-ins, des fichiers Macromedia Shockwave ou Flash, des applets et des contrôles
ActiveX.
Le redimensionnement visuel d’une image dans Dreamweaver permet de mieux voir comment
l’image affecte la mise en forme en différentes dimensions. Il n’adapte pas les dimensions de
l’image aux proportions que vous avez spécifié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ésirées, le navigateur de
l’utilisateur devra le faire lorsque la page sera chargée. Cela risque d’entraîner l’allongement du
temps de téléchargement de la page et l’affichage incorrect de l’image dans le navigateur. Pour
réduire le temps de téléchargement et être sûr que toutes les instances de l’image sont affichées aux
mêmes dimensions, utilisez une application de retouche d’image pour adapter les proportions de
l’image.
Pour redimensionner visuellement un élément :
1 Sélectionnez l’élément (par exemple, une image ou un fichier SWF) dans la fenêtre de
document.
Des poignées de redimensionnement apparaissent à droite et en bas de l’élément, et dans le
coin inférieur droit. Si ces poignées n’apparaissent pas, cliquez à l’extérieur de l’élément à
redimensionner, puis sélectionnez-le à nouveau ou cliquez sur la balise correspondante dans le
sélecteur de balises.
2 Pour redimensionner l’élément, utilisez l’une des méthodes suivantes :
■ Pour ajuster la largeur de l’élément, déplacez la poignée à droite de la sélection.
■ Pour ajuster la hauteur de l’élément, déplacez la poignée au bas de la sélection.
■ Pour ajuster simultanément la largeur et la hauteur de l’élément, faites glisser la poignée de
l’angle de la sélection.
■ Pour conserver les proportions de l’élément (rapport largeur/hauteur) lorsque vous modifiez
ses dimensions, faites glisser la poignée de l’angle de la sélection tout en appuyant sur la
touche Maj.
Les éléments peuvent être redimensionnés visuellement à une taille minimale de 8 x 8 pixels. Pour
ajuster la largeur et la hauteur d’un élément à une taille inférieure, (par exemple, 1 x 1 pixel),
utilisez l’inspecteur de propriétés pour entrer une valeur numérique.
Pour rétablir la taille originale d’un élément redimensionné, supprimez les valeurs des zones de
texte L et H ou cliquez sur le bouton Rétablir la taille dans l’inspecteur de propriétés.
Pour rétablir la taille originale d’une image :
• Cliquez sur le bouton Rétablir la taille dans l’inspecteur de propriétés des images.
Redimensionnement d’une image
323
Pour rééchantillonner une image redimensionnée :
1 Redimensionnez l’image de la manière décrite ci-dessus.
2 Cliquez sur le bouton Rééchantillonner dans l’inspecteur de propriétés des images.
Remarque : Vous ne pouvez pas rééchantillonner les espaces réservés pour une image ou les
élé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 à l’aide de Dreamweaver, le fichier d’image source est
modifié sur le disque. Il peut donc s’avérer utile de conserver une copie de sauvegarde du fichier
d’image au cas où vous auriez besoin de revenir à l’image d’origine.
Pour recadrer une image :
1 Ouvrez la page qui contient l’image à recadrer, sélectionnez l’image et procédez de l’une des
manières suivantes :
■ Cliquez sur l’icône Recadrer dans l’inspecteur de propriétés des images.
■ Choisissez Modifier > Image > Recadrer.
Des poignées de recadrage apparaissent autour de l’image sélectionnée.
2 Ajustez-les jusqu’à ce que la surface de l’image à conserver soit entourée d’une zone limite.
3 Double-cliquez dans cette zone ou appuyez sur Entrée pour recadrer la sélection.
Une boîte de dialogue vous informe que le fichier image que vous recadrez sera modifié sur le
disque. Cliquez sur OK.
Chaque pixel de l’image bitmap situé hors de la zone limite est supprimé mais les autres objets
de l’image ne sont pas affectés.
4 Vérifiez à l’aide de l’aperçu que l’image correspond à vos attentes.
Pour annuler les effets de la commande de recadrage :
• Choisissez Edition > Annuler Recadrer pour revenir à 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ù 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é et du contraste d’une image, page 325
• Accentuation d’une image, page 325
Optimisation d’une image à 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 à optimiser, sélectionnez l’image et procédez de l’une des
manières suivantes :
■ Cliquez sur le bouton Optimiser dans Fireworks dans l’inspecteur de propriétés des images.
■ Choisissez Modifier > Image > Optimiser l’image dans Fireworks.
La boî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é et du contraste d’une image
La fonction Luminosité/Contraste modifie la luminosité 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ée pour corriger les images trop sombres ou trop claires.
Pour ajuster la luminosité et le contraste d’une image :
1 Ouvrez la page qui contient l’image à ajuster, sélectionnez l’image et procédez de l’une des
manières suivantes :
Cliquez sur le bouton Luminosité/Contraste dans l’inspecteur de propriétés.
■ Choisissez Modifier > Image > Luminosité/Contraste.
La boîte de dialogue Luminosité/Contraste s’affiche.
2 Déplacez les curseurs de luminosité et de contraste pour modifier les valeurs à 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éfinition de
l’image.
Pour accentuer une image :
1 Ouvrez la page qui contient l’image à accentuer, sélectionnez l’image et procédez de l’une des
manières suivantes :
■ Cliquez sur le bouton Accentuer dans l’inspecteur de propriétés des images.
Accentuation d’une image
325
Choisissez Modifier > Image > Accentuer.
La boîte de dialogue Accentuer s’affiche.
2 Pour spécifier le degré d’accentuation appliqué par Dreamweaver à l’image, déplacez le curseur
ou tapez une valeur comprise entre 0 et 10 dans la zone de texte.
Lorsque vous ajustez la netteté de l’image à l’aide de la boîte de dialogue Accentuer, vous
pouvez afficher un aperçu de l’image modifiée.
3 Cliquez sur OK.
4 Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez à l’image d’origine
en choisissant Edition > Annuler Accentuer.
■
Pour annuler les effets de la commande d’accentuation :
• Choisissez Edition > Annuler Accentuer pour revenir à 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é
la page, les modifications apportées à l’image sont définitivement enregistrées.
Rubriques connexes
• Modification d’images dans Dreamweaver, page 318
• Recadrage d’une image, page 324
• Ajustement de la luminosité et du contraste d’une image, page 325
Création d’une image survolée
Vous pouvez insérer des images survolées dans votre page. Une image survolée est une image qui,
lorsqu’elle est visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus
d’elle.
Avant de commencer, sélectionnez une ou plusieurs paires d’images. Une image survolée est en
fait composée de deux images : l’image principale (affichée au chargement de la page) et l’image
secondaire (qui apparaît lorsque le pointeur est placé au-dessus de l’image principale). Les deux
images utilisées doivent avoir les mêmes dimensions ; si ce n’est pas le cas, Dreamweaver
redimensionne automatiquement la seconde image en fonction de la taille de la première.
Les images survolées sont automatiquement définies pour répondre à l’événement onMouseOver.
Pour plus d’informations sur la configuration d’une image pour répondre à un événement
différent (par exemple, un clic de souris) ou sur la notification de l’image affichée par une image
survolée, voir Permuter une image, page 409.
Pour créer une image survolée :
1 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous voulez insérer
l’image survolée.
2 Insérez l’image survolée à l’aide de l’une des méthodes suivantes :
■ Dans la barre Insérer, sélectionnez Commun puis cliquez sur l’icône Image survolée.
■ Dans la barre Insérer, sélectionnez Commun puis faites glisser l’icône Image survolée vers
l’emplacement souhaité de la fenêtre du document.
■ Choisissez la commande Insertion > Images interactives > Image survolée.
La boîte de dialogue Insérer l’image survolée s’affiche.
326
Chapitre 14 : Insertion d’images
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
5 Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.
Il est impossible de voir l’effet d’une image survolée dans le mode Création.
6 Dans le navigateur, placez le pointeur au-dessus de l’image d’origine.
Cette image doit alors être remplacée par l’image survolée.
Rubriques connexes
• Insertion d’une barre de navigation, page 346
Utilisation d’un éditeur d’image externe
Dans Dreamweaver, vous pouvez ouvrir une image sélectionnée dans un éditeur d’image externe.
Lorsque vous revenez dans Dreamweaver après avoir enregistré le fichier d’image modifié, toutes
les modifications apportées à l’image sont visibles dans la fenêtre de document.
Vous pouvez définir Fireworks comme principal éditeur d’image. Pour plus d’informations, voir
Utilisation de Fireworks, page 355.
Pour lancer l’éditeur d’image externe, procédez de l’une des manières suivantes :
• Double-cliquez sur l’image à modifier.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
•
•
enfoncée (Macintosh) sur l’image à modifier, choisissez l’option Modifier avec > Parcourir et
sélectionnez un éditeur.
Sélectionnez l’image à modifier, puis cliquez sur Modifier dans l’inspecteur de propriétés.
Double-cliquez sur le fichier d’image dans le panneau Site pour lancer l’éditeur d’image
principal. Si vous n’avez pas indiqué d’éditeur d’image, Dreamweaver exécute l’éditeur par
défaut de ce type de fichier.
Remarque : Lorsque vous ouvrez directement une image à partir du panneau Site, les
fonctionnalités d’intégration de Fireworks sont inopérantes ; Fireworks n’ouvre pas le fichier
original PNG. Pour utiliser ces fonctionnalités d’intégration de Fireworks, ouvrez les images à
partir de la fenêtre de document.
Si l’image mise à jour n’apparaît pas une fois de retour dans la fenêtre Dreamweaver, sélectionnez
l’image et cliquez sur le bouton Actualiser dans l’inspecteur de propriétés.
Rubriques connexes
• Spécification de l’éditeur à lancer depuis Dreamweaver, page 372
Application decomportements aux images
Vous pouvez appliquer l’un des comportements disponibles à une image ou à la zone réactive
d’une image. Lorsque vous appliquez un comportement à une zone réactive, Dreamweaver insère
le code source HTML nécessaire dans la balise area. Il existe trois comportements qui
s’appliquent spécifiquement aux images : Précharger les images, Permuter une image et Restaurer
l’interversion d’images.
Application decomportements aux images
327
Précharger les images place dans la mémoire cache du navigateur les images qui ne sont pas
immédiatement affichées lors du chargement de la page (par exemple, les images de substitution
appelées par un comportement, un calque ou une fonction en JavaScript). Cela évite à l’utilisateur
d’attendre que ces images soient chargées, lorsqu’un événement déclenche leur apparition (voir
Pré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éer des substitutions de boutons et autres effets sur des images (y
compris la substitution de plusieurs images à la fois) (voir Permuter une image, page 409).
rétablit la dernière interversion d’images à son état d’origine.
Cette action est automatiquement ajoutée par défaut lorsque vous associez l’action Permuter une
image à 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 également utiliser les comportements pour créer des structures de navigation
sophistiqué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éfini un site Macromedia Dreamweaver MX 2004 dans lequel stocker les
documents de votre site Web et que vous avez créé des pages HTML, il vous reste à établir des
connexions entre vos documents et d’autres types de documents.
Macromedia Dreamweaver MX 2004 propose plusieurs méthodes pour créer des liens hypertextes
vers des documents, des images, des fichiers multimédias ou des logiciels pouvant être téléchargés.
Vous pouvez établir des liens vers n’importe quel texte ou n’importe quelle image d’un document,
même s’ils se trouvent dans un en-tête, une liste, un tableau, un calque ou un cadre.
Pour obtenir une représentation visuelle de la manière dont vos fichiers sont liés, utilisez la carte
du site. Dans la carte du site, vous pouvez ajouter de nouveaux documents à votre site, créer et
supprimer des liens entre des documents et vérifier les liens entre des fichiers interdépendants.
Pour plus d’informations, voir Affichage d’une carte de site, page 98.
Il existe différentes méthodes de création et de gestion de liens. Certains concepteurs de pages
Web préfèrent créer des liens vers des pages ou des fichiers qui n’existent pas encore, alors que
d’autres préfèrent créer d’abord tous les fichiers et pages, puis ajouter les liens. Une autre méthode
de gestion des liens consiste à créer des pages de type « espace réservé » qui remplacent le fichier
final et permettent d’ajouter des liens rapidement et de les vérifier avant de terminer toutes les
pages. Pour plus d’informations sur la vérification de liens, voir Recherche de liens brisés, externes et
orphelins, page 350.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
Description des emplacements et chemins d’accès des documents, page 330
Menus de reroutage, page 332
Barres de navigation, page 333
A propos des cartes graphiques, page 334
Cré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 à des liens, page 349
Recherche de liens brisés, externes et orphelins, page 350
329
• Correction des liens brisés, page 351
• Ouverture des documents liés dans Dreamweaver, page 352
Description des emplacements et chemins d’accès des
documents
Pour créer des liens, il est indispensable de comprendre le chemin d’accès qui s’établit entre le
document à partir duquel vous établissez un lien et le document pointé par ce lien.
Chaque page Web possède une adresse unique, appelé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éez un lien local (entre deux documents du même site), vous n’avez en
général pas besoin de spécifier l’URL complète du document vers lequel vous créez le lien ; il est
préférable d’indiquer un chemin relatif, à partir du document actif ou de la racine du site.
Il existe trois types de chemins d’accè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 à la racine du site (par exemple /support/dreamweaver/contents.html). Pour
plus d’informations, voir Chemins relatifs à la racine du site, page 332.
Dreamweaver vous permet de choisir aisément le type de chemin à créer pour vos liens (voir Liens
entre fichiers et documents, page 334).
Remarque : Il est préférable d’utiliser le type de lien de votre choix, qu’il soit relatif au site ou au
document. L’exploration des liens, contrairement à la saisie des chemins, garantit que vous entrez
toujours le chemin correct.
chemins absolus
Les chemins absolus indiquent le chemin complet du document lié, y compris le protocole à
utiliser (en géné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éez un lien vers un fichier situé en dehors du
site courant. Vous pouvez également utiliser des liens de chemins absolus pour les liens locaux
(vers des documents sur le même site), mais cette approche est déconseillée. Si vous dé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é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é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être de document. Ainsi, vous devez prévisualiser le
document dans un navigateur pour voir l’image. Si possible, utilisez des chemins relatifs au document
ou à 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ésentent le type de chemin le plus adapté aux liens locaux
dans la plupart des sites Web. Ils sont particulièrement utiles lorsque le document actif et le
document pointé par le lien se trouvent dans le même dossier et le resteront vraisemblablement.
Vous pouvez également utiliser un chemin relatif au document pour pointer sur un document
situé dans un autre dossier, en indiquant le chemin entre le document actif et le document lié, au
sein de la hiérarchie de dossiers.
Indiquer un chemin relatif au document consiste tout simplement à laisser de côté la partie de
l’URL absolue qui est identique pour les deux documents, en n’indiquant que la partie du chemin
qui diffère.
Par exemple, supposons que la structure de votre site soit la suivante :
Vous pouvez créer des liens du fichier contents.html vers d’autres fichiers comme suit :
• Pour établir un lien depuis contents.html vers hours.html (ces deux fichiers sont dans le même
dossier), le nom de fichier est le chemin relatif : hours.html.
• Pour établir un lien vers tips.html (qui se trouve dans le sous-dossier « ressources »), utilisez le
•
chemin relatif resources/tips.html.
Chaque barre oblique (/) signifie « descendre d’un niveau dans la hiérarchie du dossier ».
Pour é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ès des documents
331
•
Chaque séquence de deux points suivis d’une barre oblique (../) signifie « monter d’un niveau
dans la hiérarchie du dossier ».
Pour é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équence ../ fait remonter au dossier parent, puis la chaîne products/ fait redescendre dans le
sous-dossier products.
Lorsque vous déplacez un groupe de fichiers sous la forme d’un groupe (par exemple, lorsque vous
déplacez un dossier entier, afin que tous les fichiers au sein de ce dossier conservent les mêmes
chemins relatifs entre eux), il n’est pas nécessaire de mettre à jour les liens relatifs au document
entre ces fichiers. Toutefois, si vous déplacez individuellement un fichier qui contient des liens
relatifs au document, ou un fichier sur lequel pointe un lien relatif à partir d’un autre document,
il est nécessaire de mettre ces liens à jour (si vous déplacez ou renommez des fichiers dans le
panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés).
Chemins relatifs à la racine du site
Les chemins relatifs à la racine du site représentent le chemin d’accès à un document à partir du
dossier racine du site. Ces types de chemins peuvent être utiles si vous travaillez sur un grand site
Web qui utilise plusieurs serveurs ou un seul serveur qui est l’hôte de plusieurs sites différents.
Toutefois, si vous n’êtes pas familier avec ce type de chemin, adoptez plutôt les chemins relatifs au
document.
Un chemin relatif à la racine commence par une barre oblique, qui représente le dossier racine du
site. Par exemple, /support/tips.html est le chemin relatif à la racine d’un fichier (tips.html) situé
dans le sous-dossier « support » de la racine du site.
Un chemin relatif à la racine représente souvent le meilleur moyen d’indiquer les liens dans un site
Web sur lequel il vous faudra fréquemment déplacer des fichiers HTML d’un dossier à un autre.
Lorsque vous déplacez un document qui contient des liens relatifs à la racine, il n’est pas nécessaire
de modifier les liens ; par exemple, si vos fichiers HTML utilisent des liens relatifs à la racine pour
les fichiers dépendants (les images en particulier), les liens des fichiers dépendants restent valides
si vous déplacez les fichiers HTML.
Toutefois, si vous déplacez ou renommez les documents qui sont pointés par des liens relatifs à la
racine, il sera nécessaire de mettre ces liens à jour, même si les chemins relatifs de ces documents
entre eux n’ont pas changé. Par exemple, si vous déplacez un dossier, tous les chemins relatifs à la
racine des fichiers qu’il contient doivent être mis à jour (si vous déplacez ou renommez des fichiers
dans le panneau Fichiers, Dreamweaver met automatiquement à jour tous les liens concernés).
Menus de reroutage
Un menu de reroutage est un menu déroulant dans un document, visible pour tous les visiteurs
du site et répertoriant les options qui lient vers des documents ou fichiers. Vous pouvez créer des
liens vers des documents de votre site Web ou d’un autre site, des liens de messagerie électronique,
des liens vers des images ou vers tout type de fichier pouvant être ouvert dans un navigateur.
Un menu de reroutage peut comporter trois composants de base :
• (Facultatif ) Une invite de sélection au sein du menu, par exemple une description de catégorie
pour les éléments du menu ou des instructions, du type « Faites votre choix ».
• (Obligatoire) Une liste d’éléments de menu de reroutage : l’utilisateur choisit une option et le
document ou le fichier lié 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ée d’une image ou d’une série d’images qui changent en
fonction des actions de l’utilisateur. Les barres de navigation constituent souvent une méthode
simple pour se déplacer entre des pages et des fichiers sur un site.
Un élément de barre de navigation peut avoir quatre états :
• Haut : l’image qui s’affiche lorsque l’utilisateur n’a pas encore cliqué ou interagi avec l’élément.
Par exemple, l’élément dans cet état est tel qu’il n’est pas cliqué.
• Survolée : l’image qui s’affiche lorsque le pointeur de la souris est déplacé au-dessus de l’image
Haut. L’aspect de l’élément change (par exemple, il peut paraître plus clair) pour spécifier à
l’utilisateur qu’il peut interagir avec celui-ci.
• Bas : l’image qui s’affiche une fois l’élément cliqué.
•
Par exemple, lorsqu’un utilisateur clique sur un élément, une nouvelle page est chargée et la
barre de navigation est toujours affichée, mais l’élément cliqué est assombri pour indiquer qu’il
est sélectionné.
Image Au-dessus lorsque Abaissée : l’image qui s’affiche lorsque le pointeur est placé au-dessus
de l’image Bas une fois l’élément cliqué.
Par exemple, l’élément peut apparaître estompé ou grisé. Vous pouvez utiliser cet état comme
indice visuel pour indiquer aux utilisateurs qu’il n’est pas possible de cliquer à nouveau sur cet
élément lorsqu’ils se trouvent dans cette section du site.
Vous n’avez pas à inclure des images de barre de navigation pour les quatre états. Par exemple,
vous pouvez uniquement définir les é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 été divisée en régions, ou zones réactives. Lorsque vous
cliquez sur une zone réactive, une action est exécuté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éparé. Lorsque l’utilisateur clique sur la zone réactive d’une
image, l’URL associée est directement envoyée au serveur. Ceci rend les cartes graphiques sur le
client plus rapides que leurs équivalents sur le serveur, car celui-ci n’a pas à interpréter les
coordonnées du point sur lequel l’utilisateur a cliqué. Les cartes graphiques sur le client sont prises
en charge par Netscape Navigator à 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éférences aux cartes graphiques sur le serveur, dans les
documents existants. Vous pouvez utiliser les cartes graphiques côté client et côté serveur dans le
même document. Les navigateurs qui prennent en charge les deux types de cartes donnent la
priorité aux cartes graphiques sur le client. Pour inclure une carte graphique sur le serveur dans un
document, vous devez écrire le code HTML approprié.
Rubriques connexes
• Utilisation de cartes graphiques, page 347
Création de liens
Vous pouvez cré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ée, qui permet de sauter à un emplacement spécifique au sein
•
•
d’un document (voir Lien vers un emplacement spécifique au sein d’un document, page 338).
Un lien de courriel, qui crée un courriel vierge avec l’adresse du destinataire déjà indiquée (voir
Création d’un lien de messagerie électronique, page 339).
Des liens nuls et de script, qui permettent d’affecter des comportements à un objet ou de créer
un lien qui exécute un code JavaScript (voir Création de liens nuls et de liens de script, page 340).
Remarque : Avant de créer des liens, assurez-vous de bien comprendre le fonctionnement des
chemins relatifs au document, des chemins relatifs à la racine du site et des chemins absolus (voir
Description des emplacements et chemins d’accès des documents, page 330).
Liens entre fichiers et documents
Utilisez l’inspecteur de propriétés et l’icône Pointer vers un fichier pour créer des liens à 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éer des liens, voir Modification de liens dans la carte du
site, page 342.
Pour utiliser des chemins relatifs à la racine, définissez un dossier local dans Dreamweaver en
choisissant un dossier racine local qui servira d’équivalent à la racine des documents sur le serveur
(voir Configuration d’un nouveau site Dreamweaver, page 66). Dreamweaver utilise ce dossier pour
déterminer les chemins relatifs à la racine pointant vers des fichiers.
334
Chapitre 15 : Liens et navigation
Remarque : Il est conseillé de toujours enregistrer un nouveau fichier avant de créer un chemin relatif
au document, car ce dernier n’est pas valide sans point de départ bien défini. Si vous créez un chemin
relatif au document avant d’enregistrer le fichier, Dreamweaver utilise provisoirement un chemin
absolu commençant par « file:// » jusqu’à ce que le fichier soit enregistré. Dreamweaver convertit
alors le chemin file:// en chemin relatif.
Liens vers des documents à l’aide de l’inspecteur de propriétés
Vous pouvez utiliser l’icône de dossier Inspecteur de propriétés ou la zone Lien pour créer des
liens à partir d’une image, un objet, du texte ou tout autre document ou fichier.
Pour créer un lien vers des documents en utilisant l’icône du dossier Inspecteur de
propriétés ou la zone de texte Lien :
1 Sélectionnez le texte ou une image dans la fenêtre de création du document.
2 Ouvrez l’inspecteur de propriétés (Fenêtre > Propriétés) et procédez de l’une des manières
suivantes :
■
Cliquez sur l’icône représentant un dossier située à droite de la zone Lien pour rechercher et
sélectionner un fichier.
Le chemin d’accès du document pointé par le lien s’affiche dans la zone URL. Utilisez le
menu déroulant Relatif à dans la boîte de dialogue Sélectionner fichier HTML pour
spécifier si le chemin est relatif à la racine ou au document, puis cliquez sur Sélectionner.
Remarque : Lorsque vous entrez le type de chemin dans la zone de texte Relatif à,
Dreamweaver utilise votre choix comme type de chemin par défaut pour tous les liens ultérieurs,
jusqu’à ce que vous modifiez à nouveau le type de chemin.
Tapez le chemin et le nom de fichier du document dans la zone Lien.
Pour créer un lien vers un document de votre site, indiquez un chemin relatif au document
ou à la racine. Pour créer un lien vers un document situé 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 été créé.
Pour les chemins relatifs au document, il suffit tout simplement de laisser de côté la partie de
l’URL absolue qui est identique pour le document actif et le document lié. Si le fichier de
destination du lien se trouve dans le mê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écéder le nom de
fichier par ../ (« .. » revient à demander de remonter d’un niveau dans la hiérarchie des
dossiers).
3 Dans le menu déroulant Cible, sélectionnez un emplacement dans lequel ouvrir le document.
Pour que le document lié s’affiche ailleurs que dans la fenêtre ou le cadre en cours, sélectionnez
une option dans le menu déroulant Cible de l’inspecteur de propriétés :
■ _blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.
■ _parent charge le document lié dans le cadre parent ou dans la fenêtre parente du cadre
contenant le lien. Si le cadre contenant le lien n’est pas imbriqué, le document lié est chargé
dans la fenêtre de base du navigateur.
■
Création de liens
335
■
■
charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s’agit
de la cible par défaut, de sorte qu’il est le plus souvent inutile de la spécifier.
_top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les
cadres.
_self
Conseil : Si tous les liens de la page doivent être définis sur la même cible, vous pouvez spécifier
celle-ci une fois pour toutes en choisissant la commande Insertion > Balise Head > Base et en
sélectionnant les informations cible. Pour plus d’informations sur le ciblage de cadres, voir
Définition des contenus de cadre avec liens, page 222.
Lien vers des documents à l’aide de l’icône du pointeur
L’icône du pointeur vous permet de créer des liens à partir d’une image, d’un objet ou d’un texte
vers un autre document ou fichier.
Pour créer un lien vers des documents en utilisant l’icône du pointeur vers un fichier :
1 Sélectionnez le texte ou une image dans la fenêtre de création du document.
2 Faites glisser l’icône du pointeur à droite de la zone Lien de l’inspecteur de propriété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 à jour pour indiquer le lien.
Remarque : Vous pouvez créer un lien vers un document ouvert à condition que vos documents
ne soient pas agrandis dans la fenêtre de document. Lorsque vous pointez vers un document
ouvert, celui-ci passe au premier plan de votre écran pendant que vous effectuez votre sélection.
3 Relâchez le bouton de la souris.
Pour créer un lien à partir d’une sélection dans un document ouvert :
1 Sélectionnez le texte dans la fenêtre de document.
2 Faites glisser la sélection, en maintenant la touche Maj enfoncée.
L’icône Pointer vers un fichier s’affiche lorsque vous commencez à 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éer un lien vers un document ouvert à condition que vos documents
ne soient pas agrandis dans la fenêtre de document. Lorsque vous pointez vers un document
ouvert, celui-ci passe au premier plan de votre écran pendant que vous effectuez votre sélection.
4 Relâchez le bouton de la souris.
Lien vers des documents à l’aide de la carte graphique
Vous pouvez créer des liens à partir de la carte graphique. Les liens créés sont placés en dessous des
fichiers HTML sélectionnés, ce qui vous permet de créer rapidement des liens au sein d’un site.
Pour créer un lien vers des documents en utilisant la carte du site et l’icô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ône Carte du site et en choisissant Carte et fichiers.
2 Sélectionnez un fichier HTML dans la carte du site.
L’icône Pointer vers un fichier s’affiche à côté du fichier.
336
Chapitre 15 : Liens et navigation
3 Faites glisser l’icô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âchez le bouton de la souris.
Un lien hypertexte portant le nom du fichier lié est placé au bas du fichier HTML sélectionné.
Cette méthode fonctionne correctement lorsque vous construisez votre site et que vous
souhaitez créer rapidement des liens au niveau du site.
Pour lier des documents dans la carte du site, procédez de l’une des manières suivantes :
• Faites glisser une page depuis l’Explorateur de Windows ou le Sélecteur du Macintosh vers une
page dans la carte du site.
Remarque : Vérifiez que le panneau Fichiers est ancré, puis cliquez sur la flèche Etendre.
Sélectionnez Carte et fichiers en maintenant le bouton Carte du site enfoncé.
• Sélectionnez une page HTML dans la carte du site, puis choisissez Site > Lier au fichier existant
•
(Windows) ou Site > Affichage de la carte du site > Lier au fichier existant (Macintosh) ou
choisissez Lier au fichier existant dans le menu contextuel.
Sélectionnez une page HTML dans la carte du plan, puis choisissez Site > Lier au nouveau
fichier (Windows) ou Site > Affichage de la carte du site > 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é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 à l’endroit du document où vous souhaitez que l’hyperlien apparaisse.
2 Procédez de l’une des manières suivantes pour afficher la boîte de dialogue Hyperlien :
Choisissez Insertion > Hyperlien.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Hyperlien.
La boîte de dialogue Hyperlien apparaît.
■
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Rubriques connexes
• Modification de liens dans la carte du site, page 342
Création de liens
337
• Création d’un lien de messagerie électronique, page 339
• Création de liens nuls et de liens de script, page 340
Lien vers un emplacement spécifique au sein d’un document
Vous pouvez utiliser l’inspecteur de propriétés pour établir un lien vers une section donnée d’un
document en créant au préalable des ancres nommées. Les ancres nommées permettent de définir
des marqueurs dans un document et sont souvent placées au niveau d’une rubrique spécifique ou
en haut d’un document. Vous pouvez ensuite créer des liens vers ces ancres nommées, qui
amènent rapidement le visiteur à la position spécifiée.
La création d’un lien vers une ancre nommée s’effectue en deux étapes : il faut d’abord créer
l’ancre nommée, puis créer un lien pointant sur elle.
Pour créer une ancre nommée :
1 Dans la fenêtre de document, en mode Création, placez le curseur à l’endroit où insérer l’ancre
nommée.
2 Procédez de l’une des manières suivantes :
■ Choisissez Insertion > Ancre nommée.
■ Appuyez sur Ctrl+A (Windows) ou Commande+Option+A (Macintosh).
■ Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Ancre nommée.
La boîte de dialogue Ancre nommée apparaît.
3 Dans la zone de texte Ancre nommée, entrez le nom de l’ancre puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Le marqueur de l’ancre apparaît au niveau du point d’insertion.
Remarque : Si vous ne voyez pas le marqueur de l’ancre, choisissez Affichage > Assistances
visuelles > Eléments invisibles.
Pour créer un lien vers une ancre nommée :
1 Dans la fenêtre de document en mode Création, sélectionnez le texte ou l’image à partir desquels
créer le lien.
2 Dans la zone Lien de l’inspecteur de propriétés, tapez le signe dièse (#) et le nom de l’ancre.
Exemple :
■ Pour créer un lien vers une ancre du document actif nommée «début», tapez #début.
■ Pour créer un lien vers une ancre nommée «début» dans un autre document figurant dans le
même dossier, tapez NomDuFichier.html#début.
Remarque : La casse (majuscules/minuscules) est importante dans les noms d’ancre.
Pour créer un lien vers une ancre nommée à l’aide de la méthode Pointer vers un fichier :
1 Ouvrez le document contenant l’ancre nommée souhaitée.
338
Chapitre 15 : Liens et navigation
Remarque : Choisissez Affichage > Assistances visuelles > Eléments invisibles pour faire
apparaître l’ancre, le cas échéant.
2 Dans la fenêtre de création du document, sélectionnez le texte ou l’image à partir desquels créer
le lien (s’il s’agit d’un autre document ouvert, vous devez basculer sur celui-ci).
3 Procédez de l’une des manières suivantes :
■ Cliquez sur l ’icône du pointeur à droite de la zone Lien de l’inspecteur de propriétés et
faites-la glisser sur l’ancre vers laquelle vous souhaitez créer un lien, dans le même document
ou dans tout autre document ouvert.
■ En maintenant la touche Maj enfoncée, dans la fenêtre de document, faites glisser l’image
ou le texte sélectionné sur l’ancre vers laquelle vous souhaitez créer un lien, dans le même
document ou dans tout autre document ouvert.
Rubriques connexes
• Liens entre fichiers et documents, page 334
• Création de liens nuls et de liens de script, page 340
Création d’un lien de messagerie électronique
Un lien de message électronique ouvre une nouvelle fenêtre de message (dans le programme de
messagerie associé au navigateur de l’utilisateur) lorsque l’utilisateur clique dessus. La zone A : de
la fenêtre du courriel est automatiquement complétée par l’adresse indiquée dans le lien.
Pour créer un lien de courriel à l’aide de la commande Insertion - Lien de messagerie :
1 Dans la fenêtre de document, placez le curseur à l’endroit où afficher le lien de message
électronique ou sélectionnez le texte ou l’image qui doit représenter ce lien.
2 Procédez de l’une des manières suivantes pour insérer le lien :
■ Choisissez Insertion > Lien de messagerie.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Lien de messagerie.
La boîte de dialogue Lien de messagerie apparaît.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Pour créer un lien de messagerie électronique à l’aide de l’inspecteur de propriétés :
1 Sélectionnez le texte ou une image dans la fenêtre de création du document.
2 Dans la zone Lien de l’inspecteur de propriétés, tapez mailto: suivi d’une adresse électronique.
N’insérez pas d’espaces entre le signe deux points et l’adresse électronique. Par exemple, tapez
mailto:jlydon@macromedia.com.
Création de liens
339
Rubriques connexes
• Lien vers un emplacement spécifique au sein d’un document, page 338
• Lien vers un emplacement spécifique au sein d’un document, page 338
Création de liens nuls et de liens de script
Les types de lien les plus courants sont ceux qui renvoient à des documents et à des ancres
nommées (voir Liens entre fichiers et documents, page 334 et Lien vers un emplacement spécifique au
sein d’un document, page 338), mais il en existe d’autres.
est un lien non désigné. Utilisez des liens nuls pour attacher des comportements à des
objets ou du texte sur une page. Une fois un lien nul créé, vous pouvez lui attacher un
comportement pour intervertir une image ou pour afficher un calque lorsque le curseur est
déplacé au-dessus du lien. Pour plus d’informations sur l’association de comportements à des
objets, voir Application d’un comportement, page 385.
Un lien nul
Les liens de script exécutent un code JavaScript ou appellent une fonction JavaScript et
permettent de fournir aux utilisateurs des informations supplémentaires sur un élément sans
quitter la page en cours. Les liens de scripts permettent également d’exécuter des calculs, des
validations de formulaires et autres tâches de traitement lorsqu’un visiteur clique sur un élément
spécifique.
Pour créer un lien nul :
1 Sélectionnez du texte, un objet ou une image dans la fenêtre de création du document.
2 Dans l’inspecteur de propriétés, tapez javascript:; (le mot javascript suivi par deux points puis
par un point-virgule) dans la zone de texte Lien.
Pour créer un lien de script :
1 Sélectionnez du texte, un objet ou une image dans la fenêtre de création du document.
2 Dans la zone Lien de l’inspecteur de propriétés, tapez javascript: suivi du code JavaScript ou
d’un appel de fonction JavaScript.
Par exemple, la saisie de javascript:alert(’Ce lien amène à l’index’) dans la zone Lien crée un
lien qui, lorsque l’on clique dessus, affiche une zone d’alerte JavaScript avec le message « Ce
lien amène à l’index. ».
Remarque : Le code JavaScript étant inséré entre guillemets (en tant que valeur de l’attribut
HREF), vous devez utiliser des guillemets simples (apostrophes) dans le code du script ou désigner
les guillemets éventuels comme faisant partie du code en les faisant précéder d’une barre oblique
inversée (par exemple, \"Ce lien amène à l’index\").
Rubriques connexes
• Lien vers un emplacement spécifique au sein d’un document, page 338
• Création d’un lien de messagerie électronique, page 339
Gestion des liens
Pour éviter tout lien brisé dans votre site, vous pouvez activer la gestion de liens afin que
Dreamweaver mette automatiquement tous les liens à jour lorsque vous apportez une
modification. Vous pouvez également utiliser une représentation visuelle de votre site pour
modifier des liens ou mettre à jour tous les liens dans un fichier donné avec une seule
modification.
340
Chapitre 15 : Liens et navigation
Mise à jour automatique de liens
Dreamweaver peut mettre à jour les liens vers un document et à partir de ce dernier lorsque vous
le déplacez ou renommez au sein d’un site local. Cette fonction fonctionne de façon optimale
lorsqu’un site tout entier (ou une section entière de celui-ci) est stocké 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élérer le processus de mise à jour, Dreamweaver peut créer un fichier cache dans lequel il
conservera la liste de tous les liens du site local. Le fichier cache est mis à 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 > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
La boîte de dialogue Préférences s’affiche.
2 Sélectionnez la catégorie Général dans la liste de gauche.
Les options Préférences générales apparaissent.
3 Dans la section Options de document, sélectionnez Toujours ou Invite dans le menu déroulant
Mettre à jour les liens lors de la suppression de fichiers.
Si vous choisissez Toujours, Dreamweaver met automatiquement à jour les liens vers un
document et à partir de ce dernier lorsque vous le déplacez ou le renommez (pour plus
d’informations sur la marche à 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îte de dialogue qui répertorie
tous les fichiers affectés par le changement. Cliquez sur Mettre à jour pour mettre à jour les
liens de ces fichiers, ou sur Ne pas mettre à jour pour laisser les fichiers intacts.
4 Cliquez sur OK.
Pour créer un fichier cache pour votre site :
1 Choisissez Site > Gérer les sites.
La boîte de dialogue Modifier les sites s’affiche.
2 Sélectionnez un site, puis cliquez sur Modifier.
Gestion des liens
341
La boîte de dialogue Définition du site s’ouvre.
3 Cliquez sur l’onglet Avancé pour faire apparaître la catégorie Avancé de la boîte de dialogue
Définition du site.
4 Sélectionnez la catégorie Infos locales dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options des Infos locales.
5 Dans la catégorie Infos locales, sélectionnez l’option Activer le cache.
Après avoir lancé Dreamweaver, la première fois que vous modifiez ou supprimez des liens vers
des fichiers de votre dossier local, Dreamweaver vous invite à charger le cache. Si vous cliquez sur
Oui, le cache se charge et Dreamweaver met à jour tous les liens vers le fichier que vous venez de
modifier. Si vous cliquez sur le bouton Non, la modification est consignée dans le cache, mais
celui-ci ne se charge pas et Dreamweaver ne met pas les liens à jour.
Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes ; l’essentiel de
ce temps est utilisé pour comparer l’heure et la date des fichiers qui se trouvent sur le site local à
celles enregistrées dans le cache, afin de voir si le cache est périmé. Si vous n’avez pas modifié de
fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d’arrêt en toute sécurité lorsque
le bouton apparaît.
Pour recréer le cache pour votre site :
• Dans le panneau Fichiers, sélectionnez Site > Avancé > Recré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 à jour la carte du site pour indiquer les
modifications apportées au site.
Pour changer un lien :
1 Dans la carte du site, sélectionnez une page dont vous souhaitez changer le lien (de sorte que le
document qui possède un lien vers cette page pointe vers une autre page), puis procédez de l’une
des manières suivantes :
■ Choisissez Site > Modifier le lien (Windows) ou Site > Affichage de la carte du site >
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ôle
enfoncé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électionnez la page dans la carte du site.
2 Procédez de l’une des manières suivantes :
■
Choisissez Site > Supprimer le lien (Windows) ou Site > Affichage de la carte du site >
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é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électionnez un fichier dans la carte du site.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Site > Ouvrir source du lien (Windows) ou Site > Affichage de la carte du site >
Ouvrir source du lien (Macintosh).
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh) et choisissez Ouvrir source du lien dans le menu contextuel.
L’inspecteur de propriétés et le fichier source contenant le lien s’ouvrent dans la fenê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 à jour automatique des liens par Dreamweaver à chaque fois que vous déplacez ou
renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de
messagerie électronique, ftp, nuls et de scripts) pour qu’ils pointent sur un autre chemin.
Vous pouvez utiliser cette option à tout moment (par exemple, il se peut que les mots « au menu
cette semaine » soient liés à /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èrement
utile lorsque vous désirez supprimer un fichier vers lequel pointent des liens dans d’autres fichiers.
Pour changer un lien à l’échelle de tout le site :
1 Sélectionnez un fichier dans l’affichage local du panneau Fichiers.
Remarque : Si vous changez un lien de messagerie électronique, ftp, nul ou de script, vous n’avez
pas besoin de sélectionner de fichier.
2 Choisissez Site > Modifier le lien au niveau du site.
La boîte de dialogue Modifier le lien au niveau du site apparaît.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Gestion des liens
343
Dreamweaver met à jour tous les documents qui pointent vers le fichier sélectionné, en les
faisant pointer vers le nouveau fichier suivant le format de chemin d’accès existant (par
exemple, si l’ancien chemin était relatif au document, le nouveau l’est également). Le type de
lien (relatif au document ou à la racine) n’a pas d’importance. Dreamweaver met
automatiquement le lien à jour.
Lorsqu’un lien a été changé au niveau de tout le site, le fichier sélectionné devient orphelin (plus
aucun fichier du disque local ne pointe vers lui). Vous pouvez le supprimer en toute sécurité sans
risque d’alté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 été modifié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électionnant un élément de la liste, l’utilisateur est redirigé vers l’URL
sélectionnée. Ces menus sont insérés à l’aide de l’objet de formulaire Menu de reroutage.
Pour insérer un menu de reroutage :
1 Ouvrez un document, puis placez le curseur dans la fenêtre de document.
2 Procédez de l’une des manières suivantes :
■
■
Choisissez Insertion > Formulaire > Menu de reroutage.
Cliquez sur le bouton Menu de reroutage de la catégorie Formulaire de la barre Insérer.
La boîte de dialogue Insérer un Menu de reroutage apparaît.
3 Complétez les options de la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Le menu de reroutage apparaît dans votre document.
Rubriques connexes
• Menus de reroutage, page 332
• Dépannage des menus de reroutage, page 345
344
Chapitre 15 : Liens et navigation
Modification d’éléments de menu de reroutage
Pour modifier des éléments de menu de reroutage, vous pouvez changer l’ordre dans lequel les
éléments apparaissent dans la liste, modifier le fichier vers lequel pointe un élément, et ajouter,
supprimer ou renommer un élément.
Pour modifier l’emplacement d’ouverture d’un fichier lié ou pour ajouter ou modifier une invite
de sélection de menu, vous devez utiliser le panneau Comportements (voir Menu de reroutage,
page 396).
Pour modifier un menu de reroutage à l’aide de l’inspecteur de propriétés :
1 Choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur de propriétés, s’il n’est pas déjà ouvert.
2 Dans la fenêtre de création du document, cliquez sur l’objet Menu de reroutage pour le
sélectionner.
L’icône Liste / Menu apparaît dans l’inspecteur de propriétés.
3 Dans l’inspecteur de propriétés, cliquez sur le bouton Valeurs de la liste.
La boîte de dialogue Valeurs de la liste s’affiche.
4 Apportez les modifications requises aux éléments du menu, puis cliquez sur OK.
Rubriques connexes
• Menus de reroutage, page 332
• Insertion de menus de reroutage, page 344
Dépannage des menus de reroutage
Lorsqu’un élément de menu a été sélectionné, il n’est plus possible de le sélectionner à nouveau si
le visiteur revient à cette page ou si la zone Ouvrir les URL dans pointe sur un cadre. Il existe deux
méthodes pour contourner ce problème :
• Utiliser une invite de sélection au sein du menu, par exemple une catégorie ou une instruction,
•
du type « Faites votre choix ». Une invite de sélection au sein du menu est resélectionnée après
chaque sélection.
Utiliser un bouton Aller, qui permet à l’utilisateur de visiter à nouveau le lien déjà sélectionné.
Remarque : Dans la boîte de dialogue Insérer menu de reroutage, vous ne devez sélectionner qu’une
option pour chaque menu de reroutage, car elles s’appliquent à la totalité 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’éléments de menu de reroutage, page 345
Utilisation des barres de navigation
Une barre de navigation est composée d’une image ou d’une série d’images qui changent en
fonction des actions de l’utilisateur.
Avant d’utiliser la commande Insérer une barre de navigation, créez un ensemble d’images pour
les états d’affichage de chaque élément de navigation (il peut être utile d’imaginer un élément de
barre de navigation en tant que bouton car, lorsque celui-ci est cliqué, il amène l’utilisateur à une
autre page).
Après avoir créé une barre de navigation pour un document, vous pouvez lui ajouter des images
ou en supprimer à 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 élément, de sélectionner un autre cadre ou une autre fenêtre cible pour
l’ouverture de ce fichier et de réorganiser la position des images.
Rubriques connexes
• Barres de navigation, page 333
Insertion d’une barre de navigation
Lorsque vous insérez une barre de navigation, vous nommez ses éléments et sélectionnez les
images à utiliser pour ces derniers.
Conseil : Vous pouvez cré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érents
états en fonction de la page en cours.
Pour créer une barre de navigation :
1 Procédez de l’une des manières suivantes :
Sélectionnez Insertion > Objets image > Barre de navigation.
■ Dans la catégorie Commun de la barre d’insertion, cliquez sur le menu Images et
sélectionnez le bouton Barre de navigation.
La boîte de dialogue Insérer une barre de navigation apparaît.
■
2 Complétez les options de la boîte de dialogue.
346
Chapitre 15 : Liens et navigation
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• Barres de navigation, page 333
Modification d’une barre de navigation
Après avoir créé une barre de navigation pour un document, vous pouvez lui ajouter ou en
supprimer des images à l’aide de l’option Modifier la barre de navigation.
Pour modifier une barre de navigation :
1 Sélectionnez la barre de navigation de la page active.
2 Choisissez Modifier > Barre de navigation.
La boîte de dialogue Modifier la barre de navigation apparaît.
3 Dans la liste des éléments de la barre de navigation, sélectionnez celui à modifier.
4 Apportez les modifications de votre choix.
Pour plus d’informations, cliquez sur le bouton Aide de la boî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 été divisée en régions, ou « zones réactives ». Lorsque
vous cliquez sur une zone réactive, une action est exécuté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érer une carte graphique sur le client, créez une zone réactive, puis définissez un lien qui
s’ouvre lorsqu’un utilisateur clique sur la zone réactive.
Remarque : Vous pouvez créer plusieurs zones réactives, mais elles font toutes partie de la même
carte graphique.
Pour créer une carte graphique sur le client :
1 Sélectionnez l’image dans la fenêtre de document.
2 Dans l’inspecteur de propriétés, cliquez sur la flèche d’agrandissement située dans le coin
inférieur droit pour visualiser toutes les propriété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ême document, veillez à donner
à chaque carte un nom unique.
4 Pour définir les zones de la carte graphique, procédez de l’une des manières suivantes :
Sélectionnez l’outil Cercle et faites glisser le pointeur sur l’image pour créer une zone
réactive circulaire.
■ Sélectionnez l’outil Rectangle et faites glisser le pointeur sur l’image pour créer une zone
réactive rectangulaire.
■ Sélectionnez l’outil Polygone pour définir une zone réactive de forme irrégulière en cliquant
pour chaque point de segment de droite. Cliquez sur l’outil Flèche pour fermer la forme.
Après avoir créé la zone réactive, l’inspecteur de propriétés de cette zone apparaît.
5 Complétez l’inspecteur de propriétés de la zone réactive.
Pour plus d’informations, cliquez sur le bouton Aide de l’inspecteur de propriétés.
6 Une fois la définition de la carte de l’image terminée, cliquez sur une zone vierge du document
pour modifier l’inspecteur de propriétés.
■
Rubriques connexes
• A propos des cartes graphiques, page 334
Modification d’une carte graphique
Vous pouvez facilement modifier les zones réactives que vous créez dans une carte graphique.
Vous pouvez déplacer un groupe de zones réactives, redimensionner des zones réactives ou
déplacer une zone réactive vers l’avant ou l’arrière dans un calque.
Vous pouvez également copier une image contenant des zones réactives d’un document vers un
autre ou copier une ou plusieurs zones réactives d’une image et les coller vers une autre image. Les
zones réactives associées à l’image sont également copiées vers le nouveau document.
348
Chapitre 15 : Liens et navigation
Pour sélectionner plusieurs zones réactives dans une carte graphique :
1 Utilisez le pointeur de zone réactive pour sélectionner une zone réactive.
2 Procédez de l’une des manières suivantes :
■
■
En maintenant la touche Maj enfoncée, cliquez tour à tour sur les autres zones réactives à
sélectionner.
Appuyez sur les touches Ctrl+A (Windows) ou Commande+A (Macintosh) pour
sélectionner toutes les zones réactives.
Pour déplacer une zone réactive :
1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive à déplacer.
2 Procédez de l’une des manières suivantes :
■
■
■
Faites glisser la zone réactive vers une nouvelle zone.
Utilisez la touche Maj et une touche fléchée pour déplacer une zone réactive de 10 pixels
dans le sens sélectionné.
Utilisez les touches fléchées pour déplacer une zone réactive de 1 pixel dans le sens
sélectionné.
Pour redimensionner une zone réactive :
1 Utilisez le pointeur de zone réactive pour sélectionner la zone réactive à redimensionner.
2 Faites glisser une poignée de sélection de la zone ré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 à des liens
Vous pouvez associer un comportement à n’importe quel lien d’un document (voir Application
d’un comportement, page 385). Les comportements décrits ci-dessous peuvent être très intéressants
lorsque vous insérez des éléments liés dans vos documents.
Définir le texte de la barre d’état permet de spécifier le texte d’un message et de l’afficher dans la
barre d’état dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez
utiliser cette action pour décrire la destination d’un lien dans la barre d’état, au lieu d’afficher
l’URL associée (voir Définir le texte de la barre d’état, page 403).
Ouvrir la fenêtre Navigateur ouvre une URL dans une nouvelle fenêtre. Vous pouvez spécifier les
propriétés de la nouvelle fenê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être Navigateur,
page 397).
Menu de reroutage modifie un menu de reroutage. Vous pouvez modifier la liste du menu,
spécifier un fichier lié différent ou changer l’emplacement du navigateur dans lequel ouvrir le
document lié (voir Menu de reroutage, page 396).
Association de comportements JavaScript à des liens
349
Définir image barre de navigation modifie
le comportement d’une barre de navigation. Ce
comportement permet de modifier la faç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éfinir
image barre de navigation, page 400).
Recherche de liens brisés, externes et orphelins
Utilisez la fonction Vérifier les liens pour rechercher les éventuels liens brisés et les fichiers non
référencés (également appelé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érifie sont ceux qui pointent vers des documents au sein du
même site. Dreamweaver dresse une liste des liens externes qui apparaissent dans les documents
sélectionnés, mais ne les vérifie pas.
Pour vérifier les liens au sein du document actif :
1 Enregistrez le fichier dans un emplacement du site Dreamweaver local.
2 Choisissez Fichier > Vérifier la page > Vérifier les liens.
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de
panneaux Résultats).
3 Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant
Afficher pour afficher un autre rapport.
Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux
Résultats).
Conseil : Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site
entier.
4 Pour enregistrer le rapport, cliquez sur le bouton * dans le panneau Vé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érifier les liens à l’intérieur d’une partie du site local :
1 Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours.
2 Dans Affichage local, sélectionnez les fichiers ou les dossiers à vérifier.
3 Suivez l’une des procédures suivantes pour accéder aux options :
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle
(Macintosh) sur l’un des fichiers sélectionnés et cliquez sur Vérifier les liens > Fichiers/
Dossiers sélectionnés dans le menu contextuel.
■ Choisissez Fichier > Vérifier la page > Vérifier les liens.
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de
panneaux Résultats).
4 Dans le panneau Vérificateur de lien, sélectionnez Liens externes dans le menu déroulant
Afficher pour afficher un autre rapport.
Le rapport apparaît dans le panneau Vérificateur de lien (dans le groupe de panneaux
Résultats).
■
350
Chapitre 15 : Liens et navigation
Conseil : Vous pouvez vérifier les fichiers orphelins lorsque vous vérifiez les liens dans un site
entier (voir procédure suivante).
5 Pour enregistrer un rapport, cliquez sur le bouton Enregistrer rapport dans le panneau
Vérificateur de lien.
Pour vérifier les liens dans tout le site :
1 Dans le panneau Fichiers, choisissez un site dans le menu déroulant Sites en cours.
2 Choisissez Site > Vérifier tous les liens du site.
Le rapport Liens brisés apparaît dans le panneau Vérificateur de lien (dans le groupe de
panneaux Résultats).
3 Dans le panneau Vérificateur de lien, sélectionnez Liens externes ou Fichiers orphelins dans le
menu déroulant Afficher pour afficher un autre rapport.
Une liste des fichiers correspondant au type du rapport sélectionné s’affiche dans la boîte de
dialogue Vérificateur de lien.
Remarque : Si vous avez sélectionné Fichiers orphelins comme type de rapport, vous pouvez
directement supprimer des fichiers orphelins du panneau Vérificateur de lien en sé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érificateur de lien.
Correction des liens brisés
Une fois le rapport de liens exécuté, vous pouvez corriger les liens brisés et les références d’images
directement dans la boîte de dialogue Vérificateur de lien, ou ouvrir les fichiers de la liste et
réparer les liens dans l’inspecteur de propriétés.
Pour réparer des liens dans la boîte de dialogue Vérificateur de lien :
1 Exécutez un rapport de vérification de lien (voir Recherche de liens brisés, externes et orphelins,
page 350).
2 Sélectionnez le lien brisé dans la colonne Liens brisés (pas dans la colonne Fichiers) du panneau
Vérificateur de lien (dans le groupe de panneaux Résultats).
Une icône de dossier s’affiche à côté du lien brisé.
3 Tapez le chemin d’accès et le nom du fichier ou cliquez sur l’icône de dossier pour trouver le
fichier et le sélectionner.
4 Appuyez sur Tab ou Entrée (Windows) ou Retour (Macintosh).
S’il y a d’autres liens brisés vers le même fichier, une boîte de dialogue vous invite à réparer
également les références dans les autres fichiers. Cliquez sur Oui pour que Dreamweaver mette
à jour tous les documents de la liste faisant référence à ce fichier. Cliquez sur Non pour que
Dreamweaver mette uniquement à jour la référence actuelle.
Remarque : Si l’option Activer l’archivage et l’extraction de fichier est activée pour ce site,
Dreamweaver essaie d’extraire les fichiers qui nécessitent des modifications. S’il ne peut pas extraire
un fichier, Dreamweaver affiche un avertissement et laisse les références brisées inchangées. Voir
Archivage et extraction de fichiers, page 106.
Pour corriger des liens dans l’inspecteur de propriétés :
1 Exécutez un rapport de vérification de lien (voir Recherche de liens brisés, externes et orphelins,
page 350).
Correction des liens brisés
351
2 Double-cliquez sur une entrée de la colonne Fichier dans le panneau Vérificateur de lien (dans
le groupe de panneaux Résultats).
Dreamweaver ouvre le document, sélectionne l’image ou le lien problématique, et met en
surbrillance le chemin d’accès et le nom de fichier dans l’inspecteur de propriétés (si
l’inspecteur de propriétés n’est pas ouvert, choisissez Fenêtre > Propriétés pour l’ouvrir).
3 Pour définir un nouveau chemin d’accès et un nouveau nom de fichier, tapez directement sur
le texte en surbrillance ou cliquez sur l’icône du dossier pour naviguer vers le fichier.
Si vous mettez à jour une réfé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étés pour
réinitialiser les valeurs de hauteur et de largeur. Les mentions L et H passent de caractère gras à
caractère normal.
4 Enregistrez le fichier.
Dès que les liens sont réparés, leur entrée disparaît de la liste des liens brisés. Si une entrée figure
toujours dans la liste après que vous avez indiqué un nouveau chemin d’accès ou nom de fichier
dans le vérificateur de lien (ou après avoir enregistré des changements apportés à l’inspecteur de
propriétés), cela signifie que Dreamweaver ne peut pas trouver le nouveau fichier et qu’il
considère toujours que le lien est brisé.
Ouverture des documents liés dans Dreamweaver
Les liens ne sont pas actifs dans Dreamweaver ; c’est-à-dire que vous ne pouvez pas ouvrir les
documents liés en cliquant sur le lien de la fenêtre de document.
Pour ouvrir des documents liés dans Dreamweaver, procédez de l’une des manières
suivantes :
• Sélectionnez le lien et choisissez Modifier > Ouvrir la page liée.
• Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le
lien.
Remarque : Le document lié doit résider sur le disque local.
Rubriques connexes
• Aperçu et test de page dans les navigateurs, page 283
• Recherche de liens brisés, externes et orphelins, page 350
• Correction des liens brisé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éveloppement pour le Web conçus pour créer des
graphismes et des animations SWF à visualiser sur des pages Web. Macromedia Dreamweaver
MX 2004 peut être intégré à ces outils pour simplifier le déroulement de vos conceptions Web.
Vous pouvez insérer des images ou des tables Fireworks et des animations Flash (fichiers SWF)
dans un document Dreamweaver. Vous pouvez également utiliser la fonction d’intégration entre
Dreamweaver et Fireworks ou Flash pour modifier une image ou une animation après l’avoir
insérée dans un document Dreamweaver.
Remarque : Pour qu’il soit possible d’utiliser Dreamweaver conjointement à Fireworks et à Flash, les
trois applications doivent être installées sur votre ordinateur.
Ce chapitre contient les sections suivantes :
•
•
•
•
A propos de l’inté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égration de Fireworks et Flash
Grâce à l’édition Roundtrip et aux Design Notes, Dreamweaver est capable d’intégrer des
opérations avec Fireworks et Flash. L’édition Roundtrip permet de transférer de façon fiable les
mises à jour de code entre Dreamweaver et les autres applications, en préservant par exemple les
comportements de survol ou les liens vers d’autres fichiers.
Les Design Notes sont de petits fichiers permettant à Dreamweaver de localiser le document
source correspondant à un fichier image ou à une animation exportée. Lorsque vous exportez des
fichiers de Fireworks ou Flash directement vers un site défini par Dreamweaver, les Design Notes
qui contiennent des références au fichier de programmation PNG ou Flash (FLA) sont
automatiquement exporté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 à l’emplacement, les Design Notes contiennent des informations
pertinentes sur les fichiers exportés. Lorsque vous exportez une table Fireworks, par exemple,
Fireworks rédige une Design Note pour chaque fichier d’image exporté dans la table. Si le fichier
exporté contient des zones réactives ou des images survolées, le code JavaScript de ces éléments est
inclus dans le document HTML exporté par Fireworks.
Optimisation de votre environnement de travail pour Fireworks
et Flash
Pour intégrer parfaitement Fireworks et Flash à vos tâches de développement, il convient de
définir un environnement de travail.
Pour optimiser votre environnement de travail pour Fireworks et Flash :
1 Assurez-vous que les Design Notes sont activées pour votre site Dreamweaver.
Les Design Notes sont automatiquement activées tant que vous ne modifiez pas les paramètres
du site par défaut. Pour plus d’informations sur l’activation des Design Notes, voir Activation et
désactivation des Design Notes pour un site, page 116. Pour plus d’informations sur le rôle des
Design Notes, voir A propos de l’intégration de Fireworks et Flash, page 354.
2 Pour lancer Fireworks depuis Dreamweaver, définissez Fireworks comme éditeur d’image
externe principal pour Dreamweaver.
Paramétrez Fireworks comme éditeur principal des types de fichiers graphiques GIF, PNG et
JPEG. Pour plus d’informations, voir Utilisation d’un éditeur d’image externe, page 327 ou
Paramétrage des préférences pour les é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éfini.
De cette faç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énère un dossier appelé _notes dans le même dossier. Ce dossier
contient les Design Notes nécessaires à Dreamweaver pour fonctionner avec Fireworks.
354
Chapitre 16 : Utilisation d’autres applications
Utilisation de Fireworks
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses procédures de modifications
apportées aux fichiers, parmi lesquelles celles apportées aux liens, aux cartes graphiques, aux
découpes de tables et bien plus. Réunies, les deux applications rationalisent les tâches de
développement consistant à modifier, optimiser et importer des fichiers graphiques Web dans des
pages HTML.
Insertion d’une image Fireworks
Plusieurs méthodes permettent de placer des graphiques Fireworks dans un document
Dreamweaver. Vous pouvez placer un graphique Fireworks exporté dans un document
Dreamweaver à l’aide de la commande Insérer une image ou créer un graphique Fireworks à partir
d’un espace réservé pour l’image Dreamweaver (voir Utilisation de Fireworks pour modifier les
espaces réservés pour les images Dreamweaver, page 357).
Pour insérer une image Fireworks dans un document Dreamweaver :
1 Dans le document Dreamweaver, placez le point d’insertion à l’emplacement où vous souhaitez
insérer l’image, puis procédez de l’une des manières suivantes :
■ Choisissez Insertion > Image.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Image ou faites-le
glisser vers le document.
2 Recherchez le fichier Fireworks exporté 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érées dans un
document Dreamweaver. Quand vous ouvrez ou éditez une image ou une découpe d’image
faisant partie d’une table Fireworks, Dreamweaver lance Fireworks, ce qui ouvre le fichier PNG à
partir duquel l’image ou la table a été exportée.
Lorsque l’image fait partie d’une table Fireworks, vous pouvez ouvrir cette dernière pour la
modifier, à condition que le commentaire <!--fw table--> soit présent dans le code HTML. Si le
fichier PNG source a été exporté à partir de Fireworks vers un site Dreamweaver à l’aide du
paramètre Document HTML et image du style Dreamweaver, le commentaire de la table
Fireworks est automatiquement inséré dans le code HTML.
Pour lancer et modifier une image Fireworks placée dans Dreamweaver :
1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur de propriétés, le cas
échéant.
2 Cliquez sur une image ou une découpe d’image pour la sélectionner.
Lorsque vous sélectionnez une image exportée depuis Fireworks, l’inspecteur de propriétés
identifie la sélection comme image ou table Fireworks et affiche le nom du fichier source PNG.
3 Pour lancer Fireworks afin d’apporter des modifications, procédez de l’une des manières
suivantes :
■ Dans l’inspecteur de propriétés, cliquez sur Modifier.
Utilisation de Fireworks
355
Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) et doublecliquez sur l’image sélectionnée.
■ Cliquez sur l’image sélectionnée avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contrôle enfoncée (Macintosh) et choisissez Modifier avec Fireworks
dans le menu contextuel.
Fireworks démarre et ouvre le fichier PNG associé pour que vous puissiez le modifier.
■
Remarque : Si Fireworks ne trouve pas le fichier source, un message vous invite à le faire.
Lorsque vous travaillez dans le fichier source Fireworks, les modifications sont enregistrées dans
le fichier source et le fichier exporté, sinon seul le fichier exporté est mis à jour.
4 Dans Fireworks, modifiez le fichier PNG source.
5 Une fois les modifications effectuées, cliquez sur Terminé.
Fireworks enregistre les modifications dans le fichier PNG, exporte l’image mise à jour (ou le
document HTML et les images) et active de nouveau Dreamweaver. Dans Dreamweaver,
l’image ou la table mise à jour apparaît.
Optimisation d’une image Fireworks depuis Dreamweaver
Vous pouvez lancer Fireworks à partir de Dreamweaver pour modifier rapidement une image ou
une animation Fireworks placée et exportée en la redimensionnant ou en modifiant le type de
fichier, par exemple. Fireworks vous permet de modifier les paramètres d’optimisation et
d’animation, ainsi que la taille et la zone de l’image exportée.
Pour modifier les paramètres d’optimisation d’une image Fireworks placée dans
Dreamweaver :
1 Dans Dreamweaver, sélectionnez l’image de votre choix et choisissez Commandes > Optimiser
l’image dans Fireworks.
2 Si un message vous y invite, indiquez si un fichier Fireworks source doit être lancé pour l’image
placée.
3 Dans Fireworks, procédez aux modifications requises dans la boîte de dialogue d’optimisation :
■ Pour modifier les paramè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ée, cliquez sur l’onglet Fichier.
4 Une fois l’édition terminée, cliquez sur Mettre à jour.
Vous exportez ainsi l’image en adoptant les nouveaux paramètres d’optimisation, mettez à jour
le fichier GIF ou JPEG placé dans Dreamweaver et enregistrez le fichier PNG source si un
fichier source a été sélectionné.
Si vous avez modifié le format de l’image, le vérificateur de lien Dreamweaver vous invite à
mettre à jour les références à l’image. Par exemple, si vous avez modifié le format d’une image
appelée mon_image.GIF en mon_image.JPEG, toutes les références faites à 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éservés pour les images
Dreamweaver
Vous pouvez créer un espace réservé dans un document Dreamweaver, puis lancer Fireworks pour
créer une image graphique ou une table Fireworks à y placer. Pour plus d’informations sur
l’insertion d’un espace réservé pour l’image, voir insertion d’un espace réservé pour une image,
page 321.
Pour créer une image à partir d’un espace réservé, Dreamweaver MX et Fireworks MX doivent
être installés sur votre système.
Pour modifier un espace réservé pour l’image Dreamweaver dans Fireworks :
1 Veillez à ce que Fireworks soit défini comme éditeur d’image des fichiers .png. Pour plus
d’informations, voir Définition des préférences pour les éditeurs d’image externes dans l’aide de
Dreamweaver.
2 Dans la fenêtre de document, cliquez sur l’espace réservé pour l’image pour le sélectionner.
3 Procédez de l’une des manières suivantes pour lancer Fireworks et procéder à des modifications :
■ Dans l’inspecteur de propriétés, cliquez sur Créer.
■ Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur
l’espace réservé pour l’image.
■ Cliquez sur l’espace réservé pour l’image avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh), puis sélectionnez Créer une image dans
Fireworks.
Fireworks est lancé en mode d’édition à partir de Dreamweaver.
4 Utilisez les options de Fireworks pour créer l’image.
Fireworks reconnaît les paramètres suivants d’espace réservé pour l’image, définis lors de son
utilisation dans Dreamweaver : la taille de l’image correspondant à la taille du document
Fireworks, l’ID de l’image utilisée par Fireworks comme nom de document par défaut pour le
fichier source et le fichier d’exportation créé, l’alignement du texte et les comportements
reconnus par Fireworks (permutation d’image, menu contextuel, barre de navigation et texte
notamment). Fireworks reconnaît également les liens associés à l’espace réservé pour l’image
lorsque vous travaillez dans Dreamweaver.
Remarque : Bien que les liens ajoutés à un espace réservé pour l’image soient invisibles dans
Fireworks, ils sont néanmoins conservés. Si vous dessinez une zone réactive et que vous ajoutez
un lien dans Fireworks MX, le programme ne supprimera pas le lien ajouté à l’espace réservé pour
l’image dans Dreamweaver. Toutefois, si dans Fireworks vous dessinez une découpe dans la
nouvelle image, le lien sera supprimé du document Dreamweaver lors du remplacement de
l’espace réservé pour l’image.
Utilisation de Fireworks
357
Les paramètres suivants d’espace réservé pour l’image sont désactivés dans l’inspecteur de
propriété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ération terminée, cliquez sur Terminé.
La boîte de dialogue Enregistrer sous s’affiche. Fireworks vous invite à enregistrer le fichier
PNG.
6 Dans la zone de texte Enregistrer dans, sélectionnez le dossier défini comme dossier du site local
Dreamweaver.
Si vous avez attribué un nom à l’espace réservé lors de son insertion dans le document
Dreamweaver, Fireworks insè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îte de dialogue Exporter s’affiche. Cette boîte de dialogue vous permet d’exporter l’image
au format GIF, JPEG ou, dans le cas d’images découpées, sous la forme de documents HTML
et d’images.
8 Sélectionnez le dossier du site local de Dreamweaver dans le champ Enregistrer dans de la boîte
de dialogue Exporter.
9 La zone de texte Nom est automatiquement mise à jour pour adopter le nom désignant le fichier
PNG. Entrez un nouveau nom si vous le souhaitez.
10 Dans la zone Enregistrer sous le type, sélectionnez le type de fichier(s) à exporter, par exemple
Images uniquement ou Documents HTML et images.
11 Cliquez sur Enregistrer pour enregistrer le fichier exporté.
Le fichier est enregistré et Dreamweaver est à nouveau actif. Dans le document Dreamweaver,
le fichier exporté ou la table Fireworks remplace l’espace réservé pour l’image.
Ouverture d’un menu contextuel Fireworks dans Dreamweaver
Fireworks prend en charge les menus contextuels basés sur des images et sur du code HTML.
Dreamweaver ne prend en charge que les menus contextuels basés sur du code HTML. Dans
Dreamweaver, vous pouvez ouvrir un menu contextuel Fireworks et modifier les propriétés de
tous les éléments de menu, à l’exception des images d’arrière-plan des menus contextuels basés sur
des images.
Pour modifier les images d’arrière-plan d’un menu contextuel basé sur des images, sélectionnez
l’image à mettre à 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 à modifier repose sur une image et que vous souhaitez préserver les arrièreplans de la cellule basés sur des images, il convient de modifier le menu contextuel dans Fireworks
plutôt que dans Dreamweaver.
Pour ouvrir le menu contextuel Fireworks :
1 Dans le document Dreamweaver, sélectionnez la zone réactive ou l’image qui déclenche le menu
contextuel.
2 Ouvrez le panneau Comportements (Maj+F3), si ce n’est déjà fait, puis, dans la liste Actions,
double-cliquez sur Afficher le menu contextuel.
358
Chapitre 16 : Utilisation d’autres applications
La boîte de dialogue Afficher le menu contextuel apparaît. Le comportement Afficher le menu
contextuel vous permet de modifier ou de mettre à jour le contenu d’un menu contextuel
Fireworks basé sur du code HTML. Vous pouvez ajouter, supprimer ou modifier les éléments
de menu, les réorganiser et les positionner dans une page. Pour plus d’informations sur la
dé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é le menu contextuel, cliquez sur OK.
Définition des préférences de lancement et de modification des
fichiers source Fireworks
Lorsque vous modifiez des images dans Fireworks, les images placées dans vos pages Web sont
normalement exportées par Fireworks depuis un fichier source PNG. Lorsque vous ouvrez une
image (« lancer ») dans Dreamweaver pour la modifier, Fireworks ouvre automatiquement le
fichier PNG source, vous invitant à préciser l’emplacement du fichier PNG si celui-ci ne peut pas
être localisé. Vous pouvez régler vos préférences sous Fireworks afin que Dreamweaver ouvre
l’image insérée, à moins que vous ne préfériez que Fireworks vous offre la possibilité d’utiliser le
fichier d’image insérée ou le fichier source Fireworks chaque fois que vous ouvrez une image sous
Dreamweaver.
Remarque : Dreamweaver ne reconnaît ces préfé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éterminer les préférences de lancement et de modification de Fireworks :
1 Dans Fireworks, choisissez Edition > Préférences ou Fireworks > Préférences (Macintosh) et
cliquez sur l’onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le
menu déroulant (Macintosh).
2 Indiquez les préférences applicables lors de la modification ou de l’optimisation d’images
Fireworks placées dans une application externe :
Toujours utiliser le fichier PNG source permet de lancer automatiquement le fichier PNG
Fireworks défini dans la Design Note comme fichier source de l’image placée. Les mises à jour
sont appliquées au fichier PNG source et à l’image placée correspondante.
Ne jamais utiliser le fichier PNG source permet de lancer automatiquement l’image
Fireworks placée, qu’il existe ou non un fichier PNG source. Les mises à jour sont appliquées à
l’image placée uniquement.
Demander lors du lancement vous permet d’indiquer chaque fois si le fichier PNG source
doit être lancé ou non. Lorsque vous modifiez ou optimisez une image placée, Fireworks
affiche un message vous demandant si vous souhaitez lancer l’éditeur et modifier l’image. Vous
pouvez également déterminer les préférences globales de la fonction de lancement et d’édition
dans cette fenê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ées et des fichiers HTML dans le dossier du site Dreamweaver de votre choix. Vous pouvez
alors insé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érer dans un document du code HTML généré par Fireworks,
intégrant des images, des découpes et du code JavaScript. Vous pouvez ainsi facilement créer des
éléments de conception dans Fireworks et les insérer dans un document Dreamweaver existant.
Pour insérer du code HTML Fireworks dans un document Dreamweaver :
1 Dans Dreamweaver, placez le point d’insertion à l’endroit du document où vous souhaitez
placer le code HTML Fireworks.
2 Procédez de l’une des manières suivantes :
Choisissez Insertion > Images interactives > HTML Fireworks.
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Insérer HTML
Fireworks.
3 Dans la boîte de dialogue qui s’affiche, cliquez sur Parcourir pour choisir un fichier HTML
Fireworks.
4 Choisissez l’option Supprimer fichier après l’insertion pour placer le fichier HTML Fireworks
d’origine dans la corbeille (Windows et Macintosh) à l’issue de l’opération.
Faites appel à cette option si vous n’avez plus besoin du fichier HTML Fireworks après l’avoir
inséré. Elle n’a aucun effet sur le fichier PNG source associé au fichier HTML.
■
■
Remarque : Si le fichier HTML se trouve sur un lecteur réseau, il est définitivement supprimé (il
n’est pas placé dans la corbeille).
5 Cliquez sur OK pour insérer le code HTML, ainsi que les images associées, les dé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énéré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 > Copier le code HTML.
2 Suivez les instructions de l’assistant pour sélectionner les paramè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ées.
L’assistant exporte les images à l’endroit indiqué et copie le code HTML dans le Presse-papiers.
3 Dans Dreamweaver, placez le point d’insertion à l’endroit du document où vous souhaitez coller
le code HTML et choisissez Edition > Coller.
Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le
document Dreamweaver et tous les liens vers des images sont mis à jour.
Pour exporter et coller du code HTML Fireworks dans Dreamweaver :
1 Dans Fireworks, choisissez Fichier > Exporter.
2 Dans la boîte de dialogue Exporter, indiquez le dossier du site Dreamweaver devant accueillir
les images exportées.
3 Dans le menu déroulant Enregistrer sous, choisissez Documents HTML et Images.
4 Dans le menu dé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 à l’endroit du document où vous souhaitez coller
le code HTML, et choisissez Edition > Coller.
Le code HTML et JavaScript associé aux fichiers Fireworks exportés est copié dans le
document Dreamweaver et tous les liens vers des images sont mis à jour.
Mise à jour du code HTML Fireworks placé dans Dreamweaver
Outre la technique de lancement et de modification décrite ci-dessus, vous pouvez faire appel à la
commande Fichier > Mettre à jour le code HTML pour mettre à jour des fichiers Fireworks
placés dans Dreamweaver. La commande Mettre à jour le code HTML vous permet de modifier
l’image PNG source dans Fireworks et de mettre à jour automatiquement le code HTML et les
fichiers d’image exportés placés dans un document Dreamweaver. Grâce à cette commande, vous
pouvez mettre à jour les fichiers Dreamweaver même si le programme est inactif.
Pour mettre à jour du code HTML Fireworks placé dans Dreamweaver :
1 Dans Fireworks, ouvrez le fichier PNG source et modifiez-le.
2 Choisissez Fichier > Enregistrer.
3 Dans Fireworks, choisissez Fichier > Mettre à jour le code HTML.
4 Recherchez le fichier Dreamweaver qui contient le code HTML à mettre à jour, puis cliquez sur
Ouvrir.
5 Recherchez le dossier dans lequel placer les fichiers d’image mis à jour et cliquez sur Sélectionner
(Windows) ou Choisir (Macintosh).
Fireworks met à jour le code HTML et JavaScript du document Dreamweaver. Fireworks
exporte également les images mises à jour associées au code HTML et les place dans le dossier
de destination indiqué.
Si Fireworks ne trouve pas le code HTML correspondant, il vous propose d’insérer du nouveau
code HTML dans le document Dreamweaver. Fireworks insère la section JavaScript du
nouveau code au début du document et place la table HTML ou le lien vers l’image à la fin du
document.
Création d’un album photos pour le Web
Vous pouvez générer un site Web de façon automatique pour présenter un album photo
présentant les images contenues dans un dossier donné. Dreamweaver utilise Fireworks pour créer
une image miniature et une image de plus grande taille pour chaque image du dossier.
Dreamweaver crée ensuite une page Web contenant toutes les miniatures, ainsi que les liens vers
les images de plus grande taille. Pour créer un album photos pour le Web, vous devez avoir installé
Dreamweaver et Fireworks 4 ou une version ultérieure sur votre système.
Avant de commencer, placez toutes les images que vous souhaitez intégrer à l’album photos dans
un dossier (il ne doit pas nécessairement se trouver sur un site). Assurez-vous é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égrées à l’album.
Pour créer un album photos pour le Web :
1 Dans Dreamweaver, choisissez Commandes > Créer un album photos pour le Web.
2 Dans la zone Titre de l’album photos, entrez un titre. Il apparaît alors dans un rectangle gris
dans la partie supérieure de la page contenant les miniatures.
Utilisation de Fireworks
361
3
4
5
6
Si vous le souhaitez, vous pouvez faire figurer jusqu’à deux lignes de texte supplé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é à
côté de la zone de texte Dossier images sources. Choisissez (ou créez) ensuite un dossier de
destination dans lequel placer toutes les images exportées et les fichiers HTML en cliquant sur
le bouton Parcourir, situé prè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êmes noms que celles que vous souhaitez ajouter, vous risquez d’écraser les fichiers d’image et
les miniatures présents dans le dossier de destination.
Spécifiez les options d’affichage des images miniatures :
■ Choisissez une taille pour les images miniatures dans le menu déroulant Taille des vignettes.
Les images sont mises à l’échelle proportionnellement pour que les miniatures
correspondantes soient intégrées dans un carré présentant les dimensions de pixels
indiqué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éroulant Format des vignettes :
GIF WebSnap 128 crée des miniatures GIF qui utilisent une palette adaptative Web de
128 couleurs.
GIF WebSnap 256 crée des miniatures GIF qui utilisent une palette adaptative Web de
256 couleurs.
JPEG—Qualité supérieure crée des miniatures JPEG de qualité relativement supérieure dont
la taille de fichier est plus importante.
JPEG—Fichier réduit crée des miniatures JPEG de qualité relativement inférieure dont la
taille de fichier est réduite.
Choisissez un format pour les images de grande taille dans le menu déroulant Format graphique
des photos. Une image de grande taille est générée au format spécifié pour chaque image
d’origine. Vous pouvez indiquer un format différent pour les images de grande taille et les
miniatures correspondantes.
Remarque : La commande Cré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énérées peuvent
présenter des tailles de fichier supérieures et une qualité inférieure à celle des fichiers d’origine.
7 Choisissez un pourcentage d’échelle pour les images de grande taille.
En utilisant une échelle de 100 %, vous créez des images de grande taille dont le format est
identique à celui des originaux. Le pourcentage d’échelle est appliqué à toutes les images. Par
conséquent, si toutes les images d’origine ne sont pas de taille identique, vous risquez de ne pas
obtenir les résultats escomptés en les mettant à l’échelle à l’aide d’un même pourcentage.
8 Sélectionnez l’option Créer des pages séparées pour chaque photo afin de créer une page Web
contenant les liens de navigation Retour, Accueil et Suivant pour chaque image source.
Si vous sélectionnez cette option, le lien vers la miniature mè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éer les fichiers HTML et d’image de l’album photos pour le Web.
S’il n’est pas déjà actif, Fireworks est lancé et crée les miniatures et images de grande taille. Ces
opérations peuvent prendre quelques instants si le nombre de fichiers d’image est important.
Une fois le traitement terminé, Dreamweaver est réactivé et génère la page contenant les
miniatures.
10 Lorsqu’une boîte de dialogue indiquant « L’album a été créé .» s’affiche, cliquez sur OK.
Vous devrez peut-ê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étique.
Remarque : Si vous cliquez sur le bouton Annuler dans la boîte de dialogue Dreamweaver une
fois le traitement lancé, vous n’interrompez pas la procédure de création de l’album photos, mais
empêchez uniquement Dreamweaver d’afficher la page principale de l’album photos.
Utilisation de Flash
Vous pouvez utiliser Dreamweaver pour définir les options d’affichage et de lecture d’une
animation Flash dans une page Web ou mettre à jour les liens présents dans l’animation. Si
Macromedia Flash MX 2004 est installé, vous pouvez également sé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é, vous pouvez sé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 à nouveau le fichier SWF.
Pour ouvrir et modifier un contenu Flash inséré à partir de Dreamweaver :
1 Dans Dreamweaver, choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur de propriétés, le cas
échéant.
2 Dans le document Dreamweaver, procédez de l’une des manières suivantes :
Utilisation de Flash
363
■
Cliquez sur l’espace réservé du fichier SWF pour le sélectionner, puis sur Modifier dans
l’inspecteur de propriétés.
Remarque : Si Flash MX n’est pas installé, le bouton Modifier est désactivé.
Maintenez enfoncée la touche Contrôle (Windows) ou Commande (Macintosh) et doublecliquez sur l’espace réservé pour l’animation à modifier.
■ Cliquez sur l’animation de votre choix avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contrôle enfoncée (Macintosh) et choisissez Modifier avec Flash dans
le menu contextuel.
Dreamweaver lance Flash qui tente à son tour de localiser le fichier de programmation Flash
(.FLA) correspondant au fichier SWF sélectionné. Si Flash ne peut pas localiser le fichier de
programmation Flash, un message vous invite à le faire. Vous ne pouvez pas mettre à 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é, 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être de document indique que vous êtes en train de
modifier une animation à partir de Dreamweaver.
4 Une fois les modifications effectuées, cliquez sur Terminé.
Flash met à jour le document de programmation Flash (fichier FLA), exporte à nouveau le
fichier d’animation (fichier SWF), se ferme et active le document Dreamweaver.
5 Pour afficher le fichier SWF mis à jour dans le document, cliquez sur Lecture dans l’inspecteur
de propriétés ou appuyez sur la touche F12 pour afficher un aperçu de votre page dans la fenêtre
d’un navigateur.
Mise à jour des liens vers un fichier SWF
Dreamweaver vous permet de mettre à jour un lien dans une animation Flash (fichier SWF), puis
d’insérer cette modification dans le document de programmation Flash (fichier FLA).
Pour mettre à jour un lien URL dans un fichier SWF :
1 Définissez une page d’accueil pour le site si ce n’est déjà fait.
Vous devez définir une page d’accueil pour générer une carte du site. Dans la fenêtre Affichage
de la carte du site, vous devez afficher les fichiers dépendants afin de mettre à jour un lien dans
un fichier SWF. Par défaut, la carte du site n’affiche pas les fichiers dépendants. Pour plus
d’informations sur l’affichage des fichiers dé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être de la carte du site.
3 Pour afficher les fichiers dépendants, procédez de l’une des manières suivantes :
■ Choisissez Affichage > Afficher les fichiers dépendants.
■ Choisissez Affichage > Mise en forme pour ouvrir la boîte de dialogue Définition du site,
puis sélectionnez l’option Afficher les fichiers dépendants.
Le lien apparaît sous le fichier SWF.
Utilisation de Flash
365
4 Utilisez l’une des méthodes suivantes pour modifier le lien :
Pour modifier le lien dans le fichier SWF sélectionné, cliquez dessus avec le bouton droit de
la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez
Modifier le lien. Dans la boîte de dialogue qui s’affiche, entrez le nouveau chemin d’accès à
l’URL dans la zone de texte URL.
■ Pour mettre à jour toutes les instances du lien, choisissez Site > Modifier le lien au niveau du
site, puis, dans la zone de texte Modifier tous les liens à de la boîte de dialogue qui s’affiche,
recherchez le lien à modifier à l’aide du bouton Parcourir ou tapez son chemin d’accès.
Enfin, dans la zone de texte En liens à, recherchez la nouvelle URL à l’aide du bouton
Parcourir ou tapez son chemin d’accès.
5 Cliquez sur OK.
■
Tous les liens mis à jour par Dreamweaver dans le fichier SWF sont intégrés au document source
FLA lorsque vous procédez à une opération de lancement et de modification. Dreamweaver
consigne automatiquement toutes les modifications de lien apportées au fichier SWF dans les
Design Notes et, lorsque Flash répercute les modifications dans le fichier FLA, il les supprime des
Design Notes.
366
Chapitre 16 : Utilisation d’autres applications
CHAPITRE 17
Ajout d’éléments audio, vidéo et interactifs
Macromedia Dreamweaver MX 2004 permet d’ajouter rapidement et facilement du son et des
animations à un site Web. Vous pouvez joindre des Design Notes à ces objets pour communiquer
avec votre équipe. Il est également possible d’insérer des objets de type texte ou bouton
Macromedia Flash MX 2004 à partir de l’application Dreamweaver elle-même.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
A propos des fichiers multimédia, page 368
Insertion et modification d’objets multimédia, page 369
Lancement d’un éditeur externe pour des fichiers multimédia, page 371
Utilisation des Design Notes (Notes de conception) avec les objets multimé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éléchargement et installation des éléments Flash, page 376
Insertion d’éléments Flash, page 376
Modification des attributs d’un élément Flash, page 377
Insertion d’animations Shockwave, page 377
Ajout d’une vidéo, page 378
Ajout de son à une page, page 378
Insertion du contenu d’un plug-in Netscape Navigator, page 379
Insertion d’un contrôle ActiveX, page 381
Insertion d’une applet Java, page 381
Utilisation de comportements pour contrôler les objets multimédias, page 381
367
A propos des fichiers multimédia
Vous pouvez incorporer les fichiers multimédia suivants dans vos pages Dreamweaver :
animations Flash et Shockwave, QuickTime, AVI, applets Java, contrôles ActiveX et fichiers audio
de formats divers.
Types de fichier Flash
Dreamweaver est fourni avec des objets Flash que vous pouvez utiliser même si Flash n’est pas
installé sur votre ordinateur. Si Flash est installé sur votre machine, voir Utilisation de Flash,
page 363 pour plus d’informations sur l’utilisation et l’intégration de ces applications.
Avant d’utiliser les commandes Flash disponibles dans Dreamweaver, il est recommandé de
connaître les différents types de fichiers Flash :
Le fichier Flash (.fla) est le fichier source pour tout projet et est créé dans le programme Flash.
Ce type de fichier peut uniquement être ouvert dans Flash (il ne peut pas l’ê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ée du fichier Flash (.fla), optimisée
pour l’affichage sur le Web. Ce fichier peut être lu dans les navigateurs et prévisualisé dans
Dreamweaver, mais il ne peut pas être modifié dans Flash. Il s’agit du type de fichier que vous
cré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èle Flash (.swt) permettent de modifier et de remplacer des informations
dans un fichier d’animation Flash. Ces fichiers sont utilisés dans l’objet de bouton Flash, ce qui
vous permet de modifier le modèle avec votre propre texte ou vos propres liens afin de créer un
fichier SWF personnalisé à insérer dans votre document. Dans Dreamweaver, ces fichiers de
modèle peuvent être trouvés dans les dossiers Dreamweaver/Configuration/Flash Objects/Flash
Buttons et Flash Text.
Vous pouvez également télécharger de nouveaux modèles de bouton à 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éation de modèles de bouton, consultez l’article correspondant sur le site
Web de Macromedia à l’adresse : www.macromedia.com/go/flash_buttons.
L’élément Flash (.swc) est un fichier Flash SWF vous permettant de créer des applications Web
enrichies incorporées à une page Web. Les éléments Flash comportent des paramètres
personnalisables, que vous pouvez modifier pour qu’ils accomplissent diverses fonctions. Pour
plus d’informations, voir Insertion d’éléments Flash, page 376 et Modification des attributs d’un
élément Flash, page 377.
Formats de fichiers audio
La liste ci-dessous décrit les formats de fichiers audio les plus courants et présente certains
avantages et inconvénients de chaque conception Web.
368
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
Le format .midi ou .mid (Musical Instrument Digital Interface) est destiné à la musique
instrumentale. Les fichiers MIDI sont reconnus par plusieurs navigateurs et ne requièrent pas de
plug-in. Bien que leur qualité sonore soit trè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ée. Les fichiers MIDI ne
peuvent pas être enregistrés et doivent être synthétisés sur un ordinateur équipé d’un matériel et
d’un logiciel spéciaux.
Le format .wav (Waveform Extension) qui offre une bonne qualité sonore, est pris en charge par
plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers
WAV à partir d’un CD, d’une cassette, d’un microphone, etc. Toutefois, la taille importante des
fichiers limite sé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é sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in.
Vous pouvez également enregistrer des fichiers AIFF à partir d’un CD, d’une cassette, d’un
microphone, etc. Toutefois, la taille importante des fichiers limite sé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é qui diminue de manière significative la taille des fichiers audio. La qualité
sonore est excellente : si un fichier MP3 est correctement enregistré et compressé, sa qualité peut
être équivalente à celle d’un CD. La technologie MP3 permet de lire le fichier « en transit » afin
que les visiteurs n’aient pas à attendre le téléchargement du fichier entier avant de pouvoir
l’écouter. Mais le fichier est plus gros qu’un fichier Real Audio, ce qui signifie que le
téléchargement d’une chanson entière peut s’avérer assez long si l’on utilise une connexion à
Internet par modem. Pour lire des fichiers MP3, les visiteurs doivent télé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é très élevé de compression avec une taille
de fichier inférieure à celle du format MP3. Le téléchargement de fichiers de chanson peut être
effectué dans un laps de temps raisonnable. Les fichiers pouvant être « diffusés » à partir d’un
serveur Web normal, les visiteurs peuvent commencer à écouter le son avant la fin du
téléchargement. Les visiteurs doivent télécharger et installer l’application d’aide ou le plug-in
RealPlayer afin de lire ces fichiers.
est un format à la fois audio et vidéo mis au point par Apple
Computer. QuickTime est inclus dans le système d’exploitation des ordinateurs Apple Macintosh.
Il est utilisé par la plupart des applications Macintosh utilisant l’audio, la vidéo ou des
animations. Les PC aussi peuvent lancer les fichiers au format QuickTime, mais cela nécessite le
pilote approprié. 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és ci-dessus, il existe de nombreux
formats audio et vidéo utilisables sur le Web. Si vous rencontrez un fichier audio ou vidéo dont le
format vous est inconnu, retrouvez son créateur afin d’apprendre comment l’utiliser au mieux.
Insertion et modification d’objets multimédia
Vous pouvez insérer une animation ou un objet Flash, une animation QuickTime ou Shockwave,
une applet Java, un contrôle ActiveX ou d’autres objets audio ou vidéo dans un document
Dreamweaver.
Insertion et modification d’objets multimédia
369
Pour insérer un objet multimédia dans une page :
1 Placez le point d’insertion dans la fenêtre de document à l’endroit où vous souhaitez insérer
l’objet.
2 Pour insérer l’objet souhaité, procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Support et sélectionnez
le bouton correspondant au type d’objet que vous souhaitez insérer.
Choisissez l’objet approprié dans le sous-menu Insertion > Médias.
■ Si l’élément à insérer n’est pas un objet Flash, Shockwave, Applet ou ActiveX, utilisez le
bouton Plug-in Netscape Navigator (l’icône en forme de pièce de puzzle dans la barre
Insertion) pour l’insérer. Pour plus d’informations, voir Insertion du contenu d’un plug-in
Netscape Navigator, page 379.
Dans la plupart des cas, une boîte de dialogue permet alors de choisir un fichier source et de
spécifier certains paramètres de l’objet multimédia.
■
Conseil : Pour éviter que ces boîtes de dialogue ne s’affichent, choisissez Edition > Préférences >
Général (Windows) ou Dreamweaver> Préférences > Général (Macintosh) et désactivez l’option
Afficher la boîte de dialogue lors de l’insertion d’objets. Pour remplacer la préférence d’affichage
des boîtes de dialogue, maintenez enfoncée la touche Ctrl (Windows) ou Option (Macintosh) tout
en insérant l’objet. Par exemple, pour insérer un espace réservé pour une animation Shockwave
sans spécifier le fichier correspondant, maintenez la touche Ctrl ou Option enfoncée et cliquez sur
le bouton Shockwave à partir du menu déroulant Support de la catégorie Commun de la barre
Insérer ou sélectionnez Insertion > Médias > Shockwave.
3 Renseignez la boîte de dialogue Sélectionner un fichier ou Insérer Flash.
4 Cliquez sur OK.
La boîte de dialogue Attributs d’accessibilité des balises d’objet s’affiche si elle a été activée dans
Préférences (voir Optimisation de l’espace de travail pour la conception de pages accessibles,
page 56).
5 Si la boîte de dialogue Attributs d’accessibilité 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îte de dialogue.
370
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
L’objet multimédia apparaît dans le document.
Remarque : Si vous cliquez sur Annuler, un espace réservé pour l’objet multimédia s’affiche dans
le document, mais Dreamweaver ne lui associe ni balises ni attributs d’accessibilité.
Pour spécifier un fichier source, définir les dimensions et d’autres paramètres et attributs,
utilisez l’inspecteur de propriétés pour chaque objet.
Modification des attributs d’accessibilité d’un objet multimédia
Si vous insérez des attributs d’accessibilité avec un objet multimédia (voir Insertion et modification
d’objets multimédia, page 369), vous pouvez modifier ces valeurs dans le code HTML.
Pour modifier les valeurs d’accessibilité pour un objet multimédia :
1 Dans la fenêtre de document, sélectionnez l’objet.
2 Procédez de l’une des manières suivantes :
■
■
Modifiez les attributs en mode Code.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl
enfoncée (Macintosh), puis sélectionnez Modifier le code de la balise.
Lancement d’un éditeur externe pour des fichiers multimédia
Vous pouvez lancer un éditeur externe depuis Dreamweaver pour modifier la plupart des fichiers
multimédia. Vous pouvez également décider de l’éditeur que doit lancer Dreamweaver pour
modifier le fichier.
Lancement d’un éditeur externe depuis Dreamweaver
Vous pouvez lancer un éditeur externe depuis Dreamweaver pour modifier la plupart des fichiers
multimédia.
Pour lancer un éditeur externe depuis Dreamweaver :
1 Assurez-vous que le type du fichier multimédia est associé à un éditeur sur votre système.
Pour savoir quel éditeur est associé au type de fichier, sélectionnez Edition > Préférences dans
Dreamweaver, puis Types de fichiers/Editeurs dans la liste Catégorie. Cliquez sur l’extension de
fichier dans la colonne Extensions pour consulter le ou les éditeurs associés dans la colonne
Editeurs. Vous pouvez modifier l’éditeur associé à un type de fichier. Pour plus d’informations,
voir Spécification de l’éditeur à lancer depuis Dreamweaver, page 372.
2 Double-cliquez sur le fichier multimédia dans le panneau Site pour lancer l’éditeur externe et
ouvrir le fichier.
L’éditeur qui est exécuté lorsque vous double-cliquez sur le fichier du panneau Site est appelé
« éditeur principal ». Si vous double-cliquez sur un fichier image, par exemple, Dreamweaver
ouvre le fichier dans l’application principale de retouche d’image définie (Macromedia
Fireworks ou autre).
3 Si vous ne souhaitez pas utiliser l’éditeur externe principal pour modifier le fichier, vous pouvez
effectuer l’une des opérations suivantes pour utiliser un autre éditeur :
■ Dans le panneau Site, cliquez avec le bouton droit de la souris (Windows) ou en maintenant
la touche Ctrl enfoncée (Macintosh) sur le nom du fichier concerné et sélectionnez Ouvrir
avec dans le menu qui s’affiche.
Lancement d’un éditeur externe pour des fichiers multimédia
371
■
En mode Création, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Ctrl enfoncée (Macintosh) sur l’élément multimédia de la page affichée, puis
sélectionnez Modifier avec dans le menu contextuel.
Spécification de l’éditeur à lancer depuis Dreamweaver
Vous pouvez définir l’éditeur à 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 éditeurs externes à lancer pour un type de fichier donné :
1 Choisissez Edition > Préférences, puis sélectionnez Types de fichiers/Editeurs dans la liste
Catégorie.
Les extensions de fichiers, par exemple .gif, .wav et .mpg, apparaissent dans la liste de gauche,
sous le titre Extensions. Les éditeurs associés à une extension apparaissent dans la liste de
droite, sous le titre Editeurs.
2 Sélectionnez l’extension de type de fichier dans la liste Extensions, puis effectuez l’une des
opérations suivantes :
■ Pour associer un nouvel éditeur au type de fichier, cliquez sur le bouton plus (+), au-dessus
de la liste Editeurs et renseignez la boîte de dialogue qui s’affiche.
Par exemple, sélectionnez l’icône de l’application Acrobat pour l’associer au type de fichier.
■ Pour faire d’un éditeur l’éditeur principal pour un type de fichier donné (c’est-à-dire celui
qui s’ouvre automatiquement lorsque vous double-cliquez sur un fichier de ce type dans le
panneau Site), sélectionnez cet éditeur dans la liste Editeurs, puis cliquez sur Rendre
principal.
■ Pour qu’un éditeur ne soit plus lié à un type de fichier donné, sélectionnez cet é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 éditeur associé :
1 Cliquez sur le bouton plus (+), au-dessus de la liste Extensions et entrez une extension de type
de fichier (saisissez le point précédent l’extension) ou plusieurs extensions liées et séparées par
des espaces.
Vous pouvez, par exemple, entrer .xml .xsl si vous souhaitez associer ces fichiers avec un éditeur
XML installé sur votre système.
2 Pour sélectionner un éditeur pour le type de fichier, cliquez sur le bouton plus (+), au-dessus de
la liste Editeurs et renseignez la boîte de dialogue qui s’affiche.
Pour supprimer un type de fichier :
• Sé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 étant impossible, soyez prudent
lors d’une telle opération.
372
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
Utilisation des Design Notes (Notes de conception) avec les
objets multimédia
Comme pour la plupart des objets dans Dreamweaver, vous pouvez ajouter des Design Notes à un
objet multimédia. Les Design Notes sont des notes associées à un fichier particulier et stockées
dans un fichier séparé. Les Design Notes vous permettent de conserver des informations
supplémentaires sur les documents, par exemple, des commentaires sur l’é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 à un objet multimédia :
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) sur l’objet dans la fenêtre de document.
Remarque : Vous devez définir votre site avant d’ajouter des Design Notes à un objet (voir
Activation et désactivation des Design Notes pour un site, page 116).
2 Cliquez sur Design Notes dans le menu contextuel.
3 Entrez les informations souhaitées dans la Design Note.
Conseil : Vous pouvez également ajouter une Design Note à un objet multimédia à partir du
panneau Site en sé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éer, insérer et modifier des boutons Flash dans vos documents tout en travaillant
sous Dreamweaver ; il n’est pas nécessaire de disposer de Macromedia Flash. L’objet de bouton
Flash est un bouton pouvant être mis à jour. Il est basé sur un modèle Flash. Vous pouvez
personnaliser un objet de bouton Flash en ajoutant du texte, une couleur d’arrière-plan et des
liens vers d’autres fichiers.
Création et insertion d’un bouton Flash
Vous pouvez créer et insérer des boutons Flash dans vos documents lorsque les modes Création ou
Code sont activés.
Remarque : Vous devez enregistrer le document avant d’insérer un objet de bouton ou de texte
Flash.
Pour insérer un objet de bouton Flash :
1 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous voulez insérer le
bouton Flash.
2 Pour ouvrir la boîte de dialogue Insertion d’objets Flash, procédez de l’une des manières
suivantes :
■ Dans la catégorie Commun de la barre Insérer, choisissez Support et cliquez sur l’icône
Bouton Flash.
■ Choisissez Insertion > Médias > Bouton Flash.
Insertion et modification d’un objet de bouton Flash
373
La boîte de dialogue Insérer le bouton Flash s’affiche.
3 Renseignez la boîte de dialogue Insérer le bouton Flash, et cliquez sur Appliquer ou OK pour
insérer le bouton Flash dans la fenêtre de document.
Conseil : Pour afficher un aperçu du bouton en mode Création, cliquez sur Appliquer. La boîte de
dialogue reste ouverte et vous pouvez afficher un aperçu du bouton dans votre document.
Modification d’un objet de bouton Flash
Vous pouvez modifier les propriétés et le contenu d’un objet de bouton Flash.
Pour modifier un objet de bouton Flash :
1 Dans la fenêtre de document, cliquez sur l’objet de bouton Flash pour le sélectionner.
2 Ouvrez l’inspecteur de propriétés, le cas échéant.
L’inspecteur de propriétés affiche les propriétés du bouton Flash. Il permet de modifier les
attributs HTML du bouton, tels que la largeur, la hauteur et la couleur d’arrière-plan.
3 Pour apporter des modifications au contenu, affichez la boîte de dialogue Insérer le bouton
Flash en utilisant l’une des méthodes suivantes :
■ Double-cliquez sur l’objet de bouton Flash.
■ Cliquez sur le bouton Modifier dans l’inspecteur de propriétés.
■ Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh), puis choisissez Modifier dans le menu contextuel.
4 Dans la boîte de dialogue Insérer le bouton Flash, modifiez le contenu des zones indiquées dans
Insertion et modification d’un objet de bouton Flash, page 373.
Dans la fenêtre Création, vous pouvez redimensionner l’objet à l’aide des poignées de
redimensionnement. Vous pouvez rendre à l’objet sa taille d’origine en sélectionnant Rétablir la
taille dans l’inspecteur de propriétés (voir Redimensionnement d’une image, page 323).
Lecture d’un objet de bouton Flash dans le document
Vous pouvez prévisualiser un bouton Flash dans la fenêtre de document Dreamweaver.
374
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
Pour afficher l’objet de bouton Flash dans la fenêtre de document :
1 En mode Création, sélectionnez l’objet de bouton Flash dans le document.
2 Dans l’inspecteur de propriétés, cliquez sur Lecture.
3 Cliquez sur le bouton Arrêt pour arrêter la prévisualisation.
Remarque : Vous ne pouvez pas modifier l’objet de bouton Flash pendant sa lecture.
Il est toujours judicieux d’afficher un aperçu du document dans le navigateur pour obtenir une
représentation exacte du bouton Flash.
Insertion d’un objet texte Flash
L’objet de texte Flash permet de créer et d’insérer une animation Flash contenant uniquement du
texte. Vous pouvez ainsi créer une petite animation graphique vectorielle avec les polices et le texte
de votre choix.
Pour insérer un objet de texte Flash :
1 Dans la fenêtre de document, placez le point d’insertion là où vous souhaitez insérer le texte
Flash.
2 Pour ouvrir la boîte de dialogue Insérer le texte Flash, procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, choisissez Support et cliquez sur l’icône
Texte Flash.
■ Choisissez Insertion > Médias > Texte Flash.
La boîte de dialogue Insérer le texte Flash s’affiche.
3 Renseignez la boîte de dialogue Insérer le texte Flash, et cliquez sur Appliquer ou OK pour
insérer le texte Flash dans la fenêtre de document.
Si vous cliquez sur le bouton Appliquer, la boîte de dialogue reste ouverte et vous pouvez
prévisualiser le texte dans le document.
Pour modifier ou lire l’objet de texte Flash, suivez la même procé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érer des animations Flash dans vos pages.
Insertion d’animations Flash
375
Pour insérer un fichier SWF (animation Flash) :
1 Dans la fenêtre de document (mode Création), placez le point d’insertion à l’endroit où vous
souhaitez insérer l’animation, puis procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, choisissez Support et cliquez sur l’icône
Flash.
■ Choisissez Insertion > Médias > Flash.
2 Dans la boîte de dialogue qui s’affiche, sélectionnez un fichier d’animation Flash (.swf).
Un espace réservé Flash s’affiche dans la fenêtre de document (contrairement aux objets de
texte et de bouton Flash). Pour plus d’informations sur la définition des propriétés d’une
animation Flash, sélectionnez l’espace réservé, puis cliquez sur le bouton d’aide de l’inspecteur
de propriétés.
FlashPour afficher l’aperçu d’une animation dans la fenêtre de document :
1 Dans cette fenêtre, cliquez sur l’espace réservé pour Flash afin de sélectionner l’animation Flash
à prévisualiser.
2 Dans l’inspecteur de propriétés, cliquez sur le bouton Lecture. Cliquez sur le bouton Arrêt pour
arrêter la prévisualisation. Vous pouvez également prévisualiser l’animation Flash dans un
navigateur en appuyant sur la touche F12.
Conseil : Pour pré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éfinis sur le mode de lecture.
Téléchargement et installation des éléments Flash
Avant d’utiliser des éléments Flash dans vos pages Web, vous devez commencer par les ajouter à
Dreamweaver à l’aide du logiciel Extension Manager. Le logiciel Extension Manager est une
application indépendante permettant d’installer et de gérer les extensions dans les applications
Macromedia. Vous pouvez lancer Extension Manager à partir de Dreamweaver en choisissant
Commandes > Gérer les extensions.
Pour rechercher les éléments Flash de Dreamweaver les plus récents, consultez le site Web de
Macromedia Exchange, à l’adresse suivante : http://www.macromedia.com/go/
dreamweaver_exchange_fr/. Sur ce site, vous pouvez vous connecter et télécharger des éléments
Flash et d’autres extensions Dreamweaver (un grand nombre d’entre elles sont gratuites),
participer à 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 éléments Flash ou d’autres extensions Dreamweaver.
Pour plus d’informations concernant l’utilisation d’Extension Manager afin d’installer des
éléments Flash (ainsi que d’autres extensions Dreamweaver), voir Ajout d’extensions dans
Dreamweaver, page 61.
Insertion d’éléments Flash
Dreamweaver vous permet d’insérer des éléments Flash dans vos documents. Les éléments Flash
vous permettent de créer aisément et rapidement des applications Web enrichies à l’aide
d’éléments précréés. Pour plus d’informations sur les éléments Flash et la façon de les utiliser dans
vos pages Web, voir Types de fichier Flash, page 368.
376
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
Pour insérer un élément Flash :
1 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous souhaitez insérer un
élément Flash et procédez de l’une des manières suivantes :
■ Dans la catégorie Eléments Flash de la barre Insérer, cliquez sur l’icône de l’élément Flash
que vous souhaitez insérer.
■ Choisissez Insertion > Elément Flash > Nom de l’élément Flash.
La boîte de dialogue Enregistrer l’élément Flash s’affiche alors.
2 Tapez le nom de fichier choisi pour l’élément Flash et enregistrez-le à l’endroit voulu de votre
site.
3 Cliquez sur OK.
L’espace réservé à l’élément Flash apparaît dans le document. Vous pouvez modifier les
propriétés de l’élément Flash à l’aide des inspecteurs de balises ou de propriétés.
4 Choisissez Fichier > Aperçu dans le navigateur pour afficher un aperçu de l’élément Flash.
Modification des attributs d’un élément Flash
Il est possible de modifier les attributs d’un élément Flash à l’aide des inspecteurs de balises ou de
propriétés.
Pour modifier les attributs d’un élément Flash :
1 Dans la fenêtre de document, effectuez l’une des procédures suivantes :
En mode Création, sélectionnez l’élément Flash.
■ En mode Code, cliquez n’importe où sur le nom de l’élément Flash ou sur son contenu.
2 Ouvrez l’inspecteur de balises si ce n’est déjà fait (Fenêtre > Inspecteur de balises).
3 Modifiez les attributs de l’élément Flash à l’aide de l’inspecteur de balises et de l’inspecteur de
propriétés.
4 Pour que les modifications apportées soient prises en compte dans votre document, appuyez sur
la touche Entré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érer des animations Shockwave dans vos documents.
Shockwave, la norme Macromedia pour les éléments multimédia interactifs sur le Web, est un
format compressé qui autorise le téléchargement rapide des fichiers multimédia créés dans
Macromedia Director, ainsi que leur lecture dans la plupart des navigateurs.
Pour insérer une animation Shockwave :
1 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous souhaitez insérer
une animation Shockwave et procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Support et sélectionnez
l’icône Shockwave dans le menu.
■ Choisissez Insertion > Médias > Shockwave.
2 Dans la boîte de dialogue qui s’affiche, sélectionnez un fichier d’animation.
Insertion d’animations Shockwave
377
3 Dans l’inspecteur de propriétés, tapez la largeur et la hauteur de l’animation dans les zones L et
H.
Ajout d’une vidéo
Plusieurs méthodes vous permettent d’ajouter une vidéo à votre page Web et vous pouvez faire
appel à divers formats. L’utilisateur peut télécharger les vidéos ou elles peuvent être diffusées et
lues pendant leur téléchargement.
Pour inclure une petite séquence vidéo téléchargeable par les utilisateurs de votre page :
1 Placez le fichier vidéo dans le dossier de votre site.
Ces clips se présentent souvent au format AVI ou MPEG.
2 Insérez un lien vers la séquence ou incorporez-la dans votre page.
Pour établir un lien vers la séquence, entrez un texte pour le lien (par exemple, « Téléchargez la
vidéo »), sélectionnez le texte et cliquez sur l’icône de dossier dans l’inspecteur de sélections.
Recherchez le fichier vidéo et sélectionnez-le.
Pour plus d’informations à ce sujet, voir Insertion du contenu d’un plug-in Netscape Navigator,
page 379.
Remarque : L’utilisateur doit télécharger une application d’aide pour visualiser les formats lus en
transit, comme RealMedia, QuickTime et Windows Media.
Ajout de son à une page
Il est possible d’ajouter du son à 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 à considérer avant de décider d’un
format et d’une méthode d’ajout de son : son objectif, son public, la taille du fichier, la qualité du
son et les différences entre les navigateurs.
Remarque : Le traitement des fichiers est très différent et incohérent suivant les navigateurs. Vous
pouvez, si vous le souhaitez, ajouter un fichier audio à une animation Flash, puis incorporer le fichier
SWF pour assurer une meilleure cohérence.
Lien vers un fichier audio
Un lien vers un fichier audio est une méthode simple et efficace pour ajouter du son à une page
Web. Cette méthode d’incorporation de fichiers audio permet aux visiteurs de choisir s’ils veulent
écouter le fichier et rend le fichier disponible pour un plus vaste public.
Pour créer un lien vers un fichier audio :
1 Sélectionnez le texte ou l’image à utiliser comme lien vers le fichier audio.
2 Dans l’inspecteur de propriétés, cliquez sur l’icône de dossier pour rechercher le fichier audio
ou tapez le nom et le chemin d’accès au fichier dans la zone Lien.
378
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
Incorporation d’un fichier son
L’opération consistant à incorporer un son intègre le fichier audio directement dans la page, mais
le son est uniquement lu si les visiteurs du site disposent du plug-in approprié pour le fichier
audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond
ou pour contrôler le volume, l’apparence du lecteur sur votre page ou encore les points de
démarrage et d’arrêt du fichier sonore.
Conseil : Lorsque vous incorporez des fichiers sons à vos pages Web, réfléchissez bien à l’usage
qu’il est possible d’en faire et de quelle façon les visiteurs pourraient s’en servir. Proposez toujours
une commande permettant d’éteindre ou de couper le son, au cas où certains visiteurs ne
souhaiteraient pas entendre le contenu audio.
Pour incorporer un fichier audio :
1 En mode Création, placez le point d’insertion à l’endroit où vous souhaitez incorporer le fichier
et procédez de l’une des manières suivantes :
Dans la catégorie Commun de la barre Insérer, cliquez sur le bouton Support et sélectionnez
l’icône du plug-in.
■ Sélectionnez Insertion > Médias > 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étés, cliquez sur l’icône de dossier pour rechercher le fichier audio
ou tapez le nom et le chemin d’accès au fichier dans la zone Lien.
3 Entrez la largeur et la hauteur en saisissant les valeurs dans les zones de texte appropriées ou en
redimensionnant l’espace réservé au plug-in dans la fenêtre de document.
Ces valeurs déterminent la taille à laquelle les contrôles audio sont affichés dans le navigateur.
■
Insertion du contenu d’un plug-in Netscape Navigator
Vous pouvez créer du contenu, par exemple une séquence vidéo QuickTime pour un plug-in
Netscape Navigator, puis utiliser Dreamweaver pour insérer ce contenu dans un
document HTML. Par exemple, RealPlayer et QuickTime sont des plug-ins par dé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écutera dans un plug-in du navigateur de
l’utilisateur.
Pour insérer le contenu d’un plug-in Netscape Navigator :
1 Dans la fenêtre de document (mode Création), placez le point d’insertion à l’endroit où vous
souhaitez insérer le contenu, puis procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, choisissez Support et cliquez sur l’icône du
plug-in.
■ Sélectionnez Insertion > Médias > Plug-in.
2 Dans la boîte de dialogue qui s’affiche, sélectionnez un fichier de contenu pour un plug-in
Netscape Navigator.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Insertion du contenu d’un plug-in Netscape Navigator
379
Lecture de plug-ins dans la fenêtre de document
Vous pouvez afficher un aperçu des animations qui font directement appel aux plug-ins Netscape
Navigator dans le mode Création dans la fenêtre de document. Vous pouvez lire simultanément
tous les éléments des plug-ins pour savoir comment la page s’affichera sur le poste de l’utilisateur
ou lire chaque élément individuellement pour vous assurer que vous avez incorporé le bon
élément multimédia.
Remarque : Il n’est pas possible d’afficher un aperçu des films ou animations basées sur des
contrôles ActiveX.
Pour lire des animations dans le mode Création, les plug-ins adéquats doivent être installés sur
votre ordinateur.
Pour lire le contenu du plug-in dans la fenêtre de document :
1 Insérez un ou plusieurs éléments multimédia en choisissant la commande Insertion > Médias >
Shockwave, Insertion > Médias > Flash ou Insertion > Médias > Plug-in.
2 Procédez de l’une des manières suivantes :
■
■
Sélectionnez un des éléments multimédia que vous avez insérés, puis choisissez la
commande Affichage > Plug-ins > Lire ou cliquez sur le bouton de lecture de l’inspecteur de
propriétés.
Choisissez la commande Affichage > Plug-ins > Lire tout pour lire tous les éléments
multimédia de la page sélectionnée qui font appel à 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êter la lecture du contenu d’un plug-in :
• Sélectionnez un élément multimédia, puis choisissez la commande Affichage > Plug-ins >
Arrêter ou cliquez sur le bouton d’arrêt dans l’inspecteur de propriétés.
Vous pouvez également sélectionner Affichage > Plug-ins > Arrêter tout pour interrompre la
lecture de tous les contenus des plug-ins.
Dépannage des plug-ins de Netscape Navigator
Vous avez suivi les étapes permettant de lire le contenu d’un plug-in dans la fenêtre de document,
mais constatez qu’une partie ne fonctionne pas. Essayez l’opération suivante :
• Vérifiez que le plug-in associé est bien installé sur votre ordinateur et que sa version est
•
•
380
compatible avec le contenu chargé.
Ouvrez le fichier Configuration/Plugins/UnsupportedPlugins.txt dans un éditeur de texte et
vérifiez si le plug-in posant problème est répertorié. Ce fichier conserve la trace des plug-ins
étant la source de problèmes dans Dreamweaver et qui ne sont donc pas pris en charge. Si vous
constatez des problèmes avec un plug-in particulier, il est souhaitable de l’ajouter à ce fichier.
Vérifiez que vous avez suffisamment de mémoire. Certains plug-ins nécessitent de 2 à 5 Mo de
mémoire supplémentaire pour fonctionner.
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
Insertion d’un contrôle ActiveX
Vous pouvez ajouter un contrôle ActiveX à votre page. Les contrôles ActiveX (autrefois appelés
commandes OLE) sont des composants ré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ètres d’un contrôle ActiveX chargé par
le navigateur du visiteur.
Pour insérer du contenu de contrôle ActiveX :
1 Dans la fenêtre de document, positionnez le curseur à l’emplacement où insérer le contenu et
procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche de défilement du bouton
Support et sélectionnez l’icône ActiveX.
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche de défilement du bouton
Support et sélectionnez l’icône ActiveX. Lorsque l’icône ActiveX s’affiche dans la barre
Insérer, vous pouvez la faire glisser jusqu’à la fenêtre du document.
■ Choisissez Insertion > Médias > ActiveX.
Une icône indique l’emplacement de la page où apparaîtra le contrôle ActiveX dans Internet
Explorer.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Insertion d’une applet Java
Vous pouvez insérer une applet Java dans un document HTML à l’aide de Dreamweaver. Java est
un langage de programmation qui permet de développer des applications légères (applets) pouvant
être incorporées dans des pages Web.
Pour insérer une applet Java :
1 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous souhaitez insérer
l’applet, puis procédez de l’une des manières suivantes :
■ Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche de défilement du bouton
Support et sélectionnez l’icône Applet.
■ Choisissez Insertion > Médias > Applet.
2 Dans la boîte de dialogue qui s’affiche, sélectionnez un fichier contenant une applet Java.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Utilisation de comportements pour contrôler les objets
multimédias
Vous pouvez ajouter des comportements à votre page pour commencer ou arrêter la lecture de
divers objets multimédia.
Contrôler Shockwave ou Flash permet de lire, d’arrêter, de rembobiner ou d’atteindre un cadre
dans une animation Shockwave ou Flash (voir Contrôler Shockwave ou Flash, page 392).
permet de jouer un son. Vous pouvez ainsi jouer un effet sonore dès que l’utilisateur
survole un lien à l’aide de la souris (voir Lire le son, page 398).
Lire le son
Utilisation de comportements pour contrôler les objets multimédias
381
Vérifier le plug-in permet de vérifier si les visiteurs de votre site disposent du plug-in requis, puis
de les diriger vers différentes URL, en fonction du résultat. Cela s’applique uniquement aux plugins de Netscape Navigator, car ce comportement ne vérifie pas les contrôles ActiveX. Pour plus
d’informations, voir Vérifier le plug-in, page 391.
382
Chapitre 17 : Ajout d’éléments audio, vidéo et interactifs
CHAPITRE 18
Utilisation des comportements JavaScript
Les comportements de Macromedia Dreamweaver MX 2004 insèrent du code JavaScript dans les
documents pour permettre aux visiteurs d’une page Web de la modifier ou d’effectuer certaines
tâches. Un comportement est la combinaison d’un événement et d’une action déclenchée par cet
événement. Dans le panneau Comportements, vous pouvez ajouter un comportement à une page
en spécifiant une action, puis l’événement qui déclenche cette action.
Remarque : Le code de comportement est un code JavaScript côté client, c’est-à-dire qu’il
s’exécute sur des navigateurs, mais pas sur des serveurs.
Les événements sont en réalité des messages généré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énère un événement onMouseOver pour ce lien, puis il vérifie s’il existe
un code JavaScript (spécifié dans la page affichée) qu’il est censé appeler lorsqu’il génère cet
événement pour ce lien. Ces événements sont définis pour différents éléments de la page ; par
exemple, dans la plupart des navigateurs, onMouseOver et onClick sont des événements associés à
des liens, tandis que onLoad est un événement associé à des images et à la section body du
document.
Une action consiste en un code JavaScript pré-rédigé qui effectue une tâche spécifique, comme
ouvrir une fenêtre de navigateur, afficher ou masquer un calque, diffuser un son ou arrêter une
animation Macromedia Shockwave. Les actions proposées dans Dreamweaver MX sont
soigneusement rédigées par les ingénieurs Dreamweaver afin d’assurer une compatibilité internavigateurs maximale.
Une fois que vous avez associé un comportement à un élément de la page, lorsque l’événement
spécifié a lieu pour cet élément, le navigateur appelle l’action (le code JavaScript) associée à cet
événement (les événements disponibles pour déclencher une action donnée varient d’un
navigateur à l’autre). Par exemple, si vous associez l’action Message contextuel à un lien et
spécifiez que l’action sera déclenchée par l’événement onMouseOver, votre message s’affiche dans
une boîte de dialogue lorsqu’un utilisateur pointe la souris sur ce lien dans le navigateur.
Un événement unique peut déclencher plusieurs actions différentes et vous pouvez définir l’ordre
d’exécution de ces actions.
383
Dreamweaver MX 2004 propose environ une vingtaine d’actions de comportement ; des actions
supplémentaires sont disponibles sur le site Web de Macromedia Exchange ainsi que sur les sites
d’autres développeurs (voir Téléchargement et installation de comportements créés par des
développeurs tiers, page 388). Vous pouvez également écrire vos propres actions de comportement
si vous maîtrisez le langage JavaScript. Pour plus d’informations sur la rédaction d’actions de
comportement, voir l’aide d’Extension de Dreamweaver (Aide > Extension de Dreamweaver).
Remarque : Les termes comportement et action appartiennent à la terminologie Dreamweaver et non
à la terminologie HTML. Du point de vue du navigateur, une action est simplement un élément de
code JavaScript.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
Utilisation du panneau Comportements, page 384
A propos des événements, page 384
Application d’un comportement, page 385
Association d’un comportement à du texte, page 386
Modification d’un comportement, page 387
Actualisation d’un comportement, page 387
Création de nouvelles actions, page 388
Téléchargement et installation de comportements créés par des développeurs tiers, page 388
Utilisation des actions de comportement livrées avec Dreamweaver, page 388
Utilisation du panneau Comportements
Utilisez le panneau Comportements pour associer des comportements à des éléments de la page
(plus précisément aux balises) et pour modifier les paramètres des comportements précédemment
associés.
Pour ouvrir le panneau Comportement :
• Choisissez Fenêtre > Comportements.
Les comportements déjà associés à l’élément de la page actuellement sélectionnée sont répertoriés
dans la liste de comportements (la zone principale du panneau), établie par événement et par
ordre alphabétique. Si un même événement est associé à plusieurs actions, ces dernières sont
exécutées dans l’ordre dans lequel elles apparaissent dans la liste. Si aucun comportement
n’apparaît dans la liste, cela signifie qu’aucun comportement n’est associé à l’élément sélectionné.
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 événements
Chaque navigateur propose une série d’événements que vous pouvez associer avec les actions
répertoriées dans le menu contextuel Actions (+) du panneau Comportements. Lorsqu’un visiteur
de votre page Web déclenche une action interactive avec celle-ci, en cliquant sur une image par
exemple, le navigateur génère un événement. Cet événement permet d’appeler une fonction
JavaScript exécutant une action quelconque. Certains événements peuvent aussi être généré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ègre un certain nombre
d’actions courantes que vous pouvez déclencher à l’aide de ces événements.
384
Chapitre 18 : Utilisation des comportements JavaScript
Pour obtenir les noms et descriptions des événements fournis par chacun des navigateurs, voir le
centre de support de Dreamweaver à l’adresse http://www.macromedia.com/go/
dreamweaver_support_fr/.
Différents événements apparaissent dans le menu contextuel Evénements, selon l’objet sélectionné
et les navigateurs spécifiés dans le menu déroulant Afficher les événements pour. Pour savoir quels
sont les événements pris en charge par un navigateur spécifique pour un élément de page donné,
insérez l’élément de la page dans votre document et associez-lui un comportement, puis reportezvous au menu contextuel Evénements dans le panneau Comportements. Certains événements
peuvent apparaître en grisé (désactivés) si les objets pertinents n’existent pas encore dans la page
ou si l’objet sélectionné ne peut pas recevoir d’événements. Si les événements désirés ne s’affichent
pas, vérifiez que vous avez sélectionné l’objet correct ou modifiez les navigateurs cibles dans le
menu déroulant Afficher les événements pour.
Si vous associez un comportement à une image, certains événements (par exemple onMouseOver)
apparaissent entre parenthèses. Ces événements ne sont disponibles que pour des liens. Lorsque
vous en sélectionnez un, Dreamweaver entoure l’image d’une balise a pour définir un lien nul,
représenté par javascript:; dans la zone de texte Lien de l’inspecteur de propriétés. Vous
pouvez modifier la valeur de ce lien pour le transformer en vé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écisément quelles balises peuvent être utilisées avec un événement donné dans un
navigateur donné, recherchez l’évé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 (à la balise body) ou à des liens, des
images, des éléments de formulaire ou divers autres éléments HTML.
Le navigateur cible que vous choisissez détermine les événements pris en charge pour un élément
donné. Internet Explorer 4.0, par exemple, propose davantage d’événements pour chaque élé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 à un texte brut. Pour plus
d’informations, voir Association d’un comportement à du texte, page 386.
Vous pouvez attribuer plusieurs actions à chaque événement. Les actions sont exécutées dans
l’ordre dans lequel elles sont répertorié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électionnez un élément dans la page, tel qu’une image ou un lien.
Pour associer un comportement à l’ensemble de la page, cliquez sur la balise <body> dans le
sélecteur de balises, situé dans le coin inférieur gauche de la fenêtre de document.
2 Choisissez Fenêtre > 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ées dans le menu. Ces actions
peuvent être grisées quand un objet obligatoire n’existe pas dans le document actif Par exemple,
l’action Contrôler Shockwave ou Flash s’affiche en grisé si le document ne contient pas de
fichiers SWF Macromedia Flash ou Shockwave. Si aucun événement n’est disponible pour
l’objet sélectionné, toutes les actions s’affichent en grisé.
Lorsque vous choisissez une action, une boîte de dialogue s’affiche avec les paramètres et les
instructions pour cette action.
4 Saisissez les paramètres pour l’action et cliquez sur OK.
Toutes les actions proposées dans Dreamweaver fonctionnent dans les versions 4.0 ou
ultérieures des navigateurs. Certaines d’entre elles sont refusées par les navigateurs moins
récents. Voir Utilisation des actions de comportement livrées avec Dreamweaver, page 388.
5 L’événement par défaut qui déclenchera l’action apparaît dans la colonne Evénements. S’il ne
s’agit pas de l’événement que vous désirez utiliser, sélectionnez-en un autre dans le menu
contextuel Evénements (pour ouvrir le menu contextuel Evénements, sélectionnez un
événement ou une action dans le panneau Comportements, puis cliquez sur la flèche noire
pointée vers le bas qui apparaît entre le nom de l’événement et le nom de l’action).
Association d’un comportement à du texte
Vous ne pouvez pas associer un comportement à un texte brut. Les balises telles que p et span ne
générant pas d’événements dans les navigateurs, il n’est donc pas possible de déclencher une
action à partir de ces balises.
Toutefois, vous pouvez associer un comportement à un lien. La manière la plus simple d’associer
un comportement à du texte consiste à ajouter un lien nul (qui ne correspond à rien) au texte,
puis à 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 à un
lien, cependant les utilisateurs risquent de ne pas se rendre compte qu’ils peuvent cliquer sur cet
élément).
Pour associer un comportement au texte sélectionné :
1 Dans l’inspecteur de propriétés, entrez javascript:; dans la zone de texte Lien. N’oubliez pas
les deux points (:) et le point-virgule (;).
Remarque : Vous pouvez également utiliser un signe diè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énéralement préférable d’utiliser
cette approche JavaScript.
2 Lorsque le texte est sélectionné, ouvrez le panneau Comportements (Fenêtre >
Comportements).
3 Sélectionnez une action dans le menu contextuel Actions, entrez les paramètres de l’action, puis
choisissez un événement pour la déclencher. Pour plus d’informations, voir Application d’un
comportement, page 385.
Pour modifier l’apparence du texte lié de sorte qu’il ne ressemble plus à un lien :
1 Choisissez Affichage > Code pour activer le mode Code de la fenêtre de document.
2 Trouvez le lien.
3 Dans la balise a href du lien, insérez l’attribut : style="text-decoration:none; color:black".
Ce paramètre désactive le soulignement et définit la couleur du texte sur noir (bien sûr, si le
texte environnant est d’une couleur différente, utilisez cette couleur au lieu du noir).
386
Chapitre 18 : Utilisation des comportements JavaScript
Notez que cet attribut est un style CSS incorporé. Tout style CSS incorporé à un lien unique
remplace les autres styles CSS appliqués à ce dernier, mais il n’a aucun impact en dehors de ce
lien. Pour modifier l’apparence du texte lié dans toute une page ou sur votre site entier, utilisez
les styles CSS pour cré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é, vous pouvez modifier l’événement qui déclenche l’action,
ajouter ou supprimer des actions et modifier les paramètres des actions.
Pour modifier un comportement :
1 Sélectionnez un objet auquel un comportement a été associé.
2 Choisissez Fenêtre > Comportements pour ouvrir le panneau Comportements.
Les comportements sont classés dans le panneau par ordre alphabétique des événements. Si un
même événement dispose de plusieurs actions, ces dernières apparaissent dans l’ordre
chronologique d’exécution.
3 Procédez de l’une des manières suivantes :
■ Pour modifier les paramètres d’une action, double-cliquez sur le nom du comportement ou
sélectionnez-le et appuyez sur la touche Entrée (Windows) ou Retour (Macintosh), modifiez
les paramètres dans la boîte de dialogue, puis cliquez sur OK.
■ Pour modifier l’ordre d’apparition des actions pour un événement donné, sélectionnez une
action et cliquez sur la touche directionnelle Haut ou Bas. Vous pouvez également
sélectionner l’action, puis la copier et la coller à l’emplacement de votre choix parmi les
autres actions.
■ Pour supprimer un comportement, sélectionnez-le et cliquez sur le signe moins (-) ou
appuyez sur Supprimer.
Actualisation d’un comportement
Si vos pages contiennent des comportements créés avec Dreamweaver 1 ou Dreamweaver 2, ces
comportements ne sont pas automatiquement actualisé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édure détaillée dans cette section), toutes les
autres occurrences du comportement présentes dans la page sont également mises à jour. Les
comportements créés avec Dreamweaver 3 fonctionnent dans Dreamweaver 4 sans devoir être
modifiés.
Remarque : Comme indiqué ci-dessus, lorsque vous actualisez une occurrence de comportement
dans une page, toutes les autres occurrences de ce comportement dans la page sont également
actualisées. Vous devez néanmoins mettre à jour les comportements de chaque page de votre site.
Pour actualiser un comportement dans une page :
1 Sélectionnez l’élément auquel est attaché le comportement.
2 Ouvrez le panneau Comportements
3 Double-cliquez sur le comportement.
4 Cliquez sur OK dans la boîte de dialogue du comportement.
Toutes les occurrences de ce comportement sont actualisées.
Actualisation d’un comportement
387
Création de nouvelles actions
Les actions consistent en un code JavaScript et HTML. Si vous maîtrisez JavaScript, vous pouvez
rédiger de nouvelles actions et les ajouter dans le menu contextuel Actions du panneau
Comportements. Pour plus d’informations, voir Extension de Dreamweaver.
Téléchargement et installation de comportements créés par des
développeurs tiers
L’une des fonctions les plus utiles de Dreamweaver est son extensibilité, c’est-à-dire qu’il offre aux
utilisateurs maîtrisant JavaScript la possibilité de rédiger du code JavaScript qui étend les capacités
de Dreamweaver. Bon nombre de ces utilisateurs ont choisi de partager leurs extensions avec
d’autres utilisateurs en les plaçant sur le site Web de Macromedia Exchange pour Dreamweaver
(http://www.macromedia.com/go/dreamweaver_exchange_fr/).
Pour télécharger et installer de nouveaux comportements à partir du site Macromedia
Exchange :
1 Ouvrez le panneau Comportements et choisissez l’option Télécharger d’autres comportements
dans le menu contextuel Actions (+).
Votre navigateur principal s’ouvre sur le site d’Exchange (vous devez être connecté à Internet
pour télécharger des comportements).
2 Localisez les progiciels.
3 Téléchargez et installez le progiciel d’extension souhaité.
Pour plus d’informations, voir Ajout d’extensions dans Dreamweaver, page 61.
Utilisation des actions de comportement livrées avec
Dreamweaver
Les actions de comportement incluses dans Dreamweaver ont été conçues pour fonctionner avec
les versions 4.0 et ultérieures de Netscape Navigator et Internet Explorer. La plupart des actions
de comportement fonctionnent également dans Netscape Navigator version 3.0 et ultérieures (en
revanche, les comportements associés aux calques ne fonctionnent pas dans Netscape
Navigator 3.0). La plupart d’entre elles échouent sans que l’utilisateur en soit informé dans
Internet Explorer version 3.0.
Remarque : Les actions Dreamweaver ont été rédigé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é
inter-navigateurs.
Bien que les actions Dreamweaver aient été rédigées pour augmenter la compatibilité internavigateurs, certaines actions ne fonctionnent pas avec les navigateurs plus anciens. De même,
certains navigateurs ne prennent pas en charge JavaScript et de nombreuses personnes désactivent
JavaScript sur leur navigateur lorsqu’ils explorent la Toile. Pour optimiser les ré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écifier qu’une
fonction ou une ligne personnalisée de code JavaScript doit être exécutée lorsqu’un événement se
produit (vous pouvez rédiger le code JavaScript vous-même ou utiliser le code fourni gratuitement
par plusieurs bibliothèques JavaScript sur Internet).
Pour utiliser l’action Appel JavaScript :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Appel JavaScript dans le menu contextuel Actions.
3 Tapez le code JavaScript à exécuter ou le nom de la fonction.
Par exemple, pour créer un bouton « Retour » vous pouvez saisir if (history.length >
0){history.back()}. Si vous avez encapsulé votre code dans une fonction, indiquez simplement
le nom de la fonction (par exemple, hogback()).
4 Cliquez sur OK.
5 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Changer la propriété
Utilisez cette action pour modifier la valeur d’une des propriétés d’un objet (par exemple, la
couleur d’arrière-plan d’un calque ou l’action d’un formulaire). C’est le navigateur qui détermine
quelles propriétés sont modifiables. Beaucoup plus de propriétés peuvent être modifié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çon dynamique la couleur
d’arrière-plan d’un calque.
Remarque : N’utilisez cette action que si vous êtes expert en HTML et en JavaScript.
Pour utiliser l’action Changer la propriété :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Changer la propriété dans le menu contextuel
Actions.
3 Dans le menu déroulant Type d’objet, sélectionnez le type d’objet dont vous souhaitez modifier
une propriété.
Tous les objets nommés du type d’objet sélectionné s’affichent dans le menu déroulant Objet
nommé.
4 Sélectionnez un objet dans le menu déroulant Objet nommé.
5 Choisissez ensuite une propriété dans le menu déroulant Propriété ou tapez le nom de la
propriété dans la zone de texte.
Pour savoir quelles propriétés peuvent être modifiées pour chaque navigateur, choisissez
différents navigateurs ou différentes versions de navigateurs dans le menu déroulant
Navigateur. Si vous tapez directement le nom d’une propriété, veillez à utiliser le nom
JavaScript exact (attention, les propriétés JavaScript tiennent compte des majuscules et
minuscules).
Utilisation des actions de comportement livrées avec Dreamweaver
389
6 Indiquez la nouvelle valeur de la propriété dans la zone de texte Nouvelle valeur et cliquez sur
OK.
7 Vérifiez que l’événement par défaut est bien l’événement désiré. (Lorsque cet événement se
produit, l’action est exécutée et la propriété est modifiée.)
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Vérifier le navigateur
Utilisez cette action pour aiguiller les visiteurs vers des pages différentes selon le modèle et la
version de leur navigateur. Par exemple, vous pouvez dé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 à 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ésactivé JavaScript verront quand même quelque chose.
Une autre option consiste à associer ce comportement à un lien nul (tel que <a
pour que l’action détermine à quelle page le lien renvoie, selon le
modèle et la version du navigateur du visiteur.
href="javascript:;">)
Pour utiliser l’action Vérifier le navigateur :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Vérifier le navigateur dans le menu contextuel
3
4
5
6
7
8
390
Actions.
Indiquez comment vous souhaitez distinguer les visiteurs : par modè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 éditeur, voient telle page, et que tous les utilisateurs d’une marque ou d’une version
diffé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écifiez une version de Netscape Navigator.
Dans les menus contextuels adjacents, sélectionnez les options respectives dans le cas où la
version de Netscape Navigator est celle que vous avez spécifiée (ou une version plus récente) et
dans le cas contraire.
Les options sont Atteindre l’URL, Atteindre l’URL sec. et Rester sur cette page.
Spécifiez une version de Microsoft Internet Explorer.
Dans les menus contextuels adjacents, sélectionnez les options respectives dans le cas où la
version d’Internet Explorer est celle que vous avez spécifiée (ou une version plus ré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éroulant Autres navigateurs, sélectionnez l’action qui sera exécutée si le
navigateur n’est ni Netscape Navigator, ni Internet Explorer (par exemple, l’utilisateur peut
utiliser un navigateur basé 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érer ce comportement, ils resteront sur cette page de toute façon.
9 Entrez le noms de fichier et le chemin d’accès à l’URL et à l’URL secondaire dans les zones de
texte situées en bas de la boîte de dialogue. Si vous indiquez une URL distante, vous devez faire
précéder l’adresse www du préfixe http://.
10 Cliquez sur OK.
11 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour. Le but de ce comportement étant de vérifier les différentes versions du
navigateur, il est préférable d’opter pour un événement qui fonctionne avec les versions 3.0 et
ultérieures des navigateurs.
Vérifier le plug-in
Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon que le plug-in
spécifié est installé ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s’ils
possèdent Shockwave, et sur une autre dans le cas contraire.
Remarque : Il est impossible de détecter des plug-ins spécifiques dans Microsoft Internet Explorer (IE)
à l’aide de JavaScript. Toutefois, si vous sélectionnez les plug-ins Flash ou Director, le code VBScript
approprié sera automatiquement ajouté à votre page pour les détecter dans Internet Explorer sous
Windows. Il est impossible de détecter les plug-ins dans Internet Explorer sur Macintosh.
Pour utiliser l’action Vérifier le plug-in :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et choisissez Vérifier le Plug-in dans le menu contextuel Actions.
3 Sélectionnez un plug-in dans le menu déroulant Plug-in, ou cliquez sur Entré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ît en gras sur la page A propos des
plug-ins dans Netscape Navigator (sous Windows, choisissez la commande Aide > 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é, aller à l’URL, spécifiez l’URL destinée aux utilisateurs qui
disposent du plug-in.
Si vous indiquez une URL distante, vous devez faire précéder l’adresse www du préfixe http://.
Pour que les utilisateurs disposant du plug-in restent sur la même page, laissez ce champ vide.
5 Dans la zone de texte Sinon, aller à 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ême page, laissez ce champ
vide.
6 Il est impossible de détecter les plug-ins dans Internet Explorer sur Macintosh, et la plupart des
plug-ins ne peuvent pas être détectés dans Internet Explorer sous Windows. Par défaut, lorsque
la détection est impossible, l’utilisateur est envoyé à l’URL indiquée dans la zone de texte Sinon.
Pour que l’utilisateur soit envoyé vers la première URL (Si trouvé), activez la case à cocher
Toujours aller à la première URL si la détection n’est pas possible. Lorsqu’elle est sélectionnée,
cette option signifie « on suppose a priori que l’utilisateur possède le plug-in, sauf si le navigateur
indique explicitement que ce n’est pas le cas ».
Utilisation des actions de comportement livrées avec Dreamweaver
391
En général, si le contenu du plug-in est un élément essentiel de votre page, activez l’option
« Toujours aller à la première URL si la détection n’est pas possible ». Le plus souvent, les
utilisateurs ne disposant pas de ce plug-in se verront proposer de le télécharger. Si le contenu
du plug-in n’est pas un élément essentiel de votre page, laissez cette option désactivée.
Cette option ne concerne qu’Internet Explorer ; Netscape Navigator détecte les plug-ins.
7 Cliquez sur OK.
8 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Contrôler Shockwave ou Flash
Utilisez cette fonction pour diffuser, arrêter ou rembobiner une animation Shockwave ou Flash ou
pour aller à une image précise de cette animation. Pour utiliser l’action Contrôler Shockwave ou
Flash :
1 Choisissez, selon le cas, Insertion > Médias > Shockwave ou Insertion > Médias > Flash pour
2
3
4
5
6
7
8
9
insérer un fichier Shockwave ou Flash SWF.
Choisissez Fenêtre > Propriétés et entrez un nom pour l’animation dans la zone de texte située
en haut à gauche (à côté de l’icône Shockwave ou Flash). Vous devez nommer l’animation pour
la contrôler avec l’action Contrôler Shockwave ou Flash.
Sélectionnez l’élément à utiliser pour contrôler l’animation Shockwave ou Flash. Par exemple,
si vous disposez de l’image d’un bouton « Lecture » à utiliser pour diffuser l’animation,
sélectionnez cette image.
Ouvrez le panneau Comportements (Fenêtre > Comportements).
Cliquez sur le bouton plus (+) et choisissez Contrôler Shockwave ou Flash dans le menu
contextuel Actions.
Une boîte de dialogue de paramètres apparaît.
Sélectionnez une animation dans le menu déroulant Animation.
Dreamweaver répertorie automatiquement les noms de toutes les animations Shockwave et
Flash du document actif (en particulier, Dreamweaver é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ôle de l’animation désirée : Jouer, Arrêter, Rembobiner ou Atteindre
l’image indiquée dans l’animation. L’option Jouer diffuse l’animation en commençant par
l’image où l’action a lieu.
Cliquez sur OK.
Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, modifiez le navigateur cible dans le sous-menu Afficher les événements
pour du menu Evénements.
Déplacement de calque
Cette action permet à l’utilisateur de déplacer un calque. Utilisez cette action pour créer des
puzzles, des contrôles de déplacement et autres éléments mobiles de l’interface.
392
Chapitre 18 : Utilisation des comportements JavaScript
Vous pouvez spé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 être aimanté par la cible ou non lorsqu’il arrive à
moins d’un certain nombre de pixels de la cible, l’action à déclencher lorsque le calque touche la
cible, etc.
L’action Déplacement de calque devant être appelée avant que le calque ne puisse être déplacé par
l’utilisateur, assurez-vous que l’événement qui déclenche l’action se produit avant que l’utilisateur
ne tente de faire glisser le calque. Le mieux est d’associer cette action à l’objet body (à l’aide de
l’événement onLoad), mais vous pouvez également l’associer à un lien remplissant la totalité du
calque (par exemple un lien autour d’une image), à l’aide de l’événement onMouseOver.
Pour utiliser l’action Déplacement de calque :
1 Choisissez Insertion > Calque ou cliquez sur le bouton Dessiner un calque de la barre Insérer,
2
3
4
5
6
7
8
puis dessinez un calque dans le mode Création de la fenêtre de document.
Sélectionnez la balise body en cliquant sur <body> dans le sélecteur de balises situé au bas de la
fenêtre de document.
Ouvrez le panneau Comportements.
Cliquez sur le bouton plus (+) et sélectionnez Déplacement de calque dans le menu contextuel
Actions.
Si cette action n’est pas disponible, un calque est probablement sélectionné. Etant donné que
les calques ne prennent pas en compte les événements dans les navigateurs 4.0, vous devez
sé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éroulant Afficher les événements
pour.
Dans le menu déroulant Calque, sélectionnez le calque que vous voulez rendre déplaçable.
Dans le menu déroulant Mouvement, sélectionnez Contraint ou Sans contrainte.
Les mouvements sans contrainte sont adaptés aux puzzles et aux autres jeux à base de glisserdéplacer. Pour les contrôles de déplacement et les objets mobiles (tiroirs, rideaux et stores),
choisissez un mouvement contraint.
Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans
les zones de texte Haut, Bas, Gauche et Droite.
Ces valeurs sont relatives à la position de départ du calque. Pour restreindre les déplacements à
l’inté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ées (exprimées en pixels) de la cible de dépôt dans les zones de texte
Gauche et Haut.
La cible de dépôt est le point sur lequel vous voulez que l’utilisateur « dépose » le calque. Un
calque est considéré comme ayant atteint la cible de dépôt lorsque ses coordonnées d’origine
(en haut à gauche) correspondent aux valeurs indiquées dans les zones de texte Gauche et
Haut. Ces coordonnées sont relatives à l’angle supérieur gauche de la fenêtre du navigateur.
Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec
les coordonnées actuelles du calque.
Utilisation des actions de comportement livrées avec Dreamweaver
393
9 Entrez une valeur (exprimée en pixels) dans la zone de texte Aligner si dans pour déterminer la
distance minimale à laquelle le visiteur doit approcher le calque de la cible pour que le calque se
place automatiquement sur celle-ci.
Les valeurs importantes permettent à l’utilisateur de trouver plus facilement la cible de dépôt.
10 Pour des puzzles simples et des défilements d’images, vous pouvez vous en tenir là. Pour définir
la poignée de déplacement du calque, suivre le mouvement du calque au cours de son
déplacement et déclencher une action lorsqu’il est déposé, cliquez sur l’onglet Avancé.
11 Pour spécifier que l’utilisateur doit cliquer dans une zone particulière du calque pour pouvoir le
déplacer, sélectionnez Zone dans le calque dans le menu déroulant Poignée de déplacement,
puis indiquez les coordonnées de l’origine (angle supérieur gauche) de la poignée de
déplacement, ainsi que la largeur et la hauteur de celle-ci.
Cette option est utile lorsque l’image insérée à l’intérieur du calque contient un symbole de
déplacement, par exemple une barre de titre ou une poignée de tiroir. N’activez pas cette
option si vous voulez que l’utilisateur soit libre de cliquer n’importe où dans le calque pour le
déplacer.
12 Choisissez, parmi les options de la zone En déplaçant, celles que vous désirez utiliser :
■ Activez l’option Placer le calque au premier plan si le calque doit être amené au niveau le
plus haut de l’ordre de superposition lors de son déplacement. Si vous activez cette option,
utilisez le menu déroulant qui apparaît pour indiquer si le calque doit être laissé au niveau
de visibilité le plus élevé ou si sa position d’origine dans l’ordre de superposition doit être
ré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écuté en boucle
pendant le déplacement du calque. Par exemple, vous pouvez écrire une fonction pour
surveiller les coordonnées du calque et afficher des indications, telles que « Tu brûles » ou
« Tu t’éloignes de la cible », dans une zone de texte. Pour plus d’informations, voir Collecte
d’informations sur le calque déplaçable, page 394.
13 Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateLayerPos()) dans la
deuxième zone de texte Appel JavaScript si vous voulez que le code ou la fonction soit exécuté(e)
lorsque le calque est déposé. Activez l’option Uniquement si aligné si le code JavaScript indiqué
ne doit être exécuté que si le calque a atteint la cible de dépôt.
14 Cliquez sur OK.
15 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
évé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éplacement de calque à un objet avec les
événements onMouseDown ou onClick.
Collecte d’informations sur le calque déplaçable
Lorsque vous associez l’action Déplacement de calque à un objet, Dreamweaver insère la fonction
MM_dragLayer() dans la section d’en-tête (head) de votre document. Cette fonction enregistre le
calque comme déplaçable et définit trois propriétés pour chaque calque déplaçable,
et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions
JavaScript pour déterminer les positions horizontale et verticale du calque et s’il a atteint la cible
de dépôt.
MM_LEFTRIGHT, MM_UPDOWN
394
Chapitre 18 : Utilisation des comportements JavaScript
Remarque : Les informations fournies ici sont destinées uniquement aux programmeurs JavaScript
expérimentés.
Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position verticale
courante du calque) dans un champ de formulaire appelé curPosField. (Les champs de
formulaires servent à afficher des informations pouvant être continuellement mises à jour, parce
qu’ils sont dynamiques, c’est-à-dire que vous pouvez modifier leur contenu aprè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étés MM_UPDOWN ou MM_LEFTRIGHT dans un champ de
formulaire, vous pouvez utiliser ces valeurs de différentes manières. Par exemple, vous pouvez
écrire une fonction qui affiche un message dans ce champ selon la distance qui reste à parcourir
jusqu’à la cible, ou appeler une autre fonction pour afficher ou masquer un calque selon la valeur
de cette distance.
Il est particulièrement utile de tester la propriété MM_SNAPPED lorsque vous disposez, sur une page,
de plusieurs calques qui doivent tous atteindre leur cible pour que l’utilisateur puisse passer à la
page ou à la tâche suivante. Par exemple, vous pouvez écrire une fonction qui compte le nombre
de calques ayant la valeur MM_SNAPPED à true et l’appeler chaque fois qu’un calque est déposé.
Lorsque le nombre de calques arrivés sur leur cible atteint le nombre désiré, vous pouvez envoyer
l’utilisateur à la page suivante ou afficher un message de félicitations.
Si vous avez associé l’action Déplacement de calque à des liens placés sur plusieurs calques à l’aide
de l’événement onMouseOver, vous devrez modifier légèrement la fonction MM_dragLayer() pour
éviter que la propriété MM_SNAPPED d’un calque aligné ne repasse à false lorsqu’il est survolé par
la souris (c’est le cas si vous utilisez l’action Déplacement de calque pour créer un puzzle de
photos, car la souris survole probablement des pièces déjà aligné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ésirez établir plusieurs cibles pour un seul calque).
Pour éviter le ré-enregistrement de calques alignés :
1 Effectuez une copie de sauvegarde de votre document avant de modifier le code (vous pouvez
2
3
4
5
effectuer cette opération à partir du panneau Site dans Dreamweaver ou dans l’Explorateur
Windows ou le Finder de Macintosh).
Choisissez Edition > Rechercher.
Sélectionnez Source HTML dans le menu déroulant Rechercher.
Tapez (!curDrag) (parenthè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ébut du document. Dreamweaver trouve l’instruction :
if (!curDrag) return false ;
6 Fermez la boîte de dialogue Rechercher, puis modifiez l’instruction dans l’Affichage de code de
la fenê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ées avec Dreamweaver
395
Les deux barres verticales (||) signifient « ou » et curDrag est une variable qui représente le
calque qui a été enregistré comme déplaçable. En français, cette instruction signifie « si
curDrag n’est pas un objet, ou s’il a déjà la valeur MM_SNAPPED, ce n’est pas la peine d’exécuter
le reste de la fonction ».
Atteindre l’URL
L’action Atteindre l’URL ouvre une nouvelle page dans la fenêtre en cours ou dans l’image
indiquée. Cette action est particulièrement utile pour modifier d’un seul clic le contenu de deux
cadres ou plus.
Pour utiliser l’action Atteindre l’URL :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sé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 énumère automatiquement les noms de tous les cadres qui se trouvent
dans le jeu de cadres actuel, ainsi que la fenêtre principale. S’il n’y a pas de cadres, cette dernière
est la seule option.
Remarque : Ne donnez pas à vos cadres les noms top, blank, self ou parent, car cela pourrait
produire des résultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec
les mots réservés utilisés dans le champ Cible.
4 Cliquez sur Parcourir pour sélectionner un document à ouvrir ou tapez le nom et le chemin
d’accès au fichier recherché dans la zone de texte URL.
5 Répétez les étapes 3 et 4 pour ouvrir d’autres documents dans d’autres cadres.
6 Cliquez sur OK.
7 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Menu de reroutage
Lorsque vous créez un menu de reroutage en utilisant Insertion > Objets de formulaire > Menu de
reroutage, Dreamweaver cré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écessaire d’associer manuellement
l’action Menu de reroutage à un objet. Pour plus d’informations sur les menus de reroutage et la
façon de les créer, voir Menus de reroutage, page 332.
Vous pouvez modifier un menu de reroutage existant de deux manières différentes :
• Vous pouvez modifier et réorganiser les éléments du menu, modifier les fichiers à rerouter et la
•
396
fenê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 éléments du menu comme vous modifieriez les éléments de
n’importe quel menu, en sélectionnant le menu et en utilisant le bouton Valeurs de la liste dans
l’Inspecteur de propriété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 à l’aide du panneau Comportements :
1 Créez un objet Menu de reroutage s’il n’en existe pas déjà dans votre document.
2 Sélectionnez un objet et ouvrez le panneau Comportements.
3 Double-cliquez sur Menu de reroutage dans la colonne Actions.
4 Effectuez les modifications souhaitées dans la boîte de dialogue Menu de reroutage, puis cliquez
sur OK.
Menu de reroutage / Aller
Cette action est étroitement associée à 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éer au préalable
un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement
sélectionné dans le menu de reroutage. En principe, il n’est pas indispensable d’ajouter un bouton
Aller à un menu de reroutage : le choix d’un élément de ce dernier provoque en général le
chargement d’une nouvelle URL sans aucune intervention supplémentaire. Toutefois, si
l’utilisateur choisit l’élément qui est déjà sélectionné dans le menu de reroutage, le reroutage ne se
produira pas. En général cela n’a pas d’importance, mais si le menu de reroutage apparaît dans
une image et que les élé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 à nouveau un élément
déjà sélectionné dans le menu de reroutage.
Pour ajouter une action Menu de reroutage / Aller :
1 Sélectionnez un objet qui sera utilisé comme bouton Aller (en géné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éroulant Choisissez un menu de reroutage, sélectionnez le menu qui activera le
bouton Aller.
4 Cliquez sur OK.
Ouvrir la fenêtre Navigateur
Utilisez l’action Ouvrir la fenêtre Navigateur pour ouvrir une URL dans une nouvelle fenêtre.
Vous pouvez spécifier les propriétés de la nouvelle fenê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être individuelle lorsque l’utilisateur clique sur l’image réduite ; avec ce comportement, vous
pouvez adapter la fenêtre à la taille exacte de l’image.
Si vous ne spécifiez aucun attribut, elle s’ouvrira avec la taille et les attributs de la fenêtre à partir
de laquelle elle a été lancée. Choisir des attributs pour la fenêtre désactive automatiquement tous
ceux qui ne sont pas explicitement activés. Par exemple, si vous ne définissez pas d’attributs pour
la fenêtre, elle peut s’ouvrir en 640 x 480 pixels et avoir une barre de navigation, une barre
d’adresse, une barre d’état et une barre de menus. Si vous définissez explicitement une largeur de
640 et une hauteur de 480 pixels, sans aucun autre attribut, la fenê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’état, pas de barre de
menus, pas de poignées de redimensionnement et pas de barres de défilement.
Utilisation des actions de comportement livrées avec Dreamweaver
397
Pour utiliser l’action Ouvrir une fenêtre du navigateur :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Ouvrir une fenêtre du navigateur dans le menu
contextuel Actions.
3 Tapez l’URL à afficher ou cliquez sur Parcourir pour sélectionner un fichier.
4 Choisissez parmi les options suivantes :
spécifie la largeur de la fenêtre en pixels.
Hauteur de fenêtre spécifie la hauteur de la fenêtre en pixels.
Barre d’outils de navigation est constituée de la barre de boutons de navigation qui comprend
les boutons Précédente, Suivante, Démarrage et Actualiser.
Barre d’adresses est la barre d’outils qui contient la zone de texte Adresse.
Barre d’état est la zone au bas de la fenêtre du navigateur dans laquelle apparaissent des
messages (par exemple, la durée de chargement restante et les URL associées aux liens).
Barre de menus est la zone de la fenêtre du navigateur (Windows) ou du Bureau (Macintosh)
où apparaissent les menus Fichier, Edition, Affichage, Aller et Aide. Vous devez explicitement
définir cette option si vous voulez que les utilisateurs puissent naviguer à partir de la nouvelle
fenêtre. Sinon, les utilisateurs ne pourront que fermer ou réduire la fenêtre (Windows), fermer
la fenêtre ou quitter l’application (Macintosh) à partir de la nouvelle fenêtre.
Barre de défilement si nécessaire permet de spécifier si les barres de défilement doivent
apparaître si le contenu dépasse la zone visible. Si vous ne définissez pas explicitement cette
option, les barres de défilement n’apparaîtront pas. Si l’option Poignées de redimensionnement
est également désactivée, les utilisateurs n’auront aucun moyen de visualiser le contenu situé en
dehors de la taille d’origine de la fenêtre (bien qu’ils puissent agrandir la fenêtre en en
déplaçant le bord).
Poignées de redimensionnement permet de spécifier si l’utilisateur pourra redimensionner la
fenêtre, soit en tirant le coin inférieur droit de la fenêtre, soit en cliquant sur le bouton
d’agrandissement en plein écran (Windows) ou sur la case de redimensionnement (Macintosh)
dans l’angle supérieur droit. Si cette option n’a pas été définie explicitement, les contrôles de
redimensionnement ne sont pas disponibles et l’angle inférieur droit ne peut être déplacé.
Nom de la fenêtre est le nom de la nouvelle fenêtre. La nouvelle fenêtre doit posséder un nom
si elle doit être pointée par des liens ou contrôlée en JavaScript. Ce nom ne peut contenir
d’espaces ou de caractères spéciaux.
5 Cliquez sur OK.
6 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Largeur de fenêtre
Lire le son
Utilisez cette action pour reproduire un son. Par exemple, vous pouvez déclencher un effet sonore
lorsque l’utilisateur passe sur un lien ou jouer une séquence musicale lorsque la page est en cours
de chargement.
398
Chapitre 18 : Utilisation des comportements JavaScript
Remarque : Certains navigateurs nécessitent une prise en charge audio externe (par exemple, un
plug-in audio) pour diffuser les sons. C’est pourquoi des navigateurs différents, possédant des plugins différents, diffusent souvent les sons de manière différente. Il est difficile de prévoir de manière
fiable la façon dont les utilisateurs du site vont percevoir les sons.
Pour utiliser l’action Lire le son :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Lire le son dans le menu contextuel Actions.
3 Cliquez sur Parcourir pour sélectionner un fichier son ou tapez le nom et le chemin d’accès à ce
fichier dans la zone de texte Lire le son.
4 Cliquez sur OK.
5 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Message contextuel
Cette action fait apparaître un message d’alerte JavaScript, avec le texte que vous avez spécifié.
Comme les alertes JavaScript ne disposent que d’un seul bouton (OK), utilisez cette action pour
informer l’utilisateur plutôt que pour lui proposer un choix.
Vous pouvez incorporer au texte des appels de fonction, propriété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écéder d’une barre oblique inversée (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Remarque : Vous ne pouvez pas contrôler l’apparence d’une alerte JavaScript ; celle-ci est
déterminée par le navigateur de l’utilisateur. Si vous désirez contrôler davantage l’apparence de votre
message, pensez à utiliser le comportement Ouvrir la fenêtre Navigateur. Pour plus d’informations,
voir Ouvrir la fenêtre Navigateur, page 397.
Pour utiliser l’action Message contextuel :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Message contextuel dans le menu contextuel
Actions.
3 Tapez votre message dans la zone de texte prévue à cet effet.
4 Cliquez sur OK.
5 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Utilisation des actions de comportement livrées avec Dreamweaver
399
Précharger les images
Cette action place dans la mémoire cache du navigateur les images qui ne sont pas
immédiatement affichées lors du chargement de la page (par exemple les images de substitution
appelées par un comportement ou une fonction en JavaScript). Cela évite à l’utilisateur d’attendre
que ces images soient chargées, lorsqu’un événement déclenche leur apparition.
Remarque : L’action Permuter une image précharge automatiquement toutes les images
sélectionnées lorsque vous choisissez l’option Précharger les images dans la boîte de dialogue
Permuter une image ; dans ce cas, il n’est pas nécessaire d’ajouter manuellement l’action Précharger
les images lorsque vous utilisez l’action Permuter une image.
Pour utiliser l’action Précharger les images :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Précharger les images dans le menu contextuel
Actions.
3 Cliquez sur Parcourir pour sélectionner un fichier d’image à précharger ou tapez le chemin
d’accè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îte de dialogue pour ajouter l’image à la liste
Pré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ée par la suivante.
5 Répétez les étapes 3 et 4 pour les autres images que vous désirez précharger dans la page en
cours.
6 Pour supprimer une image de la liste Précharger les images, sélectionnez-la et cliquez sur le
bouton - (signe moins).
7 Cliquez sur OK.
8 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Définir image barre de navigation
Utilisez l’action Dé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îte de dialogue Définir image barre de navigation permet de cré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électionner une autre fenêtre pour l’affichage de l’URL.
L’onglet Avancé de la boîte de dialogue Définir image barre de navigation permet de modifier
l’état d’autres images du document, en fonction de l’état du bouton actuellement sélectionné. Par
défaut, lorsque vous cliquez sur un élément d’une barre de navigation, tous ses autres éléments
sont automatiquement restaurés dans leur état « Image normale » ; l’onglet Avancé vous permet
de définir un changement d’état pour une autre image lorsque l’image sélectionnée passe à l’état
« Image survolée » ou « Image cliquée ».
400
Chapitre 18 : Utilisation des comportements JavaScript
Pour modifier une action Définir image barre de navigation :
1 Sé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éfinir
image barre de navigation associée à l’événement que vous désirez modifier.
3 Dans l’onglet Base de la boîte de dialogue Définir image barre de navigation, choisissez des
options de modification de l’image.
Pour définir plusieurs images pour un bouton de barre de navigation :
1 Sé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éfinir
image barre de navigation associée à l’événement que vous désirez modifier.
3 Cliquez sur l’onglet Avancé de la boîte de dialogue Définir image barre de navigation.
4 Dans le menu déroulant Lorsque l’élément « xxx » s’affiche, sélectionnez un état d’image.
Choisissez Image Abaissée si vous désirez qu’une autre image change d’aspect après un clic
de l’utilisateur sur l’image sélectionnée.
■ Choisissez Image Au-dessus ou Image Au-dessus lorsqu’Abaissée si vous désirez qu’une autre
image change d’aspect lorsque le pointeur de la souris se trouve sur l’image sélectionnée.
Pour plus d’informations sur les états d’image, voir Utilisation des barres de navigation,
page 346.
5 Dans la liste Définir aussi image, sélectionnez une autre image de la page à définir.
6 Cliquez sur Parcourir pour sélectionner le fichier d’image à afficher ou tapez le nom et le chemin
d’accès au fichier d’image dans la zone de texte Vers le fichier image.
7 Si vous avez sélectionné l’état Image Au-dessus ou Image Au-dessus lorsqu’Abaissée à l’étape 4,
vous disposez d’une possibilité supplémentaire. Dans la zone de texte Si abaissé, vers fichier
image, cliquez sur Parcourir pour sélectionner le fichier d’image à afficher ou tapez le chemin
d’accès et le nom de ce fichier.
■
Texte du cadre
L’action Texte d’un cadre vous permet de définir de façon dynamique le texte d’un cadre, en
remplaçant le contenu et le formatage d’un cadre par le contenu indiqué. Ce contenu peut être
n’importe quel code source HTML valide. Cette action permet d’afficher les informations de
façon dynamique.
Bien que l’action Texte d’un cadre permette de remplacer le formatage d’un cadre, vous pouvez
activer l’option Préserver Couleur d’arrière-plan pour conserver les attributs actuels pour l’arrièreplan de la page et la couleur du texte.
Vous pouvez incorporer au texte des appels de fonction, propriété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écéder d’une barre oblique inversée (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Utilisation des actions de comportement livrées avec Dreamweaver
401
Pour créer un jeu de cadres :
• Choisissez Modifier > Jeu de cadres > Fractionner le cadre à gauche, à droite, vers le haut ou
vers le bas.
Pour plus d’informations, voir Création de cadres et de jeux de cadres, page 214.
Pour utiliser l’action Texte d’un cadre :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Texte > Texte du cadre dans le menu contextuel
3
4
5
6
Actions.
Dans la boîte de dialogue qui s’affiche, sélectionnez le cadre cible dans le menu dé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érifiez que l’événement par défaut est bien l’événement désiré. Si ce n’est pas le cas,
sélectionnez-en un autre dans le menu déroulant.
Si les événements désirés n’apparaissent pas dans la liste, changez de navigateur cible dans le
menu déroulant Afficher les évé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é. Ce contenu peut ê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é, mais conserve les attributs du calque, y compris la couleur. Formatez le contenu en
incluant des balises HTML à la zone de texte Nouveau HTML de la boîte de dialogue Texte du
calque.
Vous pouvez incorporer au texte des appels de fonction, propriété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écéder d’une barre oblique inversée (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Pour créer un calque :
1 Choisissez Insertion > Calque.
Pour plus d’informations, voir Insertion d’un calque, page 160.
2 Dans l’inspecteur de propriétés, tapez le nom du calque.
Pour utiliser l’action Texte du calque :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Texte > Texte du calque dans le menu contextuel
Actions.
3 Dans la boîte de dialogue qui s’affiche, sélectionnez le calque cible dans le menu dé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érifiez que l’événement par défaut est bien l’événement désiré. Si ce n’est pas le cas,
sélectionnez-en un autre dans le menu déroulant.
Si les événements désirés n’apparaissent pas dans la liste, changez de navigateur cible dans le
menu déroulant Afficher les événements pour.
Définir le texte de la barre d’état
L’action Définir le texte de la barre d’état affiche un message dans la barre d’état, dans la partie
inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser cette action pour
décrire la destination d’un lien dans la barre d’état, au lieu d’afficher l’URL associée. Pour voir un
exemple de message d’état, amenez la souris sur n’importe quel bouton de navigation dans les
pages de l’aide de Dreamweaver. Cependant, il arrive fréquemment que les utilisateurs ne
tiennent pas compte des messages de la barre d’état (certains navigateurs ne prennent pas en
charge la définition du texte de la barre d’état). Si votre message est important, pensez à 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été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écéder d’une barre oblique inversée (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Pour utiliser l’action Définir le texte de la barre d’état :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Texte > Définir le texte de la barre d’état dans le
menu contextuel Actions.
3 Dans la boîte de dialogue Définir le texte de la barre d’é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’état.
4 Cliquez sur OK.
5 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
évé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é.
Vous pouvez incorporer au texte des appels de fonction, propriété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écéder d’une barre oblique inversée (\{).
Exemple
L’URL de cette page est {window.location} et nous sommes le {new Date()}.
Utilisation des actions de comportement livrées avec Dreamweaver
403
Pour créer un champ texte nommé :
1 Choisissez Insertion > Objets de formulaire > Champ de texte.
Si Dreamweaver vous invite à ajouter une balise de formulaire, cliquez sur Oui. Pour plus
d’informations, voir Création de formulaires, page 631.
2 Dans l’inspecteur de propriétés, tapez le nom du champ texte. Veillez à utiliser un nom unique
dans cette page (n’utilisez pas le même nom pour plusieurs éléments appartenant à la même
page, même s’ils se trouvent dans des formulaires différents).
Pour utiliser l’action Texte d’un champ texte :
1 Sélectionnez un objet et ouvrez le panneau Comportements.
2 Cliquez sur le bouton plus (+) et sélectionnez Texte > Texte d’un champ texte dans le menu
contextuel Actions.
3 Dans la boîte de dialogue qui s’affiche, sélectionnez le champ texte cible dans le menu déroulant
Champ de texte.
4 Entrez le nouveau contenu dans la zone de texte Nouveau texte et cliquez sur OK.
5 Vérifiez que l’événement par défaut est bien l’événement désiré. Si ce n’est pas le cas,
sélectionnez-en un autre dans le menu déroulant.
Si les événements désirés n’apparaissent pas dans la liste, changez de navigateur cible dans le
menu déroulant Afficher les événements pour.
Afficher-masquer les calques
L’action Afficher-masquer les calques affiche, masque ou rétablit la visibilité par dé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étails sur le climat idéal de la plante, l’ensoleillement
dont elle a besoin, sa taille adulte, etc.
L’action Afficher-masquer les calques sert également à créer un calque de préchargement, c’est-àdire un grand calque qui cachera d’abord le contenu de la page, puis disparaîtra à la fin du
chargement de tous les éléments de la page.
Pour utiliser l’action Afficher-masquer les calques :
1 Choisissez Insertion > Calque ou cliquez sur le bouton Calque de la barre Insérer, puis dessinez
2
3
4
5
404
un calque dans la fenêtre de document.
Répétez cette étape pour créer des calques supplémentaires.
Cliquez n’importe où dans la fenêtre de document pour désé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électionné un calque. Etant donné
que les calques ne prennent pas en compte les événements dans les navigateurs 4.0, vous devez
sé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éroulant Afficher les événements
pour.
Sélectionnez le calque dont vous voulez modifier la visibilité dans la liste Calques nommés.
Cliquez sur Afficher pour afficher le calque, Masquer pour le masquer ou Par Défaut pour
rétablir la visibilité par défaut du calque.
Chapitre 18 : Utilisation des comportements JavaScript
6 Répétez les étapes 4 et 5 pour tous les autres calques dont vous voulez modifier la visibilité (vous
pouvez modifier la visibilité des calques multiples avec un comportement unique).
7 Cliquez sur OK.
8 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Dans la fenêtre d’un navigateur Netscape Navigator, les dimensions des calques peuvent être
modifiées en fonction de leur contenu. Pour garder la maîtrise des dimensions du calque, ajoutezlui du texte ou des images ou définissez des valeurs de découpe.
Pour créer un calque de préchargement :
1 Cliquez sur le bouton Dessiner un calque dans la catégorie Commun de la barre Insérer, puis
dessinez un grand calque dans le mode Création de la fenê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électionnez le calque, s’il ne l’est pas déjà, et nommez-le chargement, en utilisant la zone de
texte située à l’extrême gauche de l’inspecteur de propriétés du calque.
4 Tout en gardant le calque sélectionné, définissez dans l’inspecteur de propriétés sa couleur
d’arrière-plan à la même valeur que l’arrière-plan de la page.
5 Cliquez à l’intérieur du calque (qui doit maintenant cacher le reste du contenu de la page) et
tapez un message si vous désirez.
Par exemple, « Merci d’attendre la fin du chargement » ou « Chargement en cours... » sont des
messages informatifs qui évitent à l’utilisateur de croire que la page est vide.
6 Cliquez sur la balise <body> dans le sélecteur de balises, situé dans l’angle inférieur gauche de la
fenêtre de document.
7 Dans le panneau Comportements, sélectionnez Afficher-Masquer les calques dans le menu
contextuel Actions.
8 Sélectionnez le calque appelé chargement dans la liste Calques nommés.
9 Cliquez sur Masquer.
10 Cliquez sur OK.
Utilisation des actions de comportement livrées avec Dreamweaver
405
11 Assurez-vous que l’événement figurant dans la liste des comportements à côté de l’action
Afficher-Masquer les calques est onLoad (si ce n’est pas le cas, sélectionnez l’événement et
cliquez sur le triangle orienté vers le bas qui apparaît entre l’événement et l’action ; sélectionnez
onLoad dans la liste d’événements du menu contextuel).
Afficher le menu contextuel
Utilisez le comportement Afficher le menu contextuel pour créer ou modifier un menu contextuel
Dreamweaver ou pour ouvrir et modifier un menu contextuel Fireworks inséré dans un document
Dreamweaver.
Définissez les options dans la boîte de dialogue Afficher le menu contextuel pour créer un menu
contextuel horizontal ou vertical. Vous pouvez faire appel à cette boîte de dialogue pour dé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étés Dreamweaver
pour modifier les images dans un menu contextuel basé sur des images Fireworks. Toutefois, vous
pouvez exécuter la commande Afficher le menu contextuel pour modifier le texte d’un menu
contextuel basé 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être
d’un navigateur, puis placer le pointeur sur l’image ou le lien de déclenchement.
Pour utiliser l’action Afficher le menu contextuel :
1 Sélectionnez un objet à 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îte de dialogue Afficher le menu contextuel qui s’affiche, utilisez les onglets suivants
pour définir les options du menu contextuel :
Sommaire permet de définir le nom, la structure, l’URL et la cible des éléments de menu
individuels.
Aspect permet de définir l’apparence de l’Etat En haut et de l’Etat Survolé du menu et de
définir la police du texte de l’élément de menu.
Avancé permet de définir les propriétés des cellules du menu. Par exemple, vous pouvez
définir la largeur et la hauteur des cellules, la couleur des cellules ou des bordures, le retrait du
texte et le délai entre le moment où l’utilisateur place le pointeur sur le déclencheur et
l’apparition du menu correspondant.
Position permet de définir l’emplacement du menu par rapport à l’image ou au lien de
déclenchement.
Ajout, suppression et modification de l’ordre des éléments du menu
contextuel
Vous pouvez utiliser l’onglet Sommaire de la boîte de dialogue Afficher le menu contextuel pour
créer des éléments de menu. Cet onglet permet également de supprimer des éléments ou de
modifier l’ordre dans lequel ils apparaissent dans un menu.
Pour ajouter des éléments de menu contextuel :
1 Dans l’onglet Sommaire, créez un élément de menu contextuel en procédant comme suit :
406
Chapitre 18 : Utilisation des comportements JavaScript
Dans la zone Texte, sélectionnez le texte par défaut (Nouvel élément), puis tapez le texte que
vous souhaitez voir apparaître dans le menu contextuel.
2 Si vous le souhaitez, définissez des options complémentaires :
Si vous voulez que l’élément de menu ouvre un autre fichier lorsque vous cliquez dessus, dans
la zone Lien, tapez le chemin d’accès au fichier ou cliquez sur l’icône de dossier et sélectionnez
le document à ouvrir.
Si vous souhaitez définir l’endroit où le document va s’ouvrir (une nouvelle fenêtre ou un cadre
donné, par exemple), choisissez l’emplacement de votre choix dans le menu déroulant Cible.
Remarque : Si l’image que vous voulez définir comme cible ne figure pas dans le menu déroulant
Cible, fermez la boîte de dialogue Afficher le menu contextuel puis, dans la fenêtre de document,
sélectionnez un cadre et attribuez-lui un nom.
3 Cliquez sur le bouton plus (+) pour ajouter des entrées à la liste d’aperçu Afficher le menu
contextuel.
Ensuite, cliquez sur OK pour accepter les paramètres par défaut ou sélectionnez un autre
onglet de la boîte de dialogue Afficher le menu contextuel pour définir des options
supplémentaires.
Pour créer un élément de sous-menu :
Dans la liste Afficher le menu contextuel, sélectionnez l’élément devant apparaître dans un sousmenu, puis procédez de l’une des manières suivantes :
• Pour mettre un élément de la liste en retrait, cliquez sur le bouton Elément indenté.
• Pour supprimer le retrait, cliquez sur le bouton Elément en retrait négatif.
Remarque : L’élément de menu principal d’une liste ne peut pas être défini comme élément de
sous-menu.
Pour modifier l’ordre des éléments dans un menu :
• Dans la liste Afficher le menu contextuel, sélectionnez l’élément que vous voulez déplacer, puis
cliquez sur la flèche haut ou bas pour le placer à l’endroit souhaité.
Pour supprimer un élément du menu :
1 Dans l’onglet Sommaire, sélectionnez l’entrée de menu que vous voulez supprimer de la liste
Afficher le menu contextuel.
2 Cliquez sur le bouton moins (-).
Définition de l’apparence d’un menu contextuel
Lorsque vous avez créé les éléments de menu, cliquez sur l’onglet Aspect de la boîte de dialogue
Afficher le menu contextuel pour définir l’orientation, ainsi que les attributs de police et d’état des
boutons du menu contextuel.
Remarque : Le volet d’aperçu de l’onglet Aspect affiche un rendu approximatif des options définies
dans cet onglet.
Pour définir l’apparence d’un menu contextuel :
1 Dans le menu déroulant situé en haut de l’onglet Aspect, choisissez Menu vertical ou Menu
horizontal pour définir l’orientation du menu.
2 Définissez les options de formatage du texte :
Utilisation des actions de comportement livrées avec Dreamweaver
407
Dans le menu déroulant Police, sélectionnez la police que vous souhaitez appliquer aux
éléments de menu.
Remarque : Si la police que vous souhaitez utiliser ne figure pas dans la liste, sélectionnez l’option
Modifier la liste des polices pour ajouter la police de votre choix à la liste. Choisissez une police que
les visiteurs du site sont susceptibles d’utiliser.
Définissez la taille de la police, les attributs de style, ainsi que les options d’alignement et de
justification du texte qui seront assignés au texte de l’élément de menu.
3 Dans les zones Etat En haut et Etat Survolé, utilisez le sélecteur de couleur pour définir les
couleurs du texte et des cellules des boutons d’élément de menu.
4 Ensuite, cliquez sur OK ou sélectionnez un autre onglet Afficher le menu contextuel pour
définir des options supplémentaires..
Définition des options d’apparence avancées
Utilisez les options de l’onglet Avancé pour spécifier d’autres attributs pour les cellules de menu.
Par exemple, vous pouvez dé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éfinir les attributs de formatage avancés d’un menu contextuel :
1 Cliquez sur l’onglet Avancé, puis définissez les options que vous souhaitez appliquer aux
éléments de menu :
Largeur des cellules définit une largeur spécifique en pixels pour les boutons de menu. Cette
largeur est automatiquement définie en fonction de l’élément le plus large. Pour l’augmenter,
sélectionnez Pixels dans le menu déroulant et entrez une valeur supérieure à celle qui figure
dans la zone de texte Largeur des cellules.
Hauteur des cellules définit une hauteur spécifique en pixels pour les boutons de menu. Pour
l’augmenter, sélectionnez Pixels dans le menu déroulant et entrez une valeur supérieure à celle
qui figure dans la zone de texte Hauteur des cellules.
Marge des cellules indique le nombre de pixels qui sépare le contenu d’une cellule et ses
limites.
Espacement des cellules indique le nombre de pixels qui sépare des cellules adjacentes.
Retrait du texte permet de spécifier le retrait du texte en pixels dans la cellule.
Délai de menu définit le délai entre le moment où l’utilisateur place le pointeur sur l’image ou
le lien de déclenchement et l’apparition du menu correspondant. Les valeurs étant en
millisecondes, le paramètre par défaut 1 000 équivaut à 1 seconde. Ajoutez 000 pour chaque
seconde de délai supplémentaire ; par exemple, tapez 3 000 pour définir un délai de
3 secondes.
Bordures déroulantes détermine si une bordure apparaît ou non autour des éléments du
menu. Si vous souhaitez ajouter une bordure, assurez-vous que la case à cocher Afficher les
bordures est activée.
Largeur de la bordure définit la largeur de la bordure en pixels.
Ombre, Couleur de la bordure et Mettre en surbrillance permettent de sélectionner une
couleur de bordure. Les options d’ombre et de mise en surbrillance n’apparaissent pas en mode
d’aperçu.
2 Lorsque vous avez défini les options d’apparence avancées, cliquez sur OK ou sélectionnez un
autre onglet Afficher le menu contextuel pour définir des options supplémentaires.
408
Chapitre 18 : Utilisation des comportements JavaScript
Définition de la position d’un menu contextuel dans un document
Utilisez les options de position pour définir l’emplacement de l’affichage du menu par rapport à
l’image ou au lien de déclenchement. Vous pouvez également définir si le menu doit être masqué
ou non lorsque l’utilisateur éloigne le pointeur du déclencheur.
Pour définir les options de position du menu contextuel :
1 Dans la boîte de dialogue Afficher le menu contextuel, cliquez sur l’onglet Position.
2 Définissez la position du menu contextuel en utilisant l’une des méthodes suivantes :
Sélectionnez l’une des options prédéfinies.
■ Définissez des coordonnées de position personnalisées en tapant un nombre dans la zone de
texte X (coordonnée horizontale) et dans la zone de texte Y (coordonnée verticale). L’angle
supérieur gauche du menu définit le point initial des coordonnées.
3 Pour masquer le menu contextuel lorsque le pointeur ne le survole pas, assurez-vous que l’option
Masquer le menu suite à l’événement onMouseOut est activée. Désélectionnez cette option si
vous voulez que le menu reste affiché.
4 Lorsque vous avez créé ou modifié le menu contextuel, cliquez sur OK.
■
Modification d’un menu contextuel
Le comportement Afficher le menu contextuel permet de modifier ou de mettre à jour le contenu
d’un menu contextuel. Vous pouvez ajouter, supprimer ou modifier les éléments de menu et
définir la position d’un menu par rapport à l’image ou au lien de déclenchement.
Pour ouvrir un menu contextuel HTML :
1 Dans le document Dreamweaver, sélectionnez le lien ou l’image qui déclenche le menu
contextuel.
2 Ouvrez le panneau Comportements (Maj+F3), si ce n’est déjà fait, puis dans la liste Actions,
double-cliquez sur Afficher le menu contextuel.
La boîte de dialogue Afficher le menu contextuel apparaît.
3 Modifiez le menu contextuel comme bon vous semble.
4 Lorsque vous avez modifié le menu contextuel, cliquez sur OK.
Pour plus d’informations sur la dé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éer des substitutions de boutons et autres effets sur des images (y
compris la substitution de plusieurs images à la fois). L’insertion d’une image survolée ajoute
automatiquement à votre page un comportement Permuter une image.
Remarque : Seul l’attribut src étant affecté par cette action, l’image de substitution doit en principe
avoir les mêmes dimensions (hauteur et largeur) que l’original. Sans cela, l’image intervertie
apparaîtrait déformée (compactée ou élargie) par rapport à l’original.
Pour utiliser l’action Intervertir une image :
1 Choisissez Insertion > Image ou cliquez sur le bouton Image de la barre Insérer pour insérer une
image.
Utilisation des actions de comportement livrées avec Dreamweaver
409
2 Dans l’inspecteur de propriétés, indiquez un nom pour l’image dans la zone de texte située à
l’extrême gauche.
L’action Permuter une image fonctionnera même si vous ne donnez pas de noms à vos images ;
en effet, les images sans nom en reçoivent automatiquement un lorsque vous associez de
comportement à un objet. Toutefois, il vous sera plus facile de distinguer les images proposées
dans la boîte de dialogue Permuter une image si vous avez vous-même attribué un nom à ces
images.
3 Répétez les étapes 1 et 2 si vous souhaitez insérer des images supplémentaires.
4 Sélectionnez un objet (en général, l’image que vous voulez remplacer) et ouvrez le panneau
Comportements.
5 Cliquez sur le bouton plus (+) et sélectionnez Permuter une image dans le menu contextuel
Actions.
6 Sélectionnez l’image dont vous voulez modifier la source dans la liste Images.
7 Cliquez sur Parcourir pour sélectionner le nouveau fichier d’image ou indiquez son chemin
d’accès et son nom de fichier dans la zone de texte Définir la source à.
8 Répétez les étapes 6 et 7 si vous désirez ajouter d’autres images à modifier. Utilisez la même
action Permuter l’image pour toutes les images que vous voulez modifier simultanément ; dans
le cas contraire, l’action correspondante Restaurer l’image intervertie ne les restaurerait pas
toutes.
9 Sélectionnez l’option Précharger les images pour charger les nouvelles images dans la mémoire
cache du navigateur lors du chargement de la page.
Cela évite à l’utilisateur d’attendre que ces images soient chargées, lorsqu’un événement
déclenche leur apparition.
10 Cliquez sur OK.
11 Vérifiez que l’événement par défaut est bien l’événement désiré.
Si ce n’est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés
ne sont pas répertoriés, changez de navigateur cible dans le menu déroulant Afficher les
événements pour.
Restaurer l’image intervertie
L’action Restaurer l’image intervertie restaure la dernière interversion d’images à son état
antérieur. Elle est automatiquement ajoutée lorsque vous associez l’action Permuter une image à
un objet ; en principe, si vous avez laissé cette option activé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és pour vérifier que l’utilisateur a entré le
type de données correct. Associez cette action à des champs de texte individuels à l’aide de
l’événement onBlur pour valider ces champs au fur et à mesure que l’utilisateur remplit le
formulaire ou associez-le au formulaire à l’aide de l’événement onSubmit pour évaluer divers
champs simultanément lorsque l’utilisateur clique sur le bouton d’envoi. Associez cette action au
formulaire pour éviter qu’il ne soit envoyé au serveur si l’un des champs de texte contient des
données non valides.
410
Chapitre 18 : Utilisation des comportements JavaScript
Pour utiliser l’action Valider le formulaire :
1 Pour insérer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton
Formulaire de la barre Insérer.
2 Pour insérer un champ texte, choisissez Insertion > Objets de formulaire > Champ de texte ou
cliquez sur le bouton Champ de texte de la barre Insérer.
Répétez cette étape pour insérer plusieurs champs texte.
3 Procédez de l’une des manières suivantes :
■ Pour valider les champs individuellement au fur et à mesure que l’utilisateur remplit le
formulaire, sélectionnez un champ texte et choisissez Fenêtre > Comportements.
■ Pour valider plusieurs champs lorsque l’utilisateur envoie le formulaire, cliquez sur la balise
<form> dans le sélecteur de balises situé dans l’angle inférieur gauche de la fenêtre de
document, puis choisissez Fenêtre > Comportements.
4 Sélectionnez Valider le formulaire dans le menu contextuel Actions.
5 Procédez de l’une des manières suivantes :
■ Si vous validez des champs individuellement, sélectionnez, dans la liste Champs nommés, le
champ que vous avez sélectionné dans la fenêtre de document.
■ Si vous validez plusieurs champs à la fois, sélectionnez un champ texte dans la liste Champs
nommés.
6 Activez l’option Obligatoire si le champ doit obligatoirement contenir des données.
7 Dans la zone Accepter, sélectionnez l’une des options suivantes :
Utilisez l’option Tout si le champ doit être rempli, sans pour autant contenir un type
particulier de données (si l’option Obligatoire n’a pas été activée, cette option n’a aucun
intérêt, puisque le résultat sera accepté dans tous les cas, comme si l’action Valider le formulaire
n’était pas associée au champ).
Utilisez l’option Adresse e-mail pour vérifier que le champ contient un symbole @.
Utilisez Nombre pour vérifier que le champ ne contient que des caractères numériques.
Utilisez Nombre de pour vérifier que le champ ne contient que des valeurs numériques
comprises dans la plage indiquée.
8 Si vous validez plusieurs champs, répétez les étapes 6 et 7 pour tout champ supplémentaire à
valider.
9 Cliquez sur OK.
Si vous validez plusieurs champs lorsque l’utilisateur envoie le formulaire, l’événement
onSubmit apparaît automatiquement dans le menu déroulant Evénements.
10 Si vous validez des champs individuellement, vérifiez que l’événement par défaut est bien
onBlur ou onChange.
Si ce n’est pas les cas, sélectionnez onBlur ou onChange dans le menu déroulant. Ces deux
événements déclenchent l’action Valider le formulaire dès que l’utilisateur sort du champ
concerné. La différence entre ces deux événements est que onBlur est toujours déclenché, que
l’utilisateur ait saisi ou non du texte dans le champ, alors que onChange n’est déclenché que si
l’utilisateur a modifié le contenu du champ. L’événement onBlur est préférable si vous avez
spécifié que ce champ doit être rempli.
Utilisation des actions de comportement livrées avec Dreamweaver
411
412
Chapitre 18 : Utilisation des comportements JavaScript
Créez ou modifiez des pages à l’aide des outils de codage avancé 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ébogage de code, page 447
Chapitre 22, Modification du code en mode Cré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 à votre
propre méthode de travail. Vous pouvez par exemple changer le mode d’affichage du code, définir
différents raccourcis clavier ou importer et utiliser votre bibliothèque de balises de prédilection.
Ce chapitre couvre les sujets suivants :
•
•
•
•
•
•
•
•
•
•
Affichage du code, page 416
Utilisation de l’espace de travail orienté en mode Code (Windows uniquement), page 417
Définition des préférences d’affichage, page 417
Définition des préférences de codage, page 418
Personnalisation des raccourcis clavier, page 420
Ouverture de fichiers en mode Code par défaut, page 420
Définition des préférences du programme de validation, page 420
Gestion des bibliothèques de balises, page 421
Importation de balises personnalisées dans Dreamweaver, page 424
Utilisation d’un éditeur HTML externe avec Dreamweaver, page 426
415
Affichage du code
Vous pouvez visualiser le code source du document actif de plusieurs façons : en l’affichant dans la
fenêtre de document après avoir activé le mode Code, en fractionnant la fenêtre de document
pour afficher à la fois la page et son code, ou encore en travaillant dans l’inspecteur de code, qui
forme une fenêtre de code distincte. L’inspecteur de code fonctionne comme le mode Code ; il
peut être considéré comme un mode Code détachable pour le document actif.
Cette section explique comment modifier le mode d’affichage du code.
Pour afficher le code dans la fenêtre de document :
• Choisissez Affichage > Code.
Pour pouvoir coder tout en modifiant visuellement une page dans la fenêtre de document :
1 Choisissez Affichage> Code et création.
Le code apparaît dans le volet supérieur, et la page dans le volet inférieur.
2 Pour afficher la page au premier plan, choisissez Affichage > Mode Création au premier plan.
3 Pour redimensionner les volets dans la fenêtre de document, faites glisser la barre de division à
l’endroit approprié.
La barre de division est intercalée entre les deux volets.
Toutes les modifications apportées dans le mode Création se répercutent automatiquement
dans le mode Code. Toutefois, après avoir effectué des modifications en mode Code, vous
devez mettre à jour manuellement le document dans le mode Cré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être distincte :
• Choisissez Fenêtre > Autres > Inspecteur de code.
416
Chapitre 19 : Configuration d’un environnement de codage
Utilisation de l’espace de travail orienté en mode Code
(Windows uniquement)
Sous Windows, vous pouvez utiliser un espace de travail semblable à celui de Macromedia
HomeSite, avec les groupes de panneaux rangés à gauche de la fenêtre principale et non à droite.
Dans cette présentation de l’espace de travail, l’inspecteur de propriétés est réduit par défaut et la
fenêtre de document s’affiche en mode Code par défaut. Pour plus de précisions quant à
l’utilisation de cette option, voir Choix de la présentation de l’espace de travail (sous Windows
uniquement), page 58.
Groupes de panneaux
Panneau Fichiers
Sélecteur de balises
Barre
Insérer
Barre d’outils du document
Inspecteur de propriétés (réduit)
Fenêtre de document
Rubriques connexes
• Ouverture de fichiers en mode Code par défaut, page 420.
Définition des préférences d’affichage
Vous pouvez configurer le renvoi à la ligne des mots, l’affichage du numéro des lignes de code, la
mise en surbrillance du code HTML incorrect, la coloration de la syntaxe des éléments de code
ainsi que la mise en retrait du code à partir du menu Affichage > Options d’affichage de code.
Pour dé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ée en haut du mode Code ou
de l’inspecteur de code.
Les options définies antérieurement sont précédées d’une coche dans le menu contextuel qui
apparaît.
3 Pour activer ou désactiver des options, sélectionnez-les dans le menu.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Définition des préférences d’affichage
417
Définition des préférences de codage
Vous pouvez personnaliser l’environnement de codage de Dreamweaver afin de l’adapter à vos
besoins en définissant, par exemple, les préférences de formatage de code, de correction et de
couleur.
Remarque : Pour définir les préférences avancées, utilisez l’éditeur de la bibliothèque de balises (voir
Gestion des bibliothèques de balises, page 421).
Définition des préférences de formatage du code
Vous pouvez modifier l’aspect de votre code en définissant des préfé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éférences, à 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éjà créé, ces options de mise en forme ne lui sont pas
appliqué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éférences de formatage aux documents existants, page 418.
Pour définir les préférences de formatage de code :
1 Choisissez Edition > Préférences.
2 Sélectionnez la catégorie Format du code dans la liste de gauche.
Les préférences Format de code s’affichent.
3 Ajustez les paramètres dans la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Application de nouvelles préférences de formatage aux documents existants
Les options de formatage de code définies dans les préférences Format de code ne s’appliquent
automatiquement qu’aux documents nouvellement créés dans Dreamweaver. Vous pouvez
néanmoins appliquer ces nouvelles préférences aux documents existants.
Pour appliquer les nouvelles préférences de formatage à un document existant :
1 Ouvrez le document dans Dreamweaver.
2 Choisissez Commandes > Appliquer le format source.
Définition des préférences d’indicateurs de code
Les indicateurs de code vous permettent d’insérer rapidement des noms de balises, des attributs et
des valeurs à mesure que vous entrez du code. Pour plus d’informations, voir Utilisation des
indicateurs de code, page 437.
Conseil : Même si l’affichage des indicateurs de code est désactivé, vous pouvez afficher un
indicateur en mode Code en appuyant sur les touches Ctrl+Barre d’espace.
Pour définir les préférences d’indicateur de code :
1 Choisissez Edition > Préférences.
2 Sélectionnez la catégorie Indicateurs de code dans la liste de gauche.
Les préférences d’indicateur de code s’affichent.
418
Chapitre 19 : Configuration d’un environnement de codage
3 Ajustez les paramètres dans la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Rubriques connexes
• Utilisation des indicateurs de code, page 437
Définition des préférences de correction de code
A l’ouverture d’un document, Dreamweaver répare (ou corrige) certains types de code non valide
selon les préférences de correction spécifiées (ces préférences sont sans effet lorsque vous modifiez
du code HTML ou des scripts dans le mode Code).
Si vous désactivez ces options de correction, Dreamweaver affiche les éléments de marquage non
valides dans la fenêtre de document pour le code HTML qu’il aurait corrigé.
Pour définir les préférences de correction de code :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Correction du code dans la liste de gauche.
Les préférences de correction du code s’affichent.
3 Ajustez les paramètres dans la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Rubriques connexes
• Importation d’un fichier HTML Microsoft Word, page 80
Définition des préférences de coloration du code
Utilisez les préférences de coloration du code pour spécifier les couleurs des principales catégories
de balises et d’éléments de code, par exemple les balises liées à la mise en forme ou les
identificateurs JavaScript. Pour définir les préférences de coloration d’une balise spécifique,
modifiez sa définition dans l’éditeur de la bibliothèque de balises. Pour plus d’informations, voir
Modification de bibliothèques, de balises et d’attributs, page 422.
Pour définir les préférences de coloration de code :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Coloration du code dans la liste de gauche.
Les préférences de coloration de code s’affichent.
3 Ajustez les paramètres dans la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Rubriques connexes
• Personnalisation des préférences de coloration de code d’un modèle, page 239
Définition des préférences de codage
419
Personnalisation des raccourcis clavier
Rien ne vous empêche d’utiliser vos raccourcis clavier préférés dans Dreamweaver. Si vous êtes
habitué à utiliser des raccourcis clavier spécifiques (par exemple, Ctrl+Entrée pour insérer un saut
de ligne, Ctrl+G pour atteindre un code précis ou Maj+F6 pour valider un fichier), vous pouvez
les intégrer dans Dreamweaver au moyen de l’é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é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éation. Vous pouvez définir les types de fichiers à ouvrir en mode Code.
Pour définir le mode par défaut des fichiers non HTML :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.
Les préfé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érez un espace entre les extensions. Vous pouvez en ajouter autant que vous le souhaitez.
Définition des préférences du programme de validation
Le validateur de Dreamweaver vous permet de repérer rapidement les erreurs de balise et de
syntaxe présentes dans le code (voir Validation de balises, page 451). Vous pouvez spécifier les
langages de balise qui serviront de référence au validateur pour ses vérifications, les problèmes
spécifiques que le validateur doit relever, ainsi que les types d’erreurs qu’il doit signaler.
Pour définir les préférences du validateur :
1 Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
2 Sélectionnez la catégorie Programme de validation dans la liste de gauche.
Les préférences du validateur s’affichent.
3 Sélectionnez les bibliothèques de balises à utiliser pour la validation et définissez les options de
ces librairies.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
420
Chapitre 19 : Configuration d’un environnement de codage
Gestion des bibliothèques de balises
Dans Dreamweaver, une bibliothèque de balises est une collection de balises d’un type donné
accompagnée d’informations sur le formatage des balises par Dreamweaver. Les bibliothèques de
balises fournissent des informations à propos des balises utilisées par Dreamweaver pour les
indicateurs de code, les vérifications de navigateurs cibles, le sélecteur de balises et autres options
de codage. L’éditeur de la bibliothèque de balises vous permet d’ajouter et de supprimer des
bibliothèques de balises, des balises et des attributs, de définir les propriétés d’une bibliothèque de
balises, mais aussi de modifier les balises et les attributs.
Voir aussi Importation de balises personnalisées dans Dreamweaver, page 424.
Ouverture et fermeture de l’éditeur de la bibliothèque de balises
Utilisez l’éditeur de la bibliothèque de balises pour gérer vos bibliothèques de balises.
Pour ouvrir l’éditeur de la bibliothèque de balises :
• Choisissez Edition > Bibliothèques de balises.
L’éditeur de la bibliothèque de balises s’affiche (le contenu de cette boîte de dialogue varie selon la
balise sélectionnée).
Pour fermer l’éditeur de la bibliothèque de balises et enregistrer vos modifications :
• Cliquez sur OK.
Pour fermer l’éditeur de la bibliothèque de balises sans enregistrer vos modifications :
• Cliquez sur Annuler.
Gestion des bibliothèques de balises
421
Remarque : Lorsque vous cliquez sur Annuler, toutes les modifications apportées à la
bibliothèque de balises sont effacées. Si vos modifications incluaient la suppression d’une balise
ou d’une bibliothèque, celle-ci est restaurée.
Ajout de bibliothèques, de balises et d’attributs
L’éditeur de la bibliothèque de balises de Dreamweaver vous permet d’ajouter des bibliothèques
de balises ou des balises et des attributs aux bibliothèques de balises.
Remarque : Pour importer une balise, voir Importation de balises personnalisées dans Dreamweaver,
page 424.
Pour ajouter une bibliothèque de balises :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de
balises), cliquez sur le bouton Plus (+) et choisissez Nouvelle bibliothèque de balises.
La boîte de dialogue Nouvelle bibliothèque de balises s’affiche.
2 Dans la zone de texte Nom de la bibliothèque, entrez un nom (par exemple, balises diverses).
3 Cliquez sur OK.
Pour ajouter une balise dans une bibliothèque :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de
balises), cliquez sur le bouton Plus (+) et choisissez Nouvelles balises.
La boîte de dialogue Nouvelles balises s’affiche.
2 Ajustez les paramètres dans la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK.
Pour ajouter un ou plusieurs attributs à une balise :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de
balises), cliquez sur le bouton Plus (+) et choisissez Nouveaux attributs.
La boîte de dialogue Nouveaux attributs s’affiche.
2 Ajustez les paramètres dans la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Cliquez sur OK.
Rubriques connexes
• Gestion des bibliothèques de balises, page 421
• Suppression de bibliothèques, de balises et d’attributs, page 424
Modification de bibliothèques, de balises et d’attributs
Vous pouvez utiliser l’éditeur de la bibliothèque de balises pour définir les propriétés d’une
bibliothèque de balises ou modifier les balises et les attributs d’une bibliothèque, qu’il s’agisse de
leurs attributs, de leurs valeurs ou de leur format (pour simplifier l’identification du code).
Pour définir les propriétés d’une bibliothèque de balises :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de
balises), sélectionnez une bibliothèque de balises (et non une balise) dans la liste des balises.
422
Chapitre 19 : Configuration d’un environnement de codage
Remarque : Les propriétés des bibliothèques de balises s’affichent uniquement quand une
bibliothèque de balises est sélectionnée. Les bibliothèques de balises sont représentées par les
dossiers de niveau supérieur dans la liste des balises. Par exemple, le dossier des balises HTML
représente une bibliothèque de balises, et dans ce dossier, le sous-dossier abbr représente une
balise.
2 Dans la liste Utilisé dans, sélectionnez tous les types de document qui seront utilisés par la
bibliothèque de balises.
Les types de documents sélectionnés ici sont ceux qui fourniront les indicateurs de code pour la
bibliothèque de balises spécifiée. Par exemple, si l’option HTML n’est pas sélectionnée pour
une bibliothè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èque nécessitent un préfixe, entrez-en un dans la zone de texte Préfixe
de balise.
Remarque : Un préfixe est utilisé pour identifier l’appartenance d’une balise dans le code à une
bibliothèque de balises définie. Certaines bibliothèques n’utilisent pas de préfixes.
4 Une fois les modifications terminées dans l’éditeur de la bibliothèque de balises, cliquez sur OK.
Pour définir une balise dans une bibliothèque :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de
balises), développez une bibliothèque de balises dans la liste Balises et sélectionnez une balise.
2 Définissez les options de format de balise suivantes :
Sauts de ligne détermine l’endroit où Dreamweaver insère les sauts de ligne pour une balise.
Sommaire détermine comment Dreamweaver insère le contenu d’une balise, à savoir si le saut
de ligne et les règles de formatage s’appliquent au contenu.
Casse indique la casse d’une balise spécifique. Choisissez Par défaut, Minuscules, Majuscules
ou Minuscules/majuscules. Si vous choisissez cette dernière option, la boî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ère (par exemple, getProperty), puis
cliquez sur OK.
Défaut définit la casse par défaut de toutes les balises. Dans la boîte de dialogue Casse de balise
par défaut qui s’affiche, choisissez <MAJUSCULES> ou <minuscules>, puis cliquez sur OK.
Conseil : Il est préférable de définir les minuscules comme casse par défaut, conformément aux
normes XML et XHTML.
Pour modifier l’attribut d’une balise :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de
balises), ouvrez une bibliothèque de balises dans la zone Balises, développez une balise et
sélectionnez un attribut.
2 Dans le menu déroulant Casse d’attribut, choisissez Par défaut, Minuscules, Majuscules ou
Minuscules/majuscules.
Si vous choisissez cette dernière option, la boî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éfaut pour définir la casse par défaut pour tous les noms d’attributs.
3 Dans le menu déroulant Type d’attribut, sélectionnez le type de l’attribut.
Gestion des bibliothèques de balises
423
Si vous choisissez Enuméré, entrez toutes les valeurs d’attribut autorisées dans la zone de
texte Valeurs. Séparer les valeurs par des virgules, sans insérer d’espaces. Par exemple, les valeurs
énumérées de l’attribut showborder de la balise cfchart sont définies comme yes,no.
Rubriques connexes
• Gestion des bibliothèques de balises, page 421
• Ajout de bibliothèques, de balises et d’attributs, page 422
Suppression de bibliothèques, de balises et d’attributs
Vous pouvez utiliser l’éditeur de la bibliothèque de balises pour supprimer des bibliothèques de
balises, des balises et des attributs.
Pour supprimer une bibliothèque, une balise ou un attribut :
1 Dans la boîte de dialogue Editeur de la bibliothèque de balises (Edition > Bibliothèques de
balises), sélectionnez une bibliothèque de balises, une balise ou un attribut dans la boîte de
dialogue Balises.
2 Cliquez sur le bouton Moins (-).
3 Le cas échéant, cliquez sur OK pour confirmer la suppression définitive.
L’élément disparaît de la boîte de dialogue Balises.
4 Cliquez sur OK pour fermer l’éditeur de la bibliothèque de balises et terminer la procédure de
suppression.
Rubriques connexes
• Gestion des bibliothèques de balises, page 421
• Ajout de bibliothèques, de balises et d’attributs, page 422
• Modification de bibliothèques, de balises et d’attributs, page 422
Importation de balises personnalisées dans Dreamweaver
Une fois importées dans Dreamweaver, les balises personnalisées font partie intégrante de
l’environnement de création de pages Web. Par exemple, lorsque vous commencez à taper une
balise personnalisée importée en mode Code, un menu d’indicateurs de code s’affiche avec tous
les attributs de balise et vous permet d’en sélectionner un.
Importation de balises à partir de fichiers XML
Vous pouvez importer des balises à partir d’un fichier XML DTD (Document Type Definition)
ou d’un schéma.
Pour importer des balises à partir d’un fichier XML DTD ou Schema :
1 Ouvrez l’éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises).
2 Cliquez sur le bouton Plus (+), puis choisissez DTD Schema > Importer le fichier DTD ou
Schema XML.
3 Entrez le nom ou l’URL du fichier DTD ou schema.
4 Entrez le préfixe qui servira à
Remarque : Un préfixe est utilisé pour identifier l’appartenance d’une balise dans le code à une
bibliothèque de balises définie. Certaines bibliothèques n’utilisent pas de préfixes.
424
Chapitre 19 : Configuration d’un environnement de codage
5 Cliquez sur OK.
Importation de balises ASP.NET personnalisées
Vous pouvez importer des balises ASP.NET personnalisées dans Dreamweaver.
Au préalable, assurez-vous que la balise personnalisée est installée sur le serveur d’évaluation défini
dans la boîte de dialogue Définition du site (voir Définition du dossier de traitement des pages
dynamiques, page 474). Les balises compilées (fichiers .dll) doivent être placées dans le dossier /bin
de la racine du site, tandis que les balises non compilées (fichiers .ascx) peuvent résider dans un
répertoire ou un sous-répertoire virtuel sur le serveur. Pour plus d’informations, voir la
documentation Microsoft ASP.NET.
Pour importer les balises ASP.NET personnalisées dans Dreamweaver :
1 Ouvrez une page ASP.NET dans Dreamweaver.
2 Ouvrez l’éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises).
3 Cliquez sur le bouton plus (+), puis procédez de l’une des manières suivantes :
Pour importer toutes les balises ASP.NET personnalisées à partir du serveur d’application,
choisissez ASP.NET > Importer toutes les balises personnalisées ASP.NET.
■ Pour n’importer que certaines balises personnalisées à partir du serveur d’application,
choisissez ASP.NET > Importer les balises personnalisées ASP.NET sélectionnées.
La boîte de dialogue Importer les balises personnalisées ASPNet sélectionnées qui s’affiche
répertorie toutes les balises ASP.NET personnalisées installées sur le serveur d’application. Tout
en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, cliquez sur les
balises de la liste, puis sur OK.
■
Importation de balises JSP à partir d’un fichier
Vous pouvez importer une bibliothèque de balises JSP dans Dreamweaver, à partir d’une
multitude de types de fichiers.
Pour importer une bibliothèque de balises JSP dans Dreamweaver :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l’éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises).
3 Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer depuis le fichier (*.tld, *.jar,
*.zip).
4 Entrez un nom de fichier, un URI et un préfixe.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
5 Cliquez sur OK.
Importation de balises JSP à partir d’un serveur (web.xml)
Vous pouvez importer une bibliothèque de balises JSP dans Dreamweaver à partir d’un fichier
web.xml présent sur un serveur JSP.
Pour importer des balises JSP à partir d’un serveur :
1 Ouvrez une page JSP dans Dreamweaver.
2 Ouvrez l’éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises).
Importation de balises personnalisées dans Dreamweaver
425
3 Cliquez sur le bouton Plus (+), puis choisissez JSP > Importer depuis le serveur (web.xml).
La boî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î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’éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises).
3 Dans l’éditeur de la bibliothèque de balises, cliquez sur le bouton Plus (+), puis choisissez JSP >
Importer les balises de serveur JRUN depuis le dossier.
4 Entrez un nom de dossier, un URI et un préfixe.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
5 Cliquez sur OK.
Utilisation d’un éditeur HTML externe avec Dreamweaver
Vous pouvez lancer votre éditeur HTML externe ou un éditeur de texte depuis Dreamweaver
pour éditer le code source du document actif, puis revenir dans Dreamweaver pour continuer à
utiliser son interface graphique. Dreamweaver détecte toute modification enregistrée dans le
document par l’éditeur externe et vous invite dans ce cas à recharger le document.
Les éditeurs HTML intégrés suivants sont acceptés : Macromedia HomeSite (Windows
seulement) ou BBEdit (Macintosh seulement). Vous pouvez également utiliser d’autres éditeurs
de texte, comme Bloc-notes, Wordpad, TextPad, TextEdit, SimpleText, vi ou emacs.
Utilisation d’un éditeur HTML intégré
Vous pouvez installer simultanément Dreamweaver, et HomeSite sous Windows ou une version
d’essai de BBEdit sur Macintosh. Grâce à l’intégration étroite de Dreamweaver avec ces deux
produits,
vous pouvez modifier un document à la fois dans Dreamweaver et dans HomeSite/BBEdit, en
passant d’une application à l’autre ; le document reste automatiquement synchronisé dans les
deux applications. Par ailleurs, ces deux programmes interagissent avec la sélection ; ainsi le texte
sélectionné dans Dreamweaver l’est également lorsque vous passez à BBEdit, et inversement.
Vous pouvez ouvrir d’autres éditeurs externes (en plus de HomeSite et BBEdit) depuis
Dreamweaver, mais le document n’est pas synchronisé dans les deux applications, contrairement à
HomeSite ou BBEdit. Une fois les modifications terminées dans un éditeur externe autre que
HomeSite ou BBEdit, pensez à 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égration pour HomeSite ; cette fonction est intégrée
automatiquement lors de l’installation des deux applications.
Pour utiliser HomeSite :
1 Choisissez Edition > 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’éditeur.
Utilisation de BBEdit (Macintosh seulement)
Vous pouvez désactiver l’intégration de BBEdit si vous ne souhaitez pas travailler avec. Les
sélections ne sont pas supervisées entre Dreamweaver et BBEdit si l’intégration de BBEdit est
désactivée. Toutefois, il peut être plus rapide d’effectuer les modifications dans Dreamweaver si
l’intégration de BBEdit est désactivée.
Pour utiliser BBEdit avec Dreamweaver :
1 Choisissez Edition > 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ésactiver l’intégration de BBEdit :
1 Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis sélectionnez
Types de fichiers/Editeurs.
2 Désactivez Activer l’intégration de BBEdit, puis cliquez sur OK.
Définition des préférences d’éditeur externe et de type de fichier
Vous pouvez spécifier les applications externes à utiliser pour apporter des modifications aux
fichiers comportant certaines extensions.
Pour sélectionner un éditeur HTML externe :
1 Choisissez Edition > Préférences.
2 Sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.
Les préférences Types de fichiers/Editeurs s’affichent.
3 Ajustez les paramètres dans la boîte de dialogue.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
4 Cliquez sur OK.
Pour ouvrir un éditeur HTML externe :
• Choisissez Edition > Modifier avec [nom de l’éditeur].
Utilisation d’un éditeur HTML externe avec Dreamweaver
427
Rubriques connexes
• Ouverture de fichiers en mode Code par défaut, page 420
• Lancement d’un éditeur externe pour des fichiers multimédia, page 371
• Utilisation d’un éditeur HTML intégré, 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çu pour
tout type de développement Web, de la rédaction de pages HTML simples à la conception, au test
et au dé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 à 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édaction et modification de code, page 437
Recherche et remplacement de balises et d’attributs, page 443
Modification rapide d’une sélection de code, page 444
Utilisation des documents de référence sur les langages, page 445
Impression du code, page 446
Rubriques connexes
• Configuration d’un environnement de codage, page 415
• Optimisation et débogage de code, page 447
• Modification du code en mode Création, page 455
A propos du codage dans Dreamweaver
L’environnement de codage de Dreamweaver permet de rédiger, de modifier et de tester le code de
vos pages (dans une multitude de langages). Dreamweaver modifie le code que vous rédigez
uniquement si vous activez les options permettant de réécrire certains éléments de code erronés.
Rubriques connexes
• Affichage du code, page 416
Langages pris en charge
Dreamweaver contient à la fois des options permettant de lancer des éditeurs de texte et des
options conçues pour vous assister dans la ré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écifiques au langage de Dreamweaver ; vous pouvez néanmoins créer et modifier des
fichiers en langage Perl dans Dreamweaver, mais vous ne pourrez pas accé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 éléments de code non valides, Dreamweaver les affiche en mode
Création et, si les options adéquates sont activées, les met en surbrillance en mode Code. Si vous
sélectionnez ces éléments dans l’un des deux modes, l’inspecteur de propriétés affiche des
informations sur les causes de leur non-validité et sur la manière dont corriger les erreurs.
Dreamweaver vous permet d’indiquer vos préférences concernant la correction automatique de
certains types d’éléments de code erronés lorsque vous ouvrez un document.
Rubriques connexes
• Définition des préférences de codage, page 418
• Définition des préfé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ères. Toutefois, Dreamweaver corrige le code uniquement si vous activez les options
correspondantes ou si l’une de vos opérations entraîne une modification du code. Par exemple,
Dreamweaver modifie vos espaces blancs et la casse des attributs uniquement si vous sélectionnez
la commande Appliquer le format source.
Quelques-unes des options de réécriture du code sont activées par défaut. Pour apprendre
comment les désactiver ou en activer d’autres, voir Définition des préférences de correction de code,
page 419.
Les fonctions Roundtrip HTML de Dreamweaver vous permettent d’échanger des documents
entre Dreamweaver et un é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és,
on compte les suivantes :
430
Chapitre 20 : Codage dans Dreamweaver
• Dreamweaver permet de lancer un éditeur de texte tiers pour modifier le document actif. Pour
•
•
•
plus d’informations, voir Utilisation d’un éditeur HTML externe avec Dreamweaver, page 426.
Par défaut, Dreamweaver ne modifie pas le code créé ou modifié par un autre éditeur HTML,
même s’il est incorrect, à moins que vous n’ayez activé les options de réécriture.
Dreamweaver conserve telles quelles les balises qu’il ne reconnaît pas, notamment les
balises XML, en l’absence de critères de référence. Si une balise non reconnue encadre une
autre balise (par exemple, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver la
marque comme erronée, mais ne modifie pas le code.
Vous pouvez activer certaines options de Dreamweaver pour mettre les éléments de code
HTML incorrects en surbrillance (jaune) dans le mode Code. Si vous sélectionnez une section
en surbrillance, l’inspecteur des propriétés affiche des informations sur l’erreur et la manière de
la corriger.
Rubriques connexes
• Définition des préférences de codage, page 418
• Définition des préférences d’affichage, page 417
• A propos du code de comportement de serveur, page 437
A propos du code XHTML généré par Dreamweaver
Dreamweaver génère du code XHTML nouveau et nettoie le code XHTML existant,
conformément à la plupart des spécifications XHTML. Dreamweaver met également à votre
disposition les outils permettant de se conformer aux rares spécifications XHTML ignorées lors
de ce type d’opération.
Remarque : Certaines configurations décrites dans cette section sont communes à plusieurs
versions de HTML.
Le tableau ci-dessous répertorie les spécifications XHTML automatiquement observées par
Dreamweaver.
Spécification XHTML
Actions exécutées par Dreamweaver pour
satisfaire à cette spécification
Ajoute une déclaration XML à un
Si le codage de caractères d’un document est
différent du mode UTF-8 par défaut, le document document XHTML et spécifie le mode de
codage ; par exemple :
doit comporter une déclaration XML.
<?xml version="1.0" encoding="iso-8859-1"
?>
Une déclaration DOCTYPE doit précéder
l’élément racine dans le document, laquelle doit
faire référence à l’un des trois fichiers DTD
(Document Type Definition) pour XHTML (strict,
transitionnel ou jeu de cadres).
Ajoute une déclaration XHTML DOCTYPE à un
document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
Ou, si le document XHTML comporte un jeu de
cadres :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-frameset.dtd">
A propos du codage dans Dreamweaver
431
Spécification XHTML
Actions exécutées par Dreamweaver pour
satisfaire à cette spécification
L’élément racine du document doit être html, et
l’élément html doit désigner l’espace de noms
XHTML.
Ajoute l’attribut namespace à l’élément html
comme suit :
Un document standard doit comporter les
éléments structurels head, title et body. Un
document de jeu de cadres doit comporter les
éléments structurels head, title et frameset.
Dans un document standard, inclut les éléments
structurels head, title et body. Dans un
document de jeu de cadres, inclut les éléments
head, title et frameset.
L’imbrication de tous les éléments du document
doit être correcte :
Génère correctement le code imbriqué et,
pendant le nettoyage du code XHTML, corrige
l’imbrication du code non généré par
Dreamweaver.
<p>Voici un <i>exemple incorrect.</p></i>
<p>Voici un <i>exemple correct.</i></p>
Tous les noms d’éléments et d’attributs doivent
être rédigés en minuscules.
Impose l’usage des minuscules dans les noms
d’éléments et d’attributs HTML du code XHTML
généré par ses soins et pendant le nettoyage du
code XHTML, indépendamment des
préférences de casse définies pour la balise et
l’attribut.
Tous les éléments doivent se terminer par une
balise de fin, à moins qu’ils ne soient déclarés
dans le fichier DTD comme EMPTY.
Insère des balises de fin dans le code généré par
ses soins, ainsi que pendant le nettoyage du
code XHTML.
Les éléments vides doivent se terminer par une
balise de fin ou la balise de début doit être fermée
avec le code />. Par exemple, <br> est incorrect ;
la forme correcte de la balise est soit <br></br>,
soit <br/>. Les éléments vides sont les suivants :
area, base, basefont, br, col, frame, hr, img, input,
isindex, link, meta et param.
Pour garantir la rétrocompatibilité avec les
navigateurs non XML, un espace doit précéder le
code /> (par exemple, <br /> et non <br/>).
Insère les éléments vides avec un espace avant la
barre oblique de fermeture des balises vides dans
le code généré par ses soins ainsi que pendant le
nettoyage du code XHTML.
Il est impossible d’abréger les attributs ; ainsi,
Insère des paires attribut/valeur complètes dans
le code généré 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éter ces attributs booléens sous leur forme
complète.
<tdnowrap> est incorrect ; la forme correcte est
<tdnowrap="nowrap">.
Cette règle s’applique aux éléments suivants :
checked, compact, declare, defer, disabled,
ismap, multiple, noresize, noshade, nowrap,
readonly et selected.
Tous les attributs doivent être placés entre
guillemets.
432
<html xmlns="http://www.w3.org/1999/xhtml">
Chapitre 20 : Codage dans Dreamweaver
Met les valeurs d’attribut entre guillemets dans le
code généré par ses soins, ainsi que pendant le
nettoyage du code XHTML.
Spécification XHTML
Actions exécutées par Dreamweaver pour
satisfaire à cette spécification
Les éléments suivants doivent comporter un
attribut id et un attribut name : a, applet, form,
frame, iframe, img et map. Par exemple, <a
name="intro">Introduction</a> est incorrect ; la
forme correcte est
<a id="intro">Introduction</a> ou
Affecte la même valeur aux attributs name et id,
toutes les fois où l’attribut name est défini par un
inspecteur de propriétés, dans le code généré
par Dreamweaver, ainsi que pendant le
nettoyage du code XHTML.
<a id="section1" name="intro">
Introduction</a>.
Dans le cas d’attributs dont les valeurs sont de
type Enuméré, celles-ci doivent figurer en
minuscules.
Une valeur de type Enuméré est une valeur
appartenant à une liste donnée de valeurs
autorisées ; par exemple, l’attribut align
comprend les valeurs autorisées suivantes :
center, justify, left et right.
Impose l’utilisation des minuscules pour les
valeurs de type Enuméré dans le code généré par
ses soins, ainsi que pendant le nettoyage du
code XHTML.
Tous les éléments de script et de style doivent
comporter un attribut de type.
(La nécessité de l’attribut de type d’un élément
de script a été introduite avec HTML 4, lors de
la dépréciation de l’attribut de langage.)
Définit les attributs de type et de langage dans les
éléments de script ainsi que l’attribut de type
dans les éléments de style, mais aussi dans le
code généré par ses soins et pendant le
nettoyage du code XHTML.
Tous les éléments img et area doivent
comprendre un attribut alt.
Définit ces attributs dans le code généré par ses
soins et, pendant le nettoyage du code XHTML,
signale les attributs alt manquants.
Inclusions côté serveur
Une inclusion côté serveur correspond à un fichier incorporé dans un document par un serveur
lorsque ce document est sollicité par un navigateur.
Lorsque le navigateur du visiteur sollicite le document contenant l’instruction d’inclusion, le
serveur traite cette dernière en cré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-à-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é être
inclus n’apparaît pas dans le navigateur. Il peut donc s’avérer difficile, sans Dreamweaver, de
consulter les fichiers locaux et de les voir tels qu’ils apparaîtront une fois que vous les aurez placés
sur le serveur.
Grâce à DreamweaverDreamweaver, vous pouvez prévisualiser les documents tels qu’ils
apparaissent sur le serveur, à la fois dans le mode Création et lorsque vous affichez un aperçu dans
un navigateur.
Placer une instruction côté serveur dans un document a pour effet d’insérer une référence à un
fichier externe, sans insérer le contenu du fichier spécifié dans le document actif. Dreamweaver
affiche le contenu du fichier externe en mode Création, ce qui facilite la cré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ée au fichier externe est automatiquement reflétée dans chaque document
dans lequel il est inclus.
Il existe deux types d’inclusions à partir du serveur : les inclusions Virtuel et Fichier. Sélectionnez
l’instruction correspondant au type de serveur Web utilisé :
• Si votre serveur est un serveur Web Apache, sélectionnez Virtuel. (choix par dé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électionnez Fichier
(Virtuel ne fonctionne avec IIS que dans des cas précis).
Remarque : Malheureusement, IIS ne vous permet pas d’inclure un fichier dans un dossier situé
au-dessus du dossier en cours dans la hiérarchie des fichiers, à moins qu’un logiciel spécial n’ait
été installé sur le serveur. Pour pouvoir inclure un fichier d’un dossier placé plus haut dans la
hiérarchie des dossiers sur un serveur IIS, demandez à votre administrateur système si le logiciel
nécessaire est installé.
• Pour les autres types de serveurs ou si vous ne savez pas quel type de serveur vous utilisez,
demandez à votre administrateur système quelle option utiliser.
Certains serveurs sont configurés de façon à examiner tous les fichiers pour voir s’ils contiennent
des inclusions côté serveur et d’autres pour examiner uniquement les fichiers portant une
extension particulière, telle que .shtml, .shtm ou .inc. Si une inclusion côté serveur ne fonctionne
pas, demandez à votre administrateur système si le nom du fichier utilisant l’inclusion doit avoir
une extension spéciale (par exemple, si le fichier porte le nom canoe.html, il vous faudra peut-être
remplacer ce nom par canoe.shtml). Si vous voulez que vos fichiers conservent leurs extensions
.html ou .htm, demandez à votre administrateur système de configurer le serveur de façon à ce
qu’il examine tous les fichiers (et pas seulement les fichiers portant une certaine extension) pour
les inclusions à partir du serveur. L’analyse des inclusions à partir du serveur demandant toutefois
un peu plus de temps, les pages analysées par le serveur s’affichent un peu plus lentement que les
autres pages. Pour cette raison, certains administrateurs système ne donnent pas la possibilité
d’analyser tous les fichiers.
Rubriques connexes
• Insertion d’une inclusion côté serveur, page 462
• Modification du contenu d’une inclusion côté serveur, page 462
Expressions régulières
Les expressions régulières sont des modèles décrivant des combinaisons de caractères dans un
texte. Utilisez-les dans vos recherches pour décrire des concepts tels que « lignes commençant par
‘var’ » et « valeurs d’attribut contenant un nombre ». 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ésente les caractères spéciaux des expressions régulières, leur signification
et des exemples d’utilisation. Pour rechercher du texte contenant un des caractères spéciaux
présentés dans le tableau, indiquez qu’il s’agit d’un caractère spécial à l’aide d’une barre oblique
inversée. Par exemple, pour rechercher l’astérisque dans la phrase conditions spéciales*, vous
pouvez utiliser un modèle de recherche tel que celui-ci : spéciales\*. Si vous n’indiquez pas
l’astérisque comme caractère spécial, vous trouverez toutes les occurrences de « spéciales » (de
même que « spéciale », « spécialess » et « spécialesss »), et pas seulement celles qui sont suivies d’un
astérisque.
Caractère
trouve
Exemple
^
Début de saisie ou de ligne.
^T trouve « T » dans « Tonnerre de
Brest » mais pas dans « La case de
l’oncle Tom »
$
Fin de saisie ou de ligne.
n$ trouve « n » dans « malin » mais pas
dans « noir »
*
Le caractère précédent, 0 ou plusieurs
fois.
um* trouve « um » dans « rhum »,
Le caractère précédent, 1 ou plusieurs
fois.
um+ trouve « um » dans « rhum »,
?
Le caractère précédent, une fois au
maximum (en d’autres termes, le
caractère précédent est facultatif).
st?on trouve « son » dans « Johnson »
et « ston » dans « Johnston », mais rien
dans « Appleton » ou « tension »
.
Tout caractère, sauf une nouvelle ligne
(retour à la ligne).
.an trouve « ran » « tan » et « lan » dans
Soit x, soit y.
FF0000|0000FF trouve « FF0000 »
dans BGCOLOR="#FF0000" et
« 0000FF » dans FONT
+
x|y
« umm » dans « yummy » et « u » dans
« bouge »
« umm » dans « yummy » mais rien
dans « bouge »
le mot « rantanplan »
COLOR="#0000FF".
{n}
Exactement n occurrences du caractère l{2} trouve « ll » dans « elle » et les
précédent.
deux premiers l de « ellllle », mais ne
trouve rien dans « léger »
{n,m}
Au moins n et au plus m occurrences du F{2,4} trouve « FF » dans
caractère précédent.
« #FF0000 » et les quatre premiers F
dans #FFFFFF.
[abc]
L’un des caractères entourés de
[e-g] trouve « e » dans « œil », « f »
crochets. Spécifiez une plage de
dans « fil » et « g » dans « garde »
caractères à l’aide d’un trait d’union (par
exemple, [a-f] équivaut à [abcdef]).
[^abc]
Tout caractère non inclus entre les
[^aeiou] trouve initialement « r » dans
crochets. Spécifiez une plage de
« orange », « b » dans « balle » et « k »
caractères à l’aide d’un trait d’union (par dans « eek! »
exemple, [^a-f] équivaut à [^abcdef]).
\b
Limite de mot (par exemple un espace
ou un retour chariot).
\bb trouve « b » dans « balle » mais pas
dans « gober » ou « snob »
A propos du codage dans Dreamweaver
435
Caractère
trouve
Exemple
\B
Tous les éléments sauf les limites de
mot
\Bb trouve « b » dans « gober » mais
pas dans « balle »
\d
Tout chiffre. C’est l’équivalent de [0-9]. \d trouve « 3 » dans « C3PO » et « 2 »
dans « appartement 2G ».
\D
Tout caractère alphabétique et non
\D trouve « S » dans « 900S » et « Q »
numérique. C’est l’équivalent de [^0-9]. dans « Q45 ».
\f
Saut de page.
\n
Saut de ligne.
\r
Retour chariot.
\s
Tout « espace blanc », ou caractère
\sval trouve « val » dans « le val
d’espacement : espace, tabulation, saut André » mais pas dans « aval »
de page ou saut de ligne.
\S
Tout caractère autre qu’un « espace
blanc ».
\t
Tabulation.
\w
Tout caractère alphanumérique, y
compris le caractère de soulignement.
C’est l’équivalent de [A-Za-z0-9_].
c\w* trouve « chien » dans « le chien
noir », ainsi que « cou » et « chien »
dans « le cou du chien noir »
\W
Tout caractère non alphanumérique.
C’est l’équivalent de [^A-Za-z0-9_].
\W trouve « & » dans « Tintin&Milou »
et « % » dans « 100 % »
Contrôle+Entrée
ou Maj+Entrée
(Windows), ou
Contrôle+ Retour
ou Maj+Retour
ou
Commande+Ret
our (Macintosh)
Retour chariot. Veillez à désactiver
l’option Ignorer les différences entre
les espaces blancs lorsque vous
effectuez ce type de recherche si vous
n’utilisez pas des expressions
régulières. Notez que cette recherche
porte sur un caractère particulier et non
sur la notion de retour à la ligne ; par
exemple, elle ne trouvera pas une balise
<br> ou <p>. Les caractères de retour
chariot apparaissent en tant qu’espaces
en mode Création, et non en tant que
sauts de ligne.
\Sval trouve « val » dans « aval » mais
pas dans « le val André »
Utilisez des parenthèses pour définir au sein de l’expression régulière des groupes auxquels il sera
fait référence plus tard ; utilisez $1, $2, $3, etc. dans le champ Remplacer pour faire référence au
premier, deuxième, troisième, etc., groupe entre parenthèses.
Remarque : Dans la zone de texte Rechercher, faites référence au groupe entre parenthèses
mentionné plus tôt dans l’expression réguliè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 échangent le
jour et le mois dans une date séparée par des barres obliques permettant ainsi la conversion entre
les dates de style américain et les dates de style européen.
436
Chapitre 20 : Codage dans Dreamweaver
Rubriques connexes
• Recherche de balises, d’attributs ou de texte contenu dans des balises spécifiques, page 443
• Enregistrement de modèles de recherche, page 444
A propos du code de comportement de serveur
Lorsque vous sélectionnez un comportement de serveur dans le panneau Comportements de
serveur pendant le développement d’une page dynamique, Dreamweaver insè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étecte les comportements de serveur
en se repérant à des modèles de code spécifiques dans la page, puis les affiche dans le panneau
correspondant. Toute modification du code d’un bloc de code empêche dès lors Dreamweaver de
dé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édaction et modification de code
Dreamweaver met à votre disposition plusieurs fonctions qui vous aideront à rédiger et à corriger
efficacement le code.
Utilisation des indicateurs de code
Les indicateurs de code vous permettent d’insérer et de modifier le code rapidement et sans erreur
de saisie. Une liste de suggestions apparaît lorsque vous tapez certains caractères, par exemple les
premières lettres d’une balise, d’un attribut ou d’un nom de propriété CSS. Cette fonction est
aussi pratique pour insérer ou modifier du code que pour consulter simplement les attributs
disponibles pour une balise, les paramètres associés à une fonction ou les méthodes spécifiques à
un objet.
Les indicateurs de code sont disponibles pour différents types de code. Une liste d’éléments
correspondant au code saisi s’affiche lorsque vous entrez un caractère spécifique indiquant le
dé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 (<).
Conseil : Pour exploiter pleinement cette fonctionnalité, en particulier lorsque vous l’utilisez pour des
fonctions et des objets, définissez l’option Délai de la boîte de dialogue Préférences d’indicateurs de
code sur 0 seconde. Pour plus d’informations, voir Définition des préférences d’indicateurs de code,
page 418.
Pour faire disparaître la liste des indicateurs de code, appuyez sur la touche Retour arrière
(Windows) ou Arriè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édaction et modification de code
437
Pour insérer un marqueur ou d’autres éléments de code à l’aide des indicateurs en mode
Code :
1 Saisissez le premier caractère du segment de code. Par exemple, pour insérer une balise, tapez un
crochet ouvrant (<) ; pour insérer un attribut, placez le point d’insertion juste après le nom de
la balise, puis appuyez sur la barre d’espace.
Une liste d’éléments (par exemple les noms des différentes balises ou des différents attributs)
s’affiche.
Conseil : Vous pouvez fermer cette liste à tout moment en appuyant sur la touche Echap.
2 Faites défiler les éléments de la liste à l’aide de la barre de défilement ou des touches fléchées vers
le haut et vers le bas.
3 Double-cliquez sur l’un des éléments de cette liste pour l’insérer ; vous pouvez également le
sélectionner, puis appuyer sur la touche Entrée (Windows) ou Retour (Macintosh).
Conseil : Si vous avez créé 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éation, il se peut que cette opération ait entraîné la génération temporaire
d’éléments de code non valides ; pour supprimer ces éléments du mode Création, insérez votre
style, puis actualisez la page en appuyant sur la touche F5.
Pour modifier une balise à l’aide des indicateurs de code, procédez de l’une des manières
suivantes :
• Pour remplacer un attribut par un autre, supprimez d’abord l’attribut concerné ainsi que sa
•
valeur, puis ajoutez le nouvel attribut et la valeur associée en suivant la procédure ci-avant.
Pour modifier une valeur, supprimer d’abord la valeur concernée, puis ajoutez une nouvelle
valeur en suivant la procédure ci-avant.
Rubriques connexes
• Définition des préfé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éutiliser
rapidement. Vous pouvez créer et insérer des fragments de code HTML, JavaScript, CFML, ASP
et JSP, notamment. Dreamweaver contient également quelques fragments de code prédéfinis
pouvant servir de point de départ.
Cette section décrit les procédures d’insertion, de création, de modification et de suppression des
fragments de code. Elle permet également de comprendre comment gérer les fragments de code et
les partager avec vos collaborateurs.
Pour insérer un fragment de code :
1 Placez le point d’insertion à l’endroit où vous souhaitez insérer le fragment de code ou
sélectionnez le code à combiner avec le fragment choisi.
2 Dans le panneau Fragments de code (Fenêtre > Fragments de code), double-cliquez sur le
fragment de code.
Vous pouvez également cliquer avec le bouton droit de la souris (Windows) ou en maintenant
la touche Contrôle enfoncée (Macintosh) sur le fragment de code, puis sélectionner Insérer
dans le menu contextuel.
438
Chapitre 20 : Codage dans Dreamweaver
Pour créer un fragment de code :
1 Cliquez sur l’icône Nouveau fragment de code situé au bas du panneau Fragments de code.
La boîte de dialogue Fragment de code s’affiche.
2 Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
Pour modifier un fragment de code :
• Dans le panneau Fragments de code, sélectionnez un fragment de code, puis cliquez sur le
bouton Modifier le fragment de code situé en bas du panneau.
Pour effacer un fragment de code :
• Dans le panneau Fragments de code, sélectionnez un fragment de code, puis cliquez sur le
bouton Supprimer situé en bas du panneau.
Pour créer des dossiers de fragments de code en vue de gérer ces fragments :
1 Cliquez sur le bouton Nouveau dossier de fragments de code situé au bas du panneau Fragments
de code.
2 Faites glisser des fragments de code vers le nouveau dossier ou d’autres dossiers, à 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ée (Macintosh) et sélectionnez Modifier les raccourcis clavier.
L’éditeur de raccourcis clavier s’ouvre.
Dans le menu contextuel Commandes, choisissez Fragments de code.
Une liste de fragments de code s’affiche.
Sélectionnez celui qui vous inté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’équipe :
1 Recherchez le fichier correspondant au fragment de code à 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é sur votre ordinateur ou sur un
ordinateur en réseau.
3 Veillez à ce que les autres membres de l’équipe copient le fichier du fragment de code dans leur
dossier Configuration/Snippets respectif.
Insertion rapide de code avec la barre Insérer
Utilisez la barre Insérer pour ajouter rapidement du code dans une page.
Pour insérer rapidement des éléments de code :
1 Positionnez le point d’insertion dans le code.
2 Sélectionnez la catégorie appropriée de la barre Insérer.
3 Cliquez sur un bouton de la barre Insérer ou sélectionnez un élément de l’un des menus
contextuels de la barre Insérer.
Rédaction et modification de code
439
Dès que vous cliquez sur une icône, le code peut apparaître immédiatement dans la page ou
une boîte de dialogue peut vous demander de spécifier des informations supplémentaires pour
terminer le code.
Pour connaître la fonction de chaque bouton, placez le pointeur de la souris dessus jusqu’à ce
qu’une info-bulle s’affiche. Le nombre et le type des boutons de la barre Insérer varient selon la
nature du document affiché et selon que le mode Code ou Création est actif.
Bien que la barre Insérer regroupe les balises fréquemment utilisées, son contenu n’est pas
exhaustif. Vous trouverez un choix plus varié de balises dans le sélecteur de balises.
Rubriques connexes
• Barre Insérer, page 39
Insertion de balises avec le Sélecteur de balises
Vous pouvez utiliser le sélecteur de balises pour insérer dans une page n’importe quelle balise
figurant dans les bibliothèques de balises de Dreamweaver (notamment les bibliothèques de
balises de Macromedia ColdFusion et ASP.NET). Pour plus d’informations sur les bibliothèques
de balises, voir Gestion des bibliothèques de balises, page 421.
Pour insérer une balise à l’aide du sé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ôle enfoncée (Macintosh), puis sélectionnez Insérer la balise.
Le Sélecteur de balises s’affiche. Le panneau de gauche répertorie les bibliothèques de balises
prises en charge, tandis que le panneau de droite affiche les balises individuelles du dossier de
bibliothèques de balises sélectionné.
2 Sélection et insertion d’une balise.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.
3 Pour fermer le sélecteur de balises, cliquez sur le bouton Fermer.
440
Chapitre 20 : Codage dans Dreamweaver
Modification de balises avec des éditeurs de balises
Les éditeurs de balises permettent d’afficher, de spécifier et de modifier les attributs d’une balise.
Pour modifier une balise à l’aide d’un éditeur de balises :
1 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) sur une balise (en mode Code) ou sur un objet (en mode Création), puis
sé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 à partir de l’éditeur de balises, cliquez
sur l’option Infos sur les balises.
Mise en retrait des blocs de code
Lorsque vous ré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électionnés, en les
déplaçant d’une tabulation vers la gauche ou vers la droite.
Pour mettre en retrait le bloc de code sélectionné, procédez de l’une des manières
suivantes :
• Appuyez sur Tab.
• Sélectionnez Edition > Code de retrait.
Pour annuler la mise en retrait du bloc de code sélectionné, procédez de l’une des manières
suivantes :
• Appuyez sur Maj+Tab.
• Sélectionnez Edition > Code de retrait négatif.
Rubriques connexes
• Modification rapide d’une sélection de code, page 444
Rédaction et modification de code
441
Copie et collage du code
Vous pouvez copier et coller du code à partir d’une autre application ou du mode Code lui-mê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ètent le code, par
exemple les balises HTML).
Pour copier et coller le code en tant que texte :
1 Copiez le code à partir de Dreamweaver ou d’une autre application.
2 Placez le point d’insertion en mode Création, puis sélectionnez Edition > Coller.
Le code est visible en mode Création. Les crochets sont codés sous forme d’entités HTML,
considéré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 à partir de Dreamweaver ou d’une autre application.
Pour effectuer la copie à partir du mode Création, sélectionnez Edition > Copier HTML.
2 Procédez de l’une des manières suivantes :
■
■
En mode Code, positionnez le point d’insertion, puis sélectionnez Edition > Coller. Pour
mettre à jour l’affichage en mode Création, appuyez sur la touche F5.
En mode Création, positionnez le point d’insertion, puis sélectionnez Edition >
Coller HTML.
Insertion de commentaires HTML
Un commentaire est un texte descriptif que vous insérez dans le code HTML pour expliciter le
code ou fournir d’autres informations. Le commentaire apparaît uniquement en mode Code ; il
ne s’affiche pas dans un navigateur.
Pour insérer un commentaire au niveau du point d’insertion :
• Sélectionnez Insertion > Commentaire.
En mode Code, Dreamweaver insère une balise de commentaire au milieu de laquelle il
positionne le point d’insertion. Saisissez votre commentaire.
En mode Création, Dreamweaver affiche la boîte de dialogue Commentaire. Entrez votre
commentaire, puis cliquez sur OK.
Pour afficher les marqueurs de commentaires en mode Création :
• Choisissez Affichage > Assistances visuelles > Eléments invisibles.
Vérifiez que l’option Commentaires est sélectionnée dans les préférences des éléments
invisibles. Dans le cas contraire, le marqueur de commentaire ne s’affiche pas.
Pour modifier un commentaire existant, procédez de l’une des manières suivantes :
• En mode Création, sélectionnez le marqueur Commentaire, puis modifiez le texte de votre
•
442
commentaire dans l’inspecteur de propriété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 à la fonction qui vous inté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 à n’importe quel endroit avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh). Dans le menu contextuel,
sélectionnez le sous-menu Fonctions.
Remarque : Le sous-menu Fonctions ne s’affiche pas en mode Création.
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le sousmenu.
Conseil : Pour afficher ces fonctions dans l’ordre alphabé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ées (Macintosh) en mode Code, puis sé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égulières, page 434
• Recherche et remplacement de texte, page 316
Recherche de balises, d’attributs ou de texte contenu dans des balises
spé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 également rechercher des chaînes de texte spécifiques se trouvant à l’intérieur ou à
l’exté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înes de texte dans le code :
1 Ouvrez le document contenant l’élément recherché ou sélectionnez des documents ou un
dossier dans le panneau Fichiers.
2 Sélectionnez la commande Edition > Rechercher et remplacer.
La boîte de dialogue Rechercher et remplacer s’affiche.
3 Indiquez les fichiers sur lesquels doit porter la recherche, puis indiquez le type de recherche à
effectuer et enfin le texte ou les balises à rechercher. Vous pouvez également indiquer le texte
censé remplacer l’élément recherché. 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ération terminée, fermez la boîte de dialogue en cliquant sur le bouton Fermer.
Pour effectuer une nouvelle recherche sans afficher la boîte de dialogue Rechercher et
remplacer :
• Appuyez sur la touche F3 (Windows) ou Commande+G (Macintosh).
Rubriques connexes
• Expressions régulières, page 434
Enregistrement de modèles de recherche
Vous pouvez garder vos modèles de recherche en mémoire pour les réutiliser ultérieurement.
Pour enregistrer un modèle de recherche :
1 Dans la boîte de dialogue Rechercher et remplacer (Edition > Rechercher et remplacer),
définissez les paramètres de la recherche.
Si vous exécutez une recherche de balise ou de texte (avancé), voir Recherche de balises,
d’attributs ou de texte contenu dans des balises spécifiques, page 443 pour plus d’informations sur
la définition des paramètres de recherche supplémentaires.
2 Cliquez sur le bouton Enregistrer la requête (représentant une disquette).
3 Dans la boîte de dialogue qui s’affiche, recherchez le dossier où vous voulez enregistrer les
requêtes. Saisissez un nom pour identifier le fichier correspondant à la requête, puis cliquez sur
Enregistrer.
Par exemple, si le modèle de recherche inclut la recherche de balises img sans l’attribut alt,
vous pouvez nommer la requête img_sans_alt.dwr.
Remarque : L’extension des fichiers correspondant aux requêtes enregistrées est .dwr. Certains
fichiers de requête enregistrés à partir de versions antérieures de Dreamweaver peuvent
également avoir l’extension .dwq.
Pour rap