Adobe Dreamweaver Manuel utilisateur

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.

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

Conﬁguration 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éﬁnition de la structure du site pour le didacticiel. . . . . . . . . . . . . . . .31

Déﬁnir 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ériﬁer 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éﬁnition 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 planiﬁcation et de la création du site . . . . . . . . . . . . . . .98

Conﬁguration d'un nouveau site à l'aide de Dreamweaver. . . . . . . . . .103

Modiﬁcation d'un site web existant. . . . . . . . . . . . . . . . . . . . . . . . . . .105

Modiﬁcation 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

Afﬁchage et ouverture de ﬁchiers dans la fenêtre Site. . . . . . . . . . . . . .114

Carte du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119

Utilisation de la carte du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120

Conﬁguration d'un site distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127

A propos de WebDAV et de l'intégration SourceSafe. . . . . . . . . . . . . .130

Résolution des problèmes de conﬁguration 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 ﬁchiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146

Synchronisation des ﬁchiers 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éﬁnition 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

Afﬁchage et modiﬁcation 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éﬁnition de la largeur de la présentation. . . . . . . . . . . . . . . . . . . . . .186

Déﬁnition 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 ﬁchiers du cadre et du jeu de cadres . . . . . . . . . . .220

A propos des propriétés des cadres et des jeux de cadres. . . . . . . . . . . .222

Déﬁnition des contenus de cadre avec liens . . . . . . . . . . . . . . . . . . . . .228

Gestion des navigateurs qui ne peuvent pas afﬁcher 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éﬁnition 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ériﬁcation 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éﬁnition 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 ﬁchiers Fireworks . . . . . . . . . . . .297

Exécution de Fireworks à partir de Dreamweaver . . . . . . . . . . . . . . . .301

Modiﬁcation de ﬁchiers Fireworks mis en place dans Dreamweaver . .304

Optimisation des images Fireworks et des animations mises en

place dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307

Mise à jour de ﬁchiers 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éﬁnition 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 Afﬁchage de code (ou de l'inspecteur de code) . .351

Insertion de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355

Ouverture et modiﬁcation de ﬁchiers non HTML dans

Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .358

Modiﬁcation d'une balise HTML en mode Création . . . . . . . . . . . . .359

Déﬁnition 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éﬁnition des régions modiﬁables 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 modiﬁcation 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

Conﬁguration des propriétés de calque . . . . . . . . . . . . . . . . . . . . . . . .441

Modiﬁcation de l'ordre de superposition des calques . . . . . . . . . . . . . .444

Modiﬁcation 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

Modiﬁcation 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ériﬁcation 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ériﬁcation des liens dans une page ou un site . . . . . . . . . . . . . . . . . .538

Vériﬁcation 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

Modiﬁcation du type de ﬁchier par défaut. . . . . . . . . . . . . . . . . . . . . .546

Modiﬁcation 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

Modiﬁcation du formatage HTML par défaut . . . . . . . . . . . . . . . . . .561

Utilisation des proﬁls 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

Afﬁchage des éléments de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . .581

Modiﬁcation de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .581

Modiﬁcation 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

Afﬁchage 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 Afﬁchage de code et l'inspecteur de code) qui vous permettent de

modiﬁer 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 modiﬁer 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 afﬁcher 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 modiﬁant 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, modiﬁer 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 ﬁchier 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.

Enﬁn, lisez les leçons Dreamweaver pour apprendre à exécuter des tâches

spéciﬁques.

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 ﬁn 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 ﬁchiers

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éciﬁque 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 ﬁgurent 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ériﬁez é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 ﬂè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éﬁnition 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ériﬁer s'il répond aux objectifs déﬁnis ; 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.

Aﬁn 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 : planiﬁcation 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

ﬁchiers : la planiﬁcation inclut souvent l'analyse des besoins du site, des proﬁls 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éﬁni 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 planiﬁcation du site. Voir Planiﬁcation et conﬁguration de

votre site à la page 97.

•Utilisez la carte du site de Dreamweaver pour conﬁgurer la structure

organisationnelle de votre site. Dans la fenêtre Site de Dreamweaver, vous

pouvez facilement ajouter, supprimer et renommer des ﬁchiers et des dossiers

aﬁn de modiﬁer 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 :

•Conﬁguration de systèmes pour empêcher les membres de l'équipe d'écraser les

ﬁchiers ; voir la section Conﬁguration du système d'archivage et d'extraction de

ﬁchiers à la page 135.

•Utilisation de Design Notes pour communiquer avec les membres de l'équipe

web ; voir la section Enregistrement d'informations sur les ﬁchiers 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 ﬁctives au fur et à mesure que vous progressez

dans la conception. Les maquettes afﬁchent 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 Conﬁguration 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 difﬁculté 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

Afﬁchage de code de Dreamweaver ou l'inspecteur de code pour rédiger votre

propre code HTML ou JavaScript. Voir Modiﬁcation 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 conﬁgurer 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 ﬁchiers 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 modiﬁer le contenu

dans les zones modiﬁables. Voir Réutilisation de contenu à l'aide de modèles et

de bibliothèques à la page 399

La page charge ...

Adobe Dreamweaver Manuel utilisateur

Adobe Dreamweaver Manuel utilisateur

Documents connexes

Autres documents