La page est en cours de chargement...
macromedia
™
®
Utilisation de Dreamweaver
2
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 COMMERCIABILITÉ OU SON ADÉQUATION À UN OBJECTIF PARTICULIER.
L’EXCLUSION DES GARANTIES IMPLICITES N’ÉTANT PAS AUTORISÉE DANS CERTAINS ÉTATS, L’EXCLUSION CI-
DESSUS PEUT DONC NE PAS S’APPLIQUER À VOTRE CAS. CETTE GARANTIE VOUS OFFRE DES DROITS
JURIDIQUES SPÉCIFIQUES. VOUS POUVEZ DISPOSER DE CERTAINS AUTRES DROITS, QUI VARIENT SELON LES
ÉTATS.
Copyright © 2000 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit, traduit ou
converti sous forme électronique ou informatique, en partie ou en totalité, sans l’autorisation écrite préalable de Macromedia, Inc.
Numéro de pièce ZDW40M100F
Remerciements
Gestion de projet : Sheila McGinn
Rédaction : Kim Diezel, Valerie Hanscom, Jed Hartman, Emily Ricketts
Mise en forme : Anne Szabla et Lisa Stanziano
Gestion de la production : John « Zippy » Lehnus
Conception et production multimédia : Aaron Begley et Noah Zilberberg
Production de l'impression : Chris Basmajian, Paul Benkman, Caroline Branch et Rebecca Godbois
Mise en forme et production du site web : Jane Flint DeKoven et Jeff Harmon
Responsable de la localisation : Kristin Conradi
Remerciements spéciaux à Heidi Bauer, Winsha Chen, Chris Denend, Margaret Dumas, Peter Fenczik, Dave George, Valerie Green, Joel
Huff, Lori Hylan, Narciso (nj) Jaramillo, Sho Kuwamoto, Jay London, Joe Marini, Charles McBrian, Jeff Schang, Ken Sundermeyer Scott
Richards, Raymond Lim, Yoko Vogt, Luciano Arruda, Peter von dem Hagen, Vincent Truong, Florian de Joannes, Gwenhaël Jacq,
Florent Pajani, Bonnie Loo, Karen Catlin, Jean Fitzgerald, Ken Karleskint, Chris Bank, Yoko Shindo, Masayo Noda, Tim Hussey et SDL
International
Première édition : novembre 2000
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
3
TABLE DES MATIÈRES
INTRODUCTION
Prise en main . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Configuration système requise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Installation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Prise en main de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Déroulement du travail du développement web . . . . . . . . . . . . . . . . . .16
Par où débuter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Conventions typographiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
Nouveautés de Dreamweaver 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
Ressources sur le langage HTML et les technologies web. . . . . . . . . . . .24
Accessibilité et Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
CHAPITRE 1
Didacticiel de Dreamweaver . . . . . . . . . . . . . . . . . . . . 27
Visite guidée de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
A propos de l’espace de travail de Dreamweaver . . . . . . . . . . . . . . . . . .28
Définition de la structure du site pour le didacticiel. . . . . . . . . . . . . . . .31
Définir un site local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Création de la page d'accueil du site . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Conception d'une page en mode Mise en forme . . . . . . . . . . . . . . . . . .35
Ajout d'un contenu à la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
Utilisation du mode Standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49
Utilisation du panneau Actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Insertion d'objets Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Création d'un modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
Vérifier votre site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68
Les prochaines étapes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Tables des matières
4
CHAPITRE 2
Les bases de Dreamweaver . . . . . . . . . . . . . . . . . . . . .71
A propos de l’espace de travail de Dreamweaver . . . . . . . . . . . . . . . . . .72
A propos des différents modes de Dreamweaver . . . . . . . . . . . . . . . . . .73
Utilisation des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Les couleurs sécurisées pour le web . . . . . . . . . . . . . . . . . . . . . . . . . . . .89
Définition des préférences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90
Utilisation de Dreamweaver avec d'autres applications . . . . . . . . . . . . .91
Personnalisation de base dans Dreamweaver . . . . . . . . . . . . . . . . . . . . .92
CHAPITRE 3
Planification et configuration de votre site. . . . . . . . 97
A propos de la planification et de la création du site . . . . . . . . . . . . . . .98
Configuration d'un nouveau site à l'aide de Dreamweaver. . . . . . . . . .103
Modification d'un site web existant. . . . . . . . . . . . . . . . . . . . . . . . . . .105
Modification d'un site distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Suppression d'un site de votre liste de sites . . . . . . . . . . . . . . . . . . . . .108
CHAPITRE 4
Gestion des sites et collaboration . . . . . . . . . . . . . . 109
La fenêtre Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Affichage et ouverture de fichiers dans la fenêtre Site. . . . . . . . . . . . . .114
Carte du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Utilisation de la carte du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
Configuration d'un site distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127
A propos de WebDAV et de l'intégration SourceSafe. . . . . . . . . . . . . .130
Résolution des problèmes de configuration du site distant. . . . . . . . . .133
Utilisation de l'archivage et de l'extraction . . . . . . . . . . . . . . . . . . . . .135
A propos des Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138
Utilisation des rapports pour améliorer le déroulement du travail . . . .145
Acquérir et placer des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146
Synchronisation des fichiers sur le site local et le site distant . . . . . . . .150
Tables des matières
5
CHAPITRE 5
Configuration d'un document . . . . . . . . . . . . . . . . . . 153
Création, ouverture et enregistrement de documents HTML . . . . . . .154
Définition des propriétés du document . . . . . . . . . . . . . . . . . . . . . . . .156
Sélection d'éléments dans la fenêtre de document . . . . . . . . . . . . . . . .158
Utilisation de guides visuels durant la conception . . . . . . . . . . . . . . . .161
Affichage et modification du contenu de l'en-tête . . . . . . . . . . . . . . . .163
A propos de l'automatisation des tâches . . . . . . . . . . . . . . . . . . . . . . .164
CHAPITRE 6
Conception de la mise en forme d'une page . . . . . 173
Cellules et tableaux de Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . .175
Dessin de cellules et de tableaux de mise en forme. . . . . . . . . . . . . . . .176
Déplacement et redimensionnement de cellules et de tableaux de
Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182
Formatage de cellules et de tableaux de Mise en forme . . . . . . . . . . . .183
Définition de la largeur de la présentation. . . . . . . . . . . . . . . . . . . . . .186
Définition des préférences du mode Mise en forme. . . . . . . . . . . . . . .189
CHAPITRE 7
Utilisation de tableaux pour présenter du contenu 191
Insertion d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192
Sélection d'éléments de tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196
Mise en forme des tableaux et des cellules . . . . . . . . . . . . . . . . . . . . . .198
Redimensionnement des tableaux et cellules . . . . . . . . . . . . . . . . . . . .203
Ajout et suppression de lignes et de colonnes. . . . . . . . . . . . . . . . . . . .205
Copie et collage de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208
Tri des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209
Exportation des données d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . .210
Tables des matières
6
CHAPITRE 8
Utilisation de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Choix de l'utilisation des cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
A propos de la création de pages web basées sur des cadres . . . . . . . . .215
Création de cadres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215
Sélection d'un cadre ou d'un jeu de cadres . . . . . . . . . . . . . . . . . . . . .218
Enregistrement des fichiers du cadre et du jeu de cadres . . . . . . . . . . .220
A propos des propriétés des cadres et des jeux de cadres. . . . . . . . . . . .222
Définition des contenus de cadre avec liens . . . . . . . . . . . . . . . . . . . . .228
Gestion des navigateurs qui ne peuvent pas afficher les cadres . . . . . . .229
Utilisation des comportements avec les cadres . . . . . . . . . . . . . . . . . . .230
CHAPITRE 9
Gestion et insertion d'actifs . . . . . . . . . . . . . . . . . . . . 231
Utilisation du panneau Actifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232
Utilisation d'actifs favoris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239
CHAPITRE 10
Insertion et mise en forme de texte . . . . . . . . . . . . 243
Insertion de texte et d'objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244
Création de listes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248
Définition de polices, de styles, de couleurs et d'alignement . . . . . . . .249
Utilisation de styles HTML pour formater un texte . . . . . . . . . . . . . .254
Utilisation de feuilles de style CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . .259
Conversion de styles CSS en balises HTML . . . . . . . . . . . . . . . . . . . .268
Vérification de l'orthographe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270
Recherche et remplacement de texte, de balises et d'attributs. . . . . . . .271
CHAPITRE 11
Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Insertion d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282
Définition des propriétés d'une image . . . . . . . . . . . . . . . . . . . . . . . . .283
Création de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288
Utilisation d'un éditeur d'image externe . . . . . . . . . . . . . . . . . . . . . . .292
Application de comportements aux images . . . . . . . . . . . . . . . . . . . . .296
Tables des matières
7
CHAPITRE 12
Utilisation conjointe de Dreamweaver et Fireworks 297
Récupération dans Dreamweaver de fichiers Fireworks . . . . . . . . . . . .297
Exécution de Fireworks à partir de Dreamweaver . . . . . . . . . . . . . . . .301
Modification de fichiers Fireworks mis en place dans Dreamweaver . .304
Optimisation des images Fireworks et des animations mises en
place dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307
Mise à jour de fichiers Fireworks mis en place dans Dreamweaver . . . .310
Création d'albums photos pour le web . . . . . . . . . . . . . . . . . . . . . . . .311
CHAPITRE 13
Insertion d'éléments multimédias . . . . . . . . . . . . . . 315
Insertion d'éléments multimédias . . . . . . . . . . . . . . . . . . . . . . . . . . . .315
Démarrage d'un éditeur multimédia externe . . . . . . . . . . . . . . . . . . . .316
Utilisation des Design Notes (Notes de conception) avec les
objets multimédias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
A propos du contenu Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Utilisation des objets de bouton Flash . . . . . . . . . . . . . . . . . . . . . . . . .319
Utilisation d'objets de texte Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . .322
Définition des propriétés d'un objet Flash. . . . . . . . . . . . . . . . . . . . . .323
Insertion d'animations Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325
Insertion d'objets Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327
A propos des animations Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . .328
Ajout de son à une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329
Insertion de contenu d'un plug-in Netscape Navigator . . . . . . . . . . . .331
Insertion d'un contrôle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334
Insertion d'une appliquette Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336
Utilisation de paramètres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337
Utilisation de comportements pour contrôler les objets
multimédias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338
Tables des matières
8
CHAPITRE 14
Modification du code HTML dans Dreamweaver 339
Connaissances des balises HTML de base . . . . . . . . . . . . . . . . . . . . . .340
Insertion de commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .347
Utilisation du panneau Référence de Dreamweaver. . . . . . . . . . . . . . .348
Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .350
Utilisation du mode Affichage de code (ou de l'inspecteur de code) . .351
Insertion de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355
Ouverture et modification de fichiers non HTML dans
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .358
Modification d'une balise HTML en mode Création . . . . . . . . . . . . .359
Définition des préférences de formatage de code . . . . . . . . . . . . . . . . .363
Nettoyage du code source HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . .368
Nettoyage de HTML provenant de MS Word. . . . . . . . . . . . . . . . . . .370
Utilisation d'éditeurs HTML externes. . . . . . . . . . . . . . . . . . . . . . . . .371
CHAPITRE 15
Liens et navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Emplacements et chemins d'accès des documents . . . . . . . . . . . . . . . .376
Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .380
Gestion des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .388
Création de menus de reroutage . . . . . . . . . . . . . . . . . . . . . . . . . . . . .391
Création de barres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .394
Association de comportements à des liens . . . . . . . . . . . . . . . . . . . . . .397
CHAPITRE 16
Réutilisation de contenu à l'aide de modèles et de
bibliothèques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Création d'un modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401
Définition des régions modifiables d'un modèle . . . . . . . . . . . . . . . . .405
Création de documents basés sur des modèles . . . . . . . . . . . . . . . . . . .412
Mise à jour de pages basées sur un modèle. . . . . . . . . . . . . . . . . . . . . .414
Exportation et importation de contenu XML . . . . . . . . . . . . . . . . . . .416
Création, gestion et modification des éléments de bibliothèque. . . . . .419
Utilisation des SSI (server-side includes, inclusions à partir
du serveur). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .427
Tables des matières
9
CHAPITRE 17
Utilisation de calques dynamiques . . . . . . . . . . . . . . 431
Calques et code HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .432
Création de calques sur une page. . . . . . . . . . . . . . . . . . . . . . . . . . . . .433
Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437
Configuration des propriétés de calque . . . . . . . . . . . . . . . . . . . . . . . .441
Modification de l'ordre de superposition des calques . . . . . . . . . . . . . .444
Modification de la visibilité des calques. . . . . . . . . . . . . . . . . . . . . . . .445
Utilisation de tableaux et de calques pour la mise en forme . . . . . . . . .446
Animation de calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .450
Actions de comportement pour contrôler les scénarios de calques . . . .459
CHAPITRE 18
Utilisation des comportements . . . . . . . . . . . . . . . . . 461
Utilisation du panneau Comportements . . . . . . . . . . . . . . . . . . . . . . .462
Les événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .462
Association d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . . .465
Comportements et texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .467
Association d'un comportement à un scénario. . . . . . . . . . . . . . . . . . .468
Modification d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . .468
Actualisation d'un comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . .469
Création de nouvelles actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .469
Téléchargement et installation de comportements créés par
des développeurs indépendants . . . . . . . . . . . . . . . . . . . . . . . . . .470
Utilisation des actions de comportement livrées avec Dreamweaver. . .470
CHAPITRE 19
Débogage de code JavaScript. . . . . . . . . . . . . . . . . 501
Exécution du débogueur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .502
Recherche et correction des erreurs logiques . . . . . . . . . . . . . . . . . . . .504
Tables des matières
10
CHAPITRE 20
Création de formulaires . . . . . . . . . . . . . . . . . . . . . . . . 511
Scripts CGI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .512
Objets de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .512
Création d'un formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .513
Champs de formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .515
Insertion de cases à cocher et de cases d'options . . . . . . . . . . . . . . . . .521
Listes et menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523
Boutons de formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .526
Conception du formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528
Traitement des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .529
Utilisation de comportements avec des formulaires . . . . . . . . . . . . . . .530
CHAPITRE 21
Test et publication d'un site . . . . . . . . . . . . . . . . . . . 533
Vérification de la compatibilité du navigateur . . . . . . . . . . . . . . . . . . .534
Utilisation de comportements pour détecter le type et la version
des navigateurs et des plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . .536
Aperçu dans des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .536
Vérification des liens dans une page ou un site . . . . . . . . . . . . . . . . . .538
Vérification du temps et de la taille de téléchargement . . . . . . . . . . . .541
Utilisation des rapports pour tester un site . . . . . . . . . . . . . . . . . . . . .542
CHAPITRE 22
Personnalisation de Dreamweaver . . . . . . . . . . . . 545
Modification du type de fichier par défaut. . . . . . . . . . . . . . . . . . . . . .546
Modification du panneau Objets. . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Création d'un objet simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548
Personnalisation des menus de Dreamweaver . . . . . . . . . . . . . . . . . . .549
Personnalisation de l'aspect des boîtes de dialogue. . . . . . . . . . . . . . . .560
Modification du formatage HTML par défaut . . . . . . . . . . . . . . . . . .561
Utilisation des profils de navigateur. . . . . . . . . . . . . . . . . . . . . . . . . . .563
Extension de Dreamweaver : bases. . . . . . . . . . . . . . . . . . . . . . . . . . . .568
Personnalisation de l'interprétation de balises propriétaires . . . . . . . . .569
Tables des matières
11
ANNEXE A
Raccourcis clavier. . . . . . . . . . . . . . . . . . . . . . . . . . . . 579
Menu Fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .579
Menu Edition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .580
Modes Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .580
Affichage des éléments de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . .581
Modification de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .581
Modification de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .582
Mise en forme de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .583
Recherche et remplacement de texte . . . . . . . . . . . . . . . . . . . . . . . . . .584
Utilisation des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .584
Utilisation des cadres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585
Utilisation des calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585
Utilisation des scénarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586
Utilisation des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586
Gestion des liens hypertextes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .587
Ciblage et prévisualisation dans les navigateurs . . . . . . . . . . . . . . . . . .587
Débogage dans les navigateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .587
Gestion du site et FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .588
Plan du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .588
Exécution des plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .589
Utilisation des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .589
Insertion d'objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .589
Panneau Historique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .590
Ouverture et fermeture des panneaux . . . . . . . . . . . . . . . . . . . . . . . . .590
Affichage de l'aide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .591
Matrice des raccourcis clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .591
Tables des matières
12
11
INTRODUCTION
.............................................................................................................
Prise en main
Macromedia Dreamweaver est un éditeur HTML professionnel qui permet de
concevoir et de gérer visuellement des sites et des pages web. Que vous aimiez à
contrôler manuellement le codage HTML ou préfériez travailler dans un
environnement d'édition visuel, Dreamweaver facilite la mise en œuvre et vous
fournit les outils appropriés pour élargir votre expérience dans le domaine de la
conception web.
Dreamweaver inclut de nombreux outils et fonctions de codage : une référence
HTML, CSS et JavaScript, un débogueur JavaScript et des éditeurs de code
(le mode Affichage de code et l'inspecteur de code) qui vous permettent de
modifier les documents JavaScript, XML et autres documents texte directement
dans Dreamweaver. La technologie Roundtrip HTML™ de Macromedia permet
d'importer des documents HTML sans en modifier le code. Vous pouvez, par
ailleurs, paramétrer Dreamweaver pour qu'il « nettoie » et reformate le code
HTML au moment voulu.
Les fonctions d'édition visuelle de Dreamweaver vous permettent également
d'enrichir rapidement la conception et les fonctionnalités de vos pages sans avoir à
écrire 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 créés directement dans
Dreamweaver.
Dreamweaver est entièrement personnalisable. Utilisez cette application pour
créer vos propres objets et commandes, modifier les raccourcis clavier ou encore
rédiger un code JavaScript pour étendre les fonctionnalités de Dreamweaver avec
de nouveaux comportements, inspecteurs de propriétés et rapports de site.
Introduction
12
Configuration système requise
Le matériel et les logiciels suivants sont requis pour l'exécution de Dreamweaver :
Pour Microsoft Windows :
•
Processeur Intel Pentium ou équivalent, 166 MHz ou plus rapide, exécutant
Windows 95, Windows 98, Windows 2000, Windows ME ou Windows NT
(avec Server Pack 3)
•
Netscape Navigator ou Microsoft Internet Explorer version 4.0 ou ultérieure
•
32 Mo de mémoire vive (RAM), plus 110 Mo d'espace disque disponible
•
Un moniteur 256 couleurs avec une résolution de 800 x 600 pixels ou
supérieure
•
Un lecteur de CD-ROM.
Pour Macintosh :
•
Processeur Power Macintosh exécutant Mac OS 8.6 ou 9.x
•
32 Mo de mémoire vive (RAM), plus 135 Mo d'espace disque disponible
•
Un moniteur 256 couleurs avec une résolution de 800 x 600 pixels ou
supérieure
•
Un lecteur de CD-ROM.
Installation de Dreamweaver
Suivez les étapes suivantes pour installer Dreamweaver sur un ordinateur
Windows ou Macintosh.
Pour installer Dreamweaver :
1
Insérez le CD de Dreamweaver dans le lecteur de CD-ROM.
2
Choisissez parmi les options suivantes :
•
Sous Windows, choisissez
Démarrer
>
Exécuter
. Cliquez ensuite sur
Parcourir
,
puis sur le fichier Dreamweaver 4 Installer.exe sur le CD de Dreamweaver.
Cliquez sur
OK
dans la boîte de dialogue Exécuter pour commencer
l'installation.
•
Sur Macintosh, cliquez deux fois sur l'icône Installation de Dreamweaver.
3
Suivez les instructions à l'écran.
4
Redémarrez votre ordinateur si nécessaire.
Prise en main
13
Prise en main de Dreamweaver
Macromedia Dreamweaver inclut diverses ressources qui vous aideront à vous
familiariser rapidement avec le programme et à maîtriser la création de vos propres
sites et pages web. Ces ressources incluent un livre imprimé, des pages d'aide en
ligne, des animations (Visites guidées), un didacticiel et des leçons interactives.
Vous pourrez également obtenir des conseils, des notes techniques, des
informations et des exemples régulièrement mis à jour auprès du Support
technique de Dreamweaver, sur le site web de Macromedia.
Commencez par visionner les visites guidées pour vous familiariser avec les
caractéristiques de Dreamweaver. Lancez ensuite le didacticiel Dreamweaver.
Enfin, lisez les leçons Dreamweaver pour apprendre à exécuter des tâches
spécifiques.
Visites guidées
Les visites guidées présentent, sous forme d'animations, le processus de
développement web et passent en revue les caractéristiques de Dreamweaver.
Pour visionner une visite guidée, choisissez
Aide
>
Visites guidées
et cliquez sur le
titre d'une animation. A la fin de la visite, cliquez sur le bouton Accueil pour
revenir à la liste des animations, puis cliquez sur une autre visite guidée. Vous
pouvez effectuer la visite complète ou passer directement aux sections qui vous
intéressent.
Didacticiel
Le didacticiel Dreamweaver est le point de départ idéal si vous voulez acquérir une
expérience pratique de la création de pages dans Dreamweaver. Vous y apprendrez
à créer un site web avec certaines des fonctions les plus utiles et les plus puissantes
du programme. Vous le trouverez à la fois dans l'aide de Dreamweaver et dans le
manuel
Utilisation de Dreamweaver
. Vous pouvez également télécharger une
version imprimable du didacticiel à partir du site web de Macromedia.
Le didacticiel inclut des exemples de pages et d'actifs (images et fichiers
Macromedia Flash) qui vous aideront à commencer le développement d'un site
web.
Leçons Dreamweaver
Dreamweaver est fourni avec un ensemble de leçons interactives. Chaque leçon
décrit en détail la procédure permettant d'exécuter une tâche spécifique et inclut
des exemples de pages avec tous les éléments de conception et fonctionnels requis.
Utilisez ces leçons comme des guides pas à pas avec les exemples de pages ou
comme points de repère lorsque vous travaillez sur vos propres pages.
Pour rechercher une leçon, choisissez
Aide
>
Leçons
et sélectionnez un sujet.
Introduction
14
Manuel de Dreamweaver (document imprimé)
Le manuel
Utilisation de Dreamweaver
propose un équivalent papier de l'aide en
ligne et contient des informations sur l'utilisation des commandes et des
fonctionnalités de Dreamweaver. Certaines rubriques de référence consacrées aux
options du programme ne figurent pas dans cette version imprimée ; consultez les
pages d'aide pour toute information sur ces rubriques.
Si vous avez acheté la version ESD (Electronic Software Download) de
Dreamweaver, vous pouvez télécharger une version imprimable du document
Utilisation de Dreamweaver
à partir du Support technique Dreamweaver, à
l'adresse suivante : http://www.macromedia.com/support/dreamweaver/
documentation/.
Aide en ligne 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.
Pour de meilleurs résultats, utilisez de préférence Netscape Navigator 4.0 ou
Microsoft Internet Explorer 4.0 (ou versions ultérieures).
Les pages d'aide HTML de Dreamweaver font un large usage du JavaScript.
Assurez-vous que JavaScript est activé dans votre navigateur. Vérifiez également
que Java est activé dans votre navigateur si vous désirez utiliser la fonctionnalité de
recherche.
L'aide de Dreamweaver contient les composants suivants :
Le
sommaire
vous permet d'accéder à toutes les informations organisées par sujets.
Cliquez sur la ligne principale pour voir les sous-rubriques.
L'
index
peut être utilisé comme un index imprimé traditionnel : il permet de
trouver les termes importants et d'ouvrir les rubriques qui leur sont associées.
La fonction
Recherche
vous permet de trouver n'importe quelle chaîne de
caractères dans le texte de toutes les rubriques. Pour utiliser cette fonction, vous
devez disposer de la version 4.0 d'un navigateur avec Java activé.
Remarque :
lorsque vous cliquez sur Rechercher, une fenêtre de sécurité Java peut
apparaître pour vous demander l'autorisation d'ouvrir en lecture des fichiers de votre
disque dur. Vous devez accepter pour que la recherche puisse fonctionner. L'appliquette
Java n'effectue aucun enregistrement sur votre disque dur et ne lit le contenu d'aucun
fichier hormis ceux de l'aide de Dreamweaver.
Prise en main
15
•
Pour rechercher une phrase, tapez cette phrase dans la zone de saisie.
•
Pour rechercher les rubriques contenant deux mots-clés, par exemple
calque
et
style
, séparez les termes à rechercher par un signe plus (+).
Vous avez également accès à une
aide contextuelle
, représentée par un bouton
Aide dans toutes les boîtes de dialogue ou par un point d'interrogation dans les
inspecteurs, les fenêtres et les palettes. Ce bouton ou cette icône ouvrent la
rubrique d'aide appropriée.
La barre de navigation de l'aide de Dreamweaver
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 objets, des commandes, des inspecteurs de propriétés, des
comportements et des traducteurs.
Cliquez ici pour ouvrir l'aide
Introduction
16
Support technique de Dreamweaver
Le site web du support technique Dreamweaver est actualisé régulièrement. Il
propose des informations à jour sur Dreamweaver, des conseils d'utilisateurs
expérimentés, des informations sur des sujets sophistiqués, des exemples, des
conseils et des mises à jour. Consultez régulièrement ce site Web, vous y trouverez
les dernières informations sur Dreamweaver et y apprendrez à en tirer le meilleur
parti : http://www.macromedia.com/support/dreamweaver/ (en anglais).
Groupe de discussion Dreamweaver
Abordez les problèmes techniques et partagez des conseils utiles avec les autres
utilisateurs de Dreamweaver en vous connectant au groupe de discussion
Dreamweaver. Vous trouverez des informations sur l'accès au groupe de discussion
sur le site web de Macromedia, à l'adresse suivante :
http://www.macromedia.com/software/dreamweaver/discussiongroup/
(en anglais).
Déroulement du travail du développement
web
Le déroulement des opérations web commence par la définition d'une stratégie ou
d'objectifs pour le site ; vient ensuite la conception (aspect et convivialité du futur
site), puis la phase de production ou de développement (qui consiste à construire
le site et à coder les pages) ; un test est alors effectué pour contrôler les fonctions
du site et vérifier s'il répond aux objectifs définis ; le site est ensuite publié. 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 standard du
développement web : planification du site, conception, développement, test,
publication et maintenance.
Planification du 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 : la planification inclut souvent l'analyse des besoins du site, des profils de
son audience 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 opérationnelle, vous
pouvez commencer la création du site.
Prise en main
17
•Déterminez la stratégie à employer et les questions relatives aux utilisateurs à
examiner lors de la planification du site. Voir Planification et configuration de
votre site à la page 97.
•Utilisez la carte du site de Dreamweaver pour configurer la structure
organisationnelle de votre site. Dans la fenêtre Site de Dreamweaver, vous
pouvez facilement ajouter, supprimer et renommer des fichiers et des dossiers
afin de modifier l'organisation en fonction de vos besoins. Voir Gestion des
sites et collaboration à la page 109.
Si vous travaillez au sein d'une équipe de développement web, les sujets suivants
sont également susceptibles de vous intéresser :
•Configuration de systèmes pour empêcher les membres de l'équipe d'écraser les
fichiers ; voir la section Configuration du système d'archivage et d'extraction de
fichiers à la page 135.
•Utilisation de Design Notes pour communiquer avec les membres de l'équipe
web ; voir la section Enregistrement d'informations sur les fichiers dans des
Design Notes à la page 138.
Conception de pages web
La plupart des projets de conception web partent 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 en général 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.
•Créez des documents HTML dans Dreamweaver, ajoutez facilement aux pages
un titre ou une couleur d'arrière-plan. Voir Configuration d'un document à la
page 153.
•Le mode Mise en forme et les outils d'agencement de Dreamweaver vous
permettent de concevoir rapidement des pages web en dessinant, puis en
réorganisant la structure des pages. Voir Conception de la mise en forme d'une
page à la page 173.
•Utilisez le panneau Objets de Dreamweaver pour concevoir et ajouter
rapidement des tableaux, créer des documents avec des cadres, concevoir des
formulaires et travailler avec des calques. Voir Utilisation de tableaux pour
présenter du contenu à la page 191, Utilisation de cadres à la page 213,
Utilisation de calques dynamiques à la page 431 et Création de formulaires à la
page 511.
Introduction18
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.
•Le panneau Actifs vous permet d'organiser facilement les actifs sur un site ;
vous pouvez en effet faire glisser la plupart des actifs directement du panneau
dans un document Dreamweaver. Voir Gestion et insertion d'actifs à la page
231.
•Tapez directement 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 Insertion et mise en
forme de texte à la page 243.
•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 Insertion d’images à la page 281 et Utilisation conjointe de
Dreamweaver et Fireworks à la page 297.
•Insérez d'autres types de ressources dans une page web : animations Flash,
Shockwave ou QuickTime, sons, appliquettes. Voir Insertion d'éléments
multimédias à la page 315
•Ajoutez du contenu dans l'éditeur de code Dreamweaver : utilisez le mode
Affichage de code de Dreamweaver ou l'inspecteur de code pour rédiger votre
propre code HTML ou JavaScript. Voir Modification du code HTML dans
Dreamweaver à la page 339.
•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 Liens et navigation à la page 375.
•Les modèles et les fichiers de bibliothèque Dreamweaver permettent
d'appliquer facilement un contenu réutilisable dans votre site. Vous pouvez
créer de nouvelles pages à partir du modèle, puis ajouter ou modifier le contenu
dans les zones modifiables. Voir Réutilisation de contenu à l'aide de modèles et
de bibliothèques à la page 399
/
