ADOBE Utilisation de Dreamweaver User Manual [fr]

Utilisation de Dreamweaver

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 COMMERCIABILITÉ OU SON ADÉQUATION À UN OBJECTIF PARTICULIER. L’EXCLUSION DES GARANTIES IMPLICITES N’ÉTANT PAS AUTORISÉE DANS CERTAINS ÉTATS, L’EXCLUSION CIDESSUS 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

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

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

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

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

Tables des matières

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

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

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

Tables des matières

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

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

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

Tables des matières

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

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

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.

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.

Introduction

Installation de Dreamweaver

Suivez les étapes suivantes pour installer Dreamweaver sur un ordinateur Windows ou Macintosh.

Pour installer Dreamweaver :

Insérez le CD de Dreamweaver dans le lecteur de CD-ROM.

Choisissez parmi les options suivantes :

•

Sous Windows, choisissez 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.

Suivez les instructions à l'écran.

Redémarrez votre ordinateur si nécessaire.

Démarrer

Exécuter

. Cliquez ensuite sur

Parcourir

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 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 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.

Utilisation de Dreamweaver

. Vous pouvez également télécharger une

Aide

Visites guidées

et cliquez sur le

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.

Prise en main

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 :

sommaire

vous permet d'accéder à toutes les informations organisées par sujets.

Cliquez sur la ligne principale pour voir les sous-rubriques.

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é.

Introduction

Remarque :

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.

lorsque vous cliquez sur Rechercher, une fenêtre de sécurité Java peut

Pour rechercher une phrase, tapez cette phrase dans la zone de saisie.

•

Pour rechercher les rubriques contenant deux mots-clés, par exemple

•

style

, séparez les termes à rechercher par un signe plus (+).

Vous avez également accès à une

aide contextuelle

, représentée par un bouton

calque

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.

Cliquez ici pour ouvrir l'aide

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.

Prise en main

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 divisée en plusieurs sections correspondant à cette approche standard du développement web : planiﬁcation du site, conception, développement, test, publication et maintenance.

Utilisation de Dreamweaver

a été

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.

Introduction

• 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.

Prise en main

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

Introduction18

Interactivité et 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, validez des données de formulaire sans contacter le serveur : 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 des scénarios pour créer des animations qui ne nécessitent pas de plug-

ins, de contrôles ActiveX ou de JavaScript. Les scénarios utilisent DHTML pour modiﬁer 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 Utilisation de calques dynamiques à la page 431.

• Utilisez les comportements pour exécuter des tâches en réponse à des

événements spéciﬁques, 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 ﬁni de se charger. Voir Utilisation des comportements à la page 461.

• Déboguez le code JavaScript personnalisé. Voir Débogage de code JavaScript à

la page 501.

• Utilisez des formulaires pour autoriser les visiteurs de votre site à saisir des

données directement sur la page web. Voir Création de formulaires à la page

511.

Test et 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éciﬁcations 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 modiﬁer. 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 vos sites :

Prise en main 19

• 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 Utilisation du panneau Référence de Dreamweaver à la page 348.

• Utilisez le débogueur JavaScript pour corriger les erreurs de JavaScript dans

votre code. Cet outil vous permet de déﬁnir des points d'arrêt dans le code, puis d'afﬁcher le code lorsqu'une page est mise au point directement dans Dreamweaver. Voir Débogage de code JavaScript à la page 501.

• Procédez à des vériﬁcations 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 ﬁchiers HTML. Voir Test et publication d'un site à la page 533.

• Dans la fenêtre Site de Dreamweaver, vous trouverez de nombreux outils qui

vous aideront à gérer votre site, à transférer vos ﬁchiers vers et depuis un ordinateur distant, à conﬁgurer un processus d'archivage/extraction pour empêcher l'écrasement des ﬁchiers et à synchroniser les ﬁchiers sur vos sites locaux et distants. Voir Gestion des sites et collaboration à la page 109.

Par où débuter

Ce guide contient des informations destinées à des lecteurs ayant divers niveaux d'expérience. Pour tirer le meilleur proﬁt de cette documentation, commencez par en lire les parties qui sont le mieux adaptées à votre propre niveau d'expérience.

Pour les novices en HTML :

1 Visionnez au préalable les animations des visites guidées. Dans le menu

principal de Dreamweaver, choisissez Aide > Visites guidées.

2 Passez ensuite au didacticiel de Dreamweaver. Choisissez Aide > Didacticiel ou

suivez la procédure décrite dans le manuel papier.

3 Etudiez les leçons consacrées aux sujets qui vous intéressent. Choisissez Aide >

Leçons, puis sélectionnez une leçon.

4 Parcourez les chapitres Les bases de Dreamweaver à la page 71, Planiﬁcation et

conﬁguration de votre site à la page 97, Gestion des sites et collaboration à la page 109, Liens et navigation à la page 375.

5 Pour apprendre à formater le texte et à inclure des images dans vos pages, lisez

Insertion et mise en forme de texte à la page 243 et Insertion d’images à la page

281.

Introduction20

C'est tout ce dont vous avez besoin pour commencer à réaliser des sites web de haute qualité ; lorsque vous vous sentirez prêt à utiliser des outils de mise en forme et d'interactivité plus sophistiqués, lisez la suite du manuel. Vous pouvez passer les chapitres du manuel « Personnalisation de Dreamweaver » au moins lors de votre phase de prise en main.

Pour les concepteurs web expérimentés qui utilisent Dreamweaver pour la première fois :

1 Visionnez au préalable les animations des visites guidées. Dans le menu

principal de Dreamweaver, choisissez Aide > Visites guidées.

2 Suivez le didacticiel de Dreamweaver pour assimiler les notions de base sur

l'utilisation de ce programme. Choisissez Aide > Didacticiel ou suivez la procédure décrite dans le manuel papier.

3 Etudiez les leçons consacrées aux sujets qui vous intéressent. Choisissez Aide >

Leçons, puis sélectionnez une leçon.

4 Lisez Les bases de Dreamweaver à la page 71 pour une présentation plus étoffée

de l'interface utilisateur de Dreamweaver.

5 Bien que vous soyez probablement familiarisé avec le contenu des chapitres

Gestion des sites et collaboration à la page 109 et Liens et navigation à la page 375, nous vous conseillons de les parcourir pour découvrir comment ces concepts familiers sont mis en œuvre dans Dreamweaver ; en particulier, lisez attentivement Conﬁguration d'un nouveau site à l'aide de Dreamweaver. Lisez ensuite le chapitre Gestion des sites et collaboration à la page 109.

6 Insertion et mise en forme de texte à la page 243 et Insertion d’images à la page

281 contiennent des informations utiles et détaillées sur la procédure à suivre pour créer des pages HTML élémentaires avec Dreamweaver.

7 Lisez la présentation qui débute chacun des chapitres qui suivent, pour savoir si

ces sujets présentent de l'intérêt pour vous.

Pour les concepteurs web expérimentés qui utilisent déjà Dreamweaver 3 :

1 Commencez par lire Nouveautés de Dreamweaver 4 à la page 22. Suivez les

références qui mènent aux sections abordant les nouvelles fonctionnalités de Dreamweaver.

2 Parcourez, si besoin est, Les bases de Dreamweaver à la page 71 pour vous

familiariser avec les nouveaux éléments de l'interface utilisateur Dreamweaver.

3 Suivez les leçons de Dreamweaver ; choisissez Aide > Leçons pour afﬁcher la

liste des leçons interactives disponibles.

4 Si vous êtes intéressé par les fonctions de personnalisation et d'extension de

Dreamweaver, lisez Personnalisation de Dreamweaver à la page 545.

Prise en main 21

Conventions typographiques

Ce guide utilise les conventions typographiques suivantes :

• 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 4

Les nouvelles fonctionnalités de Dreamweaver 4 perfectionnent l'édition HTML, simpliﬁent la conception des pages, développent la gestion du site et des actifs, vous aident à créer vos propres objets Flash, rationalisent le déroulement des opérations, améliorent la collaboration de l'équipe et vous permettent de personnaliser et d'étendre Dreamweaver.

Modification du code améliorée

La barre d'outils Dreamweaver vous permet de gérer l'afﬁchage d'une page en

choisissant le mode Création, le mode Afﬁchage de code ou un afﬁchage combinant les deux modes. La barre d'outils offre un accès simpliﬁé aux fonctions les plus courantes (Aperçu dans le navigateur, Design Notes, etc.). Voir Débogage de code JavaScript à la page 501.

Le mode Affichage de code offre un nouveau moyen de visualiser le code source

HTML directement dans la fenêtre de document de Dreamweaver. Voir Ouverture du mode Afﬁchage de code (ou de l'inspecteur de code) à la page 352. Vous pouvez également modiﬁer les documents non-HTML, tels les ﬁchiers JavaScript et XML, directement dans Dreamweaver en mode Afﬁchage de code. Voir Insertion de scripts à la page 355.

Deux éditeurs de codes intégrés à la pointe de la technologie sont désormais

inclus dans Dreamweaver : le mode Afﬁchage de code et l'inspecteur de code. Le menu Options de ces deux éditeurs vous permet, entre autres, de conﬁgurer les retours à la ligne automatiques, les retraits du code, la coloration de la syntaxe interactive, etc. Voir Déﬁnition des options du mode Afﬁchage de code (ou de l'inspecteur de code) à la page 353.

Le panneau Référence est un outil de référence rapide pour HTML, JavaScript et

CSS. Il propose des informations sur les balises spéciﬁques utilisées dans le mode Afﬁchage de code (ou dans l'inspecteur de code). Voir Utilisation du panneau Référence de Dreamweaver à la page 348.

Introduction22

Le menu déroulant Navigation dans le code permet de sélectionner le code pour

les fonctions JavaScript dans une page ; grâce à ce menu, vous pouvez parcourir rapidement le code JavaScript lorsque vous travaillez en mode Afﬁchage de code. Voir Afﬁchage des fonctions de script à la page 357.

Le Débogueur JavaScript permet de déboguer les documents JavaScript dans

Dreamweaver. Par exemple, vous pouvez déﬁnir des points d'arrêt pour contrôler le code que vous voulez examiner. Voir Débogage de code JavaScript à la page 501.

Conception des pages simplifiée

Le mode Mise en forme permet de concevoir rapidement vos pages web en traçant

des rectangles (tableaux ou cellules) auxquels vous pouvez ajouter du contenu. Voir Dessin de cellules et de tableaux de mise en forme à la page 176.

Les modèles améliorés simpliﬁent l'identiﬁcation des zones modiﬁables dans un

ﬁchier de modèle. Les modèles afﬁchent maintenant un onglet qui contient le nom de la région modiﬁable et un cadre de délimitation. Voir Création d'un modèle à la page 401.

Les feuilles de style peuvent à présent être déﬁnies dès que vous créez un nouveau

style. Il est également possible de rattacher facilement une feuille de style CSS existante à un bouton dans le panneau Styles CSS. Voir Utilisation de feuilles de style CSS à la page 259.

Intégration améliorée

Les boutons et le texte Flash sont maintenant intégrés directement à

Dreamweaver. Vous pouvez choisir parmi un ensemble de boutons Flash prédéﬁnis et les insérer dans votre document ou demander à votre concepteur Flash de créer pour vous des modèles de boutons personnalisés. Voir Utilisation des objets de bouton Flash à la page 319 et Utilisation d'objets de texte Flash à la page 322.

Le découpage Roundtrip vous permet de travailler de façon transparente dans

Dreamweaver et Fireworks 4. Vous pouvez modiﬁer et mettre à jour les images et les tableaux HTML importés depuis Fireworks. Vous pouvez également effectuer des modiﬁcations dans Dreamweaver ou Fireworks et conserver ces modiﬁcations dans les deux applications. Voir Modiﬁcation de ﬁchiers Fireworks mis en place dans Dreamweaver à la page 304.

Le sélecteur de couleurs sécurisées pour le web permet d'établir facilement une

correspondance entre les couleurs et les graphiques. D'un simple clic, vous pouvez sélectionner une couleur n'importe où sur le bureau : le sélecteur de couleurs s'aligne automatiquement sur la couleur sécurisée pour le web la plus proche. Voir Utilisation des couleurs à la page 88.

Prise en main 23

Rationalisation du déroulement des opérations

Le panneau Actifs vous permet de gérer les actifs de votre site. Vous pouvez

afﬁcher l'ensemble des images, couleurs, URL externes, scripts, animations Flash, Shockwave et QuickTime, modèles et éléments de bibliothèque dans un emplacement centralisé. Prévisualisez les actifs, puis faites-les glisser à l'emplacement approprié dans votre document HTML. Enregistrez les actifs que vous utilisez fréquemment dans une liste de favoris et réutilisez-les dans différents sites. Voir Utilisation du panneau Actifs à la page 232 et Utilisation d'actifs favoris à la page 239.

Une version améliorée de Design Notes vous permet d'associer des remarques à un

ﬁchier pour effectuer le suivi des modiﬁcations ou échanger des idées sur les problèmes de développement avec les autres membres de l'équipe. Vous pouvez insérer et afﬁcher vos commentaires directement dans la fenêtre Site de Dreamweaver. Voir A propos des Design Notes à la page 138 et Utilisation des rapports pour améliorer le déroulement du travail à la page 145.

La messagerie intégrée vous permet de communiquer avec les autres membres de

votre équipe. Lorsqu'un autre membre de l'équipe extrait un ﬁchier, vous pouvez maintenant cliquer sur son nom pour lui envoyer un message. Voir Conﬁguration du système d'archivage et d'extraction de ﬁchiers à la page 135.

La génération de rapports de site vous permet de recourir à différents rapports

prédéﬁnis pour tester les problèmes courants aux documents HTML (documents sans titre, balises alt manquantes, etc.). Vous pouvez également rédiger des rapports personnalisés en fonction de vos besoins, afﬁcher les résultats d'un rapport et ouvrir des ﬁchiers d'incidents à l'intérieur de la fenêtre de résultats. Voir Conﬁguration du système d'archivage et d'extraction de ﬁchiers à la page 135 et Création de rapports à la page 542.

Intégration de SourceSafe Si vous possédez SourceSafe, vous pouvez à présent y

archiver ou en extraire des ﬁchiers tout en travaillant dans Dreamweaver. Voir Utilisation de Dreamweaver avec Visual SourceSafe à la page 132.

Intégration de WebDAV Vous pouvez maintenant utiliser Dreamweaver pour

transférer des ﬁchiers à l'aide du protocole WebDAV. Voir Utilisation de Dreamweaver avec le protocole WebDAV à la page 131.

Le logiciel Extension Manager permet d'installer facilement des extensions avec un

simple clic. Visitez le site web de Macromedia Exchange et téléchargez des extensions qui simpliﬁeront votre travail. Voir Ajout d'extensions dans Dreamweaver à la page 95.

Introduction24

Interface utilisateur commune

Les raccourcis clavier ont une nouvelle interface, commune à tous les produits de

publication sur le web de Macromedia. Cette interface vous permet de modiﬁer les raccourcis clavier existants, d'en créer de nouveaux pour les éléments des menus et de supprimer ceux dont vous n'avez pas besoin. Vous pouvez également basculer entre des ensembles de conﬁgurations de raccourcis clavier. Voir Utilisation de l'éditeur de raccourcis clavier à la page 92.

La gestion des fenêtres a été améliorée : une fenêtre est maintenant ancrée sur sa

position. Lorsque vous ouvrez une nouvelle fenêtre, Dreamweaver l'empêche de chevaucher les panneaux visibles.

Les panneaux ont un nouveau look Macromedia et leur comportement a été

harmonisé dans tous les produits de publication pour le web. Tous les panneaux intègrent des icônes et du texte qui permettent de les identiﬁer sans difﬁculté. Sur les systèmes Windows et Macintosh, tous les panneaux utilisent les couleurs et les polices système, ainsi que des comportements d'ancrage et de déplacement homogènes.

Ressources sur le langage HTML et les technologies web

Voici quelques ressources utiles disponibles sur le Web :

HTML 4.0 Specification (http://www.w3.org/TR/REC-html40/) contient les

spéciﬁcations ofﬁcielles du langage HTML, déﬁnies par le World Wide Web Consortium.

Index DOT Html (http://www.blooberry.com/indexdot/html/) afﬁche une liste

complète des balises, attributs et valeurs HTML, ainsi que leur compatibilité respective avec les divers navigateurs.

ZDNet Developer Tag Library (http://www.zdnet.com/devhead/resources/

tag_library/) propose un autre catalogue d'informations sur toutes les balises HTML.

The Cascading Style Sheets, level 1 specification (CSS1) (http://www.w3.org/TR/

REC-CSS1) sont les spéciﬁcations ofﬁcielles des feuilles de style CSS, par le World Wide Web Consortium.

Web Review's Style Sheets Reference Guide (http://webreview.com/guides/style/

style.html) traite des styles CSS et de leur compatibilité avec les divers navigateurs.

« 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) dans vos pages.

Prise en main 25

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 titres de livres et même des programmeurs à votre disposition.

The Common Gateway Interface site (http://hoohoo.ncsa.uiuc.edu/cgi/) comporte

une présentation des scripts CGI.

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).

The Dynamic HTML Events page (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.

Les pages ASP Overview de Microsoft(http://msdn.microsoft.com/workshop/

server/asp/ASPover.asp) offrent des informations sur les pages ASP (Active Server Pages).

Sun’s JSP page (http://java.sun.com/products/jsp/) offre des informations sur les

pages JSP (JavaServer Pages).

Les pages PHP (http://www.php.net/) proposent des informations sur PHP

(PHP Hypertext Preprocessor).

La page sur le produit ColdFusion d'Allaire (http://www.coldfusion.com/Products/

ColdFusion/) propose des informations sur ColdFusion.

Le site XML.com (http://www.xml.com) propose des informations, des

didacticiels et des conseils sur XML (Extensible Markup Language) et autres technologies web.

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.

Accessibilité et Dreamweaver

Macromedia prend en charge la création de sites web de qualité accessibles à tous, y compris aux personnes souffrant de handicaps. Nous encourageons la mise en œuvre de normes internationales destinées à aider les développeurs de sites accessibles, notamment les instructions du World Wide Web Consortium (W3C). De nombreuses règlementations gouvernementales, y compris aux Etats-Unis, se réfèrent aux instructions du W3C. Ces instructions encouragent les développeurs à adopter des pratiques de conception et de codage pour rendre le contenu web accessible, et nombre d’entre elles sont prises en charge par les logiciels Macromedia. Pour de plus amples informations sur les instructions du W3C, consultez les instructions de conception du contenu web (http://www.w3.org/TR/ WAI-WEBCONTENT/full-checklist.html).

Introduction26

Pour obtenir des informations récentes sur les fonctionnalités des produits et les ressources prenant en charge une conception accessible, consultez la page d’accessibilité de Macromedia (http://www.macromedia.com/accessibility/ en anglais).

Prise en main 27

Introduction28

+ 592 hidden pages