Utilisation de Dreamweaver MX
™
macromedia
®
Marques commerciales
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind et Xtra sont des marques commerciales de Macromedia,
Inc. et peuvent être déposées aux Etats-Unis ou dans d’autres juridictions ou 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.
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.
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 CIDESSUS 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 © 2002 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.
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/.
Numéro de référence ZDW60M300F
Remerciements
Gestion de projet : Sheila McGinn
Rédaction : Chris Bedford, Kim Diezel, Jed Hartman, Charles Nadeau, Jennifer Rowe
Mise en forme : Mary Ferguson, Mary Kraemer, Lisa Stanziano
Gestion de la production : Patrice O’Neill
Conception et production multimédia : Aaron Begley, Benjamin Salles et Noah Zilberberg
Conception et production de l’aide et de la documentation : Chris Basmajian, Caroline Branch, John Francis
Mise en forme et production du site Web : George Brown, Rebecca Godbois, Jeff Harmon, Jon Varese
Gestion de la localisation : Bonnie Loo
Remerciements particuliers à Luciano Arruda, Jake Cockrell, Kristin Conradi, George Comninos, David Deming, Tonya Estes, Sadia Bellal
Faber, Stephanie Goss, David Halbakken, Nick Halbakken, Wanda Huang, Tim Hussey, Narciso (nj) Jaramillo, Craig Jennings, Florian de
Joannès, Ken Karleskint, Sho Kuwamoto, David Lenoe, Raymond Lim, Jay London, Sam Mathews, Larry McLister, Susan Morrow, Masayo
Noda, Dan Radigan, Nivesh Rajbhandari, Scott Richards, Yoko Shindo, Mike Sundermeyer, Heidi Bauer Williams, Jorge Taylor, Vincent
Truong, Lawrence Teschmacher, Venu Venugopal, Yoko Vogt, et les équipes d’ingénierie et de contrôle qualité de Dreamweaver.
Première édition : juin 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
2
TABLE DES MATIÈRES
Partie I
Notions de base de Dreamweaver
CHAPITRE 1
Bienvenue dans Dreamweaver .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Prise en main de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Processus de création d'un site Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Par où débuter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nouveautés de Dreamweaver MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ressources sur le langage HTML et les technologies Web . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 2
Exploration de l'espace de travail .
16
18
22
25
25
29
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Utilisation de l'espace de travail de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des fenêtres et des panneaux dans Dreamweaver. . . . . . . . . . . . . . . . . . . . . .
Utilisation de Dreamweaver avec d'autres applications . . . . . . . . . . . . . . . . . . . . . . . . .
Personnalisation de Dreamweaver : notions de base . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 3
Planification et configuration de votre site .
31
37
50
51
. . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A propos de la planification et de la création du site . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Configuration d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Utilisation de l'assistant de définition d'un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Configuration d'un dossier local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Configuration d'un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Modification d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Modification de sites Web existants dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 68
CHAPITRE 4
Gestion du site .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
A propos du panneau Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A propos de la carte du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Importation et exportation de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Suppression d'un site de votre liste de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de l'archivage et de l'extraction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
72
83
89
89
90
3
Acquisition et placement de fichiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Synchronisation des fichiers entre le site local et le site distant . . . . . . . . . . . . . . . . . . . . 96
Voilage des dossiers et des fichiers du site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Utilisation des Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Utilisation des rapports pour améliorer le déroulement du travail . . . . . . . . . . . . . . . . 105
A propos du panneau Sitespring dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Utilisation du panneau Sitespring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
CHAPITRE 5
Configuration d'un document.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Création de documents Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Utilisation de la boîte de dialogue Nouveau document . . . . . . . . . . . . . . . . . . . . . . . . 112
Ouverture de documents existants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Définition des propriétés du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Utilisation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Sélection d'éléments dans la fenêtre de document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Utilisation de guides visuels durant la conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Affichage et modification du contenu de l'en-tête . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
A propos de l'automatisation des tâches. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Partie II
Préparation à la création de sites dynamiques
CHAPITRE 6
Configuration d'une application Web
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Remarque à l'attention des utilisateurs de Dreamweaver UltraDev 4 . . . . . . . . . . . . . . 133
Eléments nécessaires à la création d'applications Web . . . . . . . . . . . . . . . . . . . . . . . . . 134
Configuration d'un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Configuration d'un serveur d'application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Création d'un dossier racine pour l'application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Dépannage des erreurs de serveur d'application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
CHAPITRE 7
Connexions à des bases de données pour les développeurs
ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 145
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Modification ou suppression d'une connexion à une base de données . . . . . . . . . . . . . 147
Connexion au moyen de la connectivité UltraDev 4 . . . . . . . . . . . . . . . . . . . . . . . . . . 147
CHAPITRE 8
Connexions à des bases de données pour les développeurs ASP.NET
151
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Modification ou suppression d'une connexion à une base de données . . . . . . . . . . . . . 154
CHAPITRE 9
Connexions à des bases de données pour les développeurs ASP
4
Table des matières
. . . . . 157
Description des connexions aux bases de données ASP . . . . . . . . . . . . . . . . . . . . . . . . 158
Création d'une connexion DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Création d'une connexion sans DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Connexion à une base de données via un fournisseur d'accès. . . . . . . . . . . . . . . . . . . . 164
Modification ou suppression d'une connexion à une base de données . . . . . . . . . . . . . 167
CHAPITRE 10
Connexions à des bases de données pour les développeurs JSP
. . . . . 169
Description des connexions JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Connexion via un pilote ODBC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modification ou suppression d'une connexion à une base de données . . . . . . . . . . . . .
169
170
172
175
CHAPITRE 11
Connexions à des bases de données pour les développeurs PHP . . . . .
177
Connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Modification ou suppression d'une connexion à une base de données . . . . . . . . . . . . . 178
Partie III
Utilisation du code de page
CHAPITRE 12
Configuration d'un environnement de codage
. . . . . . . . . . . . . . . . . . . . . . . 181
Affichage du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Définition des préférences d'affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Définition des préférences de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Personnalisation des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Ouverture de fichiers en mode Code par défaut. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Définition des préférences du validateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Gestion des bibliothèques de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Importation de balises personnalisées dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 191
Utilisation d'un éditeur HTML externe avec Dreamweaver . . . . . . . . . . . . . . . . . . . . 193
CHAPITRE 13
Codage dans Dreamweaver.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
A propos de l'environnement de codage de Dreamweaver . . . . . . . . . . . . . . . . . . . . . .
Rédaction et modification de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Recherche et remplacement de balises et d'attributs. . . . . . . . . . . . . . . . . . . . . . . . . . .
Accès aux références de langue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 14
Optimisation et débogage de code
197
199
205
210
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Nettoyage de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vérification de l'équilibre des balises et des accolades . . . . . . . . . . . . . . . . . . . . . . . . .
Validation de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conformité des pages XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation du débogueur JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation du débogueur ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table des matières
211
212
213
213
217
223
5
CHAPITRE 15
Modification du code en mode Création .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Modification du code avec l'inspecteur de propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Modification du code avec un éditeur de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Modification du code avec Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Modification du code à l'aide du sélecteur de balises . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Modification des scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Utilisation des inclusions côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Partie IV
Conception de la mise en page
CHAPITRE 16
Présentation de contenu à l'aide de tableaux
. . . . . . . . . . . . . . . . . . . . . . . . 237
Insertion d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Ajout de contenu dans une cellule de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Importation de données tabulaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Sélection d'éléments de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Mise en forme des tableaux et des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Redimensionnement de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Modification de la largeur des colonnes et de la hauteur des lignes . . . . . . . . . . . . . . . 245
Ajout et suppression de lignes et de colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Imbrication de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Couper, copier et coller des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Tri des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Exportation des données d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
CHAPITRE 17
Le mode de Mise en forme .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
A propos des cellules et des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Activation et désactivation du mode de Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . 254
Dessin de cellules et de tableaux de Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Ajout de contenu dans une cellule de Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Déplacement et redimensionnement de cellules et de tableaux de Mise en forme . . . . 260
Formatage de cellules et de tableaux de Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . 262
Définition de la largeur des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Définition des préférences du mode de Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . 266
CHAPITRE 18
Utilisation de cadres .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
A propos des cadres et des jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Choix de l'utilisation des cadres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
A propos de la création de pages Web basées sur des cadres dans Dreamweaver . . . . . . 270
Création de cadres et de jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Sélection de cadres et de jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Enregistrement des fichiers du cadre et du jeu de cadres . . . . . . . . . . . . . . . . . . . . . . . 275
Affichage et définition des propriétés des cadres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Affichage et définition des propriétés des jeux de cadres. . . . . . . . . . . . . . . . . . . . . . . . 277
6
Table des matières
Définition des contenus de cadre avec liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Gestion des navigateurs qui ne peuvent pas afficher les cadres . . . . . . . . . . . . . . . . . . . 279
Utilisation des comportements JavaScript avec les cadres . . . . . . . . . . . . . . . . . . . . . . . 279
Partie V
Ajout de contenu
CHAPITRE 19
Insertion et mise en forme de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Insertion et mise en forme de texte HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mise en forme de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de styles HTML pour formater un texte . . . . . . . . . . . . . . . . . . . . . . . . . .
A propos des feuilles de style en cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conversion de styles CSS en balises HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vérification orthographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Recherche et remplacement de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 20
Insertion d’images .
283
286
292
298
307
308
308
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
A propos des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Redimensionnement d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création d'une image survolée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation d'un éditeur d'image externe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Application de comportements aux images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 21
Intégration de Dreamweaver à d'autres applications
311
312
315
316
317
318
. . . . . . . . . . . . . . . . . 321
Intégration de Fireworks et Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Utilisation de Dreamweaver et Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Création d'un album photos pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Utilisation de Dreamweaver et Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
CHAPITRE 22
Insertion d'éléments multimédia
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Insertion et lecture d'objets multimédia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Lancement d'un éditeur externe pour des fichiers multimédia . . . . . . . . . . . . . . . . . . . 338
Utilisation des Design Notes (Notes de conception) avec les objets multimédia. . . . . . 340
A propos du contenu Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Insertion d'un objet de bouton Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Insertion d'un objet de texte Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Insertion d'animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Insertion d'animations Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Ajout d'une vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Ajout de son à une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Lien vers un fichier audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Incorporation d'un fichier son. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Insertion du contenu d'un plug-in Netscape Navigator . . . . . . . . . . . . . . . . . . . . . . . . 348
Table des matières
7
Insertion d'un contrôle ActiveX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Insertion d'une applet Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Utilisation de comportements pour contrôler les objets multimédia . . . . . . . . . . . . . . 350
CHAPITRE 23
Dreamweaver et accessibilité
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Utilisation des fonctions d'accessibilité de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 354
Création de pages Web accessibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Test de l'accessibilité de votre site Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Partie VI
Utilisation de comportements et d'animations
CHAPITRE 24
Utilisation des comportements JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . 369
Utilisation du panneau Comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
A propos des événements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Application d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
A propos des comportements et du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Association d'un comportement à un scénario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Modification d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Actualisation d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Création de nouvelles actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Téléchargement et installation de comportements créés par des développeurs tiers . . . 374
Utilisation des actions de comportement livrées avec Dreamweaver . . . . . . . . . . . . . . . 375
CHAPITRE 25
Animation de calques .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Code HTML pour les calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Création de calques sur une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Imbrication des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Ajout de contenu dans les calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Affichage et définition des propriétés du calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Utilisation de tableaux et de calques pour la mise en forme . . . . . . . . . . . . . . . . . . . . . 411
Animation de calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Animation de calques à l'aide d'actions de comportement . . . . . . . . . . . . . . . . . . . . . . 421
Partie VII
Gestion du contenu sur plusieurs pages
CHAPITRE 26
Liens et navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Emplacements et chemins d'accès des documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Gestion des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Création de menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
8
Table des matières
Création de barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Création de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Association de comportements à des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
CHAPITRE 27
Gestion des actifs de site, des bibliothèques et des modèles . . . . . . . . . .
447
Utilisation du panneau Actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Gestion du panneau Actifs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
Utilisation des éléments de bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
Création, gestion et modification des éléments de bibliothèque. . . . . . . . . . . . . . . . . . 459
A propos des modèles Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Création d'un modèle Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Création de régions modifiables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Création de régions répétées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Définition d'attributs de balise modifiables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
A propos des régions facultatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Création d'un document à partir d'un modèle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Modification du contenu dans une page basée sur un modèle . . . . . . . . . . . . . . . . . . . 481
A propos des modèles imbriqués . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
Création d'un modèle imbriqué . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
Application d'un modèle à un document existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
Modification et mise à jour des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
A propos de XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490
CHAPITRE 28
Test d'un site . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493
Vérification de la compatibilité du navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494
Utilisation de comportements pour détecter le type et la version des navigateurs et des plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Aperçu de page dans les navigateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Vérification des liens dans une page ou un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497
Correction des liens brisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499
Ouverture des documents liés dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Vérification du temps et de la taille de téléchargement . . . . . . . . . . . . . . . . . . . . . . . . 500
Utilisation des rapports pour tester un site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Partie VIII
Ajout de contenu dynamique aux pages Web
CHAPITRE 29
Optimisation de l'espace de travail pour tirer parti des fonctions de
développement visuel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 505
Affichage de panneaux utiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Affichage de la structure 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 . . . . . . .
Table des matières
505
507
508
512
512
513
9
CHAPITRE 30
Conception de pages dynamiques dans Dreamweaver .
. . . . . . . . . . . . . . 515
Conception de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Création d'une source de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516
Ajout d'un contenu dynamique à une page Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
Amélioration des fonctionnalités d'une page dynamique . . . . . . . . . . . . . . . . . . . . . . . 518
Test et débogage d'une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520
CHAPITRE 31
Stockage et récupération des données spécifiques à une page
. . . . . . . 523
Utilisation d'une base de données pour stocker un contenu. . . . . . . . . . . . . . . . . . . . . 523
Collecte de données envoyées par les utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Accès à des données stockées dans des variables de session . . . . . . . . . . . . . . . . . . . . . . 528
CHAPITRE 32
Définition de sources de contenu dynamique .
. . . . . . . . . . . . . . . . . . . . . . . 535
Description des sources de contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535
Définition d'un jeu d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Définition de paramètres d'URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Définition de paramètres de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542
Définition de variables de session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Définition de variables d'application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544
Définition de variables de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
Mise en mémoire cache de sources de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550
Modification ou suppression de sources de contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . 550
Copie d'un jeu d'enregistrements d'une page à une autre. . . . . . . . . . . . . . . . . . . . . . . 551
CHAPITRE 33
Ajout d'un contenu dynamique à une page Web
. . . . . . . . . . . . . . . . . . . . . 553
A propos de l'ajout d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Ajout d'un texte dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Création d'images dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
Création d'attributs HTML dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
Création de paramètres d'objet (ActiveX, Flash, etc.) dynamiques . . . . . . . . . . . . . . . . 559
Modification d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Suppression d'un contenu dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
CHAPITRE 34
Affichage des enregistrements de base de données
. . . . . . . . . . . . . . . . . 561
Application d'éléments typographiques et de mise en forme de page à des données
dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Application de formats à des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Personnalisation des formats de données existants . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Création de liens de navigation de jeu d'enregistrements . . . . . . . . . . . . . . . . . . . . . . 563
Affichage et masquage des régions en fonction des résultats du jeu d'enregistrements . 567
Affichage de plusieurs comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568
Création d'un tableau à l'aide du comportement de serveur Région répétée. . . . . . . . . 569
Création d'un compteur d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Création d'un contrôle Web Grille de données ou Liste de données ASP.NET . . . . . . 573
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
10
Table des matières
CHAPITRE 35
Utilisation des composants ColdFusion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
Description 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 36
Utilisation des services Web
577
578
579
579
580
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Description des services Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Installation et configuration de générateurs de proxy . . . . . . . . . . . . . . . . . . . . . . . . . .
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 37
Ajout de comportements de serveur personnalisés.
584
586
588
590
591
. . . . . . . . . . . . . . . . . . 593
Installation de comportements de serveur supplémentaires . . . . . . . . . . . . . . . . . . . . . 593
Création de comportements de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Rédaction de blocs de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597
Création de blocs de code conditionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599
Modification d'un code de comportement de serveur . . . . . . . . . . . . . . . . . . . . . . . . . 607
CHAPITRE 38
Création de formulaires interactifs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
A propos des objets de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612
Création d'un formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613
Description des objets de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615
Insertion de cases à cocher et de boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622
Ajout de listes et de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624
Ajout de boutons de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
A propos de la conception de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629
Utilisation d'une fonction JavaScript côté client pour traiter un formulaire . . . . . . . . . 629
Utilisation de comportements avec des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . 630
Création d'objets de formulaire dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630
Partie IX
Développement rapide d'applications
CHAPITRE 39
Création d'un ensemble de pages Principale-Détails .
. . . . . . . . . . . . . . . . 637
A propos des ensembles de pages Principale-Détails. . . . . . . . . . . . . . . . . . . . . . . . . . .
Création rapide d'un ensemble de pages Principale-Détails . . . . . . . . . . . . . . . . . . . . .
Création d'un ensemble de pages Principale-Détails par élément . . . . . . . . . . . . . . . . .
Modification d'un ensemble de pages Principale-Détails . . . . . . . . . . . . . . . . . . . . . . .
Table des matières
637
639
640
644
11
CHAPITRE 40
Création de pages pour l'exécution de recherches dans les bases de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 645
A propos des pages de recherche/de résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645
Création de la page de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Création de la page de résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Création d'une page d'informations détaillées pour une page de résultats . . . . . . . . . . 651
Utilisation des pages associées (utilisateurs ASP et JSP uniquement) . . . . . . . . . . . . . . 656
CHAPITRE 41
Création de pages permettant de modifier des bases de données .
. . . . 659
Création d'une page d'insertion d'enregistrements. . . . . . . . . . . . . . . . . . . . . . . . . . . . 660
Création d'une page de mise à jour d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . 663
Création d'une page de suppression d'enregistrements. . . . . . . . . . . . . . . . . . . . . . . . . 668
Modification d'une base de données à l'aide de procédures stockées . . . . . . . . . . . . . . 671
Modification d'une base de données à l'aide des commandes ASP . . . . . . . . . . . . . . . . 676
Modification d'une base de données à l'aide d'instructions préparées JSP . . . . . . . . . . 678
CHAPITRE 42
Création de pages limitant l'accès à votre site
. . . . . . . . . . . . . . . . . . . . . . . 681
Création d'une page d'enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681
Création d'une page de connexion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685
Création d'une page à laquelle seuls les utilisateurs autorisés ont accès. . . . . . . . . . . . . 687
Partie X
Annexes
ANNEXE A
Guide du débutant en base de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693
A propos des bases de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693
Principes fondamentaux pour la conception d'une base de données. . . . . . . . . . . . . . . 694
Description des connexions aux bases de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . 700
ANNEXE B
Initiation à SQL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
Notions de syntaxe élémentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
Définition des colonnes d'un jeu d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . 708
Limite du nombre d'enregistrements dans un jeu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709
Tri des enregistrements d'un jeu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712
Relations entre tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712
ANNEXE C
Définition d'un DSN sous Windows .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715
Description des DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715
Création d'un DSN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715
ANNEXE D
Aide-mémoire : Balises ASP.NET Macromedia
INDEX .
12
. . . . . . . . . . . . . . . . . . . . . 719
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729
Table des matières
Apprenez à utiliser la documentation de Dreamweaver 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 :
•
•
•
•
•
Chapitre 1, « Bienvenue dans Dreamweaver »
Chapitre 2, « Exploration de l'espace de travail »
Chapitre 3, « Planification et configuration de votre site »
Chapitre 4, « Gestion du site »
Chapitre 5, « Configuration d'un document »
Partie I
Partie I
Notions de base de
Dreamweaver
CHAPITRE 1
Bienvenue dans Dreamweaver
Macromedia Dreamweaver MX 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 visuelle 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 les images dans Macromedia Fireworks, puis en les
important directement dans Dreamweaver ou en ajoutant des objets Flash Macromedia créés
directement dans Dreamweaver.
Dreamweaver intègre également de nombreux outils et fonctions de codage, y compris des outils
de modification de code en mode Code (coloration de code et achèvement de balises), une
référence HTML, CSS, JavaScript, CFML, ASP et JSP, et un débogueur JavaScript. 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 intègre et étend désormais toutes les fonctions de Macromedia UltraDev pour vous
aider à créer des applications Web dynamiques reposant sur des bases de données à l'aide de
langages serveur tels que ASP, ASP.NET, ColdFusion Markup Language (CFML), 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 :
« Prise en main de Dreamweaver », page 16
« Processus de création d'un site Web », page 18
« Par où débuter », page 22
« Conventions typographiques », page 25
« Nouveautés de Dreamweaver MX », page 25
« Ressources sur le langage HTML et les technologies Web », page 29
15
Prise en main de Dreamweaver
Dreamweaver comprend diverses ressources qui vous aideront à vous familiariser rapidement avec
le programme et à créer facilement vos propres sites et pages Web. Ces ressources incluent le guide
imprimé Bien démarrer avec Dreamweaver MX, un système d'aide en ligne et des didacticiels. En
outre, vous trouverez des conseils, des notes techniques, des exemples et des informations
régulièrement mis à jour dans le centre de support de Dreamweaver sur le site Web de
Macromedia.
Guide Bien démarrer avec Dreamweaver MX
Le guide Bien démarrer avec Dreamweaver MX a été conçu pour vous guider lors de 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 chapitres 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.
Didacticiels
Les didacticiels proposent d'autres leçons traitant de sujets particuliers qui fournissent plus
d'informations sur des domaines spécifiques que le reste du guide Bien démarrer avec
Dreamweaver MX. Ces didacticiels indiquent comment modifier un exemple de site Web à l'aide
de quelques-unes des fonctions de conception les plus utiles et les plus puissantes de
Dreamweaver. Ils sont disponibles dans le manuel Bien démarrer avec Dreamweaver MX imprimé,
dans l'aide de Dreamweaver (dans le menu Aide de Dreamweaver, choisissez Didacticiels) et dans
le fichier PDF Bien démarrer avec Dreamweaver MX.
Si les fonctions de conception de Dreamweaver vous sont déjà familières, mais que souhaitez en
savoir plus sur la création d'applications Web, commencez par suivre les pages dynamiques des
didacticiels pour apprendre à créer des pages interactives et à vous connecter à des bases de
données.
Aide de Dreamweaver
L'aide de Dreamweaver, optimisée pour une utilisation en ligne, fournit des informations
complètes sur toutes les fonctionnalités de Dreamweaver. 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). Quelle que soit la plate-forme utilisée, vous pouvez trouvez les
informations recherchées de quatre façons :
vous permet d'accéder à toutes les informations organisées par sujets. Cliquez sur la
ligne principale pour voir les sous-rubriques.
Le sommaire
L'index peut être utilisé comme un index imprimé traditionnel : il permet de trouver des termes
ou des concepts spécifiques.
La fonction Recherche vous
du système d'aide.
16
Chapitre 1
permet de trouver n'importe quelle chaîne de caractères dans le texte
L'aide contextuelle permet d'ouvrir une rubrique d'aide relative à la boîte de dialogue, au panneau
ou à l'inspecteur activés. Pour afficher l'aide contextuelle, cliquez sur le bouton Aide d'une boîte
de dialogue, choisissez Aide dans le menu d'options d'une barre de titre d'un groupe de panneaux
ou cliquez sur l'icône de point d'interrogation dans un inspecteur ou une autre fenêtre.
Cliquez ici pour ouvrir l'aide
Chaque rubrique d'aide comporte des boutons sur lesquels vous pouvez cliquer pour passer d'une
rubrique à l'autre. Les boutons représentant une flèche vers la gauche ou vers la droite permettent
de passer aux rubriques précédente ou suivante de la même section (suivant l'ordre dans lequel les
rubriques sont répertoriées dans la table des matières).
Extension de Dreamweaver
Le système d'aide Extension de Dreamweaver fournit des informations sur le modèle d'objet de
document (DOM) de Dreamweaver et les interfaces de programmation d'application (API) qui
permettent aux développeurs JavaScript et C de créer des extensions pour Dreamweaver.
Centre de support de Dreamweaver
Un centre de support est à votre disposition sur le Web pour vous aider à optimiser votre
utilisation de Dreamweaver. Le site Web du centre de support de Dreamweaver (http://
www.macromedia.com/support/dreamweaver/) 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 sophistiqués. Consultez régulièrement ce site Web pour trouver les toutes dernières
informations sur Dreamweaver et apprendre à en tirer le meilleur parti.
Centre pour concepteurs et développeurs
Le centre pour concepteurs et développeurs de Macromedia (http://www.macromedia.com/fr/
desdev/) propose des outils, des didacticiels et bien plus encore pour tous les produits
Macromedia.
Forums en ligne de Dreamweaver
Abordez les problèmes techniques et partagez des conseils utiles avec les autres utilisateurs de
Dreamweaver en visitant les forums en ligne de Dreamweaver. Pour savoir comment accéder aux
forums, consultez le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/
go/dreamweaver_newsgroup.
Bienvenue dans Dreamweaver
17
Raccourcis clavier
Des tableaux de raccourcis clavier relatifs à la configuration Dreamweaver par défaut sont
disponibles sur le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Processus de création d'un site Web
Vous pouvez créer un site Web de plusieurs façons. Dans cette documentation, vous allez
commencer par définir une stratégie de création de site en précisant ses objectifs. 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.
Afin de faciliter la recherche des informations dont vous avez besoin pour développer vos sites
Web, la documentation Utilisation de Dreamweaver a été divisée en plusieurs sections
correspondant à cette approche du développement Web : planification, conception,
développement, test, publication et maintenance du site.
A propos de la planification de 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.
• Déterminez la stratégie à employer et les questions à examiner lors de la planification du site.
Voir Chapitre 3, « Planification et configuration de votre site », page 57.
• Utilisez la carte du site de Dreamweaver pour configurer la structure organisationnelle de votre
site. Dans le panneau Site, vous pouvez facilement ajouter, supprimer et renommer des fichiers
et des dossiers afin de modifier l'organisation en fonction de vos besoins. Voir Chapitre 3,
« Planification et configuration de votre site », page 57 et Chapitre 4, « Gestion du site »,
page 71.
• Vous pouvez commencer par créer des pages simples qui deviendront plus complexes au fur et
à mesure de leur conception. Créez des pages vierges ou des pages reposant sur des conceptions
prédéfinies dans la boîte de dialogue Nouveau document. Voir Chapitre 5, « Configuration
d'un document », page 111.
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
« Utilisation de l'archivage et de l'extraction », page 90.
• Utilisation de Design Notes pour communiquer avec les membres de l'équipe Web ; voir
« Utilisation des Design Notes », page 101.
18
Chapitre 1
A propos de la configuration d'une application Web
De plus en plus de 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 6, « Configuration d'une application Web », page 133.
• Connectez-vous à une base de données. Selon la technologie de serveur utilisée par le serveur
d'application, voir Chapitre 7, « Connexions à des bases de données pour les développeurs
ColdFusion », page 145, Chapitre 8, « Connexions à des bases de données pour les
développeurs ASP.NET », page 151, Chapitre 9, « Connexions à des bases de données pour les
développeurs ASP », page 157, Chapitre 10, « Connexions à des bases de données pour les
développeurs JSP », page 169 ou Chapitre 11, « Connexions à des bases de données pour les
développeurs PHP », page 177.
A propos du codage manuel
Le codage manuel de pages Web n'est pas qu'une simple étape de création d'un site Web. Il faut
plutôt le considérer comme une approche à la création de pages. Dreamweaver fournit des outils
d'édition visuelle conviviaux et des outils de codage sophistiqués. Vous pouvez utiliser l'une ou
l'autre de ces approches (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, de vérifier sa
conformité aux normes et de déboguer le code JavaScript. Voir Chapitre 12, « Configuration
d'un environnement de codage », page 181 , Chapitre 13, « Codage dans Dreamweaver »,
page 197 et Chapitre 14, « Optimisation et débogage de code », page 211.
• Vous pouvez également utiliser des outils de codage Dreamweaver en mode Création
(environnement de conception visuel). Voir Chapitre 15, « Modification du code en mode
Création », page 225.
A propos de la mise en forme des pages Web
La plupart des projets de conception Web naissent de storyboards ou d'organigrammes convertis
en exemples de pages. Utilisez Dreamweaver pour créer une maquette avec des pages fictives au
fur et à mesure que vous progressez dans la conception. Les maquettes affichent généralement la
conception de la mise en page, les possibilités de navigation sur le site, les composants techniques,
les motifs et la couleur, ainsi que les images graphiques ou autres types d'éléments. En revanche,
elles ne contiennent pas le contenu final de la page.
• 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 16, « Présentation de contenu à l'aide de tableaux », page 237 et Chapitre
17, « Le mode de Mise en forme », page 253.
• 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 18, « Utilisation de
cadres », page 267.
Bienvenue dans Dreamweaver
19
A propos de l'ajout de contenu
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.
• 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 ou le
panneau Styles HTML. Vous pouvez également créer facilement vos propres feuilles de style en
cascade. Voir Chapitre 19, « Insertion et mise en forme de texte », page 283.
• 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 27, « Utilisation du panneau Actifs », page 448.
• Insérez des images, y compris des images survolées, des cartes graphiques et des images
Fireworks. Utilisez les outils d'alignement pour positionner les images dans une page. Voir
Chapitre 20, « Insertion d’images », page 311 et Chapitre 21, « Intégration de Dreamweaver à
d'autres applications », page 321.
• Insérez d'autres types de ressources dans une page Web : animations Flash, Shockwave ou
QuickTime, sons, applets. Voir Chapitre 22, « Insertion d'éléments multimédia », page 337.
• Définissez un contenu accessible à toutes les personnes souffrant de handicaps. Voir Chapitre
23, « Dreamweaver et accessibilité », page 353.
A propos de l'interactivité et de l'animation
La plupart des pages Web sont statiques, c'est-à-dire qu'elles ne contiennent que du texte et des
images. Dreamweaver vous permet de rendre vos pages plus vivantes, en ajoutant des éléments
interactifs et des animations pour éveiller l'intérêt des visiteurs. Déclenchez des événements
interactifs lorsque les visiteurs se déplacent dans votre site et cliquent dans vos pages, présentez des
concepts, animez des éléments de page : en bref, aidez les visiteurs de votre site à faire des
découvertes et des expériences passionnantes sans quitter vos pages.
Il existe plusieurs façons d'ajouter de l'interactivité et de l'animation à vos pages, à l'aide de
Dreamweaver :
• 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 l'utilisateur le survole avec la souris, la
validation d'un formulaire lorsque l'utilisateur 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 24,
« Utilisation des comportements JavaScript », page 369.
• Utilisez des scénarios pour créer des animations qui ne nécessitent pas de plug-ins, de contrôles
ActiveX ni d'applets Java. Les scénarios utilisent DHTML pour modifier de façon temporelle
la position d'un calque ou la source d'une image, ou pour déclencher automatiquement des
comportements après le chargement de la page. Voir Chapitre 25, « Animation de calques »,
page 401.
A propos de la connexion de pages de votre site
Pour utiliser votre site, vous devez lier les pages individuelles les unes aux autres en créant des liens
HTML et en réutilisant le contenu pour leur donner un aspect homogène.
20
Chapitre 1
• 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 26, « Liens et
navigation », page 425.
• Les modèles et les fichiers de bibliothèque 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 27, « Gestion des actifs de site, des bibliothèques et
des modèles », page 447.
A propos du test et de la publication de votre site
Votre site est terminé et prêt à fonctionner ; toutefois, avant de le publier sur un serveur, vous
devez le tester. Suivant la taille du projet, les spécifications du client et les types de navigateurs
utilisés par les visiteurs, déplacez, si besoin est, votre site sur un serveur intermédiaire pour le
tester et le modifier. Une fois les corrections effectuées, publiez le site pour qu'il soit accessible aux
internautes. Après la publication du site, mettez en place un cycle de maintenance pour garantir la
qualité, répondre aux réactions des utilisateurs et mettre à jour les informations du site.
Utilisez les fonctionnalités de Dreamweaver suivantes pour tester et publier votre site :
• Pour ajouter de nouvelles balises dans une page ou corriger votre code, recherchez le code
JavaScript, CSS et HTML en utilisant le panneau Référence de Dreamweaver. Voir Chapitre
13, « Accès aux références de langue », page 210.
• Utilisez le débogueur JavaScript pour corriger les erreurs de JavaScript dans votre code. Cet
outil vous permet de définir des points d'arrêt dans le code, puis d'afficher le code lorsqu'une
page est mise au point directement dans Dreamweaver. Voir Chapitre 14, « Utilisation du
débogueur JavaScript », page 217.
• Procédez à des vérifications relatives aux navigateurs et aux plug-ins, testez et corrigez les liens
dans vos documents et exécutez des rapports de site pour rechercher les erreurs courantes dans
les fichiers HTML. Voir Chapitre 28, « Test d'un site », page 493.
• Dans le panneau Site 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 Chapitre 3, « Planification et configuration de
votre site », page 57.
A propos de la 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.
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.
Bienvenue dans Dreamweaver
21
• Pour savoir comment développer des applications Web dans Dreamweaver, apprenez à utiliser
Dreamweaver et à créer des pages dynamiques. Voir Chapitre 29, « Optimisation de l'espace de
travail pour tirer parti des fonctions de développement visuel », page 505 et Chapitre 30,
« Conception de pages dynamiques dans Dreamweaver », page 515.
• Définissez et affichez un contenu dynamique dans vos pages. Voir Chapitre 31, « Stockage et
récupération des données spécifiques à une page », page 523, Chapitre 32, « Définition de
sources de contenu dynamique », page 535, Chapitre 33, « Ajout d'un contenu dynamique à
une page Web », page 553 et Chapitre 34, « Affichage des enregistrements de base de
données », page 561.
• Encapsulez la logique d'application ou d'entreprise en faisant appel aux technologies de pointe,
telles que les composants ColdFusion et les services Web. Voir Chapitre 35, « Utilisation des
composants ColdFusion », page 579 et Chapitre 36, « Utilisation des services Web », page 585.
• Créez vos propres comportements de serveur et formulaires interactifs. Voir Chapitre 37,
« Ajout de comportements de serveur personnalisés », page 595 et Chapitre 38, « Création de
formulaires interactifs », page 613.
A propos du 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. Voir Chapitre 39, « Création d'un ensemble de pages
Principale-Détails », page 639, Chapitre 40, « Création de pages pour l'exécution de recherches
dans les bases de données », page 647 et Chapitre 41, « Création de pages permettant de
modifier des bases de données », page 661.
• Restreignez l'accès à vos pages pour garantir la sécurité des informations. Voir Chapitre 42,
« Création de pages limitant l'accès à votre site », page 683.
Par où débuter
Ce guide 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 les concepteurs Web qui débutent :
22
1
Commencez par lire les deux premiers chapitres du guide Bien démarrer avec Dreamweaver MX.
Si ces chapitres contiennent des sections qui vous semblent trop avancées ou trop complexes,
passez-les et revenez-y ultérieurement.
2
Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail »,
page 31, le Chapitre 3, « Planification et configuration de votre site », page 57, Chapitre 4,
« Gestion du site », page 71 et le Chapitre 5, « Configuration d'un document », page 111.
3
Lisez le Chapitre 17, « Le mode de Mise en forme », page 253 pour en savoir plus sur la mise
en forme de pages.
4
Lisez le Chapitre 19, « Insertion et mise en forme de texte », page 283 et le Chapitre 20,
« Insertion d’images », page 311 pour en savoir plus sur le formatage de texte et l'ajout
d'images à vos pages.
Chapitre 1
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
dans l'ordre. Si vous le souhaitez, vous pouvez d'abord vous familiariser avec la création de
pages Web, puis lire ces chapitres.
Pour les concepteurs Web expérimentés qui utilisent Dreamweaver pour la première fois :
1
Commencez par lire les deux premiers chapitres du guide Bien démarrer avec Dreamweaver MX.
2
Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail »,
page 31 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
3
Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 3, « Planification et
configuration de votre site », page 57 et le Chapitre 4, « Gestion du site », page 71, parcourez
ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver.
Concentrez-vous sur les sections expliquant comment configurer un nouveau site dans
Dreamweaver.
4
Suivez les étapes des didacticiels qui vous intéressent pour en savoir plus sur l'exécution de
tâches spécifiques dans Dreamweaver. Pour afficher les didacticiels dans le système d'aide,
choisissez Aide > Didacticiels.
5
Voir Chapitre 19, « Insertion et mise en forme de texte », page 283 et Chapitre 20, « Insertion
d’images », page 311, pour obtenir des informations utiles sur la création de pages HTML
simples dans Dreamweaver.
6
Lisez la présentation au début des autres chapitres pour savoir si les sujets abordés sont
susceptibles de vous intéresser.
Pour les codeurs manuels expérimentés :
1
Commencez par lire les premier et troisième chapitres du guide Bien démarrer avec
Dreamweaver MX .
2
Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail »,
page 31 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
3
Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 3, « Planification et
configuration de votre site », page 57 et le Chapitre 4, « Gestion du site », page 71, parcourez
ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver.
Concentrez-vous sur les sections expliquant comment configurer un nouveau site dans
Dreamweaver.
4
Lisez le Chapitre 12, « Configuration d'un environnement de codage », page 181, le Chapitre
13, « Codage dans Dreamweaver », page 197, le Chapitre 14, « Optimisation et débogage de
code », page 211 et le Chapitre 15, « Modification du code en mode Création », page 225 pour
en savoir plus sur le codage dans Dreamweaver.
5
Lisez la présentation au début des autres chapitres 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 les premier, quatrième et cinquième chapitres du guide Bien démarrer avec
Dreamweaver MX :
Bienvenue dans Dreamweaver
23
2
Dans Utilisation de Dreamweaver, parcourez le Chapitre 2, « Exploration de l'espace de
travail », page 31 pour en savoir plus sur les nouveaux aspects de l'interface utilisateur de
Dreamweaver.
3
Configurez un serveur Web et un serveur d'application ; voir le Chapitre 6, « Configuration
d'une application Web », page 133.
4
Connectez-vous à une base de données. Selon la technologie de serveur utilisée par le serveur
d'application, voir le Chapitre 7, « Connexions à des bases de données pour les développeurs
ColdFusion », page 145, le Chapitre 8, « Connexions à des bases de données pour les
développeurs ASP.NET », page 151, le Chapitre 9, « Connexions à des bases de données pour
les développeurs ASP », page 157, le Chapitre 10, « Connexions à des bases de données pour
les développeurs JSP », page 169 ou le Chapitre 11, « Connexions à des bases de données pour
les développeurs PHP », page 177.
5
Lisez la présentation au début des autres chapitres pour savoir si les sujets abordés sont
susceptibles de vous intéresser.
6
Si vous souhaitez personnaliser Dreamweaver manuellement, consultez la section
« Customizing Dreamweaver » du centre de support de Macromedia à l'adresse suivante :
http://www.macromedia.com/go/customizing_dreamweaver. Si vous voulez écrire des
extensions pour Dreamweaver, lisez Extension de Dreamweaver (Aide > Extension de
Dreamweaver).
Pour les développeurs d'applications Web expérimentés qui n'ont jamais utilisé Dreamweaver ni
UltraDev :
24
1
Commencez par parcourir le guide Bien démarrer avec Dreamweaver MX pour vous familiariser
avec les notions de base de Dreamweaver.
2
Dans Utilisation de Dreamweaver, lisez le Chapitre 2, « Exploration de l'espace de travail »,
page 31 pour en savoir plus sur l'interface utilisateur de Dreamweaver.
3
Bien que vous connaissiez la plupart des sujets abordés dans le Chapitre 3, « Planification et
configuration de votre site », page 57 et le Chapitre 4, « Gestion du site », page 71, parcourez
ces chapitres pour savoir comment ces concepts sont implémentés dans Dreamweaver.
Concentrez-vous sur les sections expliquant comment configurer un nouveau site dans
Dreamweaver.
4
Suivez les étapes des didacticiels qui vous intéressent pour en savoir plus sur l'exécution de
tâches spécifiques dans Dreamweaver. Pour afficher les didacticiels dans le système d'aide,
choisissez Aide > Didacticiels.
5
Configurez un serveur Web et un serveur d'application à l'aide de Dreamweaver ; voir le
Chapitre 6, « Configuration d'une application Web », page 133.
6
Connectez-vous à une base de données. Selon la technologie de serveur utilisée par le serveur
d'application, voir le Chapitre 7, « Connexions à des bases de données pour les développeurs
ColdFusion », page 145, le Chapitre 8, « Connexions à des bases de données pour les
développeurs ASP.NET », page 151, le Chapitre 9, « Connexions à des bases de données pour
les développeurs ASP », page 157, le Chapitre 10, « Connexions à des bases de données pour
les développeurs JSP », page 169 ou le Chapitre 11, « Connexions à des bases de données pour
les développeurs PHP », page 177.
7
Lisez la présentation au début des autres chapitres pour savoir si les sujets abordés sont
susceptibles de vous intéresser.
Chapitre 1
Pour les développeurs d'applications Web expérimentés qui ont déjà utilisé UltraDev 4 :
1
Commencez par lire Chapitre 1, « Nouveautés de Dreamweaver MX », page 25.
2
Dans Utilisation de Dreamweaver, parcourez le Chapitre 2, « Exploration de l'espace de
travail », page 31 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 :
http://www.macromedia.com/go/customizing_dreamweaver. Si vous voulez écrire des
extensions pour Dreamweaver, lisez Extension de Dreamweaver (Aide > Extension de
Dreamweaver).
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.
Nouveautés de Dreamweaver MX
Dreamweaver MX intègre de nombreuses nouvelles fonctions, telles que des modèles améliorés
plus faciles à utiliser par les concepteurs visuels et de nouvelles options de codage. Dreamweaver
inclut également toutes les fonctions de développement d'application de Dreamweaver UltraDev
4 ainsi que de nouvelles fonctions, telles qu'un espace de travail centré sur le code extrait de
Macromedia ColdFusion Studio, un code d'exécution amélioré et une prise en charge des
technologies d'application Web les plus récentes.
Contrôle intégral du code et de la conception
Vous pouvez créer le site de votre choix en utilisant les outils de conception ou l'environnement
de codage riche de Dreamweaver MX.
Un nouvel espace de travail intégré (Microsoft Windows uniquement) offre un environnement de
travail plus convivial doté d'une interface MDI à plusieurs documents, y compris des panneaux
ancrables et des fenêtres de document à onglets.
La gestion des panneaux Macromedia MX dans Dreamweaver MX est parfaitement adaptée au
fonctionnement des panneaux dans Macromedia Flash MX et Fireworks MX. Vous pouvez
regrouper des panneaux réductibles et ancrables ou les réduire et les développer pour faciliter le
déroulement des opérations.
Des exemples de composants Web prédéfinis proposent des mises en forme de qualité que vous
pouvez utiliser pour créer immédiatement des conceptions professionnelles ainsi que des
bibliothèques de fonctions JavaScript. Grâce à ces bibliothèques, vous pouvez accéder directement
à l'interface sophistiquée côté client sans devoir lire des centaines de pages de manuels.
Bienvenue dans Dreamweaver
25
Des modèles Dreamweaver améliorés vous permettent de définir des règles sophistiquées afin que
les contributeurs puissent saisir du contenu sans altérer la conception du site. L'héritage de
modèle permet de mieux contrôler les mises en forme personnalisées et les régions modifiables
facilitent la saisie des données par les contributeurs.
permet de configurer rapidement un site, que vous créiez un site
dynamique pour la première fois ou définissiez un compte avec un fournisseur d'accès Internet.
L'assistant de définition d'un site
Les indicateurs de code permettent d'accéder facilement à des menus personnalisés contenant des
attributs de balises appropriés, des propriétés de méthode, des paramètres de fonction et des styles
CSS lorsque vous apportez des modifications en mode Code.
La barre Insertion personnalisable, entièrement extensible, permet d'accéder rapidement aux
objets et comportements de Dreamweaver MX.
La barre d'outils de document peut désormais être personnalisée en fonction de vos besoins et de
vos préférences, à l'aide de XML et JavaScript.
est maintenant intégré au panneau Site pour que vous puissiez
parcourir les actifs et les fichiers sur le bureau, ainsi que les volumes de réseau, sans quitter
Dreamweaver pour utiliser l'explorateur de fichiers de votre système d'exploitation.
Un explorateur de fichiers
Le panneau Réponses vous connecte directement aux ressources en ligne du centre de support de
Macromedia. Vous pouvez extraire les nouvelles informations quand bon vous semble et
bénéficier des conseils et astuces les plus récents.
permet de générer un code amélioré lorsque vous
modifiez des tableaux en modes Mise en forme et Standard, de rationaliser la gestion des attributs
et d'homogénéiser toutes les mises en forme afin d'assurer une compatibilité entre navigateurs.
Une meilleure manipulation des tableaux
peuvent désormais être créés directement dans Dreamweaver
MX (cette fonction n'était auparavant disponible que dans Fireworks).
Les menus JavaScript en cascade
est maintenant entièrement configurable et personnalisable en fonction
de vos besoins individuels.
La coloration de syntaxe
La barre d'outils standard permet d'accéder rapidement aux commandes de fichiers usuelles
(Ouvrir, Enregistrer et Nouveau) et aux commandes du Presse-papiers.
L'impression en mode Code
permet désormais d'imprimer le code source sans appliquer de
formatage.
Prise en charge améliorée des technologies de serveur les plus récentes
Créez rapidement des applications Web dynamiques reposant sur des bases de données, soit en
faisant appel au codage manuel, soit en utilisant des objets et des comportements visuels.
Les bibliothèques de code serveur pour ColdFusion, ASP, ASP.NET, JSP et PHP vous permettent
de créer des sites Web dynamiques à l'aide des technologies côté serveur les plus évoluées. Utilisez
un environnement de développement pour faciliter l'intégration avec divers sites et technologies
de pointe.
Le panneau Fragments de code vous permet
de stocker des portions de code arbitraires afin de les
réutiliser ultérieurement. Ainsi, vous pouvez facilement réutiliser des codes, mises en forme et
fonctions complexes.
26
Chapitre 1
L'éditeur de la bibliothèque de balises fournit une base de données de balises intégrées dans
laquelle sont stockées des informations sur les balises d'origine et les balises personnalisées. Il
permet de modifier les propriétés des balises existantes et d'en importer de nouvelles.
Des centaines d'éditeurs de balises permettent de modifier rapidement les attributs appropriés de
balises spécifiques HTML, CFML et ASP.NET lorsque le mode Code est activé.
vous permet d'importer des commandes
de serveur ASP.NET (balises personnalisées) dans des pages ASP.NET, et d'afficher leur structure
ainsi que leurs attributs dans le sélecteur de balises, les indicateurs de code et l'inspecteur de
balises.
La prise en charge des balises personnalisées ASP.NET
Les balises de formulaires Web ASP.NET sont maintenant rendues dans les environnements
Macintosh et Windows pour permettre une visualisation et une modification sophistiquées. Les
éditeurs de balises de formulaires Web vous permettent de créer rapidement des formulaires Web
ASP.NET à l'aide de commandes côté serveur et de validation.
peuvent être créés facilement dans
Dreamweaver MX pour réaliser des opérations complexes d'affichage et de manipulation des
données.
Les objets ASP.NET Grille de données et Liste de données
vous permet de consulter rapidement la structure et le
contenu de vos bases de données et de parcourir les tableaux, les procédures enregistrées et les
modes avant de définir des requêtes.
Un panneau Base de données intégré
Le Sélecteur de balises affiche la structure de toutes les balises disponibles dans Dreamweaver
MX, y compris celles qui ont été importées via l'éditeur de la bibliothèque de balises. Utilisez-le
pour placer et modifier rapidement les balises dans vos pages, et pour afficher les informations de
référence correspondantes.
enregistre des informations sur la structure
de toutes les balises disponibles. Ce mécanisme central de stockage des informations permet
d'utiliser les indicateurs de code, le sélecteur de balises et l'inspecteur de balises avec des balises
d'origine ou les balises personnalisées que vous avez importées.
Une base de données de balises XML personnalisable
La détection ColdFusion MX autorise la configuration automatique de l'assistant de définition
d'un site dans le cadre de la définition d'un site ColdFusion à partir d'une copie locale de
Macromedia ColdFusion MX Developer Edition.
Le panneau Débogage du serveur pour ColdFusion MX rationalise le déroulement des opérations
de débogage pour ColdFusion MX en affichant les résultats du débogage directement dans
Dreamweaver MX. Affichez des informations sur les variables ou les requêtes ou autres statistiques
de page essentielles, et passez directement aux sections problématiques sans quitter
l'environnement de développement.
généré par les comportements de serveur et les objets
Dreamweaver MX a été remanié ; il est davantage orienté vers les balises, ce qui le rend
pratiquement identique au code rédigé manuellement par un développeur.
Le code d'exécution ColdFusion
La prise en charge RDS vous permet de transférer des fichiers et de parcourir la structure des
bases de données sur les serveurs ColdFusion via des connexions RDS.
facilitent le travail des développeurs en extrayant la logique de
serveur des pages JSP. Dreamweaver MX peut importer des informations de la bibliothèque de
balises JSP à partir de fichiers TLD (Tag Library Descriptor) et les afficher dans les indicateurs de
code, le sélecteur de balises et l'inspecteur de balises.
Les bibliothèques de balises JSP
Bienvenue dans Dreamweaver
27
affiche les méthodes getProperty et setProperty de
JavaBeans dans le panneau Liaisons. Elle peut également afficher toutes les méthodes et propriétés
de JavaBeans dans le panneau Composants afin que les développeurs puissent intégrer
complètement les Beans dans leurs applications JSP.
L'introspection JavaBeans complète
Les objets de formulaire dynamiques vous permettent de créer des listes de sélection reposant sur
des bases de données ainsi que d'autres éléments de formulaire en sélectionnant l'objet de
formulaire approprié dans la barre Insertion.
Le créateur de comportements de serveur d'UltraDev
4 a été amélioré pour permettre aux
utilisateurs de créer des comportements de serveur avec des éléments d'interface utilisateur plus
complexes, tels que des cases à cocher, des groupes de boutons radio et des menus de connexion.
La combinaison intégrée de HomeSite 5 et ColdFusion Studio 5 fournit une version sous licence
de HomeSite+ qui regroupe ColdFusion Studio et HomeSite 5, entièrement intégrés dans
Dreamweaver MX.
Accès simplifié aux normes les plus récentes
Créez des sites Web conformes aux normes Web les plus récentes, y compris les services Web et
XML, et mettez vos connaissances à jour en faisant appel à des technologies de développement de
pointe.
L'introspection de services Web pour ASP.NET, ColdFusion et Java vous permet
de tirer parti des
dernières normes de service Web XML intégrées aux technologies de serveur les plus évoluées.
Incorporez des fonctionnalités complexes dans vos applications Web en utilisant la fonction
d'introspection de service Web de Dreamweaver MX.
La validation et la modification XML vous permettent d'importer des fichiers DTD et des
schémas, et de créer des documents de qualité.
La prise en charge CSS améliorée, notamment l'intégration TopStyle,
vous aide à créer des sites
conformes aux normes de feuilles de styles CSS (Cascading Style Sheets). Le panneau CSS de
Dreamweaver MX permet désormais d'afficher des styles définis en interne et en externe, et de
créer des feuilles de style au moment de la conception. De nombreux éléments CSS2 sont
également pris en charge. L'inspecteur de propriétés de texte peut également être utilisé pour
appliquer des styles CSS.
La prise en charge XHTML vous permet
d'utiliser des sites conformes aux toutes dernières normes
de conception HTML en configurant Dreamweaver MX de sorte qu'il génère du code XHTML.
En outre, cette prise en charge convertit rapidement les fichiers HTML hérités en fichiers
XHTML à l'aide du convertisseur XHTML.
La génération de rapports de site sur l'accessibilité (Section 508) vous aide à déterminer si votre
site est conforme aux directives d'accessibilité et signale rapidement les problèmes.
du panneau Référence fournit des informations contextuelles de base
sur les meilleures pratiques utilisées pour concevoir des sites accessibles.
La référence d'accessibilité
vous aide à créer un code
conforme aux directives d'accessibilité pendant la phase de modification. Configurez
Dreamweaver de telle sorte qu'un message vous invite à saisir des attributs d'accessibilité
spécifiques lorsque des balises et objets appropriés sont insérés sur la page.
L'option d'accessibilité utilisée pour la génération de code conforme
28
Chapitre 1
La prise en charge de composants ColdFusion offre une modularité et une portabilité de logique
de serveur accrues en exposant les propriétés via CFML (service Web) ou la passerelle du serveur
d'applications Flash. Dreamweaver MX prend en charge l'introspection, la création et la
modification des composants ColdFusion.
Le validateur de code assure
la conformité de vos documents aux normes appropriées en générant
un rapport de validation en fonction d'un profil de navigateur ou d'une version de norme
spécifiques (norme transitionnelle XHTML et HTML 4.0).
accélère la
modification des graphiques, des animations et des fichiers HTML entre Dreamweaver MX,
Fireworks MX et Flash MX, si bien que vous pouvez lancer et optimiser directement vos images à
partir de Dreamweaver.
La fonction de lancement et de modification de Macromedia Flash MX et Fireworks MX
L'inspecteur de balises utilisé pour afficher les balises XML, HTML et CFML vous permet de
consulter rapidement la structure d'un document. Vous pouvez détecter et éliminer rapidement
les relations de type parent et les niveaux d'imbrication incorrects sans examiner le code source
brut.
La connexion FTP sécurisée s'intègre à MacSSH et PUTTY pour Windows pour permettre le
transfert sécurisé SSH des informations de connexion à partir du client FTP Dreamweaver
intégré.
Une prise en charge complète du jeu de caractères UTF-8
dans toutes les langues vous permet de
créer et de convertir des pages à l'aide du codage UTF-8.
permet à Dreamweaver MX de tourner à
une vitesse maximale sur les systèmes d'exploitation les plus récents tout en prenant en charge les
dernières améliorations apportées à l'interface utilisateur.
Une prise en charge complète Mac OS X et Windows XP
vous permet de gérer la production et les clients de
manière optimale dans l'espace de travail Dreamweaver.
L'intégration Sitesprint de Macromedia
Ressources sur le langage HTML et les technologies Web
Voici quelques ressources utiles disponibles sur le Web :
La spécification HTML 4.01 (http://www.w3.org/TR/REC-html40/)
est la spécification officielle
du code HTML du World Wide Web Consortium.
Index DOT HTML (http://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 (http://www.w3.org/TR/xhtml1/)
est la spécification officielle du
langage XHTML (Extensible HyperText Markup Language).
Le site O’Reilly XML.com (http://www.xml.com) propose des informations, des didacticiels et des
conseils sur XML (Extensible Markup Language) et autres technologies Web.
Les spécifications Cascading Style Sheets, niveau 1 (CSS1) (http://www.w3.org/TR/REC-CSS1)
et niveau 2 (CSS2) (http://www.w3.org/TR/REC-CSS2/) sont des spécifications officielles des
feuilles de style CSS, par le World Wide Web Consortium.
Le guide de référence des feuilles de style de WebReview.com (http://www.webreview.com/style/
index.shtml) traite des styles CSS et de leur compatibilité avec les divers navigateurs.
Bienvenue dans Dreamweaver
29
Les pages ASP de Microsoft (http://msdn.microsoft.com/workshop/server/asp/ASPover.asp)
proposent des informations sur les pages de serveur actives ASP (Active Server Pages).
La page ASP.NET de Microsoft (http://www.asp.net/)
propose des informations sur ASP.NET.
Page JSP de Sun (http://java.sun.com/products/jsp/)
: informations sur les pages JSP (pages
JavaServer).
Les pages PHP
(http://www.php.net/) proposent des informations sur PHP (PHP Hypertext
Preprocessor).
Le site MySQL
(http://www.mysql.com/) propose des informations sur MySQL.
Entities Table (http://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 des événements HTML dynamiques (http://msdn.microsoft.com/workshop/author/
dhtml/reference/events.asp#om40_event) offre des informations sur la gestion des événements
dans Microsoft Internet Explorer.
La page sur le produit ColdFusion de Macromedia (http://www.macromedia.com/fr/software/
coldfusion/) propose des informations sur ColdFusion.
La page sur le produit JRun Server de Macromedia (http://www.macromedia.com/fr/software/
jrun/) propose des informations sur le serveur d'application JRun Java.
(http://www.ibm.com/software/webservers/appserv/) propose des
informations sur le serveur d'application WebSphere.
La page WebSphere d'IBM
La page Chili!Soft (http://www.Chilisoft.com/products/)
propose des informations sur le serveur
d'application Sun Chili!Soft ASP.
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.
CGI Scripts for Fun and Profit (http://www.hotwired.lycos.com/webmonkey/99/26/
index4a.html) est un article du site Hotwired Webmonkey sur l'incorporation de scripts CGI
(Common Gateway Interface) prêts à l'emploi dans vos pages.
Le site CGI Resource Index (http://www.cgi-resources.com/) est un site de référence sur tout ce
qui concerne le CGI, avec des scripts prêts à l'emploi, de la documentation, des manuels et même
des programmeurs à votre disposition.
Le site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)
présentation des scripts CGI.
30
Chapitre 1
comporte une
CHAPITRE 2
Exploration de l'espace de travail
Pour utiliser au mieux Macromedia Dreamweaver MX, vous devez bien comprendre les concepts
de base du fonctionnement de l'espace de travail de Dreamweaver afin de pouvoir choisir 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 :
•
•
•
•
« Utilisation de l'espace de travail de Dreamweaver », page 31
« Utilisation des fenêtres et des panneaux dans Dreamweaver », page 37
« Utilisation de Dreamweaver avec d'autres applications », page 50
« Personnalisation de Dreamweaver : notions de base », page 51
Utilisation de l'espace de travail de Dreamweaver
Cette section décrit les principaux éléments de l'espace de travail sous Windows et Macintosh, et
explique comment choisir une présentation initiale de l'espace de travail sous Windows.
Sous Windows, Dreamweaver MX propose deux présentations : un espace de travail intégré en
une seule fenêtre contenant tous les éléments et un espace de travail flottant ressemblant
beaucoup à celui de la version 4 de Dreamweaver.
Sur Macintosh, seule la présentation d'espace de travail flottant est disponible. Voir « A propos de
la présentation de l'espace de travail flottant (sous Windows et Macintosh) », page 35.
31
Choix de la présentation de l'espace de travail (sous Windows uniquement)
Sous Windows, 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 pourrez choisir un autre
type de présentation ultérieurement, à partir de la boîte de dialogue Préférences.
Pour choisir la présentation de l'espace de travail :
Sélectionnez l'une des options suivantes :
Espace de travail Dreamweaver MX : il s'agit d'un espace de travail intégré utilisant l'interface
MDI (Multiple Document Interface), dans laquelle toutes les fenêtres de document et tous les
panneaux sont rassemblés dans une grande fenêtre d'application, les groupes de panneaux étant
ancrés sur la droite. C'est la présentation recommandée pour la plupart des utilisateurs.
Remarque : ce guide de l'utilisateur suppose dans sa majeure partie que vous utilisez l'espace de travail
Dreamweaver MX intégré.
Espace de travail Dreamweaver MX, HomeSite/Style 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 le mode Code par défaut. Cette présentation est recommandée pour les
utilisateurs de HomeSite ou ColdFusion Studio et les autres utilisateurs habitués au codage
manuel qui préfèrent travailler dans un espace de travail familier. Pour choisir cette présentation,
choisissez l'option Espace de travail Dreamweaver MX, puis choisissez l'option HomeSite/Style
Codeur.
Remarque : ces deux espaces de travail intégrés autorisent l'ancrage des groupes de panneaux à droite ou à
gauche.
Espace de travail Dreamweaver 4 : il s'agit d'une présentation de l'espace de travail ressemblant à
celle utilisée dans Dreamweaver 4, chaque document s'affichant dans une fenêtre flottante
individuelle. Les groupes de panneaux sont ancrés ensemble, mais ils ne sont pas ancrés dans une
même fenêtre d'application. Cette présentation est uniquement recommandée aux utilisateurs de
Dreamweaver 4 qui préfèrent conserver un espace de travail qui leur est familier.
32
Chapitre 2
Pour changer la présentation de l'espace de travail après le choix initial :
1
Choisissez Edition > Préférences.
2
Sélectionnez la catégorie Général dans la liste de gauche, si cela n'est pas déjà fait.
3
Cliquez sur le bouton Changer d'espace de travail.
4
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.
5
Cliquez sur OK pour fermer la fenêtre du message d'avertissement.
6
Cliquez sur OK pour fermer la boîte de dialogue Préférences.
7
Quittez et redémarrez Dreamweaver.
A propos de l'espace de travail Dreamweaver MX intégré (sous Windows
uniquement)
Dans l'espace de travail Dreamweaver MX intégré, sous Windows, toutes les fenêtres et tous les
panneaux sont rassemblés dans une plus grande fenêtre d'application.
Barre Insertion
Barre d'outils du document
Fenêtre de document
Fenêtre de bienvenue
Inspecteur de propriétés
Groupes de panneaux
Panneau Site
Sélecteur de balises
Exploration de l'espace de travail
33
L'espace de travail HomeSite/Style Codeur contient les mêmes éléments, mais avec les groupes de
panneaux ancrés sur la gauche (au lieu de la 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.
Groupes de panneaux
Barre Insertion
Panneau Site
Sélecteur de balises
Inspecteur de
propriétés (réduit)
Barre d'outils du document
Fenêtre de document
L'espace de travail intégré n'est pas pris en charge sur Macintosh. L'espace de travail Macintosh se
compose de fenêtres et de panneaux flottants. Sous Windows, les utilisateurs peuvent passer à la
présentation de l'espace de travail flottant à partir de la boîte de dialogue Préférences. Pour plus
d'informations, voir « Choix de la présentation de l'espace de travail (sous Windows
uniquement) », page 32.
Pour une présentation rapide des fenêtres et des panneaux, voir « A propos des fenêtres et des
panneaux », page 36. Pour plus d'informations sur des fenêtres et des panneaux spécifiques, voir
« Utilisation des fenêtres et des panneaux dans Dreamweaver », page 37.
34
Chapitre 2
A propos de la présentation de l'espace de travail flottant (sous Windows et
Macintosh)
Dans la présentation de l'espace de travail de style Dreamweaver 4, chaque document est localisé
dans une fenêtre individuelle. Les groupes de panneaux sont initialement ancrés ensemble, mais
vous pouvez les séparer pour les faire apparaître dans leur propre fenêtre.
Barre d'outils du document
Barre Insertion
Sélecteur de balises
Fenêtre de document
Panneau Site
Groupes de panneaux
Inspecteur de propriétés
Dans l'espace de travail flottant, 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. Ceci facilite le déplacement et la réorganisation des différents
panneaux et fenêtres flottants dans Dreamweaver.
Sous Windows, les utilisateurs peuvent passer à l'espace de travail intégré (tous les éléments dans
une fenêtre) à partir de la boîte de dialogue Préférences. Pour plus d'informations, voir
« Utilisation de l'espace de travail de Dreamweaver », page 31.
Pour une présentation rapide des fenêtres et des panneaux, voir « A propos des fenêtres et des
panneaux », page 36. Pour plus d'informations sur des fenêtres et des panneaux spécifiques, voir
« Utilisation des fenêtres et des panneaux dans Dreamweaver », page 37.
Exploration de l'espace de travail
35
A propos des fenêtres et des panneaux
Cette section décrit rapidement quelques éléments qui apparaissent dans les espaces de travail
flottant et intégré. Pour plus d'informations sur des fenêtres et des panneaux spécifiques, voir
« Utilisation des fenêtres et des panneaux dans Dreamweaver », page 37.
fournit des conseils de configuration de l'espace de travail selon les besoins,
ainsi que des informations sur les nouvelles fonctionnalités de Dreamweaver à l'attention des
utilisateurs des versions précédentes du logiciel.
La fenêtre Bienvenue
contient des boutons permettant d'insérer divers types d'« objets », tels que des
images, tableaux et calques dans un document. Chaque objet est une portion de code HTML
vous permettant de définir des attributs lors de son insertion. Par exemple, vous pouvez insérer
une image en cliquant sur l'icône Image dans la barre Insertion. Si vous le préférez, vous pouvez
insérer les objets à partir du menu Insertion.
La barre Insertion
La barre d'outils du document contient des boutons et des menus déroulants permettant d'accéder
aux différents modes d'affichage de la fenêtre du document (tels que le mode Création ou le mode
Code), de définir les différentes options d'affichage et d'effectuer certaines opérations courantes,
telles que la prévisualisation dans un navigateur.
(non visible dans la présentation de l'espace de travail par défaut)
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 barre d'outils standard
La fenêtre de document
affiche le document que vous créez et modifiez.
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. Par défaut, l'inspecteur de
propriétés n'est pas développé dans la présentation de l'espace de travail Style Codeur.
L'inspecteur de propriétés
dans la barre d'état, au bas de la fenêtre de document, affiche la hiérarchie
des balises entourant la sélection courante en mode Création. Cliquez sur une balise quelconque
dans la hiérarchie pour la sélectionner avec son contenu. Le sélecteur de balises n'est pas visible en
mode Code ; il n'est donc pas visible par défaut dans l'espace de travail Style Codeur. Pour plus
d'informations, voir « Modification du code à l'aide du sélecteur de balises », page 229.
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
Le panneau Site permet de gérer les fichiers et les dossiers composant votre site. Pour plus
d'informations, voir « A propos du panneau Site », page 72. Il permet également d'afficher tous
les fichiers situés sur votre disque local, tout comme l'Explorateur Windows (Windows) ou le
Finder (Macintosh).
La barre du lanceur (non affichée dans la présentation de l'espace de travail par défaut) affiche des
boutons dans la barre d'état pour l'ouverture et la fermeture des panneaux et des inspecteurs les
plus utilisés. Pour visualiser la barre du lanceur et spécifier les icônes que vous voulez y afficher,
voir « Définition des préférences des panneaux », page 48.
36
Chapitre 2
Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres qui ne sont pas
illustrés ici, tels que le panneau Historique et l'inspecteur de code. La plupart des panneaux
peuvent être ancrés entre eux pour former des groupes de panneaux. Pour ouvrir les panneaux,
inspecteurs et fenêtres Dreamweaver, utilisez le menu Fenêtre. 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). Pour afficher un élément qui n'est pas déjà
ouvert, cliquez sur son nom dans le menu.
Si vous n'arrivez pas à localiser un panneau, un inspecteur ou une fenêtre indiqués comme
ouverts, choisissez Fenêtre > Réorganiser les panneaux pour présenter tous les panneaux ouverts à
l'écran.
Utilisation des fenêtres et des panneaux dans Dreamweaver
Cette section explique comment utiliser les divers panneaux, fenêtres, barres d'outils, inspecteurs
et autres éléments spécifiques de l'espace de travail Dreamweaver.
A propos de la fenêtre de document
La fenêtre de document affiche le document courant. Vous pouvez choisir parmi les modes
d'affichage suivants :
• Mode Création : 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 508).
• Mode Code : environnement de codage manuel pour rédiger et modifier du code HTML,
JavaScript et de langage de serveur, tel que le langage ASP (Microsoft Active Server Pages) ou
CFML (ColdFusion Markup Language), ou tout autre type de code. Pour plus d'informations,
voir Chapitre 13, « Codage dans Dreamweaver », page 197.
• Mode Code et Création : environnement mixte affichant les modes Création et Code du
document dans une même fenêtre.
Pour passer rapidement entre les deux modes, appuyez sur les touches Ctrl+tilde (~) (Windows)
ou Commande+guillemet simple d'ouverture (‘) (Macintosh).
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.
Exploration de l'espace de travail
37
A propos de la 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 fenêtre (visible uniquement en mode Création) permet de spécifier
une taille personnalisée ou prédéfinie pour la fenêtre de document. Voir « Redimensionnement de
la fenêtre de document », page 38.
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. Voir « Vérification du temps et de la taille de
téléchargement », page 500.
Pour plus d'informations sur la création d'un nouveau document (et sur l'utilisation des
documents prédéfinis fournis avec Dreamweaver), voir Chapitre 5, « Configuration d'un
document », page 111.
Redimensionnement de la fenêtre de document
La barre d'état affiche les dimensions courantes de la fenêtre de document sélectionnée (en pixels).
Vous pouvez définir la taille de fenêtre pour qu'elle s'adapte à la taille des moniteurs les plus
courants en cliquant sur Taille de fenêtre et en choisissant une taille dans le menu déroulant. 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. Dans l'espace
de travail intégré (sous Windows uniquement), vous pouvez agrandir la fenêtre de document pour
qu'elle occupe tout l'espace de la zone de document.
Remarque : vous ne pouvez pas redimensionner une fenêtre de document qui est agrandie dans l'espace de travail.
Lorsqu'une fenêtre de document est agrandie, des onglets s'affichent au bas 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.
38
Chapitre 2
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.
Remarque : 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.
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 qui se trouve dans la barre d’état de la
fenêtre de document.
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 taper 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.
Pour agrandir une fenêtre de document (espace de travail intégré sous Windows uniquement) :
Cliquez sur le bouton d'agrandissement dans la barre de titre de la fenêtre de document.
Exploration de l'espace de travail
39
Définition des préférences de la barre d'état
Pour définir les préférences de la barre d'état, choisissez Edition > Préférences ou Dreamweaver >
Préférences (Mac OS X), puis sélectionnez la catégorie Barre d'état dans la liste de gauche. Pour
plus d'informations, voir « A propos de la barre d'état », page 38.
Taille de la fenêtre permet de personnaliser les tailles de fenêtre qui s'affichent dans le menu
déroulant de la barre d'état. Voir « Redimensionnement de la fenêtre de document », page 38.
Vitesse de connexion détermine la vitesse de connexion (exprimée en kilobits par seconde) utilisée
pour calculer le temps de téléchargement. Le temps de téléchargement de la page apparaît dans la
barre d'état. Celui des images est affiché dans l'inspecteur de propriétés lorsqu'une image est
sélectionnée dans la fenêtre de document.
Utilisation de la barre du lanceur
La barre du lanceur s'affiche dans la barre d'état et est composée de boutons qui permettent
d'ouvrir et de fermer les différents panneaux, fenêtres et inspecteurs.
Pour afficher la barre du lanceur, activez l'option Afficher les icônes dans les panneaux et le
lanceur dans les préférences des panneaux. Vous pouvez préciser les éléments qui doivent figurer
sur la barre du lanceur. Pour plus d'informations, voir « Définition des préférences des
panneaux », page 48.
Utilisation de la barre d'outils de document
La barre d'outils de document est composée de boutons qui vous permettent d'accéder
rapidement aux différents modes d'affichage : Code, Création, un mode à deux volets combinant
les modes Code et Création, et le mode Live Data (voir « Affichage des données dynamiques en
mode Création », page 508). La barre d'outils contient également plusieurs commandes et
options permettant d'afficher le document et de le transférer d'un site local vers un site distant,
ainsi que de déboguer du code JavaScript.
Pour afficher ou masquer la barre d'outils de document, choisissez Affichage > Barre d'outils >
Document.
Gestion de fichiers
Mode Code
Mode Création
Aperçu/Débogage dans le navigateur
Titre du document
Affichage des données dynamiques
Modes Code et Création
Référence
Options d'affichage
Navigation dans le code
Actualiser mode Création
Les options suivantes s'affichent dans la barre d'outils de document :
40
Chapitre 2
•
•
Mode Code
pour afficher uniquement le mode Code dans la fenêtre de document.
Modes Code et Création 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.
•
Mode Création
pour afficher uniquement le mode Création dans la fenêtre de document.
Vous pouvez également choisir un mode d'affichage dans le menu Affichage.
•
Titre
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.
•
•
Gestion des fichiers
pour afficher le menu déroulant correspondant.
Aperçu/Débogage dans le navigateur pour prévisualiser ou déboguer un document dans un
navigateur. Choisissez un navigateur dans le menu déroulant.
Pour ajouter ou modifier des navigateurs dans le menu, choisissez Modifier la liste des
navigateurs.
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.
•
Référence
pour afficher le panneau Référence.
Ce panneau comporte des références sur HTML, CSS, le code JavaScript, CFML, ASP et JSP.
Pour plus d'informations, voir « Accès aux références de langue », page 210.
•
Navigation dans le code pour naviguer dans votre code JavaScript. Pour plus d'informations,
voir « Utilisation du débogueur JavaScript », page 217.
•
Options d'affichage pour définir les options d'affichage des modes Code et Création,
notamment le mode devant s'afficher au-dessus de l'autre.
Pour plus d'informations sur les options d'affichage du mode Code, voir « Définition des
préférences d'affichage », page 182.
Les options d'affichage du mode Création vous permettent de masquer toutes les assistances
visuelles (telles que les bordures de tableau, de calque et de cadre) simultanément, ou de les
masquer et les afficher individuellement selon vos besoins. Elles vous permettent également de
visualiser le contenu de l'en-tête et les guides visuels. Pour plus d'informations sur ces options,
disponibles également dans le menu Affichage, voir « Sélection d'éléments dans la fenêtre de
document », page 120, « Affichage et modification du contenu de l'en-tête », page 123 et
« Utilisation de guides visuels durant la conception », page 121.
Lorsque les modes Code et Création sont affichés en même temps, les deux groupes d'options
sont disponibles dans le menu.
Exploration de l'espace de travail
41
Utilisation de la 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 5, « Configuration d'un document », page 111.
Pour afficher la barre d'outils standard, choisissez Affichage > Barres d'outils > Standard.
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 Contrôle
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 de la barre Insertion
Les boutons qui composent la barre Insertion permettent de créer et d'insérer des objets, tels que
des tableaux, des calques et des images. Ces boutons sont organisés dans des onglets.
Pour afficher ou masquer la barre Insertion :
Choisissez Fenêtre > Insérer.
Pour développer ou réduire la barre Insertion :
Cliquez sur la flèche d'agrandissement dans le coin gauche de la barre de titre de la barre
Insertion.
42
Chapitre 2
Pour modifier l'orientation de la barre Insertion, procédez de l'une des manières suivantes
(Macintosh uniquement) :
• Pour passer de l'orientation horizontale à l'orientation verticale, cliquez sur l'icône
d'orientation verticale située près du coin droit supérieur.
• Pour passer de l'orientation verticale à l'orientation horizontale, cliquez sur l'icône
d'orientation horizontale située près du coin droit inférieur.
Pour afficher les boutons d'un onglet particulier, procédez de l'une des manières suivantes :
• Si la barre Insertion est dans sa position horizontale, cliquez sur un onglet.
• Si la barre Insertion est dans sa position verticale (Macintosh uniquement), cliquez sur une
catégorie en haut de la barre et choisissez une option dans le menu déroulant.
Pour insérer un objet :
1
Sélectionnez un onglet dans la barre Insertion.
2
Cliquez sur un bouton d'objet ou faites glisser l'icône du bouton dans la fenêtre de document.
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.
Pour contourner cette boîte de dialogue et insérer un espace réservé vide :
Appuyez sur la touche Contrôle (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 Contrôle 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.
La barre Insertion contient plusieurs onglets : Commun, Mise en forme, Texte, Tableaux, Cadres,
Formulaires, Modèles, Caractères, Média, En-tête, Script et Application. D'autres onglets
s'affichent lorsque le document sélectionné contient du code serveur, tel que des documents ASP
ou CFML.
• L'onglet Application insère des éléments dynamiques, tels que les jeux d'enregistrements,
régions répétées, et formulaires d'insertion d'enregistrements et de mise à jour. Pour plus
d'informations sur le contenu dynamique, voir Chapitre 33, « Ajout d'un contenu dynamique
à une page Web », page 553.
• L'onglet Caractères contient des caractères spéciaux, par exemple le symbole du copyright, les
guillemets typographiques et le symbole de marque commerciale. Notez que certains symboles
ne s'affichent pas toujours correctement dans les versions 3.0 ou antérieures des navigateurs
Internet Explorer et Netscape.
• L'onglet Commun contient des boutons permettant de créer et d'insérer les objets les plus
fréquemment utilisés, tels que les images, les tableaux et les calques.
Exploration de l'espace de travail
43
• L'onglet Formulaires contient des boutons permettant de créer des formulaires et d'y insérer
des éléments.
• L'onglet Cadres contient les structures de jeux de cadres courantes.
• L'onglet En-tête contient des boutons permettant d'ajouter divers éléments d'en-tête, tels
que les balises meta et base.
• L'onglet Mise en forme insère des tableaux et des calques, et permet de choisir entre deux
modes d'affichage des tableaux : le mode Standard (par défaut) et le mode Mise en forme.
Lorsque le mode d'affichage Mise en forme est sélectionné, vous pouvez utiliser les outils de
mise en forme Dreamweaver : Dessiner la cellule de Mise en forme et Dessiner le tableau de
Mise en forme. Pour plus d'informations, voir Chapitre 17, « Le mode de Mise en forme »,
page 253.
• L'onglet Média contient des boutons permettant d'insérer des objets animés ou des objets
interactifs, tels que des objets ou du texte Flash, des applets Java et des objets ActiveX. Pour
plus d'informations, voir Chapitre 22, « Insertion d'éléments multimédia », page 337.
• L'onglet Script insère un script, une section noscript ou une inclusion côté serveur.
• L'onglet Tableaux insère un tableau entier ou une balise de tableau spécifique (telle que tr, th,
ou td).
• L'onglet Modèles insère des régions répétées facultatives et pouvant être modifiées dans des
fichiers modèles. Pour plus d'informations, voir « A propos des modèles Dreamweaver »,
page 464.
• L'onglet Texte insère diverses balises de mise en forme de texte et de liste, telles que b, em, p, h1
et ul.
Remarque : bien que certains boutons de l'onglet Texte ressemblent à des boutons de l'inspecteur de
propriétés, ils ont des fonctions différentes. Les boutons de l'onglet Texte servent à insérer du code, mais
n'indiquent pas l'état de la sélection courante ; en effet, si la sélection est un texte en gras, le bouton Gras
s'affiche en surbrillance dans l'inspecteur de propriétés, mais pas dans l'onglet Texte.
• Les onglets côté serveur, disponibles uniquement pour les pages utilisant un langage serveur
spécifique, incluent ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP et PHP.
Ces onglets proposent des objets de type code serveur que vous pouvez insérer en mode Code.
Pour plus d'informations sur les objets de ces onglets, voir les rubriques correspondantes dans
l'aide de Dreamweaver.
Si tous les objets dans un onglet donné ne sont pas visibles, une petite flèche s'affiche dans le coin
inférieur gauche de la barre Insertion ; il suffit de cliquer sur la flèche pour afficher le reste des
objets.
Lorsque vous cliquez sur un bouton d'objet, Dreamweaver insère du code dans le document.
Dans certains cas, le code est inséré immédiatement, dans d'autres, un éditeur de balises (voir
« Modification de balises avec des éditeurs de balises », page 202) ou autre boîte de dialogue
s'affiche et vous invite à fournir d'autres informations avant d'insérer le code. 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.
44
Chapitre 2
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, choisissez Afficher > Assistances visuelles > Eléments
invisibles. Pour sélectionner les objets invisibles en mode Création, vous devez cliquer sur les
icônes correspondantes. Pour plus d'informations, voir « A propos des éléments invisibles »,
page 121.
Certains paramètres des préférences générales affectent la barre Insertion. Pour modifier ces
préférences, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis
sélectionnez la catégorie Général dans la liste de gauche.
• Lors de l'insertion d'objets, tels que des images, des tableaux, des scripts et des éléments d'entête,
une boîte de dialogue vous demande des informations supplémentaires. Vous pouvez
supprimer ces boîtes de dialogue en désactivant l'option Afficher la boîte de dialogue lors de
l'insertion d'objets ou en maintenant la touche Contrôle (Windows) ou Option (Macintosh)
enfoncée tandis que vous créez l'objet. 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é.
• L'option Barre Insertion vous permet d'afficher le contenu de la barre Insertion sous forme
d'icônes seulement, de texte seulement, ou de texte et d'icônes.
Vous pouvez modifier les objets de la barre Insertion ou créer vos propres objets ; voir la section
« Customizing Dreamweaver » du centre de support Macromedia, à l'adresse http://
www.macromedia.com/go/customizing_dreamweaver.
Utilisation de l'inspecteur de propriétés
L'inspecteur de propriétés permet d'examiner et de modifier les propriétés de l'élément de la page
sélectionnée, tel que le texte ou un objet inséré. Vous pouvez sélectionner des éléments de page en
mode Création ou en mode Code.
Pour afficher ou masquer l'inspecteur de propriétés, choisissez Fenêtre > Propriétés.
La plupart des changements apportés à une propriété sont immédiatement appliqués dans la
fenêtre de document. Certains changements de propriétés ne prennent effet qu'au moment où
vous cliquez hors des champs de texte de modification des propriétés, que vous appuyez sur la
touche Entrée (Windows) ou Retour (Macintosh), ou sur la touche de tabulation pour passer à
une autre propriété.
Le contenu de l'inspecteur de propriétés varie en fonction de l'élément sélectionné. 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.
Ce dernier affiche initialement la plupart des propriétés de l'élément sélectionné. Pour voir les
propriétés de l'élément sélectionné les plus souvent utilisées, cliquez sur la flèche
d'agrandissement dans le coin inférieur droit de l'inspecteur de propriétés pour le réduire.
Exploration de l'espace de travail
45
Conseil : il arrive que certaines propriétés masquées n'apparaissent pas, même si l'inspecteur de propriétés est
sous sa forme agrandie. Dans ce cas, codez ces propriétés manuellement, à l'aide de l'inspecteur de code ou en
mode Code, ou sélectionnez la balise en mode Code et choisissez Modifier > Modifier balise.
Gestion des panneaux et des groupes de panneaux
Dans Dreamweaver, les panneaux sont liés entre eux pour former des groupes de panneaux. 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 (espace de
travail intégré sous Windows uniquement). Cela vous permet d’accéder aisément aux panneaux
nécessaires sans encombrer votre espace de travail. Les panneaux à l'intérieur d'un groupe
s'affichent sous forme d'onglets.
Remarque : lorsqu'un groupe de panneaux est flottant (détaché), une étroite barre vide apparaît au-dessus 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.
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 sélectionner un panneau à l'intérieur d'un groupe de panneaux agrandi :
Cliquez sur l'onglet du panneau.
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é.
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é.
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 Insertion, par exemple) ne peuvent être ancrés qu'en haut ou en bas dans la fenêtre intégrée.
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.
46
Chapitre 2
Pour afficher le menu d'options du groupe de panneaux :
Développez le groupe de panneaux en cliquant sur sa flèche d'agrandissement.
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 Contrôle enfoncée
(Macintosh), sur la barre de titre du groupe de panneaux pour afficher le menu contextuel.
Pour renommer un groupe de panneaux :
1
Choisissez Renommer le groupe de panneaux dans le menu Options sur le côté droit de la
barre de titre du groupe de panneaux.
2
Entrez le nouveau nom et cliquez sur OK.
Pour détacher un panneau d'un groupe de panneaux :
Faites glisser le panneau par son onglet jusqu'à ce que son contour indique qu'il n'est plus ancré.
Le panneau s'affiche dans son propre groupe de panneaux.
Pour ancrer un panneau à un groupe de panneaux :
Faites glisser le panneau par son onglet jusqu'à ce que son contour indique qu'il est ancré.
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.
Pour fermer un groupe de panneaux, et le faire disparaître complètement :
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.
Exploration de l'espace de travail
47
Pour ouvrir un groupe de panneaux qui n'est pas visible à l'écran :
Choisissez le nom du panneau dans le menu Fenêtre.
Pour modifier la taille de l'ensemble des groupes de panneaux (dans l'espace de travail flottant
uniquement) :
Afin de redimensionner l'ensemble des groupes de panneaux, faites-les glisser tout comme vous le
faites pour redimensionner une fenêtre quelconque dans 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.
Définition des préférences des panneaux
Utilisez les préférences des panneaux 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. Vous pouvez également utiliser les préférences des panneaux
pour spécifier ou pas l'affichage d'icônes dans les onglets des panneaux, l'affichage de la barre du
lanceur et les panneaux et inspecteurs devant apparaître dans celle-ci.
Pour définir les préférences des panneaux, choisissez Edition > Préférences, puis sélectionnez la
catégorie Panneaux dans la liste de gauche. Ensuite, sélectionnez l'une des options suivantes :
Toujours visible pour spécifier les panneaux devant apparaître toujours au premier plan dans la
fenêtre de document. Par défaut, les panneaux, les inspecteurs et autres fenêtres similaires
s'affichent toujours comme « flottant » sur la fenêtre de document. Si vous désélectionnez un
élément dans cette liste, vous pouvez alors déplacer la fenêtre de document devant cet élément.
Par exemple, pour permettre à la fenêtre de document de masquer l'inspecteur de propriétés, vous
devez désélectionner l'option Propriétés. L'inspecteur de propriétés s'affiche alors devant la
fenêtre de document uniquement lorsqu'il est actif.
Pour permettre à la fenêtre de document de masquer un panneau flottant quelconque (que vous avez
ajouté en personnalisant Dreamweaver), vous devez désélectionner l'option Tout autre panneau.
Remarque : l'option Toujours visible n'est pas applicable dans l'espace de travail intégré lorsque tous les panneaux
sont ancrés.
détermine si la barre du lanceur doit apparaître.
Lorsque cette option est sélectionnée, la barre du lanceur s'affiche dans la zone de barre d'état, et une
petite icône s'affiche dans l'onglet de chaque panneau. (Voir « A propos de la barre d'état »,
page 38.) Les boutons dans la barre du lanceur permettent d'ouvrir les panneaux et les inspecteurs.
Afficher les icônes dans les panneaux et le lanceur
Afficher dans le lanceur
indique les éléments qui doivent figurer sur la barre du lanceur.
Pour préciser les éléments qui doivent figurer sur la barre du lanceur :
1
Pour ajouter un élément sur la barre du lanceur, cliquez sur le bouton plus (+).
2
Pour supprimer un élément de la barre du lanceur, sélectionnez cet élément et cliquez sur le
bouton moins (-).
3
Pour changer l'ordre dans lequel les éléments sont affichés sur la barre du lanceur, sélectionnez un
élément dans la liste, et cliquez sur un bouton fléché.
Par exemple, pour déplacer un élément vers la droite sur la barre du lanceur, faites-le descendre
dans la liste.
48
Chapitre 2
4
Cliquez sur OK.
La barre du lanceur se transforme pour afficher les éléments que vous avez spécifiés.
A propos du panneau Site
Le panneau Site vous permet de définir un site, gérer les fichiers locaux, télécharger des fichiers
d'un site distant et rechercher les fichiers sur votre disque local hors de votre site. Pour plus
d'informations sur l'utilisation du panneau Site, voir Chapitre 4, « Gestion du site », page 71.
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 (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.
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 « A propos de
l'automatisation des tâches », page 124.
Pour ouvrir le panneau Historique :
Choisissez Fenêtre > Autres > 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é.
Exploration de l'espace de travail
49
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 ou Dreamweaver > Préférences (Mac OS X), puis
sélectionnez la catégorie Général dans la liste de gauche.
2
Tapez un chiffre dans la zone Nombre maximal d'étapes de l'historique.
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 en cours :
Dans le menu contextuel du panneau Historique, choisissez Effacer l'historique.
Cette commande efface également toutes les informations permettant d'annuler les actions
effectuées dans le document en cours : 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.)
A propos du panneau Réponses
Le panneau Réponses propose un accès rapide à des sources d'informations pouvant vous aider à
travailler de manière plus efficace avec Dreamweaver. Ces sources incluent les didacticiels, notes
techniques, extensions Dreamweaver et d'autres contenus utiles.
Pour obtenir les dernières informations sur Dreamweaver à partir du site macromedia.com,
cliquez sur le bouton Mettre à jour.
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 :
50
Chapitre 2
• Pour plus d’informations sur l'utilisation de Dreamweaver avec d'autres éditeurs HTML, tels
que HomeSite ou BBEdit, voir « Utilisation d'un éditeur HTML externe avec Dreamweaver »,
page 193.
• Vous pouvez spécifier vos navigateurs favoris pour l'affichage de votre site. Voir « Aperçu de
page dans les navigateurs », page 496.
• Vous pouvez lancer un éditeur d'image externe, tel que Macromedia Fireworks, depuis
Dreamweaver. Voir « Utilisation d'un éditeur d'image externe », page 317.
• 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 338.
• Pour plus d'informations sur l'ajout d'interactivité à votre site à l'aide de Macromedia Flash,
voir « A propos du contenu Flash », page 340.
• Pour savoir comment rendre votre site interactif à l'aide d'animations Macromedia Shockwave,
voir « Insertion d'animations Shockwave », page 346.
• Pour plus d'informations sur l'utilisation de ColdFusion, voir Chapitre 6, « Configuration
d'une application Web », page 133.
Personnalisation de Dreamweaver : 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 définir des préférences, créer des raccourcis clavier et ajouter des
extensions à Dreamweaver.
Pour plus d'informations sur la personnalisation manuelle des fichiers de configuration, voir la
section « Customizing Dreamweaver » du centre de support Macromedia, à l'adresse http://
www.macromedia.com/go/customizing_dreamweaver.
Définition des préférences
Dreamweaver intègre des paramètres de préférence qui commandent l'aspect général de l'interface
utilisateur de Dreamweaver, ainsi que les options liées à des fonctions spécifiques, par exemple les
calques, les feuilles de style, l'affichage des codes HTML et JavaScript, les éditeurs externes et la
prévisualisation de pages dans les navigateurs. Les informations relatives à certaines options de
préférences spécifiques sont fournies dans ce guide de l'utilisateur, avec la rubrique ou la fonction
associée.
Ce guide 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 de Dreamweaver.
Définition des préférences générales
Les préférences générales commandent l'aspect général de Dreamweaver. Pour modifier ces
préférences, choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis
cliquez sur Général. Les préférences générales sont divisées en deux sous-catégories : les options
Document et les options Edition. Pour plus d'informations sur ces préférences, voir l'aide de
Dreamweaver.
Exploration de l'espace de travail
51
indique que Dreamweaver doit appliquer la balise
à chaque fois que vous effectuez une opération qui implique normalement l'application
de la balise b, et qu'il doit appliquer la balise em à chaque fois que vous effectuez une opération
qui implique normalement l'application de la balise i. Ces actions incluent notamment le fait de
cliquer sur les boutons Gras ou Italique de l'inspecteur de propriétés de texte et de choisir Texte >
Style > Gras ou Texte > Style > Italique. Pour utiliser les balises b et i dans vos documents,
désélectionnez cette option.
Utiliser <strong> et <em> au lieu de <b> et <i>
strong
Remarque : le World Wide Web Consortium recommande d'éviter les balises b et i ; les balises strong et em
fournissent des informations plus sémantiques que les balises b et i.
Définition des préférences de polices
Les préférences de polices permettent de définir les polices que Dreamweaver utilise pour afficher
chaque codage de police. Le codage d'un document détermine la façon dont ce document est
affiché dans un navigateur. Les paramètres 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 plus d'informations sur la définition d'un codage par défaut pour les
nouveaux documents, voir « Configuration d'un document », page 111.
Pour définir la police à utiliser dans Dreamweaver pour chaque type de codage :
1
Choisissez Edition > Préférences, puis cliquez sur la catégorie Polices dans la liste de gauche.
2
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.
Remarque : les polices que vous choisissez n'ont aucune incidence sur l'aspect du document dans le navigateur
d'un visiteur.
Pour plus d'informations sur les préférences de polices, voir l'aide de Dreamweaver.
Utilisation de l'éditeur de raccourcis clavier
Utilisez l'éditeur de raccourcis clavier pour créer ou modifier des touches de raccourci ou utilisez
un jeu de raccourcis préalablement déterminés.
Remarque : des tableaux de raccourcis clavier relatifs à la configuration Dreamweaver par défaut sont disponibles
sur le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/go/dreamweaver_mx_shortcuts.
52
Chapitre 2
Pour modifier les raccourcis clavier :
1
Choisissez Edition > Raccourcis clavier.
La boîte de dialogue Raccourcis clavier s'affiche.
Bouton Dupliquer le jeu
Bouton Supprimer le jeu
Bouton Enregistrer
comme fichier HTML
Bouton Renommer l'icône
2
Choisissez parmi les options suivantes :
•
Jeu en cours : affiche les jeux de raccourcis prédéterminés livrés avec Dreamweaver, ainsi que
tous les jeux personnalisés que vous avez vous-même définis. Les jeux prédéterminés sont
répertoriés en haut du menu. Par exemple, si vous connaissez les raccourcis de HomeSite ou
BBEdit, vous pouvez les utiliser en choisissant le jeu prédéterminé correspondant.
•
Commandes : permet de sélectionner la catégorie de commandes à modifier. Par exemple, vous
pouvez modifier des commandes de menu, telles que Ouvrir ou des commandes de
modification du code, telles que Equilibrer les accolades.
•
Liste des commandes
•
•
Fenêtre Raccourcis
•
Supprimer l'élément (-)
: affiche les commandes de la catégorie que vous avez choisie dans le
menu déroulant Commandes, ainsi que les raccourcis clavier attribués. Les catégories de
commandes Menu s'affichent sous une forme arborescente, suivant la structure des menus. Les
autres catégories répertorient les commandes par leur nom (par exemple, Quitter
l'application).
: affiche la liste des raccourcis clavier assignés à la commande sélectionnée.
: ajoute un nouveau raccourci pour la commande en cours. Cliquez sur ce
bouton pour activer le champ Raccourcis. Entrez une nouvelle combinaison de touches et
cliquez sur Remplacer pour ajouter un nouveau raccourci clavier pour cette commande. Vous
pouvez attribuer deux raccourcis clavier différents pour chaque commande. S'il en existe déjà
deux, le bouton Ajouter l'élément (+) n'a aucun effet.
Ajouter l'élément (+)
: supprime le raccourci sélectionné de la liste.
Exploration de l'espace de travail
53
•
Appuyer sur la touche : affiche la combinaison de touches que vous entrez lorsque vous ajoutez
ou modifiez un raccourci.
•
Remplacer
•
Dupliquer : duplique le jeu en cours. Attribuez un nom au nouveau jeu ; le nom par défaut est
le nom du jeu en cours doté du suffixe « copie »).
•
•
Renommer
•
Supprimer
: ajoute la combinaison de touches indiquée dans le champ Appuyer sur la touche à
la liste des raccourcis ou applique le nouveau raccourci clavier à la combinaison de touches
spécifiées.
: attribue un nouveau nom au jeu en cours.
: pour enregistrer le jeu en cours sous format de tableau
HTML et simplifier ainsi la visualisation et l'impression. Vous pouvez ouvrir le fichier HTML
dans votre navigateur et imprimer les raccourcis comme référence rapide.
Enregistrer comme fichier HTML
: supprime les jeux. Les jeux actifs ne peuvent être supprimés.
Pour supprimer un raccourci d'une commande :
1
Dans le menu déroulant Commandes, sélectionnez une catégorie.
Une liste apparaît, répertoriant les commandes associées à cette catégorie.
2
Sélectionnez une commande dans la liste.
Les raccourcis attribués à la commande apparaissent dans zone Raccourcis.
3
Sélectionnez un raccourci.
4
Cliquez sur le bouton Supprimer l'élément (-).
Pour ajouter un raccourci clavier à une commande :
1
Dans le menu déroulant Commandes, sélectionnez une catégorie.
Une liste apparaît, répertoriant les commandes associées à cette catégorie.
2
Sélectionnez une commande dans la liste.
Les raccourcis attribués à la commande apparaissent dans zone Raccourcis.
3
Procédez de l'une des manières suivantes pour ajouter un raccourci :
• Si moins de deux raccourcis sont déjà attribués à la commande, cliquez sur le bouton Ajouter
l'élément (+). Une nouvelle ligne vide apparaît dans la zone de texte Raccourcis et le point
d'insertion s'affiche dans la zone Appuyer sur la touche.
• Si deux raccourcis sont déjà attribués à la commande, sélectionnez-en un (il sera remplacé par
le nouveau raccourci). Cliquez ensuite dans la zone Appuyer sur la touche.
4
Appuyez sur une combinaison de touches.
Celle-ci apparaît dans la zone Appuyer sur la touche.
Remarque : si la combinaison de touches est incorrecte (par exemple, elle est déjà attribuée à une autre
commande), un message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-être pas
ajouter, ni modifier le raccourci.
5
54
Cliquez sur Remplacer. La nouvelle combinaison de touches est attribuée à la commande.
Chapitre 2
Pour modifier un raccourci existant :
1
Dans le menu déroulant Commandes, sélectionnez une catégorie.
Une liste apparaît, répertoriant les commandes associées à cette catégorie.
2
Sélectionnez une commande dans la liste.
Les raccourcis attribués à la commande apparaissent dans zone Raccourcis.
3
Sélectionnez le raccourci à modifier.
4
Cliquez dans la zone Appuyer sur la touche, et entrez une nouvelle combinaison de touches.
5
Cliquez sur le bouton Remplacer pour modifier le raccourci.
Remarque : si la combinaison de touches est incorrecte (par exemple, elle est déjà attribuée à une autre
commande), un message s'affiche sous la zone Raccourcis et vous en avertit. Vous ne pourrez peut-être pas
ajouter, ni modifier le raccourci.
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 « Personnalisation de Dreamweaver dans les systèmes
multiutilisateurs », page 56.
Pour rechercher les extensions de Dreamweaver les plus récentes, consultez le site Web de
Macromedia Exchange à l'adresse suivante : http://www.macromedia.com/fr/exchange/
dreamweaver/. 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 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.
• 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.
Exploration de l'espace de travail
55
Utilisez Extension Manager pour supprimer des extensions ou pour consulter des informations
sur l'extension.
Personnalisation de Dreamweaver dans les systèmes multiutilisateurs
Vous personnalisez Dreamweaver selon vos besoins dans les systèmes multiutilisateurs, tels que
Windows NT, Windows 2000, Windows XP ou Mac OS 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 enregistrés
sous C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver
MX\Configuration (ce dossier peut être localisé dans un dossier masqué) ; sur Mac OS X, ils sont
enregistrés dans votre dossier d'accueil, Users/username/Library/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.
56
Chapitre 2
CHAPITRE 3
Planification et configuration de votre site
Un site Web est un ensemble de documents liés les uns aux autres et partageant des attributs, par
exemple une rubrique connexe, une conception similaire ou un objectif.
Outil logiciel de création et de gestion de sites, Macromedia Dreamweaver MX permet de réaliser
des sites Web complets, en sus de documents individuels. Pour obtenir des résultats optimaux,
concevez et planifiez votre site Web avant de créer les pages dont il sera constitué.
Remarque : si vous souhaitez créer des documents immédiatement, vous pouvez tester certains des outils de
création de documents de Dreamweaver et réaliser un document pilote (voir « Création d'un document vierge »,
page 113). Mais ne vous lancez pas dans le développement de documents sérieux avant d'avoir défini le site.
Pour créer un site Web, la première étape consiste à le planifier (voir « A propos de la planification
et de la création du site », page 57). L'étape suivante consiste à définir la structure de base du
site (voir « Configuration d'un site Dreamweaver », page 62). Il peut être judicieux de concevoir
votre site d'après un modèle Dreamweaver (voir « A propos des modèles Dreamweaver », page
464 et « Création d'un modèle Dreamweaver », page 470) lors de la préparation de son contenu.
Si vous disposez déjà d'un site installé sur un serveur Web et désirez commencer à utiliser
Dreamweaver pour le modifier, voir « Modification d'un site Dreamweaver », page 67.
Ce chapitre contient les sections suivantes :
« A propos de la planification et de la création du site », page 57
« Configuration d'un site Dreamweaver », page 62
« Configuration d'un dossier local », page 63
« Configuration d'un dossier distant », page 64
« Modification d'un site Dreamweaver », page 67
« Modification de sites Web existants dans Dreamweaver », page 68
A propos de la planification et de la création du site
Dans Dreamweaver, le terme site peut se rapporter aussi bien à un site Web qu'au dossier local
dans lequel sont conservés tous les documents appartenant à un site Web. Lorsque se profile en
vous l'envie de créer un site Web, il convient de bien planifier votre travail et de respecter un
certain nombre de tâches indispensables pour mettre toutes les chances de votre côté et veiller à ce
que votre site remporte un franc succès. Même si la page d'accueil que vous créez est personnelle
et réservée à des proches, il est toujours de votre intérêt de bien planifier le site pour vous assurer
que tous seront à même de l'utiliser sans rencontrer de problème.
57
Définition des objectifs
Avant de créer votre site Web, déterminez précisément vos objectifs. Posez à vous-même ou à votre client
des questions sur le site. Qu'attendez-vous d'un site Web ? Mettez noir sur blanc tout ce à quoi vous
aspirez, afin de ne rien oublier au moment de la réalisation. Cette étape préalable de définition des
objectifs vous aide à focaliser et à cibler le site Web en fonction de vos besoins spécifiques.
Un site Web qui intègre des informations sur un sujet particulier n'est pas forcément construit ni structuré
de la même manière qu'un site conçu pour vendre des produits. La complexité de vos objectifs affectera la
navigation, les outils de création Web utilisés (Flash, Director, etc.), voire l'aspect général du site.
Choix du public ciblé
Vos objectifs désormais connus, il vous faut réfléchir à qui le site Web s'adressera. La question paraît
quelque peu simpliste, puisque la plupart des gens souhaitent attirer le plus d'internautes possible vers
leur site Web. Il faut cependant admettre que la création d'un site de renommée quasi internationale
relève de l'exceptionnel. Les internautes utilisent des navigateurs variés, se connectent à des vitesses
variables et ne disposent pas tous de plug-ins. Tous ces facteurs déterminants sont à prendre en compte.
Le choix du public ciblé est, par conséquent, fondamental.
Demandez-vous qui visitera votre site ou à qui vous le destinez. A votre avis, quels types d'ordinateurs ces
internautes possèdent-ils ? Quelles plates-formes exploitent-ils (Macintosh, Windows, Linux, etc.) ?
Quelle est leur vitesse moyenne de connexion (modem 33,6 Kbps ou DSL) ? Quels types de navigateurs
emploient-ils et quelle est, en moyenne, la taille de leurs moniteurs ? Souhaitez-vous créer un site
intranet où tout le monde utilise le même système d'exploitation et le même navigateur ? Tous ces
facteurs peuvent affecter considérablement l'aspect et les performances de votre page Web.
Une fois que vous savez à quel public vous voulez vous adresser et connaissez l'environnement
informatique utilisé, vous pouvez cibler votre travail.
Supposons, par exemple, un public ciblé travaillant dans un environnement Windows, avec des
moniteurs 17 pouces et Internet Explorer 3.0 ou ultérieur. Créez vos pages Web, puis testez votre site
sous Windows, dans Internet Explorer, sur écran 800 x 600 pixels. N'oubliez pas non plus de tester votre
site sur d'autres moniteurs, avec d'autres navigateurs (Netscape Navigator, par exemple) et sur
Macintosh ; l'aspect des pages Web peut s'avérer moins précis que dans l'environnement préconisé pour
le public ciblé.
Création de sites pour plusieurs types de navigateurs
Lorsque vous créez votre site, vous devez prendre en compte le fait que les visiteurs de votre site utilisent
une grande diversité de navigateurs Web. Dans la mesure du possible, créez des sites compatibles avec un
maximum de navigateurs, selon les contraintes données.
Il existe plus d'une vingtaine de navigateurs Web différents en circulation, et la plupart ont fait l'objet de
plusieurs versions. Même si vous ne visez que Netscape Navigator et Microsoft Internet Explorer, qui
sont utilisés par la très grande majorité des internautes, n'oubliez pas que tous n'utilisent pas la dernière
version de ces deux navigateurs. Si votre site se trouve sur le Web, il recevra probablement la visite d'un
utilisateur de Netscape Navigator 2.0 ou du navigateur qu'AOL fournit à ses clients, ou encore d'un
navigateur en mode texte, tel que Lynx.
Dans certaines circonstances, il n'est pas nécessaire de créer des sites compatibles avec les divers
navigateurs. Par exemple, si votre site n'est visible que sur le réseau intranet de votre entreprise et si vous
savez que tous les employés utilisent le même navigateur, vous pouvez optimiser votre site pour tirer parti
des caractéristiques de ce navigateur. De même, si vous créez du contenu HTML qui sera distribué sur
CD-ROM et si vous distribuez un navigateur sur le CD, vous pouvez partir du principe que tous vos
clients utiliseront ce navigateur bien précis.
58
Chapitre 3
La plupart du temps, pour les sites Web conçus pour le grand public, il est préférable de rendre votre
site visible pour le plus grand nombre possible de navigateurs. Concevez votre site pour un ou deux
navigateurs spécifiques, en essayant toutefois d'explorer de temps en temps le site avec un autre
navigateur, pour éviter de proposer trop de contenu non compatible. Vous pouvez également envoyer
un message à un forum de discussion, pour demander à d'autres internautes de consulter votre site. Il
est, en effet, toujours bon d'avoir l'avis d'un très vaste public.
Plus votre site sera sophistiqué – en termes de mise en page, animation, multimédia et interaction – et
moins il sera compatible avec tous les navigateurs. Par exemple, certains navigateurs ne peuvent pas
exécuter du JavaScript. Une page de texte pur, ne faisant appel à aucun enrichissement sophistiqué,
s'affichera probablement sans problème dans n'importe quel navigateur, mais elle offrira évidemment
beaucoup moins d'attrait, sur le plan esthétique, qu'une page utilisant efficacement des images, une
mise en page soignée et des éléments interactifs. Essayez de trouver un juste milieu entre une
conception orientée vers un maximum d'effets et une conception orientée vers une compatibilité
maximale.
Une approche intéressante consiste à créer plusieurs versions de certaines pages importantes, en
particulier de la page d'accueil de votre site. Par exemple, vous pouvez concevoir une version avec
cadres et une version sans cadre de cette page. Ensuite, vous pouvez intégrer dans votre page un
comportement qui transfère automatiquement les internautes équipés de navigateurs ne prenant pas
en charge les cadres vers une version sans cadre. Pour plus d'informations, voir « Utilisation des
actions de comportement livrées avec Dreamweaver », page 375.
Organisation de la structure du site
Organisez avec soin votre site, cela vous fera gagner beaucoup de temps par la suite. Si vous
commencez à créer des documents sans avoir auparavant réfléchi à l'emplacement exact qu'ils
occuperont au sein de la hiérarchie du site, vous risquez de vous retrouver avec un énorme dossier
désordonné, contenant des fichiers reliés les uns aux autres, mais éparpillés dans plusieurs dossiers aux
noms plus ou moins identiques.
Habituellement, la configuration d'un site passe par la création, sur votre disque dur local, d'un
dossier distinct où sont stockés tous les fichiers servant à la structure de votre site (appelé, à ce niveau,
site local) et par la création et la modification de documents au sein même de ce dossier. Ensuite, vous
copiez les fichiers enfin prêts pour la publication sur un serveur Web, pour le mettre à la disposition
du grand public. Cette méthode paraît mieux adaptée que le fait de créer et modifier les fichiers
directement sur le site Web public ; elle permet, en effet, de tester les changements au niveau du site
local avant de le rendre public et, une fois que vous avez terminé, vous pouvez simultanément
télécharger les fichiers du site local et mettre à jour le site public entier.
Pour coordonner votre site local avec Dreamweaver, voir « Configuration d'un site Dreamweaver »,
page 62. Lorsque vous configurez le site local à l'aide de Dreamweaver, les tâches de gestion des
fichiers de votre site, de suivi des liens, de mise à jour des pages, etc. deviennent beaucoup plus
simples.
Placez l'ensemble des pages associées les unes aux autres dans
un même dossier. Mettez, par exemple, les communiqués de presse de votre entreprise, les
coordonnées des personnes joignables et les postes à pourvoir dans un dossier, et toutes les pages de
votre catalogue en ligne dans un autre. Utilisez des sous-dossiers si nécessaire. L'entretien du site et la
navigation seront beaucoup plus faciles avec ce type d'organisation.
Décomposez votre site en catégories.
Planification et configuration de votre site
59
Décidez du lieu de stockage des éléments tels que les images et les fichiers son. Il est pratique
de placer toutes les images, par exemple, à un même endroit ; ainsi, lorsque vous désirez insérer
une illustration dans une page, vous savez immédiatement où la trouver. Certains concepteurs
placent tous les éléments non HTML d'un site dans un dossier appelé Assets. Ce dossier peut luimême contenir d'autres dossiers, par exemple un dossier Images, un dossier Shockwave et un
dossier Son. Vous pouvez aussi créer un dossier Assets séparé pour chaque groupe de pages de
votre site appartenant à un même domaine, s'il y a peu d'éléments communs à ces divers groupes.
Utilisez la même structure pour le site local et le site distant. Il est capital que votre site local et
votre site Web distant soient pareillement structurés. Si vous créez un site local à l'aide de
Dreamweaver, puis transférez tous les fichiers sur le site distant, Dreamweaver veillera à ce que la
structure locale soit exactement dupliquée sur le site distant.
Création de l'aspect de votre conception
En planifiant au préalable correctement la conception et la mise en forme de votre site avant de
commencer à utiliser Dreamweaver, vous gagnerez beaucoup de temps par la suite. Par exemple, il
peut être intéressant de schématiser d'emblée par écrit la maquette de la mise en page de votre site.
Une approche plus avancée permet de réaliser un dessin composite de votre site au moyen de
logiciels, tels que Macromedia Freehand ou Fireworks. L'important est d'avoir en main une
maquette de la mise en forme et de la conception, que vous pourrez ensuite exploiter lorsque vous
construirez votre site.
Il est essentiel de vérifier la cohérence de la mise en forme et de la conception de vos pages. Les
internautes doivent pouvoir surfer avec aisance, appréhender sans confusion possible le contenu
de votre site et accéder aisément aux différentes pages.
60
Chapitre 3
Conception du plan de navigation
S'il est un autre domaine où la planification est fort utile, c'est celui de la navigation. Lorsque
vous concevez votre site, pensez à l'« expérience » que doivent connaître vos visiteurs. Imaginez
comment ils vont pouvoir se déplacer d'un endroit à un autre. Prenez en compte les points
suivants :
« Vous êtes ici ». Les internautes doivent toujours savoir où ils se trouvent sur votre site et
comment revenir à la page d'accueil.
Recherche et index.
Donnez aux internautes le moyen d'accéder facilement aux informations
qu'ils recherchent.
Echos et réactions. Donnez aux internautes la possibilité de contacter l'administrateur Web (s'il y
en a un) si le site fonctionne mal, ainsi que toute autre personne associée à l'entreprise ou au site.
Soignez l'aspect de la navigation. La navigation doit rester cohérente dans tout le site. Si vous
placez une barre de navigation dans la partie supérieure de votre page d'accueil, faites en sorte
qu'elle figure également dans toutes les pages Web associées.
Dreamweaver a mis deux outils de navigation à votre disposition. Pour plus d'informations, voir
« Liens et navigation », page 425.
Planification et regroupement des actifs
Une fois que vous savez à quoi va ressembler votre site, vous pouvez créer et regrouper les actifs
dont vous aurez besoin. Les actifs sont des éléments tels que des images, du texte ou un support
(Flash, Shockwave, etc.). Vérifiez que vous disposez de tous ces éléments avant de commencer le
développement de votre site. Dans le cas contraire, vous risquez d'être constamment interrompu
dans votre travail, par exemple pour chercher une image ou créer un bouton.
Si vous utilisez les images et les graphiques d'un site clip-art ou créés par un tiers, veillez à les
récupérer et à les placer dans un dossier sur votre site (voir « Organisation de la structure du site »,
page 59). Si vous créez vous-même les actifs, assurez-vous de les avoir tous créés avant de
commencer le développement de votre site, y compris les images nécessaires pour les effets de
survol. Ensuite, organisez vos actifs de manière à pouvoir y accéder rapidement pendant la
création de votre site dans Dreamweaver.
Dreamweaver facilite la réutilisation de mise en page et d'éléments de page dans divers documents
grâce à des modèles et des bibliothèques. Il est toutefois plus facile de créer de nouvelles pages avec des
modèles et des bibliothèques que de les appliquer à des documents existants.
Utilisez des modèles si un grand nombre de pages adoptent le même format : planifiez et concevez
un modèle pour ce format, puis créez de nouvelles pages d'après ce modèle. Si vous décidez, par la
suite, de remanier le format de l'ensemble des pages, il vous suffira de changer le modèle.
Remarque : il existe certaines restrictions quant aux changements que vous pouvez effectuer sur les documents basés
sur des modèles. L'utilisation idéale des modèles est l'environnement de travail en équipe : vous avez ainsi la certitude
que tout le monde utilise en permanence la même présentation. En dehors de ce type d'environnement de travail, les
éléments de bibliothèques peuvent s'avérer plus flexibles.
si vous savez à l'avance que certaines images ou autres
contenus vont apparaître sur plusieurs pages ; concevez ces éléments à l'avance, puis faites-en des
éléments de bibliothèque. Si vous modifiez ces éléments par la suite, leur nouvelle version apparaîtra
automatiquement sur toutes les pages qui y font appel.
Utilisez des éléments de bibliothèque
Pour plus d'informations sur la réutilisation des mises en page et d'éléments de page, voir « Gestion
des actifs de site, des bibliothèques et des modèles », page 447.
Planification et configuration de votre site
61
Configuration d'un site Dreamweaver
Une fois la structure de votre site planifiée (voir « Organisation de la structure du site », page 59), ou
si vous disposez déjà d'un site, il vous faut désigner le nouveau site dans Dreamweaver avant de
commencer son développement.
Un site Dreamweaver vous permet d'organiser tous les documents associés à un site Web. Pensez-y en
termes de projet. Il convient de configurer un site pour chaque site Web à développer. L'organisation
de vos fichiers dans un site vous permet d'exploiter Dreamweaver avec le FTP 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. Vous tirerez le meilleur parti des fonctions Dreamweaver uniquement en définissant un site.
Un site Dreamweaver se compose de trois parties, selon votre environnement de travail et le type de
site Web en développement :
• Le dossier local représente votre répertoire de travail. Dreamweaver désigne ce dossier comme
votre « site local ». Pour plus d'informations, voir « Configuration d'un dossier local », page 63.
• Le dossier distant est le répertoire dans lequel sont stockés les fichiers, selon votre environnement,
que vous réservez aux évaluations, à la production, à la collaboration, etc. Dreamweaver désigne ce
dossier comme votre « site distant ». Pour plus d'informations, voir « Configuration d'un dossier
distant », page 64.
• Le dossier des pages dynamiques 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 140.
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. Vous devez impérativement réaliser cette
première étape avant de vous attaquer à Dreamweaver.
Vous pouvez configurer un site Dreamweaver de deux manières : en suivant les étapes de l'assistant
de définition d'un site ou en utilisant les paramètres avancés de définition du site, lesquels vous
permettront de configurer individuellement des dossiers locaux, distants et d'évaluation, si
nécessaire.
Pour configurer un site Dreamweaver :
1
Choisissez Site > Nouveau site.
La boîte de dialogue Définition du site s'ouvre.
2
Cliquez sur l'onglet Elémentaire pour utiliser l'assistant de définition d'un site ou sur l'onglet
Avancé pour définir les paramètres avancés.
3
Procédez à la configuration du site Dreamweaver :
• Répondez aux questions de l'assistant de définition d'un site, puis cliquez sur le bouton
Suivant pour passer aux autres étapes de configuration (voir « Utilisation de l'assistant de
définition d'un site », page 63).
• Complétez les catégories de paramètres avancés Infos locales (voir « Configuration d'un dossier
local », page 63), Infos distantes (voir « Configuration d'un dossier distant », page 64) et
Serveur d'évaluation (voir « Définition du dossier de traitement des pages dynamiques », page
140), si nécessaire.
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.
62
Chapitre 3
Utilisation de l'assistant de définition d'un site
Vous pouvez utiliser l'assistant de définition d'un site pour configurer un site Dreamweaver. Cet
assistant a pour fonction de vous guider tout au long de la procédure de configuration. Il est
conseillé aux débutants d'opter pour cette méthode dans Dreamweaver.
L'assistant se compose de trois sections, dont le nombre d'écrans, appelés parties, varie selon les
paramètres sélectionnés. Les trois sections principales sont les suivantes :
•
Modification des fichiers : il s'agit de l'endroit dans lequel vous configurez votre dossier local.
Pour plus d'informations, voir « Configuration d'un dossier local », page 63.
•
Test des fichiers : il s'agit de l'endroit dans lequel vous configurez le dossier qui sera utilisé par
Dreamweaver pour le traitement des pages dynamiques. Pour plus d'informations, voir
« Définition du dossier de traitement des pages dynamiques », page 140.
•
Partage des fichiers
: il s'agit de l'endroit dans lequel vous configurez votre dossier distant.
Pour plus d'informations, voir « Configuration d'un dossier distant », page 64.
Le nom de section affiché en gras en haut de la boîte de dialogue indique l'avancement de la
procédure de configuration. Vous n'aurez peut-être pas besoin de définir des dossiers dans les trois
sections. Chacune d'entre elles est composée de questions destinées à identifier vos besoins.
Pour utiliser l'assistant de définition d'un site pour configurer un site Dreamweaver :
1
Choisissez Site > Nouveau site.
La boîte de dialogue Définition du site apparaît.
2
Cliquez sur l'onglet Avancé pour définir les paramètres avancés.
3
Répondez aux questions de tous les écrans, puis cliquez sur le bouton Suivant pour continuer.
Cliquez sur le bouton Précédent pour revenir en arrière, si nécessaire.
Configuration d'un dossier local
Le dossier local représente le répertoire de travail de votre site Dreamweaver (voir « Configuration
d'un site Dreamweaver », page 62). 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 développement » de votre
site Dreamweaver.
Configurer un dossier local revient à établir un site Dreamweaver. Vous pourrez par la suite y
ajouter un dossier distant et un dossier d'évaluation (voir « Configuration d'un dossier distant »,
page 64 et « Création d'un dossier racine pour l'application », page 138) ; toutefois, il est
indispensable de configurer un dossier local avant de vous consacrer au développement
dans Dreamweaver.
Configuration d'un dossier local :
1
Choisissez Site > Nouveau site.
La boîte de dialogue Définition du site apparaît.
Planification et configuration de votre site
63
2
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.
3
Spécifiez les options relatives aux informations locales.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4
Cliquez sur OK.
Dreamweaver crée le cache initial du site, et le nouveau site Dreamweaver apparaît dans le
panneau Site. Pour plus d'informations sur le panneau Site et la gestion du site, voir « Gestion du
site », page 71.
Par la suite, lorsque vous serez prêt à publier le site sur un serveur distant, il vous faudra ajouter des
informations sur le site. Pour plus d'informations, voir « Configuration d'un dossier distant », page
64.
Configuration d'un dossier distant
Une fois configuré le dossier local pour un site Dreamweaver (voir « Configuration d'un dossier
local », page 63), il convient de configurer un dossier distant. Les 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.
64
Chapitre 3
Selon votre environnement, les fichiers destinés aux évaluations, à la collaboration, à la production, au
déploiement et à un certain nombre d'autres scénarios sont stockés dans le dossier distant. En règle
générale, votre dossier distant se trouve sur l'ordinateur à partir duquel vous exécutez votre
serveur Web.
Remarque : vous n'avez pas besoin de spécifier un dossier distant si le dossier défini comme dossier local dans la
catégorie Infos locales (voir « Configuration d'un dossier local », page 63) est le même dossier 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. Une
fois ces informations obtenues, utilisez la commande Modifier les sites pour configurer votre dossier
distant. En cas de problème, voir « Résolution des problèmes de configuration du dossier distant »,
page 66.
Une fois le dossier distant configuré, vous pouvez vous y connecter, puis rechercher et gérer les fichiers
de votre site Dreamweaver. Si vous développez un site dynamique, il vous faut définir un dossier pour
le traitement des pages dynamiques (voir « Définition du dossier de traitement des pages
dynamiques », page 140).
Pour configurer un dossier distant :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2
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 63).
3
Cliquez sur Modifier.
La boîte de dialogue Définition du site apparaît.
4
Cliquez sur l'onglet Avancé si Dreamweaver affiche l'assistant de définition d'un site.
5
Sélectionnez la catégorie Infos distantes dans la liste de gauche.
6
Choisissez une option d'accès.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
7
Cliquez sur OK.
Pour vous connecter à un dossier distant :
Dans le panneau Site, choisissez Site > Connecter ou cliquez sur le bouton Connecter à un hôte
distant dans la barre d'outils.
Remarque : si votre site utilise FTP avec un serveur SSH pour accéder à votre dossier distant, une invite de
commande s'exécute pour 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.
Pour vous déconnecter d'un dossier distant :
Dans le panneau Site, choisissez Site > Déconnecter ou cliquez sur le bouton Déconnecter de
l'hôte distant dans la barre d'outils.
Planification et configuration de votre site
65
Définition du répertoire hôte pour l'accès par FTP
Si vous choisissez d'accéder à votre dossier distant par FTP (voir « Configuration d'un dossier
distant », page 64), il vous faut en définir le répertoire hôte. Le répertoire hôte à spécifier doit
correspondre au dossier racine du dossier local. Le schéma ci-dessous représente un exemple de
dossier local à gauche et un exemple de dossier distant à droite.
non
Site local
(dossier
racine)
Assets
Répertoire de connexion
(Ne doit pas correspondre au
répertoire hôte dans ce cas)
oui
non
HTML
Public_html
(Doit correspondre au
répertoire hôte)
Assets
(Ne doit pas corresp
au répertoire hôte)
HTML
Si la structure de votre site de dossier ne correspond pas à celle de votre dossier local, les fichiers
transférés par Dreamweaver ne seront pas stockés au bon endroit et ne seront pas visibles pour les
visiteurs du site. De plus, les chemins de vos images et de vos liens sont 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.
Si vous n'êtes pas sûr de ce que vous devez taper dans le champ Répertoire de l'hôte, contactez
l'administrateur du serveur. Sinon, essayez de le laisser vierge. Sur certains serveurs, votre
répertoire d'hôte est celui dans lequel la connexion FTP est établie. Pour en être sûr, établissez une
connexion avec le serveur. Si vous voyez apparaître dans le volet Affichage distant de votre
panneau Site un dossier nommé public_html, www ou ayant votre nom d'utilisateur, il s'agit
probablement du nom à indiquer dans la zone Répertoire hôte.
Utilisation de Secure Shell pour l'accès par FTP
Lorsque vous choisissez d'accéder à votre dossier distant par FTP dans la boîte de dialogue
Définition du site, vous avez la possibilité d'utiliser la connexion sécurisée codée SSH
(Secure Shell) sous Windows. Pour activer SSH sous Windows, cliquez sur le bouton Aide dans la
boîte de dialogue.
Pour utiliser SSH sous Macintosh, téléchargez l'application SSH client pour Macintosh à partir
du site Web du centre de support de Dreamweaver à l'adresse : http://www.macromedia.com/fr/
support/.
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, et à vous permettre de les résoudre.
66
Chapitre 3
• L'implémentation FTP de Dreamweaver peut ne pas fonctionner correctement avec certains
serveurs proxy, pare-feu multi-niveaux 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.
En général, si vous avez un problème durant un transfert via FTP, examinez le journal FTP en
choisissant Afficher > Journal FTP du site dans le panneau Site (Windows) ou Site > Journal
FTP du site (Macintosh).
Modification 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 un site Dreamweaver, procédez de l'une des manières suivantes :
• Choisissez Site > Modifier les sites, sélectionnez un site, puis cliquez sur Modifier.
Planification et configuration de votre site
67
• Choisissez Site > Ouvrir le site, puis sélectionnez un site.
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.
Pour modifier un site Web local existant :
1
Ouvrez la boîte de dialogue Définition du site en procédant de l'une des façons suivantes :
• Choisissez Site > Modifier les sites, puis cliquez sur Nouveau.
• Choisissez Site > Ouvrir le site > Définir les sites.
La boîte de dialogue Définition du site affiche les options des Infos locales.
2
Complétez les options de la boîte de dialogue.
3
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.
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).
68
Chapitre 3
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.
Pour modifier un site distant existant :
1
Créez un dossier local contenant le site existant, puis définissez-le en tant que dossier racine
local du site (voir « Configuration d'un dossier local », page 63).
2
Configurez un dossier distant à partir des informations relatives à votre site existant
(voir « Configuration d'un dossier distant », page 64). Veillez à choisir le dossier racine correct
pour le site distant.
3
Cliquez sur le bouton Connecter à un hôte distant dans le panneau Site pour vous connecter
au 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 désirez retravailler le site tout entier, sélectionnez le dossier racine du site distant et
cliquez sur Acquérir pour télécharger le site complet sur votre disque dur local.
Planification et configuration de votre site
69
• Si vous désirez travailler sur un seul des fichiers ou dossiers du site, sélectionnez ce fichier ou ce
dossier dans le volet Affichage distant du panneau Site et cliquez sur Acquérir le(s) fichier(s)
pour le télécharger 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
70
Continuez comme pour créer un nouveau site : modifiez les documents, affichez-les et testezles, puis transférez-les sur le site distant.
Chapitre 3
CHAPITRE 4
Gestion du site
Le panneau Site de Macromedia Dreamweaver MX vous permet d'organiser les fichiers se trouvant
dans des dossiers locaux et distants (également appelés « sites »). Ce panneau vous permet de
reproduire la structure d'un dossier local sur un serveur distant ou celle d'un dossier distant sur votre
système local. Les liens relatifs que vous créez dans le site local continuent de fonctionner après
transfert des fichiers sur le site distant, car la structure des deux sites est identique.
Pour créer un site local dans Dreamweaver, utilisez la commande Nouveau site, qui crée un dossier
racine local pour le site, ou définissez un dossier existant en tant que dossier racine local (voir
« Configuration d'un dossier local », page 63). La définition d'un site distant s'effectue lors de la
création d'un site ou par ajout ultérieur du site à l'aide de la commande Modifier les sites (voir
« Configuration d'un dossier distant », page 64).
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. 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.
Une fois que vous avez publié le site, vous (ou tout membre de l'équipe) pouvez continuer à en
assurer la maintenance. Par ailleurs, vous devez être en mesure de dépanner le site à tout moment,
avant comme après sa publication (pour plus d'informations, voir « Test d'un site », page 493).
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
« A propos du panneau Site », page 72
« A propos de la carte du site », page 83
« Importation et exportation de sites », page 89
« Suppression d'un site de votre liste de sites », page 89
« Utilisation de l'archivage et de l'extraction », page 90
« Acquisition et placement de fichiers », page 93
71
•
•
•
•
•
•
« Synchronisation des fichiers entre le site local et le site distant », page 96
« Voilage des dossiers et des fichiers du site », page 97
« Utilisation des Design Notes », page 101
« Utilisation des rapports pour améliorer le déroulement du travail », page 105
« A propos du panneau Sitespring dans Dreamweaver », page 107
« Utilisation du panneau Sitespring », page 108
A propos du panneau Site
Le panneau Site vous permet de visualiser un site, c'est-à-dire tous les fichiers locaux, distants et du
serveur d'évaluation associés au site sélectionné. Le site local apparaît par défaut. Pour voir le site
distant ou le serveur d'évaluation, modifiez la disposition du panneau Site (voir « Modification de la
disposition du panneau Site », page 78). Développez le panneau Site afin d'obtenir un affichage à
deux volets (voir « Utilisation du panneau Site », page 73).
Remarque : sur Macintosh, le panneau Site présente toujours deux volets ; il ne se réduit pas.
Utilisez le panneau Site pour les opérations courantes de maintenance des fichiers, telles que celles
indiquées ci-dessous :
•
•
•
•
•
72
Création de documents HTML
Affichage, ouverture et déplacement de fichiers
Création de dossiers
Suppression d'éléments
Transfert de fichiers entre des sites locaux et distants ou des serveurs d'évaluation
Chapitre 4
• Conception de la navigation sur le site à l'aide d'une carte du site (voir « Configuration d'un
dossier distant », page 64 et « Utilisation de la carte du site », page 83)
Le panneau Site contient un navigateur de fichiers intégré. En dehors du site en cours, il vous
permet de parcourir le disque local et le réseau (voir « Utilisation du navigateur de fichiers intégré »,
page 82).
Utilisation du panneau Site
Le panneau Site fait partie de l'espace de travail intégré de Dreamweaver (voir « Exploration de
l'espace de travail », page 31). Vous pouvez déplacer le panneau ou l'ouvrir et le fermer à votre gré
(voir « Utilisation des fenêtres et des panneaux dans Dreamweaver », page 37). Vous avez également
la possibilité de développer le panneau pour obtenir un affichage à deux volets du site. Dans ce
mode, vous pouvez choisir d'afficher le site local ainsi que le site distant, le serveur d'évaluation ou la
carte du site (voir « Modification de la disposition du panneau Site », page 78).
Pour ouvrir ou fermer le panneau Site :
Choisissez Fenêtre > Site.
Pour développer ou réduire le panneau Site :
(Windows uniquement) Dans la barre d'outils du panneau Site, cliquez sur le bouton Développer/
Réduire.
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 se trouve en mode flottant, celui-ci reste dans ce mode
et vous pouvez continuer à travailler dans la fenêtre de document. Avant de pouvoir ancrer de nouveau le panneau,
vous devez le réduire.
Utilisez les options et boutons suivants de la barre d'outils du panneau Site pour définir ce qui doit
s'afficher dans le panneau et pour transférer des fichiers :
Vue Fichiers du site
Vue Serveur d'évaluation
Vue Carte du site
Actualiser
Menu déroulant Site
Connecter ou Déconnecter
Acquérir le(s) fichier(s)
Placer le(s) fichier(s)
Extraire le(s) fichier(s)
Archiver
Développer/Réduire
Remarque : les boutons Fichiers du site, Serveur d'évaluation et Carte du site n'apparaissent que dans le panneau
Site développé.
La vue Fichiers du site affiche la structure des fichiers présents sur les sites local et distant dans les
volets du panneau Site. (Le site apparaissant dans le volet gauche et droit dépend d'un paramètre de
préférence ; voir « Définition des préférences du panneau Site », page 75.) La vue Fichiers du site
correspond au mode d'affichage par défaut du panneau Site.
La vue Serveur d'évaluation affiche la structure des répertoires du serveur d'évaluation et du site local.
La vue Carte du site ouvre une carte graphique du site basée sur la relation entre les documents.
Maintenez ce bouton enfoncé pour choisir entre Carte seulement ou Carte et Fichiers dans le menu
contextuel.
Gestion du site
73
Le menu déroulant Site répertorie les sites que vous avez définis. Pour changer de site,
sélectionnez-en un autre dans la liste. Pour ajouter un site ou modifier les informations d'un site
existant, choisissez Modifier les sites en bas du menu (voir « Configuration d'un dossier distant »,
page 64).
Connecter ou Déconnecter (FTP, RDS, protocole WebDAV et SourceSafe) permet d'établir ou de
mettre fin à la connexion avec le site distant. Par défaut, Dreamweaver se déconnecte du site
distant après 30 minutes d'inactivité (FTP uniquement).
Pour modifier cette durée, choisissez Edition > Préférences ou Dreamweaver > Préférences
(Mac OS X), puis sélectionnez la catégorie Site dans la liste de gauche.
Actualiser met à jour les répertoires du site local et du site distant. Utilisez ce bouton pour
déclencher manuellement une mise à jour des répertoires si vous avez désactivé les options
Actualiser automatiquement la liste des fichiers locaux ou Actualiser automatiquement la liste des
fichiers distants dans la boîte de dialogue Définition du site (voir « Configuration d'un dossier
distant », page 64).
Acquérir le(s) fichier(s) copie
les fichiers sélectionnés depuis le site distant ou le serveur
d'évaluation vers le site local (en écrasant, le cas échéant, les copies locales existantes des fichiers).
Si l'option Activer l'archivage et l'extraction de fichier est activée, les copies locales sont en lecture
seule ; ces fichiers restent accessibles, sur le site distant, à d'autres membres de l'équipe qui
peuvent les extraire. Si l'option Activer l'archivage et l'extraction de fichier est désactivée,
l'obtention d'un fichier consistera à transférer une copie accessible en lecture et écriture.
Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux
sélectionnés dans le volet actif du panneau Site. Si le volet actif est Site distant ou Serveur
d'évaluation, ce sont les fichiers sélectionnés sur le site distant ou le serveur d'évaluation qui sont
copiés ; si le volet actif est Fichiers locaux, Dreamweaver copie la version présente sur le site
distant ou le serveur d'évaluation des fichiers sélectionnés sur le site local. Pour plus
d'informations, voir « Acquisition de fichiers provenant d'un site distant ou d'un serveur
d'évaluation », page 93.
Remarque : vous pouvez acquérir des fichiers provenant du site distant et du serveur d'évaluation, mais la
fonctionnalité d'extraction et d'archivage s'applique uniquement aux fichiers distants.
Placer le(s) fichier(s)
copie les fichiers sélectionnés depuis le site local vers le site distant ou le
serveur d'évaluation.
Les fichiers que Dreamweaver copie sur le site distant ou le serveur d'évaluation sont ceux
sélectionnés dans le volet actif du panneau Site. Si le volet actif est Fichiers locaux, ce sont les
fichiers sélectionnés sur le site local qui sont copiés ; si le volet actif est Site distant ou Serveur
d'évaluation, Dreamweaver copie la version présente sur le site local des fichiers sélectionnés sur le
site distant ou le serveur d'évaluation. Pour plus d'informations, voir « Placement de fichiers sur
un site distant ou un serveur d'évaluation », page 95.
Remarque : vous pouvez placer des fichiers sur le site distant et le serveur d'évaluation, mais la fonctionnalité
d'extraction et d'archivage s'applique uniquement aux fichiers distants.
Si vous placez un fichier qui n'existe pas encore sur le site distant et que l'option Activer
l'archivage et l'extraction de fichier est activée, Dreamweaver ajoute le fichier au site distant en lui
attribuant l'état « extrait ». Si vous ne voulez pas que le fichier ajouté soit doté de cet état, cliquez
sur le bouton Archiver.
74
Chapitre 4
Extraire fichier(s) transfère une copie du fichier du serveur distant vers le site local (en écrasant la
copie locale de ce fichier, le cas échéant) et donne au fichier l'état « extrait » sur le serveur. Ce
bouton n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est désactivée
pour le site en cours dans la boîte de dialogue Définition du site. Pour plus d'informations, voir
« Archivage et extraction de fichiers sur un site distant », page 91.
Archiver fichier(s) transfère une copie du fichier local vers le serveur distant, de manière à ce qu'il
puisse être modifié par d'autres membres de l'équipe. Le fichier local passe alors en lecture seule.
Cette option n'est pas disponible si l'option Activer l'archivage et l'extraction de fichier est
désactivée pour le site sélectionné dans la boîte de dialogue Définition du site. Pour plus
d'informations, voir « Archivage et extraction de fichiers sur un site distant », page 91.
Le bouton Développer/Réduire (Windows uniquement) développe ou réduit le panneau Site afin
d'afficher un ou deux volets.
Définition des préférences du panneau Site
Vous pouvez contrôler les fonctions de transfert de fichiers du panneau Site depuis la boîte de
dialogue Préférences.
Pour modifier les préférences du panneau Site :
1
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X).
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.
Gestion du site
75
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.
Vous pouvez définir si les types de fichiers transférés doivent être transférés 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 « Bienvenue dans Dreamweaver », page 15.
Modification des colonnes d'affichage des fichiers
Vous pouvez personnaliser les colonnes affichées dans les listes des vues Fichiers locaux et Site
distant du panneau Site. Vous pouvez effectuer les opérations suivantes :
•
•
•
•
•
Réorganiser les colonnes
Ajouter des colonnes (jusqu'à 10 colonnes maximum)
Supprimer des colonnes
Masquer des colonnes
Définir les colonnes devant être partagées entre tous les utilisateurs connectés à un site
Les colonnes par défaut sont Nom, Notes, Taille, Type, Modifié et Extrait par. Pour effectuer un
tri en fonction d'une colonne, cliquez sur le titre de la colonne dans le panneau Site. Si vous
cliquez plusieurs fois sur un même titre de colonne, l'ordre dans lequel Dreamweaver trie la
colonne est inversé (ordre croissant ou décroissant).
Remarque : les colonnes par défaut ne peuvent pas être supprimées, renommées ni associées à une Design Note.
Vous pouvez en revanche modifier l'ordre et l'alignement de ces colonnes, ou encore les masquer (à l'exception de
la colonne Nom).
Pour ajouter, supprimer ou modifier des colonnes :
1
Dans le panneau Site, procédez de l'une des manières suivantes pour accéder aux options
Colonnes en mode Fichier :
• Choisissez Afficher > Colonnes en mode Fichier (Windows) ou Site > Affichage des fichiers
du site > Colonnes en mode Fichier (Macintosh).
76
Chapitre 4
• Choisissez Site > Modifier les sites, sélectionnez un site, puis cliquez sur Modifier.
Sélectionnez la catégorie Colonnes en mode Fichier dans la liste de gauche de la boîte de
dialogue Définition du site.
La boîte de dialogue Définition du site affiche les options Colonnes en mode Fichier.
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.
Rubrique connexe
« Modification de la disposition du panneau Site », page 78
Gestion du site
77
Ouverture et affichage des sites dans le panneau Site
Dans sa forme réduite, le panneau Site affiche le contenu du site local, du site distant ou du
serveur d'évaluation sous la forme d'une liste de fichiers. Lorsqu'il est développé, il affiche le site
local ainsi que le site distant ou le serveur d'évaluation dans deux volets. La forme développée du
panneau Site peut également afficher une carte visuelle du site local.
Remarque : avant de pouvoir afficher un site distant ou un serveur d'évaluation, vous devez le configurer (voir
« Configuration d'un dossier distant », page 64 ou « Définition du dossier de traitement des pages dynamiques »,
page 140). Avant de pouvoir afficher une carte du site, vous devez avoir configuré une page d'accueil (voir
« Utilisation de la carte du site », page 83).
Pour ouvrir un site Dreamweaver existant :
Dans le menu déroulant Site (menu où le nom du site en cours est affiché) du panneau Site,
sélectionnez un site.
Remarque : pour définir un site Dreamweaver, voir « Configuration d'un site Dreamweaver », page 62.
Pour sélectionner un autre site à afficher lorsque le panneau Site est réduit (Windows
uniquement) :
Dans le panneau Site, sélectionnez Affichage local, Affichage distant ou Serveur d'évaluation
dans le menu déroulant qui indique le type d'affichage en cours.
Remarque : l'option Affichage local apparaît par défaut dans le menu déroulant.
Pour sélectionner un autre site à afficher lorsque le panneau Site est développé :
Dans la barre d'outils du panneau Site, cliquez sur le bouton Fichiers du site (pour le site distant),
Serveur d'évaluation ou Carte du site.
Serveur d'évaluation
Plan du site
Fichiers du site
Remarque : 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 « Utilisation de la carte du site »,
page 83.
Modification de la disposition du panneau Site
Lorsque le panneau Site présente deux volets, le site local apparaît par défaut dans le volet droit.
Le site distant, le serveur d'évaluation ou la carte du site apparaît par défaut dans le volet gauche.
Vous pouvez inverser cet affichage.
Pour modifier la disposition du panneau Site :
1
(Windows uniquement) Dans le panneau Site, cliquez sur le bouton Développer/Réduire afin
de développer le panneau s'il est affiché en mode réduit.
2
Choisissez Edition > Préférences ou Dreamweaver > Préférences Mac OS X.
La boîte de dialogue Préférences s'affiche.
78
Chapitre 4
3
Sélectionnez la catégorie Site dans la liste de gauche.
Les options des préférences Site s'affichent.
4
Choisissez Fichiers locaux ou Fichiers distants dans le menu déroulant Toujours afficher.
5
Indiquez si les fichiers sélectionnés dans le menu Toujours afficher doivent apparaître dans le
volet gauche ou droit du panneau Site développé en sélectionnant l'option correspondante.
6
Cliquez sur OK.
Pour modifier la taille de la zone d'affichage :
Dans le panneau Site développé, procédez de l'une des manières suivantes :
• 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 Site pour faire
défiler le contenu des volets.
• Dans la carte du site, faites glisser la flèche au-dessus d'un fichier pour modifier l'espace entre
les fichiers.
Rubrique connexe
« Modification des colonnes d'affichage des fichiers », page 76
Gestion du site
79
Utilisation des fichiers dans le panneau Site
Utilisez le panneau Site pour afficher les sites sous forme de listes de fichiers, ouvrir des fichiers,
les renommer, ajouter des dossiers ou des fichiers à un site ou pour actualiser l'affichage d'un site
après une modification.
Le panneau Site vous permet également d'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 96.
Pour ouvrir un fichier depuis le panneau Site, 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.
• Choisissez Fichier > Ouvrir (Windows) ou Site > Ouvrir (Macintosh).
Pour ajouter un fichier ou un dossier à un site :
1
Sélectionnez un fichier ou un dossier dans le panneau Site.
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
S'il s'agit d'un nouveau dossier, choisissez Fichier > Nouveau dossier dans le panneau Site
(Windows) ou Site > Affichage des fichiers du site > Nouveau dossier (Macintosh).
S'il s'agit d'un nouveau fichier, choisissez Fichier > Nouveau fichier dans le panneau Site
(Windows) ou Site > Affichage des fichiers du site > Nouveau fichier (Macintosh).
Remarque : vous pouvez également choisir Nouveau fichier ou Nouveau dossier dans le menu contextuel
du panneau Site.
3
Saisissez le nom du nouveau fichier ou dossier.
4
Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Pour renommer un fichier ou un dossier dans un site :
1
Dans le panneau Site, 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 :
• Choisissez Fichier > Renommer (Windows) ou Site > Renommer (Macintosh).
• 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 choisissez Renommer.
3
Tapez le nouveau nom.
4
Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
Pour actualiser le contenu du panneau Site, procédez de l'une des manières suivantes :
• Choisissez Afficher > Actualiser (Windows) ou Site > Affichage des fichiers du site >
Actualiser (Macintosh).
• Cliquez sur le bouton Actualiser du panneau Site (cela actualise le contenu des deux volets).
80
Chapitre 4
Remarque : Dreamweaver actualise automatiquement le contenu du panneau Site lorsque vous effectuez des
modifications dans une autre application, puis revenez à Dreamweaver.
Pour localiser et sélectionner des fichiers extraits :
Dans le panneau Site, choisissez Modifier > Sélectionner les fichiers extraits (Windows) ou
Site > Affichage des fichiers du site > Sélectionner les fichiers extraits (Macintosh).
Pour localiser et sélectionner des fichiers qui sont plus récents sur le site local que sur le site
distant :
Dans le panneau Site, choisissez Modifier > Sélectionner locaux plus récent (Windows) ou Site >
Affichage des fichiers du site > Sélectionner locaux plus récent (Macintosh).
Pour localiser et sélectionner des fichiers qui sont plus récents sur le site distant que sur le site
local :
Dans le panneau Site, choisissez Modifier > Sélectionner distants plus récent (Windows) ou
Site > Affichage des fichiers du site > Sélectionner distants plus récent (Macintosh).
Recherche de fichiers dans le panneau Site
Vous pouvez rechercher un fichier sur les sites local et distant depuis le panneau Site. Pour plus
d'informations sur la recherche et le remplacement de texte dans des fichiers, voir « Recherche et
remplacement de texte », page 308.
Pour retrouver un fichier dans votre site local :
1
Ouvrez le fichier directement depuis le site distant ou sélectionnez-le dans l'affichage du site
distant du panneau Site.
2
Procédez de l'une des manières suivantes :
• Si vous avez ouvert le fichier dans la fenêtre de document, choisissez Site > Repérer dans le
site.
• Si vous avez sélectionné le fichier dans le panneau Site, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Retrouver
sur le site local.
Dreamweaver met le fichier en surbrillance dans l'affichage du site local du panneau Site.
Pour retrouver un fichier dans votre site distant :
1
Ouvrez le fichier directement depuis le site local ou sélectionnez-le dans l'affichage du site local
du panneau Site.
2
Procédez de l'une des manières suivantes :
• Si vous avez ouvert le fichier dans la fenêtre de document, choisissez Site > Repérer dans le
site.
• Si vous avez sélectionné le fichier dans le panneau Site, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Retrouver
sur le site distant.
Dreamweaver met le fichier en surbrillance dans l'affichage du site distant du panneau Site.
Gestion du site
81
Remarque : si vous choisissez Site > Repérer dans le site à partir de la fenêtre de document et que le fichier ne fait
pas partie du site ouvert, Dreamweaver tente de déterminer le site auquel ce fichier appartient parmi les sites définis
localement ; si ce fichier n'appartient qu'à un seul site local, Dreamweaver ouvre ce site puis recherche le fichier.
Utilisation du navigateur de fichiers intégré
Le navigateur de fichiers intégré du panneau Site vous permet d'accéder à votre bureau et au
réseau local, y compris aux autres sites définis et aux fichiers qui ne sont associés à aucun site.
Utilisez le navigateur de fichiers intégré pour effectuer les opérations suivantes sur des fichiers ne
se trouvant pas dans le site en cours :
•
•
•
•
•
•
Faire glisser des fichiers
Supprimer des fichiers
Renommer des fichiers
Parcourir le réseau
Ouvrir des fichiers dans Dreamweaver ou dans d'autres applications
Effectuer des opérations sur un site, telles que le transfert de fichiers
Remarque : ces opérations s'effectuent de la même façon que les opérations sur les fichiers d'un site défini (voir « A
propos du panneau Site », page 72). La meilleure façon de gérer des fichiers est de créer un site Dreamweaver (voir
« Configuration d'un site Dreamweaver », page 62).
Lorsque vous faites glisser un fichier d'un site à un autre site ou à un dossier non associé à un site,
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 déplace le fichier depuis son
emplacement initial vers l'emplacement où vous le déposez.
Lorsque vous faites glisser vers un site un fichier qui n'est associé à aucun site, Dreamweaver copie
le fichier à l'emplacement où vous le déposez. Lorsque vous faites glisser un fichier qui n'est
associé à aucun site vers un dossier qui n'est pas non plus associé à un site, Dreamweaver déplace
le fichier à l'emplacement où vous le déposez.
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.
Afin de vous aider à les identifier, les dossiers associés à un site apparaissent dans une couleur
différente de ceux n'appartenant pas à un site dans le navigateur de fichiers. Si vous essayez
d'effectuer une opération disponible uniquement pour les sites sur un dossier ou un fichier qui
n'est associé à aucun site, Dreamweaver vous demande de définir un site Dreamweaver avant
d'effectuer l'opération.
Pour utiliser le navigateur de fichiers intégré :
Dans l'arborescence de fichiers du panneau Site, cliquez sur le signe plus (+) situé en regard du
dossier Bureau (Windows) ou sur la flèche d'agrandissement située en regard du dossier
Ordinateur (Macintosh)
82
Chapitre 4
A propos de la carte du site
Utilisez la carte du site pour qu'un dossier local du site Dreamweaver s'affiche sous la forme d'une
carte visuelle d'icônes reliées, pour ajouter des fichiers à un site Dreamweaver ou pour ajouter,
modifier ou supprimer des liens. 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 Modifier les sites pour
définir le site en tant que site local. Pour plus d'informations, voir « Configuration d'un dossier local », page 63.
Utilisation de la carte du 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 de votre site :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2
Cliquez sur Modifier pour ouvrir un site existant.
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
Cliquez sur l'icône de dossier pour sélectionner la page d'accueil du site ou tapez le chemin de
ce fichier dans la zone Page d'accueil.
5
Cliquez sur OK.
Gestion du site
83
Pour afficher une carte du site :
1
(Windows uniquement) Dans le panneau Site, cliquez sur le bouton Développer/Réduire afin
de développer le panneau s'il est affiché en mode réduit.
2
Choisissez Site > Carte du site ou cliquez sur le bouton Carte du site, puis choisissez 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 vous n'avez pas défini de page d'accueil ou que Dreamweaver ne trouve pas dans le site en cours
une page index.html ou index.htm à utiliser comme page d'accueil, une boîte de dialogue s'ouvre et vous invite à
sélectionner une page d'accueil en cliquant sur Modifier les sites. Sélectionnez un site, cliquez sur Modifier, puis
sélectionnez la catégorie Mise en forme de la carte du site dans la liste de gauche de la boîte de dialogue
Définition du site.
Le panneau Site affiche soit une carte du site en cours simple, soit une carte du site en cours
accompagnée de la structure des fichiers locaux.
Affichage de la carte du site
La carte du site affiche les fichiers HTML et les autres pages sous la forme d'icônes. Elle affiche les
liens dans l'ordre où ils se trouvent dans le code source HTML, selon le principe suivant :
• 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 d'adresse électronique ou de script).
• Une coche de couleur verte indique un fichier extrait par vous.
• 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).
Par défaut, la carte du site affiche la structure du site, avec une profondeur de deux niveaux, en
commençant par la page d'accueil. Cliquez sur les signes plus (+) et moins (-) en regard d'une
page pour afficher ou masquer les pages liées sous le second niveau.
Par défaut, la carte du site n'affiche ni les fichiers masqués, ni les fichiers dépendants. Les fichiers
masqués sont des fichiers HTML marqués comme tels. Les fichiers dépendants sont des éléments
de contenu non HTML, tels que des images, des modèles, des fichiers Macromedia Shockwave
ou Macromedia Flash. Pour plus d'informations, voir « Affichage et masquage des fichiers de la
carte du site », page 87.
84
Chapitre 4
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 spécifier la 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 > Modifier les sites, puis cliquez sur Modifier. Sélectionnez la catégorie Mise
en forme de la carte du site dans la liste de gauche.
• Dans le panneau Site, choisissez Site > Mise en forme (Windows) ou Site > Affichage de la
carte du site > Lier au nouveau fichier (Macintosh).
La boîte de dialogue Définition du site affiche les options Mise en forme de la carte du site.
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 pour fermer la boîte de dialogue Définition du site.
4
Cliquez sur Terminé pour fermer la boîte de dialogue Modifier les sites, le cas échéant.
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.
Gestion du site
85
• 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.
• Sélectionnez le fichier, puis choisissez Fichier > Ouvrir (Windows) ou Site > Ouvrir
(Macintosh).
Pour ajouter un fichier existant au site, procédez de l'une des manières suivantes :
• Faites glisser un 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.
• Choisissez Site > Lier au fichier existant (Windows) ou Site > Affichage de la carte du site >
Lier au fichier existant (Macintosh), puis recherchez le fichier.
Pour créer un fichier et ajouter un lien à la carte du site :
1
Sélectionnez un fichier HTML dans la carte du site, puis procédez de l'une des manières
suivantes :
• Choisissez Site > Lier au nouveau fichier (Windows) ou Site > Affichage de la carte du site >
Lier au nouveau fichier (Macintosh).
• Cliquez sur Lier au nouveau fichier dans le menu contextuel.
La boîte de dialogue Lier au nouveau fichier s'affiche.
2
Saisissez le nom, le titre et le texte du lien.
3
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 87).
Pour modifier le titre d'une page de la carte du site :
1
Assurez-vous que l'option Afficher les titres de page est bien sélectionnée. Pour ce faire, dans le
panneau Site, choisissez Afficher > Afficher les titres de page (Windows) ou Site > Affichage
de la carte du site > Afficher les titres de page (Macintosh).
2
Sélectionnez une page, puis procédez de l'une des manières suivantes :
• Cliquez sur le titre. Lorsque le titre devient modifiable, saisissez un nouveau titre.
86
Chapitre 4
• Choisissez Fichier > Renommer (Windows) ou Site > Renommer (Macintosh).
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 Site, 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 du site local du panneau Site, 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 l'affichage du site local du panneau Site, cliquez sur le fichier à utiliser comme nouvelle
page d'accueil, puis choisissez Site > Définir comme page d'accueil (Windows) ou Site >
Affichage de la carte du site > Définir comme page d'accueil (Macintosh).
• Sélectionnez un fichier dans la carte du site, puis choisissez Site > Nouvelle page d'accueil
(Windows) ou Site > Affichage de la carte du site > Nouvelle page d'accueil (Macintosh).
• Choisissez Site > Modifier les sites, 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
Choisissez Afficher > Actualiser (Windows) ou Site > Affichage de la carte du site > Actualiser
local (Macintosh).
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.
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 italiques.
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
Choisissez Afficher > Afficher/Masquer le lien (Windows) ou Site > Affichage de la carte du
site > Afficher/Masquer le lien (Macintosh).
Pour afficher ou masquer des fichiers marqués comme étant masqués dans la carte du site,
procédez de l'une des manières suivantes :
• Choisissez Afficher > Afficher les fichiers identifiés comme masqués (Windows) ou Site >
Affichage de la carte du site > Afficher les fichiers identifiés comme masqués (Macintosh).
Gestion du site
87
• Choisissez Afficher > Mise en forme (Windows) ou Site > Affichage de la carte du site > Mise
en forme (Macintosh) pour ouvrir la boîte de dialogue Définition du site, puis activez l'option
Afficher les fichiers identifiés comme masqués.
Pour afficher les fichiers dépendants dans la carte du site, procédez de l'une des manières
suivantes :
• Choisissez Afficher > Afficher les fichiers dépendants (Windows) ou Site > Affichage de la
carte du site > Afficher les fichiers dépendants (Macintosh).
• Choisissez Afficher > Mise en forme (Windows) ou Site > Affichage de la carte du site > Mise
en forme (Macintosh) pour ouvrir la boîte de dialogue Définition du site, puis sélectionnez
l'option Afficher les fichiers dépendants.
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
Choisissez Afficher > Afficher les fichiers identifiés comme masqués (Windows) ou Site >
Affichage de la carte du site > Afficher les fichiers identifiés comme masqués (Macintosh).
3
Choisissez Afficher > Afficher/Masquer le lien (Windows) ou Site > Affichage de la carte du
site > Afficher/Masquer le lien (Macintosh).
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 :
Sélectionnez la page à afficher, puis choisissez Afficher > Afficher comme racine (Windows) ou
Site > Affichage de la carte du site > Afficher comme racine (Macintosh).
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.
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 la carte du site, procédez de l'une des manières suivantes :
• Sous Windows, choisissez Fichier > Enregistrer la carte du site. Dans la boîte de dialogue
Enregistrer la carte du site, tapez un nom de fichier dans la zone Nom du fichier. Dans le menu
local Types de fichiers, choisissez .bmp ou .png.
88
Chapitre 4
• Sur Macintosh, choisissez Site > Affichage de la carte du site > Enregistrer la carte du site >
Enregistrer la carte du site en PICT ou Site > Affichage de la carte du site > Enregistrer la
carte du site > Enregistrer la carte du site en JPEG.
2
Sélectionnez l'emplacement où enregistrer le fichier, puis saisissez le nom de l'image.
3
Cliquez sur Enregistrer.
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.
Pour exporter un site :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2
Cliquez sur le bouton Exporter.
La boîte de dialogue Exporter le site s'affiche.
3
Recherchez l'emplacement où enregistrer le site.
4
Cliquez sur Enregistrer.
Dreamweaver enregistre le site en tant que fichier XML en lui attribuant l'extension STE et le
place à l'endroit indiqué.
5
Cliquez sur Terminé pour fermer la boîte de dialogue Modifier les sites.
Pour importer un site :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier 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 Modifier les sites.
5
Cliquez sur Terminé pour fermer la boîte de dialogue Modifier les sites.
Suppression d'un site 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.
Gestion du site
89
Pour retirer un site de la liste des sites :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier 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.
5
Cliquez sur Terminé pour fermer la boîte de dialogue Modifier les sites.
Utilisation de l'archivage et de l'extraction
Si vous travaillez en équipe, vous avez la possibilité d'archiver et d'extraire des fichiers sur les
serveurs local et 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 », page 93).
L'extraction d'un fichier équivaut à déclarer : « Je suis en train de travailler sur ce fichier ; n'y
touchez pas ! » Lorsqu'un fichier est extrait, Dreamweaver affiche le nom de la personne qui l'a
extrait dans le panneau Site, ainsi qu'une coche rouge (si le fichier a été extrait par un membre de
l'équipe autre que vous-même) ou verte (si vous êtes la personne à 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 Site 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.
Pour activer ou désactiver les options d'archivage et d'extraction pour certains sites, voir
« Configuration du système d'archivage et d'extraction de fichiers », page 90. Pour plus
d'informations sur le transfert de fichiers entre les sites locaux et distants sans archivage ni
extraction, voir « Acquisition de fichiers provenant d'un site distant ou d'un serveur
d'évaluation », page 93 et « Placement de fichiers sur un site distant ou un serveur d'évaluation »,
page 95.
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.
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 64).
90
Chapitre 4
Pour configurer le système d'archivage et d'extraction de fichiers :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site apparaît.
3
Cliquez sur la catégorie Infos distantes dans la liste de gauche.
La boîte de dialogue Définition du site affiche les options des Infos distantes. La section
Archiver/Extraire apparaît dans le 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 64).
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.
Archivage et extraction de fichiers sur un site distant
Utilisez le panneau Site ou la fenêtre de document pour archiver et extraire des fichiers sur un
serveur distant.
Gestion du site
91
Le système d'archivage et d'extraction de Dreamweaver utilise les symboles suivants dans le
panneau Site :
• Une coche de couleur verte indique que vous disposez du fichier extrait.
• 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).
Si vous extrayez un fichier et décidez ensuite de ne pas le modifier (ou d'annuler les modifications
que vous avez apportées), vous pouvez annuler l'extraction.
Pour extraire des fichiers provenant d'un serveur distant à partir du panneau Site :
1
Sélectionnez un site dans le menu déroulant Site.
2
Sélectionnez les fichiers à extraire.
Remarque : vous pouvez sélectionner des fichiers depuis l'affichage du site local ou distant.
3
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 Site.
• 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.
4
Lorsque le message d'invite apparaît, 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 pour signaler que vous
l'avez extrait.
Pour archiver des fichiers dans un serveur distant à partir du panneau Site :
1
Sélectionnez un site dans le menu déroulant Site.
2
Sélectionnez les fichiers extraits ou nouveaux de votre choix.
Remarque : vous pouvez sélectionner des fichiers depuis l'affichage du site local ou distant.
3
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 Site.
• 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.
4
Lorsque le message d'invite apparaît, 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 pour indiquer qu'il n'est accessible qu'en
lecture seule à présent.
92
Chapitre 4
Pour archiver ou extraire un fichier ouvert depuis la fenêtre de document, 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 vous choisissez Site > Archiver ou Site > Extraire et que le fichier sélectionné ne fait pas partie
du site ouvert actuellement, Dreamweaver tente de déterminer le site auquel ce fichier appartient parmi les sites
définis localement. 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 Site », page 75).
Pour annuler une extraction de fichier :
1
Sélectionnez le fichier.
2
Procédez de l'une des manières suivantes pour annuler l'extraction :
• Choisissez Site > Annuler l'extraction.
• Dans le panneau Site, cliquez sur le fichier avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Annuler l'extraction dans le
menu contextuel.
La copie locale du fichier passe alors en lecture seule, et toutes les modifications que vous y avez
apportées sont perdues.
Acquisition et placement de fichiers
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 « Utilisation de
l'archivage et de l'extraction », page 90). 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.
Remarque : si vous choisissez Site > Acquérir ou Site > Placer à partir de la fenêtre de document et que le fichier
en cours ne fait pas partie du site ouvert actuellement, Dreamweaver tente de déterminer le site auquel ce fichier
appartient parmi les sites définis localement ; si ce fichier n'appartient qu'à un seul site local, Dreamweaver ouvre ce
site, puis effectue l'opération d'acquisition ou de placement.
Acquisition de fichiers provenant d'un site distant ou d'un serveur d'évaluation
La commande Acquérir copie les fichiers du site distant ou du serveur d'évaluation sur le site
local, en procédant comme suit :
• Si vous utilisez le système d'archivage et d'extraction (c'est-à-dire, si l'option Activer l'archivage
et l'extraction de fichier est activée), l'acquisition d'un fichier vous permet d'obtenir une copie
locale du fichier accessible en lecture seule ; le fichier reste disponible sur le site distant ou le
serveur d'évaluation pour que d'autres membres de l'équipe puissent l'extraire (voir
« Utilisation de l'archivage et de l'extraction », page 90).
• Si vous n'utilisez pas le système d'archivage et d'extraction (c'est-à-dire, si l'option Activer
l'archivage et l'extraction de fichier n'est pas activée), l'acquisition d'un fichier consiste à
transférer une copie accessible en lecture/écriture.
Gestion du site
93
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.
Vous pouvez acquérir des fichiers en les sélectionnant soit dans l'affichage du site local, soit dans
l'affichage du site distant du panneau Site. Si la vue Site distant est active, Dreamweaver copie les
fichiers distants sélectionnés sur le site local ; si la vue Site local est active, Dreamweaver copie sur
le site local la version distante des fichiers locaux sélectionnés.
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 96).
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 FTP du site peut vous aider à déterminer le
problème.
Pour afficher le journal FTP :
Choisissez Afficher > Journal FTP du site.
Pour acquérir des fichiers se trouvant sur un site distant ou un serveur d'évaluation :
1
Dans le menu déroulant Site du panneau Site, sélectionnez un site.
2
Si vous utilisez le protocole FTP pour transférer les fichiers, cliquez sur le bouton Connecter
pour établir une connexion avec le serveur distant.
Si une connexion est déjà établie (ce qui est indiqué par la présence du bouton Déconnecter),
ignorez cette étape.
Si les fichiers distants sont affichés dans le volet Site distant du fait d'une connexion antérieure,
il n'est pas nécessaire de cliquer sur Connecter ; lorsque vous cliquez sur Acquérir,
Dreamweaver se connecte automatiquement.
3
Sélectionnez les fichiers à télécharger.
Les fichiers sont généralement sélectionnés dans la vue Site distant ou Serveur d'évaluation,
mais il est également possible de les sélectionner dans la vue Site local.
4
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 Site.
• Choisissez Acquérir dans le menu contextuel.
• Choisissez Site > Acquérir.
Remarque : si le fichier est actuellement ouvert dans une fenêtre de document, vous pouvez également choisir
Site > Acquérir à partir de la fenêtre de document.
Une boîte de dialogue s'affiche pour vous demander si vous souhaitez acquérir les fichiers
dépendants.
5
Pour télécharger également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez sur
Non.
Si vous disposez déjà de copies locales des fichiers dépendants, cliquez sur Non.
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.
94
Chapitre 4
Placement de fichiers sur un site distant ou un serveur d'évaluation
D'une manière générale, la commande Placer copie un fichier depuis le site local vers le site
distant sans changer l'état d'extraction du fichier. Il existe deux types de circonstances dans
lesquelles la commande Placer est préférable à la commande Archiver :
• Utilisez la commande Placer lorsque vous ne travaillez pas en équipe et n'utilisez pas le système
d'archivage et d'extraction.
Remarque : si vous souhaitez placer un fichier sur un serveur distant et l'archiver, utilisez la commande
Archiver (voir « Archivage et extraction de fichiers sur un site distant », page 91).
• Utilisez la commande Placer 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.
Pour ne placer que les fichiers dont la version locale est plus récente que la version distante,
utilisez la commande Synchroniser ; voir « Synchronisation des fichiers entre le site local et le site
distant », page 96.
Remarque : n'utilisez pas de caractères spéciaux (tels que é, ç ou ¥) ou de signes de ponctuation (virgules, pointsvirgules, barres obliques ou points) dans le nom des fichiers que vous avez l'intention de placer sur un site distant ou
un serveur d'évaluation. La plupart des serveurs transformeront ces caractères lors du transfert, ce qui risque de
rendre inopérants les liens vers ce fichier.
Pour placer des fichiers sur un site distant ou un serveur d'évaluation :
1
Dans le menu déroulant Site du panneau Site, sélectionnez un site.
2
Si vous utilisez le protocole FTP pour transférer les fichiers, vous pouvez cliquer sur Connecter
pour établir une connexion avec le serveur distant, ce qui vous permet de voir ce qui se trouve
sur ce site avant de transférer les fichiers.
Il n'est toutefois pas obligatoire de cliquer sur Connecter, car Dreamweaver se connecte
automatiquement lorsque vous cliquez sur Placer.
3
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.
4
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 Site.
• Choisissez Placer dans le menu contextuel.
• Choisissez Site > Placer.
Si le fichier est actuellement ouvert dans une fenêtre de document, vous pouvez aussi choisir
Site > Placer à partir de la fenêtre de document.
Gestion du site
95
5
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 le volet Site de la boîte de dialogue Préférences) pour vous permettre
de l'enregistrer avant de le placer sur le serveur distant.
Pour enregistrer le fichier, cliquez sur Oui ; pour placer la dernière version enregistrée de ce
fichier sur le serveur distant, cliquez sur Non. Si vous avez choisi de ne pas enregistrer 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.
Une boîte de dialogue s'affiche pour vous demander si vous souhaitez également placer les
fichiers dépendants.
6
Pour transférer également les fichiers dépendants, cliquez sur Oui ; pour les éviter, cliquez sur
Non.
Si le site distant contient déjà des copies des fichiers dépendants, cliquez sur Non. Pour éviter
qu'il ne vous soit proposé à l'avenir de télécharger les fichiers dépendants, activez l'option Ne
plus me demander.
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.
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 FTP du site peut vous aider à déterminer le
problème. Pour afficher le journal, choisissez Afficher > Journal FTP du site.
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. La commande Site > Synchroniser permet de
transférer les versions les plus récentes de vos fichiers, vers et depuis votre site distant.
Si votre site distant est un serveur FTP (et non un serveur en réseau), la synchronisation de vos
fichiers s'effectuera en FTP. Pour plus d'informations sur l'utilisation du protocole FTP, voir
« Configuration d'un dossier distant », page 64.
Avant de synchroniser les sites, Dreamweaver vous permet de vérifier les fichiers à placer ou à
acquérir sur le serveur distant. Par ailleurs, une fois la synchronisation effectuée, Dreamweaver
vous confirme 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 Site, choisissez Modifier > Sélectionner locaux plus récent ou
Modifier > Sélectionner distants plus récent (Windows).
• Choisissez Site > Affichage des fichiers du site > Sélectionner locaux plus récent ou Site >
Affichage des fichiers du site > Sélectionner distants plus récent (Macintosh).
Pour synchroniser vos fichiers :
1
Dans le panneau Site, sélectionnez un site dans le menu déroulant contenant la liste des sites en
cours.
2
Sélectionnez des fichiers ou des dossiers précis.
Si vous souhaitez synchroniser l'ensemble du site, ignorez cette étape.
96
Chapitre 4
3
Dans le panneau Site, procédez de l'une des manières suivantes pour effectuer la
synchronisation :
• Choisissez Site > Synchroniser.
• 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.
Voilage des dossiers et des fichiers du 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 se rappelle 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 tous les jours, vous pouvez utiliser le 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 :
•
•
•
•
Placement, acquisition, archivage et extraction
Rapports
Sélection des fichiers locaux et distants les plus récents
Opérations portant sur le site entier, telles que la vérification et la modification des liens ou la
recherche et le remplacement d'éléments
• Synchronisation
• Contenu du panneau Actifs
• Mise à jour des modèles et bibliothèques
Gestion du site
97
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.
Vous pouvez effectuer une opération sur un dossier voilé précis en le sélectionnant dans le
panneau Site, puis en effectuant l'opération voulue. Toute opération effectuée directement sur un
fichier ou un dossier annule le voilage.
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 menu déroulant Site du panneau Site, sélectionnez un site.
2
Dans le panneau Site, procédez de l'une des manières suivantes :
• Choisissez Site > Voilage pour accéder au sous-menu.
• Sélectionnez un dossier ou un fichier, cliquez avec le bouton droit de la souris (Windows) ou
en maintenant la touche Ctrl enfoncée (Macintosh) pour accéder au menu contextuel.
3
Dans le sous-menu, procédez de l'une des manières suivantes :
• Sélectionnez Activer ou Désactiver le voilage.
• Choisissez Paramètres. Dans l'onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Voilage dans la liste de gauche, activez ou désactivez l'option Activer le
voilage, puis cliquez sur OK.
Cela active ou désactive le voilage sur le site.
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 menu déroulant Site du panneau Site, sélectionnez un site pour lequel le voilage est
activé.
2
Sélectionnez les dossiers de votre choix auxquels appliquer un voile ou le supprimer.
3
Dans le panneau Site, procédez de l'une des manières suivantes :
• Choisissez Site > Voilage > Voiler ou Site > Voilage > Supprimer le voile.
• 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.
98
Chapitre 4
Une ligne rouge apparaît ou disparaît sur l'icône du dossier pour indiquer que le dossier est voilé
ou dévoilé.
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 menu déroulant Site du panneau Site, sélectionnez un site pour lequel le voilage est
activé.
2
Procédez de l'une des manières suivantes :
• Choisissez Site > Voilage > Paramètres.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Paramètres.
La boîte de dialogue Définition du site s'ouvre et affiche l'onglet Avancé.
3
Activez la case à cocher Voiler les fichiers se terminant avec.
Gestion du site
99
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.
Pour supprimer le voile de certains types de fichier au sein d'un site :
1
Dans le menu déroulant Site du panneau Site, sélectionnez un site pour lequel le voilage est
activé.
2
Procédez de l'une des manières suivantes :
• Choisissez Site > Voilage > Paramètres.
• 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.
Les lignes rouges disparaissent des fichiers concernés pour indiquer qu'ils ne sont plus voilés.
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.
Remarque : 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 98).
Pour supprimer le voile de tous les dossiers et fichiers au sein d'un site :
1
Dans le menu déroulant Site du panneau Site, sélectionnez un site pour lequel le voilage est
activé.
2
Sélectionnez un fichier ou un dossier quelconque du site.
3
Dans le panneau Site, procédez de l'une des manières suivantes :
• Choisissez Site > Voilage > Supprimer tous les voiles.
100 Chapitre 4
• 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.
Utilisation des 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. 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. Par la suite, si ce document est modifié (par vous-même ou par quelqu'un
d'autre), vous saurez que la page originale doit être mise à jour.
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é. Vous pouvez par exemple
inclure des informations sur le processus de création du document ou des notes sur la façon dont
un devis a été calculé ou dont une configuration a été élaborée ou encore sur les facteurs de
marketing qui ont influencé une décision de production.
Le panneau Site vous permet de voir les fichiers auxquels sont joints des Design Notes, car une
icône spécifique s'affiche dans la colonne Notes.
Pour des informations plus générales sur l'utilisation des Design Notes, voir « Enregistrement
d'informations sur les fichiers dans des Design Notes », page 102. Pour plus d'informations sur
l'utilisation des Design Notes avec Fireworks, voir « Utilisation des Design Notes dans Fireworks
ou Flash et Dreamweaver », page 104.
Activation et désactivation des Design Notes
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.
Pour activer ou désactiver les Design Notes sur un site ou pour ne les utiliser que localement :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2
Sélectionnez un site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site apparaît.
Gestion du site
101
3
Sélectionnez la catégorie Design Notes dans la liste de gauche.
La boîte de dialogue Définition du site affiche 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.
Enregistrement d'informations sur les fichiers dans des Design Notes
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, des films 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
Pendant que le document concerné est actif dans la fenêtre de document, choisissez Fichier >
Design Notes.
Vous pouvez également sélectionner le fichier dans le panneau Site, puis choisir Fichier >
Design Notes.
102 Chapitre 4
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 sur un site distant », page 91 ou
« Acquisition et placement de fichiers », page 93).
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 ».
Pour ajouter des Design Notes à un objet :
1
Sélectionnez l'objet.
2
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Design Notes dans le menu contextuel de l'objet.
La boîte de dialogue Design Notes s'ouvre.
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 enregistrer les notes.
Dreamweaver enregistre le fichier de Design Notes spécifique à un objet dans un dossier _notes
se trouvant dans le même répertoire que le fichier source de l'objet. Ce répertoire ne
correspond pas nécessairement au répertoire du document dans lequel apparaît l'objet.
Gestion du site 103
Pour ouvrir une Design Notes associée à un fichier, procédez de l'une des manières suivantes :
• Sélectionnez le fichier dans le panneau Site ou ouvrez le fichier, puis choisissez Fichier >
Design Notes.
• Dans la colonne Notes du panneau Site, 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 procédure ci-dessus).
2
Cliquez sur l'onglet Toutes les infos.
3
Cliquez sur le bouton + (signe 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 > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2
Sélectionnez le site, puis cliquez sur Modifier.
La boîte de dialogue Définition du site apparaît.
3
Cliquez sur la catégorie Design Notes 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.
Utilisation des Design Notes dans Fireworks ou Flash et Dreamweaver
Si vous ouvrez un fichier dans Macromedia Fireworks ou Macromedia 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.
104 Chapitre 4
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 de Design Notes du nom de
myhouse.gif.mno. Ce fichier de Design Notes contient le nom du fichier d'origine, sous la forme
d'une adresse absolue file: URL. 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. Exemple : sites/assets/orig.
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 338), ce dernier ouvre directement le fichier
d'origine pour vous permettre de le modifier.
Utilisation des rapports pour améliorer le déroulement du travail
Vous pouvez utiliser des rapports pour améliorer la collaboration entre les membres de
l'équipe Web.
Vous pouvez générer des rapports vous indiquant qui a extrait un fichier et quels fichiers sont
associés à des Design Notes. Vous pouvez peaufiner davantage les rapports sur les Design Note en
spécifiant des paramètres nom/valeur.
Pour plus d'informations sur la génération des autres types de rapports, voir « Utilisation des
rapports pour tester un site », page 501.
Remarque : vous devez avoir défini une connexion à un site distant pour exécuter des rapports sur le déroulement
du travail.
Gestion du site 105
Pour exécuter un rapport Extrait par :
1
Ouvrez un document.
2
Choisissez Site > Rapports.
La boîte de dialogue Rapports s'affiche.
3
Sélectionnez la catégorie de rapport voulue ainsi que le type de rapport à exécuter.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4
Cliquez sur le bouton Exécuter.
Suivant le sujet du rapport, vous pouvez être invité à enregistrer votre fichier, définir votre site
ou sélectionner un dossier (si ce n'est pas déjà fait).
Le rapport s'affiche dans le panneau Rapports du site (dans le groupe de panneaux Résultats).
Pour utiliser un rapport :
1
Dans le panneau Rapports du site, cliquez sur le titre de la colonne à utiliser comme base du 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 panneaux de résultats ouverts.
2
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).
3
Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant dans
la fenêtre de document.
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.
4
Cliquez sur Enregistrer le rapport.
106 Chapitre 4
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.
A propos du panneau Sitespring dans Dreamweaver
Le panneau Sitespring vous permet de visualiser toutes les tâches Sitespring directement dans
Dreamweaver. Vous pouvez également sélectionner une tâche depuis le panneau et vous connecter
à votre page Web Sitespring afin de modifier la tâche. Vous pouvez enregistrer toutes les
modifications apportées dans Sitespring, revenir à Dreamweaver, puis actualiser le panneau
Sitespring pour voir ces modifications. Le panneau Sitespring affiche les tâches ainsi que leur
priorité, leur état, leur échéance et le nom de leur projet.
Remarque : Sitespring n’est disponible qu’en anglais. Pour cette raison, les commandes de menu et les captures
d’écran de l’interface apparaissant dans cette section sont en anglais.
Configuration système requise
Pour utiliser le panneau Sitespring avec Dreamweaver, Dreamweaver MX et Sitespring doivent
être installés sur votre système ou serveur. Si vous ne disposez pas de Sitespring, vous pouvez en
télécharger une version d'essai gratuite depuis le site Web de Macromedia Sitespring. Sitespring
n'est pris en charge que par les nouveaux navigateurs compatibles Flash, comme
Netscape Communicator version 4.06 et ultérieure ou Microsoft Internet Explorer version 5 et
ultérieure.
Connexion à un serveur Sitespring
Pour utiliser le panneau Sitespring, vous devez d'abord vous connecter et ouvrir une session sur le
serveur Sitespring.
Remarque : pour plus d'informations sur l'utilisation de Macromedia Sitespring, voir la documentation Sitespring.
Pour vous connecter à un serveur Sitespring à partir de Dreamweaver :
1
Dans la fenêtre de document, choisissez Fenêtre > Autres > Sitespring ou appuyez sur la
touche F7.
La boîte de dialogue Connexion Sitespring s'affiche.
Gestion du site 107
2
Dans la zone de texte Serveur Sitespring, saisissez l'URL du serveur Sitespring avec lequel
établir la connexion. En cas de doute sur l'URL, contactez votre administrateur système.
3
Dans les champs Nom de l'utilisateur et Mot de passe, tapez vos nom d'utilisateur et mot de
passe pour le serveur Sitespring. La zone de texte Nom de l'utilisateur tient compte des
majuscules et des minuscules.
4
Si vous souhaitez enregistrer le mot de passe sur votre ordinateur, activez l'option Save
Password and Login Automatically.
Remarque : cette option vous permet seulement de fermer et de rouvrir le panneau Sitespring sans avoir à saisir
d'informations de connexion. Si vous vous déconnectez complètement de Sitespring, soit à partir de
Dreamweaver soit directement à partir de Sitespring, vous devez saisir ces informations une nouvelle fois.
5
Cliquez sur Connecter pour établir la connexion avec le serveur Sitespring.
L'état de la connexion s'affiche au-dessus de la zone Serveur Sitespring. Une fois la connexion
établie, le panneau Sitespring affiche les tâches en cours.
Si vous avez du mal à vous connecter à Sitespring, contactez votre administrateur système.
Utilisation du panneau Sitespring
Le panneau Sitespring vous permet de visualiser l'ensemble des tâches à accomplir ou uniquement
les tâches associées à un projet particulier. Vous pouvez modifier une tâche, puis actualiser la liste
des tâches pour visualiser les modifications. La zone Tâches affiche les tâches à accomplir, leur
priorité, leur état, leur échéance et le nom de leur projet.
Pour utiliser le panneau Sitespring :
1
Dans la fenêtre de document, choisissez Fenêtre > Autres > Sitespring ou appuyez sur la
touche F7.
2
Connectez-vous au serveur Sitespring, si cela n'est pas déjà fait (voir « Connexion à un serveur
Sitespring », page 107).
Le panneau Sitespring affiche les tâches en cours. Il se compose d'une zone Tâches qui affiche
les tâches ouvertes en cours, ainsi que d'un menu et d'icônes permettant d'exécuter certaines
actions. Les tâches sont triées par nom. Cliquez sur le titre d'une colonne pour les trier en
fonction de cette colonne. Le panneau Sitespring n'affiche pas les tâches dotées de l'état
Suspendu ou Terminé.
108 Chapitre 4
3
Faites votre choix parmi les options suivantes :
• Dans le menu déroulant Projet, choisissez un projet spécifique pour afficher uniquement les
tâches qui lui sont associées ou choisissez Afficher toutes les tâches pour faire apparaître la
totalité des tâches en cours.
• Cliquez sur l'icône Actualiser pour rafraîchir le panneau Sitespring et voir toutes les
modifications apportées à la tâche.
Remarque : les modifications apportées n'apparaissent dans le panneau qu'après que vous les avez
enregistrées dans Sitespring.
• Dans la colonne Nom, sélectionnez une tâche, puis cliquez sur le bouton Modifier la tâche
pour apporter des modifications à la tâche.
Pour modifier des tâches, vous devez aussi vous connecter à Sitespring via la page Web de
connexion. Si vous êtes connecté, la page Modifier la tâche associée à la tâche apparaît. Si vous
n'êtes pas encore connecté, la page Web de connexion s'affiche.
• Cliquez sur l'icône Sitespring pour atteindre directement une page Web Sitespring.
Si vous êtes déjà connecté, votre page d'accueil Sitespring s'affiche. Si vous n'êtes pas encore
connecté, la page de connexion s'affiche.
• Pour fermer le panneau Sitespring, appuyez sur la touche F7 ou cliquez sur la case de
fermeture.
Remarque : vous pouvez fermer le panneau Sitespring sans vous déconnecter complètement afin de ne pas
avoir à vous reconnecter à chaque fois.
• Cliquez sur le lien Déconnecter pour vous déconnecter de Sitespring ou pour changer
d'utilisateur.
La boîte de dialogue Connexion Sitespring s'affiche. Vous pouvez soit saisir de nouveaux nom
d'utilisateur et mot de passe pour changer d'utilisateur, soit fermer la boîte de dialogue pour vous
déconnecter (voir « Déconnexion de Sitespring dans Dreamweaver », page 109).
Déconnexion de Sitespring dans Dreamweaver
Lorsque vous cliquez sur le lien Déconnecter dans le panneau Sitespring, cela vous déconnecte
également de Sitespring dans Dreamweaver.
Gestion du site 109
Pour vous déconnecter de Sitespring :
1
Dans le panneau Sitespring, cliquez sur le lien Déconnecter.
La boîte de dialogue Connexion Sitespring s'affiche.
2
Fermez cette boîte de dialogue.
La prochaine fois que vous accéderez au panneau Sitespring, vous n'aurez pas à ressaisir l'URL
pour vous connecter (sauf si vous voulez accéder à un serveur Sitespring différent), mais vous
devrez saisir votre mot de passe.
110
Chapitre 4
CHAPITRE 5
Configuration d'un document
Macromedia Dreamweaver MX propose un environnement de travail flexible pour la conception
Web et le développement de documents. Outre les documents HTML, vous pouvez créer et
ouvrir des documents CFML, ASP, JavaScript, CSS ou texte.
La boîte de dialogue Nouveau document propose divers types de modèles à partir desquels vous
pouvez créer des documents. Cette interface, simple à utiliser, vous permet de créer un document
vide ou modèle, un document basé sur l'un de vos modèles existants ou un document ou modèle
basé sur l'une des mises en forme de page incluses dans Dreamweaver. Ces modèles et conceptions
de page vous serviront à commencer rapidement à développer des pages Web professionnelles.
D'autres options de document sont également disponibles dans la boîte de dialogue Nouveau
document. Vous pouvez sélectionner des documents texte, tels que les documents JavaScript ou
les feuilles de style en cascade (CSS), ainsi que les documents comportant des pages dynamiques,
tels que Macromedia ColdFusion, Microsoft Active Server Pages (ASP) et PHP. 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 comprend les rubriques suivantes :
•
•
•
•
•
•
« Utilisation de la boîte de dialogue Nouveau document », page 112
« Ouverture de documents existants », page 115
« Définition des propriétés du document », page 116
« Sélection d'éléments dans la fenêtre de document », page 120
« Utilisation de guides visuels durant la conception », page 121
« A propos de l'automatisation des tâches », page 124
Création de documents Dreamweaver
La boîte de dialogue Nouveau document offre divers types de documents à partir desquels vous
pouvez créer une page. Vous ouvrez la boîte de dialogue Nouveau document de Dreamweaver en
choisissant Fichier > Nouveau. Si vous préférez utiliser un type de document particulier, par
exemple les pages HTML, ColdFusion ou Active Server Pages, vous pourrez le définir comme
type de document par défaut. Le type de document par défaut sera utilisé pour ouvrir tous les
nouveaux documents sans passer par la boîte de dialogue Nouveau document.
111
Rubriques connexes
« Création d'un document vierge », page 113
« Ouverture de documents existants », page 115
« Création d'un document basé sur un modèle existant », page 115
« Création d'un document basé sur un fichier de conception Dreamweaver », page 113
Utilisation de la boîte de dialogue Nouveau document
La boîte de dialogue Nouveau document propose divers modèles pour votre nouveau document.
Vous pouvez créer un document de plusieurs façons :
• Vous pouvez commencer à partir d'un document vierge.
• Vous pouvez utiliser un modèle avec un aspect prédéfini et indiquant les éléments que vous
pouvez modifier.
Pour ouvrir la boîte de dialogue Nouveau document :
• Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document contient deux onglets : Général et Modèles.
L'onglet Général contient divers types de document pouvant être utilisés pour créer une nouvelle
page vierge. Vous pouvez sélectionner un nouveau document vierge dans les catégories Page de
base, Page dynamique et Jeu de cadres. Créez une page basée sur un type de fichier particulier tel
que CSS, JavaScript, VBScript ou texte en sélectionnant un document dans la catégorie Autres.
La catégorie Modèles vous offre un vaste choix de types de documents pour créer des modèles
vides : des modèles HTML ainsi que des modèles dans lesquels vous pouvez insérer des
comportements de serveur.
Les catégories de feuilles de style CSS, Conception de page et Conception de page (Accessibilité)
fournissent des fichiers de conception prédéfinis que vous pouvez utiliser pour créer vos propres
pages. Dans le cas de feuilles de style CSS, vous pouvez copier une feuille prédéfinie pour
l'appliquer ensuite à votre document.
En fonction du type de document sélectionné, différentes options s'affichent dans la boîte de
dialogue ; par exemple, si vous sélectionnez un document HTML vous pouvez rendre le
document compatible avec XHTML ; de même, lorsque vous sélectionnez un fichier de
conception de page, vous pouvez créer un document ou un modèle.
L'onglet Modèles contient la liste de vos sites Dreamweaver définis. Vous pouvez choisir un
modèle à partir d'un site quelconque de la liste pour créer de nouveaux documents basés sur ce
modèle.
Sélectionnez une catégorie pour afficher sa liste de types de documents disponibles. Cliquez sur
un document dans la liste pour afficher sa description, et dans le cas des catégories de conceptions
de page, feuilles de style en cascade et jeux de cadres, un aperçu du document sélectionné.
Vous pouvez utiliser l'option Préférences, située au bas de la boîte de dialogue Nouveau document
pour définir les préférences par défaut du document, telles que son type, codage et extension de
fichier. En outre, vous pouvez définir une option pour ouvrir automatiquement un nouveau
document sans passer par la boîte de dialogue Nouveau document. Pour plus d'informations sur
la définition des préférences d'un document, voir Définition des préférences d'un nouveau
document dans l'aide de Dreamweaver.
112
Chapitre 5
Cliquez sur le lien Obtenir plus de contenu dans la boîte de dialogue Nouveau document pour
passer à Dreamweaver Exchange et télécharger d'autres contenus de conception de pages.
Création d'un document vierge
Dans la boîte de dialogue Nouveau document, vous pouvez sélectionner le type de document que
vous voulez créer.
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 des préférences d'un nouveau document
dans l'aide de Dreamweaver.
Pour créer un nouveau document vierge :
1
Dans Dreamweaver, choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s'affiche. L'onglet Général est déjà sélectionné.
2
Dans la liste Catégorie, sélectionnez la catégorie de document que vous voulez créer.
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.
3
Dans la liste de documents, sélectionnez le type de page à créer, puis procédez de l'une des
manières suivantes :
• Cliquez sur Créer.
• Double-cliquez sur l'élément dans la liste de documents.
• Appuyez sur la touche Entrée.
La boîte de dialogue se ferme et le nouveau document s'affiche dans la fenêtre de document.
Création d'un document basé sur un fichier de conception Dreamweaver
Dreamweaver inclut plusieurs mises en forme 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.
Les fichiers de conception comprennent des documents et des modèles conformes aux standards
d'accessibilité, de documents de mise en forme de page basés sur des tableaux, et de feuilles de
styles en cascade (CSS). Vous pouvez prévisualiser un document et lire une brève description des
éléments de conception d'un document pour les objets des catégories de feuilles de style CSS, Jeux
de cadres, Conception de page et Conception de page (Accessibilité).
Lorsque vous créez un document basé sur un fichier de conception, Dreamweaver crée une copie
du fichier. Si le fichier de conception inclut des liens aux fichiers d'actifs (tels que des graphiques,
éléments Flash ou feuille de style CSS externe), Dreamweaver vous invite à enregistrer une copie
des fichiers dépendants lorsque vous enregistrez le document. 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).
Vous pouvez également créer un modèle basé sur un fichier de conception. Le modèle contient
des régions modifiables prédéfinies. Vous pouvez créer de nouvelles régions modifiables.
Dreamweaver vous invitera à enregistrer le fichier comme modèle pour votre site courant. Les
fichiers liés sont également copiés vers votre site.
Configuration d'un document
113
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 chaque fichier de cadre séparément. Pour
plus d'informations sur l'enregistrement de cadres, voir « Enregistrement des fichiers du cadre et du jeu de cadres »,
page 275.
Pour créer une feuille de style en cascade :
1
Ouvrez la boîte de dialogue Nouveau document en choisissant Fichier > Nouveau.
2
Dans la liste Catégorie, sélectionnez Feuilles de style CSS.
La liste de documents sur la droite est mise à jour avec une sélection de feuilles de style CSS.
3
Dans la liste de documents, sélectionnez une feuille de style pour visualiser ses propriétés et sa
description, puis procédez de l'une des manières suivantes :
• Cliquez sur Créer.
• Double-cliquez sur l'élément dans la liste de documents.
• Appuyez sur la touche Entrée.
La boîte de dialogue se ferme et un nouveau document CSS s'affiche dans la liste. La feuille de
style CSS s'ouvre en mode Code.
4
Choisissez Fichier > Enregistrer sous.
5
Dans la boîte de dialogue Enregistrer sous, recherchez l'emplacement où vous voulez
enregistrer le fichier, entrez un nom de fichier unique pour le document et cliquez sur
Enregistrer.
Pour créer un document Conception de page :
1
Ouvrez la boîte de dialogue Nouveau document en choisissant Fichier > Nouveau.
2
Dans la liste Catégorie, sélectionnez Conception de page ou Conception de page
(Accessibilité), en fonction de vos besoins de création.
3
Dans la liste des conceptions de page, sélectionnez le document sur lequel vous voulez baser la
nouvelle page.
4
Procédez de l'une des manières suivantes :
• Pour créer un document, sélectionnez le bouton radio Document.
• Pour créer un modèle, sélectionnez le bouton radio Modèle.
5
Cliquez sur Créer.
Un nouveau document s'affiche dans la fenêtre de document. Si vous créez un modèle, les
régions modifiables sont visibles et vous êtes invité à enregistrer le document comme modèle
pour votre site courant.
6
Choisissez Fichier > Enregistrer pour enregistrer le document.
Si le fichier inclut des liens aux fichiers d'actifs, la boîte de dialogue Copier les fichiers
dépendants s'affiche.
114
7
Dans la boîte de dialogue Copier les fichiers dépendants, définissez des options pour copier les
actifs vers votre site courant.
8
Cliquez sur Copier pour copier les actifs dans le dossier sélectionné et fermer la boîte de
dialogue.
Chapitre 5
Création d'un document basé sur un modèle existant
Dans la boîte de dialogue Nouveau document, vous pouvez sélectionner, prévisualiser et créer un
nouveau document à partir d'un modèle existant. Vous pouvez sélectionner un modèle à partir de
tous vos sites Dreamweaver.
Vous pouvez également créer des modèles à partir des documents de la catégorie Conception de
page de la boîte de dialogue Nouveau document. Une fois que vous enregistrez un document de
conception de page comme modèle dans votre site, vous pouvez utiliser ce modèle pour créer des
pages. Pour plus d'informations, voir « Création d'un document basé sur un fichier de conception
Dreamweaver », page 113.
Pour plus d'informations sur l'utilisation de modèles et de documents basés sur un modèle, voir
Chapitre 27, « A propos des modèles Dreamweaver », page 464.
Pour créer un document basé sur un modèle :
1
Choisissez Fichier > Nouveau pour ouvrir la boîte de dialogue Nouveau document.
2
Dans la liste Modèles de l'onglet Modèles, sélectionnez le site Dreamweaver contenant le
modèle que vous voulez utiliser.
3
La liste Site affiche les modèles du site sélectionné, s'il en existe.
4
Sélectionnez le modèle que vous voulez utiliser.
5
Désélectionnez l'option Mettre la page à jour quand le modèle est modifié si vous voulez
dissocier le nouveau document du modèle.
6
Cliquez sur Créer.
Un nouveau document est créé.
7
Enregistrez le document.
Enregistrement d'un document
Lorsque vous enregistrez un document, évitez les espaces et les caractères spéciaux pour les noms
de fichiers et de dossiers. 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
Choisissez Fichier > Enregistrer.
2
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.
Ouverture de documents existants
Dans Dreamweaver, vous pouvez ouvrir un document HTML existant ou tout type de document
dynamique, même s'il n'a pas été créé dans Dreamweaver. Vous pouvez ouvrir le document et le
modifier dans les modes de travail Création et Code de Dreamweaver.
Configuration d'un document
115
Vous pouvez également ouvrir des fichiers texte non HTML, comme des fichiers JavaScript,
XML, feuilles de style CSS ou des fichiers texte enregistrés dans des traitements de texte ou des
éditeurs de texte.
Certains fichiers, tels que les document CSS, s'ouvrent en mode Code uniquement et vous
autorisent à modifier le code du fichier. Vous pouvez mettre à jour le document pendant que vous
travaillez dans Dreamweaver, puis enregistrer les modifications dans le fichier.
Si vous souhaitez ouvrir un document Microsoft Word 97, Word 98 ou Word 2000 enregistré au
format HTML, il est préférable d'importer le document dans Dreamweaver, plutôt que de
l'ouvrir. Lorsque vous importez un fichier HTML enregistré sous Word, Dreamweaver vous invite
à nettoyer les balises superflues, insérées par Word dans les fichiers HTML. Vous pouvez utiliser la
commande Nettoyer HTML Word pour définir la couleur d'arrière-plan de la page et nettoyer le
formatage de la feuille de style CSS dans le document importé.
Pour ouvrir un fichier existant, procédez de l'une des manières suivantes :
1
Dans Dreamweaver, choisissez Fichier > Ouvrir.
2
Dans la boîte de dialogue qui s'affiche, recherchez le fichier à ouvrir.
3
Cliquez sur Ouvrir.
Le document s'ouvre dans la fenêtre de document.
Remarque : par défaut, JavaScript, texte et les feuilles de style CSS s'ouvrent en mode Code. Pour plus
d'informations sur la modification 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 338.
Pour ouvrir et importer un fichier HTML Microsoft Word :
1
Dans Dreamweaver, choisissez Fichier > Importer > HTML Word.
La boîte de dialogue Sélectionnez le fichier HTML Word à importer s'ouvre.
2
Recherchez et sélectionnez le document que vous voulez ouvrir.
3
Cliquez sur Ouvrir.
Dreamweaver ouvre le document dans une nouvelle fenêtre et la boîte de dialogue Nettoyage
du HTML Word s'affiche.
4
Choisissez les options de nettoyage à appliquer au document dans l'onglet Base ou Détaillé.
Pour plus d'informations sur les options de nettoyage, voir la rubrique Nettoyage de HTML
provenant de Microsoft Word dans l'aide de Dreamweaver.
5
Cliquez sur OK.
Dreamweaver applique les attributs de nettoyage au nouveau document et un journal affiche les
modifications.
6
Enregistrez le document.
Définition des propriétés du document
Les propriétés de base des documents HTML sont les suivantes : titre de la page, images et
couleurs d'arrière-plan, couleur de base du texte et des liens et marges. Le titre de page identifie et
nomme le document. Une image ou une couleur d'arrière-plan définit l'aspect général du
document. Les couleurs du texte et des liens aident les utilisateurs à distinguer le texte ordinaire
des liens hypertextes et à différencier les liens déjà visités de ceux qui ne l'ont pas encore été.
116
Chapitre 5
Pour plus d'informations sur la spécification des options de la boîte de dialogue Propriétés de la
page, voir la rubrique Sélection d'options de propriétés de page dans l'aide de Dreamweaver.
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 Sans titre dans la
fenêtre du navigateur, dans les signets et dans l'historique. Notez que 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 titre de votre site, utilisez la commande Site > Rapports. Voir
« Utilisation des rapports pour tester un site », page 501.
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 > Barre d'outils (si celle-ci n'est pas déjà visible).
• 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, entrez le titre de la page et appuyez sur la touche Entrée ou Retour.
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 si elle
est affichée). Le nom de fichier de la page, ainsi que 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.
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
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 la rubrique
Définition des propriétés d'arrière-plan des styles CSS dans l'aide de Dreamweaver.
3
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.
Configuration d'un document
117
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 choisir 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.
Icône des couleurs de l'inspecteur de propriétés
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 119.
• 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. Si vous cliquez sur le bureau ou sur une autre
application, Dreamweaver sélectionne la couleur de la zone sur laquelle vous avez cliqué, mais
vous pouvez, si vous le souhaitez, passer à l'autre application ; dans ce cas, poursuivez votre
travail en cliquant sur une fenêtre Dreamweaver ou maintenez le bouton de la souris enfoncé et
passez de Dreamweaver au bureau, afin d'éviter d'avoir à sortir de 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 Aligner au Web sécurisé.
Notez que 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 Aligner au Web
sécurisé, 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 courante sans avoir à en choisir une autre, cliquez sur le bouton Barré.
• 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 119.
118
Chapitre 5
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).
Les palette 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.
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 118).
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èreplan et les couleurs du texte et des liens.
La zone d'exemple affiche l'aspect qu'aura la palette de couleurs dans le navigateur.
Configuration d'un document
119
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 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
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 « A
propos des éléments invisibles », page 121).
• 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 dans lequel se trouve le marqueur de paragraphe, vous devez
sélectionner la balise <table> située à 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 > Autres > Inspecteur de code.
Pour plus d'informations sur l'Affichage de code, voir « Affichage du code », page 181.
120 Chapitre 5
Lorsque vous sélectionnez un élément dans l'un des deux éditeurs de code (l'Affichage de code ou
l'inspecteur de code), il est généralement é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 181.
A propos des éléments invisibles
Certains codes HTML ne sont pas visibles dans un navigateur, comme par exemple les balises
comment. Il est cependant utile de pouvoir sélectionner, modifier, déplacer et supprimer ces
éléments invisibles lorsque vous créez une page. 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 afficher ou masquer les icônes des éléments invisibles, choisissez Affichage > Assistances
visuelles > Eléments invisibles. L'affichage des éléments invisibles vous permet de les sélectionner
et de modifier leurs propriétés dans l'inspecteur de propriétés. Si vous les masquez, la page
s'affiche pratiquement comme dans un navigateur. Notez que l'affichage des éléments invisibles
risque de quelque peu modifier 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.
Pour indiquer les marqueurs d'élément qui doivent s'afficher lorsque vous choisissez Affichage >
Assistances visuelles > Eléments invisibles, définissez les options de préférences Eléments
invisibles. Par exemple, vous pouvez demander que les ancres nommées soient visibles, mais pas
les sauts de ligne.Pour obtenir des explications sur chacune des préférences Eléments invisibles,
voir la rubrique Définition des préférences des éléments invisibles dans l'aide de Dreamweaver.
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 Insertion (voir « Utilisation de la barre
Insertion », page 42). Vous pouvez ensuite modifier ces éléments à l'aide de l'inspecteur de
propriétés.
Utilisation de guides visuels durant la conception
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 toutes 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 38.
• Utiliser des règles comme repère visuel pour le positionnement et le redimensionnement des
calques et des tableaux.Voir « Affichage des règles », page 122.
• 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 122.
• 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. Voir « Alignement des calques sur la
grille », page 408.
Configuration d'un document
121
Affichage des règles
Vous pouvez afficher les règles sur les bords gauche et supérieur de la page, avec des graduations
en pixels, en pouces ou en centimètres.
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 sur un point de la page (cette
icône s'affiche dans le coin supérieur gauche de la fenêtre de document en mode Création,
lorsque les règles sont affichées). 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 sélectionnez Pixels, Pouces
ou Centimètres.
Utilisation du tracé de l'image
Utilisez un tracé de l'image comme guide, pour reproduire une mise en page dont la maquette a
été créée dans une application graphique. 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.
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.
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 une image, puis cliquez sur Sélectionner
(Windows) ou Choisir (Macintosh).
3
La boîte de dialogue Propriétés de la page s'affiche. 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.
Pour déplacer un tracé de l'image :
Choisissez Affichage > Tracé de l'image > Ajuster la position. Ensuite, 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.
122 Chapitre 5
• Pour déplacer l'image par incrément de cinq 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é.
Affichage et modification du contenu de l'en-tête
Les fichiers HTML comprennent deux sections principales : l'en-tête (head) et le corps (body).
Le corps body constitue la partie principale du document, la partie visible contenant le texte, les
images, etc. L'en-tête head est invisible, excepté le titre du document, qui apparaît dans les barres
de titre des fenêtres des navigateurs et de Dreamweaver. Donnez un titre à toutes vos pages.
L'en-tête head contient également d'autres informations importantes, notamment le type du
document, l'encodage de la langue, des fonctions et des variables JavaScript et VBScript, des
mots-clés et des indicateurs de contenu pour les moteurs de recherche, ainsi que des définitions de
style. Il n'est pas nécessaire d'utiliser tous ces éléments dans toutes les pages ; par exemple, vous
pouvez n'utiliser les mots-clés et les indicateurs de contenu que dans la page d'accueil. Pour
afficher les éléments de l'en-tête head, utilisez le menu Affichage, l'Affichage de code de la fenêtre
de document ou l'inspecteur de code.
Pour afficher les éléments de la section head d'un document :
Choisissez Affichage > Contenu de l'en-tête. Pour chaque élément de la section head, un
marqueur s'affiche dans le haut de la fenêtre de document en mode Création.
Remarque : si la fenêtre de document est en Affichage de code uniquement, la commande Affichage > Contenu de
l'en-tête est grisée.
Pour insérer un élément dans la section head d'un document :
1
Procédez de l'une des manières suivantes :
• Choisissez En-tête dans la barre Insertion, puis cliquez sur l'un des boutons d'objet.
• Sélectionnez un élément dans le sous-menu Insertion > Balises d'en-tête.
2
Choisissez les options applicables à l'élément dans la boîte de dialogue qui s'affiche ou dans
l'inspecteur de propriétés.
Pour modifier un élément de la section head d'un document :
1
Choisissez Affichage > Contenu de l'en-tête.
2
Cliquez sur l'une des icônes de la section head pour la sélectionner.
3
Définissez ou modifiez les propriétés de l'élément dans l'inspecteur de propriétés.
Configuration d'un document 123
Pour plus d'informations sur les propriétés de certains éléments head, voir les rubriques suivantes
dans l'aide Dreamweaver :
•
•
•
•
•
•
•
Définition des propriétés meta
Définition des propriétés de Titre
Définition des propriétés de Mots-clés
Définition des propriétés de Description
Définition des propriétés de Refresh
Définition des propriétés de Base
Définition des propriétés de Lien
A propos de l'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. Cette section explique comment utiliser le panneau Historique pour
automatiser les tâches répétitives.
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 des informations de
base sur le panneau Historique, voir « A propos du panneau Historique », page 49. En revanche,
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.
Remarque : 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.
Les actions sont relues dans l'ordre exact où vous les avez effectuées et vous ne pouvez pas les
modifier pendant leur exécution. Par exemple, si vous avez modifié en rouge la couleur d'une
cellule de tableau, l'application de cette étape dans une autre cellule de tableau la rend également
rouge ; vous ne pouvez pas spécifier une autre couleur pendant l'application de cette étape à une
nouvelle cellule.
Répétition d'étapes
Pour répéter la dernière action effectuée, utilisez la commande Edition > Répéter ou les raccourcis
clavier Ctrl+Y (Windows) ou Commande+Y (Macintosh). Le nom de cette commande change
dans le menu Edition pour refléter la dernière opération accomplie ; par exemple, si vous venez de
taper du texte, le nom de la commande sera Répéter frappe (vous ne pouvez pas utiliser la
commande Répéter juste après une opération Annuler ou Rétablir).
124 Chapitre 5
Pour répéter des actions antérieures à la dernière ou pour répéter plusieurs étapes à la fois, utilisez
le panneau Historique.Pour toutes informations de base sur le panneau Historique, voir « A
propos du panneau Historique », page 49.
Notez que lorsque vous répétez des actions, seules les actions sélectionnées (en surbrillance), et pas
nécessairement celle sur laquelle se trouve le pointeur, sont répétées.
Pour répéter une étape :
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.
Remarque : bien que vous pouvez 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 leur ordre chronologique et une nouvelle étape, libellée
« 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.
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.
Configuration d'un document 125
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.
126 Chapitre 5
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. Voir « Copie et collage d'étapes entre les documents », page 127.
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.
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.
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 128) avant de fermer le document.
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.
Si vous collez des étapes dans un éditeur de texte, en Affichage de 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 199.
Configuration d'un document 127
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.
4
Ouvrez l'autre document.
5
Placez le curseur au point désiré ou sélectionnez l'objet auquel vous voulez appliquer les étapes.
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 ».
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, particulièrement si vous voulez réutiliser ces étapes la prochaine fois que vous
démarrerez Dreamweaver. Les commandes enregistrées sont en effet conservées jusqu'à ce que
vous les effaciez, tandis que les commande mémorisées sont perdues lorsque vous quittez
Dreamweaver et les séquences d'étapes copiées sont supprimées lorsque vous copiez autre chose.
Vous pouvez modifier les noms des commandes que vous avez insérées dans le menu Commandes
et supprimer ces commandes du menu Commandes à l'aide de la fonction Commandes >
Modifier la liste des 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.
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
Choisissez la commande voulue 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.
128 Chapitre 5
Pour supprimer un nom du menu Commandes :
1
Choisissez Commandes > Modifier la liste des commandes.
2
Sélectionnez une commande.
3
Cliquez sur Effacer, puis sur Fermer.
Mémorisation de commandes
Dreamweaver peut également mémoriser de façon temporaire une commande utilisée à court
terme. Les principales différences entre cette approche et la reproduction d'étapes à partir du
panneau Historique (voir « Répétition d'étapes », page 124) sont les suivantes :
• 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.
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 cette commande à partir
du panneau Historique.
Une fois la commande mémorisée, vous pouvez l'enregistrer à l'aide du panneau Historique.
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
Contrôle+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 Contrôle+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.
Configuration d'un document 129
130 Chapitre 5
Si vous souhaitez créer une application Web dynamique,
commencez par configurer un serveur d'application puis
établissez une connexion à la base de données.
Cette partie du manuel contient les chapitres suivants :
• Chapitre 6, « Configuration d'une application Web »
• Chapitre 7, « Connexions à des bases de données pour les
développeurs ColdFusion »
• Chapitre 8, « Connexions à des bases de données pour les
développeurs ASP.NET »
• Chapitre 9, « Connexions à des bases de données pour les
développeurs ASP »
• Chapitre 10, « Connexions à des bases de données pour
les développeurs JSP »
• Chapitre 11, « Connexions à des bases de données pour
les développeurs PHP »
Partie II
Partie II
Préparation à la
création de sites
dynamiques
CHAPITRE 6
Configuration d'une application Web
Ce chapitre explique comment configurer le système pour créer des applications Web dans
Macromedia Dreamweaver MX.
Remarque : pour créer l'exemple d'application Web installé avec Dreamweaver, voir l'aide de Dreamweaver
(Aide > Utilisation de Dreamweaver).
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
« Remarque à l'attention des utilisateurs de Dreamweaver UltraDev 4 », page 133
« Eléments nécessaires à la création d'applications Web », page 134
« Configuration d'un serveur Web », page 135
« Configuration d'un serveur d'application », page 135
« Création d'un dossier racine pour l'application », page 138
« Définition d'un site Dreamweaver », page 138
« Connexion à une base de données », page 142
« Dépannage des erreurs de serveur d'application », page 142
Remarque à l'attention des utilisateurs de Dreamweaver
UltraDev 4
Si vous utilisez Macromedia Dreamweaver UltraDev 4, votre système est probablement déjà
configuré pour créer des applications Web. Si vous avez installé conjointement Dreamweaver MX et
UltraDev 4, tous vos sites UltraDev ont été automatiquement importés dans Dreamweaver. Vous
n'avez donc pas à redéfinir les sites dans Dreamweaver MX.
Toutefois, si un site importé contient des pages Macromedia ColdFusion créées à l'aide de
comportements de serveur UltraDev 4, vous devez indiquer à Dreamweaver que le site contient
des pages générées par UltraDev. En effet, Dreamweaver MX recherche des modèles de code sur la
page pour identifier et afficher les comportements de serveur dans le panneau Comportements de
serveur. Dans le cas de pages Microsoft Active Server Pages (ASP) et JavaServer Pages (JSP),
Dreamweaver MX génère le même code que UltraDev et par conséquent, reconnaît et affiche les
comportements de serveur ASP et JSP générés par UltraDev. Toutefois, dans le cas de pages
ColdFusion, Dreamweaver MX génère du code amélioré et simplifié. Comme Dreamweaver
recherche par défaut ces nouveaux modèles de code, il ne reconnaît pas les comportements de
serveur ColdFusion générés par UltraDev. Vous devez donc indiquer à Dreamweaver qu'il est
nécessaire de rechercher les modèles de code UltraDev si vous souhaitez continuer d'utiliser les
anciens comportements de serveur.
133
Pour indiquer à Dreamweaver qu'il est nécessaire de rechercher le code ColdFusion généré par
UltraDev 4 :
1
Choisissez Site > Modifier les sites, sélectionnez votre site et cliquez sur Modifier pour ouvrir
la boîte de dialogue Définition du site.
2
Si l'assistant s'affiche, cliquez sur Avancé puis sélectionnez la catégorie Serveur d'évaluation.
La boîte de dialogue Serveur d'évaluation s'affiche.
3
A partir du menu déroulant Ce site contient, choisissez l'une des options suivantes :
• Si vous souhaitez que Dreamweaver continue de générer du code UltraDev dans les nouvelles
pages, choisissez Pages UltraDev 4 uniquement.
• Si vous souhaitez que Dreamweaver commence à utiliser le code amélioré dans les nouvelles
pages, sélectionnez Les deux versions. Cette option aura pour effet de mettre progressivement
à jour le site UltraDev 4 ; à terme, le site se composera en majorité de pages générées par les
nouveaux comportements de serveur.
4
Cliquez sur OK, puis sur Terminé.
Les connexions aux bases de données seront gérées différemment si vous indiquez que le site
contient uniquement des pages UltraDev 4. Pour plus d'informations, voir « Connexion au
moyen de la connectivité UltraDev 4 », page 147.
Eléments nécessaires à la création d'applications Web
Pour créer des applications Web à l'aide de Dreamweaver, vous devez disposer des logiciels
suivants :
• un serveur Web ;
• un serveur d'application exécuté sur votre serveur Web ou un serveur Web faisant aussi
fonction de serveur d'application, tel que Microsoft PWS ou IIS.
Remarque : dans le contexte des applications Web, les termes « serveur Web » et « serveur d'application » font
référence à des logiciels et non à du matériel.
Si vous souhaitez utiliser une base de données en conjonction avec votre application, vous devez
également disposer des logiciels suivants :
• une base de données ou un système de base de données ;
• un pilote de base de données prenant en charge votre base de données.
Pour plus d'informations sur la procédure de configuration d'une base de données en vue de son
utilisation avec une application Web, voir « Connexion à une base de données », page 142.
Plusieurs sociétés d'hébergement Web vous offrent la possibilité d'utiliser leurs logiciels pour
tester et déployer des applications Web. Si vous utilisez Windows, vous pouvez installer les
logiciels nécessaires sur le même ordinateur que Dreamweaver pour les besoins du
développement. Vous pouvez également installer les logiciels sur un ordinateur en réseau
(généralement un ordinateur Windows NT ou Windows 2000) de sorte que d'autres
développeurs de votre équipe puissent intervenir sur un projet.
Si vous utilisez un Macintosh, vous pouvez avoir recours à un service d'hébergement Web ou
installer les logiciels requis sur un ordinateur distant. Si vous utilisez Mac OS 10.1, vous pouvez
développer des sites PHP en local à l'aide du serveur Web Apache et du serveur d'application PHP
fourni avec votre système d'exploitation. Pour plus d'informations sur la configuration, consultez
les sites Web suivants :
134 Chapitre 6
• http://developer.apple.com/internet/macosx/php.html
• http://www.entropy.ch/software/macosx/
• http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html
Configuration d'un serveur Web
Pour exécuter des applications Web, vous devez disposer d'un serveur Web. Un serveur Web est
un logiciel qui fournit des fichiers en réponse à des requêtes de navigateurs Web. Un serveur Web
est parfois appelé serveur HTTP. Parmi les serveurs Web les plus courants, on trouve IIS,
Netscape Enterprise Server, iPlanet Web Server et Apache HTTP Server.
Si vous n'utilisez pas de service d'hébergement Web, sélectionnez un serveur Web et installez-le
sur un ordinateur local ou distant. Pour plus d'informations, reportez-vous à la documentation de
votre fournisseur ou consultez l'administrateur système.
Si vous utilisez Windows, vous pouvez installer PWS ou IIS pour obtenir rapidement un serveur
Web fonctionnel. Il se peut que le serveur Web soit déjà installé. Parcourez votre arborescence
pour vérifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. PWS et IIS créent ces dossiers
lors de l'installation. Pour installer PWS ou IIS, voir l'aide de Dreamweaver (Aide > Utilisation
de Dreamweaver).
Les pages ASP.NET ne sont compatibles qu'avec un seul serveur Web : Microsoft IIS version 5 ou
supérieure. PWS n'est pas pris en charge. En outre, comme IIS 5 est un service des systèmes
d'exploitation Windows 2000 et Windows XP Professionnel, vous devez impérativement utiliser
l'une des ces deux versions de Windows pour exécuter des applications ASP.NET. Windows 98,
ME et NT ne sont pas pris en charge. Toutefois, vous pouvez développer (mais non exécuter) des
applications ASP.NET sur tous les types d'ordinateurs (Macintosh compris) exécutant
Dreamweaver MX.
Configuration d'un serveur d'application
Pour exécuter des applications Web, le serveur Web doit pouvoir utiliser le serveur d'application.
Un serveur d'application est un logiciel qui permet à un serveur Web de traiter des pages Web
portant une marque spécifique. Lorsqu'une page portant cette marque est demandée, le serveur
Web envoie la page au serveur d'application pour que celui-ci la traite avant qu'elle ne soit
envoyée au navigateur.
Parmi les serveurs d'application les plus courants, on trouve Macromedia ColdFusion MX,
Macromedia JRun, la plate-forme Microsoft .NET, PHP, IBM WebSphere et Jakarta Tomcat. Les
serveurs Web IIS et PWS font également office de serveurs d'application ASP. Généralement, le
serveur d'application est installé sur le système exécutant le serveur Web.
Cette section contient les rubriques suivantes :
•
•
•
•
•
•
« Choix d'un serveur d'application », page 136
« Installation d'un serveur d'application ColdFusion », page 136
« Installation d'un serveur d'application ASP.NET », page 136
« Installation d'un serveur d'application ASP », page 137
« Installation d'un serveur d'application JSP », page 137
« Installation d'un serveur d'application PHP », page 138
Configuration d'une application Web 135
Choix d'un serveur d'application
Le choix d'un serveur d'application dépend de plusieurs critères : votre budget, la technologie de
serveur que vous souhaitez utiliser (ColdFusion, ASP.NET, ASP, JSP ou PHP) et le serveur Web
que vous avez sélectionné.
Budget : certains fournisseurs proposent des applications haut de gamme dont le prix d'achat et
les coûts de fonctionnement sont très élevés. D'autres vendeurs offrent des solutions plus simples
et plus rentables (c'est le cas notamment des serveurs Macromedia ColdFusion et JRun). Certains
serveurs d'application font office de serveurs Web (notamment Microsoft IIS et PWS) et d'autres
peuvent être téléchargés gratuitement sur Internet (notamment Jakarta Tomcat et PHP).
Technologie de serveur : les serveurs d'application utilisent différentes technologies.
Dreamweaver prend en charge cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP et
PHP. Pour plus d'informations, voir l'aide de Dreamweaver (Aide > Utilisation de
Dreamweaver). Le tableau suivant indique les serveurs d'application courants axés sur l'une des
cinq technologies de serveur prises en charge par Dreamweaver :
Technologie de serveur
Serveur d'application
ColdFusion
Macromedia ColdFusion MX
ASP.NET
Microsoft IIS 5 avec plate-forme .NET
ASP
Microsoft IIS ou PWS
Sun Chili!Soft ASP
JSP
Macromedia JRun
IBM WebSphere
Apache Tomcat
BEA WebLogic
PHP
Serveur PHP
Serveur Web : vous pouvez également choisir votre serveur d'application en fonction du serveur
Web que vous souhaitez utiliser. Vérifiez que l'application est compatible avec le serveur Web. Par
exemple, la plate-forme .NET est compatible uniquement avec IIS version 5 ou supérieure.
Installation d'un serveur d'application ColdFusion
Pour exécuter des pages ColdFusion, vous devez disposer du serveur d'application ColdFusion. Il
existe une version de ce serveur pour les systèmes Windows, Linux, Solaris et HP-UX.
Vous pouvez accéder au site Web de Macromedia, à l'adresse http://www.macromedia.com/fr/
software/coldfusion/, pour télécharger et installer la version complète de ColdFusion MX édition
développeur. Un exemplaire du serveur ColdFusion MX édition développeur est également
disponible sur le CD de Dreamweaver (version Windows uniquement).
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hébergement Web offrant une
solution ColdFusion ou bien installer ColdFusion sur un ordinateur Windows, Linux, Solaris ou
HP-UX distant exécutant un serveur Web.
Après avoir installé le serveur d'application, vous devez créer un dossier racine pour votre
application Web. Voir « Création d'un dossier racine pour l'application », page 138.
Installation d'un serveur d'application ASP.NET
Pour développer des pages ASP.NET, vous devez disposer des éléments suivants :
136 Chapitre 6
• un ordinateur Windows 2000 ou Windows XP Professionnel exécutant IIS version 5 ou
ultérieure ;
• la plate-forme Microsoft .NET, que vous pouvez télécharger à partir du site Web Microsoft.
Téléchargez la plate-forme .NET à partir du site Web Microsoft, à l'adresse http://asp.net/
download.aspx, et suivez les instructions d'installation fournies sur le site.
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hébergement Web offrant une
solution ASP.NET ou bien installer la plate-forme .NET sur un ordinateur Windows 2000 ou
Windows XP Professionnel distant exécutant IIS version 5 ou ultérieure.
Après avoir installé la plate-forme .NET, vous devez créer un dossier racine pour votre application
Web. Voir « Création d'un dossier racine pour l'application », page 138.
Installation d'un serveur d'application ASP
Pour développer des pages ASP, vous devez disposer d'un serveur d'application compatible avec
Active Server Pages (ASP) 2.0 de Microsoft. Voici quelques choix parmi les plus courants :
• Microsoft IIS, fourni avec Windows NT Server, Windows 2000 et Windows XP
Professionnel ;
• Microsoft PWS, version réduite de IIS fonctionnant sous Windows 98 et NT Workstation ;
• Sun Chili!Soft ASP, dont il existe une version pour Windows, Linux, Solaris et d'autres platesformes. Pour plus d'informations, voir le site Web Chili!Soft, à l'adresse http://
www.chilisoft.com/chiliasp/default.asp.
Les utilisateurs de Windows peuvent installer et exécuter IIS ou PWS sur leur ordinateur local.
Pour obtenir des instructions, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hébergement Web offrant une
solution ASP ou bien installer IIS ou PWS sur un ordinateur distant.
Après avoir installé IIS ou PWS, vous devez créer un dossier racine pour votre application Web.
Voir « Création d'un dossier racine pour l'application », page 138.
Installation d'un serveur d'application JSP
Pour développer des pages JSP, vous devez disposer d'un serveur d'application compatible avec
JavaServer Pages (JSP). Voici quelques choix parmi les plus courants :
• Macromedia JRun pour Windows, Linux, Solaris ou UNIX. Vous pouvez télécharger une
version d'évaluation à partir du site Web de Macromedia, à l'adresse http://
www.macromedia.com/fr/software/jrun/.
• IBM WebSphere dont il existe une version pour différents systèmes d'exploitation. Vous
pouvez télécharger une version d'évaluation à partir du site Web d'IBM, à l'adresse http://
www-4.ibm.com/software/webservers/appserv/download.html.
• Tomcat pour Windows et UNIX. Vous pouvez télécharger un exemplaire de Tomcat à partir
du site Web Jakarta Project, à l'adresse http://jakarta.apache.org/tomcat/.
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hébergement Web offrant une
solution JSP ou bien installer un serveur d'application JSP sur un ordinateur distant exécutant un
serveur Web.
Configuration d'une application Web 137
Après avoir installé un serveur d'application JSP, vous devez créer un dossier racine pour votre
application Web. Voir « Création d'un dossier racine pour l'application », page 138.
Installation d'un serveur d'application PHP
Pour exécuter des pages PHP, vous devez disposer du serveur d'application PHP, logiciel ouvert
disponible sur le Web. Il existe une version de ce serveur d'application pour les systèmes
Windows, Linux, UNIX, HP-UX, Solaris et Mac OS X. Ce serveur d'application est compatible
avec les serveurs Web Apache, Microsoft IIS ou PWS, Netscape et iPlanet et avec pratiquement
tous les serveurs Web qui prennent en charge l'interface CGI.
Vous pouvez télécharger le serveur d'application PHP à partir du site Web PHP, à l'adresse http://
www.php.net/downloads.php. Pour plus d'informations sur l'installation du serveur, reportezvous à la documentation PHP que vous pouvez également télécharger à partir du site Web PHP, à
l'adresse http://www.php.net/download-docs.php.
Les utilisateurs de Macintosh peuvent avoir recours à un service d'hébergement Web offrant une
solution PHP ou bien installer PHP sur un ordinateur distant exécutant un serveur Web. Si vous
utilisez Mac OS 10.1, vous pouvez exécuter l'application PHP installée avec le système
d'exploitation. Pour plus d'informations, voir les sites Web suivants :
• http://developer.apple.com/internet/macosx/php.html
• http://www.entropy.ch/software/macosx/
• http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html
Après avoir installé le serveur d'application PHP, vous devez créer un dossier racine pour votre
application Web.
Création d'un dossier racine pour l'application
Après avoir installé le logiciel de serveur, vous devez créer un dossier racine pour l'application sur
l'ordinateur exécutant le serveur Web.
Vérifiez que le dossier est publié par le serveur Web (en d'autres termes, que le serveur Web peut
fournir tous les fichiers situés dans ce dossier ou chacun de ses sous-dossiers en réponse à une
requête HTTP d'un navigateur Web). Par exemple, dans le cas d'un ordinateur exécutant PWS
ou IIS, il faut s'assurer que tous les fichiers du dossier Inetpub\wwwroot et de chacun de ses sousdossiers peuvent être fournis à un navigateur Web.
Définition d'un site Dreamweaver
Après avoir configuré le système en vue du développement d'applications Web, vous devez définir
un site Dreamweaver pour la gestion des fichiers.
Remarque : les utilisateurs de Macromedia HomeSite et de ColdFusion Studio peuvent considérer un site
Dreamweaver comme un projet HomeSite ou Studio.
Avant de commencer, vérifiez que les conditions suivantes sont réunies :
• Vous avez accès à un serveur Web. Le serveur Web peut résider sur un ordinateur local, sur un
ordinateur distant tel qu'un serveur de développement ou sur un serveur géré par une société
d'hébergement Web. Voir « Configuration d'un serveur Web », page 135.
• Un serveur d'application est installé et exécuté sur le système où réside le serveur Web. Voir
« Configuration d'un serveur d'application », page 135.
138 Chapitre 6
• Vous avez créé un dossier racine pour votre application Web sur le système exécutant le serveur
Web. Pour plus d'informations, voir « Création d'un dossier racine pour l'application », page
138.
La définition d'un site Dreamweaver pour l'application Web se déroule en trois étapes :
1
Définition d'un dossier situé sur le disque dur comme dossier local Dreamweaver dans lequel
seront stockées les copies de travail des fichiers du site (voir « Définition d'un dossier local »,
page 139).
2
Définition d'un dossier situé sur l'ordinateur exécutant le serveur Web comme dossier distant
Dreamweaver (voir « Définition d'un dossier distant », page 140).
3
Définition de l'emplacement vers lequel Dreamweaver doit transférer les pages dynamiques
devant être traitées pendant la procédure de création du site (voir « Définition du dossier de
traitement des pages dynamiques », page 140).
Une fois le site Dreamweaver défini, vous pouvez procéder à la création de l'application Web.
Définition d'un dossier local
Vous pouvez définir un dossier local Dreamweaver pour chacune des applications Web créées. Ce
dossier local est le dossier du disque dur dans lequel seront stockées les copies de travail des
fichiers du site. Ce dossier local est indispensable au bon fonctionnement de Dreamweaver.
La définition d'un dossier local vous permet également de gérer vos fichiers et de les transférer vers
ou depuis le serveur Web d'un simple clic de souris.
Pour définir un dossier local Dreamweaver :
1
Créez sur le disque dur un dossier dans lequel seront stockées les copies de travail des fichiers.
Vous pouvez également créer des sous-dossiers pour stocker vos fichiers d'image ou autres
ressources.
2
Dans Dreamweaver, choisissez Site > Nouveau site.
La boîte de dialogue Définition du site s'ouvre.
3
Si l'assistant s'affiche, cliquez sur Avancé, puis sélectionnez la catégorie Infos locales
(normalement activée par défaut).
4
Tapez le nom que vous souhaitez attribuer au site Dreamweaver dans la zone Nom du site.
5
Dans la zone Dossier racine local, indiquez le dossier créé à l'étape 1.
Vous pouvez taper un chemin ou cliquer sur l'icône de dossier pour rechercher le dossier et le
sélectionner.
6
Vous pouvez compléter les autres options de la catégorie Infos locales, mais cela n'est pas
indispensable pour que le site fonctionne.
Pour plus d'informations sur ces options, cliquez sur le bouton Aide de la boîte de dialogue.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez ensuite définir
un dossier distant.
Configuration d'une application Web 139
Définition d'un dossier distant
Après avoir défini un dossier local, vous pouvez définir un dossier distant pour le site
Dreamweaver. Ce dossier distant est le dossier que vous avez créé sur le serveur Web pour
l'application Web (voir « Création d'un dossier racine pour l'application », page 138).
Vous n'avez pas à définir de dossier distant si le dossier local que vous avez défini (voir
« Définition d'un dossier local », page 139) peut faire office de dossier racine pour l'application
Web (ce qui suppose que le serveur Web réside sur l'ordinateur local).
Pour définir un dossier distant Dreamweaver :
1
Si la boîte de dialogue Définition du site n'est pas ouverte, choisissez Site > Modifier les sites,
sélectionnez votre site et cliquez sur Modifier afin de l'ouvrir.
La boîte de dialogue Définition du site apparaît.
2
Si l'assistant s'affiche, cliquez sur Avancé, puis sélectionnez la catégorie Infos distantes.
La boîte de dialogue Infos distantes s'affiche.
3
A partir du menu déroulant Accès, choisissez Local/Réseau, FTP ou RDS.
Votre choix dépend de la méthode que vous souhaitez utiliser pour le transfert des fichiers entre
le dossier local et le dossier distant.
Remarque : si vous souhaitez utiliser RDS, le dossier distant doit être situé sur un ordinateur exécutant
ColdFusion.
Vous pouvez également envoyer vos fichiers à une application SourceSafe en choisissant Base
de données SourceSafe (les développeurs utilisent SourceSafe afin de contrôler la version des
fichiers). Si vous choisissez cette option, vous devez définir un dossier différent. Pour obtenir
des instructions, voir « Définition du dossier de traitement des pages dynamiques », page 140.
4
Après avoir sélectionné une méthode d'accès, définissez les options d'accès correspondantes.
Pour plus d'informations sur ces options, cliquez sur le bouton Aide de la boîte de dialogue.
Laissez la boîte de dialogue Définition du site ouverte. Vous devez ensuite définir un dossier pour
le traitement des pages dynamiques.
Définition du dossier de traitement des pages dynamiques
Après avoir défini le dossier distant dans Dreamweaver, vous devez indiquer le dossier dans lequel
les pages dynamiques pourront être traitées. Dreamweaver utilise ce dossier pour générer du
contenu dynamique et se connecter à des bases de données pendant que vous procédez à la
création du site.
Du fait de l'interaction entre le serveur Web et le serveur d'application, c'est généralement le
dossier racine créé sur le serveur Web qui est utilisé (voir « Création d'un dossier racine pour
l'application », page 138).
Remarque : le dossier racine peut être un dossier local ou distant, suivant l'emplacement du serveur Web.
Pour indiquer le dossier dans lequel les pages dynamiques peuvent être traitées :
1
Si la boîte de dialogue Définition du site n'est pas ouverte, choisissez Site > Modifier les sites,
sélectionnez votre site et cliquez sur Modifier afin de l'ouvrir.
La boîte de dialogue Définition du site apparaît.
140 Chapitre 6
2
Si l'assistant s'affiche, cliquez sur Avancé puis sélectionnez la catégorie Serveur d'évaluation.
La boîte de dialogue Serveur d'évaluation s'affiche. Dreamweaver doit pouvoir recourir aux
services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que
vous procédez à la création du site. Ce serveur peut se trouver sur votre ordinateur local, un
serveur de développement, un serveur intermédiaire ou un serveur de production. Vous devez
seulement vous assurer que le serveur sélectionné est en mesure de traiter le type de pages
dynamiques que vous avez l'intention de développer.
3
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.
A propos du préfixe d'URL
Vous devez indiquer un préfixe d'URL de sorte que Dreamweaver MX puisse recourir aux services
d'un serveur d'évaluation pour afficher les données et se connecter aux bases de données pendant
que vous procédez à la création du site. Dreamweaver utilise le serveur d'évaluation pour générer
le contenu dynamique affiché dans la fenêtre Live Data et dans votre navigateur lorsque vous
utilisez la commande Aperçu dans le navigateur.
Dreamweaver utilise également le serveur d'évaluation pour établir des connexions à une base de
données au moment de la conception, afin de vous transmettre des informations utiles sur la base
de données, telles que le nom des tableaux qu'elle contient et le nom des colonnes de ces tableaux.
Le préfixe d'URL est constitué du nom de domaine et du nom d'un sous-répertoire ou d'un
répertoire virtuel du répertoire de base de votre site Web.
Remarque : la terminologie utilisée dans cette section est celle de Microsoft IIS. Bien que cette terminologie puisse
différer d'un serveur à l'autre, les mêmes concepts s'appliquent à la plupart des serveurs Web.
est le dossier qui, sur le serveur, est mappé sur le nom de domaine de votre
site. Supposons que le dossier que vous souhaitez utiliser pour traiter des pages dynamiques soit
c:\sites\company\ et que ce dossier soit votre répertoire de base (c'est-à-dire que ce dossier soit
mappé sur le nom de domaine de votre site, par exemple www.mystartup.com). Dans ce cas, le
préfixe d'URL est http://www.mystartup.com/.
Le répertoire de base
Si le dossier que vous souhaitez utiliser pour le traitement des pages dynamiques est un sousdossier du répertoire de base, ajoutez ce sous-dossier à l'URL. Supposons que votre répertoire de
base soit c:\sites\company\, que le nom de domaine de votre site soit www.mystartup.com et que
le dossier à utiliser pour traiter les pages dynamiques soit c:\sites\company\inventory. Entrez le
préfixe d'URL suivant :
http://www.mystartup.com/inventory/
Si le dossier à utiliser pour traiter les pages dynamiques n'est pas votre répertoire de base ni l'un de
ses sous-répertoires, vous devez créer un répertoire virtuel.
Un répertoire virtuel est un dossier qui ne se trouve pas physiquement dans le répertoire de base du
serveur, même s'il apparaît dans l'URL. Pour créer un répertoire virtuel, spécifiez un alias
représentant le chemin du dossier dans l'URL. Supposons que votre répertoire de base soit
c:\sites\company et votre dossier de traitement d:\apps\inventory, et que vous ayez défini pour ce
dossier l'alias « warehouse ». Entrez le préfixe d'URL suivant :
http://www.mystartup.com/warehouse/
Configuration d'une application Web
141
Localhost est
un terme qui peut être utilisé pour désigner le répertoire de base dans vos URL
lorsque le client (généralement un navigateur, mais dans ce cas Dreamweaver) réside sur le même
système que votre serveur Web. Supposons que Dreamweaver réside sur le même système que le
serveur Web, que votre répertoire de base soit c:\sites\company et que vous ayez défini un
répertoire virtuel nommé « warehouse » désignant le dossier à utiliser pour traiter les pages
dynamiques. Entrez le préfixe d'URL suivant :
http://localhost/warehouse/
Pour déterminer votre nom de domaine et votre répertoire de base dans PWS et IIS 4.0, cliquez
sur l'icône Général dans le Personal Web Manager et notez la page d'accueil spécifiée dans la zone
Publication.
Connexion à une base de données
Si vous souhaitez utiliser une base de données avec votre application Web, vous devez au préalable
établir une connexion avec cette base. Pour une présentation générale des connexions de base de
données, voir « Description des connexions aux bases de données », page 702.
Dreamweaver MX gère les connexions aux bases de données différemment suivant la technologie
de serveur sélectionnée. Voir les chapitres suivants :
•
•
•
•
•
Chapitre 7, « Connexions à des bases de données pour les développeurs ColdFusion », page 145
Chapitre 8, « Connexions à des bases de données pour les développeurs ASP.NET », page 151
Chapitre 9, « Connexions à des bases de données pour les développeurs ASP », page 157
Chapitre 10, « Connexions à des bases de données pour les développeurs JSP », page 169
Chapitre 11, « Connexions à des bases de données pour les développeurs PHP », page 177
Dépannage des erreurs de serveur d'application
Cette section présente certains messages d'erreur de serveur d'application courants ainsi que les
solutions pour corriger ces erreurs.
Pour plus d'informations sur les serveurs d'application Macromedia, accédez au centre de support
technique de ColdFusion et de JRun disponible sur le site Web de Macromedia à l'adresse http://
www.macromedia.com/fr/support/.
Pour plus d'informations sur les autres serveurs d'application, reportez-vous à la documentation
du serveur, consultez le site Web du fournisseur ou contactez le support technique du fournisseur.
Cette section aborde les erreurs de serveur suivantes :
•
•
•
•
•
« ColdFusion - 405 Méthode non autorisée », page 143
« JRun - Erreur de syntaxe : Identifiant attendu à la place de ce jeton », page 143
« JRun - Erreur 2140 », page 143
« WebSphere - Error 403 (forbidden by rule) », page 143
« WebSphere - Error 404 (File Not Found) », page 144
142 Chapitre 6
ColdFusion - 405 Méthode non autorisée
Cette erreur peut se produire dans ColdFusion 4 ou 5 lors de la vérification de l'installation. Le
problème peut provenir du fait que vous disposez de la version FrontPage de PWS. Veillez à
installer la version complète de PWS, et non pas la version FrontPage.
Si vous disposez de la version correcte de PWS, vérifiez le nom du répertoire virtuel de cfdocs et
cfide. Dans PWS, cliquez sur l'icône Advanced, sélectionnez le répertoire virtuel dans la liste et
cliquez sur Edit Properties. Dans la zone Alias, supprimez toute virgule du nom du répertoire
virtuel.
Il est également recommandé de stocker les fichiers de base de données en dehors du répertoire
racine du serveur Web. Dans certains cas, les serveurs Web mettent les fichiers en mémoire cache
et les verrouillent, ce qui peut entraîner des problèmes de droits d'écriture. En outre, le stockage
des bases de données en dehors du dossier racine du serveur Web constitue une mesure de sécurité
supplémentaire.
JRun - Erreur de syntaxe : Identifiant attendu à la place de ce jeton
Cette erreur se produit en cas de tentative de traitement d'une page JSP appelée default.jsp.
Le terme « default » est un mot clé réservé dans JRun. Pour remédier à ce problème, attribuez à la
page le nom index.jsp ou home.jsp.
JRun - Erreur 2140
Cette erreur peut se produire pour différentes raisons :
• Le numéro de licence n'a pas été entré correctement. Pour éviter toute erreur, copiez et collez le
numéro de licence indiqué dans le message électronique de confirmation d'achat. Vérifiez
également que le numéro de licence n'est suivi d'aucun espace.
• Le jsm-default n'a pas été installé correctement en tant que service NT.
Pour plus d'informations, voir l'article 12015 du centre de support JRun, à l'adresse http://
www.macromedia.com/go/error_2140.
WebSphere - Error 403 (forbidden by rule)
Cette erreur peut se produire lorsqu'un servlet ou JSP est appelé. Les causes et les solutions
possibles sont les suivantes :
• Le nom de fichier utilisé pour appeler le fichier JSP est incorrect. Vérifiez le nom du fichier JSP.
Vérifiez que vous avez respecté la casse, que vous n'avez pas fait de faute de frappe et que
l'extension du nom de fichier est correcte. Vérifiez que le nom du fichier JSP se termine par
.jsp.
• Si vous n'utilisez pas le numéro de port par défaut du serveur HTTP IBM pour AS/400 (port
80), vous avez omis l'alias host:port dans la liste des alias de l'hôte virtuel. Pour obtenir la liste
des alias de l'hôte virtuel, cliquez sur l'onglet Advanced properties de l'hôte virtuel dans
Administrative Console.
• L'application Web dans laquelle se trouve le fichier JSP ne contient aucun servlet d'activation
de JSP. Vérifiez qu'un servlet d'activation de JSP a été ajouté à l'application Web dans laquelle
se trouve le fichier JSP. Créez un servlet d'activation de JSP si nécessaire.
• Si le servlet a été créé au sein d'une application Web, il doit disposer d'un chemin URI
(Uniform Resource Indicator). Vérifiez que le chemin URI est correct.
Configuration d'une application Web 143
• La directive Pass ou Redirect de la configuration active du serveur HTTP empêche le JSP ou le
servlet d'appeler des fichiers. Vérifiez que les directives Pass et Redirect de la configuration
active du serveur HTTP IBM pour AS/400 sont correctes.
Pour plus d'informations, voir la section « Frequently Asked Questions » du site Web d'IBM à
l'adresse http://www.ibm.com/support/techdocs/atsmastr.nsf/PubAllNum/FQ101338.
Pour les autres problèmes liés à WebSphere, visitez le centre de support IBM WebSphere à
l'adresse http://www.ibm.com/software/webservers/appserv/support.html.
WebSphere - Error 404 (File Not Found)
Cette erreur peut se produire lorsqu'un servlet ou un fichier JSP est appelé. Les causes et les
solutions possibles sont les suivantes :
• Vérifiez que l'URL du fichier JSP ou du servlet est bien orthographiée.
• Les autorisations associées au processus du serveur d'application ne permettent pas d'accéder
au dossier contenant le code Java généré par JSP et le fichier de classes. Vérifiez que QEJBSVR
dispose des droits d'accès à la structure de dossier /QIBM/UserData/WebASAdv/default/temp
ou /QIBM/UserData/WebASAdv/<username>/temp.
• Cette erreur peut être due au fait qu'une classe utilisée par le servlet est introuvable. Vérifiez
que la variable du chemin de classe de l'application Web contient toutes les classes requises par
le servlet.
• Cette erreur peut être due à une directive Pass mal placée dans le fichier de configuration
HTTP. Si la directive Service est précédée de la directive Pass (PASS /*), elle ne sera jamais
référencée. Pour remédier à ce problème, placez la directive Pass à la fin des entrées de
configuration HTTP ou précisez cette directive (par exemple, PASS /*.html). Pour plus
d'informations sur les directives de configuration HTTP, voir la section Editing the HTTP
configuration file to add server directives de la documentation WebSphere.
Pour plus d'informations, visitez le centre de support IBM WebSphere à l'adresse http://
www.ibm.com/software/webservers/appserv/support.html.
144 Chapitre 6
CHAPITRE 7
Connexions à des bases de données pour les
développeurs ColdFusion
Ce chapitre explique comment se connecter aux bases de données lors du développement
d'applications Macromedia ColdFusion avec Macromedia Dreamweaver MX. Pour les
applications ColdFusion, vous devez vous connecter dans Dreamweaver en choisissant une source
de données ColdFusion définie dans le programme ColdFusion Administrator, la console de
gestion du serveur.
Pour réaliser les opérations présentées dans ce chapitre, vous devez avoir configuré une application
Web ColdFusion (voir « Configuration d'une application Web », page 133). Une base de données
doit également être installée sur votre ordinateur local ou sur un système auquel vous pouvez
accéder en réseau ou par FTP.
Ce chapitre contient les rubriques suivantes :
• « Connexion à une base de données », page 145
• « Modification ou suppression d'une connexion à une base de données », page 147
• « Connexion au moyen de la connectivité UltraDev 4 », page 147
Pour tout complément d'information sur les bases de données et les connexions aux bases de
données, voir « Guide du débutant en base de données », page 695.
Connexion à une base de données
Pour développer une application Web ColdFusion dans Dreamweaver, vous devez vous connecter
à une base de données en choisissant une source de données ColdFusion définie dans le
programme ColdFusion Administrator, la console de gestion du serveur.
Remarque : si vous exécutez ColdFusion 5 sous Windows, vous pouvez également configurer un DSN (Data
Source Name, nom de la source de données) sur votre ordinateur. Les DSN système sont automatiquement
considérés comme des sources de données par ColdFusion 4 ou 5.
Avant de vous connecter à une base de données, assurez-vous que Dreamweaver connaît
l'emplacement des sources de données ColdFusion. Pour récupérer les sources de données
ColdFusion au moment de la conception, Dreamweaver place des scripts dans un dossier sur
l'ordinateur exécutant ColdFusion. Vous devez indiquer ce dossier dans la catégorie Serveur
d'évaluation de la boîte de dialogue Définition du site. Pour plus d'informations, voir
« Définition du dossier de traitement des pages dynamiques », page 140.
Ensuite, vous devez créer une source de données ColdFusion dans le programme ColdFusion
Administrator (s'il n'en existe pas déjà une). Pour plus d'informations, voir « Création d'une
source de données ColdFusion », page 146.
145
Une fois la source de données ColdFusion créée, vous pouvez l'utiliser dans Dreamweaver pour
vous connecter à la base de données. Pour plus d'informations, voir « Connexion à la base de
données dans Dreamweaver », page 146.
Pour réaliser les opérations présentées dans cette section, vous devez utiliser la connectivité
Dreamweaver MX et non pas Dreamweaver UltraDev 4. Les connexions à des bases de données
sont traitées différemment dans UltraDev 4. Pour plus d'informations, voir « Connexion au
moyen de la connectivité UltraDev 4 », page 147.
Création d'une source de données ColdFusion
Avant de vous connecter à une base de données, vous devez créer une source de données
ColdFusion dans le programme ColdFusion Administrator, la console de gestion du serveur.
Remarque : si vous exécutez ColdFusion 5 sous Windows, vous pouvez également configurer un DSN sur votre
ordinateur. Les DSN système sont automatiquement considérés comme des sources de données par
ColdFusion 5. Pour plus d'informations, voir « Définition d'un DSN sous Windows », page 717.
Pour créer une source de données ColdFusion :
1
Dans le panneau Bases de données (Fenêtre > Bases de données) de Dreamweaver, cliquez sur
l'icône Modifier les sources de données (la deuxième icône à partir de la droite sur la barre
d'outils du panneau).
ColdFusion Administrator s'ouvre dans un navigateur.
2
Connectez-vous à ColdFusion Administrator et créez la source de données.
Pour obtenir des instructions, voir la documentation relative à ColdFusion.
Vous devez fournir certaines valeurs de paramètres pour créer la source de données ColdFusion.
Pour les valeurs de paramètres spécifiques à votre pilote de base de données, reportez-vous à la
documentation de votre fournisseur ou contactez votre administrateur système.
Une fois que vous avez créé une source de données ColdFusion, vous pouvez l'utiliser dans
Dreamweaver.
Connexion à la base de données dans Dreamweaver
Une fois la source de données ColdFusion créée dans ColdFusion Administrator, vous pouvez
l'utiliser pour vous connecter à la base de données dans Dreamweaver.
Ouvrez n'importe quelle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de
données (Fenêtre > Bases de données). Vos sources de données ColdFusion s'affichent dans le
panneau.
Si les sources de données ne s'affichent pas, assurez-vous que Dreamweaver connaît
l'emplacement des sources de données ColdFusion. Dans la catégorie Serveur d'évaluation de la
boîte de dialogue Définition du site, indiquez le dossier racine du site sur l'ordinateur exécutant
ColdFusion. Pour plus d'informations, voir « Définition du dossier de traitement des pages
dynamiques », page 140.
146 Chapitre 7
Modification ou suppression d'une connexion à une base de
données
Vous pouvez modifier ou supprimer des sources de données ColdFusion dans ColdFusion
Administrator. Dans le panneau Bases de données (Fenêtre > Bases de données) de Dreamweaver,
cliquez sur l'icône Modifier les sources de données (la deuxième icône à partir de la droite sur la
barre d'outils du panneau). ColdFusion Administrator s'ouvre dans un navigateur. Connectezvous et modifiez la source de données. Pour obtenir des instructions, voir la documentation
relative à ColdFusion.
Pour éviter les erreurs qui peuvent se produire après avoir supprimé ou renommé une source de
données ColdFusion, mettez à jour tous les jeux d'enregistrements utilisant les anciennes sources
de données dans Dreamweaver en double-cliquant sur le nom du jeu d'enregistrements dans le
panneau Liaisons et en choisissant une nouvelle source de données.
Connexion au moyen de la connectivité UltraDev 4
Cette section explique comment se connecter à une base de données si vous avez créé votre
application ColdFusion en utilisant les comportements de serveurs Dreamweaver UltraDev 4 ou
si vous l'avez créée dans Dreamweaver MX en utilisant les comportements de serveurs
UltraDev 4. Pour plus d'informations, voir « Remarque à l'attention des utilisateurs de
Dreamweaver UltraDev 4 », page 133.
Dans cette section, le terme « UD4 ColdFusion » est utilisé en référence à la connectivité
UltraDev 4.
Cette section contient les rubriques suivantes :
•
•
•
•
« Exigences de connexion », page 147
« Création d'une connexion UD4 ColdFusion normale », page 147
« Création d'une connexion UD4 ColdFusion avancée (utilisateurs de Macintosh) », page 148
« Modification ou suppression d'une connexion UD4 ColdFusion », page 149
Exigences de connexion
Avant de créer une connexion à une base de données UD4 ColdFusion, vous devez disposer des
éléments suivants :
• un site Dreamweaver spécifiant que le site contient uniquement des fichiers UltraDev 4. Pour
plus d'informations, voir « Définition du dossier de traitement des pages dynamiques »,
page 140 ;
• une base de données installée sur votre ordinateur local ou sur un système auquel vous pouvez
accéder en réseau ou par FTP ;
• un pilote de base de données approprié installé sur l'ordinateur exécutant ColdFusion ;
• une source de données ColdFusion définie pour la base de données. Pour plus d'informations,
voir « Création d'une source de données ColdFusion », page 146.
Création d'une connexion UD4 ColdFusion normale
Cette section explique comment créer une connexion à une base de données normale en utilisant
la connectivité UltraDev 4.
Connexions à des bases de données pour les développeurs ColdFusion 147
La connectivité ColdFusion UltraDev 4 sur Macintosh ne prend pas en charge les procédures
stockées dans les bases de données autres que SQL Server 7.0. Si vous travaillez sur un Macintosh
et que vous voulez accéder à une procédure enregistrée dans une base de données autre que SQL
Server 7.0, créez une connexion ColdFusion avancée en utilisant JDBC pour établir la connexion
à la base de données au moment de la conception. Pour savoir comment procéder, voir « Création
d'une connexion UD4 ColdFusion avancée (utilisateurs de Macintosh) », page 148.
Pour créer une connexion ColdFusion normale :
1
Ouvrez une page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données
(Fenêtre > Bases de données).
2
Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Nom de la source de données
dans le menu contextuel.
3
S'il s'agit de la première connexion créée pour le site, Dreamweaver vous invite à taper votre
nom d'utilisateur et votre mot de passe ColdFusion RDS (Remote Development Services).
Ensuite, Dreamweaver se connecte au serveur, récupère les sources de données ColdFusion et
affiche la boîte de dialogue Nom de la source de données.
4
Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour obtenir des instructions, cliquez sur le bouton Aide de la boîte de dialogue.
La nouvelle connexion s'affiche dans le panneau Bases de données.
Création d'une connexion UD4 ColdFusion avancée (utilisateurs de Macintosh)
La connectivité UltraDev ColdFusion sur Macintosh ne prend pas en charge les procédures
stockées dans des bases de données autres que SQL Server 7.0. Si vous travaillez sur un Macintosh
et que vous voulez utiliser une procédure enregistrée dans une base de données autre que SQL
Server 7.0, vous devez créer une connexion ColdFusion avancée.
Pour créer une connexion ColdFusion avancée dans Dreamweaver :
1
Ouvrez une page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données
(Fenêtre > Bases de données).
2
Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Nom de la source de données Avancé dans le menu contextuel.
3
S'il s'agit de la première connexion créée pour le site, Dreamweaver vous invite à taper votre
nom d'utilisateur et votre mot de passe ColdFusion RDS (Remote Development Services).
Ensuite, Dreamweaver se connecte au serveur, récupère les DSN ColdFusion et affiche la boîte
de dialogue Nom de la source de données - Avancé.
4
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.
La nouvelle connexion apparaît dans le panneau Base de données.
148 Chapitre 7
Modification ou suppression d'une connexion UD4 ColdFusion
Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les
informations de connexion dans un fichier, dans le sous-dossier Connexions du dossier racine
local du site. Dreamweaver ne crée pas de connexion à une base de données pour votre application
ColdFusion tant que vous n'avez pas défini de jeu d'enregistrements pour une page dans
l'application (voir « Définition d'un jeu d'enregistrements », page 536). Dreamweaver écrit alors
le code dans le fichier pour établir la connexion et insère une directive d'inclusion dans votre page.
Au moment de l'exécution, le serveur insère le code de connexion dans le document.
Pour mettre à jour une connexion :
1
Ouvrez une page ColdFusion dans Dreamweaver MX, puis ouvrez le panneau Bases de
données (Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Modifier la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Effectuez vos modifications, puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement
toutes les pages du site qui utilisent la connexion.
Pour supprimer une connexion :
1
Ouvrez une page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données
(Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Confirmez la suppression.
Pour éviter les erreurs dues à la suppression d'une connexion, mettez à jour tous les jeux
d'enregistrements qui utilisent l'ancienne connexion en double-cliquant sur le nom du jeu
d'enregistrements dans le panneau Liaisons et en choisissant une nouvelle connexion.
Connexions à des bases de données pour les développeurs ColdFusion 149
150 Chapitre 7
CHAPITRE 8
Connexions à des bases de données pour les
développeurs ASP.NET
Pour utiliser une base de données avec une application ASP.NET, vous devez créer une connexion
à une base de données dans Macromedia Dreamweaver MX. Ce chapitre vous indique la marche à
suivre.
Remarque : si vous développez des applications Microsoft Active Server Pages (ASP), voir « Connexions à des
bases de données pour les développeurs ASP », page 157.
Pour réaliser les opérations présentées dans ce chapitre, vous devez avoir configuré une application
ASP.NET (voir « Configuration d'une application Web », page 133). Une base de données doit
également être installée sur votre ordinateur local ou sur un système auquel vous pouvez accéder
en réseau ou par FTP.
Ce chapitre contient les sections suivantes :
• « Connexion à une base de données », page 151
• « Modification ou suppression d'une connexion à une base de données », page 154
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de
Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les
bases de données et les connexions aux bases de données, voir « Guide du débutant en base de
données », page 695.
Connexion à une base de données
Cette section explique comment se connecter à une base de données dans le cadre du
développement d'une application ASP.NET dans Dreamweaver MX.
Avant de vous connecter à une base de données, vous devez obtenir un fournisseur de BD OLE
pour votre base de données. Si vous souhaitez vous connecter à une base de données Microsoft
SQL Server, vous pouvez utiliser le fournisseur de données gérées pour SQL Server qui est fourni
par la plate-forme .NET. Pour plus d'informations, voir « Obtention d'un fournisseur de BD
OLE pour votre base de données », page 152.
Une fois le fournisseur de base de données installé, vous pouvez l'utiliser pour vous connecter à la
base de données. Pour obtenir des instructions, voir les sections suivantes :
• « Création d'une connexion à une base de données dans Dreamweaver », page 152
• « Création d'une connexion en utilisant la boîte de dialogue Propriétés des liaisons de
données », page 153
151
Obtention d'un fournisseur de BD OLE pour votre base de données
Une application ASP.NET doit établir une connexion à une base de données via un fournisseur de
BD OLE. Le fournisseur joue le rôle de traducteur pour permettre à l'application ASP.NET de
communiquer avec la base de données. Pour plus d'informations sur la BD OLE et le rôle des
fournisseurs de base de données, voir « Interfaçage avec la base de données », page 702.
Si vous souhaitez vous connecter à une base de données Microsoft SQL Server, vous pouvez
utiliser le fournisseur de données gérées pour SQL Server qui est fourni par la plate-forme .NET.
Ce fournisseur, très rapide et optimisé pour SQL Server, s'installe en même temps que la plateforme .NET.
Si vous souhaitez vous connecter à une base de données autre que SQL Server, assurez-vous qu'un
fournisseur de BD OLE pour votre base de données est installé sur l'ordinateur exécutant la plateforme .NET. Vous installez automatiquement le fournisseur de BD OLE pour Microsoft Access
lorsque vous téléchargez et installez Microsoft Data Access Components (MDAC) 2.7 sur
l'ordinateur.
Remarque : l'installation de MDAC 2.7 est hautement recommandée lorsque vous installez la structure .NET. Pour
plus d'informations, voir « Installation d'un serveur d'application ASP.NET », page 136.
Vous pouvez télécharger les fournisseurs de BD OLE pour les bases de données Oracle9i et
Oracle8i sur le site Web d'Oracle à l'adresse suivante : http://otn.oracle.com/software/tech/
windows/ole_db/content.html (enregistrement requis). Vous pouvez également acheter des
fournisseurs de BD OLE auprès d'éditeurs tiers.
Une fois que vous disposez d'un fournisseur pour votre base de données, vous pouvez l'utiliser
pour créer des connexions à des bases de données dans Dreamweaver.
Création d'une connexion à une base de données dans Dreamweaver
Après avoir obtenu un fournisseur de BD OLE pour votre base de données , vous pouvez l'utiliser
pour créer une connexion à une base de données dans Dreamweaver.
Une autre solution consiste à utiliser la boîte de dialogue Propriétés des liaisons de données
Microsoft pour vous aider à créer la connexion. Pour obtenir des instructions, voir « Création
d'une connexion en utilisant la boîte de dialogue Propriétés des liaisons de données », page 153.
Pour créer une connexion à une base de données pour une application ASP.NET :
1
Ouvrez une page ASP.NET dans Dreamweaver, puis ouvrez le panneau Bases de données
(Fenêtre > Bases de données).
Le panneau affiche les connexions définies pour ce site.
2
Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Connexion à la BD OLE ou
Connexion SQL Server dans le menu contextuel.
Remarque : sélectionnez Connexion SQL Server uniquement si vous souhaitez vous connecter à une base de
données Microsoft SQL Server.
La boîte de dialogue Connexion à la BD OLE ou Connexion SQL Server s'affiche.
3
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.
La nouvelle connexion s'affiche dans le panneau Bases de données.
152 Chapitre 8
Création d'une connexion en utilisant la boîte de dialogue Propriétés des
liaisons de données
Après avoir obtenu un fournisseur de BD OLE pour votre base de données (voir « Obtention
d'un fournisseur de BD OLE pour votre base de données », page 152), vous pouvez créer une
connexion à une base de données à l'aide de la boîte de dialogue Propriétés des liaisons de
données dans Windows.
Important : vous pouvez utiliser cette méthode uniquement si le fournisseur de BD OLE que
vous souhaitez utiliser est installé sur le même ordinateur Windows que Dreamweaver.
Pour créer une connexion à une base de données en utilisant les propriétés de liaisons de
données :
1
Ouvrez une page ASP.NET dans Dreamweaver, puis ouvrez le panneau Bases de données
(Fenêtre > Bases de données).
Le panneau affiche les connexions définies pour ce site.
2
Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Connexion à la BD OLE dans le
menu contextuel.
La boîte de dialogue Connexion à la BD OLE s'affiche.
3
Cliquez sur le bouton Générer.
La boîte de dialogue Propriétés des liaisons de données s'affiche. Cette boîte de dialogue
Windows affiche les fournisseurs de BD OLE actuellement installés sur l'ordinateur Windows
exécutant Dreamweaver.
4
Complétez la boîte de dialogue Propriétés des liaisons de données, puis cliquez sur OK.
Dreamweaver insère une chaîne de connexion dans la boîte de dialogue Connexion à la BD
OLE.
5
Cliquez sur Tester.
Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, vérifiez
la chaîne de connexion. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du
dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier
de traitement des pages dynamiques », page 140).
6
Cliquez sur OK.
La nouvelle connexion apparaît dans le panneau Base de données.
Exemples de paramètres de connexion à la BD OLE pour ASP.NET
Une chaîne de connexion à la BD OLE combine toutes les informations dont votre application
ASP.NET a besoin pour établir une connexion à une base de données. Dreamweaver insère cette
chaîne dans vos scripts de page côté serveur afin que ceux-ci soient ultérieurement traités par votre
serveur d'application.
Dreamweaver vous fournit des modèles de chaînes pour créer des chaînes de connexion à la BD
OLE pour les applications ASP.NET (voir « Création d'une connexion à une base de données
dans Dreamweaver », page 152). Pour créer une chaîne de connexion, vous devez remplacer les
espaces réservés dans le modèle par les valeurs de paramètres requises. Cette section offre des
exemples de paramètres pour Microsoft Access et les bases de données SQL Server.
Connexions à des bases de données pour les développeurs ASP.NET 153
Remarque : pour connaître les valeurs de paramètres spécifiques aux autres bases de données, reportez-vous à la
documentation de votre fournisseur ou contactez votre administrateur système.
vous disposez de la structure .NET sur votre ordinateur local et vous souhaitez vous
connecter à une base de données Microsoft Access appelée sdSchool.mdb qui se trouve dans le
dossier suivant sur votre disque dur : c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb.
Voici les paramètres requis pour créer cette chaîne de connexion :
Cas 1 :
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb;
vous utilisez la structure .NET sur un serveur de développement distant et vous souhaitez
vous connecter à une base de données Microsoft Access appelée mtnSchool.mdb qui se trouve
dans le dossier suivant sur le serveur :
d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Voici les paramètres requis pour
créer la chaîne de connexion :
Cas 2 :
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;
Cas 3 : supposons que vous utilisiez la structure
.NET sur un serveur de développement en réseau
appelé Savant et que vous souhaitiez vous connecter à une base de données Microsoft SQL Server
appelée pubs sur le serveur. Votre nom d'utilisateur SQL Server est “sa” et il n'existe pas de mot de
passe. Si vous utilisez le fournisseur de données gérées pour SQL Server (c'est-à-dire si vous avez
choisi Connexion SQL Server dans le panneau Bases de données), voici les paramètres pour créer
la chaîne de connexion :
Data Source=Savant;
Initial Catalog=pubs;
User ID=sa;
Password=;
Modification ou suppression d'une connexion à une base de
données
Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les
informations de connexion dans un fichier, dans le sous-dossier Connexions du dossier racine
local du site. Dreamweaver ne crée pas de connexion à une base de données pour votre application
ASP.NET tant que vous n'avez pas défini de jeu d'enregistrements pour une page dans
l'application (voir « Définition d'un jeu d'enregistrements », page 536). Dreamweaver écrit alors
le code dans le fichier pour établir la connexion et insère une directive d'inclusion dans votre page.
Au moment de l'exécution, le serveur insère le code de connexion dans le document.
Pour mettre à jour une connexion :
1
Ouvrez une page ASP.NET dans Dreamweaver, puis ouvrez le panneau Bases de données
(Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
154 Chapitre 8
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Modifier la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement
toutes les pages du site qui utilisent la connexion.
Si vous renommez une connexion, mettez à jour tous les jeux d'enregistrements utilisant l'ancien
nom de connexion en cliquant deux fois sur chaque jeu dans le panneau Liaisons de données et en
choisissant le nouveau nom de connexion dans la boîte de dialogue Jeu d'enregistrements.
Pour supprimer une connexion :
1
Ouvrez une page ASP.NET dans Dreamweaver, puis ouvrez le panneau Bases de données
(Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Confirmez la suppression.
Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu
d'enregistrements utilisant l'ancienne connexion en cliquant deux fois sur le nom du jeu dans le
panneau Liaisons de données et en choisissant une nouvelle connexion dans la boîte de dialogue
Jeu d'enregistrements.
Connexions à des bases de données pour les développeurs ASP.NET 155
156 Chapitre 8
CHAPITRE 9
Connexions à des bases de données pour les
développeurs ASP
Pour utiliser une base de données avec une application ASP (Active Server Pages) de Microsoft,
vous devez créer une connexion à une base de données dans Macromedia Dreamweaver MX. Ce
chapitre vous indique la marche à suivre.
Remarque : si vous développez des applications ASP.NET, voir « Connexions à des bases de données pour les
développeurs ASP.NET », page 151.
Pour réaliser les opérations présentées dans ce chapitre, vous devez avoir configuré une application
ASP (voir « Configuration d'une application Web », page 133). Une base de données doit
également être installée sur votre ordinateur local ou sur un système auquel vous pouvez accéder
en réseau ou par FTP.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
« Description des connexions aux bases de données ASP », page 158
« Création d'une connexion DSN », page 158
« Création d'une connexion sans DSN », page 161
« Connexion à une base de données via un fournisseur d'accès », page 164
« Modification ou suppression d'une connexion à une base de données », page 167
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de
Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les
bases de données et les connexions aux bases de données, voir Annexe A, « Guide du débutant en
base de données », page 695.
157
Description des connexions aux bases de données ASP
Une application ASP doit se connecter à une base de données via un pilote ODBC ou un
fournisseur de BD OLE. Le pilote ou le fournisseur joue le rôle de traducteur pour permettre à
l'application Web de communiquer avec la base de données. Pour plus d'informations sur le rôle
des pilotes de base de données, voir « Interfaçage avec la base de données », page 702. Le tableau
suivant répertorie certains des pilotes que vous pouvez utiliser avec les bases de données Microsoft
Access, Microsoft SQL Server et Oracle :
Base de données
Pilote de base de données
Microsoft Access
Pilote Microsoft Access (ODBC)
Microsoft SQL Server
Pilote Microsoft SQL Server (ODBC)
Fournisseur Microsoft SQL Server (OLE DB)
Oracle
Pilote Microsoft Oracle (ODBC)
Fournisseur Oracle pour OLE DB
Vous pouvez utiliser un DSN (Data Source Name, nom de source de données) ou une chaîne de
connexion pour vous connecter à la base de données.
Un DSN est un identificateur formé d'un seul mot (Acme par exemple), qui pointe vers la base de
données et contient toutes les informations requises pour s'y connecter. Le DSN se définit dans
Windows. Vous pouvez utiliser un DSN si vous vous connectez via un pilote ODBC installé sur
un système Windows. Pour obtenir des instructions, voir « Création d'une connexion DSN »,
page 158.
Une chaîne de connexion est une expression saisie à la main qui identifie la base de données et
fournit les informations requises pour s'y connecter. Exemple :
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
Vous devez utiliser une chaîne de connexion si vous vous connectez par l'un des moyens suivants :
• Un fournisseur de BD OLE
• Un pilote ODBC qui n'est pas installé sur un système Windows
Pour obtenir des instructions détaillées, voir :
• « Création d'une connexion sans DSN », page 161
• « Connexion à une base de données via un fournisseur d'accès », page 164
Remarque : vous pouvez également utiliser une chaîne de connexion si vous vous connectez via un pilote ODBC
installé sur un système Windows, mais il est plus facile d'utiliser un DSN.
Création d'une connexion DSN
Vous pouvez utiliser un DSN (Data Source Name, nom de source de données) pour créer une
connexion ODBC entre votre application Web et votre base de données. Un DSN est un nom
contenant tous les paramètres nécessaires pour établir la connexion à une base de données précise
à l'aide d'un pilote ODBC. Pour plus d'informations, voir « Description des DSN », page 717.
Remarque : comme vous pouvez uniquement spécifier un pilote ODBC dans un DSN, vous devez utiliser une
chaîne de connexion si vous souhaitez passer par un fournisseur de BD OLE. Pour plus d'informations, voir
« Création d'une connexion OLE DB », page 163.
158 Chapitre 9
Vous pouvez définir le DSN sur un ordinateur Windows local ou distant. Les rubriques suivantes
décrivent les méthodes permettant de créer ces deux types de connexions :
• « Création d'une connexion en utilisant un DSN local », page 159
• « Création d'une connexion en utilisant un DSN distant », page 160
Création d'une connexion en utilisant un DSN local
Vous pouvez utiliser un DSN défini localement pour créer une connexion à une base de données
dans Dreamweaver. Si vous souhaitez utiliser un DSN local, le DSN doit être défini sur
l'ordinateur Windows exécutant Dreamweaver.
Pour créer une connexion à une base de données avec un DSN défini localement :
1
Définissez un DSN sur l'ordinateur Windows exécutant Dreamweaver.
Pour obtenir des instructions, voir « Création d'un DSN », page 717.
2
Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site.
3
Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Nom de la source de données
(DSN) dans le menu contextuel.
La boîte de dialogue Nom de la source de données (DSN) s'affiche.
4
Tapez le nom de la nouvelle connexion.
Remarque : n'utilisez pas d'espaces ni de caractères spéciaux dans le nom.
5
Sélectionnez l'option Utilisation du DSN local en bas de la boîte de dialogue.
6
Sélectionnez le DSN que vous souhaitez utiliser dans le menu contextuel Nom de la source de
données (DSN).
Si vous voulez utiliser un DSN local mais que vous n'en avez pas encore défini, cliquez sur
Définir pour ouvrir l'administrateur de sources de données ODBC Windows. Pour obtenir des
instructions, voir « Création d'une connexion DSN », page 158.
7
Au besoin, renseignez les zones Nom d'utilisateur et Mot de passe.
Connexions à des bases de données pour les développeurs ASP 159
8
Vous pouvez limiter le nombre d'éléments de base de données récupérés par Dreamweaver au
moment de la conception en cliquant sur Avancé puis en saisissant un nom de schéma ou de
catalogue.
Pour plus d'informations, voir « Limitation des informations de base de données affichées dans
Dreamweaver », page 513.
Remarque : vous ne pouvez pas créer de schéma ou de catalogue dans Microsoft Access.
9
Cliquez sur Tester.
Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue,
revérifiez le DSN. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du dossier
utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de
traitement des pages dynamiques », page 140).
10
Cliquez sur OK.
La nouvelle connexion s'affiche dans le panneau Bases de données.
Création d'une connexion en utilisant un DSN distant
Vous pouvez utiliser un DSN défini sur un ordinateur distant pour créer une connexion à une
base de données dans Dreamweaver. Si vous souhaitez utiliser un DSN distant, celui-ci doit être
défini sur l'ordinateur Windows exécutant votre serveur d'application (probablement IIS).
Pour créer une connexion à une base de données avec un DSN défini à distance :
1
Définissez un DSN sur le système distant exécutant votre serveur d'application.
Pour obtenir des instructions, voir « Création d'un DSN », page 717.
2
Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site.
3
Cliquez sur le bouton plus (+) dans le panneau et choisissez Nom de la source de données
(DSN) dans le menu contextuel.
La boîte de dialogue Nom de la source de données (DSN) s'affiche.
4
Tapez le nom de la nouvelle connexion.
Remarque : n'utilisez pas d'espaces ni de caractères spéciaux dans le nom.
5
Sélectionnez l'option Utilisation de la DSN sur le serveur d'évaluation en bas de la boîte de
dialogue.
Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions à des bases de
données utilisent des DSN sur le serveur d'application.
6
Tapez le DSN.
Vous pouvez cliquer sur le bouton DSN pour établir la connexion au serveur et faire votre
choix parmi les DSN qui y sont définis.
7
Au besoin, renseignez les zones Nom d'utilisateur et Mot de passe.
160 Chapitre 9
8
Vous pouvez limiter le nombre d'éléments de base de données récupérés par Dreamweaver au
moment de la conception en cliquant sur Avancé puis en saisissant un nom de schéma ou de
catalogue.
Pour plus d'informations, voir « Limitation des informations de base de données affichées dans
Dreamweaver », page 513.
Remarque : vous ne pouvez pas créer de schéma ou de catalogue dans Microsoft Access.
9
Cliquez sur Tester.
Dreamweaver essaie de se connecter à la base de données. Si la connexion échoue, revérifiez le
DSN. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du dossier utilisé par
Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des
pages dynamiques », page 140).
10
Cliquez sur OK.
La nouvelle connexion apparaît dans le panneau Base de données.
Création d'une connexion sans DSN
Vous pouvez utiliser une connexion sans DSN pour créer une connexion ODBC ou OLE DB
entre votre application Web et votre base de données.
Vous devez utiliser une chaîne de connexion pour créer la connexion. Une chaîne de connexion
regroupe toutes les informations dont votre application Web a besoin sur le serveur pour se
connecter à une base de données. Dreamweaver insère cette chaîne dans vos scripts de page côté
serveur afin que ceux-ci soient ultérieurement traités par votre serveur d'application.
La chaîne de connexion pourrait ressembler à ceci :
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Academy\curriculum.mdb
ou à cela :
Driver={SQL Server};Server=Socrate;Database=CentreMed;
UID=mwelby;PWD=realme
Cette section contient les rubriques suivantes :
• « Création d'une connexion à une base de données avec une chaîne de connexion », page 161
• « Définition d'une chaîne de connexion », page 162
• « Création d'une connexion OLE DB », page 163
Création d'une connexion à une base de données avec une chaîne de
connexion
Vous pouvez utiliser une chaîne de connexion pour créer une connexion à une base de données
entre votre application Web et votre base de données.
Pour créer une connexion sans DSN :
1
Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site, s'il y en a.
Connexions à des bases de données pour les développeurs ASP
161
2
Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Chaîne de connexion
personnalisée dans le menu contextuel.
La boîte de dialogue Chaîne de connexion personnalisée s'affiche comme suit.
3
Complétez les options de la boîte de dialogue, puis cliquez sur OK.
Pour plus d'informations, procédez de l'une des manières suivantes :
• Appuyez sur le bouton Aide dans la boîte de dialogue.
• Voir « Définition d'une chaîne de connexion », page 162.
Définition d'une chaîne de connexion
Une chaîne de connexion regroupe toutes les informations dont votre application Web a besoin
sur le serveur pour se connecter à une base de données. Dreamweaver insère cette chaîne dans vos
scripts de page côté serveur afin que ceux-ci soient ultérieurement traités par votre serveur
d'application.
Une chaîne de connexion aux bases de données Microsoft Access et SQL Server se compose des
paramètres suivants, séparés par des points-virgules :
indique le fournisseur de BD OLE pour votre base de données. Voici par
exemple des paramètres de fournisseurs BD OLE courants pour les bases de données Access, SQL
Server et Oracle, respectivement :
Fournisseur (Provider)
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Pour connaître le paramètre de votre fournisseur de BD OLE, reportez-vous à la documentation
du fournisseur de votre pilote ou consultez votre administrateur système.
Si vous n'incluez pas le paramètre Provider (Fournisseur), le fournisseur de BD OLE par défaut
pour ODBC sera utilisé et vous devrez préciser un pilote ODBC approprié pour votre base de
données.
Pilote (Driver) indique le pilote ODBC à utiliser si vous ne spécifiez pas de fournisseur de
BD OLE pour votre base de données.
Serveur (Server) indique le serveur hébergeant la base de données SQL Server si votre application
Web est exécutée sur un serveur différent.
Base de données (Database)
162 Chapitre 9
est le nom d'une base de données SQL Server.
DBQ est le chemin à une base de données basée sur fichier (une base de données créée dans
Microsoft Access, par exemple). Le chemin est celui sur le serveur hébergeant le fichier de base de
données.
UID
indique le nom de l'utilisateur.
PWD
indique le mot de passe de l'utilisateur.
DSN est le nom de la source de données, si toutefois
vous en utilisez une. Selon la façon dont vous
définissez le DSN sur votre serveur, vous pouvez omettre les autres paramètres de la chaîne de
connexion. Par exemple, DSN=Results peut constituer une chaîne de connexion valide si vous
définissez les autres paramètres lorsque vous créez le DSN (voir « Création d'un DSN », page
717).
Il est également possible que ces paramètres aient un nom ou une utilisation différents. Pour plus
d'informations, reportez-vous à la documentation du fournisseur de votre base de données ou
consultez votre administrateur système.
Voici un exemple de chaîne de connexion créant une connexion ODBC à une base de données
Access appelée arbres.mdb :
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Recherche\arbres.mdb
Voici un exemple de chaîne de connexion créant une connexion OLE DB à un système de base de
données SQL Server appelé Mothra et se trouvant sur un serveur du nom de Gojira :
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8
Création d'une connexion OLE DB
Vous pouvez utiliser un fournisseur de BD OLE pour communiquer avec votre base de données.
Le fait de créer une connexion OLE DB directe peut augmenter la vitesse de connexion en
éliminant l'intermédiaire ODBC entre votre application Web et la base de données. En utilisant
un fournisseur de BD OLE spécifique à la base de données, vous éliminez l'intermédiaire ODBC.
Si vous ne précisez pas de fournisseur de BD OLE pour votre base de données, ASP utilisera le
fournisseur de BD OLE par défaut pour les pilotes ODBC pour communiquer avec un pilote
ODBC, lequel communiquera à son tour avec la base de données.
OLE DB est disponible uniquement sous Windows NT, 2000 ou XP.
Différents fournisseurs OLE DB existent pour différentes bases de données. Vous pouvez obtenir
des fournisseurs OLE DB pour Microsoft Access et SQL Server en téléchargeant et en installant le
logiciel Microsoft Data Access Components (MDAC) 2.5 et 2.6 sur l'ordinateur Windows
exécutant IIS ou PWS (si nécessaire). Vous pouvez télécharger gratuitement le logiciel MDAC sur
le site Web de Microsoft à l'adresse suivante : http://www.microsoft.com/data/download.htm.
Remarque : assurez-vous que vous disposez de MDAC 2.5 avant d'installer MDAC 2.6.
Vous pouvez télécharger les fournisseurs de BD OLE pour les bases de données Oracle9i et
Oracle8i sur le site Web d'Oracle à l'adresse suivante : http://otn.oracle.com/software/tech/
windows/ole_db/content.html (enregistrement requis).
Connexions à des bases de données pour les développeurs ASP 163
Pour créer une connexion OLE DB dans Dreamweaver MX, vous devez inclure un paramètre
Provider (Fournisseur) dans une chaîne de connexion. Voici par exemple des paramètres de
fournisseurs OLE DB courants pour les bases de données Access, SQL Server et Oracle,
respectivement :
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Pour connaître le paramètre de votre fournisseur OLE DB, reportez-vous à la documentation du
fournisseur de votre pilote ou consultez votre administrateur système.
Connexion à une base de données via un fournisseur d'accès
Si vous êtes un développeur ASP travaillant avec un fournisseur d'accès Internet, il est probable
que vous ne connaissiez pas le chemin physique des fichiers que vous chargez, y compris celui de
vos fichiers de base de données. Si votre fournisseur d'accès ne définit pas de DSN pour vous ou
ne le fait pas assez rapidement, vous devez trouver un autre moyen de créer des connexions à vos
fichiers de base de données. Vous pouvez créer une connexion sans DSN à un fichier de base de
données, mais une telle connexion n'est possible que si vous connaissez le chemin d'accès
physique du fichier de base de données sur le serveur du fournisseur d'accès.
Cette section explique comment obtenir le chemin d'accès physique d'un fichier de base de
données sur un serveur en utilisant la méthode MapPath de l'objet serveur ASP. Cette section
contient les rubriques suivantes :
• « Description des chemins d'accès physiques et virtuels », page 164
• « Recherche du chemin d'accès physique d'un fichier en utilisant le chemin virtuel », page 165
• « Utilisation d'un chemin d'accès virtuel pour établir une connexion à une base de données »,
page 165
Remarque : les techniques présentées dans ce chapitre sont uniquement valables si votre base de données est
basée sur un fichier, telle que la base de données Microsoft Access, qui stocke les données dans un fichier .mdb.
Description des chemins d'accès physiques et virtuels
Lorsque vous chargez vos fichiers sur un serveur distant en utilisant Dreamweaver, ces derniers
sont placés dans un dossier situé dans l'arborescence locale du serveur. Par exemple, sur un serveur
exécutant Microsoft IIS, le chemin d'accès vers votre page d'accueil peut se présenter comme suit :
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Il s'agit du chemin d'accès physique vers votre fichier.
En revanche, l'URL permettant d'ouvrir votre fichier n'utilise pas de chemin d'accès physique.
Elle utilise le nom de serveur ou de domaine suivi d'un chemin d'accès virtuel, comme dans
l'exemple suivant :
www.plutoserve.com/jsmith/index.htm
Le chemin d'accès virtuel, /jsmith/index.htm, remplace le chemin d'accès physique,
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
164 Chapitre 9
Recherche du chemin d'accès physique d'un fichier en utilisant le chemin
virtuel
Si vous travaillez avec un fournisseur d'accès, il se peut que vous ne connaissiez pas le chemin
d'accès physique des fichiers que vous chargez. Généralement, les fournisseurs d'accès vous
fournissent un hôte FTP, parfois un répertoire hôte, ainsi qu'un nom de connexion et un mot de
passe. Ils vous indiquent également une URL pour visualiser vos pages sur Internet, telle que
www.plutoserve.com/jsmith/.
Si vous connaissez cette URL, vous pouvez obtenir le chemin d'accès virtuel d'un fichier : il s'agit
du chemin qui suit le nom du serveur ou du domaine qui figure dans une URL. Une fois que vous
connaissez le chemin d'accès virtuel, vous pouvez obtenir le chemin d'accès physique d'un fichier
sur le serveur en utilisant la méthode MapPath.
Celle-ci utilise notamment le chemin d'accès virtuel comme argument et renvoie le chemin
d'accès physique et le nom du fichier. Voici la syntaxe de la méthode :
Server.MapPath("/virtualpath")
Si le chemin virtuel d'un fichier est /jsmith/index.htm, l'expression suivante permettra d'obtenir
son chemin d'accès physique :
Server.MapPath("/jsmith/index.htm")
Vous pouvez utiliser la méthode MapPath comme suit :
1
Ouvrez une page ASP dans Dreamweaver et basculez en mode Code (Affichage > Code).
2
Saisissez l'expression suivante dans le code HTML de la page.
<%Response.Write(stringvariable)%>
3
Utilisez la méthode MapPath afin d'obtenir une valeur pour l'argument stringvariable.
Exemple :
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4
Basculez en mode Création (Affichage > Création) et activez le mode Données dynamiques
(Affichage > Données dynamiques) pour afficher la page.
La page affiche le chemin physique du fichier sur le serveur d'application. En utilisant
l'exemple fourni dans cette section, la page affiche le chemin d'accès physique suivant :
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Pour plus d'informations sur la méthode MapPath, consultez la documentation en ligne fournie
avec Microsoft IIS ou PWS.
Utilisation d'un chemin d'accès virtuel pour établir une connexion à une base
de données
Pour écrire une chaîne de connexion sans DSN dans un fichier de base de données situé sur un
serveur distant, vous devez connaître le chemin d'accès physique au fichier. Par exemple, voici une
chaîne de connexion sans DSN typique pour une base de données Microsoft Access :
Driver={Microsoft Access Driver (*.mdb)};
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si vous ne connaissez pas le chemin d'accès physique de vos fichiers sur le serveur distant, vous
pouvez l'obtenir en utilisant la méthode MapPath dans votre chaîne de connexion.
Connexions à des bases de données pour les développeurs ASP 165
Pour créer une connexion sans DSN à l'aide de la méthode MapPath :
1
Chargez le fichier de base de données sur le serveur distant.
Notez son chemin d'accès virtuel (par exemple, /jsmith/data/statistics.mdb).
2
Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Dreamweaver affiche toutes les connexions définies pour le site.
3
Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Chaîne de connexion
personnalisée dans le menu contextuel.
4
Tapez le nom de la nouvelle connexion.
Remarque : n'utilisez pas d'espaces ni de caractères spéciaux dans le nom.
5
Tapez la chaîne de connexion et utilisez la méthode MapPath pour fournir le paramètre DBQ.
Supposons que le chemin virtuel vers votre base de données Microsoft Access soit /jsmith/data/
statistics.mdb. La chaîne de connexion peut être exprimée comme suit si vous utilisez VBScript
comme langage de script :
“Driver={Microsoft Access Driver (*.mdb)};DBQ=” & Server.MapPath¬
("/jsmith/data/statistics.mdb")
L'esperluette (&) est utilisée pour concaténer (combiner) deux chaînes. La première chaîne est
entre guillemets et la deuxième est fournie par l'expression Server.MapPath. Lorsque les deux
chaînes sont combinées, la chaîne suivante est créée :
Driver={Microsoft Access Driver (*.mdb)}; ¬
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Si vous utilisez JavaScript, l'expression est identique, à ceci près que vous utilisez un signe plus
(+) au lieu d'une esperluette (&) pour concaténer les deux chaînes :
“Driver={Microsoft Access Driver (*.mdb)};DBQ=” + Server.MapPath¬
("/jsmith/data/statistics.mdb")
6
Sélectionnez l'option Utilisation du pilote sur le serveur d'évaluation.
Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions aux bases de
données utilisent le serveur d'application.
7
Cliquez sur Tester.
Dreamweaver essaie de se connecter à la base de données. Si la connexion échoue, vérifiez la
chaîne de connexion.
Si la connexion n'aboutit toujours pas, contactez votre fournisseur d'accès pour vous assurer
que le pilote de base de données que vous avez spécifié dans la chaîne de connexion est installé
sur le serveur distant. Vérifiez également que le fournisseur d'accès dispose de la version la plus
récente du pilote. Par exemple, une base de données créée dans Microsoft Access 2000 ne
fonctionnera pas avec Microsoft Access Driver 3.5. Vous devez utiliser Microsoft Access Driver,
version 4.0 ou ultérieure.
8
Cliquez sur OK.
La nouvelle connexion apparaît dans le panneau Base de données.
166 Chapitre 9
9
Mettez à jour la connexion de base de données des pages dynamiques existantes et utilisez la
nouvelle connexion avec toutes les nouvelles pages que vous créerez.
Pour mettre à jour la connexion d'une page dynamique, ouvrez la page dans Dreamweaver,
double-cliquez sur le nom du jeu d'enregistrements dans le panneau Liaison ou
Comportements de serveur, et sélectionnez la connexion que vous venez de créer dans le menu
déroulant Connexion.
Modification ou suppression d'une connexion à une base de
données
Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les
informations de connexion dans un fichier, dans le sous-dossier Connexions du dossier racine
local du site. Dreamweaver ne crée pas de connexion à la base de données pour votre application
ASP tant que vous n'avez pas défini de jeu d'enregistrements pour une page dans l'application
(voir « Définition d'un jeu d'enregistrements », page 536). Dreamweaver écrit alors le code dans
le fichier pour établir la connexion et insère une directive d'inclusion dans votre page. Au moment
de l'exécution, le serveur insère le code de connexion dans le document.
Pour mettre à jour une connexion :
1
Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle
(Macintosh) sur la connexion et choisissez Modifier la connexion dans le menu contextuel, qui
se présente comme suit.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement
toutes les pages du site qui utilisent la connexion.
Connexions à des bases de données pour les développeurs ASP 167
Pour supprimer une connexion :
1
Ouvrez une page ASP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Confirmez la suppression.
Pour éviter les erreurs dues à la suppression d'une connexion, mettez à jour tous les jeux
d'enregistrements qui utilisent l'ancienne connexion en double-cliquant sur le nom du jeu
d'enregistrements dans le panneau Liaisons et en choisissant une nouvelle connexion.
168 Chapitre 9
CHAPITRE 10
Connexions à des bases de données pour les
développeurs JSP
Pour utiliser une base de données avec une application JSP (JavaServer Pages), vous devez créer
une connexion à une base de données dans Macromedia Dreamweaver MX. Ce chapitre vous
indique la marche à suivre.
Pour réaliser les opérations présentées dans ce chapitre, vous devez avoir configuré une application
JSP (voir « Configuration d'une application Web », page 133). Une base de données doit
également être installée sur votre ordinateur local ou sur un système à partir duquel vous disposez
d'un accès réseau ou FTP.
Ce chapitre contient les sections suivantes :
•
•
•
•
« Description des connexions JSP », page 169
« Connexion à une base de données », page 170
« Connexion via un pilote ODBC », page 172
« Modification ou suppression d'une connexion à une base de données », page 175
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de
Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les
bases de données et les connexions aux bases de données, voir « Guide du débutant en base de
données », page 695.
Description des connexions JSP
Une application JSP doit être connectée à une base de données via un pilote JDBC. Le pilote joue
le rôle de traducteur pour permettre à l'application JSP de communiquer avec la base de données.
Pour plus d'informations sur JDBC et le rôle des pilotes de base de données, voir « Interfaçage
avec la base de données », page 702.
Vous devez indiquer certaines valeurs de paramètres pour vous connecter via votre pilote JDBC.
Pour plus d'informations, voir « A propos des paramètres de connexion JDBC », page 171. Pour
connaître les valeurs de paramètres spécifiques à votre pilote, reportez-vous à la documentation de
votre fournisseur ou contactez votre administrateur système.
Vous pouvez également utiliser un pilote ODBC (et également un DSN Windows) si vous
disposez d'un pilote JDBC-ODBC Bridge. Pour plus d'informations, voir « Connexion via un
pilote ODBC », page 172.
169
Connexion à une base de données
Cette section explique comment se connecter à une base de données dans le cadre du
développement d'une application JSP dans Dreamweaver MX.
Pour réaliser les opérations présentées dans cette section, un serveur d'application JSP fonctionne
sur un ordinateur local ou distant. (Pour la plupart des utilisateurs Macintosh et un grand nombre
d'équipes de développement, le serveur d'application JSP fonctionne sur un serveur de
développement distinct.) Pour plus d'informations, voir « Configuration d'une application
Web », page 133.
Avant de vous connecter à une base de données, vous devez disposer d'un pilote JDBC pour celleci.
Une fois installé, le pilote vous permet de vous connecter à la base de données. Pour obtenir des
instructions, voir « Création d'une connexion à une base de données pour JSP », page 170.
Obtention d'un pilote JDBC pour votre base de données
Assurez-vous que vous disposez d'un pilote JDBC pour votre base de données avant d'essayer de
créer une connexion à une base de données. Certains pilotes JDBC incluent le pilote Oracle Thin
JDBC, le pilote Oracle Java et les pilotes i-net JDBC pour Microsoft SQL Server.
Les fournisseurs de systèmes de bases de données tels qu'Oracle incluent souvent des pilotes avec
leurs systèmes. Vous pouvez également acheter des pilotes chez des fournisseurs tiers. Par exemple,
vous pouvez obtenir un pilote JDBC pour Microsoft SQL Server à partir du site i-net software à
l'adresse suivante : http://www.inetsoftware.de/English/Produkte/JDBC_Overview/default.htm.
Sun fournit également une base de données de recherche des pilotes JDBC et de leurs fournisseurs
sur son site Web à l'adresse suivante : http://industry.java.sun.com/products/jdbc/drivers.
Une fois que vous disposez d'un pilote JDBC pour votre base de données, vous pouvez créer une
connexion à une base de données.
Création d'une connexion à une base de données pour JSP
Après avoir installé un pilote JDBC adapté pour votre base de données sur l'ordinateur exécutant
votre serveur d'application, vous pouvez créer une connexion à une base de données dans
Dreamweaver.
Pour créer une connexion à une base de données pour JSP :
1
Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données
(Fenêtre > Bases de données).
Dreamweaver affiche les connexions définies pour le site.
2
Cliquez sur le bouton plus (+) et choisissez votre pilote dans le menu contextuel.
Si votre pilote ne figure pas dans la liste, choisissez Connexion JDBC personnalisée.
Une boîte de dialogue de connexion s'affiche.
3
Saisissez les paramètres de connexion dans la boîte de dialogue Connexion.
Pour plus d'informations, voir « A propos des paramètres de connexion JDBC », page 171.
4
Indiquez l'emplacement du pilote JDBC que vous souhaitez utiliser.
170 Chapitre 10
• Si votre pilote JDBC est installé sur le même ordinateur que Dreamweaver, sélectionnez
l'option Utilisation du pilote sur cette machine.
• Si votre pilote JDBC n'est pas installé sur le même ordinateur que Dreamweaver, sélectionnez
l'option Utilisation du pilote sur le serveur d'évaluation.
Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions aux bases de
données utilisent le serveur d'application.
5
Cliquez sur Tester.
Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, vérifiez
les paramètres de connexion. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du
dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier
de traitement des pages dynamiques », page 140).
6
Cliquez sur OK.
La nouvelle connexion s'affiche dans le panneau Bases de données.
A propos des paramètres de connexion JDBC
Les connexions JDBC se composent généralement de quatre paramètres : le pilote, le nom
d'utilisateur, le mot de passe et l'URL (qui spécifie l'emplacement de la base de données). En
général, les valeurs du paramètre Pilote et du paramètre URL dépendent du pilote.
Cette section explique comment définir des paramètres de connexion dans Dreamweaver en
utilisant le pilote Oracle Thin JDBC comme exemple. Pour connaître les paramètres de
connexion d'autres pilotes, consultez la documentation du fournisseur du pilote.
Le pilote Oracle Thin JDBC prend en charge les bases de données Oracle. Si vous souhaitez
utiliser ce pilote pour vous connecter à votre base de données Oracle, cliquez sur le bouton plus
(+) dans le panneau Bases de données et choisissez le pilote Oracle Thin Driver (Oracle) dans le
menu contextuel. La boîte de dialogue suivante, en partie renseignée, s'affiche :
Saisissez un nom de connexion et remplacez les espaces réservés (entre parenthèses) par des
paramètres de connexion valides. Pour [nom d'hôte], saisissez l'adresse IP ou le nom attribué au
serveur de base de données par l'administrateur système. Pour l'espace réservé [sid], saisissez
l'identificateur du système de base de données. Si vous avez plus d'une base de données Oracle sur
le même système, utilisez le SID pour les distinguer.
Connexions à des bases de données pour les développeurs JSP
171
Par exemple, si votre serveur s'appelle Aristote, que la base de données utilise le port 1521 et que
vous avez défini un SID de base de données appelé patients sur ce serveur, entrez les valeurs de
paramètres suivantes dans Dreamweaver :
Connexion via un pilote ODBC
Bien que les applications JSP communiquent en principe avec les bases de données via des pilotes
JDBC, elles peuvent communiquer via les pilotes ODBC si vous disposez d'un pilote de pont
JDBC-ODBC. L'utilisation d'un pilote ODBC vous permet d'utiliser un DSN Windows, ce qui
simplifie le processus de création de la connexion. Le pilote de pont joue le rôle de traducteur
entre votre application JSP, qui utilise la connectivité JDBC, et votre pilote ODBC, qui utilise la
connectivité ODBC. Ce canal de communication permet à votre application JSP de
communiquer avec la base de données.
Ce type de connexion présente deux grands avantages. Tout d'abord, vous pouvez utiliser les
pilotes ODBC gratuits de Microsoft. Ensuite, vous pouvez utiliser un DSN pour simplifier le
processus de création de la connexion.
Vous devez vous conformer aux exigences suivantes pour établir une connexion via un pilote
ODBC :
• Votre serveur d'application JSP doit fonctionner sur un ordinateur exécutant Windows.
• Un pilote ODBC pour votre base de données doit être installé sur l'ordinateur exécutant
Windows qui héberge le serveur d'application. Pour plus d'informations, voir « Vérification du
pilote ODBC », page 173.
• Un pilote de pont JDBC-ODBC doit être installé sur l'ordinateur Windows qui héberge le
serveur d'application. Pour plus d'informations, voir « Installation du pilote JDBC-ODBC
Bridge de Sun », page 173.
Si ces conditions sont respectées, vous pouvez établir une connexion via un pilote ODBC. Pour
obtenir des instructions, voir « Création d'une connexion ODBC », page 173.
172 Chapitre 10
Vérification du pilote ODBC
Assurez-vous qu'un pilote ODBC pour votre base de données est installé sur l'ordinateur
exécutant Windows qui héberge le serveur d'application JSP. Pour savoir si un pilote ODBC est
installé, voir « Affichage des pilotes ODBC installés sur un système Windows », page 705. Si un
pilote adapté n'est pas installé, vous pouvez télécharger et installer Microsoft Data Access
Components (MDAC) 2.5 et 2.6 sur l'ordinateur exécutant le serveur d'application JSP. Vous
pouvez télécharger gratuitement MDAC à partir du site Web de Microsoft à l'adresse suivante :
http://www.microsoft.com/data/download.htm. Ces logiciels contiennent les derniers pilotes
ODBC de Microsoft.
Remarque : installez MDAC 2.5 avant d'installer MDAC 2.6.
Si vous disposez d'un pilote ODBC pour votre base de données, vous pouvez installer un pilote
JDBC-ODBC.
Installation du pilote JDBC-ODBC Bridge de Sun
Pour vous connecter via un pilote ODBC, vous devez installer le pilote JDBC-ODBC Bridge de
Sun sur l'ordinateur Windows exécutant le serveur d'application JSP. Ce pilote est fourni avec
Java 2 SDK de Sun, Standard Edition, pour Windows.
Pour savoir si vous disposez déjà de Java 2 SDK avec le pilote, vérifiez dans les dossiers c:\jdk1.2.2
ou c:\jdk1.3 de votre disque dur.
Remarque : Java 1.2.2 et 1.3 sont les mêmes que Java 2.
Si vous ne disposez pas de SDK, vous pouvez le télécharger à partir du site Web de Sun à l'adresse
suivante : http://java.sun.com/j2se/ et l'installer. Le pilote s'installe automatiquement lorsque
vous installez le SDK.
Bien qu'il soit parfaitement adapté au développement avec des systèmes de bases de données bas
de gamme tels que Microsoft Access, le pilote JDBC-ODBC Bridge de Sun n'est pas conçu pour
la production. Par exemple, il ne permet la connexion à la base de données que d'une seule page
JSP à la fois (en d'autres termes, il ne prend pas en charge l'utilisation simultanée par plusieurs
threads). Pour plus d'informations sur les limites du pilote, voir l'article 12409 sur le centre de
support Macromedia à l'adresse suivante : http://www.macromedia.com/go/jdbc-odbc_problems.
Après avoir installé le pilote de pont, vous pouvez créer la connexion à une base de données.
Création d'une connexion ODBC
Avant de vous connecter via un pilote ODBC, assurez-vous que les pilotes ODBC et JDBCODBC Bridge de Sun sont installés sur l'ordinateur Windows exécutant le serveur d'application
JSP.
Pour vous connecter à JSP via un pilote ODBC :
1
Définissez un DSN sur le système Windows hébergeant votre serveur d'application.
Pour obtenir des instructions, voir « Création d'un DSN », page 717.
2
Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre
> Bases de données).
Le panneau affiche les connexions définies pour ce site.
Connexions à des bases de données pour les développeurs JSP 173
3
Cliquez sur le bouton plus (+) dans le panneau et choisissez Pilote JDBC-ODBC Sun (Base de
données ODBC) dans le menu contextuel.
La boîte de dialogue Pilote JDBC-ODBC Sun (Base de données ODBC) s'affiche.
4
Tapez le nom de la nouvelle connexion.
Remarque : n'utilisez pas d'espaces ni de caractères spéciaux dans le nom.
5
Remplacez l'espace réservé [odbc dsn] dans le champ URL par le DSN que vous avez défini à
l'étape 1.
Dans le champ URL, vous devez pouvoir lire ce qui suit :
jdbc:odbc:myDSN
6
Indiquez le nom d'utilisateur et le mot de passe pour accéder à la base de données.
Si vous n'avez pas besoin de nom d'utilisateur ou de mot de passe, laissez les champs vides. Par
exemple, si votre DSN a pour nom Acme et que vous n'avez pas besoin d'un nom d'utilisateur
ou d'un mot de passe pour accéder à la base de données, saisissez les valeurs de paramètres
suivantes :
Pilote : sun.jdbc.odbc.JdbcOdbcDriver
URL : jdbc:odbc:Acme
Nom d'utilisateur :
Mot de passe :
7
Indiquez l'emplacement du pilote JDBC-ODBC Bridge.
• Si le pilote est installé sur le même ordinateur que Dreamweaver, sélectionnez l'option
Utilisation du pilote sur cette machine.
• Si le pilote n'est pas installé sur le même ordinateur que Dreamweaver, sélectionnez l'option
Utilisation du pilote sur le serveur d'évaluation.
Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions à des bases de
données utilisent le serveur d'application.
8
Cliquez sur Tester.
Dreamweaver essaie de se connecter à la base de données. Si la connexion échoue, vérifiez le
DSN et les autres paramètres de connexion. Si la connexion n'aboutit toujours pas, vérifiez les
paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir
« Définition du dossier de traitement des pages dynamiques », page 140).
9
Cliquez sur OK.
La nouvelle connexion apparaît dans le panneau Base de données.
174 Chapitre 10
Modification ou suppression d'une connexion à une base de
données
Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les
informations de connexion dans un fichier, dans le sous-dossier Connexions du dossier racine
local du site. Dreamweaver ne crée pas de connexion à une base de données pour votre application
JSP tant que vous n'avez pas défini de jeu d'enregistrements pour une page dans l'application
(voir « Définition d'un jeu d'enregistrements », page 536). Dreamweaver écrit alors le code dans
le fichier pour établir la connexion et insère une directive d'inclusion dans votre page. Au moment
de l'exécution, le serveur insère le code de connexion dans le document.
Pour mettre à jour une connexion :
1
Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données
(Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Modifier la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement
toutes les pages du site qui utilisent la connexion.
Si vous renommez une connexion, mettez à jour tous les jeux d'enregistrements utilisant l'ancien
nom de connexion en double-cliquant sur chaque jeu dans le panneau Liaisons et en choisissant le
nouveau nom de connexion dans la boîte de dialogue Jeu d'enregistrements.
Pour supprimer une connexion :
1
Ouvrez une page JSP dans Dreamweaver, puis allez dans le panneau Bases de données
(Fenêtre > Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Confirmez la suppression.
Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu
d'enregistrements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le
panneau Liaisons et en choisissant une nouvelle connexion dans la boîte de dialogue Jeu
d'enregistrements.
Connexions à des bases de données pour les développeurs JSP 175
176 Chapitre 10
CHAPITRE 11
Connexions à des bases de données pour les
développeurs PHP
Pour utiliser une base de données avec une application PHP (Hypertext Preprocessor), vous devez
créer une connexion à une base de données dans Macromedia Dreamweaver MX. Ce chapitre
vous indique la marche à suivre.
Pour le développement PHP, Dreamweaver prend en charge uniquement le système de base de
données MySQL. Les autres systèmes de base de données, tels que Microsoft Access ou Oracle ne
sont pas pris en charge. MySQL est un logiciel ouvert que vous pouvez télécharger gratuitement à
partir d'Internet à des fins non commerciales. Pour plus d'informations, voir le site Web MySQL,
à l'adresse http://www.mysql.com/downloads/mysql.html.
Ce chapitre suppose que vous avez configuré une application PHP (voir « Configuration d'une
application Web », page 133). Une base de données MySQL doit également être installée sur
votre ordinateur local ou sur un système auquel vous pouvez accéder en réseau ou par FTP.
Ce chapitre contient les sections suivantes :
• « Connexion à une base de données », page 177
• « Modification ou suppression d'une connexion à une base de données », page 178
Pour vous connecter à l'exemple de base de données installé avec Dreamweaver, voir l'aide de
Dreamweaver (Aide > Utilisation de Dreamweaver). Pour tout complément d'information sur les
bases de données et les connexions aux bases de données, voir « Guide du débutant en base de
données », page 695.
Connexion à une base de données
Cette section explique comment se connecter à une base de données dans le cadre du
développement d'une application PHP dans Dreamweaver. Elle suppose que vous disposez d'une
ou plusieurs bases de données MySQL et que le serveur MySQL est lancé.
Pour créer une connexion à une base de données à votre base de données MySQL :
1
Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
2
Cliquez sur le bouton plus (+) dans le panneau et choisissez Connexion MySQL dans le menu
contextuel.
La boîte de dialogue Connexion MySQL s'ouvre.
177
3
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.
La nouvelle connexion s'affiche dans le panneau Bases de données.
Modification ou suppression d'une connexion à une base de
données
Lorsque vous créez une connexion à une base de données, Dreamweaver enregistre les
informations de connexion dans un fichier, dans le sous-dossier Connexions du dossier racine
local du site. Dreamweaver ne crée pas de connexion à une base de données pour votre application
PHP tant que vous n'avez pas défini de jeu d'enregistrements pour une page dans l'application
(voir « Définition d'un jeu d'enregistrements », page 536). Dreamweaver écrit alors le code dans
le fichier pour établir la connexion et insère une directive d'inclusion dans votre page. Au moment
de l'exécution, le serveur insère le code de connexion dans le document.
Pour mettre à jour une connexion :
1
Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Modifier la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Effectuez vos modifications puis cliquez sur OK.
Dreamweaver met automatiquement à jour le fichier inclus, ce qui actualise automatiquement
toutes les pages du site qui utilisent la connexion.
Pour supprimer une connexion :
1
Ouvrez une page PHP dans Dreamweaver, puis ouvrez le panneau Bases de données (Fenêtre >
Bases de données).
Une liste de connexions s'affiche dans le panneau.
2
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et
la touche Contrôle (Macintosh) sur la connexion et choisissez Supprimer la connexion dans le
menu contextuel.
La boîte de dialogue que vous avez utilisée pour créer la connexion s'affiche.
3
Confirmez la suppression.
Pour éviter les erreurs consécutives à la suppression d'une connexion, mettez à jour chaque jeu
d'enregistrements utilisant l'ancienne connexion en double-cliquant sur le nom du jeu dans le
panneau Liaisons et en choisissant une nouvelle connexion dans la boîte de dialogue Jeu
d'enregistrements.
178 Chapitre 11
Utilisez les outils de codage avancé de Dreamweaver pour
créer ou modifier des pages.
Cette partie du manuel contient les chapitres suivants :
• Chapitre 12, « Configuration d'un environnement de
codage »
• Chapitre 13, « Codage dans Dreamweaver »
• Chapitre 14, « Optimisation et débogage de code »
• Chapitre 15, « Modification du code en mode Création »
Partie III
Partie III
Utilisation du code de
page
CHAPITRE 12
Configuration d'un environnement de codage
Vous pouvez adapter l'environnement de codage de Macromedia Dreamweaver MX à 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 181
« Définition des préférences d'affichage », page 182
« Définition des préférences de codage », page 183
« Personnalisation des raccourcis clavier », page 187
« Définition des préférences de codage », page 183
« Définition des préférences du validateur », page 187
« Gestion des bibliothèques de balises », page 188
« Importation de balises personnalisées dans Dreamweaver », page 191
« Utilisation d'un éditeur HTML externe avec Dreamweaver », page 193
Affichage du code
Vous pouvez visualiser le code source du document en cours 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.
Remarque : le mode Code et l'inspecteur de code partagent la même fonctionnalité.
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 afficher le code dans une fenêtre distincte :
Choisissez Fenêtre > Autres > Inspecteur de 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.
181
2
Pour afficher la page au premier plan, choisissez Affichage > Mode Création en haut.
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 et d'appuyer sur la touche F5.
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 au moins une page en mode Code et dans l'inspecteur de code.
2
Choisissez Affichage > Options d'affichage de code.
Les options définies antérieurement sont précédées d'une coche dans le menu contextuel qui
apparaît.
3
Choisissez parmi les options suivantes :
•
Retour automatique à la ligne
•
•
Numéros de lignes
renvoie le code à la ligne afin qu'il soit visible sans qu'il soit
nécessaire de le faire défiler horizontalement. Cette option n'insère aucun saut de ligne ; elle a
pour seule fonction de simplifier la consultation du code.
affiche le numéro des lignes de code sur le côté.
Mettre en surbrillance le code HTML incorrect active dans Dreamweaver le surlignage en jaune
du code HTML incorrect non pris en charge par les navigateurs. Dès la sélection d'une balise
incorrecte, l'inspecteur des propriétés affiche des instructions pour corriger l'erreur.
•
Coloration de la syntaxe
•
Retrait auto
active et désactive l'application d'une couleur au code. Pour modifier
le modèle de coloration, voir « Définition des préférences de coloration de code », page 186.
automatise la mise en retrait du code dès lors que vous appuyez sur la touche
Entrée pendant la rédaction du code. Pour modifier l'espacement ou les balises de mise en
retrait automatique, voir « Définition des préférences de formatage de code », page 183.
La sélection d'une option cochée la désactive. A défaut, l'option est définie.
182 Chapitre 12
Définition des préférences de codage
Dreamweaver vous permet de définir les préférences de codage suivantes :
• Les préférences de formatage du code déterminent les options de formatage de code courantes,
telles que la longueur de ligne et la mise en retrait. Voir « Définition des préférences de
formatage de code », page 183. Vous pouvez également appliquer vos nouvelles préférences de
mise en forme aux documents HTML existants. Voir « Application de nouvelles préférences de
formatage aux documents existants », page 185.
• Les préférences d'indicateurs de code vous permettent d'activer ou de désactiver les indicateurs
de code, mais aussi de les personnaliser. Les indicateurs de code vous fournissent une aide
immédiate pendant la saisie du code en mode Code. Si, par exemple, vous tapez un crochet
ouvrant (<), un menu vous propose toutes les balises compatibles. Pour vous éviter de saisir le
reste de la balise, sélectionnez une entrée du menu et appuyez sur la touche Entrée pour
l'insérer automatiquement. Voir « Définition des préférences d'indicateurs de code », page 185.
• Les préférences de correction du code déterminent les éventuelles modifications que
Dreamweaver apporte au code lorsque vous ouvrez un document HTML ou de script. Voir
« Définition des préférences de correction de code », page 185.
• Les préférences de coloration du code définissent la mise en forme et la coloration de la syntaxe
spécifiques aux éléments de code tels que les balises, les commentaires et les scripts. Voir
« Définition des préférences de coloration de code », page 186.
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 188).
Définition des préférences de formatage de 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 formatage de la source. Pour plus d'informations, voir « Application de
nouvelles préférences de formatage aux documents existants », page 185.
Pour définir les préférences de formatage de code :
1
Choisissez Edition > Préférences > Format de code ou Dreamweaver > Préférences > Format
de code (Mac OS X).
La boîte de dialogue Format de code s'affiche.
Configuration d'un environnement de codage 183
2
Ajustez les paramètres suivants dans la boîte de dialogue :
Utiliser
spécifie si les retraits doivent être composés d'espaces ou de tabulations.
Taille du retrait détermine
la taille des mises en retraits, en espaces ou en tabulations suivant le
paramétrage du champ Utiliser.
Taille de tabulation
détermine la taille des tabulations (exprimées en espaces de caractères).
Renvoi à la ligne auto ajoute
des retours de chariot « permanents » lorsqu'une ligne occupe
toute la largeur de colonne spécifiée. (Dreamweaver insère des retours de chariot uniquement
lorsqu'ils ne modifient pas l'apparence du document dans un navigateur. Certaines lignes
peuvent donc être plus longues que la valeur indiquée dans l'option Renvoi à la ligne auto). A
l'inverse, l'option Renvoi à la ligne du mode Code (ou de l'inspecteur de code) renvoie
simplement à la ligne les lignes dont la longueur dépasse la largeur de la fenêtre.
Type de saut de ligne permet d'indiquer le type de serveur distant (Windows, Macintosh ou
UNIX) qui hébergera votre site. Le choix du type de caractères de saut de ligne approprié (CR,
CR/LF, LF) garantit que votre code source HTML s'affiche correctement lorsqu'il est affiché à
partir du serveur distant. (Pour les transferts par FTP, ce paramètre ne s'applique qu'en mode
de transfert binaire ; le mode de transfert ASCII de Dreamweaver ignore ce paramètre. Si vous
téléchargez (en réception) des fichiers en mode ASCII, Dreamweaver définit les sauts de ligne
en fonction du système d'exploitation de votre ordinateur ; si vous transférez des fichiers en
mode ASCII, les sauts de ligne sont toujours définis comme CR/LF.) Ce paramètre est
également utile lorsque vous travaillez avec un éditeur de texte externe ne reconnaissant que
certains types de saut de ligne. Par exemple, utilisez CR/LF (Windows) si votre éditeur de texte
est le Bloc-Notes de Windows, et CR (Macintosh) s'il s'agit de SimpleText.
Casse de balise par défaut et Casse d'attribut par défaut contrôlent l'usage des majuscules dans
les noms de balises et d'attributs. Ces options s'appliquent aux balises et aux attributs que vous
insérez ou que vous modifiez dans la fenêtre de document, mais ni aux balises et attributs que
vous tapez directement dans le mode Code (ou l'inspecteur de code), ni aux balises et attributs
d'un document que vous ouvrez (sauf, dans ce dernier cas, si vous avez également activé l'une
des options Remplacer la casse de).
Remplacer la casse de : Balises et Attributs spécifie s'il faut toujours convertir les noms de
balises et d'attributs dans la casse spécifiée, même lors de l'ouverture d'un document HTML
existant. Lorsque vous activez l'une de ces options, les balises et les attributs des documents
déjà ouverts sont immédiatement convertis dans la casse indiquée, et il en sera de même dans
tous les documents que vous ouvrirez par la suite (du moins tant que vous n'aurez pas désactivé
cette option). Les balises et les attributs que vous tapez en mode Code (ou dans l'inspecteur de
code) ou dans Quick Tag Editor ou que vous insérez à partir de la barre Insertion, sont
également convertis dans la casse spécifiée. Par exemple, si vous voulez que les noms des balises
soient toujours convertis en minuscules, spécifiez minuscules dans Casse des balises, et activez
l'option Remplacer la casse de : Balises. Lorsque vous ouvrez ensuite un document contenant
des noms de balises en majuscules, Dreamweaver les convertit en minuscules.
Centrer spécifie
si des éléments doivent être centrés à l'aide de div align="center" ou de
Ces deux balises font partie de la spécification HTML 4.0 Transitional, mais center
est pris en charge par un éventail plus large de navigateurs.
center.
184 Chapitre 12
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
qu'aux documents nouvellement créés dans Dreamweaver. Pour appliquer ces nouvelles
préférences aux documents existants, utilisez la commande Appliquer le formatage de la source.
Pour appliquer les nouvelles préférences de formatage à un document existant :
1
Ouvrez le document dans Dreamweaver.
2
Choisissez Commandes > Appliquer le formatage de la 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 tapez du code. Pour définir les préférences, choisissez Edition >
Préférences > Indicateurs de code ou Dreamweaver > Préférences > Indicateurs de code
(Mac OS X).
Conseil : même si l'affichage des indicateurs de code est désactivé, vous pouvez afficher un indicateur en mode
Code ou dans l'inspecteur de code en appuyant sur les touches Contrôle-Espace sous Windows.
Pour définir les préférences d'indicateur de code :
1
Choisissez Edition > Préférences > Indicateurs de code ou Dreamweaver > Préférences >
Indicateurs de code (Mac OS X).
La boîte de dialogue Indicateurs de code s'affiche.
2
Ajustez les paramètres suivants dans la boîte de dialogue :
Activer l'achèvement automatique des balises
active l'achèvement automatique des balises.
active les indicateurs de code pendant la saisie du code dans le
mode Code. Réglez le curseur Délai pour définir le délai (en secondes) qui s'écoule avant
l'apparition des indicateurs appropriés.
Activer les indicateurs de code
Menus définit précisément le type d'indicateur de code à afficher pendant la saisie. Libre à vous
d'utiliser tous les menus ou une partie seulement.
Définition des préférences de correction de code
Les préférences de correction de code déterminent le comportement de Dreamweaver lors de
l'ouverture de documents (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é.
Si vous importez un document HTML depuis Microsoft Word, vous pouvez utiliser la
commande Nettoyer HTML Word pour supprimer le code HTML inutile. Pour plus
d'informations, voir « Nettoyage de Microsoft Word HTML » dans l'aide de Dreamweaver
(Aide > Utilisation de Dreamweaver).
Pour définir les préférences de correction de code :
1
Choisissez Edition > Préférences > Correction du code ou Dreamweaver > Préférences >
Correction du code (Mac OS X).
La boîte de dialogue Correction du code s'affiche.
Configuration d'un environnement de codage 185
2
Ajustez les paramètres suivants dans la boîte de dialogue :
Corriger les balises incorrectement imbriquées et non fermées corrige les balises qui se
chevauchent. Par exemple, <B><I>texte</B></I> est réécrit comme <B><I>texte</I></B>.
Cette option insère également des guillemets et des crochets de fermeture s'ils sont absents.
Renommer les éléments de formulaire lors du collage
garantit l'absence de noms d'objets de
formulaire en double.
Supprimer balises de fermeture superflues
supprime les balises de fermeture auxquelles ne
correspond pas de balise d'ouverture.
affiche un récapitulatif des codes
HTML techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif
indique l'emplacement du problème (à l'aide des numéros de ligne et de colonne), pour vous
permettre de vérifier la correction et veiller à ce qu'elle produise l'effet voulu.
M'avertir lors de la correction ou de la suppression de balises
Ne jamais corriger le code : Dans les fichiers avec extensions permet d'empêcher
Dreamweaver de corriger le code dans les fichiers portant les extensions indiquées. Cette
option est particulièrement utile pour les fichiers contenant des balises propriétaires.
Coder caractères spéciaux dans les URL à l'aide de %
garantit la présence exclusive de
caractères autorisés dans l'URL.
Coder <, >, & et " dans les valeurs d'attributs à l'aide de &
garantit la présence exclusive de
caractères autorisés dans l'URL.
Définition des préférences de coloration de code
La coloration de la syntaxe vous permet d'identifier les blocs de code dans des documents
volumineux. Les préférences de coloration de la syntaxe s'appliquent aux éléments de code tels
que les commentaires et les scripts, ainsi qu'aux balises en général. Pour définir les préférences de
coloration de balises spécifiques, modifiez la définition de cette balise dans l'éditeur de la
bibliothèque de balises. Pour plus d'informations, voir « Modification de bibliothèques, de balises
et d'attributs », page 189.
Pour définir les préférences de coloration de code :
1
Choisissez Edition > Préférences > Coloration du code ou Dreamweaver > Préférences >
Coloration du code (Mac OS X).
2
Choisissez un type de document, puis cliquez sur Modifier le modèle de coloration.
La boîte de dialogue Modifier le modèle de coloration s'affiche.
3
Sélectionnez un élément, puis définissez la couleur de son texte, celle de son arrière-plan et son
style (gras, italique ou souligné).
Vous pouvez prévisualiser le modèle de coloration dans le volet Aperçu.
4
Lorsque vous avez terminé, cliquez sur OK.
186 Chapitre 12
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, Contrôle-Entrée pour insérer un
saut de ligne, Contrôle-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 « Utilisation de l'éditeur de raccourcis clavier », page 52.
Ouverture de fichiers en mode Code par défaut
Vous pouvez configurer Dreamweaver pour qu'il ouvre automatiquement les fichiers portant
certaines extensions en mode Code, et non en mode Création.
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 modifier le fichier et l'enregistrer en tant que fichier HTML ou
non HTML.
Pour définir le mode par défaut des fichiers non HTML :
1
Choisissez Edition > Préférences > Types de fichiers/Editeurs ou Dreamweaver > Préférences
> Types de fichiers/Editeurs (Mac OS X).
2
Dans la zone de texte Ouvrir en mode Code, entrez les extensions de nom de fichier que vous
voulez ouvrir automatiquement en mode Code. Insérez un espace entre chaque type de fichier.
Les extensions de fichier par défaut répertoriées sont .js, .txt et .asa. Vous pouvez en ajouter autant
que vous le voulez.
Définition des préférences du validateur
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 213). 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 > Programme de validation ou Dreamweaver > Préférences
> Programme de validation (Mac OS X).
2
Sélectionnez les bibliothèques de balises à utiliser pour la validation.
Certaines bibliothèques de balises sont imbriquées. Si, par exemple, vous choisissez
HTML 4.0, les entrées HTML 3.2 et HTML 2.0 sont sélectionnées automatiquement
puisque, sans elles, la définition de HTML 4.0 demeure incomplète.
Remarque : si vous validez à la fois CFML et HTML dans un seul et même document, le validateur est incapable
d'interpréter le dièse (#). En effet, dans le langage CFML, le signe # désigne une erreur tandis que le double
signe ## est correct ; dans le langage HTML, à l'inverse, ## est une erreur tandis que # est correct.
3
Cliquez sur le bouton Options.
La boîte de dialogue Options du programme de validation s'affiche.
4
Activez l'option Afficher pour tous les types d'erreur que le validateur doit signaler dans son
rapport.
5
Sélectionnez les éléments à faire vérifier par le validateur.
Configuration d'un environnement de codage 187
6
Cliquez sur OK pour refermer la boîte de dialogue Options du programme de validation, puis
de nouveau sur OK pour fermer la boîte de dialogue Préférences.
Gestion des bibliothèques de balises
Vous pouvez utiliser l'éditeur de bibliothèques de balises pour gérer les bibliothèques de balises
dans Dreamweaver. L'éditeur de bibliothèques 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.
Pour ouvrir l'éditeur de bibliothèques de balises, choisissez Edition > Bibliothèques de balises.
L'éditeur de la bibliothèque de balises s'affiche comme suit. Le contenu de cette boîte de dialogue
varie selon la balise sélectionnée.)
Cette section contient les rubriques suivantes :
• « Ajout de bibliothèques, de balises et d'attributs », page 188
• « Modification de bibliothèques, de balises et d'attributs », page 189
• « Suppression de bibliothèques, de balises et d'attributs », page 191
Voir aussi « Importation de balises personnalisées dans Dreamweaver », page 191.
Ajout de bibliothèques, de balises et d'attributs
L'éditeur de bibliothèques 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 191.
188 Chapitre 12
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, PHP Tags).
3
Cliquez sur OK.
Pour ajouter une ou plusieurs balises à la 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 Nouvelles balises.
La boîte de dialogue Nouvelles balises s'affiche.
2
Dans le menu déroulant Bibliothèque de balises, choisissez une bibliothèque de balises (par
exemple, CFML Tags).
Par défaut, la bibliothèque de balises sélectionnée dans l'éditeur de balises apparaît dans la zone
Bibliothèque de balises.
3
Dans la zone de texte Noms des balises, entrez le nom de la balise.
Si vous ajoutez plusieurs balises, séparez les noms de balises par une virgule suivie d'un espace
(par exemple, cfgraph, cfgraphdata).
4
Pour ajouter chacune des balises avec la balise de fin correspondante (</...>), activez la case à
cocher Avoir des balises de fin correspondantes.
5
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
Dans le menu déroulant Bibliothèque de balises, choisissez une bibliothèque de balises.
Par défaut, la bibliothèque de balises sélectionnée dans l'éditeur de balises apparaît dans la zone
de texte Bibliothèque de balises.
3
Dans le menu déroulant Balise, choisissez une balise (par exemple, cfgraph).
Par défaut, la balise sélectionnée dans l'éditeur de balises apparaît dans la zone Balise.
4
Dans la zone de texte Noms des attributs, entrez le nom de l'attribut (par exemple, type).
Si vous ajoutez plusieurs attributs, séparez les noms d'attributs par une virgule suivie d'un
espace.
5
Cliquez sur OK.
Modification de bibliothèques, de balises et d'attributs
Vous pouvez utiliser l'éditeur de bibliothèques 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).
Configuration d'un environnement de codage 189
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 dans le menu déroulant Balises.
2
Dans la zone de texte Utilisé dans, sélectionnez tous les types de document qui seront utilisés
par la bibliothèque de balises.
Les balises de la bibliothèque ne sont disponibles que dans les types de documents que vous
venez de choisir.
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.
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), ouvrez une bibliothèque de balises dans le menu déroulant Balises et sélectionnez une
balise.
2
Définissez les options de format de balise suivantes :
•
•
Sauts de ligne détermine
•
Casse
•
Défaut
l'endroit où Dreamweaver insère les sauts de ligne pour une balise.
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.
Sommaire
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. Précisez comment Dreamweaver insérera la balise
(par exemple, getProperty), puis cliquez sur OK.
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 le menu déroulant Balises et sélectionnez un
attribut de balise.
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, spécifiez dans la boîte de dialogue Nom d'attribut en
minuscules/majuscules comment Dreamweaver insérera l'attribut (par exemple, onClick).
Cliquez sur OK.
Cliquez sur le lien Défaut pour définir la casse par défaut pour tous les attributs.
3
Dans le menu déroulant Type d'attribut, sélectionnez le type de l'attribut.
Si vous choisissez Enuméré, entrez toutes les valeurs d'attribut autorisées dans la zone de
texte Valeurs, en veillant à les séparer par une virgule suivie d'un espace. Par exemple, pour
définir l'attribut de la balise cfgraph, entrez bar,horizontalBar,line,pie.
190 Chapitre 12
Suppression de bibliothèques, de balises et d'attributs
Vous pouvez utiliser l'éditeur de bibliothèques 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 le menu
déroulant Balises.
2
Cliquez sur le bouton moins (-).
3
Le cas échéant, confirmez la suppression en cliquant sur OK.
L'élément disparaît du menu déroulant Balises.
4
Si vous ne voulez pas supprimer définitivement cet élément, cliquez sur le bouton Annuler.
La boîte de dialogue Editeur de la bibliothèque de balises se referme sans supprimer l'élément
ni valider les modifications effectuées depuis l'ouverture de l'éditeur.
5
Pour supprimer définitivement l'élément, cliquez sur OK.
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 dans le mode Code, la fonction Indicateurs de code répertorie
automatiquement les attributs de la balise parmi lesquels vous pouvez faire votre choix.
Cette section contient les rubriques suivantes :
•
•
•
•
•
« Importation de balises à partir de fichiers XML », page 191
« Importation de balises ASP.NET personnalisées », page 192
« Importation de balises JSP à partir d'un fichier », page 192
« Importation de balises JSP à partir d'un serveur (web.xml) », page 192
« Importation de balises JRun », page 193
Importation de balises à partir de fichiers XML
Vous pouvez importer des balises à partir d'un fichier XML DTD (Document Type Definition)
ou Schema.
Pour importer des balises à partir d'un fichier XML DTD ou Schema :
1
Ouvrez l'éditeur de bibliothèques 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 à identifier une balise sur une page, en tant que composant d'une
bibliothèque de balise donnée.
5
Cliquez sur OK.
Configuration d'un environnement de codage
191
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 140). Les balises compilées (fichiers .dll) doivent être placées dans le dossier
Corbeille 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 bibliothèques de balises (Edition > Bibliothèques de balises).
3
Cliquez sur le bouton plus (+), puis choisissez l'une des options 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 bibliothèques de balises (Edition > Bibliothèques de balises).
3
Cliquez sur le bouton plus (+), puis choisissez JSP > Importer depuis le fichier (*.tld, *.jar,
*.zip).
4
Spécifiez le fichier .tld, .jar ou .zip contenant la bibliothèque de balises.
5
Entrez un URI pour identifier la bibliothèque de balises.
L'URI (Uniform Resource Identifier) désigne souvent l'URL de la société chargée de la
maintenance de la bibliothèque de balises. L'URL n'est pas utilisée pour accéder à la société,
mais uniquement à titre d'identification de la bibliothèque de balises.
6
Entrez le préfixe qui servira à identifier une balise sur une page, en tant que composant d'une
bibliothèque de balise donnée.
7
Cliquez sur OK.
Importation de balises JSP à partir d'un serveur (web.xml)
Vous pouvez importer des balises JSP à partir d'un serveur.
192 Chapitre 12
Pour importer des balises JSP à partir d'un serveur :
1
Ouvrez une page JSP dans Dreamweaver.
2
Ouvrez l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises).
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
Sélectionnez une bibliothèque de balises.
5
Entrez un URI pour identifier la bibliothèque de balises.
L'URI (Uniform Resource Identifier) désigne souvent l'URL de la société chargée de la
maintenance de la bibliothèque de balises. L'URL n'est pas utilisée pour accéder à la société,
mais uniquement à titre d'identification de la bibliothèque de balises.
6
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 bibliothèques de balises (Edition > Bibliothèques de balises).
3
Dans l'éditeur de bibliothèques de balises (Edition > Bibliothèques de balises), cliquez sur le
bouton plus (+), puis choisissez JSP > Importer les balises de serveur JRUN depuis le dossier.
4
Spécifiez un dossier contenant des balises JRun.
5
Entrez un URI pour identifier la bibliothèque de balises.
6
Entrez le préfixe qui servira à
identifier une balise sur une page, en tant que composant d'une bibliothèque de balise donnée.
7
Une fois les modifications terminées, cliquez sur OK pour refermer l'éditeur de bibliothèques
de balises.
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 en cours, 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 un autre éditeur de
texte, par exemple Notepad, SimpleText, vi, emacs et TextPad.
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.
Configuration d'un environnement de codage 193
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.
Utilisation de HomeSite (Windows seulement)
Vous n'avez pas besoin d'activer l'intégration pour HomeSite ; cette fonction est intégrée
automatiquement lors de l'installation du programme.
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 préférez travailler avec une version
antérieure de BBEdit ou avec un autre éditeur de texte HTML. Les sélections ne sont pas
supervisées 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.
Utilisation d'éditeurs externes
Vous pouvez ouvrir d'autres éditeurs externes depuis Dreamweaver, mais le document n'est pas
synchronisé dans les deux applications, contrairement à HomeSite ou BBEdit. Une fois les
modifications terminées dans l'éditeur externe, pensez à actualiser manuellement le document
dans Dreamweaver.
Pour choisir un éditeur HTML externe :
1
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis
sélectionnez Types de fichiers/Editeurs.
2
(Macintosh uniquement) Pour utiliser un autre éditeur HTML que BBEdit, désactivez
l'option Activer l'intégration de BBEdit. Pour utiliser BBEdit, laissez l'option Activer
l'intégration de BBEdit, et passez les étapes ci-dessous.
194 Chapitre 12
3
Cliquez sur le bouton Parcourir à côté de la zone de texte Editeur de code externe pour
sélectionner un éditeur de texte.
4
Dans l'option Recharger les fichiers modifiés, indiquez ce que Dreamweaver doit faire lorsqu'il
détecte que des changements ont été apportés de l'extérieur à un document déjà ouvert dans
Dreamweaver.
5
Dans l'option Enregistrer au démarrage, indiquez si Dreamweaver doit systématiquement
enregistrer le document courant avant d'exécuter l'éditeur, ne jamais enregistrer le document,
ou vous demander s'il doit l'enregistrer ou non à chaque lancement de l'éditeur externe.
Pour lancer un éditeur HTML externe :
Choisissez Edition > Modifier avec [nom de l'éditeur].
Configuration d'un environnement de codage 195
196 Chapitre 12
CHAPITRE 13
Codage dans Dreamweaver
Macromedia Dreamweaver MX 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.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
•
« A propos de l'environnement de codage de Dreamweaver », page 197
« Rédaction et modification de code », page 199
« Copie et collage du code », page 203
« Recherche et remplacement de balises et d'attributs », page 205
« Accès aux références de langue », page 210
Pour plus d'informations sur la migration de Macromedia HomeSite vers Dreamweaver, consultez
le centre de support de Dreamweaver MX à l'adresse suivante : http://www.macromedia.com/go/
migrate_from_homesite.
Rubriques connexes
« Configuration d'un environnement de codage », page 181
« Optimisation et débogage de code », page 211
« Modification du code en mode Création », page 225
A propos de l'environnement de codage de Dreamweaver
L'environnement de codage de Dreamweaver vous permet d'accéder librement au code de vos
pages. Cette section contient les rubriques suivantes :
•
•
•
•
« Types de fichiers pris en charge », page 198
« Respect du code par Dreamweaver », page 198
« Roundtrip HTML », page 198
« A propos de l'insertion de code par les comportements de serveur », page 199
Rubrique connexe
« Affichage du code », page 181
197
Types de fichiers pris en charge
Dreamweaver propose de nombreux types de fichiers pour le codage côté client, notamment
HTML, XML, Cascading Style Sheets (CSS), JavaScript, VBScript, Wireless Markup Language
(WML), Extension Data Markup Language (EDML), modèle Dreamweaver (.dwt) et Texte.
Vous pouvez utiliser les types de fichiers suivants pour le codage côté serveur : ColdFusion,
composant ColdFusion (.cfc), ASP.NET Visual Basic, ASP.NET C#, ASP VBScript,
ASP JavaScript, JSP et PHP. Vous avez par ailleurs la possibilité de créer des fichiers C#, Visual
Basic et Java autonomes.
Respect du code par Dreamweaver
Dreamweaver génère du code valide et propre dans ses environnements de codage et visuels.
Dreamweaver respecte également le code rédigé par vos soins ou généré par un autre éditeur. Il ne
corrige jamais votre code. Ainsi, Dreamweaver ne modifie ni vos espaces blancs, ni la casse des
attributs. Si vous choisissez Affichage > Options d'affichage de code > Mettre en surbrillance le
code HTML incorrect, Dreamweaver surligne en jaune les erreurs. Vous pouvez éventuellement
nettoyer votre code selon vos propres critères. Vous pouvez enfin personnaliser la façon dont
Dreamweaver formate le code. Pour plus d'informations, voir « Définition des préférences de
codage », page 183.
Roundtrip HTML
La fonction Roundtrip HTML vous permet 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 ses fonctions clés, citons les suivantes :
• Par défaut, Dreamweaver réécrit les balises qui se chevauchent, ferme les balises qui ne doivent
pas rester ouvertes et supprime les balises de fermeture superflues lorsque vous revenez dans
Dreamweaver à partir d'un éditeur externe ou lorsque vous ouvrez un document HTML qui
n'a pas été dans Dreamweaver. Dreamweaver n'apporte aucune autre rectification au code,
même si celui-ci est incorrect, à condition que les navigateurs puissent restituer correctement le
code incorrect.
Vous pouvez désactiver la correction du code (voir « Définition des préférences de correction
de code », page 185).
• 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, <MaNouvelleBalise><b>texte</MaNouvelleBalise></b>),
Dreamweaver la marque comme erronée, mais ne modifie pas le code.
• Rien ne vous empêche de définir dans Dreamweaver la mise en surbrillance en jaune du
code HTML non pris en charge par les navigateurs. 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.
• Dreamweaver permet de lancer un éditeur de texte tiers pour modifier le document courant.
Pour plus d'informations, voir « Utilisation d'un éditeur HTML externe avec Dreamweaver »,
page 193.
198 Chapitre 13
A propos de l'insertion de code par les comportements de serveur
Lorsque vous choisissez 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 (ou « participants ») dans la page pour faire fonctionner le comportement de serveur.
Dès lors que vous modifiez le code dans un participant, il vous est impossible de modifier ou de
supprimer le comportement de serveur avec un outil visuel. 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 participant, y compris
l'espacement des mots et les sauts de ligne, empêche 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. Cette section traite des fonctions suivantes :
•
•
•
•
•
•
•
•
•
•
« Utilisation des indicateurs de code », page 199
« Manipulation des fragments de code », page 200
« Insertion rapide de code avec la barre Insertion », page 201
« Insertion de balises avec le Sélecteur de balises », page 202
« Modification de balises avec des éditeurs de balises », page 202
« Modification de balises avec l'inspecteur de balises », page 203
« Mise en retrait des blocs de code », page 203
« Copie et collage du code », page 203
« Insertion de commentaires HTML », page 204
« Affichage de la liste des fonctions JavaScript et VBScript dans une page », page 204
Utilisation des indicateurs de code
Les indicateurs de code vous permettent d'insérer et de modifier le code à mesure que vous le
saisissez en mode Code (ou dans l'inspecteur de code). Une liste de suggestions apparaît lorsque
vous tapez certains caractères. 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.
Vous pouvez définir le délai d'affichage de la liste d'options dans les indicateurs de code, spécifier
les balises à inclure dans la liste des balises, voire même désactiver les indicateurs de code. Pour
plus d'informations, voir « Définition des préférences d'indicateurs de code », page 185.
Pour insérer une balise à l'aide des indicateurs de code :
1
Tapez un crochet ouvrant (<) pour afficher une liste de balises.
2
Appuyez sur la touche Echap pour refermer cette liste.
3
Faites défiler la liste et double-cliquez sur une balise pour l'insérer.
Codage dans Dreamweaver 199
4
Si la balise prend en charge les attributs, appuyez sur la barre d'espace pour afficher une liste
des attributs autorisés pour une balise. Sélectionnez un attribut et appuyez sur la touche
Entrée.
5
Tapez la valeur de l'attribut ou, si celui-ci n'accepte que certaines valeurs, sélectionnez-en une
dans la liste des valeurs autorisées.
6
Répétez les deux dernières étapes pour chacun des attributs à ajouter pour la balise, en prenant
soin de ne pas appuyer sur la barre d'espace entre une valeur et son guillemet de fin (").
7
Tapez le crochet fermant de la balise (>) à la suite de la dernière paire attribut/valeur.
Pour modifier une balise, procédez de l'une des manières suivantes :
• Pour ajouter un attribut, placez le point d'insertion devant le crochet fermant (>) d'une balise
et appuyez sur la barre d'espace pour afficher une liste des attributs pris en charge pour cette
balise. Insérez l'attribut et sa valeur comme indiqué précédemment.
• Pour modifier un attribut, supprimez l'attribut et ajoutez un attribut, comme indiqué
précédemment.
• Pour modifier une valeur, supprimez la valeur et ajouter une valeur, comme indiqué
précédemment.
Pour insérer ou modifier le code d'une fonction ou d'un objet :
1
Choisissez Edition > Préférences > Indicateurs de code ou Dreamweaver > Préférences >
Indicateurs de code (Mac OS X), puis définissez les préférences à afficher sans attendre.
2
En mode Code (ou dans l'inspecteur de code), tapez le code de la fonction ou de l'objet suivant
votre méthode habituelle.
Lorsque vous tapez un mot-clé ou un caractère auquel sont associés des indicateurs de code, un
menu contextuel s'affiche, contenant des suggestions pour compléter le code. Si un élément de
la liste vous convient, sélectionnez-le et appuyez sur la touche Entrée.
Pour configurer ou désactiver les indicateurs de code, voir « Définition des préférences
d'indicateurs de code », page 185.
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 en HTML, JavaScript, CFML,
ASP et JSP, notamment. Dreamweaver contient également quelques fragments de code prédéfinis
qui vous serviront de point de départ.
Le fragment de code peut soit envelopper une sélection, soit se présenter comme un bloc de code.
Vous pouvez ainsi créer un lien vers une page qui apparaît plusieurs fois sur votre site, mais qui est
rattachée à différents objets et à du texte. Vous pouvez sélectionner un objet, cliquer avec le
bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée sur un
fragment de code dans le panneau Fragments de code, puis choisir Insérer dans le menu
contextuel. Le code du lien enveloppe la sélection. Vous pouvez par ailleurs assortir vos fragments
de code de commentaires destinés aux autres utilisateurs.
Pour insérer un fragment de code :
1
Placez le point d'insertion à l'endroit du document qui vous convient ; si nécessaire, délimitez
la sélection à envelopper du fragment de code.
200 Chapitre 13
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 choisir Insérer dans le
menu contextuel.
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 ou supprimer un fragment de code :
1
Sélectionnez un fragment de code, puis cliquez sur l'icône Modifier le fragment de code ou
Supprimer situé au bas du panneau Fragments de code.
Les icônes Modifier le fragment de code ou Supprimer sont repérables par leur info-bulle.
Pour créer des dossiers de fragments de code en vue de gérer ces fragments :
1
Cliquez sur l'icône 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 partager un fragment de code avec d'autres membres de l'équipe :
1
Recherchez le fragment de code à partager dans le sous-dossier Configuration\Snippets du
dossier de l'application Dreamweaver MX.
2
Copiez le 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 fragment de code dans leur dossier
Configuration\Snippets respectif.
Quiconque ayant accès au dossier partagé peut alors ajouter, modifier et supprimer les fragments
de code du dossier.
Insertion rapide de code avec la barre Insertion
Utilisez la barre Insertion pour ajouter rapidement du code dans une page. Il vous suffit de placer
le point d'insertion dans le code, puis de cliquer sur une icône de la barre Insertion. 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 icône, placez le pointeur de la souris dessus jusqu'à ce
qu'une info-bulle s'affiche. Le nombre et le type des icônes de la barre Insertion varient selon le
type de document ouvert dans Dreamweaver et selon que le mode Code ou Création est actif.
Bien que la barre Insertion 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 .
Codage dans Dreamweaver 201
Insertion de balises avec le Sélecteur de balises
Vous pouvez utiliser le Sélecteur de balises pour insérer dans une page une balise quelconque des
bibliothèques de balises de Dreamweaver (notamment ColdFusion et ASP.NET). Pour plus
d'informations sur les bibliothèques de balises, voir « Gestion des bibliothèques de balises »,
page 188.
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 choisissez 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électionnez une balise dans la liste.
3
Pour afficher les informations relatives à la syntaxe et à l'emploi de la balise, cliquez sur le
bouton Infos sur les balises.
Pour autant qu'elle soit disponible, une aide sur la balise s'affiche dans la boîte de dialogue.
4
Pour obtenir des informations de référence sur la balise, cliquez sur l'icône <?>.
Pour autant qu'elle soit disponible, une référence sur la balise s'affiche dans le panneau
Référence.
5
Cliquez sur le bouton Insérer pour insérer la balise sélectionnée dans le code.
Les balises ne nécessitant aucune information complémentaire, qui figurent entre crochets dans
le panneau de droite (par exemple, <HTML></HTML>), sont insérées au niveau du point
d'insertion dans le document. Toutes les autres balises affichent leur propre éditeur de balises.
6
Le cas échéant, entrez les informations supplémentaires dans l'éditeur de balises, puis cliquez
sur OK.
Voir « Modification de balises avec des éditeurs de balises », page 202.
Modification de balises avec des éditeurs de balises
Les éditeurs de balises vous permettent de spécifier ou de modifier les attributs d'une balise à
partir d'une boîte de dialogue. Si vous choisissez d'insérer à partir du Sélecteur de balises une
balise qui nécessite des informations supplémentaires, son éditeur s'affiche systématiquement. A
défaut, la procédure suivante explique comment ouvrir l'éditeur d'une balise. Pour plus
d'informations, voir « Insertion de balises avec le Sélecteur de balises », page 202.
Pour accéder à l'éditeur de balises d'une balise :
1
Placez le point d'insertion à l'intérieur d'une balise.
2
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh), puis choisissez Modifier la balise dans le menu contextuel.
3
Effectuez vos modifications, 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.
202 Chapitre 13
Modification de balises avec l'inspecteur de balises
Vous pouvez utiliser l'inspecteur de balises pour modifier les balises dans une fiche de propriétés
semblable à celles que l'on retrouve dans d'autres environnements de développement intégrés
(integrated development environments, IDE).
Pour modifier une balise avec l'inspecteur de balises :
1
Assurez-vous que l'inspecteur de balises est ouvert (Fenêtre > Inspecteur de balises).
2
En mode Code (ou dans l'inspecteur de code), cliquez n'importe où dans une balise.
Si la balise prend en charge les attributs, Dreamweaver les affiche ainsi que leur valeur en cours
dans la fiche de propriétés de l'inspecteur de balises.
3
Modifiez la balise à votre convenance dans la fiche de propriétés.
Cliquez sur le nom d'un attribut pour saisir sa valeur ou, si l'attribut accepte les valeurs
prédéfinies, pour en sélectionner une dans une liste.
4
Si l'attribut adopte une valeur d'une source de contenu dynamique (une base de données, par
exemple), cliquez sur l'icône en forme d'éclair en bout de rangée de l'attribut sélectionné, puis
sélectionnez la source.
Pour plus d'informations sur la définition des sources d'un contenu dynamique,
voir « Définition de sources de contenu dynamique », page 535.
5
Cliquez ailleurs dans le panneau pour mettre à jour la balise dans le document.
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 mettre en retrait les blocs de code afin de les distinguer du reste et de les rendre plus
visible.
Pour mettre en retrait un bloc de code :
1
Sélectionnez la ou les lignes du bloc de code à mettre en retrait. Veillez à sélectionner la ligne
entière.
2
Choisissez Edition > Code de retrait.
Le code est mis en retrait. Choisissez Edition > Code de retrait négatif pour faire reculer le code
mis en retrait.
Copie et collage du code
Vous pouvez copier et coller un code source à 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 ou en tant que code en
conservant les balises intactes.
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 directement en mode Création et choisissez Edition > Coller.
Codage dans Dreamweaver 203
Pour copier et coller le code en conservant les balises intactes :
1
Copiez le code à partir de Dreamweaver ou d'une autre application.
Pour effectuer la copie à partir du mode Création, choisissez Edition > Copier HTML.
2
Procédez de l'une des manières suivantes :
• En mode Code, positionnez le point d'insertion et choisissez Edition > Coller. Si vous
travaillez en mode Création, appuyez sur la touche F5 pour actualiser l'affichage du document.
• En mode Création, positionnez le point d'insertion et choisissez 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 sur la page Web du navigateur.
Pour insérer un commentaire :
1
Placez le point d'insertion à l'endroit où insérer le commentaire en mode Code ou Création.
2
Cliquez sur l'icône Commentaire dans l'onglet Commun de la barre Insertion.
Aidez-vous de l'info-bulle pour identifier cette icône.
• En mode Code, Dreamweaver insère une balise <!--
-->
dans la page. Entrez un
commentaire à l'intérieur de la balise.
• En mode Création, Dreamweaver affiche la boîte de dialogue Commentaire. Entrez votre
commentaire, puis cliquez sur OK.
Pour afficher les marqueurs de commentaire en mode Création, choisissez Affichage > Assistances
visuelles > Eléments invisibles. Vérifiez que les commentaires sont sélectionnés dans les
préférences des éléments invisibles. Dans le cas contraire, le marqueur de commentaire ne
s'affiche pas.
Pour compléter un commentaire existant, procédez de l'une des manières suivantes :
• Sélectionnez le marqueur Commentaire en mode Création et tapez votre texte dans
l'inspecteur de propriétés.
• Recherchez le commentaire dans le code et ajoutez-y directement votre texte.
Affichage de la liste des fonctions JavaScript et VBScript dans une page
Le mode Création vous permet d'afficher toutes les fonctions JavaScript ou VBScript dans une
page.
Pour afficher les fonctions de script dans une page :
1
Ouvrez le document en mode Code.
2
Assurez-vous que la barre d'outils Document est visible (Affichage > Barre d'outils >
Document).
3
Cliquez sur l'icône Navigation dans le code de la barre d'outils.
Cette icône représente deux accolades ({ }).
Remarque : elle est désactivée en mode Création.
204 Chapitre 13
Si votre code contient des fonctions JavaScript ou VBScript, elles apparaissent dans le menu
contextuel. Pour répertorier les fonctions dans l'ordre alphabétique, maintenez la touche Contrôle
(Windows) ou Option (Macintosh) enfoncée tout en cliquant sur le bouton Navigation dans le
code.
Pour accéder à une fonction de votre code :
Sélectionnez une fonction dans le menu déroulant Navigation dans le code. La fonction apparaît
en surbrillance en mode Code (ou dans l'inspecteur de code).
Recherche et remplacement de balises et d'attributs
Dreamweaver vous permet de rechercher et de remplacer des balises et des attributs dans votre
code. Cette section contient les rubriques suivantes :
•
•
•
•
•
« Recherches dans du code source HTML », page 205
« Recherche de balises et d'attributs », page 205
« Recherche d'un texte contenu dans des balises spécifiques », page 206
« Enregistrement de modèles de recherche », page 207
« A propos des expressions régulières », page 208
Recherches dans du code source HTML
Utilisez l'option Code source de la boîte de dialogue Rechercher ou Remplacer pour rechercher
des chaînes de texte spécifiques dans le code source HTML. Par exemple, si vous cherchez black
dog dans le code suivant, vous trouverez deux occurrences (dans l'attribut alt et dans la première
phrase) :
<IMG SRC=”barnaby.gif” WIDTH=”100” HEIGHT=”100”
alt="Barnaby, a black dog."><br>
We saw several black dogs in the park yesterday. The black
<a href="barnaby.html">dog</a> we liked best was called Barnaby.
Les mots black dog apparaissent également dans la deuxième phrase, mais ils sont introuvables
parce qu'ils sont séparés par un lien.
Pour plus d'informations, voir « Recherche et remplacement de texte », page 308.
Recherche de balises et d'attributs
Utilisez l'option Balise spécifique de la boîte de dialogue Rechercher ou Remplacer pour
rechercher des balises, attributs et valeurs d'attributs spécifiques. Par exemple, vous pouvez
rechercher toutes les balises img n'ayant pas l'attribut alt.
Pour effectuer une recherche de balise :
1
Choisissez Edition > Rechercher et remplacer, puis spécifiez les fichiers à rechercher.
2
Choisissez l'option Balise spécifique dans le menu déroulant Rechercher.
3
Choisissez une balise spécifique dans le menu déroulant situé à côté du menu déroulant
Rechercher ou choisissez [toute balise].
Si vous souhaitez uniquement rechercher toutes les occurrences de la balise spécifiée, appuyez
sur le bouton moins (-) et passez à l'étape 6. Sinon, passez à l'étape 4.
Codage dans Dreamweaver 205
4
Limitez la recherche à l'aide de l'un des modificateurs de balise suivants :
•
Avec attribut,
pour choisir un attribut devant figurer dans la balise pour que la correspondance
soit trouvée. Vous pouvez spécifier une valeur particulière pour cet attribut ou choisir [toute
valeur].
•
Sans attribut,
•
Contenant,
pour indiquer un texte ou une balise qui doit figurer dans la balise d'origine pour
que la correspondance soit trouvée. Par exemple, dans le code <b><font
face="Arial">Heading 1</font></b>, la balise font se trouve à l'intérieur de la balise b.
•
Ne contenant pas,
•
Balise interne, pour spécifier une balise à l'intérieur de laquelle la balise cible doit se trouver
pour que la correspondance soit trouvée.
•
Pas de balise interne, pour spécifier une balise à l'intérieur de laquelle la balise cible ne doit pas
pour choisir un attribut qui ne doit pas figurer dans la balise pour que la
correspondance soit trouvée. Par exemple, vous pouvez rechercher toutes les balises img n'ayant
pas l'attribut alt.
pour indiquer un texte ou une balise qui ne doit pas figurer dans la balise
d'origine pour que la correspondance soit trouvée.
se trouver pour que la correspondance soit trouvée.
5
Cliquez sur le bouton plus (+) et répétez l'étape 4 pour limiter davantage la recherche.
6
Lancez la recherche :
• Cliquez sur Rechercher suivant pour mettre en surbrillance l'occurrence suivante de la balise
recherchée dans le document en cours, puis dans le document suivant, si votre recherche porte
sur plusieurs documents.
• Cliquez sur Rechercher tout pour générer une liste de toutes les occurrences de la balise
recherchée dans le document en cours ou, si vous effectuez la recherche sur un répertoire ou un
site, pour générer une liste des documents qui contiennent la balise. Cette liste apparaît dans
l'onglet Recherche du panneau Résultats.
Recherche d'un texte contenu dans des balises spécifiques
Utilisez l'option Texte (avancé) de la boîte de dialogue Rechercher ou Remplacer pour 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 titre du site.
Pour effectuer une recherche de texte avancée :
1
Choisissez Edition > Rechercher et remplacer, puis spécifiez les fichiers à rechercher.
2
Sélectionnez Texte (avancé) dans le menu déroulant Rechercher.
3
Tapez le texte à rechercher dans la zone de texte adjacente au menu contextuel Rechercher.
Par exemple, tapez le mot Untitled.
4
Sélectionnez l'option Dans la balise ou Pas dans la balise, puis choisissez une balise dans le
menu déroulant adjacent.
Par exemple, cliquez sur Dans la balise, puis sur title.
206 Chapitre 13
5
Cliquez sur le bouton plus (+) pour limiter la recherche aux balises ayant un ou plusieurs
attributs spécifiques.
Comme la balise <title> est dépourvue d'attributs, il est inutile d'utiliser cette option pour
rechercher toutes les pages sans titre du site.
6
Lancez la recherche :
• Cliquez sur Rechercher suivant pour mettre en surbrillance l'occurrence suivante du texte
recherché dans le document en cours, puis dans le document suivant, si votre recherche porte
sur plusieurs documents.
• Cliquez sur Rechercher tout pour générer une liste de toutes les occurrences du texte recherché
dans le document en cours ou, si vous effectuez la recherche sur un répertoire ou un site, pour
générer une liste des documents qui contiennent la balise. Cette liste apparaît dans l'onglet
Recherche du panneau Résultats.
Enregistrement de modèles de recherche
Vous pouvez enregistrer des modèles de recherche en vue d'un usage ultérieur, en cliquant sur
l'icône Enregistrer la requête (représentant une disquette) dans la boîte de dialogue Rechercher et
remplacer. L'enregistrement d'une requête est judicieux si vous effectuez régulièrement la même
recherche et ne souhaitez pas reconstruire le modèle de recherche à chaque fois, par exemple pour
supprimer les balises non standard des documents créés par un autre éditeur HTML visuel ou
pour confirmer que toutes les images dans un fichier disposent des attributs height, width et alt
avant que le document ne soit publié sur le Web.
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 et
d'attributs », page 205 ou « Recherche d'un texte contenu dans des balises spécifiques »,
page 206 pour plus d'informations sur la définition de paramètres de recherche
supplémentaires.
2
Cliquez sur l'icône Enregistrer la requête (représentant une disquette).
L'emplacement par défaut pour les enregistrements de requêtes est le dossier Configuration/
Queries, qui se trouve dans le répertoire de l'application Dreamweaver.
3
Dans la boîte de dialogue qui s'affiche, attribuez au fichier un nom identifiant 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. Les requêtes de recherche se terminent par
l'extension dwq ; les requêtes de remplacement, par l'extension dwr.
Pour rappeler un modèle de recherche :
1
Choisissez la commande Edition > Rechercher et remplacer.
2
Cliquez sur l'icône Charger la requête (représentant un dossier).
La boîte de dialogue Charger la requête s'ouvre automatiquement dans le répertoire
Configuration/Queries. Vous pouvez naviguer vers un autre répertoire si vous avez enregistré
des requêtes ailleurs.
Codage dans Dreamweaver 207
3
Sélectionnez un fichier de requête, puis cliquez sur Ouvrir.
Si vous vous trouvez dans la boîte de dialogue Rechercher, seules les requêtes de recherche
(fichiers .dwq) sont disponibles. Si vous vous trouvez dans la boîte de dialogue Remplacer, les
requêtes de recherche (fichiers .dwq) et de remplacement (fichiers .dwr) sont toutes deux
disponibles.
4
Cliquez sur Rechercher suivant, Rechercher tout, Remplacer ou Remplacer tout pour lancer
la recherche.
A propos des 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 « phrases contenant le
mot 'untel' » et « valeurs d'attribut contenant un nombre ». 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 », « umm »
dans « yummy » et « u » dans « bouge »
+
Le caractère précédent, une ou plusieurs fois. um+ trouve « um » dans « rhum », « umm »
dans « yummy » mais rien dans « bouge »
?
Le caractère précédent, une fois au maximum st?on trouve « son » dans « Johnson » et
« ston » dans « Johnston », mais rien dans
(en d'autres termes, le caractère précédent
« Appleton » ou « tension »
est facultatif).
.
Tout caractère, sauf une nouvelle ligne (retour .an trouve « ran » « tan » et « lan » dans le
à la ligne).
mot « rantanplan »
x|y
Soit x, soit y.
FF0000|0000FF trouve « FF0000 » dans
BGCOLOR="#FF0000" et « 0000FF » dans
FONT COLOR="#0000FF".
{n}
Exactement n occurrences du caractère
précédent.
l{2} trouve « ll » dans « elle » et les deux
premiers l de « ellllle », mais ne trouve rien
dans « léger »
{n,m}
Au moins n et au plus m occurrences du
caractère précédent.
F{2,4} trouve « FF » dans « #FF0000 » et
les quatre premiers F dans #FFFFFF.
[abc]
[e-g] trouve « e » dans « œil », « f » dans
L'un des caractères entourés de crochets.
« fil » et « g » dans « garde »
Spécifiez une plage de caractères à l'aide
d'un trait d'union (par exemple, [a-f] équivaut
à [abcdef]).
208 Chapitre 13
Caractère
trouve
Exemple
[^abc]
Tout caractère non inclus entre les crochets. [^aeiou] trouve initialement « r » dans
« orange », « b » dans « balle » et « k » dans
Spécifiez une plage de caractères à l'aide
d'un trait d'union (par exemple, [^a-f] équivaut « eek! »
à [^abcdef]).
\b
Limite de mot (par exemple un espace ou un
retour chariot).
\bb trouve « b » dans « balle » mais pas dans
« gober » ou « snob »
\B
Non limite 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
numérique. C'est l'équivalent de [^0-9].
\D trouve « S » dans « 900S » et « Q » dans
« Q45 ».
\f
Saut de page.
\n
Saut de ligne.
\r
Retour chariot.
\s
Tout « espace blanc », ou caractère
d'espacement : espace, tabulation, saut de
page ou saut de ligne.
\sval trouve « val » dans « le val André »
mais pas dans « aval »
\S
Tout caractère autre qu'un « espace blanc ».
\Sval trouve « val » dans « aval » mais pas
dans « le val André »
\t
Tabulation.
\w
Tout caractère alphanumérique, y compris le c\w* trouve « chien » dans « le chien noir »,
caractère de soulignement. C'est l'équivalent ainsi que « cou » et « chien » dans « le cou du
chien noir »
de [A-Za-z0-9_].
\W
Tout caractère non alphanumérique. C'est
l'équivalent de [^A-Za-z0-9_].
Contrôle+Entrée ou
Maj+Entrée
(Windows), ou
Contrôle+ Retour ou
Maj+Retour ou
Commande+Retour
(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 retours chariot sont représentés
par des espaces dans la fenêtre de
document, et non par des sauts de ligne.
\W trouve « & » dans « Tintin & Milou » et
« % » dans « 100 % »
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. (utilisez ($) dans le champ Rechercher et la barre
oblique inverse (\) dans le champ Remplacer) pour faire référence au premier, deuxième,
troisième, etc., groupe entre parenthèses. 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 (pour effectuer une conversion entre des dates de style américain et des dates de style
européen).
Codage dans Dreamweaver 209
Accès aux références de langue
Le panneau Référence vous permet de disposer d'un outil de référence rapide pour les langages de
marquage, les objets JavaScript et les styles CSS et leurs attributs. Le panneau Référence contient
des informations sur les balises, les objets ou les styles spécifiques avec lesquels vous travaillez en
mode Code (ou dans l'inspecteur de code).
Pour ouvrir le panneau Référence :
1
En mode Code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contrôle enfoncée (Macintosh) sur une balise, un attribut ou un mot-clé.
2
Choisissez Référence dans le menu contextuel.
Le panneau Référence qui apparaît affiche des informations sur la balise, l'attribut ou le mot-clé
sur lequel vous avez cliqué. Pour ajuster la taille du texte dans le panneau Référence, choisissez
Grande police, Police moyenne ou Petite police dans le menu Options (petite flèche en haut à
droite du panneau).
Le menu déroulant Livre affiche le nom du manuel dont les documents de référence sont tirés.
Pour afficher les balises, les objets ou les styles d'un autre ouvrage, choisissez-en un autre dans le
menu déroulant Livre.
Le menu déroulant Balise, Objet ou Style (selon l'ouvrage sélectionné) affiche la balise, l'objet ou
le style que vous avez sélectionné dans l'Affichage de code (ou dans l'inspecteur de code). Pour
voir les informations sur une autre balise, un autre objet ou un autre style, choisissez-en un dans le
menu.
A côté du menu déroulant Balise, Objet ou Style se trouve un menu contenant une liste
d'attributs pour la balise que vous avez choisie. L'élément Description est sélectionné par défaut.
Il contient une description de la balise choisie. Vous pouvez également sélectionner un attribut
dans le menu pour voir d'autres informations à son sujet.
210 Chapitre 13
CHAPITRE 14
Optimisation et débogage de code
Macromedia Dreamweaver MX vous permet d'optimiser et de déboguer votre code. Ainsi, vous
pouvez valider des balises, rendre votre document conforme à l'XHTML ou déboguer des codes
JavaScript.
Ce chapitre couvre les sujets suivants :
•
•
•
•
•
•
« Nettoyage de code », page 211
« Vérification de l'équilibre des balises et des accolades », page 212
« Validation de balises », page 213
« Conformité des pages XHTML », page 213
« Utilisation du débogueur JavaScript », page 217
« Utilisation du débogueur ColdFusion », page 223
Nettoyage de code
Utilisez la commande Nettoyer le code HTML ou Nettoyer le code XHTML pour supprimer
des balises vides, combiner des balises font imbriquées et nettoyer le code HTML/XHTML
désordonné ou illisible.
La commande Nettoyer le code XHTML corrige les erreurs de syntaxe, définit les attributs de
balise en minuscules et ajoute ou signale les attributs manquants d'une balise dans un
document XHTML. Après l'exécution de la commande Nettoyage du code XHTML, une boîte
de dialogue affiche le nombre de balises img et area qui ne sont pas associées à un attribut alt.
Pour nettoyer le code HTML généré à partir d'un document Microsoft Word, voir « Nettoyage
de code HTML Microsoft Word » dans l'aide de Dreamweaver (Aide > Utilisation
de Dreamweaver).
Pour nettoyer le code :
1
Ouvrez un document.
• S'il s'agit d'un document HTML, choisissez Commandes > Nettoyer le code HTML.
• S'il s'agit d'un document XHTML, choisissez Commandes > Nettoyer le code XHTML.
2
Dans la boîte de dialogue qui s'affiche, choisissez parmi les options suivantes :
•
Supprimer Balises de conteneur vides
supprime toute paire de balises sans contenu. Par
exemple, <b></b> et <font color="FF0000"></font> sont considérées comme des balises
vides, alors que la balise <b> dans <b>texte</b> ne l'est pas.
211
•
Supprimer Balises redondantes imbriquées supprime toutes les occurrences redondantes d'une
balise. Par exemple, dans le code <b>C’est ce que je voulais <b>vraiment</b> dire</
b>, les balises b qui encadrent le mot « vraiment » sont redondantes et seront supprimées.
•
Supprimer Commentaires HTML ne faisant pas partie de Dreamweaver
•
•
Supprimer Marqueur spécial Dreamweaver
•
Combiner les balises de <font> imbriquées lorsque possible
supprime tous les
commentaires qui n'ont pas été insérés par Dreamweaver. Par exemple, <!--begin body
text--> sera supprimé, mais <!-- #BeginEditable "doctitle" --> ne le sera pas, car il
s'agit d'un commentaire Dreamweaver qui marque le début d'une zone modifiable dans un
modèle.
supprime les balises spécifiées dans la zone de texte adjacente. Utilisez
cette option pour supprimer des balises personnalisées insérées par d'autres éditeurs visuels,
ainsi que les autres balises que vous ne voulez pas voir apparaître sur votre site (par exemple,
blink). Séparez les différentes balises par des virgules (par exemple, font, blink).
Supprimer Balise(s)
combine deux ou plusieurs balises
font se rapportant à la même section de texte. Par exemple, <font size="7"><font
color="#FF0000">rouge</font></font> sera remplacé par <font font="7"
font="#FF0000">rouge</font>.
•
Afficher le journal à la fin affiche un message d'avertissement détaillant les modifications
apportées au document dès que le nettoyage est terminé.
3
Cliquez sur OK.
Selon la taille du document et le nombre d'options sélectionnées, le nettoyage peut prendre
plusieurs secondes.
Vérification de l'équilibre des balises et des accolades
Lorsque vous rédigez et modifiez votre code en mode Code ou dans l'inspecteur de code, vous
pouvez vérifier que les balises et les accolades ({ }) sont équilibrées dans la page. La vérification de
l'équilibre des balises consiste à s'assurer qu'à chaque balise d'ouverture correspond une balise de
fermeture, ce qui est particulièrement utile si vous utilisez plusieurs niveaux d'imbrication dans
votre code, notamment lorsque plusieurs tableaux sont imbriqués dans d'autres tableaux.
Pour vérifier si les balises sont équilibrées :
1
Ouvrez le document en mode Code.
2
Placez le point d'insertion dans le code imbriqué à vérifier.
3
Choisissez Edition > Sélectionner balise parente.
Les balises correspondantes de délimitation s'affichent en surbrillance dans votre code. Si vous
choisissez de nouveau Edition > Sélectionner balise parente tandis que toutes vos balises sont
équilibrées, Dreamweaver finit par mettre en surbrillance les balises <html> et </html> situées
aux extrémités.
Pour vérifier si les accolades sont équilibrées :
1
Ouvrez le document en mode Code.
2
Placez le point d'insertion dans le code imbriqué à vérifier.
212 Chapitre 14
3
Choisissez Edition > Equilibrer les accolades.
Les balises correspondantes de délimitation s'affichent en surbrillance dans votre code.
Choisissez de nouveau Edition > Equilibrer les accolades pour mettre les balises
correspondantes délimitant la sélection précédente en surbrillance.
Validation de balises
Le validateur de Dreamweaver vous permet de vérifier si des erreurs de balises ou de syntaxe sont
présente dans le code. Le validateur prend en charge un grand nombre de langages de balise,
notamment plusieurs versions de HTML, XHTML, ColdFusion Markup Language (CFML),
JavaServer Pages (JSP) et Wireless Markup Language (WML). Vous pouvez également valider un
document XML.
Remarque : pour valider l'accessibilité d'un document, voir « Test de l'accessibilité de votre site Web », page 364.
Vous pouvez définir les préférences du validateur, notamment 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 plus d'informations,
voir « Définition des préférences du validateur », page 187.
Vous pouvez exécuter le validateur pour le document en cours ou une balise sélectionnée.
Pour exécuter le validateur :
1
Procédez de l'une des manières suivantes :
• Dans le cas d'un fichier XML (ou XHTML), choisissez Fichier > Vérifier la page > Valider
en XML.
• A défaut, choisissez Fichier > Vérifier la page > Valider le marqueur.
L'onglet Validation du panneau Résultats affiche le message « Pas d'erreur ou d'avertissement »
ou énumère les erreurs de syntaxe relevées.
2
Double-cliquez sur le message d'erreur pour le mettre en surbrillance dans le document.
3
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) dans le rapport pour l'enregistrer sous forme de fichier XML ou pour
l'afficher dans un navigateur (ce qui vous permet de l'imprimer).
Conformité des pages XHTML
Cette section présente le code XML et XHTML, la configuration requise pour le code XHTML
et les feuilles de style en cascade (CSS) et explique comment créer des documents compatibles
avec XHTML.
Cette section contient les rubriques suivantes :
•
•
•
•
« A propos de XML et de XHTML », page 214
« A propos du code XHTML généré par Dreamweaver », page 215
« Utilisation des feuilles de style en cascade (CSS) avec XHTML », page 216
« Conformité des documents XHTML », page 217
Optimisation et débogage de code 213
A propos de XML et de XHTML
Le langage XML (Extensible Markup Language) définit la structure des informations ainsi que
leur stockage dans une base de données. Par exemple, un langage XML dédié à la cuisine pourrait
comporter une balise <recette>, laquelle pourrait à son tour présenter les balises <en-tête>,
<ingrédients> et <instructions>. L'atout du langage XML repose sur le fait qu'il permet de stocker
les informations dans une base de données et de les en extraire, de les restituer dans une multitude
de formats et de les utiliser à des fins multiples (par exemple, sur une page Web, avec un
ordinateur de poche ou un téléphone cellulaire, ou encore un livre de cuisine, une fiche de recette
ou un ouvrage sur la coriandre).
Le langage XHTML (Extensible Hypertext Markup Language) n'est autre qu'une nouvelle
mouture de HTML sous la forme d'une application XML. Quasiment identique à HTML 4.01,
il est toutefois plus rigoureux et soigné.
Avantages de XHTML
En règle générale, l'utilisation de XHTML révèle les avantages de XML et garantit la
compatibilité descendante et ascendante de vos documents Web. Voici quelques arguments en
faveur de l'utilisation de XHTML :
• XHTML s'annonce comme le successeur de HTML. Si vous voulez qu'à l'avenir votre
site Internet soit visible et impeccablement restitué, il serait judicieux d'adopter le codage
en XHTML dès maintenant.
• XHTML est compatible avec tous les périphériques, et pas seulement les PC.
• XHTML est un langage XML qui présente donc un potentiel d'extension. Vous pouvez
également utiliser des outils XML standard pour afficher, modifier et valider vos
documents XHTML.
• Les documents XHTML peuvent utiliser des applications telles que des scripts et des applets,
qui reposent sur le modèle d'objet de document (DOM) HTML ou XML.
• XHTML nécessite un code de qualité. Il réduit ainsi les différences de restitution d'un
document Web observées entre plusieurs agents utilisateurs, tels que les navigateurs Web,
puisque certaines de ces disparités s'expliquent par le formatage incorrect ou inadéquat du
code.
Migration entre HTML et XHTML
XHTML est compatible avec les navigateurs et autres agents utilisateurs qui prennent en charge
HTML 4 et XML. Il vous est donc possible d'adopter XHTML sans exclure quiconque et sans
attendre que les agents utilisateurs XML se répandent davantage. Dans la mesure où XHTML et
HTML sont très similaires, la migration de HTML vers XHTML se fait en douceur.
Ressources Web pour XHTML
Pour plus d'informations sur XHTML, consultez le site Web du World Wide Web Consortium
(W3C), lequel présente les spécifications de XHTML 1.1 - Module-Based XHTML (http://
www.w3.org/TR/xhtml11/) et XHTML 1.0 (http://www.w3c.org/TR/xhtml1/), ainsi que les
sites de validateur XHTML où vous trouverez des fichiers Web (http://validator.w3.org/) et des
fichiers locaux (http://validator.w3.org/file-upload.html).
214 Chapitre 14
A propos du code XHTML généré par Dreamweaver
Dreamweaver génère du code XHTML et nettoie le code XHTML existant, conformément à la
plupart des spécifications XHTML, et ce automatiquement. Quant aux autres
spécifications XHTML, Dreamweaver met à votre disposition les outils adéquats pour vous y
conformer.
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
Action de Dreamweaver
Si le codage de caractères d'un document est différent Ajoute une déclaration XML à un document XHTML et
du mode UTF-8 par défaut, le document doit comporter spécifie le mode de codage ; par exemple :
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">
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 :
<html xmlns="http://www.w3.org/1999/xhtml">
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, body et frameset.
Inclut les éléments head, title et body dans un document
standard et les éléments head, title et frameset dans un
document avec jeu de cadres.
L'imbrication de tous les éléments du document doit
être correcte :
<p>Voici un <i>exemple incorrect.</p></i>
<p>Voici un <i>exemple correct.</i></p>
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.
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 Insère des balises de fin dans le code généré par ses
fin, à moins qu'ils ne soient déclarés dans le fichier DTD soins, ainsi que pendant le nettoyage du code XHTML.
comme EMPTY.
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 pas <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.
Optimisation et débogage de code 215
Spécification XHTML
Action de Dreamweaver
Il est impossible d'abréger les attributs ; ainsi,
<td nowrap> est incorrect ; la forme correcte est
<td nowrap="nowrap">.
Cette règle s'applique aux éléments suivants : checked,
compact, declare, defer, disabled, ismap, multiple,
noresize, noshade, nowrap, readonly et selected.
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.
Tous les attributs doivent être placés entre guillemets.
Met les valeurs d'attribut entre guillemets dans le code
généré par ses soins, ainsi que pendant le nettoyage du
code XHTML.
Les éléments suivants doivent comporter un attribut id
et un attribut name : a, applet, form, frame, iframe, img et
map. Exemple :
<a name="intro">Introduction</a> est incorrect ;
la forme correcte est
<a id="intro">Introduction</a> or
<a id="section1" name="intro">
Introduction</a>.
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 ses soins, ainsi que
pendant le nettoyage du code XHTML.
Impose l'utilisation des minuscules pour les valeurs de
Dans le cas d'attributs dont les valeurs sont de type
type Enuméré dans le code généré par ses soins, ainsi
Enuméré, celles-ci doivent figurer en minuscules.
Une valeur de type Enuméré est une valeur appartenant que pendant le nettoyage du code XHTML.
à une liste donnée de valeurs autorisées ; par exemple,
l'attribut align comprend les valeurs autorisées
suivantes : center, justify, left, et right.
Tous les éléments de script et de style doivent
comporter un attribut de type.
(La nécessite 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 langue dans les
éléments de script ainsi que l'attribut de type dans les
éléments de style, dans le code généré par ses soins,
ainsi que pendant le nettoyage du code XHTML.
Tous les éléments img et area doit 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.
Utilisation des feuilles de style en cascade (CSS) avec XHTML
En fonction de certains styles CSS, un agent utilisateur HTML (un navigateur Web, par exemple)
peut produire des résultats visuels et sonores différents de ceux d'un agent utilisateur XML. Voici
quelques règles à suivre pour réduire ces différences :
• Rédigez les noms d'éléments et d'attributs en minuscules dans les feuilles de styles CSS.
Dreamweaver impose l'écriture des noms d'éléments et d'attributs en minuscules dans un
document XHTML, indépendamment des préférences définies, dans le code généré par ses
soins, ainsi que pendant le nettoyage du code XHTML.
• A la différence d'un programme d'analyse XML, le programme d'analyse HTML infère
l'élément tbody. Si, par conséquent, vous définissez un style tbody, vous devez adjoindre
l'élément tbody à vos tableaux.
• Une feuille de style en cascade (CSS) définit diverses règles de conformité spécifiques aux
documents HTML et XML ; gardez donc à l'esprit que les règles HTML s'appliquent à un
document XHTML diffusé au format HTML et, qu'à l'inverse, les règles XML s'appliquent à
un document XHTML diffusé au format XML.
216 Chapitre 14
Remarque : pour les documents qui spécifient l'espace de noms XHTML, les navigateurs et autres agents
utilisateurs sont contraints de continuer à reconnaître l'attribut class, et l'attribut id comme un attribut de type ID.
Vous pouvez donc continuer d'employer la forme abrégée “.” pour référencer une classe CSS d'un sélecteur (par
exemple, P.note), et d'utiliser la syntaxe de sélecteur abrégée “#”, même si l'agent utilisateur ne peut pas interpréter
le fichier DTD.
Conformité des documents XHTML
Cette section décrit comment rendre un nouveau document conforme au code XHTML et
comment rendre un document HTML existant conforme au code XHTML.
Pour créer un nouveau document conforme à XHTML :
1
Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s'affiche.
2
Choisissez un type de document.
3
Activez la case à cocher Rendre le document conforme à l'XHTML.
4
Cliquez sur OK.
Pour créer des documents conformes au code XHTML par défaut :
1
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis
sélectionnez la catégorie Nouveau document.
2
Dans la catégorie Nouveau document, choisissez un type de document, puis activez la case à
cocher Rendre le document conforme à l'XHTML.
3
Cliquez sur OK.
Pour rendre un document HTML existant conforme au code XHTML :
Ouvrez un document.
• S'il s'agit d'un document sans cadres, choisissez Fichier > Convertir > XHTML.
• S'il s'agit d'un document avec cadres, sélectionnez un cadre, puis choisissez Fichier >
Convertir > XHTML. Pour convertir le document entier, répétez cette étape pour chacun des
cadres et pour le document de jeu de cadres.
Remarque : il est impossible de convertir une instance d'un modèle, puisqu'elle doit reprendre le même langage que
le modèle d'après lequel elle a été créée. Par exemple, une instance d'un modèle XHTML est toujours au
format XHTML ; de même, une instance d'un modèle HTML reste au format HTML et ne peut donc pas être
convertie en XHTML ni dans un autre langage.
Utilisation du débogueur JavaScript
Le débogueur JavaScript vous permet d'isoler les erreurs dans le code JavaScript côté client. Vous
pouvez rédiger votre code en mode Code (ou dans l'inspecteur de code), puis exécuter le
débogueur pour vérifier qu'il ne contient pas d'erreurs de syntaxe ni d'erreurs logiques. Si la page
contient une ou plusieurs erreurs de syntaxe, le navigateur affiche un message d'erreur ; si la page
contient une erreur logique, la page ne fonctionne pas correctement, mais le navigateur n'affiche
pas de message.
Vous pouvez utiliser le débogueur JavaScript avec Microsoft Internet Explorer et Netscape
Navigator 4.0 (mais pas Netscape Navigator 6.0).
Optimisation et débogage de code 217
Le débogueur commence par vérifier que votre code ne contient aucune erreur de syntaxe, puis
exécute le navigateur pour vous aider à identifier d'éventuelles erreurs logiques. En présence
d'erreurs logiques, la boîte de dialogue Débogueur JavaScript vous permettra d'examiner les
variables et les propriétés de document tandis que votre programme est en cours d'exécution.
Vous pouvez définir des points d'arrêt (similaires à des instructions d'alerte) dans votre code pour
arrêter l'exécution du programme et afficher les valeurs des objets et des propriétés JavaScript dans
une liste de variables. Vous pouvez également passer à l'instruction suivante ou appeler une
fonction pour voir la modification des valeurs de variable.
Cette section contient les rubriques suivantes :
•
•
•
•
•
•
« Exécution du débogueur JavaScript », page 218
« Recherche d'erreurs de syntaxe », page 219
« Recherche et correction des erreurs logiques », page 220
« Définition de points d'arrêt », page 220
« Examen du code », page 221
« Observation et modification des valeurs de variables », page 222
Exécution du débogueur JavaScript
Après avoir rédigé votre code JavaScript, lancez le débogueur JavaScript pour vérifier s'il y a des
erreurs. Le débogueur commence par vérifier s'il y a des erreurs de syntaxe, puis ouvre votre page
dans le navigateur pour vous permettre de contrôler s'il y a des erreurs logiques.
Pour lancer le débogage :
1
Choisissez Fichier > Débogage dans le navigateur, puis sélectionnez un navigateur dans la
liste.
Sous Windows, choisissez Internet Explorer ou Netscape Navigator. Sur Macintosh,
choisissez Netscape.
Si le débogueur détecte des erreurs de syntaxe, il s'arrête et les énumère dans la fenêtre Erreurs
de syntaxe dans JavaScript. Pour plus d'informations, voir « Recherche d'erreurs de syntaxe »,
page 219.
2
Si vous utilisez Netscape Navigator, cliquez sur OK dans la boîte d'avertissement qui s'affiche,
puis cliquez sur Autoriser dans la boîte de dialogue Sécurité Java.
Remarque : la boîte de dialogue Sécurité Java peut ne pas s'afficher si vous avez déjà accepté un Certificat de
sécurité Macromedia.
3
(Windows seulement) Si vous utilisez Internet Explorer, cliquez sur Oui dans la boîte de
dialogue Sécurité Java, puis sur OK dans la boîte d'avertissement du débogueur.
Remarque : la boîte de dialogue de sécurité est nécessaire dans la mesure où le débogueur utilise un protocole
Internet pour se connecter au navigateur ; en fait, il n'établit aucune connexion avec un réseau ou un
serveur Internet.
La boîte de dialogue Débogueur JavaScript apparaît avec la fenêtre du navigateur. Le débogueur
s'arrête automatiquement à la première ligne de code.
218 Chapitre 14
La figure suivante représente la barre d'outils de la boîte de dialogue Débogueur JavaScript.
Arrêter le
débogage
Exécuter
Supprimer
tous les
points d'arrêt
Définir/
supprimer le
point d'arrêt
Entrer
Sauter
Sortir
Pour exécuter le débogueur :
Cliquez sur le bouton Exécuter situé en haut de la boîte de dialogue Débogueur JavaScript.
Pour arrêter le débogueur :
Cliquez sur le bouton Arrêter le débogage situé en haut de la boîte de dialogue
Débogueur JavaScript. La boîte de dialogue Débogueur JavaScript se referme.
Recherche d'erreurs de syntaxe
Si le débogueur détecte des erreurs de syntaxe, il s'arrête et les énumère dans la boîte de dialogue
Erreurs de syntaxe dans JavaScript comme illustré par la figure suivante :
Pour afficher la description des erreurs :
Sélectionnez une erreur dans la boîte de dialogue Erreurs de syntaxe dans JavaScript. Une
description de l'erreur s'affiche dans la zone Description détaillée.
Pour aller à l'erreur sélectionnée dans votre code, procédez de l'une des manières suivantes :
• Double-cliquez sur l'erreur.
• Cliquez sur Aller à la ligne.
Optimisation et débogage de code 219
Le code apparaît en surbrillance en mode Code ou, si ce mode est désactivé, dans l'inspecteur de
code.
Recherche et correction des erreurs logiques
Au démarrage du débogueur, la boîte de dialogue Débogueur JavaScript s'ouvre et interrompt
l'exécution du navigateur au niveau de la première ligne de votre code. Vous pouvez définir des
points d'arrêt supplémentaires sur toutes les lignes de code. Le débogueur s'arrête à chaque point
d'arrêt pour vous permettre de consulter les valeurs des objets et des propriétés JavaScript dans le
volet de liste des variables.
Une fois le débogueur à un point d'arrêt, vous pouvez examiner votre code étape par étape
(exécuter une instruction à la fois) et vérifier ainsi si le programme s'exécute normalement. Le
débogueur peut même passer en revue le code lié. Si, par exemple, votre code contient un lien vers
un fichier source, le débogueur examine le fichier source et l'affiche dans la boîte de dialogue
Débogueur JavaScript. Simultanément, vous pouvez voir les valeurs de vos variables changer dans
votre programme.
Définition de points d'arrêt
Un point d'arrêt correspond à un endroit du code où l'exécution du programme doit s'arrêter.
Lorsque vous définissez un point d'arrêt, un petit point rouge apparaît dans la marge gauche de la
boîte de dialogue Débogueur JavaScript, à titre de repère. Lorsque l'exécution du programme
s'arrête à ce point d'arrêt, une petite flèche apparaît sur le point et vous pouvez examiner les objets
et les propriétés existant à ce point. Vous pouvez ainsi localiser rapidement la source du bogue
dans le code JavaScript.
220 Chapitre 14
Vous ne pouvez définir de points d'arrêt que dans le code JavaScript (entre les balises script) ou
sur une ligne dotée d'un gestionnaire d'événement. Si vous le définissez ailleurs, Dreamweaver le
place automatiquement sur la ligne de code valide suivante (ou y place le point d'insertion, si un
point d'arrêt a déjà été défini sur cette ligne). S'il n'y a pas de ligne valide sur laquelle définir un
point d'arrêt, vous entendrez un bip.
Pour définir un point d'arrêt :
1
Dans la boîte de dialogue Débogueur JavaScript, placez le point d'insertion sur la ligne où
ajouter le point d'arrêt.
2
Dans la barre d'outils, cliquez sur le bouton Définir/Supprimer un point d'arrêt.
3
Pour supprimer le point d'arrêt, cliquez une nouvelle fois sur le bouton Définir/Supprimer un
point d'arrêt.
Pour supprimer tous les points d'arrêt, procédez de l'une des manières suivantes :
• Cliquez sur le bouton Supprimer tous les points d'arrêt situé en haut de la boîte de dialogue
Débogueur JavaScript.
• En mode Code (ou dans l'inspecteur de code), choisissez Edition > Supprimer tous les points
d'arrêt.
Examen du code
Vous pouvez examiner votre code étape par étape afin d'exécuter vos instructions une par une et
en observer les résultats. Par exemple, vous pouvez sauter une condition if et voir si le
programme s'arrête à la première ligne de l'instruction conditionnelle ou à la ligne exécutable
suivante après l'instruction if.
Lorsque le débogueur s'arrête à une instruction dotée d'un appel de fonction, vous pouvez vérifier
la fonction pour contrôler qu'elle s'exécute correctement. Si la fonction est correcte, vous pouvez
en sortir pour permettre au débogueur d'être exécuté jusqu'au retour de la fonction. Le
programme s'arrête à la prochaine instruction rencontrée après l'emplacement de l'appel de
fonction. Si vous tentez d'entrer dans une instruction contenant une fonction JavaScript non
standard, le débogueur JavaScript passera outre l'instruction.
Pour passer outre une instruction :
Cliquez sur le bouton Sauter situé en haut de la boîte de dialogue Débogueur JavaScript.
Lorsque le programme s'arrête à une instruction (y compris celles dotées d'un appel de fonction),
vous pouvez ignorer cette instruction pour poursuivre et vous arrêter avant l'instruction suivante.
Pour entrer dans une fonction :
Cliquez sur le bouton Entrer situé en haut de la boîte de dialogue Débogueur JavaScript.
Pour sortir d'une fonction :
Cliquez sur le bouton Sortir situé en haut de la boîte de dialogue Débogueur JavaScript.
Vous pouvez uniquement utiliser l'option Sortir lorsque le débogueur se trouve dans une fonction
définie par l'utilisateur. Sortir d'une fonction déclenche l'exécution des instructions restantes dans
la définition de la fonction à exécuter. Le débogueur s'arrête à la prochaine instruction rencontrée.
Optimisation et débogage de code 221
Observation et modification des valeurs de variables
Pour vérifier les valeurs de vos variables tandis que vous passez le code en revue, utilisez le volet de
liste des variables situé dans la partie inférieure de la boîte de dialogue Débogueur JavaScript. Lors
de l'ajout d'une variable, son nom apparaît dans la colonne de gauche, tandis que la colonne de
droite affiche sa valeur en cours au moment où le programme interrompt l'exécution sur un point
d'arrêt ou après l'entrée dans le code.
La figure suivante représente la valeur en cours de plusieurs variables :
Pour ajouter une variable à la liste des variables, procédez de l'une des manières suivantes :
• Sélectionnez le nom de la variable dans la partie Code de la boîte de dialogue Débogueur
JavaScript. Cliquez sur le bouton plus (+) et appuyez sur Entrée.
• Cliquez sur le bouton plus (+), saisissez le nom de la variable que vous voulez observer et
appuyez sur Entrée.
Les valeurs s'affichent en regard de chaque variable tandis que vous passez le code en revue. Si la
variable est un objet doté de propriétés, développez-la pour afficher ses propriétés et ses valeurs.
Pour développer une variable, cliquez sur le bouton plus (+) (Windows) ou sur le bouton
triangulaire (Macintosh), situé en regard de la variable dans la liste. La variable développée se
réduit automatiquement dès que vous examinez le code.
Pour supprimer une variable de la liste :
1
Sélectionnez l'élément dans la liste.
2
Cliquez sur le bouton moins (-).
Pour modifier une valeur :
1
Sélectionnez l'élément dans la liste.
222 Chapitre 14
2
Cliquez sur la valeur dans la liste des valeurs.
3
Dans la zone de texte qui apparaît, tapez une nouvelle valeur.
Utilisation du débogueur ColdFusion
Lors du développement d'applications Macromedia ColdFusion, vous pouvez configurer
ColdFusion pour qu'il affiche dans un navigateur des informations qui vous seront utiles pour le
débogage de l'application. Si, par exemple, une page contient une erreur, ColdFusion affiche les
origines possibles de cette erreur au bas d'une page ColdFusion lors de l'ouverture de la page
d'origine dans un navigateur. Si, en qualité de développeur ColdFusion, vous faites de
Macromedia ColdFusion MX votre serveur d'évaluation Dreamweaver, vous pouvez visualiser ces
informations et corriger la page sans quitter Dreamweaver.
Remarque : cette fonction n'est pas prise en charge sur Macintosh. Les développeurs Macintosh peuvent ouvrir
une page ColdFusion dans un autre navigateur au moyen de la commande Aperçu dans le navigateur (F12). Si la
page contient des erreurs, les informations relatives aux causes possibles s'affichent au bas de la page.
Avant toute chose, assurez-vous que les paramètres de débogage sont activés dans
ColdFusion Administrator. Pour plus d'informations, voir l'aide de ColdFusion dans
Dreamweaver (Aide > Utilisation de ColdFusion). Vérifiez également que le serveur d'évaluation
Dreamweaver exécute ColdFusion MX. Pour plus d'informations sur le serveur d'évaluation de
Dreamweaver, voir Choix d'un dossier pour le traitement des pages dynamiques.
Pour déboguer une page ColdFusion :
1
Ouvrez la page ColdFusion dans Dreamweaver.
Optimisation et débogage de code 223
2
Cliquez sur l'icône Débogage du serveur (représentant un globe et un éclair) dans la barre
d'outils du document ou choisissez Affichage > Débogage de serveur.
Dreamweaver demande le fichier à partir du serveur ColdFusion MX et l'affiche dans une
fenêtre interne du navigateur Internet Explorer. Si la page contient des erreurs, leurs causes
possibles s'affichent au bas de la page.
Le panneau Débogage de serveur qui s'ouvre simultanément regroupe de nombreuses
informations utiles, telles que toutes les pages traitées par le serveur pour la restitution de la
page, toutes les requêtes SQL exécutées sur la page, ainsi que toutes les variables du serveur et
leur valeur respective, le cas échéant. Ce panneau récapitule également les durées d'exécution.
3
Si une catégorie Exceptions apparaît dans le panneau Débogage de serveur, cliquez sur le
bouton plus (+) pour la développer.
Cette catégorie s'affiche lorsque le serveur détecte un ou plusieurs problèmes sur la page.
Développez-la pour obtenir des informations sur le problème.
4
Dans la colonne Position du panneau Débogage de serveur, cliquez sur l'URL de la page pour
ouvrir celle-ci et la corriger en mode Code.
Si Dreamweaver repère et ouvre cette page, la ou les lignes fautives apparaissent en surbrillance.
A défaut, Dreamweaver vous demande de préciser l'emplacement de la page.
5
Corrigez l'erreur, enregistrez le fichier sur le serveur, puis cliquez sur Parcourir.
Dreamweaver restitue une nouvelle fois la page dans le navigateur interne et actualise le
panneau Débogage de serveur. Si tous les problèmes sont résolus sur la page, la catégorie
Exceptions ne réapparaît pas dans le panneau.
6
Pour quitter le mode de débogage, passez en mode Code (Affichage > Code) ou en mode
Création (Affichage > Création).
Pour garantir l'actualisation des informations de débogage à chaque fois qu'une page est affichée
dans le navigateur interne, veillez à ce que Internet Explorer recherche les versions plus récentes
du fichier à chaque fois que celui-ci est demandé. Dans Internet Explorer, choisissez Outils >
Options Internet, sélectionnez l'onglet Général, puis cliquez sur le bouton Paramètres dans la
zone Fichiers Internet temporaires. Dans la boîte de dialogue Paramètres, sélectionnez le bouton
radio A chaque visite de la page.
224 Chapitre 14
CHAPITRE 15
Modification du code en mode Création
Bien que Macromedia Dreamweaver MX vous permette de créer et de modifier visuellement des
pages Web sans vous soucier du code source sous-jacent, vous pouvez parfois ressentir la nécessité
de modifier le code pour disposer d'un plus grand contrôle ou corriger les éventuels problèmes de
votre page Web.
Supposons par exemple que vous sélectionniez du texte dans votre document et que vous lui
appliquiez une nouvelle police, mais que cela n'affecte que la moitié de la phrase. En regardant le
code, vous découvrirez que la balise de fermeture </font> se trouve au milieu de la phrase. Pour
résoudre le problème, déplacez la balise </font> à la fin de la phrase.
Ce chapitre est conçu pour les personnes qui préfèrent travailler en mode Création, mais qui
souhaitent également disposer d'un accès rapide au code. Dreamweaver vous permet de modifier
le code tout en travaillant en mode Création.
Ce chapitre contient les rubriques suivantes :
•
•
•
•
•
•
« Modification du code avec l'inspecteur de propriétés », page 225
« Modification du code avec un éditeur de balises », page 226
« Modification du code avec Quick Tag Editor », page 226
« Modification du code à l'aide du sélecteur de balises », page 229
« Modification des scripts », page 229
« Utilisation des inclusions côté serveur », page 231
Modification du code avec l'inspecteur de propriétés
Vous pouvez utiliser l'inspecteur de propriétés pour examiner et modifier les attributs du texte ou
des objets dans votre page.
Pour utiliser l'inspecteur de propriétés :
1
Cliquez sur le texte ou sélectionnez un objet dans la page.
L'inspecteur de propriétés pour le texte ou l'objet s'affiche sous la fenêtre de document. Si
l'inspecteur de propriétés n'est pas visible, choisissez Fenêtre > Propriétés.
2
Utilisez l'inspecteur de propriétés pour modifier vos attributs.
225
Modification du code avec un éditeur de balises
Vous pouvez utiliser un éditeur de balises pour examiner et modifier les attributs des objets dans
votre page.
Pour utiliser un éditeur de balises :
1
Cliquez avec le bouton droit de la souris (Windows) ou cliquez simultanément sur la souris et la
touche Contrôle (Macintosh) sur l'objet et choisissez Modifier la balise dans le menu contextuel.
L'éditeur de balises pour cet objet s'affiche.
2
Modifiez les attributs de l'objet, puis cliquez sur OK.
Modification du code avec Quick Tag Editor
Vous pouvez utiliser Quick Tag Editor pour examiner et modifier rapidement les balises HTML
sans quitter le mode Création. Pour ouvrir Quick Tag Editor, appuyez sur Ctrl+T (Windows) ou
Commande+T (Macintosh).
Cette section contient les rubriques suivantes :
•
•
•
•
•
« A propos de Quick Tag Editor », page 226
« Insertion d'une balise HTML à l'aide de Quick Tag Editor », page 226
« Modification d'une balise HTML à l'aide de Quick Tag Editor », page 227
« Application d'un style HTML à une sélection avec Quick Tag Editor », page 227
« Utilisation du menu contextuel », page 228
A propos de Quick Tag Editor
Quick Tag Editor comporte trois modes :
•
•
•
Insérer HTML,
qui permet d'insérer du nouveau code HTML
Modifier balise,
qui permet de modifier une balise existante
Envelopper avec balise,
qui permet d'encadrer la sélection courante d'une nouvelle balise
Le mode dans lequel s'ouvre Quick Tag Editor dépend de la sélection en cours en mode Création.
Dans les trois modes, le fonctionnement de base de Quick Tag Editor est le même : vous ouvrez
l'éditeur, saisissez ou modifiez des balises et des attributs, puis fermez l'éditeur.
Vous pouvez activer tour à tour les différents modes en appuyant sur Ctrl+T (Windows) ou
Commande+T (Macintosh) lorsque Quick Tag Editor est actif.
Si vous utilisez du code HTML non valide dans Quick Tag Editor, Dreamweaver tentera de le
corriger en insérant au besoin des guillemets fermants ou des crochets.
Pour effectuer des modifications HTML plus approfondies, utilisez le mode Code. Pour plus
d'informations, voir « Codage dans Dreamweaver », page 197.
Insertion d'une balise HTML à l'aide de Quick Tag Editor
Vous pouvez utiliser Quick Tag Editor pour insérer une balise HTML dans votre document.
226 Chapitre 15
Pour insérer une balise HTML à l'aide de Quick Tag editor :
1
En mode Création, cliquez dans la page pour placer le point d'insertion à l'endroit où vous
voulez insérer le code.
2
Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).
Quick Tag Editor s'ouvre en mode Insérer HTML.
3
Saisissez la balise HTML, puis appuyez sur Entrée.
La balise est insérée dans votre code.
4
Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.
Modification d'une balise HTML à l'aide de Quick Tag Editor
Vous pouvez utiliser Quick Tag Editor pour modifier une balise HTML dans votre document.
Pour modifier une balise HTML à l'aide de Quick Tag Editor :
1
Sélectionnez un objet en mode Création.
Vous pouvez également sélectionner la balise que vous voulez modifier à partir du sélecteur de
balise figurant au bas de la fenêtre de document. Pour plus d'informations, voir « Modification
du code à l'aide du sélecteur de balises », page 229.
2
Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh).
Quick Tag Editor s'ouvre en mode Modifier balise.
3
Saisissez de nouveaux attributs, modifiez les attributs existants ou modifiez le nom de la balise.
4
Appuyez sur Tab pour passer d'un attribut à l'autre et sur Maj+Tab pour revenir en arrière.
Par défaut, les modifications sont appliquées au document lorsque vous appuyez sur Tab ou
Maj+Tab. Pour désactiver les mises à jour automatiques, choisissez Edition > Préférences >
Quick Tag Editor ou Dreamweaver > Préférences > Quick tag Editor (Mac OS X). La boîte
de dialogue Préférences de Quick Tag Editor s'affiche. Désélectionnez l'option Appliquer
changements immédiatement, puis cliquez sur OK. Pour plus d'informations, cliquez sur le
bouton Aide de la boîte de dialogue.
5
Pour fermer Quick Tag Editor et appliquer toutes les modifications, appuyez sur Entrée.
6
Pour quitter Quick Tag Editor sans apporter d'autres changements, appuyez sur Echap.
Application d'un style HTML à une sélection avec Quick Tag Editor
Vous pouvez utiliser Quick Tag Editor pour envelopper une sélection dans votre document à
l'aide de balises HTML d'ouverture et de fermeture.
Modification du code en mode Création 227
Pour appliquer un style HTML à une sélection à l'aide de Quick Tag Editor :
1
Sélectionnez du texte ou un objet non mis en forme en mode Création.
Si vous sélectionnez du texte ou un objet qui comporte une balise HTML d'ouverture ou de
fermeture, Quick Tag Editor s'ouvre en mode Modifier la balise.
2
Appuyez sur Ctrl+T (Windows) ou Commande+T (Macintosh), ou cliquez sur le bouton
Quick Tag Editor dans l'inspecteur de propriétés.
Quick Tag Editor s'ouvre en mode Envelopper avec balise.
3
Saisissez une balise d'ouverture, telle que <font="verdana">, puis appuyez sur Entrée.
La balise est insérée au début de la sélection en cours et une balise de fermeture correspondante
est insérée à la fin.
4
Appuyez sur la touche Echap pour quitter Quick Tag Editor sans apporter aucun changement.
Utilisation du menu contextuel
Dans Quick Tag Editor, vous pouvez accéder à un menu contextuel d'attributs répertoriant tous
les attributs valides de la balise que vous modifiez ou insérez. Si Dreamweaver ne reconnaît pas la
balise que vous modifiez, le menu contextuel contient tous les attributs reconnus par
Dreamweaver pour toutes les balises.
Vous pouvez également désactiver le menu contextuel ou modifier le délai s'écoulant avant
l'apparition du menu contextuel dans Quick Tag Editor.
Pour afficher une liste des attributs valides pour une balise, arrêtez-vous quelques secondes
pendant la modification d'un nom d'attribut dans Quick Tag Editor. Un menu contextuel
apparaît, répertoriant tous les attributs valides de la balise que vous modifiez.
Utilisez le menu contextuel comme suit :
• Lorsque vous commencez à entrer le nom d'un attribut, le menu contextuel défile pour mettre
en surbrillance le premier nom d'attribut qui commence par la ou les lettres déjà saisies.
• Pour déplacer la surbrillance vers le haut ou vers le bas dans le menu, utilisez les touches
fléchées Haut ou Bas ou la barre de défilement.
• Pour choisir le nom d'attribut en surbrillance, appuyez sur Entrée ou double-cliquez sur un
nom d'attribut dans le menu.
• Pour désactiver le menu contextuel sans sélectionner une de ses entrées, appuyez sur la touche
Echap ou continuez tout simplement à taper du texte.
Si vous vous arrêtez quelques secondes pendant la saisie ou la modification du nom d'une balise,
un menu contextuel similaire s'affiche, répertoriant les noms de balises au lieu des noms
d'attributs.
Pour désactiver le menu contextuel ou modifier le délai s'écoulant avant l'apparition du menu
contextuel :
1
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X) et sélectionnez
Quick Tag Editor.
La boîte de dialogue Préférences de Quick Tag Editor s'affiche.
2
Pour désactiver le menu contextuel, désélectionnez l'option Activer le menu contextuel de
balises.
228 Chapitre 15
3
Pour modifier le délai avant l'apparition du menu, réglez le curseur Délai.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
4
Cliquez sur OK.
Modification du code à l'aide du sélecteur de balises
Vous pouvez utiliser le sélecteur de balises pour sélectionner, modifier ou supprimer les balises
sans quitter le mode Création. Le sélecteur de balises se trouve dans la barre d'état en bas de la
fenêtre de document, et présente une série de balises, comme suit.
Pour modifier une balise :
1
Cliquez dans le document.
Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le sélecteur de balises.
2
Cliquez à l'aide du bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur une balise dans le sélecteur de balises.
Un menu contextuel s'affiche.
3
Sélectionnez Modifier la balise dans le menu.
Quick Tag Editor s'affiche. Pour plus d'informations, voir « Modification d'une balise HTML à
l'aide de Quick Tag Editor », page 227.
Pour supprimer une balise :
1
Cliquez dans le document.
Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le sélecteur de balises.
2
Cliquez à l'aide du bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur une balise dans le sélecteur de balises.
Un menu contextuel s'affiche.
3
Sélectionnez Supprimer la balise dans le menu.
Pour sélectionner un objet représenté par une balise :
1
Cliquez dans le document.
Les balises qui s'appliquent au niveau du point d'insertion s'affichent dans le sélecteur de balises.
2
Cliquez sur une balise dans le sélecteur de balises.
L'objet représenté par la balise est sélectionné sur la page.
Conseil : utilisez cette technique pour sélectionner des lignes de tableau (balises tr) ou des cellules (balises td ).
Modification des scripts
Vous pouvez travailler avec des scripts JavaScript et VBScript côté client en mode Création ou Code.
Cette section contient les rubriques suivantes :
Modification du code en mode Création 229
• « Ecriture d'un script côté client en mode Création », page 230
• « Création d'un lien vers un fichier script externe », page 230
• « Modification d'un script en mode Création », page 230
Ecriture d'un script côté client en mode Création
Vous pouvez écrire un script JavaScript ou VBScript pour votre page sans quitter le mode
Création. Avant de commencer, assurez-vous que Dreamweaver affiche des marqueurs de script
sur la page. Pour afficher des marqueurs de script, choisissez Affichage > Assistances visuelles >
Eléments invisibles.
Pour insérer un script côté client en mode Création :
1
Placez le point d'insertion à l'endroit où vous voulez insérer le script.
2
Choisissez Insertion > Objets Script > Script.
La boîte de dialogue Script s'affiche.
3
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.
Création d'un lien vers un fichier script externe
Vous pouvez créer un lien dans votre document vers un fichier script externe sans quitter le mode
Création. Avant de commencer, assurez-vous que Dreamweaver affiche des marqueurs de script
sur la page. Pour afficher des marqueurs de script, choisissez Affichage > Assistances visuelles >
Eléments invisibles.
Pour lier un fichier de script externe :
1
Placez le point d'insertion à l'endroit où vous voulez insérer le script.
2
Sélectionnez Insertion > Objets Script > Script.
La boîte de dialogue Script s'affiche.
3
Cliquez sur OK sans compléter la zone de texte Contenu.
4
Sélectionnez le marqueur de script dans le mode Création de la fenêtre de document.
5
Dans l'inspecteur de propriétés, cliquez sur l'icône de dossier pour rechercher et sélectionner le
fichier de script externe ou tapez le nom de fichier dans la zone Source.
Modification d'un script en mode Création
Vous pouvez modifier un script sans quitter le mode Création. Avant de commencer, assurez-vous
que Dreamweaver affiche des marqueurs de script sur la page. Pour afficher des marqueurs de
script, choisissez Affichage > Assistances visuelles > Eléments invisibles.
Pour modifier le script en mode Création :
1
Sélectionnez le marqueur de script.
230 Chapitre 15
2
Dans l'inspecteur de propriétés, cliquez sur le bouton Edition.
Le script s'affiche dans la boîte de dialogue Propriétés du script.
Si vous avez créé un lien vers un fichier de script externe, le fichier s'ouvre automatiquement en
mode Code, où vous pouvez apporter vos modifications.
Remarque : s'il n'y a pas de code entre les balises script, la boîte de dialogue Propriétés du script s'ouvre, même
s'il y existe également un lien vers un fichier de script externe.
3
Apportez vos modifications au script, puis cliquez sur OK.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue Propriétés du
script.
Utilisation des inclusions côté serveur
Les inclusions côté serveur sont des instructions données au serveur Web pour qu'il inclue un
fichier spécifié dans une page Web avant d'envoyer la page au navigateur. Vous pouvez utiliser
Dreamweaver pour insérer des inclusions côté serveur dans vos pages, modifier ces inclusions ou
prévisualiser les pages contenant des inclusions.
Cette section contient les rubriques suivantes :
• « A propos des inclusions côté serveur », page 231
• « Insertion d'une inclusion côté serveur », page 232
• « Modification du contenu d'une inclusion à partir du serveur », page 232
A propos des inclusions côté serveur
Lorsque vous ouvrez un document se trouvant sur un serveur Web, le serveur traite les
instructions d'inclusion et crée un document dans lequel ces instructions sont remplacées par le
contenu du fichier inclus. Le serveur envoie ensuite ce nouveau document à votre navigateur.
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.
Avec Dreamweaver, cependant, 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 en cours.
Dreamweaver affiche le contenu du fichier externe en mode Création, ce qui facilite la création de
pages.
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. 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. Choisissez-les
en fonction du type de serveur Web que vous utilisez :
Modification du code en mode Création 231
• Si votre serveur est un serveur Apache Web, choisissez 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), choisissez Fichier.
(Virtuel ne fonctionne avec IIS que dans des cas précis). 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 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.
Insertion d'une inclusion côté serveur
Vous pouvez utiliser Dreamweaver pour insérer des inclusions côté serveur dans votre page.
Pour insérer une SSI :
1
Choisissez Insertion > Objets Script > Inclusion côté serveur.
2
Dans la boîte de dialogue qui s'affiche, recherchez le fichier et sélectionnez-le.
Pour changer de fichier inclus :
1
Sélectionnez la SSI dans la fenêtre de document.
2
Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés).
3
Procédez de l'une des manières suivantes :
• Cliquez sur l'icône de dossier et localisez puis sélectionnez le nouveau fichier à inclure.
• Dans la zone de texte, tapez le chemin et le nom de fichier du nouveau fichier à inclure.
Modification du contenu d'une inclusion à partir du serveur
Vous pouvez utiliser Dreamweaver pour modifier des inclusions côté serveur. Pour modifier le
contenu associé au fichier inclus, vous devez ouvrir le fichier.
232 Chapitre 15
Pour modifier une SSI :
1
Sélectionnez l'inclusion côté serveur soit en mode Création, soit en mode Code, et cliquez sur
Modifier dans l'inspecteur de propriétés.
Le fichier inclus s'ouvre dans une nouvelle fenêtre de document.
2
Modifiez le fichier, puis enregistrez-le.
Les modifications sont immédiatement reflétées dans le document courant et dans tous les
autres documents ultérieurs qui incluent ce fichier.
Modification du code en mode Création 233
234 Chapitre 15
Utilisez les outils de création visuelle de Dreamweaver pour
créer des mises en page sophistiquées.
Cette partie du manuel contient les chapitres suivants :
• Chapitre 16, « Présentation de contenu à l'aide de
tableaux »
• Chapitre 17, « Le mode de Mise en forme »
• Chapitre 18, « Utilisation de cadres »
Partie IV
Partie IV
Conception de la mise
en page
CHAPITRE 16
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 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.
Une fois un tableau créé, il est facile d'en modifier l'aspect et la structure. Vous pouvez effectuer
les opérations suivantes :
•
•
•
•
Ajouter un contenu
Ajouter, supprimer, fractionner et fusionner des lignes ou des colonnes
Modifier les propriétés de couleur ou d'alignement d'un tableau, d'une ligne ou d'une cellule
Copier et coller des cellules
Remarque : un grand nombre de concepteurs utilisent des tableaux pour mettre des pages Web en forme.
Dreamweaver offre deux méthodes pour visualiser et manipuler 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 vous permet de
dessiner, redimensionner et déplacer des rectangles sur la page tout en continuant d'utiliser les tableaux comme
structure sous-jacente (voir « Le mode de Mise en forme », page 253).
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
« Insertion d'un tableau », page 238
« Ajout de contenu dans une cellule de tableau », page 238
« Importation de données tabulaires », page 239
« Sélection d'éléments de tableau », page 239
« Mise en forme des tableaux et des cellules », page 241
« Redimensionnement de tableaux », page 244
« Modification de la largeur des colonnes et de la hauteur des lignes », page 245
« Ajout et suppression de lignes et de colonnes », page 246
« Imbrication de tableaux », page 249
« Couper, copier et coller des cellules », page 249
« Tri des tableaux », page 251
« Exportation des données d'un tableau », page 251
237
Insertion d'un tableau
Utilisez la barre ou le menu Insérer pour créer un nouveau tableau. Pour plus d'informations sur la
création de tableaux accessibles avec Dreamweaver, voir « Création de pages Web accessibles »,
page 357.
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 ne contient aucun contenu, le point d'insertion peut uniquement être placé au début
du document.
2
Procédez de l'une des manières suivantes :
• Cliquez sur le bouton Tableau dans la catégorie Commun de la barre Insertion.
• Choisissez Insertion > Tableau.
La boîte de dialogue Insérer un tableau 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.
Ajout de contenu dans une cellule de tableau
Vous pouvez ajouter du texte et des images aux cellules du tableau de la même façon que vous le faites
en dehors d'un tableau.
Pour plus d'informations, voir Chapitre 19, « Insertion et mise en forme de texte », page 283 et
Chapitre 20, « Insertion d’images », page 311.
Lorsque vous ajoutez ou modifiez le contenu de votre tableau, vous pouvez aller plus vite en utilisant
le clavier pour naviguer dans le tableau.
Pour vous déplacer d'une cellule à une autre en utilisant le clavier, effectuez les opérations suivantes :
• Appuyez sur la touche de tabulation pour accéder à la cellule suivante.
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.
• Appuyez sur Maj+Tab pour accéder à la cellule précédente.
• Appuyez sur les touches fléchées pour vous déplacer vers le haut, le bas, la droite ou la gauche.
238 Chapitre 16
Importation 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).
Pour importer les données d'un tableau :
1
Procédez de l'une des manières suivantes :
• Choisissez Fichier > Importer > Données tabulées.
• Choisissez Insertion > Objets du tableau > Importer les données tabulaires.
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.
Rubrique connexe
« Affichage des enregistrements de base de données », page 561
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 un bloc de cellules contiguës à l'intérieur d'un tableau. Après
avoir sélectionné un tableau ou des cellules, vous pouvez :
• Modifier l'aspect des cellules sélectionnées ou du texte qu'elles contiennent. Voir « Mise en
forme des tableaux et des cellules », page 241.
• Copier et coller des plages de cellules contiguës. Voir « Couper, copier et coller des cellules »,
page 249.
Vous pouvez également sélectionner plusieurs cellules non contiguës dans un tableau et en
modifier les propriétés. Il est en revanche impossible de copier ou coller des ensembles de cellules
non contiguës.
Pour sélectionner un tableau entier, procédez de l'une des manières suivantes :
• Cliquez dans l'angle supérieur gauche du tableau ou n'importe où sur le bord droit ou
inférieur.
Présentation de contenu à l'aide de tableaux 239
• Cliquez dans une cellule du tableau, puis sélectionnez la balise table dans le sélecteur de
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 sélectionnez la balise table dans l'inspecteur de
balises.
Des poignées de sélection apparaissent sur les bords inférieurs et droits du tableau sélectionné.
Pour sélectionner des lignes ou des 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 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.
• Cliquez dans la cellule, puis choisissez Edition > Sélectionner tout.
Conseil : choisissez Edition > Sélectionner tout à nouveau lorsqu'une cellule est sélectionnée pour
sélectionner tout le tableau.
• Cliquez dans une cellule du tableau, puis sélectionnez la balise td dans l'inspecteur de balises.
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.
240 Chapitre 16
• Cliquez dans une cellule puis maintenez la touche Maj enfoncée tout en cliquant dans une
autre cellule.
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.
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. Voir « Affichage et
paramétrage des propriétés des tableaux », page 242, « Affichage et définition des propriétés de
cellule, de ligne et de colonne », page 242 et « Utilisation d'un modèle de mise en forme pour
formater un tableau », page 243.
Pour mettre en forme du texte dans des tableaux, vous pouvez appliquer une mise en forme au
texte sélectionné ou utiliser des styles. Voir Chapitre 19, « Insertion et mise en forme de texte »,
page 283.
A propos des conflits dans la mise en forme de tableaux
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 définissez
la couleur jaune pour l'arrière-plan du tableau entier, 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.
Présentation de contenu à l'aide de tableaux 241
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.
Affichage et paramétrage des propriétés des tableaux
Lorsqu'un tableau est sélectionné, l'inspecteur de propriétés vous permet de visualiser et de
modifier ses propriétés.
Pour afficher les propriétés d'un tableau :
1
Sélectionnez le tableau.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
Pour afficher toutes les propriétés d'un tableau :
Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans le
coin inférieur droit pour afficher toutes les propriétés.
Pour mettre en forme un tableau dans l'inspecteur de propriétés :
1
Sélectionnez un tableau. Pour plus d'informations, voir « Sélection d'éléments de tableau »,
page 239.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
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.
Rubrique connexe
« Utilisation d'un modèle de mise en forme pour formater un tableau », page 243
Affichage et définition des propriétés de cellule, de ligne et de colonne
Lorsqu'une cellule ou une série de cellules est sélectionnée, l'inspecteur de propriétés vous permet
de visualiser et de modifier les propriétés des cellules.
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.
Pour afficher les propriétés d'un élément de tableau :
1
Sélectionnez une cellule ou une série de cellule d'une ligne ou d'une colonne.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
242 Chapitre 16
Pour visualiser toutes les propriétés de cellule, de ligne ou de colonne :
Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans le
coin inférieur droit pour afficher toutes les propriétés.
Pour mettre en forme les éléments de tableau dans l'inspecteur de propriétés :
1
Sélectionnez une cellule, une ligne ou une colonne. Pour plus d'informations, voir « Sélection
d'éléments de tableau », page 239.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
3
Modifiez la mise en forme de l'élément de tableau en définissant les propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
Rubrique connexe
« Sélection d'éléments de tableau », page 239
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 d'autres mises en forme inhabituelles qui différencient le
tableau d'une simple grille rectangulaire de cellules.
Présentation de contenu à l'aide de tableaux 243
Pour utiliser une mise en forme de tableau prédéfinie :
1
Sélectionnez un tableau, puis choisissez Commandes > Formater le tableau.
La boîte de dialogue Formater le tableau s'affiche.
2
Personnalisez les options selon vos besoins.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3
Cliquez sur Appliquer ou sur OK pour mettre en forme votre tableau avec la mise en forme
sélectionnée.
Redimensionnement de tableaux
Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines
colonnes individuelles. Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent
de taille en proportion.
Remarque : 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 redimensionner un tableau :
1
Sélectionnez 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.
244 Chapitre 16
• Pour redimensionner verticalement et horizontalement, faites glisser la poignée de sélection
vers le coin inférieur droit.
Rubriques connexes
« Sélection d'éléments de tableau », page 239
Modification de la largeur des colonnes et de la hauteur des
lignes
Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne à l'aide de l'inspecteur de
propriétés ou en faisant glisser les bordures de la colonne ou de la ligne. Vous pouvez aussi
modifier la largeur et la hauteur des cellules directement dans le code HTML à l'aide du mode
Code.
Si vous avez des problèmes pour le redimensionnement, vous pouvez effacer la largeur des
colonnes ou la hauteur des lignes et recommencer.
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. Pour plus d'informations, voir « Affichage et paramétrage des propriétés
des tableaux », page 242.
Pour redimensionner visuellement une colonne ou une ligne, procédez de l'une des manières
suivantes :
• Pour modifier une largeur de colonne, sélectionnez la colonne, puis faites glisser la bordure
droite de la colonne.
Si la colonne n'est pas à l'extrême droite du tableau, la largeur de la colonne contiguë est
également modifiée pour conserver la même largeur de tableau. Si la colonne est à l'extrême
droite du tableau, la largeur du tableau est modifiée et toutes les colonnes s'adaptent
proportionnellement.
• Pour modifier une hauteur de ligne, sélectionnez la ligne, puis 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.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
3
Modifiez la mise en forme de l'élément de tableau en définissant les propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
Pour effacer toutes les largeurs et hauteurs définies :
1
Sélectionnez le tableau.
2
Procédez de l'une des manières suivantes :
• Pour effacer toutes les largeurs spécifiées, choisissez Modifier > Tableau > Effacer les largeurs
de cellule ou, dans l'inspecteur de propriétés, cliquez sur le bouton Effacer les largeurs de
colonne.
• Pour effacer toutes les hauteurs spécifiées, choisissez Modifier > Tableau > Effacer les hauteurs
de cellule ou, dans l'inspecteur de propriétés, cliquez sur le bouton Effacer les hauteurs de
ligne.
Présentation de contenu à l'aide de tableaux 245
Rubriques connexes
« Sélection d'éléments de tableau », page 239
« Redimensionnement de tableaux », page 244
« Codage dans Dreamweaver », page 197
Ajout et suppression de lignes et de colonnes
Pour ajouter ou supprimer des lignes et des colonnes, utilisez les commandes du sous-menu
Modifier > Tableau.
Conseil : le fait d'appuyer sur la touche de tabulation lorsque le point d'insertion se trouve dans la dernière cellule
d'un tableau ajoute automatiquement une ligne.
Pour ajouter des lignes ou des colonnes :
1
Cliquez dans une cellule.
2
Procédez de l'une des manières suivantes :
• Pour ajouter une ligne au-dessus de la cellule en cours, choisissez Modifier > Tableau > Insérer
une ligne.
• Pour ajouter une colonne à gauche de la cellule en cours, choisissez Modifier > Tableau >
Insérer une colonne.
• Pour ajouter plusieurs lignes ou colonnes à la fois ou pour ajouter une ligne sous la cellule en
cours ou une colonne à droite de cette cellule, 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
Si vous avez choisi Insérer des lignes ou des colonnes, entrez les informations nécessaires dans 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 supprimer une ligne ou une colonne :
1
Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer.
2
Procédez de l'une des manières suivantes :
• Pour supprimer une ligne, choisissez Modifier > Tableau > Supprimer la ligne.
• Pour supprimer une colonne, choisissez Modifier > Tableau > Supprimer la colonne.
Conseil : vous pouvez également sélectionner une ligne ou une colonne entière, puis choisir Edition > Effacer ou
appuyer sur la touche Suppr. La ligne ou la colonne entière est supprimée du tableau.
Pour ajouter ou supprimer des lignes ou des colonnes en utilisant l'inspecteur de propriétés :
1
Sélectionnez le tableau.
2
Dans l'inspecteur de 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.
246 Chapitre 16
• 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
« Sélection d'éléments de tableau », page 239
« Insertion d'un tableau répété », page 475
« Affichage de plusieurs comportements », page 568
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. 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'arrangement spécifié.
Dans l'illustration ci-dessous, les cellules au milieu des deux premières lignes ont été fusionnées de
sorte qu'elles s'étendent sur deux lignes.
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.
Présentation de contenu à l'aide de tableaux 247
Pour fusionner deux cellules ou plus d'un tableau :
1
Sélectionnez les cellules. Les cellules sélectionnées doivent être contiguës et présenter une
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
Choisissez Modifier > Tableau > Fusionner les cellules ou, dans l'inspecteur de propriétés,
cliquez sur le bouton Fusionner les cellules.
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
Choisissez Modifier > Tableau > Fractionner la cellule ou, dans l'inspecteur de propriétés,
cliquez sur le bouton Fractionner la cellule.
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
Choisissez Modifier > Tableau > Augmenter l'étendue de ligne ou Modifier > Tableau >
Augmenter l'étendue de colonne ou Modifier > Tableau > Réduire l'étendue de ligne ou
Modifier > Tableau > Réduire l'étendue de colonne.
248 Chapitre 16
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.
3
Dans la boîte de dialogue Insérer un tableau, spécifiez les propriétés du tableau imbriqué puis
cliquez sur OK.
Couper, copier et coller des cellules
Vous pouvez couper, copier ou coller une seule cellule de tableau ou plusieurs cellules à la fois, 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.
Présentation de contenu à l'aide de tableaux 249
Pour couper ou copier les cellules d'un tableau :
1
Sélectionnez une combinaison quelconque de cellules dans le tableau. Les cellules sélectionnées
doivent être contiguës et présenter une 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
Coupez ou copiez les cellules en utilisant Edition > Couper ou Edition > Copier.
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 Presse-papiers.
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 celle-ci.
• Pour coller une colonne entière de cellules à gauche d'une cellule spécifique, cliquez dans celleci.
• Pour créer un nouveau tableau avec les cellules collées, placez le point d'insertion hors du
tableau.
Remarque : si vous avez placé moins d'une ligne ou d'une colonne entière dans le Presse-papiers et que vous
cliquez dans une cellule puis collez les cellules figurant dans le Presse-papiers, 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.
250 Chapitre 16
2
Choisissez 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. (en veillant à 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électionnez 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 la ligne ou la colonne à supprimer.
2
Choisissez Modifier > Tableau > Supprimer la ligne ou Modifier > Tableau > Supprimer la
colonne.
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 des tableaux contenant des attributs COLSPAN ou ROWSPAN, c'est-à-dire
des tableaux contenant des cellules fusionnées. Pour plus d'informations, voir « Fractionnement et
fusion de cellules », page 247.
Pour trier un tableau :
1
Sélectionnez le tableau (ou cliquez sur n'importe quelle cellule).
2
Choisissez Commandes > Trier le tableau.
La boîte de dialogue Trier le tableau s'affiche.
3
Dans la boîte de dialogue Trier le tableau, spécifiez comment vous voulez trier le tableau.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Exportation des données d'un tableau
Vous pouvez 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. 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 collez-les hors du tableau (pour créer un nouveau tableau) avant
d'exporter le nouveau tableau.
Présentation de contenu à l'aide de tableaux 251
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 le tableau s'affiche.
3
Dans la boîte de dialogue Exporter le 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.
5
Dans la boîte de dialogue qui s'affiche, attribuez un nom au fichier puis cliquez sur Enregistrer.
252 Chapitre 16
CHAPITRE 17
Le mode de Mise en forme
Dreamweaver vous offre différents moyens de mettre vos pages Web 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 forme, Dreamweaver met à votre
disposition un mode de Mise en forme. En mode de Mise en forme, vous pouvez créer votre page
en utilisant des tableaux comme structure sous-jacente, tout en évitant certains problèmes qui
surgissent souvent pendant la création de pages fondée sur des tableaux à l'aide de méthodes
traditionnelles. Par exemple, en mode de Mise en forme, vous pouvez facilement dessiner des
cellules de Mise en forme, puis les déplacer à l'endroit souhaité. Vous pouvez également créer des
mises en page à largeur fixe ou qui s'adaptent automatiquement à la largeur de la fenêtre du
navigateur (voir « Définition de la largeur des colonnes », page 262).
Vous avez aussi la possibilité d'agencer vos pages en utilisant les tableaux de manière traditionnelle
(voir « Présentation de contenu à l'aide de tableaux », page 237) ou des calques que vous
convertissez en tableaux (voir « Utilisation de tableaux et de calques pour la mise en forme »,
page 411). Le mode de Mise en forme constitue cependant la méthode la plus facile pour
organiser votre page.
Remarque : en mode de Mise en forme, vous ne pouvez pas utiliser les outils Insérer un tableau et Dessiner un
calque disponibles en mode Standard. Pour utiliser ces outils, vous devez d'abord basculer en mode Standard.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
« A propos des cellules et des tableaux », page 254
« Activation et désactivation du mode de Mise en forme », page 254
« Dessin de cellules et de tableaux de Mise en forme », page 255
« Ajout de contenu dans une cellule de Mise en forme », page 259
« Déplacement et redimensionnement de cellules et de tableaux de Mise en forme », page 260
« Formatage de cellules et de tableaux de Mise en forme », page 262
« Définition de la largeur des colonnes », page 262
« Définition des préférences du mode de Mise en forme », page 266
253
A propos des cellules et des tableaux
En mode de Mise en forme, vous pouvez mettre en forme votre page avant d'ajouter du contenu.
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.
(Une autre solution consiste à dessiner chaque cellule uniquement lorsque vous êtes sur le point
d'y placer du contenu. Cette méthode offre une plus grande souplesse en vous permettant de
disposer plus longtemps d'espace libre dans le tableau de Mise en forme, ce qui vous permet de
déplacer ou de redimensionner les cellules plus facilement.)
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.
Vous pouvez mettre en forme votre page en utilisant plusieurs cellules de Mise en forme à
l'intérieur d'un tableau. Il s'agit de la méthode la plus utilisée pour organiser une page Web. Vous
pouvez également utiliser plusieurs tableaux pour une mise en forme plus sophistiquée.
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. Ce procédé vous 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. Pour plus d'informations, voir « Dessin d'un tableau
de Mise en forme imbriqué », page 257.
Activation et désactivation du mode de Mise en forme
Avant de dessiner des tableaux ou des cellules de Mise en forme, vous devez passer du mode
Standard en mode de Mise en forme.
Conseil : si vous créez un tableau en mode Standard puis que vous basculez en mode de 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. Lorsque vous créez une mise en forme pour la modifier en mode de Mise en
forme, il est préférable de créer le tableau en mode de Mise en forme plutôt qu'en mode Standard.
254 Chapitre 17
Pour passer en mode Mise en forme :
1
Si le mode Création n'est pas visible, choisissez Affichage > Code ou Création > Code et
Création.
En mode Code, il est impossible d'activer ou de désactiver le mode de Mise en forme.
2
Choisissez Affichage > Mode Tableau > Mode Mise en forme ou cliquez sur le bouton Mode
de Mise en forme dans la catégorie Mise en forme de la barre Insertion. (Dans l'espace de
travail flottant de type Dreamweaver 4, qui comporte une barre verticale Insérer, les éléments
de mise en forme apparaissent en bas du panneau et non pas dans une catégorie distincte.)
Une barre grise intitulée Mode de Mise en forme apparaît en haut du mode Création, pour
indiquer que vous êtes en mode de Mise en forme. Si votre page comporte des tableaux, ceuxci s'affichent sous forme de tableaux de Mise en forme.
Pour basculer en mode de Mise en forme :
1
Si le mode Création n'est pas visible, choisissez Affichage > Code ou Création > Code et
Création.
En mode Code, il est impossible d'activer ou de désactiver le mode de Mise en forme.
2
Choisissez Affichage > Mode Tableau > Mode Standard ou cliquez sur le bouton Mode
Standard dans la catégorie Mise en forme de la barre Insertion.
Dessin de cellules et de tableaux de Mise en forme
En mode de Mise en forme, vous pouvez dessiner des cellules et des tableaux de Mise en 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 : 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.
Pour dessiner une cellule de Mise en forme :
1
En mode de Mise en forme (voir « Activation et désactivation du mode de Mise en forme »,
page 254), cliquez sur le bouton Dessiner la cellule de Mise en forme dans la catégorie Mise
en forme de la barre Insertion. (Dans l'espace de travail de type Dreamweaver 4, qui comporte
une barre verticale Insérer, les éléments de mise en forme apparaissent en bas du panneau et
non pas dans une catégorie distincte.)
Le pointeur prend la forme d'un signe plus (+).
2
Cliquez à l'endroit où vous souhaitez placer la cellule sur la page, puis faites glisser le pointeur
pour créer la cellule. Pour créer plusieurs cellules sans cliquer à chaque fois sur le bouton
Dessiner la cellule de Mise en forme, créez chaque cellule de Mise en forme en maintenant la
touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, puis en faisant glisser le
pointeur.
Le mode de Mise en forme 255
La cellule s'affiche sur votre page avec un contour bleu. (Le bleu est la couleur par défaut du
contour des cellules de Mise en forme. Pour changer cette couleur, voir « Définition des
préférences du mode de Mise en forme », page 266.) La largeur de chaque cellule est affichée dans
la zone d'en-tête de la colonne, en haut de la cellule, si l'affichage des onglets des tableaux de Mise
en forme est activé (voir « Définition des préférences du mode de Mise en forme », page 266).
Pour plus d'informations sur la largeur des colonnes, voir « Définition de la largeur des
colonnes », page 262.
Une fine grille de lignes apparaît, depuis les bords de la nouvelle cellule de Mise en forme
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. Pour désactiver temporairement l'alignement,
maintenez la touche Alt (Windows) ou Option (Macintosh) enfoncée pendant que vous dessinez
la cellule.
Pour dessiner un tableau de Mise en forme :
1
Assurez-vous que vous êtes en mode de Mise en forme. Ensuite, procédez de l'une des manières
suivantes :
• Pour dessiner un tableau de Mise en forme, cliquez sur le bouton Dessiner le tableau de Mise
en forme dans la catégorie Mise en forme de la barre Insertion. Le pointeur prend la forme
d'un signe plus (+).
• Pour dessiner plusieurs tableaux de Mise en forme sans cliquer plusieurs fois sur 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.
Lorsque vous avez terminé de dessiner un tableau, vous pouvez en dessiner un autre
immédiatement.
2
Placez le pointeur sur la page, puis faites-le glisser pour créer le tableau de Mise en forme.
Si la page ne contient pas d'autres éléments, le nouveau tableau est automatiquement placé
dans le coin supérieur gauche de la page.
Le tableau s'affiche avec un contour vert. (Le vert est la couleur par défaut du contour des
tableaux de Mise en forme. Pour changer cette couleur, voir « Définition des préférences du mode
de Mise en forme », page 266.) Un onglet intitulé Tableau de Mise en forme s'affiche en haut de
chaque tableau que vous dessinez, pour vous permettre de sélectionner le tableau et de le
distinguer des autres éléments qui figurent sur votre page.
La largeur du tableau (en pixels ou en pourcentage de la largeur de la page) s'affiche dans la zone
d'en-tête de la colonne, en haut du tableau, si l'affichage des onglets des tableaux de Mise en
forme est activé (voir « Définition des préférences du mode de Mise en forme », page 266). Pour
plus d'informations sur la largeur des tableaux et des colonnes, voir « Définition de la largeur des
colonnes », page 262.
256 Chapitre 17
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. 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 257.
Conseil : vous ne pouvez pas dessiner de tableau de Mise en forme à proximité d'un contenu existant. Si votre page
contient déjà des éléments, vous pouvez dessiner un nouveau tableau de Mise en forme uniquement sous le
contenu existant. Si vous essayez de dessiner un tableau de Mise en forme sous du contenu existant mais 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.
Dessin d'un tableau de Mise en forme imbriqué
Vous pouvez dessiner un tableau de Mise en forme à l'intérieur d'une 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.
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
En mode de Mise en forme, cliquez sur le bouton Dessiner le tableau de Mise en forme dans
la catégorie Mise en forme de la barre Insertion.
Le pointeur prend la forme d'un signe plus (+).
2
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.
Le mode de Mise en forme 257
Pour dessiner un tableau de Mise en forme autour de cellules ou de tableaux existants :
1
En mode de Mise en forme, cliquez sur le bouton Dessiner le tableau de Mise en forme dans
la catégorie Mise en forme de la barre Insertion.
Le pointeur prend la forme d'un signe plus (+).
2
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.
Alignement des cellules de Mise en forme sur la grille
Vous pouvez activer la grille Dreamweaver afin de l'utiliser comme guide visuel dans la mise en
forme. 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 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 > Afficher la grille.
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.
258 Chapitre 17
Ajout de contenu dans une cellule de Mise en forme
En mode de 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 « Dessin de cellules et de tableaux de Mise en forme », page 255).
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 zone d'en-tête de cette colonne affiche la largeur qui
apparaît dans le code, suivie par 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 262.)
Pour ajouter du texte dans une cellule de Mise en forme :
Placez le point d'insertion dans la cellule de Mise en forme où vous souhaitez ajouter du texte, et
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. à l'aide de la commande Coller. Pour plus
d'informations, voir « Insertion et mise en forme de texte HTML », page 283.
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 :
• Cliquez sur le bouton Insérer une image dans la catégorie Commun de la barre Insertion.
• Choisissez Insertion > Image.
3
Dans la boîte de dialogue qui s'affiche, choisissez un fichier d'image.
Pour plus d'informations, voir « Insertion d'une image », page 312.
Le mode de Mise en forme 259
Effacement 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.
Après avoir inséré du contenu dans la cellule, il se peut que vous n'ayez plus besoin que la hauteur
soit spécifiée. Vous pouvez alors supprimer les hauteurs de cellule du tableau.
Pour ce faire, procédez de l'une des manières suivantes :
• Sélectionnez Effacer les hauteurs de cellule dans le menu d'en-tête de colonne.
Dreamweaver efface toutes les hauteurs spécifiées dans le tableau. Il se peut que certaines
cellules se rétrécissent verticalement.
• 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.
Dreamweaver efface toutes les hauteurs spécifiées dans le tableau.
Déplacement et redimensionnement de cellules et de 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é.)
Les cellules de Mise en forme 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.
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 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.
260 Chapitre 17
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. Maintenez
la touche Maj enfoncée tout en appuyant sur une touche directionnelle pour déplacer la cellule
par incréments de 10 pixels.
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.
2
Procédez de l'une des manières suivantes :
• Faites glisser le tableau vers un autre emplacement sur la page.
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.
• Appuyez sur les touches fléchées pour déplacer le tableau par incréments de 1 pixel. Maintenez
la touche Maj enfoncée tout en appuyant sur une touche directionnelle pour déplacer la
tableau par incréments de 10 pixels.
Rubrique connexe
Pour utiliser la grille Dreamweaver comme guide afin de déplacer ou de redimensionner des
cellules et des tableaux, voir « Alignement des cellules de Mise en forme sur la grille », page 258.
Le mode de Mise en forme 261
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 en choisissant Fenêtre > Propriétés.
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 ou sur la balise <table>
dans le sélecteur de balises.
2
Ouvrez l'inspecteur de propriétés en choisissant Fenêtre > Propriétés.
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
En mode de 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 informations relatives à la largeur s'affichent dans la zone d'en-tête de colonne
en haut de chaque colonne du tableau sélectionné, si l'affichage des onglets des tableaux de Mise
en forme est activé (voir « Définition des préférences du mode de Mise en forme », page 266).
262 Chapitre 17
Une valeur numérique spécifique, telle que 300 pixels, est attribuée à une colonne à largeur fixe ;
la largeur s'affiche dans la zone d'en-tête de colonne (sauf si la colonne est trop étroite pour que
les nombres puissent s'afficher). La largeur d'une colonne à extension automatique change
automatiquement en fonction de la largeur de la fenêtre du navigateur ; la zone d'en-tête de la
colonne pour une colonne d'extension automatique affiche une ligne ondulée au lieu d'un
nombre. 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.
Remarque : la largeur que vous spécifiez pour une colonne s'applique à toutes les cellules de cette colonne.
Dans un tableau de Mise en forme, vous ne pouvez appliquer l'extension automatique qu'à une
seule colonne. 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.
Pour plus d'informations, voir « Utilisation des images d'espacement », page 265.
Remarque : appliquer l'extension automatique à une colonne avant d'avoir terminé la mise en forme peut avoir des
effets inattendus sur la mise en page. 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.)
Le mode de Mise en forme 263
Parfois, la largeur visuelle d'une colonne telle qu'elle apparaît en mode de Mise en forme ne
correspond pas à la largeur spécifiée dans le code HTML. Dans ce cas, deux nombres s'affichent
dans la zone d'en-tête de la colonne. (Pour plus d'informations sur les différences de largeur,
cliquez sur le bouton Aide dans l'inspecteur de propriétés du tableau de Mise en forme.)
Pour appliquer l'extension automatique à une colonne, procédez de l'une des manières suivantes :
• Dans la zone d'en-tête de colonne, en haut d'une colonne à largeur fixe, sélectionnez l'option
Extension automatique de la colonne dans le menu d'en-tête de colonne. Dans un tableau,
vous ne pouvez appliquer l'extension automatique qu'à une seule colonne.
• Pour sélectionner une cellule dans la colonne, cliquez sur l'un des bords de la cellule ou
maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée en cliquant
n'importe où dans la cellule. Ensuite, cliquez sur Extension automatique dans l'inspecteur de
propriétés.
Pour attribuer une largeur fixe à une colonne, procédez de l'une des manières suivantes :
• Dans la zone d'en-tête de colonne, en haut d'une colonne à largeur fixe, sélectionnez l'option
Créer une colonne Largeur fixe dans le menu d'en-tête de colonne.
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 ou
maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée en cliquant
n'importe où dans la cellule. Dans l'inspecteur de propriétés, cliquez sur Fixe et entrez une
valeur numérique.
Si vous entrez une valeur inférieure à la largeur du contenu, Dreamweaver définit
automatiquement une largeur correspondant à celle du contenu.
Pour définir la largeur des cellules telle que spécifiée dans le code HTML pour qu'elle corresponde
à la largeur visuelle des cellules :
Sélectionnez Uniformiser les largeurs de cellule dans le menu d'en-tête de colonne de n'importe
quelle colonne précise.
264 Chapitre 17
Rubriques connexes
« Définition des préférences du mode de Mise en forme », page 266
Utilisation des 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 cellule 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 d'en-tête.
Remarque : si vous choisissez de ne pas utiliser d'images d'espacement dans les tableaux avec extension
automatique, les colonnes à largeur automatique peuvent changer de taille, voire disparaître complètement de
l'écran en mode Création si elles ne contiennent pas de données. (Les colonnes continuent d'exister dans le code,
même si elles n'apparaissent pas en mode Création.)
Lorsque vous insérez une image d'espacement dans une colonne ou que vous appliquez
l'extension automatique à une colonne, une boîte de dialogue s'ouvre pour vous permettre de
configurer l'image d'espacement. Si vous avez déjà configuré l'image d'espacement du site dans les
préférences de Dreamweaver, cette boîte de dialogue ne s'ouvre pas (voir « Définition des
préférences du mode de Mise en forme », page 266).
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.
Pour configurer une image d'espacement :
1
Appliquez l'extension automatique à une colonne ou choisissez Ajouter image d'espacement
dans le menu d'en-tête de colonne.
La boîte de dialogue Choisissez l'image d'espacement s'ouvre.
2
Sélectionnez l'une des options proposées.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
3
Cliquez sur OK.
Pour insérer une image d'espacement dans une colonne :
Sélectionnez Ajouter image d'espacement dans le menu d'en-tête de colonne.
Le mode de Mise en forme 265
L'image d'espacement est insérée dans la colonne. L'image ne s'affiche pas à l'écran, mais la
colonne se décale légèrement et une double barre s'affiche en haut pour indiquer qu'elle contient
une image d'espacement.
Pour supprimer une image d'espacement d'une colonne :
Sélectionnez Supprimer image d'espacement dans le menu d'en-tête de colonne.
L'image d'espacement est supprimée. Il se peut que la colonne se décale.
Pour supprimer toutes les images d'espacement du tableau :
Procédez de l'une des manières suivantes :
• Sélectionnez Supprimer toutes les images d'espacement dans le menu d'en-tête de n'importe
quelle colonne du tableau.
• Cliquez sur le bouton Supprimer toutes les images d'espacement dans l'inspecteur de
propriétés du tableau de Mise en forme.
La mise en forme du tableau peut changer. Si certaines colonnes sont vides, elles risquent de
disparaître complètement en mode Création.
Définition des préférences du mode de Mise en forme
Utilisez la catégorie Mode de Mise en forme dans la boîte de dialogue Préférences pour spécifier
des informations sur les fichiers d'image d'espacement et les couleurs utilisées par Dreamweaver
pour dessiner des cellules et des tableaux de Mise en forme.
Par défaut, un onglet intitulé Tableau de Mise en forme s'affiche en haut de chaque tableau en
mode de Mise en forme, et une série de commandes liées à la largeur des colonnes apparaît en
haut du tableau de Mise en forme actuellement sélectionné. Si vous le souhaitez, vous pouvez
supprimer l'affichage des onglets et des commandes.
Remarque : même lorsque les onglets s'affichent, aucun onglet n'apparaît dans le tableau de Mise en forme en haut
de la page lorsque celui-ci est sélectionné. L'onglet du tableau de Mise en forme, qui se trouve en haut de la page,
s'affiche uniquement si le tableau n'est pas sélectionné.
Pour définir les préférences du mode de Mise en forme :
1
Choisissez Edition > Préférences.
2
Sélectionnez Mode de Mise en forme dans la liste Catégorie.
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 pour fermer la boîte de dialogue.
Pour désactiver l'affichage des onglets du tableau de Mise en forme et des commandes liées à la
largeur des colonnes en mode de Mise en forme :
Choisissez Affichage > Mode Tableau > Afficher les tabulations du tableau Mise en forme.
266 Chapitre 17
CHAPITRE 18
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.
Par exemple, une mise en forme avec des cadres peut contenir 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.
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 268
267
•
•
•
•
•
•
•
•
•
•
« Choix de l'utilisation des cadres », page 269
« A propos de la création de pages Web basées sur des cadres dans Dreamweaver », page 270
« Création de cadres et de jeux de cadres », page 271
« Sélection de cadres et de jeux de cadres », page 273
« Enregistrement des fichiers du cadre et du jeu de cadres », page 275
« Affichage et définition des propriétés des cadres », page 277
« Affichage et définition des propriétés des jeux de cadres », page 277
« Définition des contenus de cadre avec liens », page 278
« Gestion des navigateurs qui ne peuvent pas afficher les cadres », page 279
« Utilisation des comportements JavaScript avec les cadres », page 279
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 (nombre, taille et emplacement, par exemple), 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, à
l'exception de la section noframes (voir « Gestion des navigateurs qui ne peuvent pas afficher les
cadres », page 279) ; il fournit simplement au navigateur des informations sur la mise en forme
d'un jeu de cadres et les documents qu'il doit afficher.
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.
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. 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.
Dans Dreamweaver, vous pouvez créer un jeu de cadres en choisissant l'une des méthodes
suivantes :
• Pour créer un jeu dont l'un des cadres affiche le document courant, cliquez sur la catégorie
Cadres de la barre Insertion.
• Pour créer un jeu constitué de cadres vierges, cliquez sur la catégorie Jeu de cadres dans la boîte
de dialogue Nouveau document.
L'inspecteur de propriétés permet de formater tous les cadres et jeux de cadres. Vous pouvez
activer ou désactiver le défilement, définir la largeur et la hauteur, nommer chaque cadre, etc.
Pour plus d'informations, voir « Affichage et définition des propriétés des cadres », page 277 et
« Affichage et définition des propriétés des jeux de cadres », page 277.
268 Chapitre 18
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 distincts, à savoir le fichier du jeu de cadres et
les trois documents 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. Pour plus d'informations sur la création de
pages Web à l'aide des cadres, voir « A propos de la création de pages Web basées sur des cadres
dans Dreamweaver », page 270.
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 464). 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. Vous pouvez également ajouter un lien explicite
vers une version sans cadre du site pour les visiteurs qui n'aiment pas utiliser les cadres.
L'utilisation des cadres présente les avantages suivants :
Utilisation de cadres 269
• 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 pour que le visiteur puisse faire défiler la
totalité de son contenu. Par exemple, un visiteur ayant fait défiler une longue page 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 les URL de chacune des pages contenues dans les cadres ne sont pas affichées dans le
navigateur, les visiteurs risquent de ne pas pouvoir ajouter un 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
« Définition des contenus de cadre avec liens », page 278
« Gestion des navigateurs qui ne peuvent pas afficher les cadres », page 279
A propos de la création de pages Web basées sur des cadres
dans Dreamweaver
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.
270 Chapitre 18
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 271).
2
Enregistrez chaque fichier que vous souhaitez afficher dans un cadre. N'oubliez pas que chaque
cadre affiche un document HTML distinct et que vous devez enregistrer tous les documents.
Enregistrez également le fichier du jeu de cadres (voir « Enregistrement des fichiers du cadre et
du jeu de cadres », page 275).
3
Définissez les propriétés de chaque cadre et jeu de cadres, notamment l'attribution d'un nom à
chaque cadre, la définition des options de défilement et de non défilement, etc. (voir
« Affichage et définition des propriétés des cadres », page 277 et « Affichage et définition des
propriétés des jeux de cadres », page 277).
Conseil : si vous le souhaitez, définissez l'attribut title d'un cadre pour améliorer son accessibilité. Notez que
l'attribut title est différent de l'attribut name. Pour définir l'attribut title, sélectionnez le cadre et choisissez
Modifier > Modifier la balise ; ensuite, sélectionnez la catégorie Feuille de style/Accessibilité et tapez un
titre dans la zone de texte Titre. Vous pouvez également activer l'option de programmation de l'accessibilité pour
les cadres. Pour plus d'informations, voir « Création de pages Web accessibles », page 357.
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 278).
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 le concevoir vousmême ou sélectionner un jeu de cadres prédéfini. 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.
Création 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.
Il y a deux façons de créer un jeu de cadres prédéfini : à l'aide de la barre Insertion ou de la boîte
de dialogue Nouveau document. La barre Insertion permet de créer un jeu de cadres et d'afficher
le document courant dans un des nouveaux cadres, tandis que la boîte de dialogue Nouveau
document crée un jeu de cadres vide.
Les icônes des jeux de cadres prédéfinis dans la catégorie Cadres de la barre Insertion et dans la
catégorie Jeux de cadres de la boîte de dialogue Nouveau document fournissent une
représentation visuelle de chaque jeu de cadres appliqué au document sélectionné.
Lorsque vous appliquez un jeu de cadres à l'aide de la barre Insertion, 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. La zone bleue de l'icône du jeu de cadres prédéfini
représente le document courant et la zone blanche les cadres qui afficheront d'autres documents.
Utilisation de cadres 271
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 :
• Dans la catégorie Cadres de la barre Insertion, cliquez sur l'icône correspondant à un jeu de
cadres prédéfini.
• Choisissez un cadre prédéfini dans le sous-menu Insertion > Cadres.
Pour créer un jeu de cadres prédéfini vide :
1
Choisissez 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.
Création et modification d'un jeu de cadres
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).
La fenêtre est alors divisée en cadres, et le document initial apparaît dans l'un d'eux.
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.
• 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.
272 Chapitre 18
A propos 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.
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 « Création et modification d'un jeu de cadres »,
page 272.
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.
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.
Lorsque vous sélectionnez un cadre ou un jeu de cadres, des lignes de sélection apparaissent
autour du cadre ou du jeu de cadres dans le panneau Cadres et dans la fenêtre de document, en
mode Création.
Utilisation de cadres 273
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. Si, dans le
panneau Cadres, vous cliquez sur un cadre ou un jeu de cadres pour le sélectionner dans le
document, vous pouvez ensuite afficher ou modifier les propriétés de l'élément sélectionné dans
l'inspecteur de propriétés. Pour plus d'informations, voir « Affichage et définition des propriétés
des cadres », page 277 et « Affichage et définition des propriétés des jeux de cadres », page 277.
Le panneau Cadres 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 > Autres > Cadres.
Pour sélectionner un cadre dans le panneau Cadres :
Cliquez sur le cadre dans le panneau Cadres.
Pour sélectionner un jeu de cadres dans le panneau Cadres :
Cliquez sur la bordure du jeu de cadres dans le panneau Cadres.
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 (pas exemple,
lorsque vous définissez les propriétés d'un cadre).
Lorsque vous sélectionnez un cadre ou un jeu de cadres, l'inspecteur de propriétés affiche les
propriétés de l'élément sélectionné pour que vous puissiez les modifier (voir « Affichage et
définition des propriétés des cadres », page 277 et « Affichage et définition des propriétés des jeux
de cadres », page 277).
274 Chapitre 18
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.
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.
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 274.
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 courante, 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 courante), 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.
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 le document que vous souhaitez ouvrir dans le cadre, puis cliquez sur OK
(Windows), Choisir (Mac OS X) ou Ouvrir (Mac OS 9).
Le document apparaît dans le cadre.
4
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.
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.
Utilisation de cadres 275
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 titre-1, tandis que le
premier document d'un cadre s'intitule Cadre sans titre-1.
Lorsque vous sélectionnez l'une des commandes d'enregistrement, une boîte de dialogue s'ouvre,
prête à enregistrer un document avec son nom de fichier par défaut. Comme les noms de fichier
par défaut se ressemblent beaucoup, il est parfois difficile de déterminer quel document vous
enregistrez. Pour identifier le cadre contenant le document en cours d'enregistrement, observez les
lignes de sélection du cadre dans la fenêtre de document (en mode Création).
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.
2
Choisissez l'une des méthodes 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.
276 Chapitre 18
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 des cadres
Utilisez l'inspecteur de propriétés pour afficher et définir la plupart des propriétés de cadre. Pour
modifier la couleur d'arrière-plan d'un cadre, vous devez définir la couleur d'arrière-plan du
document dans le cadre.
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.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés, s'il n'est pas déjà ouvert.
3
Pour afficher toutes les propriétés, cliquez sur la flèche d'agrandissement, dans le coin inférieur
droit de l'inspecteur de propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
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.
3
Cliquez sur le menu contextuel Arrière-plan pour sélectionner une couleur.
Rubriques connexes
« Affichage et définition des propriétés des jeux de cadres », page 277
« Définition des propriétés du document », page 116
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 le titre du jeu de cadres sélectionné, utilisez la boîte de dialogue Propriétés de
la page ou le champ Titre dans la barre d'outils de la fenêtre de document.
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 du jeu de cadres dans le panneau Cadres.
Utilisation de cadres 277
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés, s'il n'est pas déjà ouvert.
3
Pour voir toutes les propriétés énumérées ci-dessous, cliquez sur la flèche d'agrandissement,
dans le coin inférieur droit de l'inspecteur de propriétés.
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.
• Cliquez sur la bordure du jeu de cadres dans le panneau Cadres.
2
Dans le champ Titre de la barre d'outils du document, tapez le nom de ce dernier.
Lorsqu'un visiteur affiche le jeu de cadres dans un navigateur, le titre apparaît dans la barre de
titre.
Rubriques connexes
« Affichage et définition des propriétés des cadres », page 277
« Définition des propriétés du document », page 116
« Utilisation de la barre d'outils de document », page 40
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 sélectionner le cadre dans lequel ouvrir un fichier, utilisez le menu déroulant Cible dans
l'inspecteur de propriétés. Vous pouvez définir un fichier à afficher à la place du document affiché
dans un autre cadre, à la place du jeu de cadres, dans le cadre dans lequel figurait le lien (en ne
choisissant pas de cible) ou encore dans une nouvelle fenêtre du navigateur.
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, procédez de l'une des manières suivantes :
• Cliquez sur l'icône de dossier et sélectionnez le fichier avec lequel établir le lien.
• Faites glisser l'icône Pointer vers un fichier pour sélectionner le fichier avec lequel établir le lien.
278 Chapitre 18
3
Dans le menu déroulant Cible, choisissez le cadre ou la fenêtre dans lequel ou laquelle le
document lié doit apparaître.
• Si vous avez nommé les cadres dans l'inspecteur de propriétés, les noms des cadres apparaissent
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, en dehors du jeu de cadres, 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.
•
_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.
ouvre le document lié dans la fenêtre du navigateur courant, en remplaçant tous les
cadres.
_top
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.
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.
Utilisation de cadres 279
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 388).
Aller à 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 383).
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 442).
Insérer menu de reroutage vous permet de configurer une liste de liens dans un menu qui ouvrent
des fichiers dans une fenêtre du navigateur lorsqu'on clique dessus. Vous pouvez également cibler
une fenêtre ou un cadre particuliers dans lesquels le document s'ouvrira. (voir « Insertion d'un
menu de reroutage », page 439).
280 Chapitre 18
Utilisez les outils visuels de Dreamweaver pour ajouter des
contenus variés à vos pages Web. 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 19, « Insertion et mise en forme de texte »
• Chapitre 20, « Insertion d’images »
• Chapitre 21, « Intégration de Dreamweaver à d'autres
applications »
• Chapitre 22, « Insertion d'éléments multimédia »
• Chapitre 23, « Dreamweaver et accessibilité »
Partie V
Partie V
Ajout de contenu
CHAPITRE 19
Insertion et mise en forme de texte
Macromedia Dreamweaver MX vous permet d'ajouter et de mettre en forme du texte dans un
document de plusieurs façons. Le présent chapitre explique comment insérer du texte, définir un
style de police, une taille de police, une couleur et des attributs d'alignement, créer et appliquer
vos propres styles personnalisés à l'aide de styles HTML et de styles de feuilles de style en
cascade (CSS).
Ce chapitre couvre les sujets suivants :
•
•
•
•
•
•
« Insertion et mise en forme de texte HTML », page 283
« Mise en forme de texte », page 286
« Utilisation de styles HTML pour formater un texte », page 292
« A propos des feuilles de style en cascade », page 298
« Conversion de styles CSS en balises HTML », page 307
« Recherche et remplacement de texte », page 308
Insertion et mise en forme de texte HTML
Les méthodes de mise en forme du texte dans Dreamweaver s'apparentent à celles que vous avez
l'habitude d'utiliser dans un logiciel de traitement de texte standard. Utilisez le sous-menu
Texte > Format de paragraphe ou le menu déroulant Format dans l'inspecteur de propriétés pour
définir le style par défaut (Paragraphe, Pré-formaté, En-tête 1, En-tête 2, etc.) d'un bloc de texte.
Pour modifier la police, la taille, la couleur et l'alignement du texte sélectionné, utilisez le menu
Texte ou l'inspecteur de propriétés. Pour appliquer un style de police (gras, italique, code,
souligné, etc.), utilisez le sous-menu Texte > Style.
Vous pouvez aussi combiner plusieurs balises HTML standard pour former un style unique,
appelé style HTML. Par exemple, vous pouvez appliquer manuellement un formatage HTML à
l'aide d'une combinaison de balises et d'attributs, puis enregistrer ce formatage comme style
HTML, qui apparaîtra ensuite dans le panneau Styles HTML. Lorsque, par la suite, vous désirez
formater du texte avec cette même combinaison de balises HTML, il vous suffit de sélectionner le
style enregistré dans le panneau Styles HTML. Les styles HTML sont pris en charge par
quasiment tous les navigateurs Web et permettent de gagner du temps en limitant le formatage
manuel du texte.
283
Un autre type de style, appelé style CSS (Cascading Style Sheet - feuille de style en cascade)
permet d'appliquer une mise en forme à du texte ou à une page, en offrant de plus l'avantage
d'une mise à jour automatique. 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 mode CSS 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.
Le formatage HTML manuel et les styles HTML appliquent une mise en forme en utilisant des
balises HTML standard (telles que b, i, font et code), qui sont reconnues par tous les
navigateurs Web courants. 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). Les styles CSS sont uniquement pris en charge par les
navigateurs Web Netscape Navigator versions 4.0 et ultérieures et Microsoft Internet Explorer
versions 4.0 et ultérieures.
Vous pouvez utiliser des styles CSS, des styles HTML et un formatage manuel du HTML au sein
de la même page. Le formatage est appliqué de façon hiérarchique, le formatage manuel du
HTML est appliqué par un style HTML ou CSS, et les styles CSS incorporés dans le corps d'un
document sont prioritaires sur les styles CSS. Voir « A propos des feuilles de style en cascade »,
page 298.
Ajout de texte dans un document
Il existe plusieurs manières d'ajouter du texte dans un document Dreamweaver. Vous pouvez
taper le texte directement dans la fenêtre de document Dreamweaver, copier et coller du texte ou
en importer à partir d'autres documents.
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 texte à partir d'autres documents
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 des données d'un
tableau, voir « Importation de données tabulaires », page 239 dans le Chapitre 19, « Insertion et
mise en forme de texte », page 283.
Vous pouvez également importer du texte à partir de documents HTML Microsoft Word. Pour
plus d'informations sur l'importation de documents HTML Word, voir « Ouverture de
documents existants », page 115.
284 Chapitre 19
Pour importer des données tabulaires :
1
Choisissez Fichier > Importer > Importer les données tabulaires ou Insertion > 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.
2
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.
3
Utilisez les options restantes pour formater ou définir le tableau dans lequel importer les
données.
4
Une fois terminé, cliquez sur OK.
Espacement des 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 ce faire, choisissez Edition > Préférences ou Dreamweaver > Préférences
(Mac OS X), puis assurez-vous que la case Autoriser plusieurs espaces consécutifs est activée dans
la catégorie Général.
Pour insérer un espace insécable, procédez de l'une des manières suivantes :
• Dans la barre Insertion, sélectionnez Caractères, puis cliquez sur l'icône Espace insécable.
• Choisissez Insertion > Caractères spéciaux > Espace insécable.
• Appuyez sur les touches Contrôle+Maj+Espace (Windows) ou Option+Espace (Macintosh).
Espacement des paragraphes
Dreamweaver fonctionne sur le même principe que la plupart des applications de traitement de
texte : il vous suffit d'appuyer sur la touche Entrée (Windows) ou Retour (Macintosh) pour créer
un 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 barre Insertion, sélectionnez Caractères, puis cliquez sur l'icône Saut de ligne.
• Choisissez Insertion > Caractères spéciaux > Saut de ligne.
Insertion et mise en forme de texte 285
Mise en forme de texte
Vous pouvez appliquer un formatage de texte HTML à une seule lettre ou au contraire créer un
site entier à l'aide des commandes Texte > Format de paragraphe ou des options de l'inspecteur
de propriétés. Ce type de formatage manuel a la priorité sur (et donc remplace) la mise en forme
définie par un style HTML ou CSS.
Pour appliquer un formatage de texte HTML, vous pouvez utiliser l'inspecteur de propriétés et les
commandes du menu Texte, telles que Texte > Format de paragraphe et Texte > Style.
Rubriques connexes
« Utilisation de styles HTML pour formater un texte », page 292
« Création d'un style HTML », page 295
« Création d'un style CSS », page 301
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.
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).
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.
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 « A propos des feuilles de style en
cascade », page 298.
Rubrique connexe
« Modification des combinaisons de polices », page 287
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
Choisissez 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 le sous-menu 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).
286 Chapitre 19
• Pour changer de style de police de caractères, cliquez sur Gras ou Italique dans l'inspecteur de
propriétés ou choisissez un style de caractère (Gras, Italique, Souligné, etc.) dans le sous-menu
Texte > Style.
• 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 le sous-menu Texte > Taille.
• 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 le sous-menu 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 +4 résulte en une taille de police de 3 + 4 ou 7. 7 est la somme
maximale pour les valeurs de taille de police : si vous essayez de définir une valeur plus élevée, elle s'affiche 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.
Modification des combinaisons de polices
Pour définir la combinaison de polices qui apparaît dans l'inspecteur de propriétés et dans le sousmenu 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.
3
Choisissez parmi les options 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 de caractères, 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.
Insertion et mise en forme de texte 287
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 les étapes 1 et 2 pour chaque cadre dans le jeu de cadres.
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.
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.
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 ou Dreamweaver > Préférences (Mac OS X), puis assurez-vous
que la case Passer en paragraphe normal après le titre est désactivée dans la catégorie Général.
Rubriques connexes
« Création d'un style HTML », page 295
Définition des options relatives aux propriétés du texte (dans l'aide de Dreamweaver)
Définition des propriétés du type CSS (dans l'aide de Dreamweaver)
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
Utilisez le sous-menu Texte > Format de paragraphe ou le menu déroulant Format de
l'inspecteur de propriétés, puis choisissez 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.
288 Chapitre 19
Alignement du 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.
2
Dans l'inspecteur de propriétés, cliquez sur le bouton Retrait ou Retrait négatif ou 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.
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
Choisissez parmi les options suivantes :
• Choisissez une couleur dans le palette de couleurs sécurisées pour le Web en cliquant sur la case
de couleur du texte 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.
• Entrez le nom de la couleur ou une valeur hexadécimale directement dans le champ de
l'inspecteur de propriétés.
Insertion et mise en forme de texte 289
• 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 119.
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 bouton doté d'un carré blanc et barré d'une ligne rouge, situé
dans l'angle supérieur droit).
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.
290 Chapitre 19
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.
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 barre Insertion, sélectionnez Commun, puis 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 » (&copy;), l'« esperluette » (&amp;) et le symbole
« Marque déposée » (trademark, &reg;). Chaque entité est représentée à la fois par un nom
HTML (par exemple &mdash; pour le tiret cadratin) et son équivalent numérique (dans ce cas,
&#151;).
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 &gt; pour le
signe supérieur à (>) et &it; pour le signe inférieur à (<).
Malheureusement, certains navigateurs (certaines versions anciennes, ainsi que les navigateurs
autres que Navigator et Internet Explorer) n'affichent pas correctement la plupart de ces entités.
Vous pouvez insérer plusieurs caractères spéciaux (sous la forme d'entités HTML) en choisissant
la catégorie Caractères dans la barre Insertion.
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 :
Insertion et mise en forme de texte 291
• Choisissez le nom du caractère dans le sous-menu Insertion > Caractères.
• Dans la barre Insertion, choisissez la catégorie Caractères, puis sélectionnez le caractère spécial
qui vous convient.
Conseil : de nombreux caractères spéciaux sont disponibles ; pour en sélectionner un, choisissez Insertion >
Caractères spéciaux > Autre ou cliquez sur l'icône Autre caractère dans la barre Insertion, sélectionnez un
caractère, puis cliquez sur OK.
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 > Barre horizontale.
• Dans la barre Insertion, sélectionnez Commun, puis 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 la barre selon
vos besoins.
L et H : spécifient l'épaisseur et la hauteur de la barre, en pixels ou en pourcentage de la taille de
la page.
: 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.
Aligner
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.
Utilisation de styles HTML pour formater un texte
La définition de styles HTML vous permet d'appliquer rapidement et de façon homogène une
mise en forme à la police du texte de vos documents. Les styles HTML peuvent se présenter sous
la forme d'un ou plusieurs attributs de balise de police HTML tels que la couleur, le dessin, la
taille, ainsi que d'autres attributs de mise en forme tels que le gras et l'italique. Vous pouvez, par
exemple, créer un style de texte HTML composé de la police de caractère Arial, de la taille 4+, de
la couleur verte et du style italique. Pour appliquer rapidement ce style, il vous suffit ensuite de
sélectionner le texte auquel l'appliquer puis de sélectionner le style HTML dans le panneau
Styles HTML.
Dans la mesure où les styles HTML se composent uniquement de balises de police, ils peuvent
être affichés dans les navigateurs qui ne prennent pas en charge les feuilles de style en cascade
(CSS), notamment les versions 3.0 et antérieures des navigateurs.
Les styles HTML présentent néanmoins un inconvénient : les modifications qui leur sont
apportées ne se répercutent pas systématiquement dans le document. Si donc vous modifiez un
style déjà appliqué, vous devez rappliquer le style au texte afin d'actualiser sa mise en forme.
292 Chapitre 19
A la différence des styles CSS, les styles HTML n'affectent que le texte auquel vous les appliquez
ou le texte que vous créez à l'aide d'un style HTML spécifique. Pour avoir la possibilité de
modifier une mise en forme et de voir toutes les instances de cette mise en forme modifiées
automatiquement en conséquence, utilisez les feuilles de style CSS ; voir « A propos des feuilles de
style en cascade », page 298.
Vous pouvez utiliser le panneau Styles HTML pour définir les styles HTML utilisés sur votre site,
puis les partager avec d'autres utilisateurs ou les appliquer à d'autres sites, locaux ou distants. Pour
plus d'informations, voir « Utilisation de styles HTML dans d'autres sites », page 297.
Pour afficher le panneau Styles HTML, procédez de l'une des manières suivantes :
• Choisissez Fenêtre > Styles HTML.
• Appuyez sur les touches Ctrl + F11 (Windows) ou Commande + F11 (Macintosh).
• Cliquez sur l'icône Styles HTML dans le Lanceur.
Utilisation du panneau Styles HTML
Le panneau Styles HTML affiche les styles HTML disponibles pour le site local.
Il existe deux types de styles HTML : les styles de paragraphe et les styles de sélection. Ils sont
identifiables par le symbole situé dans la première colonne du panneau Styles HTML :
Les styles de paragraphe, précédés d'un symbole de paragraphe, permettent de mettre en forme
les paragraphes.
Les styles de sélection, précédés de la lettre a, permettent de mettre en forme le texte sélectionné.
Grâce aux deux premiers styles du panneau Styles HTML, Supprimer le style de la sélection et
Supprimer le style du paragraphe, vous pouvez supprimer toutes les balises de mise en forme du
texte que vous sélectionnez et auquel vous les appliquer.
Remarquez le style Gras dans le panneau Styles HTML ci-dessus. Le signe plus (+) qui précède le
style indique qu'il s'agit d'un style de mise en forme du texte auquel il s'applique. En l'absence
d'un signe plus, tout style préexistant est effacé avant l'application du style sélectionné. Ainsi, le
style HTML « a+red » ajoute simplement la couleur rouge à une mise en forme déjà appliquée au
texte sélectionné, tandis que le style HTML « Emphasis » efface toute mise en forme avant
l'application de ce style.
Pour affiche les attributs de style d'un style HTML existant :
1
Dans le panneau Styles HTML, sélectionnez un style.
Insertion et mise en forme de texte 293
2
Cliquez à l'aide du bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée
(Macintosh) sur le style HTML ou double-cliquez sur le style HTML, puis choisissez Edition
dans le menu contextuel.
3
Dans la boîte de dialogue Définir style HTML, définissez les caractéristiques de ce style.
L'option Appliquer à détermine si le style ainsi défini concerne le texte sélectionné (Sélection)
ou le bloc de texte courant (Paragraphe). L'option En appliquant détermine si le style ainsi
défini doit être ajouté à la mise en forme d'origine du texte (Ajouter à style existant) ou si celleci doit être supprimée et remplacée par le nouveau style (Supprimer style existant).
Pour appliquer un style HTML existant :
Dans le panneau Styles HTML, sélectionnez un style.
• Vérifiez, dans l'angle inférieur gauche du panneau Styles HTML, que l'option Appliquer
automatiquement est cochée. Si c'est le cas, cliquez une fois sur le style.
• Si ce n'est pas le cas, cliquez sur le style, puis cliquez sur Appliquer.
Pour supprimer le formatage d'un texte dans votre document :
1
Sélectionnez le texte mis en forme.
2
Dans le panneau Styles HTML, cliquez sur Supprimer le style du paragraphe ou sur
Supprimer le style de la sélection.
Supprimer le style du paragraphe supprime toute mise en forme du bloc de texte courant dans
le document. Supprimer le style de la sélection supprime toute mise en forme du texte
sélectionné.
Remarque : ces deux options permettent de supprimer toute mise en forme (à l'exception de la mise en
forme CSS), quelle que soit la façon dont cette mise en forme a été appliquée à l'origine (par exemple, dans le
panneau Styles HTML ou dans l'inspecteur de propriétés).
Pour supprimer un style du panneau Styles HTML :
1
Dans le panneau Styles HTML, désactivez la case à cocher Appliquer automatiquement.
2
Sélectionnez un style HTML.
3
Cliquez sur l'icône Supprimer style (poubelle) dans l'angle inférieur droit du panneau.
294 Chapitre 19
Création d'un style HTML
Vous pouvez créer des styles de deux manières : vous pouvez mettre en forme le texte dans le
document puis créer un style d'après le texte sélectionné ou bien créer un style dans le panneau
Styles HTML en sélectionnant les attributs de mise en forme à appliquer.
Pour créer un nouveau style HTML :
1
Dans le panneau Styles HTML, cliquez sur l'icône Nouveau style ou choisissez Texte >
Styles HTML > Nouveau style.
La boîte de dialogue Définir style HTML apparaît.
2
Dans la zone de texte Nom, tapez le nom du style.
3
Dans la zone Appliquer à, choisissez le type de style en procédant de l'une des manières
suivantes :
• Pour définir un style de sélection, choisissez Sélection.
• Pour définir un style de paragraphe, choisissez Paragraphe.
Remarque : un style de paragraphe s'applique à tout le bloc de texte dans lequel se trouve le point d'insertion,
indépendamment du texte sélectionné.
4
Dans la zone En appliquant, indiquez si le style HTML doit être ajouté au style existant du
texte ou du paragraphe sélectionné ou si cette mise en forme doit être supprimée et remplacée
par le nouveau style HTML.
Remarque : gardez à l'esprit la hiérarchie de l'application des styles : les styles HTML sont prioritaires sur les
styles CSS, lesquels sont eux-mêmes prioritaires sur les styles CSS externes. Pour plus d'informations, voir « A
propos des feuilles de style en cascade », page 298.
5
Sélectionnez les options de mise en forme qui vous conviennent dans les menus déroulants de
la zone Attributs de police.
Insertion et mise en forme de texte 295
6
Si vous définissez un style de paragraphe, choisissez une balise de paragraphe (par exemple,
Paragraphe, En-tête1, Pré-formaté) dans le menu déroulant Format de la zone Attributs de
paragraphe.
7
Dans la zone Alignement, cliquez sur le bouton permettant d'aligner le texte à gauche, à droite
ou de le centrer selon l'alignement de paragraphe recherché.
8
Cliquez sur OK.
Le style est ajouté à la liste Styles HTML.
Pour créer un nouveau style HTML basé sur du texte existant :
1
Dans votre document, sélectionnez ou créez un texte dont la mise en forme sera réutilisée pour
le nouveau style HTML.
Conseil : utilisez l'inspecteur de propriétés pour afficher et appliquer la mise en forme, puis enregistrez-la
comme style HTML.
2
Dans l'angle inférieur droit du panneau Styles HTML, cliquez sur l'icône Nouveau style (+).
La boîte de dialogue Définir style HTML apparaît.
3
Dans la zone de texte Nom, tapez le nom du style.
4
Dans la zone Appliquer à, choisissez le type de style en procédant de l'une des manières
suivantes :
• Pour définir un style de sélection, choisissez Sélection.
• Pour définir un style de paragraphe, choisissez Paragraphe.
Remarque : un style de paragraphe s'applique à tout le bloc de texte dans lequel se trouve le point d'insertion,
indépendamment du texte sélectionné.
5
Dans la zone En appliquant, indiquez si le style HTML doit être ajouté au style existant du
texte ou du paragraphe sélectionné ou si cette mise en forme doit être supprimée et remplacée
par le nouveau style HTML.
Remarque : gardez à l'esprit la hiérarchie de l'application des styles : les styles HTML sont prioritaires sur les
styles CSS, lesquels sont eux-mêmes prioritaires sur les styles CSS externes. Pour plus d'informations, voir « A
propos des feuilles de style en cascade », page 298.
6
Si vous définissez un style de paragraphe, choisissez une balise de paragraphe (par exemple,
Paragraphe, En-tête1, Pré-formaté) dans le menu déroulant Format de la zone Attributs de
paragraphe.
7
Dans la zone Alignement, cliquez sur le bouton permettant d'aligner le texte à gauche, à droite
ou de le centrer selon l'alignement de paragraphe recherché.
8
Cliquez sur OK.
Application d'un style HTML
L'application d'un style consiste simplement à sélectionner le texte ou le paragraphe auquel
appliquer le style, puis à sélectionner le style dans le panneau Styles HTML.
Pour appliquer un style HTML :
1
Assurez-vous que la case Appliquer automatiquement est activée dans l'angle inférieur gauche
du panneau Styles HTML, afin d'appliquer systématiquement le style sélectionné.
296 Chapitre 19
2
Dans la fenêtre de document, procédez de l'une des manières suivantes pour sélectionner le
texte auquel appliquer le style :
• Placez le point d'insertion n'importe où dans un paragraphe pour lui appliquer un style de
paragraphe.
• A l'aide du curseur, sélectionnez le texte auquel appliquer un style de sélection.
3
Dans le panneau Styles HTML, cliquez sur le style HTML à appliquer au texte.
Le texte est mis à jour automatiquement dans la fenêtre de document.
Modification d'un style HTML
Lorsque vous modifiez un style HTML, Dreamweaver n'actualise pas automatiquement le texte
préalablement mis en forme avec un style HTML. Pour mettre à jour le style d'un texte mis en
forme, il convient de rappliquer le style manuellement.
Pour modifier un style HTML existant :
1
Vérifiez qu'aucun texte n'est sélectionné dans la fenêtre de document.
2
Dans le panneau Styles HTML, vérifiez que l'option Appliquer automatiquement est
désactivée.
Si l'option Appliquer automatiquement est activée, le style HTML est appliqué lorsque vous le
sélectionnez dans le panneau Styles HTML.
3
Dans le panneau Styles HTML, procédez de l'une des manières suivantes :
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh) sur le style, puis choisissez Modifier dans le menu contextuel.
• Double-cliquez sur le style.
La boîte de dialogue Définir style HTML apparaît.
4
Dans la boîte de dialogue, définissez les options d'attributs du style.
5
Pour rendre à ce style ses attributs par défaut, cliquez sur Supprimer.
Utilisation de styles HTML dans d'autres sites
Vous pouvez utiliser le panneau Styles HTML pour enregistrer les styles HTML utilisés sur votre
site, puis les partager avec d'autres utilisateurs ou les appliquer à d'autres sites, locaux ou distants.
Les styles HTML sont automatiquement stockés dans le dossier Library de votre site local, dans
un fichier nommé Styles.xml. Il vous est possible de copier le fichier Styles.xml du dossier Library
d'un site local dans le dossier Library d'un autre site local afin de réutiliser les styles existants.
Remarque : un seul fichier Styles.xml est admis par site ; si donc vous créez de nouveaux styles HTML sur le site
vers lequel vous copiez un fichier Styles.xml, le fichier copié se substitue au fichier existant. Toutes les modifications
de mise en forme appliquées par vos soins sont conservées, et vous pouvez recréer les styles en sélectionnant le
texte dans le document puis en définissant un nouveau style HTML.
Pour partager vos styles HTML avec d'autres sites ou utilisateurs :
1
Choisissez Fenêtre > Site ou Site > Fichiers du site pour ouvrir le panneau Site en mode
Fichiers du site.
Insertion et mise en forme de texte 297
2
Dans le panneau Site, recherchez puis ouvrez le dossier Library.
Vous remarquerez un fichier appelé « styles.xml ». Ce fichier contient tous les styles HTML du
site. Vous pouvez placer, acquérir, archiver, extraire et copier ce fichier comme tout autre fichier
de votre site. Vous pouvez également créer des Design Notes (notes de conception) pour le
fichier « styles.xml ». Avant de créer ou modifier un style pour un site distant, vous devez
d'abord extraire le fichier styles.xml.
Pour plus d'informations sur ces options, voir « Configuration d'un dossier distant », page 64.
A propos 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.
Dans Dreamweaver, utilisez le panneau Styles CSS pour créer, afficher et associer des attributs de
style à vos documents. Pour plus d'informations sur l'utilisation du panneau Styles CSS,
voir « Utilisation du panneau Styles CSS », page 299. 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 113.
Vous pouvez définir les types de feuilles de style 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 CSS personnalisé
(classe) », page 302.
• 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.
298 Chapitre 19
• 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 feuilles de style CSS résident dans la zone head d'un document. 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 manuel de référence CSS O'Reilly inclus avec Dreamweaver, cliquez sur le bouton
Référence situé sur la barre d'outils, puis choisissez l'option correspondante dans le menu déroulant.
La mise en forme manuelle du code HTML a toujours la priorité sur la mise en forme appliquée à
l'aide de styles CSS (ou HTML). Pour permettre aux styles CSS de contrôler totalement la mise
en forme d'un paragraphe, vous devez supprimer tout le formatage manuel du HTML et tous les
styles 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 styles CSS s'affichent différemment dans Microsoft Internet
Explorer 4.0 et dans Netscape Navigator 4.0, et quelques-uns ne sont encore pris en charge par
aucun navigateur.
La fonction Feuilles de style à la conception de Dreamweaver est disponible à partir du panneau
Styles CSS. Elle vous permet de masquer ou d'afficher des attributs de feuilles de style pendant la
conception d'une page dans Dreamweaver (notamment pour visualiser un document avec une
feuille de style conçue pour Navigator ou Internet Explorer). Pour plus d'informations sur
l'utilisation de feuilles de style à la conception, voir « Utilisation de feuilles de style à la
conception », page 305.
Utilisation du panneau Styles CSS
Utilisez le panneau Styles CSS pour créer des styles CSS, en afficher les propriétés puis les
appliquer aux éléments d'un document.
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.
Les boutons radio Appliquer les styles et Modifier les styles, situés en haut du panneau Styles CSS,
vous permettent de choisir différents modes d'affichage des styles CSS associés au document en
cours.
Insertion et mise en forme de texte 299
Activez le mode Appliquer les styles pour sélectionner un style de classe à appliquer à un élément
de votre document. Ce mode affiche uniquement les styles (de classe) personnalisés. Par
conséquent, les styles HTML redéfinis et les styles de sélecteurs n'apparaissent pas dans ce
panneau. Dans la mesure où ils sont associés à une balise HTML, leurs attributs de styles sont
appliqués systématiquement à toutes les balises du document affecté par le style défini. Si, par
exemple, vous définissez des attributs de styles pour la balise table, les définitions de style
sélectionnées se répercutent automatiquement dans le tableau de votre document.
Le mode Modifier les styles vous permet d'observer la définition des styles associés au document
en cours. Ce mode affiche la définition des styles CSS (de classe), des balises HTML redéfinies et
des styles des sélecteurs CSS. Vous pouvez également l'utiliser pour afficher les feuilles de style à la
conception que vous avez appliquées au document.
A mesure que vous créez ou associez une feuille de style CSS, le nom et les attributs du style
apparaissent dans l'affichage Modifier les styles du panneau Styles CSS. Le mode Modifier les styles
répertorie tous les sélecteurs définis dans toutes les balises de styles et les feuilles de style externes ou
importées. Le mode Appliquer les styles vous permet d'afficher les styles appliqués dans le document
en cours, ainsi que les styles disponibles dans une feuille de style externe attachée.
Lorsque vous créez un style personnalisé (une classe), il apparaît dans le panneau de styles CSS et
dans le sous-menu Texte > Styles CSS.
300 Chapitre 19
Les boutons suivants sont situés au bas du panneau Styles CSS:
Attacher une feuille de style : 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 en cours ou à
importer dans celui-ci. Pour plus d'informations sur l'association d'une feuille de style externe,
voir « Création ou liaison avec une feuille de style CSS externe », page 303.
Nouveau style CSS : 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 301.
Modifier une feuille de style : affiche la boîte de dialogue Définition du style CSS. Vous pouvez
modifier l'un des styles du document courant 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 304.
: 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.
Création d'un style CSS
Créez 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, cliquez sur le bouton Basculer entre les modes CSS/
HTML, si nécessaire, pour basculer en mode CSS, puis choisissez Nouveau style CSS dans le
menu déroulant Style CSS.
• Choisissez Texte > Styles CSS > Nouveau style CSS.
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, sélectionnez Créer un style personnalisé (classe), puis entrez le nom du style dans le
champ Nom.
Remarque : les noms de styles personnalisés (classe) doivent commencer par un point et peuvent contenir
toute combinaison de lettres et de nombres. Par exemple, .monentête1. Si vous omettez le point,
Dreamweaver l'insère à votre place.
Insertion et mise en forme de texte 301
• Pour redéfinir le formatage par défaut d'une balise HTML spécifique, sélectionnez Redéfinir la
balise HTML, puis entrez une balise HTML ou choisissez-en une dans le menu déroulant Balise.
• Pour définir la mise en forme d'une combinaison particulière de balises ou de toutes les balises
contenant un attribut 1d spécifique, sélectionnez Utiliser le sélecteur CSS, puis entrez une ou
plusieurs balises HTML ou choisissez-en une dans le menu déroulant. Les sélecteurs disponibles
dans le menu déroulant sont a:active, a:hover, a:link et a:visited.
3
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 en cours, choisissez Seulement ce document.
4
Cliquez sur OK.
La boîte de dialogue Définition du style s'affiche.
5
Choisissez les options du nouveau style CSS.
6
Lorsque vous avez défini les attributs de style, cliquez sur OK.
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
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
Application d'un style CSS personnalisé (classe)
Les styles CSS personnalisés, ou classes, sont le seul type de style CSS qui peut être appliqué à
n'importe quel texte dans votre document, quelles que soient les balises qui contrôlent ce texte. Tous
les styles personnalisés (classe) associés au document en cours sont affichés dans le mode Appliquer
les styles du panneau Styles CSS et dans le mode CSS 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 CSS au même texte, il peut y avoir entre ces styles un conflit qui produira des
résultats inattendus. Voir « A propos des conflits de styles », page 306 pour plus d’informations.
302 Chapitre 19
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), choisissez Appliquer les styles, puis
cliquez sur le nom du style que vous souhaitez appliquer dans la liste Styles CSS.
• Dans l'inspecteur des propriétés de texte, cliquez sur le bouton Basculer entre les modes CSS/
HTML, si nécessaire, pour basculer en mode CSS, puis choisissez le style de classe à appliquer
dans le menu déroulant Style CSS.
• Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contrôle 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.
Pour supprimer un style personnalisé de la sélection :
Sélectionnez l'objet ou le texte dont vous souhaitez supprimer le style, puis procédez de l'une des
manières suivantes :
• Dans l'inspecteur de propriétés de texte, cliquez sur le bouton Basculer entre les modes CSS/
HTML, si nécessaire, pour basculer en mode CSS, puis choisissez Aucun style CSS dans le
menu déroulant Style CSS.
• Dans le panneau Styles CSS, activez le mode Appliquer les styles, puis Aucun style CSS.
Création ou liaison avec une feuille de style CSS externe
Une feuille de style CSS est un fichier texte externe à vos documents. Il contient toutes les
indications de styles et de mises en forme. 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 ici.
Outre les feuilles de style CSS de votre composition, vous pouvez associer celles livrées avec
Dreamweaver aux pages d'un site. 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 113.
Pour plus d'informations sur l'application d'un style, voir « Application d'un style CSS
personnalisé (classe) », page 302.
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.
Insertion et mise en forme de texte 303
• Cliquez sur l'icône Styles CSS dans le Lanceur.
2
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 s'affiche.
3
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 (Windows) ou Choisir (Macintosh) pour sélectionner une
feuille de style externe ou tapez son chemin d'accès dans la zone Fichier/URL.
4
Dans la zone Ajouter sous, sélectionnez une des options suivantes :
• Pour créer un lien entre le document en cours et une feuille de style externe, choisissez Lien.
Cette sélection a pour effet de créer une balise a link 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.
• Pour référencer une feuille de style externe, choisissez Importer. Cette sélection a pour effet de
créer une balise @import dans le code HTML et de référencer l'URL de l'emplacement de la
feuille de style publiée. Cette méthode n'est pas compatible avec Netscape Navigator.
5
Cliquez sur OK.
Le nom de la feuille de style CSS externe apparaît dans la liste Modifier les styles du panneau
Styles CSS, et les styles personnalisés (classe) s'affichent dans le mode Appliquer les styles,
précédés de l'identificateur de feuille de style externe.
Modification d'un style CSS
Vous pouvez facilement modifier les styles internes et externes appliqués à un document. Dans
l'affichage Modifier les styles, sélectionnez le style que vous voulez modifier, puis ouvrez la boîte
de dialogue Définition du style CSS pour le modifier.
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 338.
Remarque : si vous avez installé TopStyle, un éditeur CSS de Bradbury Software, sur votre ordinateur,
Dreamweaver le détecte automatiquement et le définit comme éditeur externe pour les fichiers .css. Dreamweaver
est livré avec une version d'évaluation de Topstyle.
Pour modifier un style CSS :
1
Dans le panneau Styles CSS, cliquez sur le bouton radio Modifier les styles pour afficher les
styles dans le document en cours.
2
Cliquez sur le style que vous voulez modifier pour le sélectionner, puis procédez de l'une des
manières suivantes :
• Double-cliquez sur le style sélectionné.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh), puis choisissez Modifier.
304 Chapitre 19
• Cliquez sur le bouton Modifier une feuille de style au bas du panneau Styles CSS.
La boîte de dialogue Définition du style CSS s'affiche.
3
Modifiez le style à votre convenance, puis cliquez sur OK.
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 304)
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, sélectionnez Modifier les styles.
2
Dans la liste des styles, 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, sélectionnez la feuille de style à modifier dans la boîte de dialogue qui s'affiche, puis
cliquez sur Modifier.
Les styles de la feuille de style CSS sélectionnée apparaissent dans la boîte de dialogue.
3
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.
4
Modifiez les styles à votre convenance, puis cliquez sur OK.
Utilisation de feuilles de style à la conception
Les feuilles de style à la conception vous 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 dans un navigateur.
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, puis choisissez Feuilles de
style à la conception dans le menu contextuel.
• Choisissez Texte > Styles CSS > Feuilles de style à la conception.
Insertion et mise en forme de texte 305
2
Dans la boîte de dialogue, définissez les options d'affichage ou de masquage d'une feuille de
style sélectionnée.
• Pour afficher une feuille de style CSS à la conception, cliquez sur le bouton plus (+) situé audessus de 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.
• 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.
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 > Exporter les styles CSS ou Texte > Exporter feuille de style.
La boîte de dialogue Exporter les styles dans un fichier CSS s'affiche.
2
Entrez un nom pour le style et cliquez sur le bouton Enregistrer.
Le style est enregistré sous la forme d'une feuille de style CSS.
A propos des conflits de styles
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.
• 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>
306 Chapitre 19
Conversion de styles CSS en balises HTML
Si vous avez utilisé des styles CSS pour assurer la mise en forme de texte (par exemple la famille, la
taille, la couleur et la décoration des polices) et souhaitez par la suite que cette mise en forme soit
également visible dans la version 3.0 des navigateurs, vous pouvez utiliser la commande Fichier >
Convertir > Compatible avec les navigateurs 3.0 pour convertir la plus grande partie possible des
informations de style en balises HTML.
Remarque : tous les styles CSS ne peuvent pas être convertis en code HTML, car les balises HTML ne couvrent
pas ou ne prennent pas en charge tous les attributs possibles dans CSS.
Pour convertir un fichier qui utilise des styles CSS en fichier compatible avec les navigateurs 3.0 :
1
Choisissez Fichier > Convertir > Compatible avec les navigateurs 3.0.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez l'option Styles CSS en balises HTML.
Si vous choisissez l'option Calques en tableaux, tous les calques sont remplacés par un seul
tableau qui préserve le positionnement d'origine.
Les styles CSS sont remplacés, dans la mesure du possible, par des balises HTML, telles que b
et font. Tout style CSS qui ne peut pas être converti en HTML est supprimé. Voir « Tableau
de conversion de styles CSS en balises HTML », page 307 pour plus de détails sur les styles qui
sont convertis et ceux qui sont supprimés.
3
Cliquez sur OK. Dreamweaver ouvre le fichier converti dans une nouvelle fenêtre sans titre.
Remarque : vous devez effectuer cette procédure de conversion à chaque modification du fichier d'origine, afin de
mettre à jour le fichier compatible avec les versions 3.0. C'est pourquoi il est préférable de n'effectuer cette
procédure que lorsque vous êtes totalement satisfait de votre fichier.
Tableau de conversion de styles CSS en balises HTML
Les attributs CSS indiqués dans le tableau ci-dessous sont convertis en balises HTML à l'aide de
la commande Fichier > Convertir > Compatible avec les navigateurs 3.0. (Voir « Conversion de
styles CSS en balises HTML », page 307.) Les attributs qui ne figurent pas dans cette liste sont
supprimés.
Attribut CSS
Converti en
color
FONT COLOR
font-family
FONT FACE
font-size
FONT SIZE="[1-7]"
font-style: oblique
I
font-style: italic
I
font-weight
B
list-style-type: square
UL TYPE="square"
list-style-type: circle
UL TYPE="circle"
list-style-type: disc
UL TYPE="disc"
list-style-type: upper-roman
OL TYPE="I"
list-style-type: lower-roman
OL TYPE="i"
list-style-type: upper-alpha
OL TYPE="A"
Insertion et mise en forme de texte 307
Attribut CSS
Converti en
list-style-type: lower-alpha
OL TYPE="a"
list-style
UL ou OL par TYPE suivant le cas
text-align
P ALIGN ou DIV ALIGN suivant le cas
text-decoration: underline
U
text-decoration: line-through
STRIKE
Vérification orthographique
Dans le menu Texte, la commande Orthographe permet de vérifier l'orthographe du document
en cours. 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 ou Dreamweaver > Préférences >
Général (Mac OS X), puis sélectionnez le dictionnaire que vous voulez utiliser dans le menu
déroulant Dictionnaire du correcteur d'orthographe. Vous trouverez en téléchargement, sur le
centre de support de Dreamweaver, des dictionnaires dans d'autres langues.
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
Dans la boîte de dialogue Vérifier l'orthographe, choisissez l'option correspondant au
traitement que vous réservez à l'occurrence :
Ajouter à Personnel
Ignorer
ajoute le mot non reconnu à votre dictionnaire personnel.
ignore cette occurrence du mot non reconnu.
Ignorer tout
ignore toutes les occurrences du mot non reconnu.
remplace cette occurrence du mot non reconnu par le texte que vous tapez dans la
zone de texte Remplacer par, ou par le mot sélectionné dans la liste Suggestions.
Remplacer
Remplacer tout
remplace toutes les occurrences du mot non reconnu.
Recherche et remplacement de texte
Vous pouvez également rechercher du texte, du texte entouré de balises spécifiques, des balises
HTML et des attributs dans le document en cours, dans des fichiers sélectionnés, dans un
répertoire ou dans un site tout entier. Vous utilisez des commandes différentes pour rechercher
des fichiers et pour rechercher du texte et/ou des balises HTML dans les fichiers : les commandes
Retrouver sur le site local et Retrouver sur le site distant permettent de rechercher des fichiers,
tandis que la commande Edition > Rechercher et remplacer permet de rechercher du texte et des
balises à l'intérieur des fichiers.
Pour rechercher du texte et / ou du HTML au sein des documents :
1
Choisissez parmi les options suivantes :
• En mode Création, choisissez Edition > Rechercher et remplacer à partir de la fenêtre de
document ou du panneau Site.
308 Chapitre 19
• Dans l'Affichage de code, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contrôle enfoncée (Macintosh) et choisissez l'option Rechercher et
remplacer dans le menu contextuel.
2
Dans la boîte de dialogue Rechercher ou Remplacer, utilisez l'option Rechercher dans pour
spécifier les fichiers sur lesquels la recherche doit porter :
• Choisissez Document courant pour limiter la recherche au document actif. Cette option n'est
disponible que lorsque vous choisissez la commande Rechercher ou Remplacer dans la fenêtre
de document ou dans le menu contextuel de l'inspecteur de code.
• Choisissez Site courant pour étendre la recherche à l'ensemble des documents HTML, fichiers
de bibliothèque et documents texte du site courant. Lorsque vous choisissez Site courant, le
nom du site s'affiche à droite du menu déroulant. S'il ne s'agit pas du site dans lequel vous
voulez effectuer une recherche, choisissez un autre site dans le menu déroulant du site actuel du
panneau Site.
• Choisissez Fichiers sélectionnés dans le site pour limiter la recherche aux fichiers et dossiers
actuellement sélectionnés dans le panneau Site. Cette option n'est disponible que lorsque vous
choisissez la commande Rechercher ou Remplacer tandis que le panneau Site est actif (c'est-àdire lorsque celui-ci est affiché devant la fenêtre de document).
• Choisissez Répertoire pour limiter la recherche à un groupe de fichiers spécifique. Dans ce cas,
cliquez sur l'icône de répertoire pour sélectionner le répertoire dans lequel vous voulez effectuer
la recherche.
3
Utilisez l'option Rechercher pour spécifier le type de recherche à effectuer.
• L'option Code source permet de rechercher des chaînes de texte spécifiques dans le code source
HTML. Voir « Recherche et remplacement de balises et d'attributs », page 205.
• L'option Texte permet de rechercher des chaînes de texte spécifiques dans la fenêtre de
document. Une recherche sur du texte ignore tout code HTML qui interromprait la chaîne
indiquée. Par exemple, si vous recherchez le chien noir, vous trouverez aussi bien le chien
noir que le chien <i>noir</i>.
• L'option Texte (avancé) permet de rechercher des chaînes de texte spécifiques se trouvant ou
non à l'intérieur d'une ou plusieurs balises. Par exemple, dans un document qui contient le
code HTML suivant, la recherche de essaie pas dans la balise i ne permet de trouver que la
seconde occurrence du mot essaie : Jean <i>essaie</i> de terminer son travail à
temps, mais n'y arrive pas toujours. Il essaie cependant farouchement. Voir
« Recherche d'un texte contenu dans des balises spécifiques », page 206.
• L'option Balise spécifique permet de rechercher des balises, attributs et valeurs d'attribut
spécifiques, telles que toutes les balises td avec valign défini sur top. Voir « Recherche de
balises et d'attributs », page 205.
Remarque : appuyez sur Ctrl+Entrée ou Maj+Entrée (Windows) ou sur Contrôle+Retour, Maj+Retour ou
Commande+Retour (Macintosh) pour insérer des sauts de ligne au sein des champs de recherche, ce qui permet
de rechercher un caractère de retour chariot. Prenez soin de désélectionner 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 portera sur un caractère de retour chariot en particulier, et non sur
l'occurrence d'un saut de 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.
4
Utilisez les options suivantes pour élargir ou limiter la recherche :
Insertion et mise en forme de texte 309
• L'option Respecter la casse limite la recherche au texte dont la casse (caractères majuscules et/
ou minuscules) correspond à celle du texte indiqué. Par exemple, si vous recherchez le français,
vous ne trouverez pas le Français.
Remarque : l'option Ignorer les différences entre les espaces blancs traite tout espace « blanc », c'est-à-dire
non visible, comme s'il s'agissait d'un simple espace pour les besoins de la recherche. Par exemple, lorsque cette
option est sélectionnée, une recherche sur ce texte trouvera ce texte mais pas cetexte. Cette option n'est
pas disponible lorsque l'option Utiliser les expressions régulières est sélectionnée ; vous devez écrire
explicitement l'expression régulière pour ignorer les espaces blancs. Notez que les balises <p> et <br> ne sont
pas comptées comme des espaces blancs.
• Avec l'option Utiliser les expressions régulières, certains caractères et chaînes courtes (tels que ?,
*, \w et \b) de la chaîne recherchée sont interprétés comme des opérateurs d'expression
régulières. Par exemple, une recherche sur le c\w*\b noir trouvera aussi bien le chien noir
que le chapeau noir. Voir « A propos des expressions régulières », page 208.
Si vous travaillez dans l'Affichage de code et modifiez le document, puis essayez de rechercher et de remplacer tout
élément autre que du code source, une boîte de dialogue s'affiche et vous informe que Dreamweaver synchronise
les deux fenêtres avant d'effectuer la recherche. Pour plus d'informations sur la synchronisation des fenêtres, voir
« Affichage du code », page 181.
310 Chapitre 19
CHAPITRE 20
Insertion d’images
Des images sont généralement utilisées pour ajouter des interfaces graphiques (tels que des
boutons de navigation), un attrait visuel (par exemple avec des photographies), ou des éléments de
conception interactive, tels que des images survolées ou une carte graphique.
Dans Macromedia Dreamweaver MX, 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 311
« Insertion d'une image », page 312
« Redimensionnement d'une image », page 315
« Création d'une image survolée », page 316
« Utilisation d'un éditeur d'image externe », page 317
« Application de comportements aux images », page 318
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 grand public.
311
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 MX. 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 Macromedia
Dreamweaver MX.
Remarque : la prise en charge des fichiers PNG varie d'un navigateur à l'autre ; par conséquent, si vous travaillez
avec des fichiers PNG, exportez-les au format GIF ou JPEG pour les adapter au Web.
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 ajouter des images en tant que contenu dynamique ; pour plus
d'informations, voir « Création d'images dynamiques », page 555.
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 Insertion, cliquez sur l'icône Image.
• Dans la catégorie Commun de la barre Insertion, 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 :
• Choisissez Système de fichiers pour choisir un fichier graphique.
• Choisissez Source de données pour choisir une source d'image dynamique.
312 Chapitre 20
3
Parcourez l'arborescence pour choisir l'image ou la source de contenu que vous voulez 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.
4
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.
Rubriques connexes
« Définition d'une image ou d'une couleur d'arrière-plan de la page », page 117
« Utilisation des images d'espacement », page 265
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.
Vous pouvez définir certains attributs de l'espace réservé ; comme sa taille et sa couleur, et lui
donner une étiquette de texte. Les attributs de couleur et de taille ainsi que l'étiquette d'un espace
réservé pour une image apparaissent lorsque l'espace réservé pour l'image est visualisé dans la
fenêtre du document de Dreamweaver.
Lorsqu'ils sont visualisés dans la fenêtre d'un navigateur, le texte de l'étiquette et de la taille
n'apparaissent pas.
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 barre Insertion, sélectionnez Commun puis cliquez sur l'icône Espace réservé pour
l'image.
• Dans la barre Insertion, sélectionnez Commun puis faites glisser l'icône Espace réservé pour
l'image vers la fenêtre du document.
• Choisissez Insertion > Espace réservé de 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.
Pour plus d'informations sur la définition des options de l'espace réservé pour l'image, cliquez
sur le bouton Aide de la boîte de dialogue.
4
Cliquez sur OK.
Insertion d’images 313
Rubriques connexes
« Remplacement d'un espace réservé pour une image », page 314
« Redimensionnement d'une image », page 315
« Mise à jour d'un espace réservé pour l'image Dreamweaver dans Fireworks », page 324
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 image que vous avez
ajoutés par des fichiers graphiques adaptés au Web tels que des images GIF ou JPEG.
Si vous avez Fireworks MX, 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 MX, voir « Mise
à jour d'un espace réservé pour l'image Dreamweaver dans Fireworks », page 324.
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é du champ Src.
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
Utilisez l'inspecteur de propriétés de l'image pour spécifier l'alignement d'une image par rapport
aux autres éléments du paragraphe ou de la 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.
314 Chapitre 20
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 utiliser les boutons d'alignement (gauche, droite et
centre) pour définir l'alignement horizontal d'une image.
Par 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.
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).
Bas absolu
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.
Gauche
Droite 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.
Redimensionnement d'une image
Dans le mode Création de la fenêtre de document de Dreamweaver, vous pouvez redimensionner
visuellement les éléments, tels que les images, les plug-ins, les animations Macromedia Shockwave
ou Flash, les applets et les contrôles ActiveX. Le redimensionnement visuel aide à déterminer
l'impact de la taille d'un élément sur la mise en page.
Le redimensionnement modifie les attributs de largeur et de hauteur de l'élément pour revenir
à leur taille d'origine. Les champs L et H de l'inspecteur de propriétés affichent les nouvelles
largeur et hauteur de l'élément lorsque vous le redimensionnez. La taille du fichier de l'élément ne
change pas.
Insertion d’images 315
Les éléments bitmap (images GIF, JPEG et PNG) peuvent être déformés si vous augmentez ou
diminuez leurs attributs largeur et hauteur. Pour préserver les proportions (rapport largeur /
hauteur), maintenez la touche Maj enfoncée lorsque vous redimensionnez une image bitmap.
Toutefois, il est recommandé de ne redimensionner ces éléments visuellement dans Dreamweaver
que pour des essais de mise en page. Lorsque vous avez trouvé la taille idéale de votre image,
modifiez celle-ci en conséquence dans une application de retouche d'image. La modification de
l'image permet également de diminuer sa taille de fichier, et donc de réduire son temps de
téléchargement.
Pour redimensionner un élément :
1
Sélectionnez l'élément (par exemple, une image ou une animation Shockwave) 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 du
coin 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 d'origine d'un élément redimensionné, dans l'inspecteur de propriétés,
supprimez les valeurs des champs L et H ou cliquez sur le bouton Rétablir la taille.
Création d'une image survolée
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. 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.
Il est impossible de voir l'effet d'une image survolée dans la fenêtre de document de
Dreamweaver. Pour voir l'effet de survol, appuyez sur F12 pour afficher la page dans un
navigateur, puis faites passer le pointeur de la souris au-dessus de l'image.
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 « Intervertir une image », page 397.
316 Chapitre 20
Une barre de navigation est une forme plus complexe d'image survolée. Pour créer une barre de
navigation, utilisez la commande Insertion > Images interactives > Barre de navigation (voir
« Insertion d'une barre de navigation », page 442).
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 Insertion, sélectionnez Commun puis cliquez sur l'icône Image survolée.
• Dans la barre Insertion, 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.
3
Dans la zone de texte Nom de l'image, attribuez un nom à l'image survolée.
4
Dans la zone de texte Image originale, cliquez sur le bouton Parcourir et sélectionnez l'image à
afficher lors du chargement de la page ou tapez le chemin d'accès du fichier d'image dans la
zone de texte.
5
Dans la zone de texte Image survolée, cliquez sur le bouton Parcourir et sélectionnez l'image à
afficher lorsque le pointeur est placé au-dessus de l'image originale ou tapez le chemin d'accès
du fichier d'image dans la zone de texte.
6
Si vous souhaitez précharger les images dans la mémoire cache du navigateur afin d'éviter tout
délai lorsque vous faites passer le pointeur de la souris par-dessus l'image, sélectionnez l'option
Précharger les images.
7
Dans la zone de texte Si cliqué, aller à l'URL, cliquez sur le bouton Parcourir et sélectionnez le
fichier ou tapez le chemin d'accès du fichier à ouvrir lorsqu'un utilisateur clique sur l'image
survolée.
Remarque : si vous ne définissez pas de lien pour l'image, Dreamweaver insère un lien nul (#) dans le code
source HTML auquel le comportement de survol est attaché. Si vous supprimez le lien nul, l'image survolée ne
fonctionne plus.
8
Cliquez sur le bouton OK pour fermer la boîte de dialogue Insérer l'image survolée.
9
Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.
10
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.
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 utiliser Macromedia Fireworks comme éditeur d'image externe. Fireworks 3 et ses
versions ultérieures utilisent les Design Notes pour repérer l'emplacement de stockage du fichier
PNG d'origine sur le disque dur local ; lorsque vous ouvrez l'image dans Fireworks, vous pouvez
modifier le fichier PNG d'origine.
Insertion d’images 317
Si vous choisissez une autre application comme éditeur d'image externe et que vous la lancez à
partir de Dreamweaver, cette application ouvre l'image sélectionnée. Utilisez l'éditeur d'image
pour modifier l'image, enregistrer vos modifications et visualiser l'image mise à jour dans
Dreamweaver.
Si le fichier d'image a été créé à partir d'un fichier PNG, vous pouvez ouvrir manuellement le
fichier d'origine, effectuer des modifications et enregistrer l'image modifiée. Lorsque vous revenez
dans Dreamweaver, l'image est actualisée dans 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.
Démarrage d'un éditeur d'image externe
Si vous souhaitez définir un éditeur d'image externe pour le type de fichier d'image indiqué,
choisissez Edition > Préférences > Types de fichiers/Editeurs ou Dreamweaver > Préférences >
Types de fichiers/Editeurs (Mac OS X). Pour plus d'informations sur le choix d'un éditeur
d'image, voir Paramétrage des préférences pour les éditeurs d'image externes dans l'aide de
Dreamweaver.
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écutera 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.
Application de comportements 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, Intervertir une image et Restaurer
l'image intervertie.
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 scénario, 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 387.
Précharger les images
remplace une image par une autre, en modifiant l'attribut src de la balise
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 « Intervertir une image », page 397.
Intervertir une image
img.
318 Chapitre 20
Restaurer l'interversion d'images 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 Interversion
d'images à un objet ; en principe, vous n'avez pas besoin d'y faire appel manuellement. Voir
« Restaurer l'image intervertie », page 398.
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 « Création de
barres de navigation », page 441 et « Création de menus de reroutage », page 439.
Insertion d’images 319
320 Chapitre 20
CHAPITRE 21
Intégration de Dreamweaver à d'autres
applications
Macromedia Fireworks MX et Macromedia Flash MX sont des outils puissants de développement
Web conçus pour créer des graphiques et des animations SWF que vous pouvez afficher dans des
pages Web. Macromedia Dreamweaver MX est parfaitement intégré à ces outils pour simplifier le
déroulement de vos conceptions Web.
Pour assurer une intégration parfaite entre Dreamweaver et Flash ou Fireworks, activez les Design
Notes lors de la définition des sites Dreamweaver. Par défaut, cette option est présélectionnée dans
la configuration de la définition du site. Pour plus d'informations sur l'activation des Design
Notes, voir « Activation et désactivation des Design Notes », page 101.
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).
Vous pouvez insérer des images ou des tables Fireworks et des animations Flash 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.
Dans Dreamweaver, vous pouvez lancer le processus de production de graphiques en insérant et
en mettant à jour un graphique d'espace réservé pour l'image. Pour plus d'informations sur les
espaces réservés pour l'image, voir « Insertion d'un espace réservé pour une image », page 313.
Après avoir inséré un espace réservé pour l'image dans Dreamweaver, vous pouvez lancer
Fireworks MX pour créer un nouveau graphique. Dans Fireworks, vous pouvez créer le
graphique, ajouter des zones réactives ou des comportements ou tout élément de votre choix.
Vous pouvez alors enregistrer le graphique au format PNG et l'exporter sous la forme d'un fichier
graphique Web, au format GIF ou JPEG par exemple, ou dans le cas d'une table découpée, sous la
forme de documents HTML et d'images.
Lorsque vous retournez dans Dreamweaver, l'image de remplacement ou la table Fireworks est
mise à jour dans le document.
Ce chapitre contient les sections suivantes :
« Définition des préférences de lancement et de modification des fichiers source Fireworks »,
page 323
« Utilisation de Dreamweaver et Fireworks », page 322
« Modification d'une image ou d'une table Fireworks », page 326
321
« Création d'un album photos pour le Web », page 330
« Utilisation de Dreamweaver et Flash », page 332
« Modification d'une animation Flash dans Dreamweaver », page 333
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 permettent quant à
elles de localiser le document source correspondant à une image exportée ou à un fichier
d'animation. Pour plus d'informations sur l'utilisation des Design Notes dans Dreamweaver, voir
« Utilisation des Design Notes dans Fireworks ou Flash et Dreamweaver », page 104.
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.
Pour obtenir de meilleurs résultats lorsque vous créez des graphiques et des animations destinés à
une publication Web, enregistrez le code source de Fireworks et Flash et les fichiers Web dans un
site défini Dreamweaver. 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.
Pour intégrer parfaitement ces applications à vos tâches de développement, il convient de définir
un environnement de travail. Pour plus d'informations sur la configuration de l'environnement
de travail Dreamweaver et Fireworks, voir « Utilisation de Dreamweaver et Fireworks », page 322.
Pour plus d'informations sur la configuration de l'environnement de travail Dreamweaver et
Flash, voir « Utilisation de Dreamweaver et Flash », page 332.
Utilisation de Dreamweaver et Fireworks
Dreamweaver et Fireworks reconnaissent et partagent de nombreuses 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.
Pour mettre en place un environnement de travail intégré, vous devez au préalable définir un site
local dans Dreamweaver et activer les Design Notes pour ce site. Les Design Notes sont
automatiquement activées tant que vous ne modifiez pas les paramètres par défaut.
Vous devez également définir Fireworks comme étant l'éditeur d'image externe principal de
Dreamweaver pour qu'il s'ouvre automatiquement lors des tâches d'édition. Pour plus
d'informations sur la configuration de Fireworks comme éditeur externe, voir « Utilisation d'un
éditeur d'image externe », page 317.
Pour une bonne intégration de la fonction de lancement et d'édition, exportez les fichiers HTML
et les fichiers graphiques 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. Il contient les Design Notes ; il s'agit de fichiers de
petite taille portant l'extension (.mno) de Macromedia Note.
322 Chapitre 21
Les Design Notes contiennent des informations sur les fichiers graphiques exportés par Fireworks.
Lorsque vous lancez et modifiez une image ou une table Fireworks dans Dreamweaver, le
programme utilise ces informations pour localiser le fichier PNG source. Pour plus
d'informations sur le lancement automatique du fichier PNG, voir « Définition des préférences
de lancement et de modification des fichiers source Fireworks », page 323.
Lorsque vous sélectionnez une image dans un document Dreamweaver exporté à partir de
Fireworks auquel correspond un fichier .mno, l'inspecteur de propriétés affiche l'icône Fireworks
et le chemin source du fichier.
En paramétrant Fireworks comme l'éditeur d'image par défaut pour Dreamweaver, vous pouvez
passer facilement de Dreamweaver à Fireworks pour modifier une image. Dans les préférences de
Dreamweaver, paramétrez Fireworks comme éditeur principal des types de fichiers graphiques
GIF, PNG et JPEG. Pour plus d'informations sur la définition d'un éditeur d'image, voir
« Utilisation d'un éditeur d'image externe », page 317 ou Paramétrage des préférences pour les
éditeurs d'image externes dans l'aide de Dreamweaver.
Définition des préférences de lancement et de modification des
fichiers source Fireworks
Les préférences de lancement et de modification de Fireworks définissent comment manipuler les
fichiers PNG source lorsque vous lancez des fichiers Fireworks à partir d'une autre application,
telle que Dreamweaver.
Dreamweaver reconnaît les préférences de lancement et de modification dans certains cas
uniquement, lorsque vous lancez et optimisez une image Fireworks. 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 incorrect. Dans tous les autres cas, et ceci même
lorsque vous lancez et modifiez des images Fireworks, Dreamweaver lance automatiquement le
fichier PNG source ou vous invite à le localiser s'il ne le trouve pas.
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 (Mac OS X) et
cliquez sur l'onglet Lancer et Modifier (Windows) ou choisissez Lancer et Modifier dans le
menu déroulant (Macintosh).
2
Indiquez les options de préférences applicables lors de la modification ou de l'optimisation
d'images Fireworks placées dans une application externe :
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.
Toujours utiliser le fichier PNG source
Ne jamais utiliser le fichier PNG source permet
de lancer automatiquement l'image Fireworks
placée, qu'un fichier PNG source existe ou non. 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.
Intégration de Dreamweaver à d'autres applications 323
Insertion d'une image Fireworks dans un document Dreamweaver
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.
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 Insertion, 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.
Mise à jour d'un espace réservé pour l'image Dreamweaver dans Fireworks
Vous pouvez créer un espace réservé pour l'image dans un document Dreamweaver, puis lancer
Fireworks pour créer une image graphique ou une table Fireworks devant le remplacer. 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 313.
Pour créer une image à partir d'un espace réservé, Dreamweaver MX et Fireworks MX doivent
être installés sur votre système. 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 que vous créez, l'alignement du texte et
les comportements reconnus par Fireworks (tels que l'interversion d'image, le menu contextuel, la
barre de navigation et le texte). 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 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 si vous remplacez
l'espace réservé pour l'image.
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.
Dans Fireworks MX, créez la nouvelle image, puis cliquez sur Terminé. Fireworks vous demande
d'enregistrer le fichier au format PNG (document source) et d'exporter le fichier dans un format
Web, tels que les formats GIF, JPEG ou, dans le cas d'images découpées, sous la forme de
documents HTML et d'images. La nouvelle image ou la table Fireworks remplace
automatiquement l'espace réservé pour l'image dans le document Dreamweaver.
324 Chapitre 21
Pour modifier un espace réservé pour l'image Dreamweaver dans Fireworks :
1
Veillez à ce que Fireworks soit l'éditeur d'image des fichiers .png. Pour plus d'informations,
voir la section Paramétrage 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 opérations
d'édition :
• 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 avec le bouton droit de la souris sur l'espace réservé pour l'image, puis choisissez
l'option 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.
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 le champ 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 le nom dans le champ 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. Elle vous permet d'exporter l'image au format GIF.
8
Choisissez le dossier du site local de Dreamweaver dans le champ Enregistrer dans.
9
Le champ de texte Nom est automatiquement mis à 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 comme
Images uniquement ou Documents HTML et images.
Intégration de Dreamweaver à d'autres applications 325
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.
Modification d'une image ou d'une table Fireworks
Vous pouvez lancer Fireworks pour modifier des images insérées dans un document
Dreamweaver. Lorsque vous lancez et modifiez une image ou une découpe d'image faisant partie
d'une table Fireworks, Dreamweaver lance Fireworks et 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 lancer cette dernière pour la
modifier tant que le commentaire <!--fw table--> est 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.
L'inspecteur de propriétés identifie la sélection comme une image ou table Fireworks en
fonction de l'élément sélectionné 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.
• Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez
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 lance 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.
326 Chapitre 21
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.
Dans Dreamweaver, le comportement Afficher le menu contextuel vous permet de modifier ou de
mettre à jour le contenu d'un menu contextuel Fireworks basé 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 dans Dreamweaver, voir « Afficher le menu contextuel », page 393.
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 modifier les images d'arrière-plan d'un menu contextuel basé sur des images, sélectionnez
l'image à mettre à jour, puis cliquez sur Modifier. Pour plus d'informations sur la modification
d'une image Fireworks, voir « Modification d'une image ou d'une table Fireworks », page 326.
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.
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.
Lancement de Fireworks pour optimiser une image
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.
Intégration de Dreamweaver à d'autres applications 327
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 my_image.GIF en my_image.JPEG, toutes les références faites à my_image.gif
deviennent my_image.jpg lorsque vous cliquez sur OK.
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.
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 Insertion, cliquez sur le bouton Insérer HTML
Fireworks.
3
Dans la boîte de dialogue qui apparaît, 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.
328 Chapitre 21
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.
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.
Intégration de Dreamweaver à d'autres applications 329
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
La commande Dreamweaver Créer un album photos pour le Web permet de générer
automatiquement un site Web qui affiche un album d'images provenant d'un dossier donné.
Cette commande utilise le script JavaScript pour appeler Fireworks qui crée une 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
pouvoir utiliser la commande 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 des extensions reconnues par la commande Créer un album
photos pour le Web, à savoir .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 le champ de texte 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.
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 champs de texte Infos de sous-titre et Autres
infos.
3
Choisissez le dossier contenant les images sources en cliquant sur le bouton Parcourir situé à
côté du champ 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 du champ 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.
4
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.
330 Chapitre 21
• Indiquez le nombre de colonnes de la table qui affiche les miniatures.
5
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.
6
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.
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.
Intégration de Dreamweaver à d'autres applications 331
10
Lorsqu'une boîte de dialogue indiquant « L'album a été créé » apparaît, 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 Dreamweaver et Flash
Vous pouvez facilement insérer une animation Flash (fichier SWF) dans un document
Dreamweaver. L'inspecteur de propriétés vous permet de définir les options de lecture et
d'affichage du fichier SWF dans la page Web. Pour plus d'informations sur l'insertion d'une
animation Flash dans Dreamweaver, voir « Insertion d'animations Flash », page 345.
Dans Dreamweaver, le vérificateur de lien vous permet de modifier aisément les liens figurant
dans les fichiers insérés dans un document Dreamweaver, y compris les animations Flash. Vous
pouvez mettre à jour un lien d'une animation SWF, puis répercuter la modification dans le
document de programmation Flash. Pour plus d'informations, voir « Mise à jour des liens vers un
fichier SWF », page 334.
Si Macromedia Flash MX et Dreamweaver MX sont installés sur votre système, vous pouvez
également mettre à jour une animation placée dans un document Dreamweaver. Lorsque les deux
applications sont installées sur votre ordinateur et que vous sélectionnez une animation SWF dans
le document Dreamweaver, l'inspecteur de propriétés affiche un bouton Modifier actif. Si Flash
MX n'est pas installé, le bouton Modifier est désactivé.
Lorsque vous cliquez sur ce bouton, Dreamweaver lance Flash qui tente à son tour de localiser le
fichier de programmation Flash (.FLA) correspondant au fichier SWF sélectionné. Les
informations concernant le fichier source d'origine sont automatiquement stockées dans une
Design Note associée au fichier SWF lorsque vous l'exportez vers un site Dreamweaver (si les
Design Notes sont activées pour le site Dreamweaver). 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. Il convient de modifier le fichier source et de l'exporter en tant que
fichier d'animation SWF.
332 Chapitre 21
Après avoir lancé un document source à modifier, vous pouvez modifier une animation dans
Flash. Cliquez sur Terminé une fois les modifications apportées. Flash met à jour le document de
programmation Flash, exporte à nouveau le fichier d'animation, se ferme et active le document
Dreamweaver. Vous pouvez afficher le fichier SWF mis à jour dans le document en cliquant sur
Lecture dans l'inspecteur de propriétés ou appuyez sur F12 pour afficher un aperçu de votre page
dans la fenêtre d'un navigateur.
Rubriques connexes
« Modification d'une animation Flash dans Dreamweaver », page 333
« Mise à jour des liens vers un fichier SWF », page 334
Modification d'une animation Flash dans Dreamweaver
Vous ne pouvez pas modifier directement un fichier SWF. Si vous souhaitez apporter des
modifications à un fichier SWF exporté, sélectionnez un espace réservé pour une animation Flash
dans le document Dreamweaver, puis cliquez sur Modifier dans l'inspecteur de propriétés. Le
bouton Modifier lance Flash et le fichier FLA si le chemin d'accès au document source (FLA) est
disponible. Une fois les modifications effectuées, Flash les enregistre dans le document source
FLA et exporte à nouveau le fichier d'animation SWF.
Pour lancer et modifier une animation Flash à 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 :
• Cliquez sur l'espace réservé de l'animation Flash pour le sélectionner, puis sur Modifier dans
l'inspecteur de propriétés.
• Maintenez enfoncée la touche Ctrl (Windows) ou Commande (Macintosh) et double-cliquez
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 et ouvre le fichier FLA que vous pouvez modifier ou vous demande
de l'ouvrir s'il ne parvient pas à le trouver.
Intégration de Dreamweaver à d'autres applications 333
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.
3
Modifiez l'animation dans Flash. La fenêtre de document indique que vous êtes en train de
modifier une animation provenant de Dreamweaver.
4
Une fois les modifications effectuées, cliquez sur Terminé.
En cliquant sur Terminé, vous enregistrez les modifications apportées au fichier FLA source et
mettez à jour le fichier SWF.
Mise à jour des liens vers un fichier SWF
Vous pouvez mettre à jour un lien dans un fichier SWF à partir de la fenêtre Affichage de la carte
du site de Dreamweaver. Pour plus d'informations sur l'affichage de la carte du site, voir
« Utilisation de la carte du site », page 83. Avant de créer une carte du site, vous devez créer une
page d'accueil pour votre 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 87.
Sélectionnez le lien à mettre à jour, puis choisissez une option de modification de lien
correspondant aux changements que vous souhaitez apporter, puis modifiez un lien ou répercutez
la modification du lien sur le site.
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.
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.
334 Chapitre 21
2
Ouvrez la fenêtre de la carte du site.
3
Pour afficher les fichiers dépendants, choisissez Affichage > Afficher les fichiers dépendants
(Windows) ou Site > Affichage de la carte du site > Afficher les fichiers dépendants
(Macintosh).
Le lien apparaît sous le fichier SWF.
4
Utilisez l'une des méthodes suivantes pour modifier le lien :
• Pour modifier le lien dans le fichier SWF sélectionné, cliquez sur le lien avec le bouton droit de
la souris, puis choisissez Modifier le lien. Dans la boîte de dialogue qui apparaît, entrez le
nouveau chemin d'accès à l'URL dans le champ URL.
• Pour mettre à jour toutes les instances du lien, choisissez Site > Modifier le lien au niveau du
site, puis, dans le champ Modifier tous les liens à de la boîte de dialogue qui apparaît,
recherchez le lien à modifier à l'aide du bouton Parcourir ou tapez son chemin d'accès. Enfin,
dans le champ En liens à, recherchez la nouvelle URL à l'aide du bouton Parcourir ou tapez
son chemin d'accès.
5
Cliquez sur OK.
Intégration de Dreamweaver à d'autres applications 335
336 Chapitre 21
CHAPITRE 22
Insertion d'éléments multimédia
Macromedia Dreamweaver permet d'ajouter rapidement et facilement du son et des animations à
un site Web. Vous pouvez incorporer et modifier des fichiers multimédia et des objets comme des
animations Macromedia Flash et Shockwave, des applets Java, QuickTime, Active X et des
fichiers audio. Vous pouvez joindre des Design Notes à ces objets pour communiquer avec votre
équipe. Il est également possible d'insérer des objets de texte et de bouton Flash à partir de
l'application Dreamweaver elle-même.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
•
•
•
•
•
« Insertion et lecture d'objets multimédia », page 338
« Lancement d'un éditeur externe pour des fichiers multimédia », page 338
« Utilisation des Design Notes (Notes de conception) avec les objets multimédia », page 340
« A propos du contenu Flash », page 340
« Insertion d'un objet de bouton Flash », page 341
« Insertion d'un objet de texte Flash », page 343
« Insertion d'animations Flash », page 345
« Insertion d'animations Shockwave », page 346
« Ajout d'une vidéo », page 346
« Ajout de son à une page », page 346
« Insertion du contenu d'un plug-in Netscape Navigator », page 348
« Insertion d'un contrôle ActiveX », page 350
« Insertion d'une applet Java », page 350
« Utilisation de comportements pour contrôler les objets multimédia », page 350
337
Insertion et lecture 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.
La catégorie Médias de la barre Insertion ou du menu Insertion vous permet de sélectionner le
type d'objet que vous voulez insérer dans un document. Les animations et objets Flash,
Shockwave, les applets et les contrôles ActiveX sont associés à des boutons. Le bouton Plug-in
Netscape Navigator vous permet d'insérer d'autres fichiers multimédia. Pour plus d'informations,
voir « Insertion du contenu d'un plug-in Netscape Navigator », page 348.
Pour insérer un objet multimédia dans une page :
1
Placez le point d'insertion dans la fenêtre de document dans laquelle vous souhaitez insérer
l'objet, puis procédez de l'une des manières suivantes :
• Dans la barre Insertion, choisissez Médias et cliquez sur le bouton correspondant au type
d'objet que vous souhaitez insérer ou faites-le glisser vers la fenêtre de document.
• Choisissez l'objet adéquat dans le sous-menu Insertion > Médias ou Insertion > Images
interactives.
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 ou
Dreamweaver > Préférences > Général (Mac OS X) 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, maintenez enfoncée la touche Ctrl ou Option et cliquez sur le bouton
Shockwave.
Dreamweaver insère automatiquement le code source HTML nécessaire à l'affichage de l'objet ou
de l'espace réservé sur la page. 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.
Lancement d'un éditeur externe pour des fichiers multimédia
Vous pouvez double-cliquer sur la plupart des fichiers dans le panneau Site afin de les modifier
directement. S'il s'agit d'un fichier HTML, il s'ouvrira dans Dreamweaver. S'il s'agit d'un autre
type de fichier, tel qu'un fichier image, il s'ouvre dans un éditeur externe approprié, tel que
Macromedia Fireworks.
Chaque type de fichier non pris en charge directement par Dreamweaver peut être associé à un ou
plusieurs éditeurs externes installés sur votre système. L'éditeur qui est exécuté lorsque vous
double-cliquez sur le fichier du panneau Site est appelé l'éditeur principal. Vous pouvez spécifier
l'éditeur associé à un type de fichier dans les préférences Types de fichiers/Editeurs.
Si plusieurs éditeurs sont associés à un type de fichier, vous pouvez lancer un éditeur secondaire
pour un fichier spécifique. Cliquez sur le nom de fichier se trouvant dans le panneau Site avec le
bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
et choisissez un éditeur dans le sous-menu Ouvrir avec du menu contextuel.
338 Chapitre 22
Pour indiquer explicitement les éditeurs externes à exécuter pour un type de fichier spécifique,
choisissez la commande Edition > Préférences et sélectionnez la catégorie Types de fichiers/
Editeurs. 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.
Vous pouvez également rechercher un éditeur externe pour modifier votre fichier. Cliquez avec le
bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
dans la fenêtre Création du document, puis choisissez la commande Modifier avec > Parcourir ou
sélectionnez le fichier et choisissez la commande Modifier > Modifier avec éditeur externe.
Pour ajouter un type de fichier à la liste des extensions dans les préférences Types de fichiers/
Editeurs :
1
Cliquez sur le bouton plus (+), au-dessus de la liste Extensions.
2
Tapez une extension de fichier (y compris le point au début de l'extension) ou plusieurs
extensions connexes, en les séparant par des espaces.
Par exemple, vous pouvez entrer .css, .png .jpg.
Pour ajouter un éditeur pour un type de fichier donné :
1
Sélectionnez l'extension de ce type de fichier dans la liste Extensions.
2
Cliquez sur le bouton plus (+), au-dessus de la liste Editeurs.
3
Dans la boîte de dialogue qui apparaît, choisissez une application à ajouter à la liste Editeurs.
Par exemple, choisissez l'icône d'application pour Excel pour ajouter cette application à la liste
Editeurs.
Pour supprimer un type de fichier de la liste :
1
Sélectionnez ce type de fichier dans la liste Extensions.
Remarque : l'annulation de la suppression d'un type de fichier étant impossible, soyez prudent lors d'une telle
opération.
2
Cliquez sur le bouton moins (-) au-dessus de la liste Extensions.
Pour qu'un éditeur devienne l'éditeur principal pour un type de fichier :
1
Sélectionnez le type de fichier.
2
Sélectionnez l'éditeur (ou ajoutez-le s'il ne figure pas dans la liste).
3
Cliquez sur Rendre principal.
Pour dissocier un éditeur d'un type de fichier donné :
1
Sélectionnez ce type de fichier dans la liste Extensions.
2
Sélectionnez l'éditeur dans la liste Editeurs.
3
Cliquez sur le bouton moins (-) au-dessus de la liste Editeurs.
Insertion d'éléments multimédia 339
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. Pour plus d'informations sur l'utilisation des Design Notes, voir « Utilisation
des Design Notes », page 101.
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 », page 101).
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.
A propos du contenu Flash
La technologie Flash de Macromedia est la solution la plus répandue pour la diffusion de
graphismes et d'animations vectorielles. Flash Player est disponible sous forme de plug-in
Netscape Navigator et de contrôle ActiveX pour Internet Explorer sur PC et est inclus dans les
dernières versions de Netscape Navigator, Microsoft Windows et America Online.
Dreamweaver est fourni avec les objets Flash et vous pouvez l'utiliser que vous ayez Flash ou non.
Vous pouvez utiliser ces objets pour créer des boutons Flash et du texte Flash que vous pouvez
insérer dans un document Dreamweaver. Si Flash est installé sur votre machine, voir « Utilisation
de Dreamweaver et Flash », page 332 pour plus d'informations sur l'utilisation et l'intégration de
ces applications.
Avant d'utiliser les commandes Flash disponibles dans Dreamweaver, prenez connaissance des
trois types de fichiers Flash suivants :
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 la visualisation 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 d'un objet de bouton Flash », page 341, « Insertion d'un objet de texte Flash », page
343 et « Insertion d'animations Flash », page 345.
Le fichier d'animation Flash (.swf)
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 ou 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.
Les fichiers de modèle Flash (.swt)
340 Chapitre 22
Vous pouvez également télécharger de nouveaux modèles de bouton à partir du site Web
Macromedia Exchange pour Dreamweaver 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 http://www.macromedia.com/go/flash_buttons.
Insertion d'un objet de bouton Flash
L'objet de bouton Flash est un bouton basé sur un modèle Flash qui peut être mis à jour. 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. Les boutons Flash peuvent être insérés en mode Création ou en
mode d'affichage de code.
Remarque : vous devez enregistrer le document avant d'insérer un objet de bouton ou de texte Flash.
Utilisez la boîte de dialogue Insérer le bouton Flash pour sélectionner un bouton dans un groupe
de boutons Flash désignés. Vous pouvez afficher un exemple du bouton dans le champ
Echantillon. Cliquez sur l'échantillon pour découvrir comment il fonctionne dans le navigateur.
Lorsque vous définissez le bouton Flash (par exemple, en modifiant le texte ou la police), le
champ Echantillon n'est pas automatiquement mis à jour pour refléter les modifications
apportées. Ces modifications seront prises en compte lorsque vous fermerez la boîte de dialogue et
afficherez le bouton en mode Création.
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 barre Insertion, sélectionnez Médias et cliquez sur l'icône Bouton Flash.
• Dans la barre Insertion, sélectionnez Médias et faites glisser l'icône Bouton Flash dans la
fenêtre de document ou la fenêtre d'affichage de code si vous manipulez le code.
• Choisissez Insertion > Images interactives > Bouton Flash.
La boîte de dialogue Insérer le bouton Flash s'affiche.
3
Sélectionnez le style de bouton souhaité dans la liste Style.
Insertion d'éléments multimédia 341
4
Dans le champ Texte de bouton (facultatif ), tapez le texte à afficher.
Ce champ accepte uniquement des modifications si le bouton sélectionné possède un
paramètre {Button Text} défini. Ceci est affiché dans la zone Echantillon. Le texte que vous
tapez remplace le paramètre {Button Text} lorsque vous prévisualisez le fichier.
5
Dans le menu déroulant Police, sélectionnez une police.
Si la police par défaut d'un bouton n'est pas disponible sur le système, sélectionnez une autre
police dans le menu déroulant. Vous ne verrez pas la police sélectionnée dans le champ
Echantillon, mais vous pouvez cliquer sur le bouton Appliquer pour insérer le bouton dans la
page afin de visualiser l'aspect du texte.
6
Dans le champ Taille, entrez une valeur numérique pour la taille de la police.
7
Dans le champ Lien (facultatif ), entrez un lien relatif au document ou un lien absolu pour le
bouton.
8
Dans le champ Cible (facultatif ), indiquez l'endroit où le document lié doit s'ouvrir. Vous
pouvez sélectionner une option de cadre ou de fenêtre dans le menu déroulant. Les noms de
cadres ne sont répertoriés que si l'objet Flash est modifié dans un jeu de cadres.
9
Dans le champ Couleur ar-pl. (facultatif ), définissez la couleur d'arrière-plan de l'animation
Flash. Utilisez le sélecteur de couleur ou entrez une valeur hexadécimale Web (telle que
#FFFFFF).
10
Dans le champ Enregistrer sous, entrez un nom de fichier sous lequel enregistrer le nouveau
fichier SWF.
Vous pouvez utiliser le nom de fichier par défaut (par exemple, button1.swf ) ou entrer un
nouveau nom. Si le fichier contient un lien relatif au document, vous devez enregistrer le
fichier dans le même répertoire que le document HTML courant pour conserver les liens
relatifs au document.
11
Cliquez sur le bouton Acquérir plus de styles pour atteindre le site Macromedia Exchange et
télécharger des styles de bouton supplémentaires.
Pour plus d'informations, voir « Ajout d'extensions dans Dreamweaver », page 55.
12
Cliquez sur le bouton Appliquer ou OK pour insérer le bouton Flash dans la fenêtre de
document.
Conseil : cliquez sur le bouton Appliquer pour visualiser les modifications en mode Création, tout en conservant la
boîte de dialogue ouverte. Vous pouvez alors continuer à apporter des modifications au bouton.
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 ar-pl.
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 :
342 Chapitre 22
• 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 champs comme cela
est décrit dans la procédure précédente « Insertion d'un objet de bouton Flash », page 341.
Dans la fenêtre Création, vous pouvez redimensionner l'objet à l'aide des poignées de
redimensionnement. Vous pouvez restaurer 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 315).
Lecture d'un objet de bouton Flash dans le document
Vous pouvez prévisualiser un bouton Flash dans la fenêtre de document Dreamweaver.
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 de 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 voulez 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 barre Insertion, sélectionnez Médias et cliquez sur l'icône Texte Flash.
• Dans la barre Insertion, sélectionnez Médias et faites glisser l'icône Texte Flash dans la fenêtre
de document ou la fenêtre d'affichage de code si vous manipulez le code.
Insertion d'éléments multimédia 343
• Choisissez Insertion > Images interactives > Texte Flash.
La boîte de dialogue Insérer le texte Flash s'affiche.
3
Sélectionnez une police dans le menu déroulant Police.
Ce menu répertorie toutes les polices TrueType actuellement chargées sur le système.
4
Entrez une taille de police (en points) dans le champ Taille.
5
Spécifiez les attributs de style, tels que gras ou italique, et l'alignement du texte en cliquant sur
les boutons de style appropriés.
6
Dans le champ Couleur, définissez la couleur du texte en utilisant le sélecteur de couleur ou en
entrant une valeur hexadécimale Web (telle que #FFFFFF).
7
Dans le champ Couleur de survol, définissez la couleur qui s'affiche lorsque le pointeur est
placé au-dessus de l'objet de texte Flash. Utilisez le sélecteur de couleur ou entrez une valeur
hexadécimale Web (telle que #FFFFFF).
8
Entrez le texte souhaité dans le champ Texte.
Pour visualiser le style de police affiché dans le champ Texte, sélectionnez Afficher la police.
9
Pour associer un lien à l'objet de texte Flash, entrez un lien relatif au document ou un lien
absolu dans le champ Lien.
Les liens relatifs au site ne sont pas acceptés car les navigateurs ne les reconnaissent pas au sein
des animations Flash. Si vous utilisez un lien relatif au document, veillez à enregistrer le fichier
SWF dans le même répertoire que le fichier HTML. Les navigateurs varient dans leur
interprétation des liens relatifs au document et l'enregistrement dans le même répertoire assure
un fonctionnement correct des liens.
10
Si vous avez entré un lien, vous pouvez spécifier dans le champ Lien une fenêtre ou un cadre
cible de destination pour ce lien.
11
Dans le champ Couleur ar-pl., définissez la couleur d'arrière-plan du texte. Utilisez le sélecteur
de couleur ou entrez une valeur hexadécimale Web (telle que #FFFFFF).
344 Chapitre 22
12
Dans le champ Enregistrer sous, entrez un nom pour le fichier.
Vous pouvez utiliser le nom de fichier par défaut (par exemple, tex1.swf ) ou taper un nouveau
nom. Si le fichier contient un lien relatif au document, vous devez enregistrer le fichier dans le
même répertoire que le document HTML courant pour conserver les liens relatifs au
document.
13
Cliquez sur le bouton 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 342).
Insertion d'animations Flash
Lorsque vous insérez une animation Flash dans un document, Dreamweaver utilise les deux
balises object (définie par Internet Explorer pour les contrôles ActiveX) et embed (définie par
Netscape Navigator) afin d'obtenir des résultats optimaux dans tous les navigateurs. Lorsque vous
modifiez l'animation dans l'inspecteur de propriétés, Dreamweaver fait correspondre vos entrées
aux paramètres appropriés pour les balises object et embed.
Pour insérer une 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 barre Insertion, sélectionnez Médias et cliquez sur l'icône Insérer Flash.
• Dans la barre Insertion, sélectionnez Médias et faites glisser l'icône Insérer Flash vers la fenêtre
de document.
• Choisissez la commande 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é et cliquez sur le bouton Aide dans l'inspecteur de propriétés.
Pour afficher un aperçu d'une animation Flash 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.
Insertion d'éléments multimédia 345
Insertion d'animations Shockwave
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.
Le logiciel qui permet d'exécuter les animations Shockwave est disponible sous forme de plug-in
Netscape Navigator et de contrôle ActiveX. Lorsque vous insérez une animation Shockwave,
Dreamweaver utilise les deux balises object (pour le contrôle ActiveX) et embed (pour le plug-in)
afin d'optimiser les résultats dans tous les navigateurs. Lorsque vous modifiez l'animation dans
l'inspecteur de propriétés, Dreamweaver fait correspondre vos entrées aux paramètres appropriés
pour les balises object et embed.
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 barre Insertion, sélectionnez Médias et cliquez sur l'icône Shockwave.
• Dans la barre Insertion, sélectionnez Médias et faites glisser l'icône Shockwave dans la fenêtre
de document ou la fenêtre d'affichage de code si vous manipulez le code.
• Choisissez la commande Insertion > Médias > Shockwave.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation.
3
Dans l'inspecteur de propriétés, tapez la largeur et la hauteur de l'animation dans les boîtes
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. Les formats de diffusion les plus courants sur Internet pour
transmettre des fichiers vidéo sont les suivants : RealMedia, QuickTime et Windows Media. Vous
devez télécharger une application d'aide pour visualiser ces formats. Ces formats vous permettent
de diffuser simultanément des fichiers audio et vidéo.
Si vous souhaitez sélectionner un clip court à télécharger plutôt qu'à diffuser, vous pouvez établir
un lien vers la séquence ou l'incorporer dans votre page. Ces clips se présentent souvent au format
AVI ou MPEG.
Vous pouvez utiliser Director pour créer des animations Shockwave ou Flash afin de générer des
présentations multimédia interactives à faible largeur de bande à publier sur Internet. Avec Flash,
la taille des fichiers est peu importante et cette technologie est reconnue par de nombreuses platesformes. (Dans un premier temps, les utilisateurs doivent télécharger le plug-in gratuit pour
visualiser ces fichiers.)
Ajout de son à une page
Il existe plusieurs types et formats de fichiers son différents ainsi que plusieurs méthodes pour
ajouter du son à une page Web. 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.
346 Chapitre 22
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 son à une animation Flash, puis incorporer le fichier SWF pour assurer une meilleure
cohérence.
A propos des 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.
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) 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 nouvelle technologie permet de « diffuser » le fichier afin qu'un
visiteur n'ait pas à attendre le téléchargement du fichier entier avant de pouvoir l'écouter.
Toutefois, la taille d'un fichier MP3 étant supérieure à celle d'un fichier Real Audio, le
téléchargement d'une chanson entière peut prendre un certain temps via une connexion
téléphonique normale. 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. La qualité sonore n'est pas aussi bonne que celle des fichiers MP3, mais de
nouveaux lecteurs et encodeurs ont considérablement amélioré la qualité. Les visiteurs doivent
télécharger et installer l'application d'aide ou le plug-in RealPlayer afin de lire ces fichiers.
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. Certains navigateurs
peuvent ne pas prendre en charge les fichiers son incorporés. Voir « Incorporation d'un fichier
son », page 348.
Insertion d'éléments multimédia 347
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 du fichier dans le champ Lien.
Incorporation d'un fichier son
L'opération consistant à incorporer du son intègre le lecteur audio directement dans la page, mais
le son est uniquement lu si les visiteurs du site disposent du plug-in approprié pour le fichier son
choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que musique de fond ou
pour avoir un plus grand contrôle sur la présentation sonore elle-même. Par exemple, vous pouvez
régler le volume, définir l'aspect du lecteur sur la page et spécifier les points de début et de fin du
fichier 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 barre Insertion, sélectionnez Médias et cliquez sur l'icône Plug-in.
• Dans la barre Insertion, sélectionnez Médias et faites glisser l'icône Plug-in dans la fenêtre de
document ou la fenêtre d'affichage de code si vous manipulez le code.
• Choisissez la commande 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 348.
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 du fichier dans le champ Lien.
3
Entrez la largeur et la hauteur en saisissant les valeurs dans les champs appropriés ou en
redimensionnant l'espace réservé du 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.
Par exemple, essayez une largeur de 144 pixels et une hauteur de 60 pixels pour observer
comment le lecteur audio apparaît dans Navigator et dans Internet Explorer.
Insertion du contenu d'un plug-in Netscape Navigator
Les plug-ins améliorent les fonctionnalités de Netscape Navigator, car ils permettent d'afficher du
contenu multimédia dans divers formats. Les plug-ins permettent de lire et d'afficher les fichiers
de contenu sur votre site Web. 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.
Après avoir créé le contenu d'un plug-in Navigator, vous pouvez insérer ce contenu dans un
document HTML à l'aide de Dreamweaver. Dreamweaver utilise la balise embed pour indiquer la
référence au fichier de contenu.
Pour insérer le contenu d'un plug-in 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 barre Insertion, sélectionnez Médias et cliquez sur l'icône Plug-in.
348 Chapitre 22
• Choisissez la commande 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
Navigator.
Lecture de plug-ins dans la fenêtre de document
Vous pouvez afficher un aperçu des animations qui font appel aux plug-ins Navigator (c'est-à-dire
des éléments qui utilisent la balise embed), directement dans la fenêtre de document en mode
Création (les animations faisant appel aux contrôles ActiveX ne peuvent pas être prévisualisées
dans la fenêtre de document). Vous pouvez lire simultanément tous les éléments des plug-ins pour
savoir comment l'utilisateur verra la page ou les lire individuellement pour vous assurer que vous
avez incorporé le bon élément multimédia.
Pour lire des animations, les plug-ins adéquats doivent être installés sur votre ordinateur. Au
démarrage, Dreamweaver recherche automatiquement tous les plug-ins installés, d'abord dans le
dossier Configuration/Plugins, puis dans les dossiers de plug-ins de tous les navigateurs installés.
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
Lisez le contenu du plug-in :
• 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 Lecture dans 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 courant. 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 Arrêter dans l'inspecteur de propriétés.
Vous pouvez également choisir la commande Affichage > Plug-ins > Arrêter tout pour arrêter la
lecture du contenu de tous les plug-ins.
Résolution des problèmes des plug-ins 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
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 disposez de suffisamment de mémoire (et, sur Macintosh, que suffisamment
de mémoire est allouée à Dreamweaver). Certains plug-ins nécessitent de 2 à 5 Mo de mémoire
supplémentaire pour fonctionner.
Insertion d'éléments multimédia 349
Insertion d'un contrôle ActiveX
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.
Dreamweaver utilise la balise object pour marquer l'emplacement sur la page où afficher le
contrôle ActiveX et pour passer des paramètres à ce dernier.
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 barre Insertion, sélectionnez Médias et cliquez sur l'icône ActiveX.
• Dans la barre Insertion, sélectionnez Médias et faites glisser l'icône ActiveX dans la fenêtre de
document ou la fenêtre d'affichage de code si vous manipulez le code.
• Choisissez la commande Insertion > Médias > ActiveX.
Une icône indique l'emplacement de la page où apparaîtra le contrôle ActiveX dans Internet
Explorer.
Insertion d'une applet Java
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.
Après avoir créé une applet Java, vous pouvez l'insérer dans un document HTML à l'aide de
Dreamweaver. Dreamweaver utilise la balise applet pour indiquer la référence au fichier de
l'applet.
Pour insérer une applet Java :
1
Dans la fenêtre de document (mode Création), 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 barre Insertion, sélectionnez Médias et cliquez sur l'icône Applet.
• Dans la barre Insertion, sélectionnez Médias et faites glisser l'icône Applet dans la fenêtre de
document ou la fenêtre d'affichage de code si vous manipulez le code.
• Choisissez la commande Insertion > Médias > Applet. Vous pouvez également faire glisser
l'icône Applet vers la fenêtre de document.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier contenant une applet Java.
Utilisation de comportements pour contrôler les objets
multimédia
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 378 ).
350 Chapitre 22
Jouer le son 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 « Jouer le son », page 386).
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. Ceci 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 377.
Insertion d'éléments multimédia 351
352 Chapitre 22
CHAPITRE 23
Dreamweaver et 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. Macromedia
Dreamweaver MX inclut des outils qui le rendent accessible et vous permettent de créer un contenu
accessible.
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.
Le nombre des personnes handicapées accédant au Web étant en constante augmentation, il devient
de plus en plus important que les développeurs s'assurent que leurs produits et sites Web sont
accessibles à tous les utilisateurs potentiels. C'est pourquoi le gouvernement américain et d'autres
institutions ont mis au point une législation et des directives afin de garantir que les développeurs
produisent un contenu accessible. Pour en savoir plus sur deux de ces importantes initiatives,
consultez le site de la World Wide Web Consortium Web Accessibility Initiative (http://
www.w3.org/wai) et la Section 508 du Federal Rehabilitation Act (http://www.section508.gov).
Si vous êtes un concepteur Web Dreamweaver et avez besoin d'utiliser les fonctions d'accessibilité de
Dreamweaver, ce chapitre vous informe sur la prise en charge des lecteurs d'écran, la navigation avec
le clavier et la prise en charge des fonctions d'accessibilité de votre système d'exploitation dans
Dreamweaver.
Si vous êtes un concepteur Web Dreamweaver et avez besoin de créer un contenu accessible, ce
chapitre vous informe sur les boîtes de dialogue Accessibilité de Dreamweaver et sur les moyens de
tester l'accessibilité de votre site.
Pour concevoir des sites Web accessibles, vous devez comprendre les exigences liées à l'accessibilité et
devez prendre plusieurs décisions faisant appel à votre subjectivité. Dreamweaver vous aide à créer
des sites Web accessibles. Par exemple, Dreamweaver vous permet d'ajouter des équivalents textuels
pour les graphiques ou vous rappelle de le faire si vous l'oubliez. Néanmoins, aucun outil de création
Web ne peut automatiser entièrement le processus de développement. 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.
Ce chapitre couvre les sujets suivants :
• « Utilisation des fonctions d'accessibilité de Dreamweaver », page 354
• « Création de pages Web accessibles », page 357
• « Test de l'accessibilité de votre site Web », page 364
353
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.
Remarque : les modes Espace de travail Dreamweaver 4 et Espace de travail Dreamweaver 5 prennent tous les
deux en charge les fonctions d'accessibilité de Dreamweaver, mais il est recommandé d'utiliser le mode Espace de
travail Dreamweaver 4. Pour changer de mode, choisissez Edition > Préférences ou Dreamweaver >
Préférences (Mac OS X), puis sélectionnez la catégorie Général. Cliquez sur le bouton Changer d'espace de
travail puis sélectionnez Espace de travail Dreamweaver 4 et enfin cliquez sur OK.
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.
Dreamweaver prend en charge les lecteurs d'écran JAWS pour Windows, de Freedom Scientific
(http://www.freedomscientific.com) et Window Eyes, de GW Micro (http://www.gwmicro.com).
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.
Utilisation des fonctions d'accessibilité du système d'exploitation
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 :
• 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.
Utilisation du clavier pour naviguer dans Dreamweaver
Vous pouvez utiliser le clavier pour parcourir les panneaux flottants, l'inspecteur de propriétés, les
boîtes de dialogue, les cadres et les tableaux Dreamweaver sans utiliser de souris.
Cette section contient les rubriques suivantes :
• « Navigation dans les panneaux », page 355
• « Navigation dans l'inspecteur de propriétés », page 355
354 Chapitre 23
• « Navigation dans les boîtes de dialogue », page 356
• « Navigation dans les cadres », page 356
• « Navigation dans les tableaux », page 357
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.
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.
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.
Dreamweaver et accessibilité 355
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.
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.
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.
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.
Une ligne en pointillé indique quel cadre est actif.
3
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.
4
Appuyez sur Alt+Flèche vers le bas pour activer un jeu de cadres enfant ou un seul cadre dans
un jeu de cadres.
5
Lorsqu'un cadre est actif, appuyez sur Alt+Flèche gauche ou droite pour vous déplacer entre les
cadres.
6
Appuyez sur Alt+Flèche vers le bas pour placer le point d'insertion dans la fenêtre de
document.
356 Chapitre 23
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.
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 curseur 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.
Création de pages Web accessibles
Dreamweaver vous aide à créer des pages accessibles au contenu utile pour les lecteurs d'écran et
en conformité avec les directives gouvernementales (voir http://www.section508.gov).
Lorsque vous activez les boîtes de dialogue Accessibilité (voir « Activation des boîtes de dialogue
Accessibilité », page 358), Dreamweaver vous demande d'entrer des attributs d'accessibilité
lorsque vous insérez des éléments de page.
Remarque : pour voir des exemples de pages conçues pour être accessibles, sélectionnez Fichier > Nouveau.
Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Conception de page (Accessibilité) puis
sélectionnez une page dans la liste Conception de page (Accessibilité). Pour plus d'informations, voir « Utilisation
de la boîte de dialogue Nouveau document », page 112.
Développement de contenu pour les lecteurs d'écran
Pour rendre les informations accessibles aux lecteurs d'écran et aux utilisateurs de votre site Web,
Dreamweaver facilite l'ajout d'équivalents textuels pour les éléments graphiques d'une page et
vous permet de marquer les tableaux et les formulaires en HTML à l'attention des lecteurs d'écran
et de toute autre technologie d'assistance.
Par exemple, vous pouvez ajouter une image de produit à votre document et associer une
description de type « Veste garçon rouge taille L ». Lorsque l'image apparaît sur une page pour un
utilisateur souffrant d'un handicap visuel, le lecteur d'écran lit la description pour que l'utilisateur
sache quel produit est affiché sur la page.
Dreamweaver vous invite à ajouter des équivalents textuels pour les éléments graphiques et un
marquage d'accessibilité lorsque vous activez les boîtes de dialogue Accessibilité (voir « Activation
des boîtes de dialogue Accessibilité », page 358).
Dreamweaver et accessibilité 357
Activation des boîtes de dialogue Accessibilité
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 les boîtes de dialogue Accessibilité pour que
Dreamweaver vous invite à spécifier les informations nécessaires pour rendre le contenu
accessible. Ces boîtes de dialogue apparaissent lorsque vous insérez un objet pour lequel vous avez
activé la boîte de dialogue Accessibilité correspondante.
Pour activer les boîtes de dialogue Accessibilité :
1
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X).
La boîte de dialogue Préférences s'affiche.
2
Sélectionnez la catégorie Accessibilité.
La boîte de dialogue Préférences affiche les options d'accessibilité.
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 chaque élément 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 élément dans un
document.
Pour plus d'informations sur l'ajout de contenu accessible à votre site Web, consultez les sections
suivantes :
•
•
•
•
•
« Insertion d’images accessibles », page 359
« Insertion d'objets de formulaire accessibles », page 360
« Insertion de cadres accessibles », page 361
« Insertion d'objets multimédia accessibles », page 362
« Insertion de tableaux accessibles », page 363
358 Chapitre 23
Insertion d’images accessibles
Lorsque vous insérez une image et que vous avez sélectionné l'option Images dans les préférences
d'accessibilité, Dreamweaver vous invite à entrer des informations pour rendre l'image accessible.
Remarque : pour rendre accessibles des espaces réservés pour les images et les images interactives, comme les
images survolées ou les barres de navigation, entrez un texte secondaire lorsque vous insérez l'image. Pour plus
d'informations, voir « Insertion d’images », page 311.
Pour insérer une image accessible :
1
Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez que l'image
apparaisse.
2
Procédez de l'une des manières suivantes :
• Choisissez Insertion > Image.
• Cliquez sur le bouton Image dans l'onglet Commun de la barre Insertion.
• Faites glisser l'icône Image depuis la barre Insertion vers le document.
La boîte de dialogue Source de l'image s'affiche.
3
Tapez le chemin d'accès au fichier d'image ou cliquez sur le bouton Parcourir pour choisir un
fichier.
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. Lorsque vous enregistrez le
document sur le site, Dreamweaver convertit cette référence en indiquant un chemin relatif au
document.
4
Cliquez sur OK.
La boîte de dialogue Attributs d'accessibilité aux balises d'image s'affiche.
5
Entrez des valeurs dans les zones Texte secondaire et Description longue.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Remarque : vous pouvez compléter une seule zone de texte ou les deux, selon vos besoins.
6
Cliquez sur OK.
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
les balises ni les attributs d'accessibilité.
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 :
Dreamweaver et accessibilité 359
• 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 choisissez Modifier le code de la balise.
• Modifiez la valeur Alt dans l'inspecteur de propriétés.
Insertion d'objets de formulaire accessibles
Lorsque vous insérez un objet de formulaire et que vous avez sélectionné l'option Objet de
formulaire dans les préférences d'accessibilité, Dreamweaver vous invite à entrer des informations
pour rendre l'objet de formulaire accessible.
Pour ajouter un objet de formulaire accessible :
1
Dans le document, placez le point d'insertion à l'endroit où vous voulez que le formulaire
apparaisse.
2
Procédez de l'une des manières suivantes pour insérer un objet de formulaire :
• Choisissez Insertion > Objet de formulaire, puis sélectionnez un objet de formulaire à insérer.
• Sélectionnez l'onglet Formulaires dans la barre Insertion, puis cliquez sur un bouton d'objet.
• Sélectionnez l'onglet Formulaires dans la barre Insertion puis faites glisser l'icône appropriée
vers le document.
La boîte de dialogue Attributs d'accessibilité des balises d'entrée 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.
Remarque : si vous cliquez sur Annuler, l'objet de formulaire s'affiche dans le document, mais Dreamweaver ne
lui associe ni les balises ni les attributs d'accessibilité.
5
Si Dreamweaver vous demande si vous voulez insérer une balise de formulaire, cliquez sur Oui.
L'objet de formulaire apparaît dans le document.
Pour modifier les valeurs d'accessibilité d'un objet de formulaire :
1
Dans la fenêtre de document, sélectionnez l'objet.
360 Chapitre 23
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 Contrôle
enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
Pour rendre un objet de formulaire accessible dynamique :
1
Dans la fenêtre de document, sélectionnez l'objet de formulaire que vous voulez rendre
dynamique.
2
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
3
Modifiez les attributs selon vos besoins pour rendre l'objet dynamique.
Remarque : vous ne pouvez pas utiliser le panneau Liaisons pour ajouter un objet de formulaire dynamique
accessible.
Insertion de cadres accessibles
Lorsque vous insérez un jeu de cadres et que vous avez sélectionné l'option Images dans les
préférences d'accessibilité, Dreamweaver vous invite à attribuer un nom à chaque cadre pour le
rendre accessible.
Pour insérer un jeu de cadres accessible :
1
Placez le point d'insertion dans le document.
2
Procédez de l'une des manières suivantes pour insérer un jeu de cadres :
• Choisissez Insertion > Cadres, puis sélectionnez un jeu de cadres.
• Cliquez sur l'onglet Cadres dans la barre Insertion puis cliquez sur le bouton du jeu de cadres
approprié.
• Cliquez sur l'onglet Cadres dans la barre Insertion puis faites glisser l'icône du jeu de cadres
approprié vers le document.
Le jeu de cadres apparaît dans votre document et la boîte de dialogue Attributs d'accessibilité
des balises de cadre s'affiche.
3
Sélectionnez un cadre dans le menu déroulant, puis attribuez-lui un nom.
Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue.
Conseil : choisissez Fenêtre > Autres > Cadres pour voir un diagramme des cadres que vous nommez.
4
Répétez l'étape précédente jusqu'à ce que tous les cadres aient un nom.
Dreamweaver et accessibilité 361
5
Cliquez sur OK.
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 valeurs d'accessibilité d'un cadre :
1
Affichez le mode Code ou passez à un affichage en deux volets pour votre document, si vous
êtes en mode Création.
2
Choisissez Fenêtre > Autres > Cadres pour ouvrir le panneau Cadres.
3
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.
4
Procédez de l'une des manières suivantes :
• Modifiez le code en mode Code.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
Insertion d'objets multimédia accessibles
Lorsque vous insérez un objet multimédia et que vous avez sélectionné l'option Média dans les
préférences d'accessibilité, Dreamweaver vous invite à entrer des informations pour rendre l'objet
multimédia accessible.
Pour insérer un objet multimédia accessible :
1
Placez le point d'insertion dans la fenêtre de document à l'endroit où vous voulez que l'objet
multimédia apparaisse.
2
Procédez de l'une des manières suivantes :
• Choisissez Insertion > Support, puis sélectionnez un élément.
• Cliquez sur l'onglet Média dans la barre Insertion puis cliquez sur un bouton d'objet.
• Cliquez sur l'onglet Média dans la barre Insertion puis faites glisser l'icône appropriée vers le
document.
Une boîte de dialogue Sélectionner un fichier ou Insérer Flash s'affiche.
Remarque : pour les objets Active X, la boîte de dialogue Accessibilité s'affiche. Vous pouvez ignorer l'étape
suivante.
3
Complétez les options de la boîte de dialogue Sélectionner un fichier ou Insérer Flash, puis
cliquez sur OK.
La boîte de dialogue Attributs d'accessibilité des balises d'objet s'affiche.
362 Chapitre 23
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.
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 les balises ni les attributs d'accessibilité.
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 Contrôle
enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
Insertion de tableaux accessibles
Lorsque vous insérez un tableau et que vous avez sélectionné l'option Tableaux dans les
préférences d'accessibilité, Dreamweaver vous invite à attribuer un nom à chaque tableau pour le
rendre accessible.
Pour insérer un tableau accessible :
1
Placez le point d'insertion dans la fenêtre de document à l'endroit où vous voulez que le
tableau apparaisse.
2
Procédez de l'une des manières suivantes :
• Choisissez Insertion > Tableau.
• Cliquez sur le bouton Tableau dans l'onglet Commun de la barre Insertion.
• Faites glisser l'icône Tableau depuis l'onglet Commun de la barre Insertion vers le document.
La boîte de dialogue Insérer un tableau avec des attributs d'accessibilité s'affiche.
Dreamweaver et accessibilité 363
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.
Remarque : si vous cliquez sur Annuler, le tableau n'apparaît pas dans le document.
Pour modifier les valeurs d'accessibilité d'un tableau :
1
Dans la fenêtre de document, sélectionnez le tableau.
2
Procédez de l'une des manières suivantes :
• Modifiez les attributs du tableau en mode Code.
• Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle
enfoncée (Macintosh), puis choisissez Modifier le code de la balise.
Test de l'accessibilité de votre site Web
La meilleure façon de vous assurer que votre site est accessible à tous les utilisateurs est de
concevoir votre site en vous conformant aux directives d'accessibilité de la Section 508 du
Rehabilitation Act de 1998. Puis, utilisez l'option Rapports de Dreamweaver pour vérifier la mise
en œuvre de ces directives dans votre site.
Vous pouvez exécuter un rapport d'accessibilité sur le document en cours, les fichiers sélectionnés,
un dossier ou un site entier.
Pour exécuter un rapport d'accessibilité sur le document en cours :
1
Ouvrez le document à vérifier.
2
Choisissez Fichier > Vérifier la page > Vérifier l'accessibilité.
Les résultats du rapport apparaissent dans le panneau Rapports du site (dans le groupe de
panneaux Résultats).
Pour exécuter un rapport d'accessibilité sur le contenu sélectionné :
1
Procédez de l'une des manières suivantes pour sélectionner le contenu que vous voulez vérifier :
• Ouvrez un document.
• Sélectionnez les fichiers dans le panneau Site.
• Sélectionnez un site à partir du menu déroulant Site du panneau Site.
Remarque : pour exécuter un rapport d'accessibilité sur un dossier, vous n'avez pas besoin de sélectionner le
dossier tout de suite ; vous sélectionnerez le dossier dans la boîte de dialogue Rapports.
364 Chapitre 23
2
Choisissez Site > Rapports.
La boîte de dialogue Rapports s'affiche.
3
Sélectionnez le contenu sur lequel vous souhaitez exécuter le rapport dans le menu déroulant
Rapport puis sélectionnez Accessibilité.
Remarque : si vous sélectionnez Dossier dans le menu déroulant Rapport, cliquez sur Parcourir pour
sélectionner un dossier.
4
Cliquez sur le bouton Exécuter.
Les résultats du rapport apparaissent dans le panneau Rapports du site (dans le groupe de
panneaux Résultats).
Pour voir et corriger les problèmes signalés :
1
Exécutez un rapport d'accessibilité sur le contenu du site Web sélectionné, si ce n'est pas déjà
fait.
Les résultats du rapport apparaissent dans le panneau Rapports du site (dans le groupe de
panneaux Résultats). Sélectionnez n'importe quelle ligne du rapport et cliquez sur le bouton
Plus d'infos sur le côté gauche du panneau Rapports du site pour voir une description du
problème et des suggestions pour le résoudre.
Les informations s'affichent dans le panneau Référence (dans le groupe de panneaux Code).
2
Double-cliquez sur une ligne quelconque du rapport pour afficher le code correspondant dans
la fenêtre de document.
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.
Dreamweaver et accessibilité 365
3
Dans la fenêtre de document et en mode Code, modifiez ou ajoutez des attributs aux balises
appropriées pour mettre votre contenu en conformité avec les directives d'accessibilité.
Si vous souhaitez utiliser l'éditeur de balises pour vous aider dans le processus de codage,
sélectionnez Code, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la
touche Contrôle enfoncée (Macintosh) et choisissez Editeur de balises. Pour plus
d'informations sur les balises et les attributs, sélectionnez Référence HTML O’Reilly dans le
panneau Référence (dans le groupe de panneaux Code) puis sélectionnez une balise.
Pour enregistrer un rapport d'accessibilité :
Cliquez sur le bouton Enregistrer sur le côté gauche du panneau Rapports du site.
A propos de cette fonction
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 http://www.usablenet.com.
366 Chapitre 23
La plupart des pages Web se composent uniquement de
texte et d'images, et ne contiennent aucun élément
interactif. Utilisez des comportements JavaScript et des
scénarios d'animation de calque dans Dreamweaver pour
créer des éléments interactifs et des animations qui
éveilleront l'intérêt de vos visiteurs.
Cette partie du manuel contient les chapitres suivants :
• Chapitre 24, « Utilisation des comportements
JavaScript »
• Chapitre 25, « Animation de calques »
Partie VI
Partie VI
Utilisation de
comportements et
d'animations
CHAPITRE 24
Utilisation des comportements JavaScript
Les comportements Dreamweaver insèrent du code JavaScript dans des documents pour
permettre aux utilisateurs d'interagir avec une page Web afin 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 Shockwave. Les actions proposées dans Macromedia 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 lorsque quelqu'un 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.
Dreamweaver MX propose 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 374). Vous pouvez également écrire vos propres actions de
comportement si vous maîtrisez le langage JavaScript. Pour plus d'informations sur la création de
comportements, voir Extension de Dreamweaver.
369
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 370
« A propos des événements », page 370
« Application d'un comportement », page 371
« A propos des comportements et du texte », page 372
« Association d'un comportement à un scénario », page 373
« Modification d'un comportement », page 373
« Actualisation d'un comportement », page 374
« Création de nouvelles actions », page 374
« Téléchargement et installation de comportements créés par des développeurs tiers », page 374
« Utilisation des actions de comportement livrées avec Dreamweaver », page 375
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 Comportements, sélectionnez 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 un 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.
Pour obtenir les noms et descriptions des événements fournis par chacun des navigateurs, voir le
centre de support Dreamweaverà l'adresse http://www.macromedia.com/fr/support/.
370 Chapitre 24
La plupart des événements ne peuvent être utilisés qu'avec certains éléments de la page. 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 reportez-vous au menu contextuel Evénements dans le panneau Comportements. 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 pour chaque élément davantage d'événements 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 « A
propos des comportements et du texte », page 372.
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 373.
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.
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 en cours. Par
exemple, l'action Jouer le scénario s'affiche en grisé si le document ne possède pas de scénario
et l'action Contrôler Shockwave ou Flash apparaît en grisé si le document ne contient aucune
animation Shockwave ou Flash. 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 pas les navigateurs moins
récents. Voir « Utilisation des actions de comportement livrées avec Dreamweaver », page 375.
Utilisation des comportements JavaScript 371
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).
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.
Certains événements peuvent apparaître en grisé si les objets pertinents n'existent pas encore
dans la page ou si l'objet sélectionné ne peut pas recevoir d'événement. 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
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.
onMouseOver)
A propos des comportements et 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 ce
texte).
Pour associer un comportement au texte sélectionné :
1
Dans l'inspecteur de propriétés, entrez javascript:; dans le champ Lien. N'oubliez pas les
deux points (:) et le point-virgule (;).
Remarque : vous pouvez alternativement utiliser un signe dièse (#) dans le champ 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
Choisissez 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 de détails, voir « Application d'un
comportement », page 371.
Pour modifier l'apparence du texte lié de sorte qu'il ne ressemble plus à un lien :
1
Choisissez Affichage > Code pour activer le mode Affichage de code de la fenêtre de
document.
2
Trouvez le lien.
372 Chapitre 24
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).
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 de détails, voir « Insertion et
mise en forme de texte », page 283.
Association d'un comportement à un scénario
Pour déclencher un comportement à une certaine image du scénario (plutôt que par interaction
d'un utilisateur), placez le comportement dans le scénario (pour plus d'informations sur la
création d'un scénario, voir « Animation de calques », page 413). Par exemple, vous pouvez
diffuser un son à l'image 15 d'un scénario.
Un seul type d'événement peut déclencher une action dans un scénario : l'arrivée de l'animation à
un certain numéro d'image (un événement onFrame7, par exemple).
Le comportement peut avoir une influence sur n'importe quel objet de la page, pas seulement sur
ceux du scénario. Visualisez le scénario dans un navigateur pour voir le fonctionnement du
comportement. Vous ne pouvez pas prévisualiser les comportements dans Dreamweaver.
Pour placer un comportement dans un scénario :
1
Cliquez sur une image dans le canal Comportements du panneau Scénarios.
2
Utilisez le panneau Comportements pour choisir l'action à exécuter sur cette image.
L'action apparaît dans le panneau Comportements, avec un événement indiquant le numéro
d'image à laquelle l'action doit être déclenchée. Le signe moins (–) apparaît dans le canal
Comportements de l'image du scénario.
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
Choisissez parmi les options 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.
Utilisation des comportements JavaScript 373
• 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, lorsque vous actualisez une occurrence d'un
comportement dans une page (en observant la procédure suivante), toutes les autres occurrences
du même comportement de cette page sont également actualisées. Les comportements créés avec
Dreamweaver 3 fonctionnent dans Dreamweaver 4 sans devoir être modifiés.
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.
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.
Pour télécharger et installer de nouveaux comportements à partir du site d'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 de détails, voir « Ajout d'extensions dans Dreamweaver », page 55.
374 Chapitre 24
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 Navigator 3.0). La
plupart d'entre eux é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.
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 choisissez 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.
Utilisation des comportements JavaScript 375
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 Microsoft Internet Explorer (IE) 4.0 que dans IE 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 choisissez 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 le champ 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 de la propriété (attention, les propriétés JavaScript tiennent compte des
majuscules et minuscules).
6
Indiquez la nouvelle valeur de la propriété dans le champ 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 la marque et la
version de leur navigateur. Par exemple, vous pouvez décider que les utilisateurs de Netscape
Navigator 4.0 ou de versions ultérieures iront sur telle page, que les utilisateurs de Microsoft
Internet Explorer 4.0 ou de versions ultérieures iront sur telle autre, et que les utilisateurs d'un
autre type de navigateur resteront sur la page courante.
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 href="javascript:;">) pour que l'action détermine à quelle page le lien renvoie, selon la
marque et la version du navigateur de l'utilisateur.
376 Chapitre 24
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 choisissez Vérifier le navigateur dans le menu contextuel
Actions.
3
Indiquez comment vous souhaitez distinguer les visiteurs : par marque 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 ?
4
Spécifiez une version de Netscape Navigator.
5
Dans les menus contextuels adjacents, choisissez les options respectives pour le cas où la version
de Netscape Navigator est celle que vous avez spécifiée (ou une version plus récente) et pour le
cas contraire.
Les options sont Aller à l'URL, Aller à l'URL sec. et Rester sur cette page.
6
Spécifiez une version de Microsoft Internet Explorer.
7
Dans les menus contextuels adjacents, choisissez les options respectives pour le cas où la version
d'Internet Explorer est celle que vous avez spécifiée (ou une version plus récente) et pour le cas
contraire.
Les options sont Aller à l'URL, Aller à l'URL sec. et Rester sur cette page.
8
Dans le menu déroulant Autres navigateurs, choisissez l'action qui sera exécutée si le navigateur
n'est ni Netscape Navigator, ni Microsoft Internet Explorer. (par exemple, l'utilisateur peut
utiliser un navigateur basé sur du texte tel que Lynx).
La meilleure option est Rester sur cette page pour les navigateurs autres que Navigator et IE,
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 les chemins et les noms de fichier de l'URL et de l'URL secondaire dans les champs de
texte au 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.
Utilisation des comportements JavaScript 377
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 IE 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 le champ adjacent.
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 l'entrée de menu ? (Aide) > A
propos des plug-ins. Sur Macintosh, choisissez A propos des plug-ins dans le menu Pomme).
4
Dans le champ 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 le champ Sinon, aller à l'URL, indiquez une autre URL pour les utilisateurs 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 le champ 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 ».
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 action pour diffuser, arrêter ou rembobiner une animation Shockwave ou Flash ou
pour aller à une image précise de cette animation.
378 Chapitre 24
Pour utiliser l'action Contrôler Shockwave ou Flash :
1
Choisissez, selon le cas, Insertion > Médias > Shockwave ou Insertion > Médias > Flash pour
insérer une animation Shockwave ou Flash.
2
Choisissez Fenêtre > Propriétés et entrez un nom pour l'animation dans le champ supérieur le
plus à 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.
3
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.
4
Ouvrez le panneau Comportements (Fenêtre > Comportements).
5
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.
6
Choisissez une animation dans le menu déroulant Animation.
Dreamweaver répertorie automatiquement les noms de toutes les animations Shockwave et
Flash du document courant. (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).
7
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.
8
Cliquez sur OK.
9
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.
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.
Utilisation des comportements JavaScript 379
Pour utiliser l'action Déplacement de calque :
1
Choisissez Insertion > Calque ou cliquez sur le bouton Dessiner un calque de la barre
Insertion, puis dessinez un calque dans le mode Création de la fenêtre de document.
2
Sélectionnez la balise body en cliquant sur <body> dans le sélecteur de balises situé au bas de la
fenêtre de document.
3
Ouvrez le panneau Comportements.
4
Cliquez sur le bouton plus (+) et choisissez l'action 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 IE 4.0 dans le menu déroulant Afficher les événements pour.
5
Dans le menu déroulant Calque, sélectionnez le calque que vous voulez rendre déplaçable.
6
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.
7
Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans
les champs Haut, Bas, Gauche et Droite.
Ces valeurs sont relatives à la position de départ du calque. Pour contraindre un mouvement à
l'intérieur d'une zone rectangulaire, indiquez des valeurs positives dans les quatre champs. 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.
8
Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les champs 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 champs 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 champs avec les coordonnées
actuelles du calque.
9
Entrez une valeur (exprimée en pixels) dans le champ Aligner si dans pour déterminer la
distance minimale à laquelle l'utilisateur doit approcher le calque de la cible pour que le calque
soit aimanté par 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 pendant qu'il est déplacé
et déclencher une action lorsqu'il est déposé, cliquez sur l'onglet Avancé.
380 Chapitre 24
11
Pour spécifier que l'utilisateur doit cliquer dans une zone particulière du calque pour pouvoir le
déplacer, choisissez 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 le
champ 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 un champ texte.
13
Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateLayerPos())
dans le second champ 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
Remarque : les informations fournies ici sont destinées uniquement aux programmeurs JavaScript expérimentés.
Utilisation des comportements JavaScript 381
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 é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. L'utilisation que vous faites de la valeur de
MM_UPDOWN ou MM_LEFTRIGHT a pour seules limites votre imagination... et votre maîtrise de
JavaScript.
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 (cela peut se produire si vous avez utilisé l'action Déplacement de calque pour
créer un puzzle de photos, car la souris survolera 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
effectuer cette opération à partir du panneau Site dans Dreamweaver ou dans l'Explorateur
Windows ou le Finder de Macintosh).
2
Choisissez Edition > Rechercher.
3
Sélectionnez Source HTML dans le menu déroulant Rechercher.
4
Tapez (!curDrag) dans le champ texte adjacent.
5
Cliquez sur Rechercher 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 ;
382 Chapitre 24
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;
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. Elle peut également être appelée dans un scénario pour ouvrir une nouvelle page
après un délai spécifié.
Pour utiliser l'action Atteindre l'URL :
1
Sélectionnez un objet et ouvrez le panneau Comportements.
2
Cliquez sur le bouton plus (+) et choisissez 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 chemin et le nom du
fichier recherché dans le champ 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 « Insertion d'un menu de reroutage », page 439.
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
fenêtre dans laquelle s'ouvrent ces fichiers, en double-cliquant sur une action de Menu de
reroutage existante dans le panneau Comportements.
Utilisation des comportements JavaScript 383
• 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. Voir « Création de menus déroulants », page 628 pour plus de
détails.
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 avoir déjà créé 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 de reroutage 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, choisissez le menu qui activera le
bouton Aller.
4
Cliquez sur OK.
Ouvrir la fenêtre Navigateur
Utilisez l'action Ouvrir une fenêtre du 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.
384 Chapitre 24
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.
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 choisissez 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 :
Largeur de fenêtre
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'adresse
est la barre d'outils qui contient le champ 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).
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 menus
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).
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é.
Poignées de redimensionnement
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.
Nom de la fenêtre
5
Cliquez sur OK.
Utilisation des comportements JavaScript 385
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.
Jouer 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.
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 plug-ins 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 Jouer le son :
1
Sélectionnez un objet et ouvrez le panneau Comportements.
2
Cliquez sur le bouton plus (+) et choisissez Jouer le son dans le menu contextuel Actions.
3
Cliquez sur Parcourir pour sélectionner un fichier son ou tapez le chemin et le nom de ce
fichier dans le champ Jouer 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 de détails, voir « Ouvrir la fenêtre Navigateur », page 384.
Pour utiliser l'action Message contextuel :
1
Sélectionnez un objet et ouvrez le panneau Comportements.
2
Cliquez sur le bouton plus (+) et choisissez l'action Message contextuel dans le menu
contextuel Actions.
3
Indiquez votre message dans le champ Message.
4
Cliquez sur OK.
386 Chapitre 24
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.
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 scénario, 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 Intervertir 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 Intervertir 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 Intervertir 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 choisissez l'action 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 le champ 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 prochaine.
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 442.
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.
Utilisation des comportements JavaScript 387
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, lors d'un clic sur un élément d'une barre de navigation, tous les autres éléments de celle-ci
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 ».
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, choisissez un état d'image. Pour
plus d'informations sur les états d'image, voir « Création de barres de navigation », page 441.
• Choisissez Image Abaissée si vous désirez qu'une autre image change d'aspect après que
l'utilisateur a cliqué 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.
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 chemin d'accès
et le nom du fichier d'image dans le champ 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 le champ 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.
388 Chapitre 24
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 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 271.
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 choisissez l'action Texte d'un cadre dans le menu contextuel
Actions.
3
Dans la boîte de dialogue qui s'affiche, choisissez le cadre cible dans le menu déroulant Cadre.
4
Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section
body du cadre cible.
5
Tapez un message dans le champ Nouveau HTML et 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 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. Vous pouvez formater le
contenu en incorporant des balises HTML dans le champ 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 « Création de calques sur une page », page 403.
2
Dans l'inspecteur de propriétés, tapez le nom du calque.
Utilisation des comportements JavaScript 389
Pour associer une action Texte du calque :
1
Sélectionnez un objet et ouvrez le panneau Comportements.
2
Cliquez sur le bouton plus (+) et choisissez l'action Texte d'un calque dans le menu contextuel
Actions.
3
Dans la boîte de dialogue qui s'affiche, choisissez le cadre cible dans le menu déroulant Calque.
4
Tapez un message dans le champ Nouveau HTML 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.
Texte de la barre d'état
L'action 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 ignorent les
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 Texte de la barre d'état :
1
Sélectionnez un objet et ouvrez le panneau Comportements.
2
Cliquez sur le bouton plus (+) et choisissez l'action Texte de la barre d'état dans le menu
contextuel Actions.
3
Dans la boîte de dialogue Texte de la barre d'état, tapez un message dans le champ 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é.
390 Chapitre 24
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 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 interactifs », page 613.
2
Dans l'inspecteur de propriétés, tapez le nom du champ texte. Veillez à utilisez 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 choisissez l'action Texte d'un champ texte dans le menu
contextuel.
3
Dans la boîte de dialogue qui s'affiche, choisissez le champ texte cible dans le menu déroulant
Champ texte.
4
Tapez le nouveau contenu dans le champ 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 Insertion, puis
dessinez un calque dans la fenêtre de document.
Répétez cette étape pour créer des calques supplémentaires.
2
Cliquez n'importe où dans la fenêtre de document pour désélectionner le calque, puis ouvrez le
panneau Comportements.
Utilisation des comportements JavaScript 391
3
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 IE 4.0 dans le menu déroulant Afficher les événements pour.
4
Sélectionnez le calque dont vous voulez modifier la visibilité dans la liste Calques nommés.
5
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.
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 Insertion,
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 et nommez-le chargement, en utilisant le champ le plus à
gauche dans l'inspecteur de propriétés de 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.
392 Chapitre 24
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.
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 ; choisissez
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 dans Fireworks MX, voir Chapitre 21, « Intégration de Dreamweaver à
d'autres applications, », page 321.
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.
Utilisation des comportements JavaScript 393
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 :
permet de définir le nom, la structure, l'URL et la cible des éléments de menu
individuels.
Sommaire
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.
Apparence
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 :
Dans le champ Texte, sélectionnez le texte par défaut (Nouvel élément), puis tapez le texte qui
doit 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
le champ Lien, tapez le chemin d'accès au fichier ou cliquez sur l'icône 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.
394 Chapitre 24
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 Apparence 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 Apparence 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 Apparence, choisissez Menu vertical ou
Menu horizontal pour définir l'orientation du menu.
2
Définissez les options de formatage du texte :
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.
Utilisation des comportements JavaScript 395
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 :
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.
Largeur 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.
Hauteur des cellules
Marge entre les cellules
indique le nombre de pixels qui sépare le contenu d'une cellule et ses
limites.
Espacement entre les cellules
Retrait du texte
indique le nombre de pixels qui sépare des cellules adjacentes.
permet de spécifier le retrait du texte en pixels dans la cellule.
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.
Délai de menu
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.
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) ou 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.
396 Chapitre 24
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
Le cas échéant, ouvrez le panneau Comportements (Maj+F3) 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 393.
Intervertir 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 Intervertir 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 Insertion pour insérer
une image.
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 Intervertir 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 Intervertir 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 choisissez Intervertir 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 à.
Utilisation des comportements JavaScript 397
8
Répétez les étapes 6 et 7 si vous désirez ajouter d'autres images à modifier. Utilisez la même
action Intervertir 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 Intervertir une image à
un objet ; en principe, si vous avez laissé cette option activée en associant l'action Intervertir une
image, vous n'avez pas besoin de l'utiliser manuellement.
Atteindre l'image du scénario
Cette action amène la « tête de lecture » sur l'image indiquée. Vous pouvez l'utiliser dans le canal
Comportements du panneau Scénarios pour reproduire en boucle certaines parties du scénario,
pour créer un lien ou un bouton Rembobiner ou pour permettre à l'utilisateur de passer
directement à d'autres parties de l'animation.
Pour utiliser l'action Atteindre l'image du scénario :
1
Choisissez Fenêtre > Scénarios pour ouvrir le panneau Scénarios. Votre document doit
comporter un scénario.
Si vous ne voyez pas de barres d'animation violettes dans le panneau Scénarios, votre document
ne contient pas de scénario. Voir « Déplacement d'un calque à l'aide d'une animation de
scénario », page 415.
2
Sélectionnez un objet auquel associer le comportement.
Pour associer le comportement à une image du scénario, cliquez sur l'image désirée dans le
canal Comportements.
3
Ouvrez le panneau Comportements
4
Cliquez sur le bouton plus (+) et choisissez Scénarios > Atteindre l'image du scénario dans le
menu contextuel Actions (si cette action s'affiche en grisé, votre document ne contient aucun
scénario).
5
Choisissez un scénario dans le menu déroulant Scénario.
6
Indiquez un numéro d'image dans la zone de texte Atteindre l'image.
398 Chapitre 24
7
Si vous ajoutez cette action au canal de comportement d'un scénario et désirez qu'une partie
du scénario soit exécutée en boucle, indiquez le nombre de répétitions de ce segment dans la
zone de texte Boucle.
Cette zone de texte doit rester vierge si vous n'associez pas l'action Atteindre l'image du
scénario à une image située dans un scénario.
8
Cliquez sur OK.
9
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.
Lire le scénario et Arrêter le scénario
Utilisez les actions Jouer le scénario et Arrêter le scénario pour permettre aux utilisateurs
d'exécuter et d'arrêter un scénario en cliquant sur un lien ou un bouton ou pour démarrer et
arrêter un scénario automatiquement lors du survol d'un objet (lien, image, etc.). L'action Jouer
le scénario est automatiquement associée à la balise body avec l'événement onLoad lorsque vous
sélectionnez l'option Lecture auto dans le panneau Scénarios.
Pour utiliser les actions Jouer le scénario et Arrêter le scénario :
1
Choisissez Fenêtre > Scénarios pour ouvrir le panneau Scénarios. Votre document doit
comporter un scénario.
Si vous ne voyez pas de barres d'animation violettes dans le panneau Scénarios, votre document
ne contient pas de scénario. Voir « Déplacement d'un calque à l'aide d'une animation de
scénario », page 415.
2
Sélectionnez un objet et ouvrez le panneau Comportements.
3
Cliquez sur le bouton plus (+) et choisissez l'action Jouer le scénario ou Arrêter le scénario
dans le menu contextuel.
4
Sélectionnez le scénario concerné ou choisissez d'arrêter tous les scénarios dans le menu
contextuel.
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.
Valider le formulaire
Cette action teste le contenu des champs texte indiqués pour vérifier que l'utilisateur a tapé 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.
Utilisation des comportements JavaScript 399
Pour utiliser l'action Valider le formulaire :
1
Choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire de la barre Insertion
pour insérer un formulaire.
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 Insertion.
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 Nécessaire si le champ doit obligatoirement contenir des données.
7
Dans la zone Accepter, choisissez parmi les 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 Nécessaire 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.
400 Chapitre 24
CHAPITRE 25
Animation de calques
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.
Dreamweaver vous permet de placer et d'animer des calques sans aucun codage JavaScript ou
HTML. 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ère-plan dans un calque, puis placer un deuxième calque contenant du texte avec un
arrière-plan transparent devant ce dernier. Il est aussi possible d'animer des calques avec un fondu
avant et arrière.
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 « Utilisation
de tableaux et de calques pour la mise en forme », page 411. 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.
Remarque : si vous n'avez pas l'habitude d'utiliser des calques et CSS, nous vous recommandons d'utiliser des
tableaux ou le mode Mise en forme pour la mise en page (voir « Présentation de contenu à l'aide de tableaux »,
page 237 et « Le mode de Mise en forme », page 253). Le mode Mise en forme facilite la conception de la mise en
page en utilisant des tableaux comme structure sous-jacente.
Ce chapitre contient les sections suivantes :
•
•
•
•
•
•
•
•
•
« Code HTML pour les calques », page 402
« Création de calques sur une page », page 403
« Imbrication des calques », page 405
« Manipulation des calques », page 406
« Ajout de contenu dans les calques », page 408
« Affichage et définition des propriétés du calque », page 408
« Utilisation de tableaux et de calques pour la mise en forme », page 411
« Animation de calques », page 413
« Animation de calques à l'aide d'actions de comportement », page 421
401
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.
Remarque : deux autres balises peuvent être utilisées pour créer des 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 s'en sert pas pour créer
des calques.
Pour changer la balise par défaut, voir « Définition des préférences de calque », page 404.
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. 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
Insertion > Calque au lieu de dessiner un calque, le code du calque est inséré à l'emplacement du
curseur). 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
« Affichage et définition des propriétés du calque », page 408.
402 Chapitre 25
Création de calques sur une page
Dreamweaver vous permet de créer facilement des calques sur votre page et de les positionner avec
précision.
Pour créer un calque, procédez de l'une des manières suivantes :
• Pour dessiner un calque, cliquez sur le bouton Dessiner un calque de la barre Insertion, puis
faites glisser la souris dans le mode Création de la fenêtre de document.
• Pour insérer le code d'un calque à un endroit particulier du document, placez le curseur dans la
fenêtre de document, puis choisissez Insertion > Calque.
Lorsque les éléments invisibles sont affichés, un marqueur de calque apparaît dans le mode
Création chaque fois que vous placez un calque sur la page. Si les marqueurs de calques ne sont
pas visibles et que vous voulez les afficher, choisissez Affichage > Assistances visuelles >
Eléments invisibles.
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.
Pour dessiner plusieurs calques à la suite :
1
Cliquez sur le bouton Dessiner un calque de la barre Insertion.
2
Dessinez les calques en maintenant la touche Ctrl (Windows) ou Commande (Macintosh)
enfoncée tout en faisant glisser la souris.
Vous pouvez continuer à tracer des calques tant que vous n'avez pas relâché les touches Ctrl ou
Commande.
Rubriques connexes
« Panneau Calques », page 403
« Définition des préférences de calque », page 404
« Comment empêcher le chevauchement des calques », page 412
Panneau Calques
Le panneau Calques vous permet de gérer les calques dans votre document. Pour l'ouvrir,
choisissez Fenêtre > Autres > Calques. 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. Les calques imbriqués sont affichés comme des noms connectés à des
calques parents. Cliquez sur le bouton plus (+) ou moins (-) (Windows) ou sur la flèche
d'agrandissement (Macintosh) pour afficher ou masquer les calques imbriqués.
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.
Animation de calques 403
Rubriques connexes
« Création de calques sur une page », page 403
« Définition des préférences de calque », page 404
« Imbrication des calques », page 405
« Sélection des calques », page 406
« Affichage et définition des propriétés du calque », page 408
« Modification de l'ordre de superposition des calques », page 410
« Modification de la visibilité des calques », page 410
« Comment empêcher le chevauchement des calques », page 412
Définition des préférences de calque
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 ou Dreamweaver MX > Préférences (Mac OS X).
2
Sélectionnez la catégorie Calques.
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 pour fermer la boîte de dialogue.
Rubriques connexes
« Imbrication des calques », page 405
« Sélection des calques », page 406
« Modification de l'ordre de superposition des calques », page 410
« Modification de la visibilité des calques », page 410
« Comment empêcher le chevauchement des calques », page 412
404 Chapitre 25
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.
Pour créer un calque imbriqué, insérez ou dessinez un calque à l'intérieur d'un autre calque ou
utilisez le panneau Calques. Pour forcer l'imbrication automatique 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 de calque »,
page 404.
Remarque : utilisez l'option de correction du redimensionnement dans Netscape lorsque vous employez des
calques imbriqués sur votre page (Commandes > Ajouter/Supprimer correction du redimensionnement dans
Netscape). Si vous n'utilisez pas cette option, les calques changent d'emplacement lorsqu'un visiteur
redimensionne la fenêtre du navigateur dans les versions 4 de Netscape Navigator. Vous pouvez définir une
préférence de sorte que l'option de correction du redimensionnement de Netscape soit toujours insérée ; pour plus
d'informations, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver).
Pour créer un calque imbriqué, procédez de l'une des manières suivantes :
• Pour insérer un calque imbriqué, placez le curseur à l'intérieur d'un calque existant et choisissez
Insertion > Calque.
• Pour dessiner un calque imbriqué, cliquez sur le bouton Dessiner un calque de la barre
Insertion, puis dessinez le calque à l'intérieur d'un autre calque 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 lorsque vous dessinez un calque à l'intérieur d'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 imbriquer un calque existant dans un autre calque en utilisant le panneau Calques :
1
Choisissez Fenêtre > Autres > 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. Relâchez le bouton de la souris lorsque le nom du
calque cible est mis en surbrillance.
Animation de calques 405
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 « Comment empêcher le chevauchement des
calques », page 412).
Sélection des calques
Pour manipuler des calques ou en modifier les propriétés, sélectionnez-en un ou plusieurs.
Pour sélectionner un calque, procédez de l'une des manières suivantes :
• Cliquez sur le nom du calque dans le panneau Calques.
• 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
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.
Pour sélectionner plusieurs calques, procédez de l'une des manières suivantes :
• Appuyez sur la touche Maj tout en cliquant sur plusieurs noms de calques dans le panneau
Calques.
• Appuyez sur la touche Maj tout en cliquant à l'intérieur d'un ou 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.
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 « Comment empêcher le chevauchement
des calques », page 412).
406 Chapitre 25
Pour redimensionner le calque sélectionné, 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.
Remarque : 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 « Alignement des calques sur la grille », page 408.
• Dans l'inspecteur de propriétés, tapez des 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 « Affichage
et définition des propriétés du calque », page 408.
Pour redimensionner plusieurs calques à la fois :
1
Dans le mode Création, sélectionnez au moins deux calques.
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, sous Calques multiples, tapez les valeurs de largeur et de
hauteur. Ces valeurs sont appliquées à tous les calques sélectionnés.
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 « Comment empêcher le chevauchement des
calques », page 412.
Pour déplacer un ou plusieurs calques, 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 « Alignement des calques sur la grille », page 408.
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 que
leur parent, si celui-ci est sélectionné. Pour éviter ce déplacement, n'utilisez pas de calques imbriqués.
Animation de calques 407
Pour aligner plusieurs calques :
1
Sélectionnez les calques.
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).
Alignement des calques sur la grille
Utilisez la grille comme guide visuel pour dessiner, positionner ou redimensionner des calques
dans le mode Création de la fenêtre de document. 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 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 > Afficher la grille.
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.
Ajout de contenu dans les calques
Avant de placer des objets dans un calque, vous devez d'abord y placer le point d'insertion.
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 406.
Affichage et définition des propriétés du calque
Vous pouvez afficher et définir différents attributs d'un calque dans l'inspecteur de propriétés.
Pour afficher toutes les propriétés d'un calque :
1
Sélectionnez un calque. Pour plus d'informations sur la sélection de calques, voir « Sélection
des calques », page 406.
2
Ouvrez l'inspecteur de propriétés en choisissant Fenêtre > Propriétés.
408 Chapitre 25
3
Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans
le coin inférieur droit pour afficher toutes les propriétés.
Pour définir les propriétés du calque avec l'inspecteur de propriétés :
1
Sélectionnez un calque. Pour plus d'informations sur la sélection de calques, voir « Sélection
des calques », page 406.
2
Ouvrez l'inspecteur de propriétés en choisissant Fenêtre > Propriétés.
3
Modifiez les attributs du calque en définissant les propriétés.
Pour plus d'informations, cliquez sur le bouton Aide de l'inspecteur de propriétés.
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. Pour plus d'informations sur la
sélection de calques, voir « Sélection des calques », page 406.
Pour afficher toutes les propriétés de plusieurs calques :
1
Sélectionnez plusieurs calques.
2
Ouvrez l'inspecteur de propriétés en choisissant Fenêtre > Propriétés.
3
Si l'inspecteur de propriétés n'est pas agrandi, cliquez sur la flèche d'agrandissement située dans
le coin inférieur droit pour afficher toutes les propriétés.
Pour définir les propriétés de plusieurs calques en même temps avec l'inspecteur de propriétés :
1
Sélectionnez plusieurs calques.
2
Ouvrez l'inspecteur de propriétés en choisissant Fenêtre > 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
« Affichage et définition des propriétés du calque », page 408
« Sélection des calques », page 406
Animation de calques 409
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 pour chaque calque dans le
panneau Calques ou l'inspecteur de propriétés.
Pour modifier l'ordre de superposition des calques dans le panneau Calques :
Choisissez Fenêtre > Autres > Calques pour ouvrir le panneau Calques. Ensuite, procédez de
l'une des manières suivantes :
• Sélectionnez un calque et faites-le glisser à 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 d'index Z du calque à modifier. Tapez une valeur
supérieure ou inférieure à la valeur existante pour déplacer le calque, selon le cas, vers le bas ou
vers le haut 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 > Autres > Calques pour ouvrir le panneau Calques et afficher l'ordre de
superposition actuel.
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, tapez un chiffre dans le champ 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.
Modification de la 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 > Autres > Calques pour ouvrir le panneau Calques.
2
Cliquez sur l'icône en forme d'œil pour changer sa visibilité.
• Un œil ouvert signifie que le calque est visible.
• Un œil fermé signifie que le calque est invisible.
410 Chapitre 25
• 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 parent constitue le corps du document, ce qui signifie qu'il est
toujours visible). Aucune icône de l'œil n'apparaît lorsque aucune visibilité n'est 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 :
1
Choisissez Fenêtre > Autres > Calques pour ouvrir le panneau Calques.
2
Cliquez sur l'icône en forme d'œil en haut de colonne pour modifier la visibilité de tous les
calques.
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.
Rubrique connexe
Pour plus d'informations sur la définition d'une visibilité par défaut pour les nouveaux calques,
voir « Définition des préférences de calque », page 404.
Utilisation de tableaux et de calques pour la mise en forme
Certains concepteurs de pages Web préfèrent associer calques et tableaux plutôt que d'utiliser des
tableaux et le mode Mise en forme pour créer leur mise en forme (voir « Présentation de contenu
à l'aide de tableaux », page 237 et « Le mode de Mise en forme », page 253). Dreamweaver vous
permet de créer votre mise en forme à l'aide de calques, puis (si vous le souhaitez) de les convertir
en tableaux, les navigateurs de la version 3.0 ne prenant pas en charge les calques. 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.
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.
Vous ne pouvez pas convertir un seul tableau ou calque. Il n'est possible de convertir des calques
en tableaux et vice-versa que pour la totalité d'une page.
Si vous souhaitez générer des fichiers indépendants compatibles avec les navigateurs de version 3.0
à partir d'un fichier comportant des calques, utilisez l'option Convertir du menu Fichier (voir
« Conversion pour assurer la compatibilité avec les navigateurs de versions 3.0 », page 413).
Remarque : la conversion de calques en tableaux peut engendrer la création de tableaux comportant de
nombreuses cellules vides.
Conversion entre 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 plus anciens.
Animation de calques
411
Pour convertir des calques en tableau :
1
Choisissez Modifier > Convertir > Calques en tableau.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez les options désiré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.
Pour convertir des tableaux en calques :
1
Choisissez Modifier > Convertir > Tableaux en calques.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez les options désiré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.
Comment empêcher le chevauchement 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 prévoyez de convertir les calques d'un
document en tableaux pour qu'il y ait compatibilité avec les navigateurs 3.0, utilisez l'option
Empêcher le chevauchement afin que le déplacement et le positionnement des calques soient
restreints et qu'ainsi les calques ne se chevauchent pas.
Pour empêcher le chevauchement de calques, procédez de l'une des manières suivantes :
• Sélectionnez l'option Empêcher le chevauchement dans le panneau Calques.
• Choisissez Modifier > Réorganiser > Empêcher le chevauchement des calques.
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.
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.
412 Chapitre 25
Conversion pour assurer la compatibilité avec les navigateurs de versions 3.0
Vous pouvez convertir une page qui utilise des calques ou des styles CSS de sorte qu'elle utilise des
tableaux et balises HTML et soit compatible avec les navigateurs de version 3.0. Dreamweaver
crée un document converti indépendant, tout en préservant le document d'origine.
En général, ces conversions ne doivent être effectuées que lorsque vous êtes totalement satisfait de
votre fichier d'origine, car vous devrez répéter l'opération de conversion chaque fois que vous
modifierez le fichier d'origine.
Pour convertir un fichier destiné aux navigateurs 3.0 :
1
Choisissez Fichier > Convertir > Compatible avec les navigateurs 3.0.
2
Dans la boîte de dialogue qui s'affiche, choisissez la conversion des calques en tableaux, des
styles CSS en balises HTML (style des caractères) ou les deux.
3
Cliquez sur OK.
Dreamweaver ouvre le fichier converti dans une nouvelle fenêtre sans titre. Si vous avez
sélectionné Convertir les calques en tableaux ou Les deux, tous les calques sont remplacés par un
seul tableau qui préserve le positionnement de l'original.
Remarque : ni les calques qui se chevauchent, ni ceux qui se trouvent en dehors de la page (à gauche ou en haut)
ne peuvent être convertis.
Si vous avez sélectionné Convertir les styles CSS en balises HTML ou Les deux, la balise CSS est
remplacée, lorsque cela est possible, par des styles de caractères HTML. Tout style CSS qui ne
peut pas être converti en HTML est supprimé. Voir « Tableau de conversion de styles CSS en
balises HTML », page 307 pour plus d'informations sur les styles qui sont convertis et ceux qui
sont supprimés.
Si un scénario anime des calques, il est supprimé. Un scénario non associé aux calques (par
exemple, comportements ou modifications sur le fichier source d'une image) continue d'être
exécuté de la manière préalablement spécifiée. Le scénario est automatiquement réinitialisé à la
première image. Pour plus d'informations sur les scénarios, voir « Déplacement d'un calque à
l'aide d'une animation de scénario », page 415.
Animation de calques
Le terme HTML dynamique, ou DHTML, se réfère à l'association de HTML avec un langage de
script qui vous permet de changer le style ou le positionnement des propriétés des éléments
HTML. Dans Dreamweaver, les scénarios utilisent un HTML dynamique pour modifier les
propriétés des calques et des images au fil du temps. Utilisez les scénarios pour créer des
animations ne nécessitant pas de contrôles ActiveX, d'applets Java ni de plug-ins (mais nécessitant
JavaScript).
Remarque : le terme dynamique peut avoir plusieurs significations suivant les contextes Web. Ne confondez pas
HTML dynamique avec l'idée d'une page Web dynamique, qui correspond à une page Web générée de manière
dynamique par un code côté serveur avant d'être servie à un visiteur. Pour plus d'informations sur la création de
pages dynamiques, voir Chapitre 30, « Conception de pages dynamiques dans Dreamweaver, » à la page 515.
Les scénarios vous permettent de changer la position, la taille, la visibilité et l'ordre de
superposition d'un calque (seules les versions 4.0 et ultérieures des navigateurs prennent en charge
les fonctions de calque des scénarios). Ils sont également pratiques pour d'autres actions à
entreprendre après les chargements de pages. Par exemple, les scénarios peuvent modifier le fichier
source d'une balise d'image afin que différentes images apparaissent sur la page au fil du temps.
Animation de calques 413
Pour visualiser le code JavaScript généré par le scénario, ouvrez la fenêtre de document en mode
Code. Le code du scénario se trouve dans la fonction MM_initTimelines, à l'intérieur d'une
balise script, dans la section head du document.
Lorsque vous modifiez le code HTML d'un document qui contient des scénarios, veillez à ne pas
déplacer, renommer ou supprimer des éléments auxquels le scénario fait référence.
Utilisation du panneau Scénarios
Le panneau Scénario indique la manière dont les propriétés des calques et des images changent au
fil du temps. Choisissez Fenêtre > Autres > Scénarios pour ouvrir le panneau Scénarios.
Menu contextuel Scénario
Tête de lecture
Numéros d'image
Canal de comportements
Images-clés
Canal d'animation
Barre d'animation
Le menu déroulant Scénario indique
le scénario du document actuellement affiché dans le
panneau Scénarios.
La tête de lecture indique l'« image » du scénario qui est actuellement affichée dans la fenêtre de
document.
Les numéros d'image indiquent la numérotation séquentielle des images. Le numéro qui apparaît
entre les boutons Retour et Lecture indique l'image en cours. Vous pouvez contrôler la durée de
l'animation en définissant le nombre total d'images et le nombre d'images par seconde (i/s). La
configuration par défaut (15 images/s) est une bonne vitesse moyenne pour la plupart des
navigateurs qui sont exécutés sur des ordinateurs Windows et Macintosh courants.
Remarque : des vitesses supérieures n'améliorent pas forcément les performances. Les navigateurs lisent toujours
toutes les images de l'animation, même s'ils ne peuvent pas soutenir la cadence indiquée. La cadence d'image n'est
pas prise en compte lorsqu'elle est supérieure à celle que le navigateur peut gérer.
Le menu contextuel
contient différentes commandes liées au scénario.
Le canal de comportements contient les comportements
qui doivent être exécutés avec une image
particulière du scénario.
indiquent la durée de l'animation de chaque objet. Une seule ligne peut
comprendre plusieurs barres représentant différents objets. Un objet placé à une image donnée ne
peut pas être contrôlé par plusieurs barres.
Les barres d'animation
414 Chapitre 25
sont des images dans lesquelles vous avez spécifié les propriétés (telles que la
position) de l'objet. Dreamweaver calcule les valeurs intermédiaires pour les images situées entre
les images-clés. De petits cercles signalent les images-clés.
Les images-clés
Canaux d'animation
affichent les barres permettant d'animer les calques et les images.
Options de lecture
Voici les options de lecture pour l'affichage de l'animation.
Rembobiner
amène la tête de lecture à la première image du scénario.
Retour déplace la tête de lecture d'une image vers la gauche. Cliquez sur Retour en maintenant le
bouton de la souris enfoncé pour jouer le scénario en sens inverse.
Lecture déplace la tête de lecture d'une image vers la droite. Cliquez sur Lecture en maintenant le
bouton de la souris enfoncé pour jouer le scénario en continu.
entraîne la lecture automatique du scénario lors du chargement de la page en cours
dans un navigateur. Lecture auto attache un comportement à la balise body de la page qui exécute
l'action de lecture du scénario lors du chargement de la page.
Lecture auto
entraîne la lecture en boucle infinie du scénario en cours lorsque la page est ouverte dans
un navigateur. L'option de lecture en boucle insère le comportement Atteindre l'image du
scénario dans le canal des comportements après la dernière image de l'animation. Double-cliquez
sur le marqueur de comportement dans le canal des comportements pour modifier les paramètres
de ce comportement et changer le nombre de boucles.
Boucle
Déplacement d'un calque à l'aide d'une animation de scénario
Le type le plus courant d'animation de scénario inclut le déplacement d'un calque sur un chemin.
Les scénarios ne peuvent déplacer que des calques. Pour déplacer des images ou du texte, créez un
calque à l'aide du bouton Dessiner un calque de la barre Insertion, puis insérez des images, du
texte ou tout autre type de contenu sur le calque (voir « Création de calques sur une page »,
page 403).
Les scénarios peuvent également modifier d'autres attributs des calques et images ; pour plus
d'informations, voir « Modification des propriétés d'une image ou d'un calque à l'aide de
scénarios », page 418.
Pour animer un calque en utilisant un scénario :
1
Amenez le calque à sa position initiale au début de l'animation.
2
Choisissez Fenêtre > Autres > Scénarios.
Animation de calques 415
3
Sélectionnez le calque à animer.
Vérifiez que vous avez bien sélectionné le bon élément. Sélectionnez un calque en cliquant sur
le marqueur de calque, en cliquant sur la poignée de sélection de calque ou en utilisant le
panneau Calques. Pour plus d'informations, voir « Manipulation des calques », page 406.
Lorsqu'un calque est sélectionné, des poignées apparaissent (voir l'illustration suivante).
Cliquez sur la poignée de sélection
du calque pour le sélectionner
Calque sélectionné
contenant une image
Lorsque vous cliquez dans le calque, un curseur clignotant se place à l'intérieur du calque, mais
cela n'entraîne pas la sélection du calque.
4
Choisissez Modifier > Scénario > Ajouter un objet au scénario ou faites tout simplement
glisser l'objet sélectionné dans le panneau Scénarios.
Une barre apparaît dans le premier canal du scénario. Le nom du calque ou de l'image y sera
affiché.
5
Cliquez sur l'indicateur d'image-clé, à la fin de la barre.
6
Déplacez le calque sur la page à l'emplacement où il doit se trouver à la fin de l'animation.
Une ligne apparaît pour indiquer la trajectoire de l'animation dans la fenêtre de document.
7
Si vous voulez que le calque décrive une courbe, sélectionnez sa barre d'animation et, tout en
maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée, cliquez sur une
image au milieu de la barre pour lui ajouter une image-clé ou cliquez sur une image au milieu
de la barre d'animation et choisissez Ajouter une image-clé dans le menu contextuel.
Répétez cette étape pour définir des images-clés supplémentaires.
8
Maintenez le bouton Lecture enfoncé pour avoir un aperçu de l'animation sur la page.
Répétez cette procédure pour ajouter des calques et des images supplémentaires au scénario et
pour créer une animation plus complexe.
Création d'un scénario en traçant un chemin
Si vous désirez créer une animation suivant un parcours complexe, il peut être plus simple
d'enregistrer ce parcours en déplaçant le calque, plutôt que de créer des images-clés individuelles.
Pour créer un scénario en décrivant un chemin :
1
Sélectionnez un calque.
416 Chapitre 25
2
Amenez le calque à sa position initiale au début de l'animation.
Vérifiez que vous avez sélectionné le calque ; si le curseur se trouve dans le calque, cela signifie
que ce dernier n'est pas sélectionné. Sélectionnez un calque en cliquant sur le marqueur de
calque, en cliquant sur la poignée de sélection de calque ou en utilisant le panneau Calques.
Pour plus d'informations, voir « Manipulation des calques », page 406.
3
Choisissez Modifier > Scénario > Enregistrer le chemin du calque.
4
Déplacez le calque sur la page pour décrire son parcours.
5
Relâchez la souris à l'emplacement où l'animation doit s'arrêter.
Dreamweaver ajoute une barre d'animation au scénario, avec le nombre nécessaire d'images-clés.
6
Dans le panneau Scénarios, cliquez sur le bouton Rembobiner, puis maintenez le bouton
Lecture enfoncé pour visualiser votre animation.
Modification de scénarios
Après avoir défini les composants de base d'un scénario, vous pouvez y apporter des modifications
comme par exemple ajouter et supprimer des images, modifier le moment du démarrage de
l'animation, etc.
Pour modifier un scénario, utilisez l'une des méthodes suivantes :
Pour prolonger la durée de lecture de l'animation, faites glisser le marqueur de l'image de fin vers
la droite. Toutes les images-clés de l'animation seront déplacées en conséquence pour que leurs
positions relatives restent constantes. Pour empêcher le déplacement des images-clés, faites glisser
le marqueur de la dernière image tout en appuyant sur la touche Alt (Windows) ou Option
(Macintosh).
• Pour que le calque atteigne la position de l'image-clé plus tôt ou plus tard, déplacez le
marqueur d'image-clé vers la droite ou vers la gauche dans la barre.
• Pour modifier le moment de démarrage d'une animation, sélectionnez une barre ou toutes les
barres associées à l'animation (appuyez sur Maj pour sélectionner plusieurs barres à la fois) et
déplacez-les vers la gauche ou vers la droite.
• Pour déplacer de la même valeur toutes les positions d'un chemin d'animation, sélectionnez la
barre entière, puis faites glisser l'objet sur la page. Dreamweaver ajuste en conséquence la
position de toutes les images-clés. Toute modification effectuée lorsqu'une barre entière est
sélectionnée entraînera la modification de toutes les images-clés de cette barre.
• Pour ajouter ou supprimer des images du scénario, choisissez Modifier > Scénario > Ajouter
une image ou Modifier > Scénario > Supprimer une image.
• Pour que le scénario soit exécuté automatiquement à l'ouverture de la page dans un navigateur,
cliquez sur Lecture auto. Cette option attache à la page un comportement qui exécute l'action
« Lecture du scénario » lors du chargement de la page.
• Pour une lecture en boucle du scénario, cliquez sur Boucle. L'option de lecture en boucle
insère le comportement Atteindre l'image du scénario dans le canal des comportements après la
dernière image de l'animation. Vous pouvez modifier les paramètres de ce comportement pour
définir le nombre de boucles.
Animation de calques 417
Modification des propriétés d'une image ou d'un calque à l'aide de scénarios
Outre le déplacement des calques avec les scénarios, vous pouvez modifier la visibilité, la taille et
l'ordre de superposition d'un calque ; vous pouvez également modifier le fichier source d'une
image.
Pour modifier les propriétés d'une image ou d'un calque à l'aide d'un scénario :
1
Dans la fenêtre Scénarios, procédez de l'une des manières suivantes :
• Sélectionnez une image-clé existante dans la barre qui contrôle l'objet que vous souhaitez
modifier (les images de début et de fin sont toujours des images-clés).
• Créez une nouvelle image-clé en cliquant sur un cadre au centre de la barre d'animation et en
choisissant Modifier > Scénario > Ajouter une image-clé. Vous pouvez également créer une
nouvelle image-clé en cliquant sur un cadre de la barre d'animation tout en appuyant sur la
touche Ctrl (Windows) ou Commande (Macintosh).
2
Définissez les nouvelles propriétés de l'objet en choisissant l'une des options suivantes :
• Pour changer le fichier source d'une image, cliquez sur l'icône de dossier qui apparaît à côté de
la boîte Src dans l'inspecteur de propriétés, afin de sélectionner une nouvelle image.
• Pour modifier la visibilité d'un calque, cliquez sur Hériter, Visible ou Masqué ou dans le menu
contextuel du champ Visibilité de l'inspecteur de propriétés. Si vous préférez, vous pouvez
utiliser les icônes d'œil du panneau Calques Voir « Modification de la visibilité des calques »,
page 410.
• Pour modifier la taille d'un calque, faites glisser ses poignées de redimensionnement ou
indiquez de nouvelles valeurs dans les champs Largeur et Hauteur de l'inspecteur de propriétés.
Certains navigateurs ne permettent pas de changer les dimensions d'un calque de manière
dynamique.
• Pour modifier l'ordre de superposition de calques, indiquez une nouvelle valeur dans le champ
Index Z ou utilisez le panneau Calques pour modifier l'ordre de superposition du calque en
cours (voir « Modification de l'ordre de superposition des calques », page 410).
3
Maintenez le bouton Lecture enfoncé pour afficher l'animation.
Utilisation de plusieurs scénarios
Au lieu d'essayer de contrôler toute l'animation d'une page à l'aide d'un seul scénario, il est plus
facile de travailler avec des scénarios séparés contrôlant différentes parties de la page. Par exemple,
la page peut comporter des éléments interactifs déclenchant chacun un scénario différent.
Pour gérer plusieurs scénarios, procédez de l'une des manières suivantes :
• Pour créer un nouveau scénario, choisissez Modifier > Scénario > Ajouter un scénario.
• Pour supprimer le scénario sélectionné, choisissez Modifier > Scénario > Supprimer le
scénario. Toutes les animations sont définitivement supprimées de ce scénario.
• Pour renommer le scénario sélectionné, choisissez Modifier > Scénario > Renommer le
scénario ou tapez un nouveau nom dans le menu déroulant Scénario du panneau Scénarios.
• Pour afficher un scénario différent dans le panneau Scénarios, choisissez-en un autre dans le
menu déroulant Scénario du panneau Scénarios.
418 Chapitre 25
Copie et collage d'animations
Une fois qu'une séquence d'animation vous convient, vous pouvez la copier et la coller dans une
autre zone du scénario en cours, dans un autre scénario du même document ou dans le scénario
d'un autre document. Il est possible de copier et de coller plusieurs séquences à la fois.
Pour couper ou copier et coller des séquences d'animation :
1
Cliquez sur une barre d'animation pour sélectionner une séquence. Pour sélectionner plusieurs
séquences, cliquez sur plusieurs barres d'animation en appuyant sur Maj ; pour les sélectionner
toutes, appuyez sur Ctrl+A (Windows) ou sur Commande+A (Macintosh).
2
Copiez ou coupez la sélection.
3
Procédez de l'une des manières suivantes :
• Déplacez la tête de lecture vers un autre emplacement du scénario en cours.
• Sélectionnez un autre scénario dans le menu contextuel Scénario.
• Ouvrez un autre document ou créez-en un nouveau, puis cliquez sur le panneau Scénarios.
4
Collez la sélection dans le scénario.
Les barres d'animation d'un même objet ne peuvent pas se chevaucher, puisqu'un calque ne
peut pas se trouver à deux endroits à la fois (de même, une image ne peut pas avoir deux
sources différentes en même temps). Si la barre d'animation que vous collez doit chevaucher
une autre barre d'animation concernant le même objet, Dreamweaver décale automatiquement
la sélection à la première image située hors de ce chevauchement.
Deux principes sont à garder à l'esprit lorsque l'on colle une séquence d'animation dans un autre
document :
• Si vous copiez une séquence d'animation pour un calque et que le nouveau document contient
déjà un calque du même nom, Dreamweaver appliquera les propriétés d'animation au calque
existant dans le nouveau document.
• Si vous copiez une séquence d'animation pour un calque et que le nouveau document ne
contient pas encore de calque du même nom, Dreamweaver collera le calque et son contenu à
partir du document d'origine, en même temps que la séquence d'animation. Pour appliquer la
séquence d'animation collée à un autre calque dans le nouveau document, choisissez Modifier
l'objet dans le menu contextuel et sélectionnez le nom du deuxième calque dans le menu
contextuel. Supprimez le calque collé si nécessaire.
Application d'une séquence d'animation à un autre objet
Pour gagner du temps, vous pouvez créer une séquence d'animation, puis l'appliquer aux autres
calques de votre document.
Pour appliquer une séquence d'animation existante à d'autres objets :
1
Dans le panneau Scénarios, sélectionnez la séquence d'animation et copiez-la.
2
Cliquez sur une des images du panneau Scénarios et collez-y la séquence.
3
Cliquez à l'aide du bouton droit (Windows) ou appuyez sur la touche Contrôle (Macintosh)
en cliquant sur la séquence d'animation collée et cliquez sur Modifier l'objet dans le menu
contextuel.
Animation de calques 419
4
Choisissez un autre objet dans le menu de la boîte de dialogue qui apparaît, puis cliquez sur
OK.
5
Répétez les étapes 2 à 4 pour tous les autres objets qui doivent suivre la même séquence
d'animation.
Vous pouvez changer d'avis sur le calque à animer après la création d'une séquence d'animation ;
suivez simplement les étapes 3 et 4 ci-dessus (inutile de copier ou coller).
Changement de nom des scénarios
Pour changer le nom du scénario actuellement affiché dans le panneau Scénarios :
1
Choisissez Modifier > Scénario > Renommer le scénario.
2
Tapez un nouveau nom dans la boîte de dialogue Renommer le scénario.
Si votre document contient l'action de comportement Lire le scénario (par exemple, s'il contient
un bouton sur lequel l'utilisateur doit cliquer pour démarrer le scénario), vous ne devez pas
oublier de modifier le comportement pour qu'il porte sur le nouveau nom de scénario.
Conseils pour l'animation des scénarios
Les suggestions suivantes peuvent améliorer le fonctionnement de vos animations et faciliter leur
création :
• Affichez et masquez des calques au lieu de modifier le fichier source lorsque vous travaillez avec
des animations de plusieurs images. L'échange du fichier source d'une image peut ralentir
l'animation, car la nouvelle image doit être téléchargée. Il n'y aura pas de pause ou d'images
manquantes si toutes les images sont téléchargées en même temps dans des calques masqués
avant l'exécution de l'animation.
• Prolongez les barres d'animation pour créer un mouvement plus fluide. Si l'animation paraît
saccadée et que les images sautent entre les positions, faites glisser la dernière image de la barre
d'animation du calque pour étendre le mouvement sur plus d'images. La prolongation de la
barre d'animation crée davantage de points de coordonnées entre les points de début et de fin
du mouvement, et ralentit le déplacement de l'objet. Essayez d'accroître le nombre d'images
par seconde (i/s) pour améliorer la vitesse, mais sachez que la plupart des navigateurs exécutés
sur des systèmes moyens ne peuvent guère aller plus vite que 15 i/s. Testez l'animation sur
différents ordinateurs et avec les différents navigateurs pour trouver la meilleure configuration.
• N'essayez pas d'animer des images bitmap trop volumineuses. l'animation d'images
volumineuses ralentit l'animation. Créez plutôt des images composites, pour déplacer des
images de petite taille. Par exemple, pour montrer le déplacement d'une voiture, n'animez que
les roues.
• Créez des animations simples. Ne créez pas d'animations qui demandent plus que ce que les
navigateurs actuels sont capables de fournir. Les navigateurs lisent toujours toutes les images
d'une animation de scénario, même si les performances de l'ordinateur ou d'Internet
diminuent.
420 Chapitre 25
Animation de calques à l'aide d'actions de comportement
Associez les actions de comportement suivantes à un lien, à un bouton ou à tout autre objet pour
contrôler les scénarios et les calques. Pour créer des effets intéressants, vous pouvez placer les
comportements contenant ces actions dans le canal de comportements. Par exemple, vous pouvez
faire en sorte qu'un scénario s'arrête de lui-même. Pour plus d'informations, voir « Association d'un
comportement à un scénario », page 373 et « Utilisation des comportements JavaScript », page 369.
Déplacement de calque permet à l'utilisateur de déplacer un calque. Utilisez cette action pour
créer des puzzles, des commandes de défilement et autres éléments mobiles de l'interface Voir
« Déplacement de calque », page 379.
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 Voir « Afficher-masquer les calques », page 391.
Afficher-Masquer les calques
et Arrêter le scénario permettent aux visiteurs de la page de lire et d'arrêter
un scénario en cliquant sur un lien ou sur un bouton. Ces actions permettent aussi de démarrer et
d'arrêter un scénario automatiquement lorsque l'utilisateur passe sur un lien, une image ou tout
autre objet Voir « Lire le scénario et Arrêter le scénario », page 399.
Lecture du scénario
entraîne un saut du scénario à une image donnée. La case à
cocher Boucle du panneau Scénarios ajoute l'action Atteindre une image du scénario après la
dernière image de l'animation, ce qui fera revenir cette dernière à la première image et la fera
redémarrer Voir « Atteindre l'image du scénario », page 398.
Atteindre une image du scénario
remplace le contenu et le formatage d'un calque existant sur la page par le
contenu indiqué. Ce contenu peut être n'importe quel texte valide en HTML Voir « Texte du
calque », page 389.
Texte du calque
Animation de calques 421
422 Chapitre 25
Vous pouvez établir des liens entre vos pages, réutiliser des
éléments de conception et des mises en forme d'une page à
l'autre, puis tester votre site.
Cette partie du manuel contient les chapitres suivants :
• Chapitre 26, « Liens et navigation »
• Chapitre 27, « Gestion des actifs de site, des
bibliothèques et des modèles »
• Chapitre 28, « Test d'un site »
Partie VII
Partie VII
Gestion du contenu sur
plusieurs pages
CHAPITRE 26
Liens et navigation
Une fois que vous avez établi un site Dreamweaver dans lequel stocker les documents de votre site
Web et que vous avez créé des pages HTML, il vous reste à créer des connexions entre vos
documents et d'autres types de documents.
Macromedia Dreamweaver MX 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, créer et supprimer des
liens entre des documents et vérifier les liens entre des fichiers interdépendants (voir « Utilisation
de la carte du site », page 83).
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 non existants durant leur travail, 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 « Vérification des liens dans
une page ou un site », page 497.
Ce chapitre contient les sections suivantes :
« Emplacements et chemins d'accès des documents », page 425
« Création de liens », page 428
« Gestion des liens », page 436
« Création de menus de reroutage », page 439
« Création de barres de navigation », page 441
« Création de cartes graphiques », page 444
« Association de comportements à des liens », page 446
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.
425
Chaque page Web possède une adresse unique, appelée URL (Uniform Resource Locator) (pour
plus d'informations sur les URL, consultez la page du World Wide Web Consortium consacrée
aux noms et adresses des pages). 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 en cours ou de la racine du site.
Les trois types de chemins d'accès de liaison sont les suivants :
• Chemins absolus (par exemple http://www.macromedia.com/support/dreamweaver/
contents.html).Voir « Chemins absolus », page 426.
• Chemins relatifs au document (par exemple dreamweaver/contents.html).Voir « Chemins
relatifs au document », page 426.
• Chemins relatifs à la racine du site (par exemple /support/dreamweaver/contents.html).Voir
« Chemins relatifs à la racine du site », page 427.
Dreamweaver vous permet de choisir aisément le type de chemin à créer pour vos liens. Voir
« Liens entre fichiers et documents », page 429.
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/
support/dreamweaver/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 312.
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 en cours 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 en cours 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.
• Pour créer un lien vers un autre fichier situé dans le même dossier que le document en cours, il
suffit d'indiquer le nom de ce fichier.
426 Chapitre 26
• Pour créer un lien vers un fichier situé dans un sous-dossier du dossier qui contient le
document en cours, indiquez le nom de ce sous-dossier, suivi d'une barre oblique (/) et du nom
du fichier.
• Pour créer un lien vers un fichier dans le dossier parent du dossier du document en cours, faites
précéder le nom de fichier par ../ (où « .. » signifie « un niveau supérieur dans la hiérarchie du
dossier »).
Par exemple, supposons que la structure de votre site soit la suivante :
Pour établir un lien depuis contents.html vers d'autres fichiers :
• 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.
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.
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.
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 Site, 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.
Liens et navigation 427
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 Site,
Dreamweaver met automatiquement à jour tous les liens concernés).
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
distant (voir « Configuration d'un site Dreamweaver », page 62).
Dreamweaver utilise ce dossier pour déterminer les chemins relatifs à la racine pointant vers des
fichiers.
Remarque : les chemins relatifs à la racine sont interprétés par les serveurs, non par les navigateurs. En
conséquence, si vous ouvrez dans votre navigateur une page locale qui utilise des liens relatifs à la racine (sans
utiliser la fonction Aperçu dans le navigateur depuis Dreamweaver), les liens ne fonctionnent pas. Lorsque vous
utilisez la fonction Aperçu dans le navigateur pour vérifier un document qui utilise des liens relatifs à la racine,
Dreamweaver convertit temporairement ces liens (dans le document prévisualisé uniquement) en utilisant des
chemins relatifs au document. Cependant, vous ne pouvez vérifier qu'une page de ce type à la fois : si vous suivez un
lien à partir de la page affichée, les liens relatifs à la racine de la page suivante ne sont pas convertis et le navigateur
ne peut pas les suivre. L'affichage de pages contenues dans des jeux de cadres et utilisant des liens relatifs à la
racine provoque le même type de problème.
Pour vérifier un ensemble de pages qui utilisent des liens relatifs à la racine, procédez de l'une des
manières suivantes :
• Placez les fichiers sur un serveur distant, et affichez-les à partir de celui-ci.
• (Windows uniquement) Choisissez Edition > Préférences, sélectionnez la catégorie Aperçu
dans le navigateur dans la liste de gauche, puis Aperçu à l'aide du serveur local.
Remarque : pour utiliser cette option, vous devez exécuter un serveur Web sur votre ordinateur local.
Création de liens
La balise HTML qui permet de déclarer un lien hypertexte est appelée une ancre ou une balise a.
Dreamweaver crée une ancre pour les objets, les textes ou les images à partir desquels vous créez
des liens. Vous pouvez créer des liens vers d'autres documents et fichiers et des liens vers des
emplacements spécifiques dans un document unique en utilisant la balise a href.
Par exemple, si vous avez sélectionné le texte Page d'accueil dans la fenêtre de document, puis
si vous avez créé un lien vers un fichier nommé accueil.htm, le code source HTML du lien aura
l'aspect suivant :
<a href="accueil.htm">Page d'accueil</a>
Si vous créez un lien vers un emplacement spécifique dans un document, vous créez d'abord une
ancre nommée (par exemple, a name="MenuPrincipal"). Vous créez ensuite un lien au sein de la
page qui fait référence à cette ancre nommée (par exemple, a href="#MenuPrincipal").
Avant de créer des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs
au document, des chemins relatifs à la racine et des chemins absolus (voir « Emplacements et
chemins d'accès des documents », page 425).
428 Chapitre 26
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 429.
• 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 432.
• Un lien de message électronique, qui crée un message électronique vierge avec l'adresse du
destinataire déjà indiquée.Voir « Création d'un hyperlien », page 433.
• 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 435.
Dreamweaver propose différentes méthodes pour créer facilement des liens locaux (entre des
documents du même site) :
• Utilisez la carte du site pour afficher, créer, modifier ou supprimer des liens.
• Sélectionnez du texte ou l'élément d'une page dans la fenêtre de document, puis Modifier >
Créer le lien pour sélectionner un fichier avec lequel établir un lien.
• Utilisez l'inspecteur de propriétés, en sélectionnant du texte ou l'élément d'une page dans le
document, puis en tapant le chemin du fichier ou en utilisant l'icône du dossier Inspecteur de
propriétés ou l'icône Pointer vers un fichier pour sélectionner un fichier avec lequel établir un
lien.
Remarque : la saisie de l'adresse ou du chemin d'accès vers un fichier peut amener à entrer des liens ou chemins
incorrects qui ne fonctionnent pas. Pour vous assurer que le chemin est correct, utilisez l'icône de dossier pour
rechercher le lien.
• Sélectionnez du texte ou l'élément d'une page dans la fenêtre de document, choisissez Créer le
lien dans le menu contextuel, puis sélectionnez un fichier avec lequel établir un lien.
Pour créer un lien externe (vers un document sur un autre site), vous devez taper le chemin
d'accès absolu (avec le protocole correct) dans l'inspecteur de propriétés. Assurez-vous d'entrer le
chemin entier (y compris http://) lors de la création de liens externes.
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 « Création et modification de liens
dans la carte du site », page 437.
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 du 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 :
Liens et navigation 429
• 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 un 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 le champ 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éé.
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.
•
_self
•
_top
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.
charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les
cadres.
Conseil : si tous les liens sur la page seront définis sur la même cible, vous pouvez spécifier cette cible une fois
en choisissant la commande Insertion > Balises d'en-tête > 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 278.
Pour créer un lien vers des documents en utilisant l'icône Pointer 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 Pointer vers un fichier (à 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 fichier dans le panneau Site.
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.
430 Chapitre 26
3
Relâchez le bouton de la souris.
Déplacement de l'icône Pointer vers un fichier de l'inspecteur de propriétés vers un fichier dans le
panneau Site
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 dans le panneau Site.
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.
Déplacement de l'icône Pointer vers un fichier à partir d'un texte de la fenêtre de document vers un
fichier du panneau 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 Site, 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.
Liens et navigation 431
2
Sélectionnez un fichier HTML dans la carte du site.
L'icône Pointer vers un fichier s'affiche à côté du fichier.
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.
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, 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).
432 Chapitre 26
• Sélectionnez l'onglet Commun de la barre Insertion, puis cliquez sur le bouton Ancre
nommée.
La boîte de dialogue Ancre nommée apparaît.
3
Dans le champ Nom de l'ancre, tapez le nom de l'ancre.
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 Afficher > Assistances visuelles > Eléments
invisibles.
Pour créer un lien vers une ancre nommée :
1
Dans la fenêtre de création du document, 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 en cours 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 : les noms d'ancres respectent la casse.
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.
Remarque : choisissez Afficher > 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 Pointer vers un fichier (à 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é vers l'ancre vers laquelle créer un lien, dans le même document ou dans un
autre document ouvert.
Création d'un hyperlien
Il est possible d'ajouter un hyperlien vers un autre fichier.
Liens et navigation 433
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.
• Sélectionnez l'onglet Commun sur la barre Insertion, puis 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.
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 message est automatiquement complétée par l'adresse indiquée dans le lien.
Pour créer un lien de messagerie électronique à l'aide de la commande Insérer lien message
électronique :
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.
• Sélectionnez l'onglet Commun sur la barre Insertion, puis cliquez sur le bouton Lien de
messagerie.
La boîte de dialogue Lien de messagerie apparaît.
434 Chapitre 26
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:[email protected].
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 (décrits respectivement dans « Liens entre fichiers et documents », page 429 et « Lien
vers un emplacement spécifique au sein d'un document », page 432), 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 371.
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\").
Liens et navigation 435
Gestion des 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 opère 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 activer la gestion des liens dans Dreamweaver :
1
Choisissez Edition > Préférences ou Dreamweaver > Préférences (Mac OS X).
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 438).
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 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. Ce fichier cache est créé lorsque vous sélectionnez
l'option Cache dans la boîte de dialogue Définition du site et il est mis à jour chaque fois que
vous ajoutez, modifiez ou supprimez des liens vers des fichiers du site local dans Dreamweaver.
436 Chapitre 26
Pour créer un fichier cache pour votre site :
1
Choisissez Site > Modifier les sites.
La boîte de dialogue Modifier les sites s'affiche.
2
Sélectionnez un site, puis cliquez sur Modifier.
3
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.
4
Dans la catégorie Infos locales, sélectionnez l'option Activer le cache.
La première fois que vous modifiez ou supprimez des liens sur le site local après avoir lancé
Dreamweaver, 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 Site, choisissez Site > Recréer le cache du site.
Création et 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 ajouter un lien, 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 Site 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.
• Sélectionnez une page HTML dans la carte du site ; l'icône Pointer vers un fichier apparaît.
Faites glisser l'icône vers l'objet vers lequel créer un lien : il peut s'agir d'un fichier du mode
Fichiers du site, d'un document Dreamweaver ouvert ou d'une ancre nommée dans un
document ouvert sur le bureau.
Remarque : pour plus d'informations, voir « Liens entre fichiers et documents », page 429.
Liens et navigation 437
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 de la fenêtre Site.
• Cliquez à l'aide du bouton droit (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, procédez de l'une des manières suivantes :
• Sélectionnez la page dans la carte du site, puis choisissez Site > Supprimer le lien (Windows)
ou Site > Affichage de la carte du site > Supprimer le lien (Macintosh).
Remarque : utilisez le menu Site de la fenêtre Site.
• Sélectionnez la page dans la carte du site, puis cliquez à l'aide du bouton droit (Windows) ou
en maintenant la touche Contrôle enfoncée (Macintosh) et 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 :
Sélectionnez un fichier dans la carte du site, puis procédez de l'une des manières suivantes :
• Choisissez Site > Ouvrir la source du lien (Windows) ou Site > Affichage de la carte du site >
Ouvrir la source du lien (Macint">
公開リンクが更新されました
あなたのチャットの公開リンクが更新されました。