ADOBE Dreamweaver 8 Mise A Jour User Manual [fr]

Bien démarrer avec Dreamweaver

Marques commerciales

Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, Cold Fusion, Contribute, Design in Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite,
JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live
Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo & Design,
Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo
and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip HTML, Shockwave, Sitespring,
SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be et Xtra sont des marques 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.

Informations tierces

Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et Macromedia ne peut en aucun
cas être tenu responsable du contenu de ces sites. Si vous accédez à l’un de ces sites, vous le faites à vos propres risques.
Macromedia propose ces liens dans un but pratique uniquement et ne peut en aucun cas endosser ou accepter la responsabilité du
contenu de ces sites tiers.

Vous trouverez des informations sur les logiciels tiers et/ou d’autres conditions générales à l’adresse suivante :
http://www.macromedia.com/go/thirdparty_fr/.

Opera ® browser Copyright © 1995-2002 Opera Software ASA et ses fourniseurs. Tous droits réservés.

Dénégation de responsabilité d’Apple

APPLE COMPUTER, INC. N’ASSUME AUCUNE GARANTIE, IMPLICITE OU EXPLICITE, SUR LE LOGICIEL
INFORMATIQUE CI-INCLUS, SA COMMERCIABILITE OU SON ADEQUATION A UN OBJECTIF
PARTICULIER. L’EXCLUSION DES GARANTIES IMPLICITES N’ETANT PAS AUTORISEE DANS CERTAINS
ETATS, L’EXCLUSION CI-DESSUS PEUT DONC NE PAS S’APPLIQUER A VOTRE CAS. CETTE GARANTIE VOUS
OFFRE DES DROITS JURIDIQUES SPECIFIQUES. VOUS POUVEZ DISPOSER DE CERTAINS AUTRES DROITS,
QUI VARIENT SELON LES ETATS.

Copyright © 1997-2003 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit,
traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l’autorisation écrite préalable
de Macromedia, Inc. Numéro de référence ZDW70M100F

Remerciements

Direction : Sheila McGinn

Gestion de projet : Charles Nadeau

Rédaction : Jed Hartman

Mise en forme : Lisa Stanziano, Mary Ferguson

Gestion de la production : Patrice O’Neill

Conception et production média : Adam Barnett, Chris Basmajian, Aaron Begley, John Francis, Jeff Harmon

Remerciements particuliers à Jay London, David Deming, Jennifer Taylor, Lori Hylan-Cho, Dominic Sagolla, Mary Ann Walsh,
Jennifer Rowe, Chris Bedford, Jon Varese, Rosana Francescato, Bonnie Loo, Gwenael Cossoul, Luciano Arruda, Masayo Noda,
Richard Clairicia, Scott Richards, Seungmin Lee, Vincent Truong, Birnou Sébarte et les équipes d’ingénierie et de contrôle
qualité de Dreamweaver.

Première édition : Septembre 2003

Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103

TABLE DES MATIERES

INTRODUCTION : Bienvenue dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 7

Notions de base de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Utilisation de ce guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Autres ressources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Installation et exécution de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Configuration système requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Installation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Activation Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Utilisation de Dreamweaver dans un environnement multiutilisateur . . . . . . . . 10

Enregistrement de Dreamweaver MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Affichage de l’exemple de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

CHAPITRE 1 : L’espace de travail Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 13

Choix de la présentation de l'espace de travail (sous Windows uniquement) . . . . . 14

Présentation des fenêtres et des panneaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Présentation des menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

CHAPITRE 2 : Configuration rapide de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

A propos des sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Création d’un site : présentation du déroulement du travail. . . . . . . . . . . . . . . . . . 18

Définition d’un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Définition d’un dossier local à l’aide de l’assistant de définition d’un site . . . . . 20

Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Téléchargez vos fichiers locaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

CHAPITRE 3 : Didacticiel : Création d’une page statique . . . . . . . . . . . . . . . . . . . 27

Ouverture et enregistrement d’une nouvelle page . . . . . . . . . . . . . . . . . . . . . . . . . 27

Ajout d’un espace réservé pour une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Définition d’un titre de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

3

Ajout de texte formaté . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Ajout de styles au texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Ajout d’images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Définition de couleurs d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

CHAPITRE 4 : Didacticiel : Modification du code . . . . . . . . . . . . . . . . . . . . . . . . . 39

Affichage du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Activation de l’espace de travail de codage (Windows uniquement) . . . . . . . . . . . . 41

Ajout d’une balise à l’aide du sélecteur de balises . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Modification d’une balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Consultation des informations relatives à une balise . . . . . . . . . . . . . . . . . . . . . . . 44

Ajout d’une image à l’aide des indicateurs de code. . . . . . . . . . . . . . . . . . . . . . . . . 45

Vérification des modifications apportées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Impression du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

CHAPITRE 5 : Didacticiel : Lien et aperçu de pages . . . . . . . . . . . . . . . . . . . . . . 49

Création d’une seconde page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Ajout de liens texte entre des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Création d’une barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Copie de la barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Aperçu des pages dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Configuration d’un site distant et publication . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

CHAPITRE 6 : Description des applications Web. . . . . . . . . . . . . . . . . . . . . . . . . 57

A propos des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Utilisations courantes des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Exemple d’application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Fonctionnement d’une application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Traitement des pages Web statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Traitement des pages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Accès à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Création de pages dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Choix d’une technologie de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Terminologie du développement d’applications Web. . . . . . . . . . . . . . . . . . . . . . . 67

CHAPITRE 7 : Didacticiel : Développement d’une application Web. . . . . . . . . . . 71

Avant de commencer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Ouverture d’un document de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Définition d’un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Affichage des enregistrements de la base de données . . . . . . . . . . . . . . . . . . . . . . . 77

Ajout de champs dynamiques au tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Définition d’une région répétée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Affichage des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

4 Table des matières

Création d’un formulaire d’insertion d’enregistrement. . . . . . . . . . . . . . . . . . . . . . 80

Ajout d’un objet d’application Formulaire d’insertion d’enregistrement . . . . . . 80

Création du formulaire d’insertion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

Copie des fichiers sur le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

CHAPITRE 8 : Installation d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Bien démarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Installation de Personal Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Installation d’Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Tester PWS ou IIS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Test du serveur Web Macintosh (développeurs PHP) . . . . . . . . . . . . . . . . . . . . . . 90

Fonctions élémentaires du serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

CHAPITRE 9 : Configuration d’un exemple de site ColdFusion . . . . . . . . . . . . . . 93

Aide-mémoire pour la configuration à l’intention des développeurs ColdFusion . . 93

Configuration du système (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Installation de ColdFusion MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Définition d’un site Dreamweaver (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . . 98

Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Connexion à l’exemple de base de données (ColdFusion) . . . . . . . . . . . . . . . . . . . 99

Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 100

Création d’une source de données ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . 100

Connexion à la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

CHAPITRE 10 : Configuration d’un exemple de site ASP.NET. . . . . . . . . . . . . . 103

Aide-mémoire pour la configuration à l’intention des développeurs ASP.NET. . . 103

Configuration du système (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Recherche d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Installation de la plate-forme .NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Définition d’un site Dreamweaver (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . 109

Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Connexion à l’exemple de base de données (ASP.NET) . . . . . . . . . . . . . . . . . . . . 111

Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 111

Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 111

Table des matières 5

CHAPITRE 11 : Configuration d’un exemple de site ASP . . . . . . . . . . . . . . . . . . 113

Aide-mémoire pour la configuration à l’intention des développeurs ASP. . . . . . . 114

Configuration du système (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Recherche d’un serveur Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Installation d’un serveur d’application ASP. . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Test de l’installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Définition d’un site Dreamweaver (ASP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . 121

Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Connexion à l’exemple de base de données (ASP) . . . . . . . . . . . . . . . . . . . . . . . . 122

Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 122

Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 123

CHAPITRE 12 : Configuration d’un exemple de site JSP . . . . . . . . . . . . . . . . . . 125

Aide-mémoire pour la configuration à l’intention des développeurs JSP . . . . . . . 126

Configuration du système (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Recherche d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Installation d’un serveur d’application JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Définition d’un site Dreamweaver (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . 132

Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Connexion à l’exemple de base de données (JSP). . . . . . . . . . . . . . . . . . . . . . . . . 133

Installation du pilote de pont . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 134

Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 135

CHAPITRE 13 : Configuration d’un exemple de site PHP. . . . . . . . . . . . . . . . . . 137

Aide-mémoire pour la configuration à l’intention des développeurs PHP . . . . . . 138

Configuration du système (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Configuration du système Windows (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Configuration du système Macintosh (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . 143

Définition d’un site Dreamweaver PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Définition du dossier de traitement des pages dynamiques (PHP) . . . . . . . . . 146

Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Connexion à l’exemple de base de données (PHP). . . . . . . . . . . . . . . . . . . . . . . . 148

Création de la base de données MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 150

6 Table des matières

INTRODUCTION

Bienvenue dans Dreamweaver

Ce guide a pour objectif de vous faire découvrir les principales fonctions de Macromedia
Dreamweaver MX 2004 et leur utilisation. Les didacticiels de ce guide expliquent comment créer
un site Web simple et fonctionnel.

Dreamweaver MX 2004 est un éditeur HTML professionnel destiné à la conception, au codage et
au développement de sites, de pages et d’applications Web. Quel que soit l’environnement de
travail utilisé (codage manuel HTML ou environnement d’édition visuel), Dreamweaver propose
des outils qui vous aideront à créer des applications Web.

Les fonctions d’édition visuelles de Dreamweaver vous permettent de créer rapidement des pages
sans rédiger une seule ligne de code. Si vous préférez faire appel au codage manuel, Dreamweaver
intègre également de nombreux outils et fonctions de codage. Avec Dreamweaver, vous pouvez
créer des applications Web dynamiques reposant sur des bases de données à l’aide de langages
serveur tels que ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP et PHP.

Remarque : Ce guide ne présente pas toutes les fonctions de Dreamweaver MX 2004 et ne
constitue pas non plus une introduction à la conception Web. Pour plus d’informations sur
Dreamweaver, voir l’aide de Dreamweaver (sélectionnez Utilisation de Dreamweaver dans le menu
Aide).

Ce chapitre contient les sections suivantes :

• Notions de base de Dreamweaver, page 8

• Installation et exécution de Dreamweaver, page 9

• Affichage de l’exemple de site, page 11

7

Notions de base de Dreamweaver

Pour apprendre à utiliser Dreamweaver, commencez par lire ce guide de démarrage Bien démarrer
avec Dreamweaver. Ensuite, consultez d’autres sources, telles que le système d’aide ou le centre de

support Macromedia.

Utilisation de ce guide

Ce guide comprend plusieurs chapitres. Il est recommandé de les lire dans l’ordre suivant :

1 Cette introduction expose les principes élémentaires de l’installation et de l’utilisation de

Dreamweaver.

2 L’espace de travail Dreamweaver, page 13, présente l’espace de travail de Dreamweaver MX 2004

de manière générale.

3 Configuration rapide de site, page 17, explique comment configurer un site. Lorsque vous aurez

lu ce chapitre de configuration, vous pourrez si vous le souhaitez essayer directement de créer
vos propres sites sans lire le reste du guide.

4 Si vous avez déjà créé des pages Web mais que vous n’avez jamais travaillé sur Dreamweaver,

suivez les didacticiels consacrés aux sites statiques : Didacticiel : Création d’une page statique,

page 27, Didacticiel : Modification du code, page 39 et Didacticiel : Lien et aperçu de pages,
page 49. Ces didacticiels décrivent les opérations de base que vous devez effectuer pour créer un

petit site Web statique à l’aide des outils de programmation visuels de Dreamweaver. Ils
décrivent également les principes élémentaires d’utilisation des outils permettant de modifier
directement le code dans Dreamweaver.

5 Si vous souhaitez vous familiariser avec le concept d’application Web, consultez le chapitre

Description des applications Web, page 57.

6 Si vous souhaitez en savoir plus sur le développement d’applications Web, commencez par

choisir une technologie de serveur (ColdFusion, ASP.NET, ASP, JSP ou PHP), puis consultez
le chapitre approprié : Configuration d’un exemple de site ColdFusion, page 93, Configuration d’un

exemple de site ASP.NET, page 103, Configuration d’un exemple de site ASP, page 113,
Configuration d’un exemple de site JSP, page 125 ou Configuration d’un exemple de site PHP,

page 137.

7 Le cas échéant, vous devrez peut être installer un serveur Web ; pour cela, suivez les instructions

du chapitre Installation d’un serveur Web, page 87.

8 Pour apprendre à développer une application Web simple reposant sur une base de données à

l’aide de Dreamweaver, suivez le didacticiel consacré aux applications Web : Didacticiel :

Développement d’une application Web, page 71.

Lorsque vous étudiez un chapitre, il est recommandé de le faire dans l’ordre chronologique.

Les leçons de ce guide utilisent des mises en forme de page et des échantillons fournis avec
Dreamweaver. Si vous le souhaitez, vous pouvez créer votre premier site Dreamweaver avec vos
propres mises en forme et contenu. Toutefois, il est plus facile de suivre les leçons si vous utilisez
les exemples inclus dans le programme.

Autres ressources

Dreamweaver comprend diverses ressources qui vous aideront à vous familiariser rapidement avec
le programme et à créer facilement vos propres sites et pages Web.

L’aide de Dreamweaver comporte des informations exhaustives sur l’utilisation des fonctions de

Dreamweaver. L’aide de Dreamweaver s’affiche dans le visualisateur d’aide fourni avec votre
système d’exploitation : Microsoft HTML Help (Windows) ou Aide Apple (Macintosh).

8 Introduction : Bienvenue dans Dreamweaver

Utilisation de Dreamweaver est une version PDF de l’aide de Dreamweaver qui fournit des

informations sur l’utilisation des commandes et des fonctions de Dreamweaver. Certaines
rubriques de référence ne sont pas incluses dans la version PDF. Pour plus d’informations sur ces
rubriques, voir l’aide de Dreamweaver. Le fichier PDF est disponible sur le CD de Dreamweaver.

du centre de support de Dreamweaver (www.macromedia.com/go/dreamweaver_support_fr/)

est actualisé régulièrement. Il propose des informations à jour sur Dreamweaver, ainsi que des
conseils donnés par des utilisateurs expérimentés, des exemples, des conseils généraux, des mises à
jour et des informations sur des sujets plus techniques.

Le Centre des développeurs de Macromedia (www.macromedia.com/go/developer_fr/)

propose des outils, des didacticiels et bien plus encore pour tous les produits Macromedia.

Pour plus d’informations sur d’autres ressources proposant des informations et des instructions
sur Dreamweaver, voir Guide des supports de formation à Dreamweaver dans l’aide de
Dreamweaver (Aide > Utilisation de Dreamweaver).

Conventions typographiques

Ce manuel utilise les conventions typographiques suivantes :

• Les éléments de menus sont indiqués de la manière suivante : nom du menu > nom de

l’élément de menu. Les éléments de sous-menus sont indiqués de la manière suivante : nom du
menu > nom du sous-menu > nom de l’élément de menu.

• Police de code indique les noms des balises et attributs HTML, ainsi que le texte utilisé

littéralement dans les exemples.

• Police de code en italique indique les éléments remplaçables (parfois appelés

métasymboles) dans le code.

• Texte en gras indique le texte que vous devez saisir exactement à l’identique.

Installation et exécution de Dreamweaver

Cette section décrit la configuration système requise pour exécuter Dreamweaveret explique
comment installer Dreamweaver. Elle indique également comment personnaliser Dreamweaver
en fonction de vos préférences sur un système d’exploitation multiutilisateur tel que Windows XP
ou Mac OS X.

Configuration système requise

Vous devez vous équiper du matériel et des logiciels suivants pour exécuter Dreamweaver :

Configuration système requise dans Microsoft Windows :

• Processeur Intel Pentium III ou équivalent, 600 MHz ou vitesse supérieure

• Windows 98, Windows 2000, Windows XP ou Windows .NET Server 2003

• Au minimum 128 Mo de mémoire RAM disponible (256 Mo recommandés)

• 275 Mo d’espace disque disponible

• Moniteur 16 bits (couleurs) d’une résolution de 1024 x 768 pixels ou supérieur (résolutions en

millions de couleurs recommandées)

Installation et exécution de Dreamweaver 9

Configuration système requise sur un ordinateur Macintosh d’Apple :

• Power Macintosh G3 ou supérieur, 500 MHz ou vitesse supérieure

• Mac OS X 10.2.6

• Au minimum 128 Mo de mémoire RAM disponible (256 Mo recommandés)

• 275 Mo d’espace disque disponible

• Moniteur 16 bits (couleurs) d’une résolution de 1024 x 768 pixels ou supérieur (résolutions en

millions de couleurs recommandées)

Installation de Dreamweaver

Suivez les étapes ci-dessous pour installer Dreamweaver sur un ordinateur Windows ou
Macintosh.

Remarque : Sur certains systèmes d’exploitation, vous pouvez installer ou désinstaller Dreamweaver
uniquement si vous disposez de privilèges administratifs sur votre ordinateur. Pour plus
d’informations, voir Utilisation de Dreamweaver dans un environnement multiutilisateur, page 10.

Pour installer Dreamweaver :

1 Insérez le CD de Dreamweaver dans le lecteur de CD-ROM.
2 Double-cliquez sur l’icône d’installation de Dreamweaver MX 2004.
3 Suivez les instructions à l’écran.
4 Redémarrez votre ordinateur si nécessaire.

Activation Dreamweaver

Si vous disposez d’une licence pour utilisateur unique, vous devez activer votre licence sous trente
jours après installation du programme. Cette activation peut être effectuée rapidement et en toute
simplicité via Internet ou par téléphone. Aucune information personnelle ne vous sera demandée.
Il vous suffit de fournir le numéro de série du produit. Pour plus d’informations, visitez le Centre
d’activation des produits Macromedia à l’adresse suivante : www.macromedia.com/go/

activation_fr.

Utilisation de Dreamweaver dans un environnement multiutilisateur

Avec un système d’exploitation multiutilisateur tel que Windows 2000, Windows XP ou
Mac OS X, les applications sont généralement installées dans un dossier à partir duquel elles
peuvent être exécutées, par exemple le dossier C:\Program Files (Windows) ou /Applications
(Macintosh). Sur un système d’exploitation multiutilisateur, seuls les utilisateurs dotés de
privilèges administratifs peuvent installer des applications dans ces dossiers.

Vous pouvez personnaliser Dreamweaver de plusieurs façons. Dreamweaver empêche que la
configuration personnalisée d’un utilisateur n’affecte celle d’un autre. Pour éviter que votre
configuration n’en affecte une autre, la première fois que vous exécutez Dreamweaver sur l’un des
systèmes multiutilisateurs reconnus, l’application crée automatiquement des copies de divers
fichiers de configuration. Ces fichiers sont enregistrés dans un dossier vous appartenant.

Remarque : Sur des systèmes d’exploitation plus anciens (par exemple, Windows 98), un seul
groupe de fichiers de configuration Dreamweaver est partagé par tous les utilisateurs, même si la
configuration du système d’exploitation prend en charge plusieurs utilisateurs.

10 Introduction : Bienvenue dans Dreamweaver

Si vous réinstallez Dreamweaver ou si vous le mettez à niveau après avoir installé
Dreamweaver MX 2004, Dreamweaver crée automatiquement des copies de sauvegarde des
fichiers de configuration utilisateur existants. Par conséquent, si vous avez personnalisé
manuellement ces fichiers, vous pouvez toujours accéder aux modifications que vous avez
apportées. Pour plus d’informations sur la personnalisation manuelle des fichiers de
configuration, voir Personnalisation de Dreamweaver dans l’aide Extension de Dreamweaver
(Aide > Extensions > Extension de Dreamweaver).

Lorsque vous désinstallez Dreamweaver d’un système multiutilisateur, Dreamweaver supprime
chaque dossier de configuration utilisateur.

Enregistrement de Dreamweaver MX 2004

Pour bénéficier du support technique de Macromedia, nous vous conseillons d’enregistrer votre
copie de Macromedia Dreamweaver MX 2004 en envoyant un courrier électronique ou postal.

Lorsque vous vous enregistrez, vous pouvez demander à recevoir des informations de dernière
minute concernant les mises à niveau et les nouveaux produits Macromedia. Vous pouvez
également être averti par courriel de chaque mise à jour des produits sur les sites Web
www.macromedia.com et www-euro.macromedia.com.

Pour enregistrer Macromedia Dreamweaver MX 2004, procédez de l’une des manières
suivantes :

• Sélectionnez Aide > Activation > Enregistrement en ligne et remplissez le formulaire

électronique.

• Sélectionnez Aide > Activation > Imprimer l’enregistrement, imprimez le formulaire et

envoyez-le à l’adresse indiquée sur le formulaire.

Affichage de l’exemple de site

Les exemples utilisés dans ce guide sont extraits d’un petit exemple de site développé pour une
société fictive appelée Trio Motors. Avant de commencer les didacticiels, affichez l’exemple de site
dans un navigateur pour vous faire une idée de l’objectif à atteindre.

Pour afficher l’exemple de site dans un navigateur :

1 Ouvrez le dossier Samples dans le dossier de l’application Dreamweaver. Ouvrez le dossier

GettingStarted, puis le dossier FinalSite.

2 Ouvrez le fichier index.html (dans le dossier FinalSite) dans un navigateur.
3 Après avoir consulté l’exemple de site, passez au chapitre suivant de ce guide.

Affichage de l’exemple de site 11

12 Introduction : Bienvenue dans Dreamweaver

CHAPITRE 1

L’espace de travail Dreamweaver

Sous Windows, Dreamweaver MX 2004 se présente sous la forme d’un espace de travail intégré
en une seule fenêtre. Dans l’espace de travail intégré, toutes les fenêtres et tous les panneaux sont
rassemblés dans une grande fenêtre d’application. Vous avez le choix entre une présentation axée
sur la conception et une autre axée sur les besoins des codeurs manuels.

Sur Macintosh, Dreamweaver se présente sous la forme d’un espace de travail flottant, dans lequel
chaque document est localisé dans une fenêtre individuelle. Les groupes de panneaux sont
initialement ancrés ensemble, mais vous pouvez les séparer pour les faire apparaître dans leur propre
fenêtre. Les fenêtres s’alignent automatiquement les unes sur les autres sur les côtés de l’écran et sur
la fenêtre du document au fur et à mesure que vous les faites glisser ou que vous les redimensionnez.

Remarque : Vous pouvez personnaliser votre espace de travail en réorganisant les groupes de
panneaux ; pour plus d’informations, voir l’aide Utilisation de Dreamweaver.

Ce chapitre contient les sections suivantes :

• Choix de la présentation de l'espace de travail (sous Windows uniquement), page 14

• Présentation des fenêtres et des panneaux, page 15

• Présentation des menus, page 16

13

Choix de la présentation de l'espace de travail (sous Windows uniquement)

Lorsque vous lancez Dreamweaver pour la première fois dans Windows, une boîte de dialogue
vous demande de choisir une présentation d’espace de travail. Vous pourrez choisir un autre type
de présentation ultérieurement, à partir de la boîte de dialogue Préférences.

Pour choisir la présentation de l’espace de travail :

• Sélectionnez l’une des options suivantes :

Espace de travail Designer : il s’agit d’un espace de travail intégré utilisant l’interface MDI

(Multiple Document Interface), dans laquelle toutes les fenêtres de document et tous les
panneaux sont rassemblés dans une grande fenêtre d’application, les groupes de panneaux étant
ancrés sur la droite. C’est la présentation recommandée pour la plupart des utilisateurs.

Remarque : Dans la quasi-totalité de ce guide, nous supposons que vous utilisez l’espace de travail
Designer.

Espace de travail Codeur

: correspond au même espace de travail intégré, mais avec les groupes
de panneaux ancrés sur la gauche, dans une présentation similaire à celle utilisée par Macromedia
HomeSite et Macromedia ColdFusion Studio. La fenêtre de document affiche le mode Code par
défaut. Cette présentation est recommandée pour les utilisateurs de HomeSite ou ColdFusion
Studio et les autres utilisateurs habitués au codage manuel qui préfèrent travailler dans un espace
de travail familier.

Remarque : Ces deux espaces de travail autorisent l’ancrage des groupes de panneaux à droite ou à
gauche.

14 Chapitre 1 : L’espace de travail Dreamweaver

Présentation des fenêtres et des panneaux

B

L’utilisation de ces outils est abordée dans les différentes sections de ce guide ; pour plus
d’informations, voir l’aide Utilisation de Dreamweaver.

arre Insérer

Barre d’outils du document

Fenêtre de document

Groupes de panneaux

Inspecteur de propriétés

Sélecteur de balises

La page de démarrage (aucune illustration disponible) permet d’ouvrir un document récent ou

Panneau Fichiers

de créer un nouveau document. Elle contient également des informations complémentaires sur
Dreamweaver (présentation du produit, didacticiels).

La barre Insérer contient des boutons permettant d’insérer divers types d’« objets », tels que des

images, tableaux et calques dans un document. Chaque objet est une portion de code HTML
vous permettant de définir des attributs lors de son insertion. Par exemple, vous pouvez insérer un
tableau en cliquant sur le bouton Tableau de la barre Insérer. Si vous le préférez, vous pouvez
insérer les objets à partir du menu Insertion.

La barre d’outils du document contient des boutons et des menus déroulants permettant

d’accéder aux différents modes d’affichage de la fenêtre du document (tels que le mode Création
ou le mode Code), de définir les différentes options d’affichage et d’effectuer certaines opérations
courantes, telles que la prévisualisation dans un navigateur.

La fenêtre de document affiche le document que vous créez et modifiez.

L’inspecteur de propriétés permet de visualiser et de modifier diverses propriétés de l’objet ou

du texte sélectionné. Chaque objet contient des propriétés différentes.

Les groupes de panneaux sont des ensembles de panneaux associés regroupés sous un même

titre. Pour développer un groupe de panneaux, cliquez sur la flèche d’agrandissement située à
gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée
d’ancrage sur le côté gauche de la barre de titre du groupe.

Présentation des fenêtres et des panneaux 15

Le panneau Fichiers vous permet de gérer vos fichiers et dossiers, qu’ils fassent partie d’un site

Dreamweaver ou qu’ils se trouvent sur un serveur distant. Il permet également d’accéder à tous les
fichiers stockés sur votre disque local, tout comme l’Explorateur Windows (Windows) ou le
Finder (Macintosh).

Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres qui ne sont pas
illustrés ici, tels que le panneau Styles CSS et l’inspecteur de balises. Pour ouvrir les panneaux,
inspecteurs et fenêtres Dreamweaver, utilisez le menu Fenêtre.

Présentation des menus

Cette section présente les menus de Dreamweaver.

Le

menu Fichier et le menu Edition contiennent des éléments de menu standard, tels que

Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Rétablir. Le
menu Fichier contient également plusieurs autres commandes permettant d’afficher un aperçu du
document dans un navigateur ou d’imprimer du code, par exemple. Le menu Edition inclut des
commandes de sélection et de recherche, telles que Sélectionner balise parente et Rechercher et
Remplacer. Sous Windows, le menu Edition permet également d’accéder aux préférences ; sur
Macintosh, le menu Dreamweaver permet d’ouvrir la boîte de dialogue Préférences.

Le

menu Affichage permet de modifier l’affichage du document (mode Création ou mode Code,

par exemple) et d’afficher ou de masquer plusieurs types d’éléments de page ainsi que les différents
outils et barres d’outils de Dreamweaver.

Le

menu Insertion et la barre Insérer permettent d’insérer des objets dans votre document.

Le

menu Modifier permet de modifier les propriétés de l’élément de page sélectionné. Vous

pouvez l’ouvrir pour modifier les attributs de balises, des tableaux et leurs éléments et effectuer
diverses opérations avec les éléments de bibliothèque et les modèles.

Le

menu Texte permet de formater facilement le texte.

Le

menu Commandes propose une commande de formatage du code qui tient compte de vos

préférences de formatage, une commande de création d’album photos et une commande
d’optimisation des images dans Macromedia Fireworks.

Le

menu Site contient des éléments de menu permettant de gérer vos sites et de télécharger des

fichiers vers ou en provenance d’un serveur distant.

Conseil : Certaines commandes du menu Site des versions précédentes de Dreamweaver se
trouvent désormais dans le menu Options du panneau Fichiers.

Le menu Fenêtre permet d’accéder à tous les panneaux, inspecteurs et fenêtres de Dreamweaver.
(Pour les barres d’outils, voir le menu Affichage.)

Le

menu Aide permet d’accéder à la documentation de Dreamweaver, aux systèmes d’aide relatifs

à l’utilisation de Dreamweaver et à la création d’extensions pour Dreamweaver, ainsi qu’à des
références pour plusieurs langages.

Outre les menus de la barre de menus, Dreamweaver propose plusieurs menus contextuels qui
permettent d’accéder rapidement à des commandes utiles en rapport avec la zone ou la sélection
courante. Pour afficher un menu contextuel, cliquez avec le bouton droit de la souris (Windows)
ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un élément qui vous intéresse
dans une fenêtre.

16 Chapitre 1 : L’espace de travail Dreamweaver

CHAPITRE 2

Configuration rapide de site

Ce chapitre explique comment configurer un site Dreamweaver MX 2004. Dans Dreamweaver,
un site se compose généralement de deux parties : un ensemble de fichiers stockés sur un
ordinateur local (le site local) et un emplacement situé sur un serveur Web distant vers lequel vous
pouvez télécharger ces fichiers afin de les mettre à la disposition d’autres utilisateurs le moment
venu (le site distant).

Une fois le site configuré, vous pouvez explorer les différentes fonctionnalités de Dreamweaver par
vous-même et afficher vos propres pages Web. Vous pouvez également suivre les didacticiels
proposés tout au long du présent guide afin d’apprendre à créer un site Web simple à l’aide des
échantillons fournis avec Dreamweaver MX 2004.

En général, les personnes créant un site Web à l’aide de Dreamweaver créent et modifient des
pages sur leur disque local et en téléchargent un exemplaire sur un serveur Web afin de les mettre
à la disposition d’autres utilisateurs. Vous pouvez utiliser Dreamweaver d’autres manières (en
exécutant un serveur Web sur votre ordinateur local, en téléchargeant des fichiers vers un serveur
intermédiaire, en modifiant des fichiers sans définir de site ou en utilisant un disque monté
comme s’il s’agissait de votre disque local), mais les leçons proposées dans ce guide supposent que
vous utilisez un ordinateur local et que vous téléchargez vos pages vers un serveur distant.

Ce chapitre contient les sections suivantes :

• A propos des sites, page 18

• Création d’un site : présentation du déroulement du travail, page 18

• Définition d’un site Dreamweaver, page 18

17

A propos des sites

Dans Dreamweaver, le mot site fait référence aux éléments suivants :

• Site Web : ensemble de pages sur un serveur pouvant être visualisées par tout visiteur du site

disposant d’un navigateur Web.

• Site distant : fichiers stockés sur un serveur qui constituent un site Web, du point de vue de

l’auteur (vous) plutôt que de celui du visiteur.

• Site local : fichiers stockés sur votre disque local correspondant à ceux que vous avez téléchargés

sur le site distant. En règle générale avec Dreamweaver, les fichiers sont modifiés sur votre
disque dur, puis téléchargés vers le site distant.

• Définition de site Dreamweaver : ensemble de définitions d’un site local, plus des informations

sur la façon dont le site local correspond à un site distant.

Création d’un site : présentation du déroulement du travail

L’ordre des leçons présentées dans ce guide correspond à un déroulement possible du travail lors
de la création d’un site. Pour créer vos sites, vous pouvez adopter le déroulement de travail le
mieux adapté à vos besoins.

Pour créer un site Web :

1 Planifiez et préparez votre travail, ce qui inclut la configuration d’un site Dreamweaver (voir

Définition d’un site Dreamweaver, page 18).

2 Créez des pages, ajustez leur mise en forme et ajoutez du contenu (voir Didacticiel : Création

d’une page statique, page 27).

3 Modifiez le code selon vos besoins (voir Didacticiel : Modification du code, page 39).
4 Liez les pages (voir Didacticiel : Lien et aperçu de pages, page 49).
5 Visualisez et publiez votre site (voir Aperçu des pages dans un navigateur, page 55 et Définition

d’un dossier distant, page 24).

6 (Facultatif) Ajoutez des pages dynamiques qui affichent des informations à partir de bases de

données (voir Description des applications Web, page 57 et Didacticiel : Développement d’une

application Web, page 71).

Définition d’un site Dreamweaver

Généralement, la création d’un site Web est précédée d’une étape de planification qui détermine
les éléments suivants : le nombre de pages, le contenu de chaque page, la mise en forme des pages
et les liens associant les pages entre elles. Toutefois, l’exemple de site dont il est question dans les
didacticiels proposés dans ce guide est très sommaire et la phase de planification s’en trouve
considérablement réduite. En effet, le site ne comporte que deux pages Web reliées entre elles.
Pour ce site, vous pouvez donc directement configurer votre site local.

Pour configurer un site local à l’aide des exemples de fichiers, commencez par copier ces fichiers
dans un dossier local, puis créez une définition de site Dreamweaver pour vous permettre de gérer
les sites dans Dreamweaver.

Remarque : Les utilisateurs de Macromedia HomeSite et de ColdFusion Studio peuvent considérer
un site Dreamweaver comme un projet HomeSite ou Studio.

18 Chapitre 2 : Configuration rapide de site

Pour configurer un site local :

1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur (voir Copie des exemples de

fichiers, page 19).

2 Définissez le dossier comme un dossier Dreamweaver local (voir Définition d’un dossier local à

l’aide de l’assistant de définition d’un site, page 20).

3 Définissez un dossier sur un serveur Web comme dossier Dreamweaver distant (voir Définition

d’un dossier distant, page 24).

4 Téléchargez les exemples de fichiers sur le serveur Web (voir Téléchargez vos fichiers locaux,

page 26).

Copie des exemples de fichiers

Lorsque vous créez un site local, vous pouvez placer les actifs existants (images ou autre élément
de contenu) dans un dossier au sein du dossier racine du site local. Lorsque vous serez disposé à
ajouter le contenu à vos pages, les actifs seront prêts à l’emploi.

Les exemples de fichiers inclus avec Dreamweaver contiennent des actifs pour le site à construire
avec les didacticiels du guide Bien démarrer avec Dreamweaver. La première étape dans la création
d’un site est la copie des exemples de fichiers du dossier de l’application Dreamweaver vers le
dossier approprié sur votre disque dur.

Remarque : La structure et l’emplacement recommandés pour les dossiers de votre site local sont
adaptés pour suivre les didacticiels. Néanmoins, lorsque les exemples de fichiers se trouvent à
l’emplacement recommandé, il est impossible d’utiliser les liens relatifs à la racine du site dans
l’exemple de site. Ces didacticiels utilisent donc uniquement des liens relatifs aux documents. Pour
plus d’informations sur ces types de liens, voir l’aide Utilisation de Dreamweaver.

Pour copier les exemples de fichiers :

1 Créez un dossier intitulé Sites-Local dans le dossier utilisateur de votre disque dur.

Par exemple, créez un des dossiers suivants, selon le système d’exploitation que vous utilisez :

■ C:\Documents and Setting\votre_nom_d’utilisateur\Mes documents\Sites-Local (Windows)

■ /Utilisateurs/votre_nom_d’utilisateur/Documents/Sites-Local (Macintosh).

Remarque : Sous Macintosh, votre dossier utilisateur contient déjà un dossier intitulé Sites.
N’utilisez pas le dossier Sites en tant que dossier local ; le dossier Sites correspond au dossier
de stockage des pages que vous souhaitez diffuser lors de l’utilisation du Macintosh comme
serveur Web.

2 Recherchez le dossier GettingStarted dans le dossier d’application Dreamweaver sur votre

disque dur.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin du dossier est le

suivant :

■ C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\GettingStarted\

(Windows)

■ /Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)

3 Copiez le dossier GettingStarted dans le dossier Sites-Local.

Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver
local.

Définition d’un site Dreamweaver 19

Définition d’un dossier local à l’aide de l’assistant de définition d’un site

Créez ensuite une définition du site et définissez un dossier local à l’aide de la boîte de dialogue
Définition du site. Vous pouvez compléter les champs de cette boîte de dialogue dans l’un des
deux affichages suivants : Elémentaire ou Avancé. L’onglet Elémentaire présente toutes les étapes
de définition d’un site. Si vous préférez modifier les informations relatives au site sans aide,
cliquez sur l’onglet Avancé à tout moment.

La procédure suivante explique comment définir des options dans la version Elémentaire de la
boîte de dialogue ; elle est également appelée Assistant de définition d’un site. Pour plus de détails
sur la définition d’options dans la version Avancé, cliquez sur l’onglet Avancé, puis sur le bouton
Aide.

Si vous disposez déjà d’un site Web sur un serveur distant et que vous souhaitez modifier ce site au
lieu d’utiliser les exemples de fichiers, voir Modification de sites Web Dreamweaver existants dans
l’aide Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver).

Pour définir un site :

1 Lancez Dreamweaver.
2 Sélectionnez Site > Gérer les sites (en d’autres termes, sélectionnez Gérer les sites dans le menu

Site).
La boîte de dialogue Gérer les sites s’affiche.

3 Dans la boîte de dialogue Gérer les sites, cliquez sur Nouveau et sélectionnez Site dans le menu

contextuel.
La boîte de dialogue Définition du site s’ouvre.

4 Si elle affiche l’onglet Avancé, cliquez sur Elémentaire.

Le premier écran de l’Assistant de définition d’un site apparaît et vous demande d’attribuer un
nom au site.

20 Chapitre 2 : Configuration rapide de site

5 Dans la zone de texte, tapez un nom permettant d’identifier le site dans Dreamweaver. Il peut

s’agir de n’importe quel nom. Vous pouvez, par exemple, nommer le site Trio Motors.

6 Cliquez sur Suivant pour passer à l’étape suivante.

L’écran suivant de l’Assistant apparaît et vous demande si vous souhaitez utiliser une
technologie de serveur.

Définition d’un site Dreamweaver 21

7 Choisissez l’option Non pour indiquer que, pour l’instant, le site est statique et qu’il ne contient

aucune page dynamique.

Pour définir un site dans le but de créer une application Web, vous devez sélectionner un type
de document dynamique, comme Macromedia ColdFusion, Microsoft Active Server Pages
(ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP) ou PHP : Hypertext Preprocessor
(PHP), puis indiquer les informations concernant votre serveur d’application. Pour plus
d’informations, voir Chapitre 7, Didacticiel : Développement d’une application Web, page 71.

8 Cliquez sur Suivant pour passer à l’étape suivante.

L’écran suivant de l’Assistant s’affiche et vous demande comment vous souhaitez travailler avec
vos fichiers.

9 Sélectionnez l’option Modifier les copies locales sur ma machine, puis télécharger vers le serveur

lorsque je suis prêt (recommandé).
Vous pouvez utiliser les fichiers de diverses façons pendant le développement du site, mais dans

le cadre de cette leçon, sélectionnez cette option.

10 Cliquez sur l’icône de dossier en regard de la zone de texte. La zone de texte vous permet de

spécifier un dossier sur votre disque local dans lequel Dreamweaver doit stocker les versions
locales des fichiers du site. Il est néanmoins plus pratique d’utiliser la fonction de navigation
plutôt que d’entrer le chemin à l’aide du clavier.

La boîte de dialogue Choisissez le dossier racine local pour le site Trio Motors apparaît.

22 Chapitre 2 : Configuration rapide de site

11 Dans la boîte de dialogue Choisissez le dossier racine local pour le site Trio Motors, sélectionnez

le dossier Sites-Local sur votre disque local, dossier dans lequel vous avez copié les exemples de
fichiers dans Copie des exemples de fichiers, page 19. Sélectionnez le dossier GettingStarted dans
le dossier Sites-Local. Ouvrez le dossier GettingStarted, puis cliquez sur Sélectionner (Windows)
ou Choisir (Macintosh).

12 Cliquez sur Suivant pour passer à l’étape suivante.

L’écran de l’Assistant apparaît et vous demande de préciser le type de connexion au serveur
distant.

13 Pour l’instant, choisissez Aucun dans le menu contextuel.

Vous pouvez définir ultérieurement des informations concernant votre site distant (voir

Définition d’un dossier distant, page 24) ; pour le moment, les informations concernant le site

local suffisent pour créer une page.

14 Cliquez sur Suivant pour passer à l’étape suivante.

L’écran suivant apparaît, affichant un résumé de vos paramètres.

15 Cliquez sur Terminé.

La boîte de dialogue Gérer les sites s’affiche et présente votre nouveau site.

16 Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.

Définition d’un site Dreamweaver 23

Le panneau Fichiers affiche maintenant le nouveau dossier racine local du site actuel. La liste de
fichiers du panneau Fichiers tiendra lieu de gestionnaire de fichiers et vous permettra de copier, de
coller, de supprimer, de déplacer et d’ouvrir des fichiers tout comme vous le feriez sur le Bureau
de votre ordinateur.

Un dossier racine local est désormais défini pour votre site. Vous pouvez suivre les autres
didacticiels de ce guide pour créer l’exemple de site Trio Motors ou choisir de travailler sur vos
propres pages. Après avoir créé et édité vos pages, définissez un dossier distant sur un serveur et
publiez vos pages..

Définition d’un dossier distant

L’étape suivante de création d’un site consiste à le publier en téléchargeant les fichiers vers un
serveur Web distant.

Avant de poursuivre, vous devez pouvoir accéder à un serveur Web distant (le serveur de votre
fournisseur d’accès Internet, un serveur appartenant à un client pour lequel vous travaillez, un
serveur intranet de votre société ou un serveur IIS ou PWS sur un ordinateur Windows). Si vous
ne pouvez accéder à un serveur de ce type, contactez votre fournisseur d’accès Internet, votre
client ou votre administrateur système.

Vous pouvez également choisir d’exécuter un serveur Web sur votre ordinateur local, par exemple,
IIS (Windows) ou Apache (Macintosh). Pour plus d’informations sur la configuration d’un
serveur Web sur votre ordinateur local, voir Installation d’un serveur Web, page 87.

La procédure suivante suppose que votre dossier racine distant est vide. Si votre site distant
contient déjà des fichiers, créez un dossier vide dans votre site distant (sur le serveur) et utilisez ce
dernier comme dossier racine distant.

La procédure suivante suppose que vous avez configuré un site local. Pour plus d’informations,
voir Définition d’un dossier local à l’aide de l’assistant de définition d’un site, page 20.

24 Chapitre 2 : Configuration rapide de site

Pour vous connecter à un site distant :

1 Dans votre site distant (sur le serveur), créez un dossier vide dans le dossier racine Web pour le

serveur. Donnez à ce nouveau dossier vide le même nom que votre dossier racine local. Par
exemple, pour le site du didacticiel, le nom à utiliser est normalement GettingStarted, afin qu’il
corresponde au nom du dossier racine local.

2 Dans Dreamweaver, sélectionnez Site > Gérer les sites.
3 Sélectionnez un site (par exemple Trio Motors), puis cliquez sur Modifier.
4 Cliquez sur l’onglet Elémentaire dans la partie supérieure de la boîte de dialogue.
5 Si, lors de la configuration de votre site local, vous avez déjà suivi les premières étapes indiquées

dans l’onglet Elémentaire, cliquez sur Suivant plusieurs fois jusqu’à ce que vous atteigniez l’étape
de Partage des fichiers qui doit s’afficher dans la partie supérieure de l’Assistant.

6 Dans le menu déroulant Comment vous connectez-vous à votre serveur distant ?, sélectionnez

une méthode de connexion au site distant.
Les méthodes les plus courantes de connexion à un serveur sur Internet sont le FTP et le SFTP.

La méthode la plus courante de connexion à un serveur sur votre intranet ou à votre ordinateur
local (si celui-ci est utilisé comme serveur Web) est Local/Réseau. Dans l’incertitude,
demandez à l’administrateur système du serveur.

7 Si vous sélectionnez FTP, utilisez les options suivantes :

■ Saisissez le nom d’hôte du serveur (par exemple, ftp.macromedia.com).

■ Dans la zone de texte dans laquelle vous devez indiquer le nom du dossier qui contient vos

fichiers, tapez le chemin d’accès au dossier sur le serveur à partir du dossier racine FTP jusqu’au
dossier racine du site distant. En cas de doute, consultez votre administrateur système.

Dans bien des cas, cette zone de texte doit rester vierge.

■ Indiquez votre nom d’utilisateur et votre mot de passe dans les zones appropriées.

■ Si votre serveur prend en charge le SFTP, sélectionnez l’option Utiliser Secure FTP (SFTP).

■ Cliquez sur Tester la connexion.

■ En cas d’échec, consultez votre administrateur système.

Définition d’un site Dreamweaver 25

8 Si vous sélectionnez Local/Réseau, cliquez sur l’icône de dossier se trouvant près de la zone de

texte pour rechercher le dossier racine du site distant. Vous pouvez choisir de désélectionner
l’option Actualiser automatiquement la liste des fichiers distants pour plus de rapidité.

9 Après avoir entré les informations appropriées, cliquez sur Suivant.

10 N’activez pas l’option d’archivage et d’extraction des fichiers pour le site Trio Motors.

Si vous et vos collègues travaillez sur un site plus important, l’option d’archivage et d’extraction
des fichiers empêche l’écrasement de vos fichiers respectifs. De plus, si vos collègues utilisent
Macromedia Contribute, vous devez activer l’option d’archivage et d’extraction des fichiers.
Nous n’aurons pas besoin de cette option dans le cadre du site Trio Motors.

11 Cliquez sur Suivant.
12 Cliquez sur Terminé pour terminer la configuration du site distant.
13 Cliquez à nouveau sur Terminé pour fermer la boîte de dialogue Gérer les sites.

Téléchargez vos fichiers locaux

Après avoir défini vos dossiers locaux et distants, vous pouvez transférer vos fichiers du dossier
local vers le serveur Web. Il est impératif de télécharger vos pages pour les rendre accessibles,
même si le serveur Web est exécuté sur votre ordinateur local.

Pour télécharger vos pages vers un site distant :

1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier racine local du site.
2 Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers) dans la barre d’outils du

panneau Fichiers.
Dreamweaver copie tous les fichiers dans le dossier distant défini dans Définition d’un dossier

distant, page 24. Cette opération peut demander un peu de temps car Dreamweaver doit

télécharger tous les fichiers dans le site, y compris plusieurs versions de certains fichiers à
utiliser avec divers didacticiels.

3 Ouvrez le site distant dans un navigateur pour vous assurer que le transfert s’est bien déroulé.

26 Chapitre 2 : Configuration rapide de site

CHAPITRE 3

Didacticiel : Création d’une page statique

Le présent didacticiel indique comment créer et enregistrer une page dans Macromedia
Dreamweaver MX 2004, puis y ajouter du texte, des images et des couleurs.

Avant de lancer ce didacticiel, définissez votre site en suivant les instructions décrites dans

Configuration rapide de site, page 17.

Ce didacticiel contient les leçons suivantes :

• Ouverture et enregistrement d’une nouvelle page, page 27

• Ajout d’un espace réservé pour une image, page 29

• Définition d’un titre de page, page 30

• Ajout de texte formaté, page 31

• Ajout d’images, page 35

• Définition de couleurs d’arrière-plan, page 36

• Documentation connexe, page 37

Ouverture et enregistrement d’une nouvelle page

Une fois le site défini, vous pouvez créer des pages Web afin de le remplir.

Pour créer une nouvelle page, vous pouvez utiliser la page de démarrage Dreamweaver ou
sélectionner Fichier > Nouveau et choisir une conception parmi celles prédéfinies.

Veuillez noter que ce didacticiel suppose que vous utilisiez la conception layout.html fournie dans
l’exemple de Dreamweaver.

27

Pour ouvrir une page :

1 Dans le panneau Fichiers, développez le dossier 1-Design, puis double-cliquez sur le fichier

layout.html.
La page layout.html apparaît dans une nouvelle fenêtre de document. La page contient le texte

« Lorem ipsum » qui correspond à l’emplacement d’un espace réservé, ce qui permet de donner
un aperçu de la conception de la page lorsque le texte y sera inséré.

2 Enregistrez la page en lui donnant un nouveau nom.

Pour enregistrer votre page :

1 Sélectionnez Fichier > Enregistrer sous.
2 Dans la boîte de dialogue Enregistrer sous, accédez au dossier 1-Design qui se trouve dans le

dossier racine local du site.
Rappel : le dossier racine local du site est le dossier que vous avez créé lors de la définition du

site dans Définition d’un dossier local à l’aide de l’assistant de définition d’un site, page 20.

3 Saisissez le nom de fichier index.html.
4 Cliquez sur Enregistrer pour enregistrer le fichier dans le dossier 1-Design.

Le nom de fichier apparaît désormais dans la barre de titre de la fenêtre, entre parenthèses,
après les mots « Document sans nom ».

28 Chapitre 3 : Didacticiel : Création d’une page statique

Ajout d’un espace réservé pour une image

Vous allez à présent créer un espace réservé pour les images que vous ajouterez ultérieurement.

Pour ajouter un espace réservé pour une image :

1 Cliquez au début de la colonne de texte principale, juste avant le mot « Titre », puis appuyez sur

Entrée (Windows) ou Retour (Macintosh) pour créer une ligne vierge avant le titre. Cliquez sur
la nouvelle ligne vierge.

Le point d’insertion occupe la première ligne. Si ce n’est pas le cas, placez-le sur la ligne vierge.

2 Sélectionnez Insertion > Objets Image > Espace réservé pour l’image.
3 Dans la boîte de dialogue Espace réservé pour l’image, entrez un nom (par exemple,

SplashImage).

Remarque : Les noms d’espaces réservés doivent commencer par une lettre et ne peuvent
contenir que des lettres et des chiffres.

4 Toujours dans la boîte de dialogue Espace réservé pour l’image, entrez une largeur et une

hauteur. Si vous créez la page Trio Motors, indiquez 176 pour la largeur et 190 pour la hauteur.

5 N’indiquez aucune valeur dans les zones de texte Couleur et Autre texte.

Remarque : Il est important de fournir un autre texte pour certains types d’image, afin que les
visiteurs qui utilisent des lecteurs d’écran ou des navigateurs en mode texte uniquement puissent
comprendre l’information véhiculée par l’image. Pour les images qui ne véhiculent aucune
information, utilisez l’attribut alt vide. Lorsque vous ne remplissez pas la zone Autre texte,
Dreamweaver ajoute un attribut alt="" à la balise img.

Ajout d’un espace réservé pour une image 29

6 Cliquez sur OK.

Une boîte grise aux dimensions fournies apparaît. Il s’agit d’un espace réservé pour une image,
qui vous permet de mettre des pages en forme en l’absence des images finales.

7 Cliquez sur l’en-tête « Lorem Ipsum Dolor », en haut de la page. Dans le sélecteur de balises

situé en bas de la fenêtre de document, sélectionnez la balise <h1>, puis appuyez sur la touche
Retour arrière (Windows) ou Supprimer (Macintosh).

Le texte et la balise h1 sont supprimés.

8 Ne déplacez pas le point d’insertion. Répétez les étapes 2 à 6 pour insérer un autre espace pour

les images. Cette fois, nommez l’espace Bannière, puis entrez une largeur égale à 600 et une
hauteur égale à 41. Une bannière remplacera ensuite cet espace, en haut de la page.

9 Enregistrez votre page.

Définition d’un titre de page

Vous pouvez définir diverses propriétés pour une page, dont le titre, la couleur d’arrière-plan, la
couleur du texte, etc. (Pour définir les propriétés d’une page, sélectionnez Modifier > Propriétés
de la page.) Si vous souhaitez uniquement définir le titre de la page (titre qui apparaît dans la
barre de titre du navigateur), vous pouvez effectuer cette opération dans la barre d’outils du
document.

30 Chapitre 3 : Didacticiel : Création d’une page statique