ADOBE Dreamweaver 8 User Manual [fr]

Bien démarrer avec Dreamweaver

Marques de commerce

1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et
WebHelp sont des marques déposées ou des marques commerciales de Macromedia, Inc. qui peuvent être enregistrées soit aux
Etats-Unis, soit auprès d’autres juridictions y compris internationales. Les autres noms de produits, logos, graphiques, mises en
page, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques, des marques de service ou des noms de
marque appartenant à Macromedia,Inc. ou à d’autres entités et peuvent être déposés dans certains pays, états ou provinces.

Informations de tiers

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 et périls.
Macromedia mentionne ces liens pour faciliter votre travail et l’inclusion de ces liens n’implique pas que Macromedia approuve le
contenu de ces sites tiers ou en accepte la responsabilité.

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

Copyright © 1997-2005 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut être ni copié, ni photocopié, ni
reproduit, ni traduit ni transposé sous une forme exploitable par ordinateur ou sous une forme électronique quelconque,
en tout ou en partie, sans l’accord écrit préalable de Macromedia, Inc. Nonobstant ce qui précède, le propriétaire ou
l’utilisateur autorisé d’une copie valable du logiciel qui accompagne ce manuel peut imprimer une copie de ce manuel à
partir d’une version électronique dudit manuel dans le seul but que ce propriétaire ou cet utilisateur autorisé puisse
apprendre à utiliser ce logiciel, sous réserve qu’aucune partie de ce manuel ne soit imprimée, reproduite, distribuée,
revendue ou transmise à d’autres fins, y compris, sans restrictions, à des fins commerciales telles que la vente de copies de
cette documentation ou la fourniture de services contre rémunération. Code d’article ZDW80M100F

Remerciements

Direction Charles Nadeau
Rédaction : Jon Michael Varese
Edition : Rosana Francescato, Lisa Stanziano, Evelyn Eldridge, Mark Nigara
Direction de la production et de l’édition Patrice O’Neill et Rosana Francescato
Conception et production : Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel,

Arena Reed, Mario Reynoso
Localization Management: Melissa Baerwald
Assurance Qualité Localisation: Vince Truong
Remerciements particuliers à Sheila McGinn, Jennifer Rowe, Jay Armstrong, Sally Sadosky, Jennifer Taylor, Paul Gubbay, Melissa

Baerwald, Sami Kaied, Jung Choi, Masayo Noda, Kristin Conradi, Yuko Yagi ainsi qu’à tous les membres des équipes de
l’ingénierie de Dreamweaver et de l’assurance qualité.

Première édition : Septembre 2005

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

Table des matières

PARTIE 1 : INTRODUCTION A DREAMWEAVER

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

Ce que vous pouvez accomplir avec Dreamweaver 8 . . . . . . . . . . . . . . 12

Nouveautés de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Installation de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Enregistrement de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Conventions typographiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Chapitre 1 : Apprentissage de Dreamweaver. . . . . . . . . . . . . . . . . 17

Par où débuter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Tirer le meilleur parti de la documentation Dreamweaver . . . . . . . . . . 22

Utilisation du système d’aide de Dreamweaver. . . . . . . . . . . . . . . . . . . 26

Chapitre 2 : Notions de base de Dreamweaver . . . . . . . . . . . . . . . 31

Apprendre à connaître l’espace de travail de Dreamweaver 8. . . . . . . 31

Personnaliser l’espace de travail de Dreamweaver 8. . . . . . . . . . . . . . 43

Accomplir des tâches élémentaires dans Dreamweaver 8 . . . . . . . . . 46

PARTIE 2 : DIDACTICIELS

Chapitre 3 : Didacticiel : Configuration de votre site et

des fichiers de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Apprenez à utiliser des sites Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 54

Configurez vos fichiers de projet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Définissez un dossier local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57

Chapitre 4 : Didacticiel : Création d’une mise en forme

de page basée sur un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Examinez la maquette détaillée de conception . . . . . . . . . . . . . . . . . . . 62

Créez et enregistrez une nouvelle page . . . . . . . . . . . . . . . . . . . . . . . . . 64

Insérez des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

3

Définissez les propriétés des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Insérez un espace réservé pour l’image . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Ajoutez de la couleur à la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Chapitre 5 : Didacticiel : Ajout de contenu aux pages . . . . . . . . . 81

Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83

Insérez des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Insérez et lisez un fichier Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Insérez une vidéo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Insérez du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Créez des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Aperçu de votre page dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . 106

Chapitre 6 : Didacticiel : Mise en forme de votre page

avec CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110

Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Étude de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112

Créez une nouvelle feuille de style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114

Associez une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Explorez le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119

Créez une nouvelle règle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Appliquez un style de classe à un texte. . . . . . . . . . . . . . . . . . . . . . . . . . 125

Mettez en forme le texte de la barre de navigation . . . . . . . . . . . . . . . 126

(En option) Centrez le contenu de la page. . . . . . . . . . . . . . . . . . . . . . . 136

Chapitre 7 : Didacticiel : Publication de votre site . . . . . . . . . . . 139

Étudiez les sites distants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Configurez un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

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

Résolution des problèmes de configuration du dossier

distant (en option) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

PARTIE 3 : DIDACTICIELS AVANCES

Chapitre 8 : Didacticiel : Travail avec du code . . . . . . . . . . . . . . 149

Affichez le code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Activez l’espace de travail de codage (Windows uniquement). . . . . 152

Ajoutez une balise à l’aide du sélecteur de balises. . . . . . . . . . . . . . . . 152

4 Table des matières

Modifiez une balise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155

Consultez des informations relatives à une balise. . . . . . . . . . . . . . . . . 157

Ajoutez une image à l’aide des indicateurs de code . . . . . . . . . . . . . . .159

Vérifiez vos modifications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162

Imprimez votre code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163

Chapitre 9 : Didacticiel : Création d’une mise en forme

de page basée sur CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Apprendre la mise en forme de page en utilisant CSS. . . . . . . . . . . . .166

Vérification de la maquette de construction. . . . . . . . . . . . . . . . . . . . . . 167

Création et enregistrement d’une nouvelle page. . . . . . . . . . . . . . . . . .169

Insertion de calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Ajoutez des couleurs à la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185

Chapitre 10 : Didacticiel : Affichage de données XML . . . . . . . . 189

Localiser vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190

Passer votre tâche en revue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

Utilisation de XML et XSL dans des pages Web . . . . . . . . . . . . . . . . .192

Pages XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194

Conversion d’une page HTML en page XSLT. . . . . . . . . . . . . . . . . . . .196

Association d’une source de données XML à la page XSLT . . . . . . . 197

Modification de la mise en page XSLT . . . . . . . . . . . . . . . . . . . . . . . . . .198

Liaison des données XML à la page XSLT. . . . . . . . . . . . . . . . . . . . . . .201

Application de styles aux données XML . . . . . . . . . . . . . . . . . . . . . . . . 203

Création d’un lien dynamique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Ajout d’un objet XSLT Région répétée . . . . . . . . . . . . . . . . . . . . . . . . . 206

Association de la page XSLT à la page XML. . . . . . . . . . . . . . . . . . . . 209

Autres options de déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Chapitre 11 : Didacticiel : Développement d’une

application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214

Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214

Ouvrez un document de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216

Définissez un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Affichez les enregistrements de la base de données . . . . . . . . . . . . . .221

Ajoutez des champs dynamiques au tableau . . . . . . . . . . . . . . . . . . . . 223

Définissez une région répétée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Affichez votre page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Créez un formulaire d’insertion d’enregistrement . . . . . . . . . . . . . . . . 225

Copiez les fichiers sur le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231

Documentation connexe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Table des matières 5

PARTIE 4 : ANNEXES

Annexe A : Description des applications Web . . . . . . . . . . . . . 235

Présentation des applications Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . .235

Fonctionnement d’une application Web . . . . . . . . . . . . . . . . . . . . . . . .238

Création de pages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243

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

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

Annexe B : Installation d’un serveur Web . . . . . . . . . . . . . . . . . . 251

Premiers pas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252

Installation d’Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . .252

Test de IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253

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

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

Annexe C : Configuration d’un exemple de site ColdFusion . . 257

Aide-mémoire pour la configuration à l’intention des

développeurs ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257

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

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

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

Annexe D : Configuration d’un exemple de site ASP.NET . . . 275

Aide-mémoire pour la configuration à l’intention des dé-

veloppeurs ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

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

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

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

Annexe E : Configuration d’un exemple de site ASP. . . . . . . . . 291

Aide-mémoire pour la configuration à l’intention des

développeurs ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292

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

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

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

6 Table des matières

Annexe F : Configuration d’un exemple de site JSP . . . . . . . . 309

Aide-mémoire pour la configuration à l’intention des

développeurs JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310

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

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

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

Annexe G : Configuration d’un exemple de site PHP. . . . . . . . 327

Aide-mémoire pour la configuration à l’intention des

développeurs PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

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

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

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

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

Table des matières 7

8 Table des matières

PARTIE 1

Introduction à Dreamweaver

La première partie de ce manuel vous décrit Macromedia Dreamweaver 8
et comprend des informations sur son installation ainsi qu’une vue
d’ensemble d’un espace de travail. Elle fournit également une liste
d’éléments disponibles pour apprendre Dreamweaver.

Cette partie du manuel contient les sections suivantes :

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

Apprentissage de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Notions de base de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

1

9

Introduction

Macromedia Dreamweaver MX 8 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.

Ce guide vous indique comment utiliser Macromedia Dreamweaver 8
dans le cas où vous ne connaîtriez pas bien l’un de ses aspects majeurs. Les
didacticiels dans ce guide constituent une marche à suivre pour créer un
site web simple mais fonctionnel.

Ce chapitre contient les rubriques suivantes :

Ce que vous pouvez accomplir avec Dreamweaver 8. . . . . . . . . . 12

Nouveautés de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Installation de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Enregistrement de Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . 14

Conventions typographiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

11

Ce que vous pouvez accomplir avec Dreamweaver 8

Les fonctions d’édition visuelles de Dreamweaver vous permettent de créer
rapidement des pages sans rédiger une seule ligne de code. Vous pouvez
afficher tous les éléments ou actifs de votre site et les faire glisser
directement d’un panneau convivial dans un document. Vous pouvez
rationaliser les tâches de développement en créant et en modifiant des
images dans Macromedia Fireworks ou toute autre application graphique,
puis en les important directement dans Dreamweaver. Dreamweaver
fournit également des outils pour faciliter l’adjonction d’actifs Flash aux
pages web.

Outre les caractéristiques du glisser-déposer qui vous aident à construire
des pages Web, Dreamweaver fournit un environnement complet de
codage qui comprend des outils d’édition de code (tels que coloration de
code, achèvement de balises, barre à outils de code et réduction de code)
ainsi que de la documentation de référence portant sur les langages
Cascading Style Sheets (CSS), JavaScript, ColdFusion Markup Language
(CFML) et autres. La technologie Roundtrip HTML de Macromedia
permet d’importer des documents HTML codés manuellement sans en
modifier le code pour que vous puissiez ensuite remettre en forme ce
dernier avec le style de mise en forme de votre choix.

Dreamweaver permet également de créer des applications Web reposant sur
des bases de données dynamiques au moyen de technologies serveur
comme CFML, ASP.NET, ASP, JSP et PHP. Si vous préférez travailler avec
des données XML, Dreamweaver fournit des outils qui vous permettent de
créer aisément des pages XSLT, d’associer des pages XML et d’afficher des
données XML sur vos pages Web.

Dreamweaver est entièrement personnalisable. Vous pouvez créer vos
propres objets et commandes, modifier les raccourcis clavier ou encore
rédiger un code JavaScript pour intégrer de nouveaux comportements,
inspecteurs de propriétés et rapports de site aux fonctionnalités de
Dreamweaver.

Pour plus de renseignements sur les possibilités qui existent en vue
d’apprendre Dreamweaver, voir Chapitre 1, Apprentissage de Dreamweaver,

page 17.

12 Introduction

Nouveautés de Dreamweaver 8

Dreamweaver 8 comprend un grand nombre de nouvelles fonctionnalités
pour vous aider à construire des sites Web et des applications avec un
minimum d’effort dans un minimum de temps. Dreamweaver rend
simples et accessibles les technologies complexes, vous aidant ainsi à
accomplir davantage en moins de temps.

Voici quelques-unes des nouvelles fonctionnalités principales disponibles
dans Dreamweaver 8 :

■ Outil de zoom et guides

■ Liaisons de données XML visuelles

■ Nouveau panneau de Styles CSS

■ Visualisation de mise en forme CSS

■ Réduction du code

■ Barre d’outils de codage

■ Transfert de fichiers en arrière-plan

■ Insérer une commande Flash Video

Pour une liste et une description complètes de nouvelles fonctionnalités
dans Dreamweaver 8, voir Nouveautés de Dreamweaver 8 dans Utilisation de
Dreamweaver (Aide > Utilisation de Dreamweaver).

Installation de Dreamweaver 8

Cette section explique comment installer Dreamweaver.
N’oubliez pas de lire les notes d’accompagnement sur le site Web de

Macromedia sous www.macromedia.com/go/dw_documentation_fr pour
obtenir les dernières informations ou instructions.

Pour installer Dreamweaver :

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

2. Procédez de l’une des manières suivantes :

■ Sous Windows, l’installation du programme Dreamweaver démarre

automatiquement.

■ Sous Macintosh, double-cliquer l’icône d’installation de

Dreamweaver qui paraît sur le bureau.

Installation de Dreamweaver 8 13

3. Suivez les instructions à l’écran.

Le programme d’installation vous invite à saisir l’information
demandée.

4. Redémarrez votre ordinateur si nécessaire.

Enregistrement de Dreamweaver 8

Pour bénéficier du support technique de Macromedia, nous vous
conseillons d’enregistrer votre copie de Macromedia Dreamweaver 8 par
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 et de contenu nouveau sur les
sites Web www.macromedia.com et www-euro.macromedia.com.

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

■ Sélectionnez Aide > Activation enregistrement en ligne et remplissez le

formulaire électronique.

■ Sélectionnez Aide > Imprimer l’enregistrement, imprimez le formulaire

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

14 Introduction

Conventions typographiques

Ce manuel utilise les conventions typographiques suivantes :

■ Les options de menu sont indiquées comme suit : intitulé du menu >

intitulé de l’option de menu. Les options des sous-menus sont
indiquées comme suit : intitulé du menu > intitulé du sous-menu >
intitulé de l’option de menu.

■ La police de code indique les intitulés des balises et attributs

HTML, ainsi que le texte utilisé littéralement dans les exemples.

■ La police de code en italique indique les éléments remplaçables

(parfois appelés métasymboles) dans le code.

■ Le texte romain en gras indique le texte que vous devez saisir à

l’identique.

Conventions typographiques 15

16 Introduction

CHAPITRE 1

Apprentissage de Dreamweaver

Macromedia Dreamweaver 8 comprend diverses ressources qui vous
aideront à vous familiariser rapidement avec le programme et à créer
facilement vos propres sites et pages Web. Toute la documentation de
Dreamweaver est disponible sous la forme d’une aide électronique et dans
un format PDF.

Ce chapitre contient les rubriques suivantes :

Par où débuter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17

Tirer le meilleur parti de la documentation Dreamweaver. . . . . . . 22

Utilisation du système d’aide de Dreamweaver. . . . . . . . . . . . . . . .26

Par où débuter

La documentation de Dreamweaver contient des informations destinées à
des lecteurs ayant divers niveaux d’expérience. Cette section vous aide à
comprendre comment aborder la documentation en fonction de votre
bagage et de ce que vous désirez accomplir avec Dreamweaver.

Elle aborde les sujets suivants :

■ Concepteurs débutants, page 17

■ Concepteurs expérimentés, page 18

■ Codeurs manuels expérimentés, page 20

■ Développeurs d’applications Web, page 21

1

Concepteurs débutants

Si vous êtes novice dans le domaine de la conception de sites Web, cette
section vous guidera vers les points essentiels de la documentation
Dreamweaver pour approfondir vos connaissances.

17

Pour les concepteurs Web qui débutent :

1. Commencez par lire Chapitre 2, Notions de base de Dreamweaver,

page 31. Puis poursuivez en suivant les didacticiels dans ce manuel. Les

didacticiels sont composés de deux sections Les cinq premiers sont
conçus pour les débutants. Ils vous guident du début jusqu’à la fin dans
le développement d’un site Web, modeste mais fonctionnel. La
deuxième section de didacticiels vous propose des concepts plus poussés.
Si vous le souhaitez, vous pourriez attendre d’avoir acquis une certaine
expérience dans la construction de pages Web avant d’aborder ces
derniers.

2. Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),

vous avez une idée plus précise de ce que vous avez appris dans ce guide
Bien démarrer avec Dreamweaver en lisant Chapitre 1, “Exploration de
l'espace de travail,” Chapitre 2, “Configuration d'un site
Dreamweaver,” Chapitre 4, “Gestion des fichiers,” et Chapitre 3,
Création et ouverture de documents.

3. Lisez Chapitre 7, “Mise en forme des pages avec les styles CSS,” et

Chapitre 8, Présentation de contenu à l'aide de tableaux dans Utilisation
de Dreamweaver pour apprendre ce qu’est la mise en forme de pages.

4. Lisez le Chapitre 13, “Insertion et mise en forme de texte,” et le

Chapitre 14, Insertion d’images dans Utilisation de Dreamweaver pour en
savoir plus sur le formatage de texte et l’ajout d’images à vos pages.

5. C’est tout ce dont vous avez besoin pour commencer à réaliser des sites

Web de qualité ; lorsque vous vous sentirez prêt à utiliser des outils plus
perfectionnés, lisez les autres chapitres concernant les pages statiques
dans Utilisation de Dreamweaver. Si vous le souhaitez, vous pourriez
d’abord vous familiariser avec la création de pages Web avant de lire les
chapitres sur les pages dynamiques.

18 Apprentissage de Dreamweaver

Concepteurs expérimentés

Si vous êtes un concepteur de sites Web expérimenté, cette section vous
guidera vers les points essentiels de la documentation Dreamweaver
correspondant à vos connaissances. Deux approches différentes sont
proposées : une pour les concepteurs qui n’ont jamais ou peu utilisé
Dreamweaver et une autre pour les concepteurs qui connaissent déjà bien
Dreamweaver mais qui veulent en savoir plus sur la création de pages
dynamiques.

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

1. Commencez par lire les didacticiels dans ce guide Bien démarrer avec

Dreamweaver.

2. Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),

lisez le Chapitre 1, Exploration de l'espace de travail pour en savoir plus
sur l’interface utilisateur de Dreamweaver.

3. Bien que vous connaissiez la plupart des sujets abordés dans le

Chapitre 2, Configuration d'un site Dreamweaver et le Chapitre 4,
Gestion des fichiers, parcourez ces chapitres pour savoir comment ces

concepts sont mis en oeuvre dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site
Dreamweaver.

4. Pour obtenir des informations utiles sur la création de pages HTML

simples dans Dreamweaver, lisez le Chapitre 13, Insertion et mise en
forme de texte et le Chapitre 14, Insertion d’images.

5. Pour plus d’informations sur le codage dans Dreamweaver, voir le

Chapitre 19, “Configuration d'un environnement de codage,”,
Chapitre 20, “Codage dans Dreamweaver,”, le Chapitre 21,
“Optimisation et débogage de code,” et le Chapitre 22, Modification du
code en mode Création.

6. Lisez la présentation au début des autres chapitres de Utilisation de

Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous

intéresser.

Pour les concepteurs Web expérimentés qui connaissent bien
Dreamweaver et souhaitent en apprendre davantage sur la
création de pages dynamiques :

1. Commencez par lire Annexe A, Description des applications Web,

page 235 et Chapitre 11, Didacticiel : Développement d’une application
Web, page 213.

2. Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),

parcourez le Chapitre 1, Exploration de l'espace de travail pour en savoir
plus sur les nouveaux aspects de l’interface utilisateur de Dreamweaver,
puis lisez Chapitre 30, Optimisation de l'espace de travail pour tirer parti
des fonctions de développement visuel.

Par où débuter 19

3. Familiarisez-vous avec la conception de pages dynamiques dans

Dreamweaver en lisant Chapitre 31, Déroulement de la conception de
pages dynamiques.

4. Configurez un serveur Web et un serveur d’application. (voir

Chapitre 23, Configuration d'une application Web).

5. Connectez-vous à une base de données. (Voir Connexion à une base de

données dans Chapitre 23, Configuration d'une application Web.)

6. Lisez la présentation au début de chaque chapitre de Utilisation de

Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous

intéresser.

Codeurs manuels expérimentés

Si vous êtes un codeur manuel expérimenté, cette section vous guidera vers
les points essentiels de la documentation Dreamweaver correspondant à vos
connaissances.

Pour les codeurs manuels expérimentés :

1. Commencez par lire le Chapitre 8, Didacticiel : Travail avec du code dans

ce guide Bien démarrer avec Dreamweaver.

2. Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),

lisez le Chapitre 1, Exploration de l'espace de travail pour en savoir plus
sur l’interface utilisateur de Dreamweaver.

3. Bien que vous connaissiez la plupart des sujets abordés dans le

Chapitre 2, Configuration d'un site Dreamweaver et le Chapitre 4,
Gestion des fichiers, parcourez ces chapitres pour savoir comment ces

concepts sont mis en oeuvre dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site
Dreamweaver.

4. Lisez le Chapitre 19, “Configuration d'un environnement de codage,”,

le Chapitre 20, “Codage dans Dreamweaver,”, le Chapitre 21,
“Optimisation et débogage de code,” et le Chapitre 22, Modification du
code en mode Création pour en savoir plus sur le codage dans
Dreamweaver.

5. Lisez la présentation au début de chaque chapitre de Utilisation de

Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous

intéresser.

20 Apprentissage de Dreamweaver

Développeurs d’applications Web

Si vous êtes un développeur d’applications Web expérimenté, cette section
vous guidera vers les points essentiels de la documentation Dreamweaver
correspondant à vos connaissances. Deux approches différentes sont
proposées, selon que vous avez déjà utilisé Dreamweaver ou non.

Pour les développeurs d’applications Web n’ayant jamais
utilisé Dreamweaver :

1. Commencez par parcourir rapidement le guide Bien démarrer avec

Dreamweaver pour vous familiariser avec les notions de base de
Dreamweaver.

2. Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),

lisez le Chapitre 1, Exploration de l'espace de travail pour en savoir plus
sur l’interface utilisateur de Dreamweaver.

3. Bien que vous connaissiez la plupart des sujets abordés dans le

Chapitre 2, Configuration d'un site Dreamweaver et le Chapitre 4,
Gestion des fichiers , parcourez ces chapitres pour savoir comment ces

concepts sont mis en oeuvre dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site
Dreamweaver.

4. Configurez un serveur Web et un serveur d’application à l’aide de

Dreamweaver (voir Chapitre 23, Configuration d'une application Web).

5. Connectez-vous à une base de données. (voir Connexion à une base de

données dans Chapitre 23, Configuration d'une application Web.)

6. Lisez la présentation au début des autres chapitres de Utilisation de

Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous

intéresser.

Pour les développeurs d’applications Web ayant déjà utilisé
Dreamweaver :

1. Commencez par consulter Nouveautés de Dreamweaver 8 dans

Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver). La
section « Quoi de neuf? » se trouve dans , Introduction.

2. Parcourez le Chapitre 1, Exploration de l'espace de travail pour en savoir

plus sur les nouveaux aspects de l’interface utilisateur Dreamweaver

Par où débuter 21

Tirer le meilleur parti de la documentation Dreamweaver

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

pages Web. Le système d’aide de Dreamweaver est composé de plusieurs
documents qui vous aident à vous familiariser avec Dreamweaver,
Dreamweaver Extensibility et ColdFusion. Il existe également des
informations complémentaires auxquelles vous pouvez accéder en mode
interactif au fur et à mesure que vous apprenez à monter des pages Web.

Accès à la documentation Dreamweaver

Le tableau suivant récapitule la documentation qui se trouve dans le
système d’aide de Dreamweaver.

Vous pouvez acheter des imprimés de titres choisis Pour plus
d'informations, visitez www.macromedia.com/go/buy_books.

22 Apprentissage de Dreamweaver

Titre Description/

Utilisateurs visés

Bien démarrer
avec
Dreamweaver

Décrit les concepts
de base de
Dreamweaver et de
son interface avec
des didacticiels
détaillés conçus pour
des débutants. Conçu
pour des utilisateurs
débutants, mais
convient également
aux utilisateurs de
niveaux avancé ou
intermédiaire qui
désirent se
familiariser avec les
nouvelles
fonctionnalités.

Où le trouver

• Affichage dans Dreamweaver :
Sélectionner Aide > Bien
démarrer avec Dreamweaver

• Affichage interactif : http://

livedocs.macromedia.com/go/
livedocs_dreamweaver_fr/

• Obtenir le PDF :

www.macromedia.com/go/
dw_documentation_fr

Titre Description/

Utilisateurs visés

Utilisation de
Dreamweaver

Extension de
Dreamweaver

Guide des API
de
Dreamweaver

Information complète
sur toutes les
fonctionnalités de
Dreamweaver. Conçu
pour tous les
utilisateurs de
Dreamweaver

Décrit le cadre de
Dreamweaver et
l'interface de
programmation
d'application (API).
Conçu pour les
utilisateurs avancés
qui veulent construire
des extensions à
l'interface de
Dreamweaver ou bien
la personnaliser.

Décrit l'utilitaire API
et l'API JavaScript,
tous deux vous
venant en aide quand
vous développez des
extensions à
Dreamweaver Conçu
pour les utilisateurs
avancés qui veulent
développer l'interface
de Dreamweaver ou
bien la personnaliser

Où le trouver

• Affichage dans Dreamweaver :
Sélectionner Aide > Aide
Dreamweaver ou Aide >
Utilisation de Dreamweaver

• Affichage interactif : http://

livedocs.macromedia.com/go/
livedocs_dreamweaver_fr/

• Obtenir le PDF :

www.macromedia.com/go/
dw_documentation_fr

• Affichage dans Dreamweaver :
Sélectionner Aide > Extensions
de Dreamweaver

• Affichage interactif : http://

livedocs.macromedia.com/go/
livedocs_dreamweaver_fr/

• Obtenir le PDF :

www.macromedia.com/go/
dw_documentation_fr

• Affichage dans Dreamweaver :
Sélectionner Aide > Référence
API Dreamweaver

• Affichage interactif : http://

livedocs.macromedia.com/go/
livedocs_dreamweaver_fr/

• Obtenir le PDF :

www.macromedia.com/go/
dw_documentation_fr

Tirer le meilleur parti de la documentation Dreamweaver 23

Titre Description/

Utilisateurs visés

Utilisation de
ColdFusion

Référence Comprend plusieurs

Comprend une
sélection des livres
les plus importants
dans le lot de la
documentation
ColdFusion. (Le lot
complet est
disponible sur
LiveDocs.) Conçu
pour quiconque est
intéressé par
ColdFusion, des
développeurs
débutants jusqu'aux
avancés

types de manuels de
référence à propos de
HTML, de modèles
de serveurs et
d'autres sujets, parus
surtout chez O'Reilly
Conçu pour
quiconque a besoin
de plus d'informations
sur la syntaxe de
codage, les concepts
et autres.

Où le trouver

• Affichage dans Dreamweaver :
Sélectionner Aide > Utilisation
de ColdFusion

• Affichage interactif : http://

livedocs.macromedia.com/go/
livedocs_coldfusion/

• Obtenir le PDF :

www.macromedia.com/go/
dw_documentation_fr

• Affichage dans Dreamweaver :
Sélectionner Aide > Référence.
Pour une liste complète de
manuels, cliquer sur le menu
déroulant de Book dans le
Panneau de références.

24 Apprentissage de Dreamweaver

Accéder à des informations complémentaires sur Dreamweaver en mode interactif

Le tableau suivant récapitule les informations complémentaires disponibles
en mode interactif pour l'apprentissage de Dreamweaver.

Information Description/

Utilisateurs visés

Centre de
support de
Dreamweaver

Centre de
développeurs
Dreamweaver

Centre de
documentation
de
Dreamweaver

Forums
Macromedia
interactifs

Formation
Macromedia

Notes techniques,
assistance et
informations pour
résoudre les
problèmes à
l'intention des
utilisateurs de
Dreamweaver.

Articles et didacticiels
pour vous aider à
améliorer vos
capacités et en
acquérir de nouvelles.

Obtenir des manuels
de produits en format
PDF, listes d'erreurs,
didacticiels et notes
d'accompagnement.

Discussions et
informations en vue
de résoudre des
problèmes réunissant
utilisateurs de
Dreamweaver,
représentants du
support technique et
l'équipe de
développement de
Dreamweaver.

Cours comprenant
des travaux pratiques
et des scénarios tirés
de la vie réelle.

Où le trouver

www.macromedia.com/go/
dreamweaver_support_fr

www.macromedia.com/go/
dreamweaver_devcenter_fr

www.macromedia.com/go/
dw_documentation_fr

www.macromedia.com/go/
dreamweaver_newsgroup

www.macromedia.com/go/
dreamweaver_training_fr

Tirer le meilleur parti de la documentation Dreamweaver 25

Utilisation du système d’aide de Dreamweaver

Le système d’aide interactif disponible à partir du menu Aide fournit des
renseignements détaillés sur toutes les tâches que vous pouvez accomplir
avec Dreamweaver. Pour voir une liste de documents disponibles dans
Aide, voir Accès à la documentation Dreamweaver, page 22.

Elle aborde les sujets suivants :

■ Ouvrir Aide, page 26

■ Chercher de l’aide, page 27

■ Utilisation de l’index, page 27

■ Changement de la taille de police, page 28

■ Utilisation de la Page de démarrage, page 28

■ Impression de la documentation Dreamweaver, page 29

■ Discussion portant sur la documentation de Dreamweaver avec LiveDocs,

page 29

Ouvrir Aide

Vous pouvez accéder à l’Aide du produit pendant que vous travaillez avec
Dreamweaver.

26 Apprentissage de Dreamweaver

Pour ouvrir l’Aide de Dreamweaver :

■ Sélectionnez Aide > Aide de Dreamweaver.

Chercher de l’aide

Vous pouvez faire une recherche complète de texte dans l’Aide de
Dreamweaver.

Pour chercher dans l’Aide du produit (Windows) :

1. Dans l’Aide de Dreamweaver, cliquez sur l’onglet rechercher.

2. Tapez un mot ou une expression dans la boîte de texte, puis cliquez sur

liste des rubriques.

3. Double-cliquez sur un sujet dans la liste des résultats afin de l’afficher.

Pour chercher dans l’Aide du produit (Macintosh) :

1. Dans l’Aide de Dreamweaver, tapez un mot ou une expression dans la

boîte de texte Poser une question, puis appuyez sur Retour.

2. Double-cliquez sur un sujet dans la liste des résultats afin de l’afficher.

Utilisation de l’index

Vous pouvez trouver rapidement de l’information avec l’index.

Pour utiliser l’index (Windows) :

1. Dans l’Aide de Dreamweaver, cliquez sur l’onglet rechercher.

2. Faites défiler la liste alphabétique jusqu’à l’entrée d’index voulue, puis

double-cliquez dessus pour afficher l’information pertinente.

Pour utiliser l’index (Macintosh) :

1. Dans l’Aide de Dreamweaver, cliquez sur le lien à l’Index dans la table

des matières.

2. Cliquez sur une lettre et faites défiler la liste jusqu’à l’entrée d’index

recherchée.

3. Cliquez sur un nombre en regard de l’entrée afin d’obtenir l’affichage de

l’information indexée.

CONSEIL

Pour chercher une
expression
spécifique, l’entourer
de double
guillemets.

CONSEIL

Vous pouvez
commencer à taper
un mot-clé dans la
zone de texte pour
atteindre rapidement
l’entrée d’index
recherchée.

Utilisation du système d’aide de Dreamweaver 27

Changement de la taille de police

Vous pouvez modifier la taille de la police utilisée par le système d’aide.

Pour changer la taille de la police dans l’afficheur de l’aide de
Windows :

1. Ouvrez Internet Explorer.

La taille de la police dans l’afficheur de l’aide de Windows est définie
dans Internet Explorer.

2. Sélectionner Affichage > Taille de texte, puis sélectionnez une taille.

Pour changer la taille de la police dans l’afficheur de l’aide
d’Apple :

■ Dans aide, sélectionnez Edition > Réduire la taille de la police ou

Edition > Augmenter la taille de la police.

Utilisation de la Page de démarrage

Quand vous démarrez Dreamweaver sans ouvrir un document, la Page de
démarrage de Dreamweaver paraît dans la zone de travail. La Page de
démarrage vous donne un accès rapide aux didacticiels de Dreamweaver
ainsi qu’aux fichiers récents et à Dreamweaver Exchange qui vous permet
d’ajouter des fonctions nouvelles à des caractéristiques de Dreamweaver.
Utilisez la Page de démarrage tout comme une page Web. Cliquez sur
n’importe quelle fonctionnalité pour l’utiliser.

28 Apprentissage de Dreamweaver

Pour désactiver la Page de démarrage :

1. Lancer Dreamweaver sans ouvrir de document.

La Page de démarrage apparaît.

2. Cliquez Ne plus afficher

Impression de la documentation Dreamweaver

Les livres suivants sont disponibles en format PDF sur le site Web de
Macromedia sous www.macromedia.com/go/dw_documentation_fr :

■ Utilisation de Dreamweaver

■ Bien démarrer avec Dreamweaver

■ Extension de Dreamweaver

■ Guide des API de Dreamweaver

Vous pouvez imprimer tout ou partie du PDF sur votre propre imprimante
ou vous pouvez remettre le PDF à une boutique qui fait des copies.

Discussion portant sur la documentation de Dreamweaver avec LiveDocs

La documentation de Dreamweaver est également disponible de manière
interactive dans le format LiveDocs. La version LiveDocs de l’Aide de
Dreamweaver ressemble beaucoup à l’aide du produit mais elle vous
permet de faire des commentaires sur le contenu des pages d’aide
individuelles. Vous pouvez ajouter des renseignements utiles sur un sujet
donné de Dreamweaver basé sur votre propre expérience ou solliciter l’avis
de collègues concepteurs ou développeurs de Dreamweaver.

Les LiveDocs de Dreamweaver sont disponibles sur

http://livedocs.macromedia.com/go/livedocs_dreamweaver_fr/

Utilisation du système d’aide de Dreamweaver 29

30 Apprentissage de Dreamweaver

CHAPITRE 2

Notions de base de Dreamweaver

Pour tirer le meilleur parti de votre expérience avec Macromedia
Dreamweaver 8, il vous faut comprendre les éléments de base de
l’Dreamweaverespace de travail. Ce chapitre vous présente les éléments de
l’espace de travail les plus importants et les plus utilisés. Il vous explique
comment accomplir quelques tâches de base dans Dreamwork.

Ce chapitre contient les sections suivantes :

Apprendre à connaître l’espace de travail de Dreamweaver 8 . . 31

Personnaliser l’espace de travail de Dreamweaver 8 . . . . . . . . . . 43

Accomplir des tâches élémentaires dans Dreamweaver 8. . . . . . 46

Apprendre à connaître l’espace de travail de Dreamweaver 8

L’espace de travail de Dreamweaver permet d’afficher des documents et les
propriétés des objets. Il comporte des barres d’outils donnant accès aux
opérations les plus courantes, vous permettant ainsi de modifier
rapidement vos documents.

Cette section vous présente une vue d’ensemble de l’espace de travail de
Dreamweaver 8. Pour des renseignements plus complets sur l’un
quelconque des éléments de l’espace de travail présenté dans cette section,
voir Chapitre 1, Exploration de l'espace de travail dans Utilisation de
Dreamweaver.

La présente section contient les rubriques suivantes :

■ Présentation de l’espace de travail, page 32

■ Fenêtre de document, page 34

■ Barre d’outils de document, page 35

■ Barre d’état, page 36

2

31

■ Barre Insérer, page 37

■ La barre d’outils de codage, page 39

■ Inspecteur des propriétés, page 40

■ Panneau Fichiers, page 41

■ Panneau Styles CSS, page 42

Présentation de l’espace de travail

Sous Windows, Dreamweaver propose une présentation intégrée 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.

Barre Insérer

Barre d’outils de document

Fenêtre de document

Groupes de
panneaux

Panneau FichiersInspecteur des propriétésSélecteur de balises

32 Notions de base de Dreamweaver

REMARQUE

L’espace de travail Windows dispose également d’une option Codeur qui
ancre les groupes de panneaux sur le côté gauche et affiche par défaut la
fenêtre de document en mode Code. Pour plus d’informations, voir

Utilisation de l'espace de travail orienté en mode Code (Windows
uniquement) dans Utilisation de Dreamweaver. Pour l’utilisation de cette

option, voir Choix de la présentation de l’espace de travail (sous Windows

uniquement), page 43.

Sur le Macintosh, Dreamweaver peut afficher de multiples documents dans
une seule fenêtre avec des onglets qui identifient chacun des documents.
Dreamweaver peut aussi apparaître sous la forme d’une partie de l’espace de
travail flottant dans laquelle chaque document s’affiche dans sa propre
fenêtre. 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.

Barre Insérer

Sélecteur de balises

Barre d’outils du document

Fenêtre de document

Inspecteur des propriétés

Groupes de
panneaux

Panneau Fichiers

Apprendre à connaître l’espace de travail de Dreamweaver 8 33

Vous pouvez basculer entre différentes mises en forme à la fois dans
Windows et Macintosh. Pour plus d’informations, consultez les sections

Choix de la présentation de l’espace de travail (sous Windows uniquement),
page 43 et Affichage de documents à onglets (Macintosh seulement), page 45.

Fenêtre de document

La fenêtre de document affiche le document actif. Vous pouvez choisir
parmi les modes d’affichage suivants :

Affichage Création est un environnement de création pour la mise en

forme visuelle des pages, l’édition visuelle et le développement rapide
d’applications. Dans ce mode, Dreamweaver affiche une représentation
visuelle entièrement modifiable du document, similaire à la représentation
de la page sur un navigateur.

Affichage Code est un environnement de codage manuel pour rédiger et

modifier du code HTML, JavaScript et du code de langage de-serveur, tel
que le langage PHP ou CFML (ColdFusion Markup Language), ou tout
autre type de code. Pour plus d’informations, voir Chapitre 20, Codage
dans Dreamweaver dans Utilisation de Dreamweaver.

Affichages Code et Création vous permettent d’obtenir l’affichage Code

et l’affichage Création du document dans une même fenêtre.
Lorsque la fenêtre de document dispose d’une barre de titre, cette dernière

affiche le titre de la page, et, entre parenthèses, le chemin et le nom de
fichier du document. Dreamweaver affiche un astérisque à la suite du nom
de fichier si vous avez apporté des modifications et que vous ne les avez pas
encore enregistrées.

Lorsque vous agrandissez la fenêtre de document de la présentation de l’espace
de travail intégré (sous Windows uniquement), elle s’affiche sans barre de
titre; le titre de la page, ainsi que le chemin et le nom du fichier s’affichent
alors dans la barre de titre de la fenêtre principale de l’espace de travail.

En outre, lorsqu’une fenêtre de Document est agrandie, des onglets
s’affichent en haut de la zone de la fenêtre de document indiquant les noms
de fichier de tous les documents ouverts. Pour passer à un autre document,
cliquez sur son onglet.

Pour plus d’informations sur l’utilisation de la fenêtre de document, voir
Chapitre 1, Exploration de l'espace de travail dans Utilisation de
Dreamweaver.

34 Notions de base de Dreamweaver

Barre d’outils de document

La barre d’outils de document est composée de boutons qui permettent
d’accéder rapidement aux différents modes d’affichage : Code, Création et
un mode d’affichage partagé pour afficher les modes Code et Création en
même temps.

La barre d’outils contient également plusieurs commandes et options
courantes permettant d’afficher le document et de le transférer d’un site
local vers un site distant.

Mode Code

Modes Code et Création

Débogage du serveur

Mode Création

Titre de document

Aucune erreur du navigateur

Valider le marqueur

Gestion de fichiers

Aperçu/Débogage dans le navigateur

Les options suivantes s’affichent dans la barre d’outils de document :

Mode Code pour afficher uniquement le mode Code dans la fenêtre de

document.

Modes Code et Création pour afficher les deux modes simultanément

dans deux volets distincts de la fenêtre de document. Dans ce cas, l’option
Mode Création en haut est activée dans le menu Options d’affichage.
Utilisez cette option pour préciser quel mode doit s’afficher en haut de la
fenêtre de document.

Mode Création pour afficher uniquement le mode Création dans la fenêtre

de document.

Débogage de serveur affiche un rapport pour vous aider à déboguer la

page ColdFusion en cours. Le rapport indique les erreurs éventuellement
présentes sur votre page.

Titre de document vous permet d’attribuer un titre à votre document et

l’afficher dans la barre de titre du navigateur. Si votre document possède
déjà un titre, celui-ci s’affiche dans ce champ.

Aucune erreur du navigateur permet de vérifier la compatibilité avec

différents navigateurs.

Assistances visuelles

Options d’affichage

Actualiser mode Création

Apprendre à connaître l’espace de travail de Dreamweaver 8 35

Valider le marqueur vous permet de valider le document actif ou la balise

sélectionnée.

Gestion des fichiers pour afficher le menu contextuel correspondant.
Aperçu/Débogage dans le navigateur pour prévisualiser ou déboguer un

document dans un navigateur. Sélectionnez un navigateur dans le menu
contextuel.

Actualiser le mode Création pour actualiser le mode Création du

document après avoir apporté des modifications dans le mode Code. Les
modifications apportées dans le mode Code n’apparaissent pas
automatiquement dans le mode Création. Vous devez exécuter tout
d’abord certaines opérations, comme enregistrer le fichier ou utiliser ce
bouton.

Options d’affichage pour définir les options d’affichage des modes Code

et Création, notamment le mode devant s’afficher au-dessus de l’autre. Les
options du menu s’appliquent à l’affichage actuel : Mode Création, mode
Code ou les deux.

Assistance visuelle pour vous fournir des supports visuels différents en

vue de la conception de vos pages.
Pour plus d’informations sur l’utilisation de la fenêtre de document, voir

Chapitre 1, Exploration de l'espace de travail dans Utilisation de
Dreamweaver.

36 Notions de base de Dreamweaver

Barre d’état

La barre d’état, située au bas de la fenêtre de document, fournit des
informations supplémentaires sur le document en cours de création.

Taille du document et estimation du
temps de téléchargement

Sélecteur de
balises

Outil Zoom

Outil Main

Outil Sélectionner

Menu contextuel Taille de fenêtre

Définir le facteur de zoom

Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection
active. Cliquez sur une balise quelconque dans la hiérarchie pour la
sélectionner avec son contenu. Cliquez sur
le corps du document. Pour définir les attributs

<body> pour sélectionner tout

class ou id d’une balise

dans le sélecteur de balises, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Option enfoncée (Macintosh) sur
la balise et choisissez une classe ou un ID dans le menu contextuel. Il est
préférable de faire appel au Sélecteur de balises pour sélectionner des balises
car il garantit avec certitude la bonne sélection.

L’outil Main vous permet de cliquer sur le document et de le glisser jusque
dans la fenêtre de document. Cliquer sur l’outil Sélectionner pour
désactiver l’outil Main.

L’outil Zoom et le menu contextuel Définir le facteur de zoom permettent
de définir un taux d’agrandissement pour votre document. Pour plus
d’informations, voir Zoom avant et arrière dans Utilisation de Dreamweaver.

Le menu contextuel Taille de la fenêtre (visible en mode Création
uniquement) permet de redimensionner la fenêtre du document selon des
dimensions prédéfinies ou personnalisées. Pour plus d’informations, voir

Redimensionnement de la fenêtre de document dans Utilisation de
Dreamweaver.

A droite du menu contextuel Taille de fenêtre figurent une estimation de la
taille du document et du temps de téléchargement de la page, ainsi que la
liste de tous les fichiers dépendants, tels que les images et autres fichiers de
données. Pour plus d’informations, voir Vérification des préférences de durée
et de la taille de téléchargement dans Utilisation de Dreamweaver.

Pour plus d’informations sur l’utilisation de la barre d’état, voir Chapitre 1,
Exploration de l'espace de travail dans Utilisation de Dreamweaver.

Barre Insérer

Les boutons qui composent la barre Insérer permettent de créer et d’insérer
des objets, tels que des tableaux, des calques et des images. Lorsque vous
placez le curseur de la souris sur un bouton, une info-bulle indiquant le
nom de ce bouton apparaît.

Apprendre à connaître l’espace de travail de Dreamweaver 8 37

Les boutons sont organisés en plusieurs catégories, sur le côté gauche de la
barre Insérer. D’autres catégories s’affichent lorsque le document
sélectionné contient du code serveur, tel que des documents ASP ou
CFML. Au démarrage de Dreamweaver, la dernière catégorie
utilisée s’ouvre.

Certaines catégories disposent de boutons ouvrant des menus contextuels.
Lorsque vous sélectionnez une option dans l’un d’eux, l’action associée est
attribuée par défaut au bouton. Par exemple, si vous sélectionnez le menu
contextuel du bouton Image, puis Espace réservé pour l’image, la
prochaine fois que vous cliquerez sur le bouton Image, Dreamweaver
insérera un espace réservé pour l’image. Lorsque vous sélectionnez une
nouvelle option dans l’un de ces menus, l’action attribuée par défaut au
bouton change.

La barre Insérer est organisée en différentes catégories, comme suit :

La catégorie Commun permet de créer et d’insérer les objets les plus

couramment utilisés, comme les images et les tableaux.

La catégorie Mise en forme permet d’insérer des tableaux, des balises div,

des calques et des cadres. Vous pouvez également choisir parmi trois types
de tableaux : Standard (par défaut), Tableaux étendus et Mise en forme. Si
le mode Mise en forme est sélectionné, vous pouvez utiliser les outils de
mise en forme de Dreamweaver : Dessiner la cellule de Mise en forme et
Dessiner le tableau de Mise en forme.

La catégorie Formulaires contient des boutons permettant de créer des

formulaires et d’y insérer des éléments.
La catégorie

liste, telles que

La catégorie HTML insère des balises HTML pour les règles horizontales,

Texte insère diverses balises de mise en forme de texte et de

b, em, p, h1 et ul.

le contenu de l’en-tête, les tableaux, les cadres et les scripts.

Les catégories de code serveur sont disponibles uniquement pour les

pages utilisant un langage serveur spécifique comme ASP, ASP.NET,
CFML Basic, CFML Flow, CFML Advanced, JSP et PHP. Ces catégories
proposent des objets de type code serveur que vous pouvez insérer en mode
Code.

38 Notions de base de Dreamweaver

La catégorie Application insère des éléments dynamiques, tels que les jeux

d’enregistrements, les régions répétées et les formulaires d’insertion
d’enregistrements et de mise à jour.

La catégorie éléments Flash insère des éléments Flash de Macromedia.
La catégorie Favoris permet de regrouper et d’organiser, dans un espace

commun, les boutons de la barre Insérer que vous utilisez le plus
fréquemment.

Pour plus d’informations sur l’utilisation de la barre d’état, voir Chapitre 1,
Exploration de l'espace de travail dans Utilisation de Dreamweaver.

La barre d’outils de codage

La barre d’outils de codage est composée de boutons qui vous permettent
d’effectuer de nombreuses opérations de codage standard (réduction et
agrandissement des sélections de code, mise en évidence de code non
valide, application et suppression de commentaires, mise en retrait de code,
insertion de fragments de code récemment utilisés, etc.) La barre d’outils
Codage est visible uniquement en mode Code et apparaît verticalement sur
le côté gauche de la fenêtre de Document.

Apprendre à connaître l’espace de travail de Dreamweaver 8 39

Vous ne pouvez pas détacher ni déplacer la barre d’outils de codage mais
vous pouvez la masquer. Pour plus d’informations, voir Affichage des barres
d'outils dans Utilisation de Dreamweaver.

Pour plus d’informations sur l’utilisation de la barre d’outils Codage, voir

Insertion rapide de code avec la barre d'outils de codage dans Utilisation de
Dreamweaver.

Inspecteur des propriétés

L’inspecteur de propriétés permet d’examiner et de modifier les propriétés
les plus fréquentes de l’élément de la page sélectionnée, tel que le texte ou
un objet inséré. Le contenu de l’inspecteur de propriétés varie en fonction
de l’élément sélectionné. Par exemple, si vous sélectionnez une image de la
page, l’inspecteur des propriétés se modifie pour montrer les propriétés de
l’image (telles que le chemin d’accès au fichier, la largeur et la hauteur de
l’image, la bordure autour de l’image, s’il y a lieu, et ainsi de suite).

Par défaut, l’inspecteur de propriétés se trouve au bas de l’espace de travail,
mais vous pouvez l’ancrer en haut de l’espace de travail si vous le souhaitez.
Vous pouvez aussi le laisser flotter dans l’espace de travail. Pour plus
d’informations sur le déplacement de l’inspecteur de propriétés, voir

Ancrage et annulation d'ancrage de panneaux et de groupes de panneaux dans
Utilisation de Dreamweaver.

Pour plus d’informations sur l’utilisation de l’inspecteur de propriétés, voir
Utilisation de l'inspecteur Propriétés dans Utilisation de Dreamweaver.

40 Notions de base de Dreamweaver

Panneau Fichiers

Vous pouvez utiliser les panneaux Fichiers pour afficher et exploiter les
fichiers dans votre site Dreamweaver.

Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau
Fichiers, vous pouvez modifier la taille de la zone d’affichage. Vous pouvez
également agrandir ou réduire le panneau Fichiers. Dans sa forme réduite,
le panneau Fichiers affiche le contenu du site local, du site distant ou du
serveur d’évaluation sous la forme d’une liste de fichiers. Sous sa forme
développée, le panneau affiche le site local et soit le site distant, soit le
serveur d’évaluation. Le panneau Fichiers peut également afficher une carte
d’arborescence du site local.

Pour les sites Dreamweaver, il est également possible de personnaliser le
panneau Fichiers en modifiant la vue (site local ou distant) qui s’affiche par
défaut dans le panneau réduit.

Pour plus d’informations sur l’utilisation du panneau Fichiers pour gérer
votre site, voir Chapitre 4, Gestion des fichiers dans Utilisation de
Dreamweaver.

Apprendre à connaître l’espace de travail de Dreamweaver 8 41

Panneau Styles CSS

Il vous permet de suivre les règles CSS et les propriétés qui affectent un
élément de page sélectionné (mode Actuel), ou les règles et les propriétés
qui affectent l’ensemble d’un document (mode Tous). Un bouton bascule
placé sur la partie supérieure du panneau CSS vous permet de passer d’un
mode à l’autre. Le panneau Styles CSS vous permet de modifier les
propriétés CSS dans les deux modes.

42 Notions de base de Dreamweaver

Vous pouvez redimensionner l’un quelconque des volets en faisant glisser
les cadres entre les volets.

En mode Actuel, le panneau Styles CSS présente trois volets : un volet
Résumé de la sélection qui présente les propriétés CSS de la sélection en
cours dans le document; un volet Règles qui précise l’emplacement des
propriétés sélectionnées (ou une cascade de règles pour la balise
sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet
de modifier les propriétés CSS de la règle définissant la sélection.

En mode Tout, le panneau Styles CSS présente deux volets : un volet
Toutes les règles (en haut) et un volet Propriétés (en bas). Le volet Toutes
les règles présente la liste des règles définies dans le document actif, ainsi
que l’ensemble des règles définies dans les feuilles de styles jointes à ce
document. Le volet Propriétés permet de modifier les propriétés CSS de
toute règle sélectionnée dans le volet Toutes les règles.

Toute modification apportée dans le volet Propriétés s’applique
immédiatement, ce qui vous permet d’avoir un aperçu direct de votre
travail.

Pour plus d’informations sur le panneau Styles CSS, voir A propos du
panneau Styles CSS dans Utilisation de Dreamweaver.

Personnaliser l’espace de travail de Dreamweaver 8

Vous pouvez personnaliser Dreamweaver en fonction de vos besoins, à
l’aide de certaines techniques élémentaires sans avoir à comprendre le code
complexe ni à modifier aucun fichier texte.

La présente section contient les rubriques suivantes :

■ Choix de la présentation de l’espace de travail (sous Windows uniquement),

page 43

■ Affichage de documents à onglets (Macintosh seulement), page 45

■ Affichage et masquage de la page de démarrage, page 45

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

Sous Windows, vous pouvez choisir entre les présentations Création et
Codeur de l’espace de travail. La première fois que vous démarrez
Dreamweaver, une boîte de dialogue vous permet de choisir la présentation
d’un espace de travail. Vous pouvez changer d’espace à tout moment.

Personnaliser l’espace de travail de Dreamweaver 8 43

Pour choisir la présentation de l’espace de travail la première
fois que vous démarrez Dreamweaver :

1. Sélectionnez l’une des présentations suivantes :
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.

Codeur : il s’agit du même espace de travail intégré, mais avec les

groupes de panneaux ancrés sur la gauche, dans une présentation
similaire à celle utilisée par Macromedia HomeSite et Macromedia
ColdFusion Studio. Les fenêtres de document affichent par défaut le
mode Code.

REMARQUE

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

2. Cliquez sur OK.

Pour changer la présentation de l’espace de travail après le
choix initial :

■ Choisissez Fenêtre > Présentation de l’espace de travail puis

sélectionnez la présentation d’espace de travail que vous préférez.

Outre l’option Codeur et Designer, vous pouvez également sélectionner
l’option Double écran. Si vous possédez un moniteur secondaire, cette
option permet de placer tous les panneaux sur ce dernier et de conserver la
fenêtre Document sur le moniteur principal.

44 Notions de base de Dreamweaver

Affichage de documents à onglets (Macintosh seulement)

Sur le Macintosh, Dreamweaver peut afficher de multiples documents dans
une seule fenêtre de document avec des onglets qui identifient chacun des
documents. Dreamweaver peut aussi apparaître sous la forme d’une partie
de l’espace de travail flottant dans laquelle chaque document s’affiche dans
sa propre fenêtre.

Pour ouvrir un document à onglet dans une fenêtre séparée :

■ Cliquez-droit ou maintenez la touche Option enfoncée et sélectionnez

Déplacer dans une nouvelle fenêtre dans le menu contextuel.

Pour rassembler des documents épars dans des fenêtres à
onglets :

■ Choisissez Fenêtre > Combiner en onglets.

Pour modifier le paramètre de document à onglet par défaut :

1. Sélectionnez Dreamweaver > Préférences, puis la catégorie Général.

2. Sélectionnez ou désélectionnez Ouvrir les documents dans des onglets

et cliquez sur OK.

REMARQUE

Dreamweaver ne modifie pas l’affichage des documents ouverts lorsque
vous modifiez les préférences. En revanche, une fois que vous avez
sélectionné une nouvelle préférence, les documents ouverts s’affichent en
fonction de cette dernière.

Affichage et masquage de la page de démarrage

La page de démarrage de Dreamweaver s’affiche lorsque vous démarrez
Dreamweaver ou lorsqu’aucun document n’est ouvert. Vous pouvez
masquer ou afficher cette page selon vos besoins. Lorsque la page de
démarrage est masquée et qu’aucun document n’est ouvert, la fenêtre de
document est vide.

Personnaliser l’espace de travail de Dreamweaver 8 45

Pour masquer la page de démarrage :

■ Activez la case Ne plus afficher dans la page de démarrage.

Cette page ne s’affichera plus lors du démarrage de Dreamweaver ni
après l’ouverture et la fermeture d’un document.

Pour afficher la page de démarrage :

1. Choisissez Edition > Préférences (Windows) ou Dreamweaver >

Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences

générales s’affiche.

2. Activez la case Afficher la page de démarrage.

Cette page s’affichera lors du démarrage de Dreamweaver ou après
l’ouverture et la fermeture d’un document.

Accomplir des tâches élémentaires dans Dreamweaver 8

Cette section décrit comment accomplir des tâches élémentaires telles que
créer, ouvrir et enregistrer des fichiers. Pour plus d’informations, voir
Chapitre 3, Création et ouverture de documents dans Utilisation de
Dreamweaver.

La présente section contient les rubriques suivantes :

■ Présentation des sites Dreamweaver, page 47

■ Créer de nouveaux fichiers dans Dreamweaver, page 48

■ Enregistrer des fichiers dans Dreamweaver, page 49

■ Ouvrir des fichiers dans Dreamweaver, page 49

46 Notions de base de Dreamweaver

Présentation des sites Dreamweaver

Vous pouvez travailler avec un grand choix de types de fichiers dans
Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le
plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup
Language) contiennent le langage à base de balises qui se charge d’afficher
une page Web dans un navigateur. Vous pouvez enregistrer les fichiers
HTML avec l’extension .html ou .htm. Dreamweaver enregistre par défaut
les fichiers avec l’extension .html.

Voici quelques autres types de fichiers courants que vous pourriez utiliser
quand vous travaillez avec Dreamweaver.

CSS (ou Cascading Style Sheet) pour des fichiers avec une extension .css.

Ils sont utilisés pour formater le contenu HTML et fixer le positionnement
de divers éléments de page. Pour plus d’informations sur l’utilisation de ces
types de fichiers, voir Description des feuilles de style en cascade dans
Utilisation de Dreamweaver.

GIF (ou Graphics Interchange Format) pour des fichier qui ont une

extension .gif. Ce format graphique est très utilisé dans les dessins
humoristiques, les logos, les graphismes pourvus de zones transparentes et
les animations. Les GIF sont constitués d’un maximum de 256 couleurs.

JPEG (ou Joint Photographic Experts Group, du nom de l’organisation

qui a créé le format) pour des fichiers qui ont une extension .jpg et qui
correspondent généralement à des photographies ou à des images très
colorées. Ce format est le plus approprié pour les photographies
numériques ou scannées, les images utilisant des textures, les images
pourvues de transitions à gradient de couleurs ainsi que toutes les images
exigeant plus de 256 couleurs.

XML (pour Extensible Markup Language) pour des fichiers avec une

extension de type .xml. Ils contiennent des données brutes qui peuvent être
formatées en utilisant XSL (Extensible Stylesheet Language). Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 36,

Affichage de données XML dans des pages Web dans Utilisation de
Dreamweaver.

XSL (ou Extensible Stylesheet Language) pour des fichiers avec une

extension de type .xsl ou .xslt. Ils sont utilisés pour créer des données XML
que vous voulez afficher sur une page Web. Pour plus d’informations sur
l’utilisation de ces types de fichiers, voir Chapitre 36, Affichage de données
XML dans des pages Web dans Utilisation de Dreamweaver.

Accomplir des tâches élémentaires dans Dreamweaver 8 47

CFML (ou ColdFusion Markup Language) pour des fichiers avec une

extension de type .cfm. Ils sont utilisés pour traiter des pages dynamiques.
Pour plus d’informations sur l’utilisation de ces types de fichiers, voir
Chapitre 40, Création rapide d'applications ColdFusion dans Utilisation de
Dreamweaver.

ASPX (ou ASP.NET) pour des fichiers qui ont une extension de type

.aspx. Ils sont utilisés pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 41,
Création rapide d'applications ASP.NET dans Utilisation de Dreamweaver.

PHP (ou PHP) : les fichiers Hypertext Preprocessor ont une extension du

type .php. Ils sont utilisés pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 43,
Création rapide d'applications PHP dans Utilisation de Dreamweaver.

Créer de nouveaux fichiers dans Dreamweaver

Cette section vous explique comment créer un nouveau document vierge
dans Dreamweaver.

Dans Dreamweaver, vous pouvez aussi créer de nouveaux documents qui
sont basés sur un fichier conçu à partir du produit lui-même ou sur la base
d’un modèle existant. Pour plus d’informations, voir Création de nouveaux
documents dans Utilisation de Dreamweaver.

48 Notions de base de Dreamweaver

Pour créer un nouveau document vierge :

1. Choisissez Fichier > Nouveau.

La boîte de dialogue Nouveau document s’affiche. L’onglet Général est
déjà sélectionné.

2. Sélectionnez l’une des catégories suivantes dans la liste : Page de base,

page dynamique, page modèle, autre ou jeux de cadres. Sélectionnez
ensuite le type de document que vous souhaitez créer dans la liste de
droite.

Par exemple, sélectionnez Page de base pour créer un document
HTML, ou sélectionnez Page dynamique pour créer un document
ColdFusion ou ASP, et ainsi de suite.

Pour plus d’informations concernant les options de cette boîte de
dialogue, cliquez sur le bouton Aide dans la boîte de dialogue.

3. Cliquez sur le bouton Créer.

Le nouveau document s’ouvre dans la fenêtre de document.

4. Enregistrez le document (voir Enregistrer des fichiers dans Dreamweaver,

page 49).

Enregistrer des fichiers dans Dreamweaver

Il est nécessaire d’enregistrer tout nouveau document que vous créez.

Pour enregistrer un document :

1. Choisissez Fichier > Enregistrer.

2. Dans la boîte de dialogue qui s’affiche, recherchez le dossier où vous

voulez enregistrer le fichier.

3. Dans la zone de texte Nom de fichier, entrez le nom du fichier.

Evitez les espaces et les caractères spéciaux pour les noms de fichiers et
de dossiers ; les noms de fichiers ne doivent pas commencer par un
chiffre. En particulier, n’utilisez pas de caractères spéciaux (par exemple
é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou
points) dans le nom des fichiers que vous avez l’intention de placer sur
un serveur distant. En effet, la plupart des serveurs transforment ces
caractères lors du transfert, rendant ainsi inopérants les liens vers
ces fichiers.

4. Cliquez sur Enregistrer.

CONSEIL

Il est conseillé
d’enregistrer votre
fichier dans un site
Dreamweaver. Pour
plus d’informations,
consultez la section

Chapitre 3,

Didacticiel :
Configuration de
votre site et des
fichiers de projet,

page 53.

Ouvrir des fichiers dans Dreamweaver

Dans Dreamweaver, vous pouvez aisément ouvrir et corriger vos
documents.

Pour ouvrir un fichier :

1. Choisissez Fichier > Ouvrir.

2. Dans la boîte de dialogue Ouvrir, sélectionnez le fichier et cliquez sur

Ouvrir.

Accomplir des tâches élémentaires dans Dreamweaver 8 49

50 Notions de base de Dreamweaver

PARTIE 2

Didacticiels

La deuxième partie de ce manuel contient cinq didacticiels de base qui vous
conduisent à travers les étapes de la construction d’une page Web. Cette
page va devenir la page d’accueil du Cafe Townsend, un restaurant fictif.

Cette partie du manuel contient les sections suivantes :

Didacticiel : Configuration de votre site et des fichiers

de projet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53

Didacticiel : Création d’une mise en forme de page basée

sur un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Didacticiel : Ajout de contenu aux pages . . . . . . . . . . . . . . . . . . . . . 81

Didacticiel : Mise en forme de votre page avec CSS . . . . . . . . . .109

Didacticiel : Publication de votre site . . . . . . . . . . . . . . . . . . . . . . . . 139

2

51

CHAPITRE 3

Didacticiel : Configuration de votre site et des fichiers de projet

Ce didacticiel va vous présenter le concept d’un site Macromedia
Dreamweaver 8 et vous expliquer comment configurer les fichiers de projet
pour l’exemple de site Web Cafe Townsend. 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, le moment venu, à la disposition d’autres utilisateurs (le site
distant). Vous pouvez utiliser les panneaux Fichiers de Dreamweaver pour
afficher et exploiter les fichiers dans votre site.

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 permettre leur visualisation sur le
Web. Dans ce didacticiel, vous apprendrez uniquement à configurer le site
local, de manière à entamer immédiatement la création de pages Web. Par
la suite, quand vous aurez terminé le site Web, vous apprendrez à créer un
site distant de manière à envoyer vos fichiers sur un serveur Web.

Dans ce didacticiel, vous allez accomplir les tâches suivantes :

Apprenez à utiliser des sites Dreamweaver . . . . . . . . . . . . . . . . . . .54

Configurez vos fichiers de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Définissez un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3

53

Apprenez à utiliser des sites Dreamweaver

Dans Dreamweaver, le terme « site » peut se rapporter aussi bien à un site
Web qu’à un lieu de stockage local dans lequel sont conservés tous les
documents appartenant à un site Web. Vous devez définir un tel
emplacement avant de créer votre site. Un site Dreamweaver organise tous
les documents associés à votre site Web et vous permet de suivre et de gérer
les liens, de gérer et de partager les fichiers, ainsi que de transférer vos
fichiers de site à un serveur Web.

REMARQUE

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

Un site Dreamweaver se compose de trois parties, selon votre
environnement de travail et le type de site Web en cours de
développement :

Le

dossier local correspond à votre répertoire de travail. Dreamweaver

désigne ce dossier comme votre site local. Le dossier local est généralement
un dossier qui se trouve sur votre disque dur.

Le

dossier distant est le répertoire dans lequel sont stockés les fichiers,

selon votre environnement, que vous réservez aux évaluations, à la
production, à la collaboration et à la publication. Dreamweaver considère
ce dossier comme votre site distant. Le dossier distant est un dossier qui se
trouve sur l’ordinateur qui fait tourner le serveur Web. Cet ordinateur est
souvent (mais pas toujours) celui qui rend votre site disponible au grand
public sur le Web.

Le

dossier des pages dynamiques (dossier du serveur d’évaluation) est

l’emplacement dans lequel Dreamweaver traite les pages dynamiques. Ce
dossier est généralement le même que le dossier distant. Ne vous souciez
pas de ce dossier, sauf si vous développez une application Web. Pour plus
d’informations sur le dossier du serveur d’évaluation, voir Définition du
dossier de traitement des pages dynamiques dans Utilisation de Dreamweaver.

54 Didacticiel : Configuration de votre site et des fichiers de projet

Vous pouvez définir un site Dreamweaver à l’aide de l’assistant de
définition d’un site, qui vous guide tout au long de la procédure de
configuration, ou à l’aide des paramètres avancés de définition du site, qui
vous permettent de configurer individuellement des dossiers locaux,
distants et d’évaluation, si nécessaire. Dans ce didacticiel, vous allez utiliser
les paramètres avancés de la boîte de dialogue de Configuration du site afin
de configurer un dossier local pour vos fichiers de projet. Plus loin dans ce
manuel, vous apprendrez à configurer un dossier distant de manière à
publier vos pages sur un serveur Web et à les rendre accessibles au public.

Pour plus d’informations sur l’utilisation de l’assistant de Configuration du
site, voir Configuration d'un nouveau site Dreamweaver dans Utilisation de

Dreamweaver.

Pour plus d’informations sur la configuration d’un site distant, voir

Chapitre 7, Didacticiel : Publication de votre site.

Pour plus d’informations sur les sites Dreamweaver en général, voir
« Configuration d’un site Dreamweaver » dans l’aide Utilisation de
Dreamweaver.

Configurez vos fichiers de projet

Lorsque vous créez un site local, vous pouvez placer les actifs existants
(images ou autres éléments de contenu) dans le dossier racine du site local
(le dossier « principal » du site). Puis, lorsque vous serez disposé à ajouter
du contenu à vos pages, les actifs seront à cet endroit, prêts à l’emploi.

Les exemples de fichiers inclus avec Dreamweaver contiennent des actifs
pour l’exemple de 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 un dossier approprié sur votre disque dur.

1. Créez un nouveau dossier nommé local_sites sur votre disque dur.

Par exemple, créez un dossier nommé local_sites à l’un des deux
endroits suivants :

■ Sous Windows :

C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites.

Configurez vos fichiers de projet 55

■ Sur Macintosh : DD Macintosh/Utilisateurs/

votre_nom_d’utilisateur/Documents/local_sites.

REMARQUE

Sur un Macintosh, votre dossier d’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 cafe_townsend 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 :

■ Sous Windows : C:\Program

Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\.

■ Sur Macintosh : DD Macintosh/Applications/Macromedia

Dreamweaver 8/Tutorial_assets/cafe_townsend.

A SAVOIR...

Présentation des dossiers locaux et distants « racines » Le dossier racine local de votre site

Dreamweaver est souvent le dossier principal, ou le dossier de niveau supérieur, de votre site Web. Il
correspond généralement à un dossier identique sur le site distant (serveur Web). En outre, le dossier
racine définit généralement la première partie de l’URL de votre site Web, celle qui précède le nom de
domaine. Par exemple, si votre dossier racine local se nomme monsiteweb et que vous avez défini un
dossier racine identique sur le site distant, l’URL de votre site Web pourrait être de type « http://
www.yahoo.com/monsiteweb ».
Dans certains cas, le dossier racine local peut ne pas avoir un nom absolument identique à celui se
trouvant sur le site distant. Par exemple, si vous êtes le propriétaire du nom de domaine
www.monsiteweb.com, avec un répertoire racine distant public_html, votre dossier racine local pourrait
quand même s’appeler monsiteweb. Les fichiers dans les répertoires racines locaux et distants seraient
isentiques; il n’y a que les noms de dossiers (public_html sur le site distant et monsiteweb sur l’ordinateur
local) qui seraient différents.

3. Copiez le dossier cafe_townsend dans le dossier local_sites.

Il s’agit du dossier que vous allez utiliser comme dossier racine
(principal) de votre site Dreamweaver.

56 Didacticiel : Configuration de votre site et des fichiers de projet

Définissez un dossier local

Vous devez définir un dossier local Dreamweaver pour chaque site Web
créé. Ce dossier local est le dossier du disque dur dans lequel seront
stockées les copies de travail des fichiers du site. Ce dossier local est
indispensable au bon fonctionnement de certaines fonctions de
Dreamweaver.

La définition d’un dossier local vous permet également de gérer vos fichiers
et de les transférer vers ou depuis le serveur Web à l’aide de méthodes
différentes de transfert de fichiers.

Vous allez à présent définir comme dossier local le dossier cafe_townsend
que vous avez copié dans le dossier local_sites.

1. Lancez Dreamweaver, puis sélectionnez Site > Gérer les sites.

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

2. Cliquez sur le bouton Nouveau, puis sélectionnez Site.

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

3. Si l’assistant (onglet Elémentaire) s’affiche, cliquez sur l’onglet Avancé

et sélectionnez Infos locales dans la liste Catégorie (sélection par défaut).

4. Dans la zone de texte Nom du site, tapez Cafe Townsend en tant que

nom du site.

5. Dans la zone de texte Dossier racine local, indiquez le dossier

cafe_townsend que vous avez copié dans le dossier local_sites selon les
instructions de la section précédente.

Vous pouvez cliquer sur l’icône du dossier pour rechercher le dossier et
le sélectionner, ou entrer son chemin d’accès dans la zone de texte
Dossier racine local.

6. Dans la zone de texte Dossier des images par défaut, indiquez le dossier

d’images qui figure déjà dans le dossier cafe_townsend.
Vous pouvez cliquer sur l’icône du dossier pour rechercher le dossier et

le sélectionner, ou entrer son chemin d’accès dans la zone de texte
Dossier des images par défaut.

Définissez un dossier local 57

La boîte de dialogue Définition d’un site s’affiche comme suit :

7. Cliquez sur OK.

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

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

58 Didacticiel : Configuration de votre site et des fichiers de projet

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.

Pour plus d’informations sur le fonctionnement du panneau Fichiers, voir

Panneau Fichiers, page 41.

Un dossier racine local est désormais défini pour votre site. C’est dans le
dossier racine local de votre ordinateur local que vous conservez les copies
de travail de vos pages Web. Plus tard, si vous désirez publier vos pages et
les rendre disponibles au grand public, il vous faudra définir un dossier
distant, c’est-à-dire un emplacement sur un ordinateur distant qui fait
tourner un serveur Web et qui contiendra des copies des pages publiées de
vos fichiers locaux.

Vous pouvez suivre les autres didacticiels de ce guide pour créer l’exemple
du site Cafe Townsend 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. Pour plus d’informations, voir la section Chapitre 7,

Didacticiel : Publication de votre site.

Définissez un dossier local 59

60 Didacticiel : Configuration de votre site et des fichiers de projet

CHAPITRE 4

Didacticiel : Création d’une mise en

4

forme de page basée sur un tableau

Ce didacticiel indique comment créer dans Macromedia Dreamweaver 8
une mise en forme de page basée sur un tableau. La mise en forme
détermine la manière dont votre page s’affichera dans le navigateur, par
exemple où seront placés les menus, les images et le contenu de
Macromedia Flash.

Les tableaux sont très utiles pour présenter des données tabulaires et mettre
en forme du texte et des images dans une page HTML. Vous pouvez
utiliser des tableaux pour créer une mise en forme de manière rapide et
aisée. Dans ce didacticiel, vous allez créer plusieurs tableaux dans un
nouveau document Dreamweaver. Les lignes et les cellules des tableaux
font office de «conteneurs» pour le contenu que vous ajouterez plus tard.

Dans ce didacticiel, vous allez accomplir les tâches suivantes :

Examinez la maquette détaillée de conception . . . . . . . . . . . . . . . .62

Créez et enregistrez une nouvelle page . . . . . . . . . . . . . . . . . . . . . .64

Insérez des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65

Définissez les propriétés des tableaux . . . . . . . . . . . . . . . . . . . . . . .69

Insérez un espace réservé pour l’image . . . . . . . . . . . . . . . . . . . . . . 75

Ajoutez de la couleur à la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

61

Examinez la maquette détaillée de conception

En règle générale, vous n’entamerez pas la création d’un site Web en
ouvrant Dreamweaver puis en mettant immédiatement des pages en forme.
Les premières étapes de la création d’un site Web se déroulent sur une
feuille de papier ou dans une application de graphisme telle que
Macromedia Fireworks. Les concepteurs graphiques créent généralement
une maquette détaillée du site Web de manière à la présenter au client et à
s’assurer que celui-ci approuve les idées initiales relatives au site.

Une maquette détaillée se compose d’un certain nombre d’éléments de
page que le client a demandés pour son site Web. Par exemple, le client
peut demander à avoir un logo en haut de la page, une section de
navigation avec des liens vers les autres pages, une section contenant un
magasin en ligne et un endroit où insérer des clips vidéo. Selon ces
desiderata, le concepteur entame la planification de la mise en forme du
site et crée des esquisses de pages répondant aux attentes du client.

62 Didacticiel : Création d’une mise en forme de page basée sur un tableau

Dans ce didacticiel, vous disposerez de la maquette détaillée complète et
approuvée de Cafe Townsend, un restaurant fictif qui désire disposer d’un
site Web. En tant que concepteur Web, vous êtes chargé de transformer
cette maquette détaillée en une page Web fonctionnelle (dans la plupart des
cas, en collaboration avec d’autres concepteurs graphiques et des
développeurs Flash).

Vous remarquerez que le concepteur graphique vous a fourni une maquette
détaillée de page Web qui comprend un certain nombre de zones de
contenu et quelques idées concernant les graphismes. Dans les sections
suivantes, vous allez employer Dreamweaver pour mettre ce concept en
forme.

Examinez la maquette détaillée de conception 63

Vous pouvez également ouvrir le fichier original de la maquette détaillée si
vous désirez le voir s’afficher sur l’écran de l’ordinateur. Vous pouvez
trouver la maquette, homepage-mockup.jpg, dans le dossier
fireworks_assets du dossier cafe_townsend que vous avez copié sur votre
disque dur dans Chapitre 3, Didacticiel : Configuration de votre site et des

fichiers de projet. Si vous le souhaitez, vous pouvez même l’imprimer pour

l’avoir sous les yeux pendant que vous construisez votre page.

Créez et enregistrez une nouvelle page

Après avoir configuré un site et consulté les maquettes détaillées, vous
pouvez entamer la création de pages Web. Vous allez tout d’abord créer une
nouvelle page et l’enregistrer dans le dossier racine local cafe_townsend de
votre site Web. Cette page va devenir la page d’accueil du Cafe Townsend,
un restaurant fictif.

Si vous n’avez pas créé ce dossier, il faut absolument le faire avant de
poursuivre. Pour toutes instructions, voir Chapitre 3, Didacticiel :

Configuration de votre site et des fichiers de projet.

1. Dans Dreamweaver, choisissez Fichier > Nouveau.

2. Dans l’onglet Général de la boîte de dialogue Nouveau document,

sélectionnez Page de base dans la liste Catégorie, puis cliquez sur Créer.

3. Sélectionnez Fichier > Enregistrer sous.

4. Dans la boîte de dialogue Enregistrer sous, accédez au dossier

cafe_townsend que vous avez défini comme dossier racine local du site.
Dans le Chapitre 3, Didacticiel : Configuration de votre site et des fichiers

de projet, vous avez créé ce dossier dans un dossier nommé local_sites.

5. Tapez index.html dans la zone de texte Nom de fichier puis cliquez sur

Enregistrer.
Le nom du fichier paraît maintenant dans la barre de titre dans la partie

supérieure de la fenêtre de l’application.

64 Didacticiel : Création d’une mise en forme de page basée sur un tableau

6. Dans la zone texte Titre du document, dans le haut de votre nouveau

document, entrez Cafe Townsend.

Il s’agit du titre de votre page (qui est différent du nom de fichier). Les
visiteurs de votre site verront ce titre dans la barre de titre de la fenêtre
du navigateur lorsqu’ils afficheront la page dans un navigateur Web.

7. Choisissez Fichier > Enregistrer pour enregistrer votre page.

Insérez des tableaux

Vous allez ensuite ajouter un tableau qui contiendra du texte, des
graphismes et des actifs Macromedia Flash.

1. Cliquez sur la page pour placer le point d’insertion dans l’angle

supérieur gauche de la page.

2. Choisissez Insertion > Tableau.

Insérez des tableaux 65

3. Dans la boîte de dialogue Tableau, procédez de la manière suivante :

■ Entrez 3 dans la zone de texte Lignes.

■ Entrez 1 dans la zone de texte Colonnes.

■ Saisissez 700 dans la zone de texte Largeur du tableau.

■ Sélectionnez Pixels dans le menu déroulant Largeur du tableau.

■ Entrez 0 dans la zone de texte Largeur de la bordure.

■ Saisissez 0 dans la zone de texte Marge intérieure des cellules.

■ Saisissez 0 dans la zone de texte Espacement entre les cellules.

4. Cliquez sur OK.

Un tableau comportant trois lignes et une colonne s’affiche dans votre
document. Ce tableau fait 700 pixels de large, ne possède pas de
bordure et ses cellules n’ont pas de marge intérieure ni d’espacement.

66 Didacticiel : Création d’une mise en forme de page basée sur un tableau

A SAVOIR...

Compléments sur les tableaux Les tableaux sont très utiles pour présenter des données tabulaires et

mettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ;
chaque ligne comporte au moins une cellule. Quand vous créez de multiples lignes avec de multiples
cellules, ces dernières forment des colonnes. Techniquement parlant, une cellule est une séparation dans
une ligne horizontale et une colonne est un cumul vertical de ces séparations de cellules.
Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau dans le Sélecteur de tableau
(matérialisé par des lignes vertes) lorsque le tableau est sélectionné ou que le point d’insertion se trouve
dedans.

En regard des largeurs se trouvent les flèches du menu des en-têtes de tableau et des menus des en­têtes de colonne. Vous pouvez utiliser les menus pour accéder rapidement à des commandes standard
relatives aux tableaux. Vous pouvez activer ou désactiver l’affichage des largeurs et des menus en
sélectionnant Affichage > Assistance visuelle > Largeurs de tableau.
Un tableau peut posséder des bordures et ses cellules peuvent comporter une marge intérieure, un
espacement ou les deux à la fois. La marge intérieure représente le nombre de pixels entre le contenu de
la cellule et les limites de celle-ci. L’espacement entre les cellules représente le nombre de pixels entre les
cellules contiguës d’un tableau.
Si vous n’attribuez pas de façon explicite de valeurs pour les marges intérieures et l’espacement des
cellules, la plupart des navigateurs affichent le tableau comme si les marges des cellules étaient fixées à 1
et leur espacement à 2. Pour vous assurer que les navigateurs affichent le tableau sans aucune marge ou
espacement, fixez à 0 la marge intérieure des cellules et l’espacement entre les cellules.
Pour plus d’informations sur les tableaux, voir Chapitre 8, Présentation de contenu à l'aide de tableaux
dans Utilisation de Dreamweaver.

5. Cliquez à droite du tableau pour le désélectionner.

6. Sélectionnez Insérer > tableau pour insérer un autre tableau.

7. Dans la boîte de dialogue Tableau, procédez de la manière suivante pour

le deuxième tableau :

■ Entrez 1 dans la zone de texte Lignes.

■ Entrez 3 dans la zone de texte Colonnes.

■ Saisissez 700 dans la zone de texte Largeur du tableau.

■ Sélectionnez Pixels dans le menu déroulant Largeur du tableau.

■ Saisissez 0 dans la zone de texte Largeur de la bordure.

■ Entrez 0 dans la zone de texte Marge intérieure des cellules.

■ Entrez 0 dans la zone de texte Espacement entre les cellules.

8. Cliquez sur OK.

Insérez des tableaux 67

Un deuxième tableau comportant une ligne et trois colonnes s’affiche
sous le premier tableau.

9. Cliquez à droite du tableau pour le désélectionner.

10. Insérez un troisième tableau en sélectionnant Insertion > Tableau et en

entrant les valeurs suivantes dans la boîte de dialogue Tableau :

■ Entrez 1 dans la zone de texte Lignes.

■ Saisissez 1 dans la zone de texte Colonnes.

■ Ta p e z 700 dans la zone de texte Largeur du tableau.

■ Sélectionnez Pixels dans le menu contextuel Largeur du tableau.

■ Saisissez 0 dans la zone de texte Largeur de la bordure.

■ Saisissez 0 dans la zone de texte Marge intérieure des cellules.

■ Saisissez 0 dans la zone de texte Espacement entre les cellules.

11. Cliquez sur OK.

Un troisième tableau avec une ligne et une colonne s’affiche sous le
deuxième tableau.

Cliquez à droite du tableau pour le désélectionner. Votre page doit
maintenant ressembler à la page suivante :

68 Didacticiel : Création d’une mise en forme de page basée sur un tableau

REMARQUE

Le sélecteur de tableau (indiqué par des lignes vertes) s’affiche après
l’insertion d’un tableau. Vous pouvez masquer le sélecteur de tableau en
cliquant en dehors du tableau. Vous pouvez également désactiver le
Sélecteur de tableau en choisissant Affichage > Assistances visuelles >
Largeurs des tableaux.

Définissez les propriétés des tableaux

Vous allez à présent définir les propriétés précises des tableaux à l’aide du
mode Tableaux développés. Cette fonctionnalité ajoute temporairement
une marge intérieure et un espacement aux cellules et élargit les bordures
des tableaux afin de faciliter leur manipulation. Cela vous permet
particulièrement de placer le point d’insertion de manière précise sans
sélectionner accidentellement le mauvais tableau ou tout autre contenu du
tableau.

REMARQUE

Lorsque vous avez terminé de définir les propriétés des tableaux en mode
Tableaux développés, vous devez toujours revenir au mode Standard. Le
mode Tableaux développés n’est pas un environnement WYSIWYG
(« what you see is what you get » ou affichage et impression identiques)
de sorte que certaines opérations, telles que le redimensionnement, ne
donneront pas le résultat attendu.

Définissez les propriétés des tableaux 69

1. Sélectionnez Affichage > Mode Tableau> Mode Tableaux développés.

REMARQUE

Si vous consultez le guide de démarrage avec la boîte de dialogue Mode
Tableaux développés, cliquez sur OK.

2. Cliquez à l’intérieur de la première ligne du premier tableau.

70 Didacticiel : Création d’une mise en forme de page basée sur un tableau

3. Dans l’inspecteur des propriétés (Fenêtre > Propriétés), tapez 90 dans la

zone de texte H (hauteur des cellules) et appuyez sur Entrée (Windows)
ou Retour (Macintosh).

REMARQUE

Si vous ne voyez pas la zone de texte H (hauteur des cellules), cliquez sur
la flèche d’extension dans l’angle inférieur droit de l’inspecteur des
propriétés.

4. Cliquez à l’intérieur de la deuxième ligne du premier tableau.

5. Dans l’inspecteur des propriétés, tapez 166 dans la zone de texte H

(hauteur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).

6. Cliquez à l’intérieur de la troisième ligne du premier tableau.

7. Dans l’inspecteur des propriétés, tapez 24 dans la zone de texte H

(hauteur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).

Définissez les propriétés des tableaux 71

Le premier tableau doit à présent comporter trois lignes de hauteurs
différentes.

Vous allez à présent définir les propriétés du deuxième tableau (celui
qui contient trois colonnes).

8. Cliquez à l’intérieur de la première colonne du deuxième tableau.

72 Didacticiel : Création d’une mise en forme de page basée sur un tableau

9. Dans l’inspecteur des propriétés, tapez 140 dans la zone de texte L

(Largeur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).

10. Cliquez à l’intérieur de la deuxième colonne du deuxième tableau.

11. Dans l’inspecteur des propriétés, tapez 230 dans la zone de texte L

(Largeur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).

12. Fixez la largeur de la troisième colonne à 330 pixels.

Si le Sélecteur de tableau est activé (Affichage > Assistances visuelles >
Largeurs des tableaux), les valeurs en pixels que vous venez de saisir
s’afficheront au-dessus des colonnes du tableau.

Vous n’allez entrer aucune valeur de hauteur pour les cellules de ce
tableau, car leur hauteur variera en fonction du contenu que vous
ajouterez par la suite.

13. Enfin, cliquez dans le dernier tableau (celui qui contient une ligne et une

colonne).

Définissez les propriétés des tableaux 73

14. Dans l’inspecteur des propriétés, tapez 24 dans la zone de texte H

(hauteur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).

Votre mise en forme doit maintenant ressembler à la suivante :

15. Cliquez sur le lien [quitter] dans la barre intitulée Mode Tableaux

développés en haut de la fenêtre de document pour revenir au mode
Standard. 7

16. Enregistrez votre page.

74 Didacticiel : Création d’une mise en forme de page basée sur un tableau

Insérez un espace réservé pour l’image

Un espace réservé pour image est un graphisme que vous utilisez jusqu’à ce
que le dessin final soit prêt à être ajouté à une page Web. L’espace réservé
pour l’image est utile lors de la mise en forme de pages Web, car il permet
de placer une image sur une page avant même d’avoir créé l’image.

1. Dans la fenêtre de document, cliquez à l’intérieur de la première ligne

du premier tableau.

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, procédez de la

manière suivante :

■ Ta p e z graphique_bannière dans la zone de texte Nom.

■ Entrez 700 dans la zone de texte Largeur.

■ Entrez 90 dans la zone de texte Hauteur.

■ Cliquez sur la case de couleur puis choisissez une couleur dans le

sélecteur. Pour ce didacticiel, nous allons choisir un brun rougeâtre
(#993300).

■ Laissez vide la zone de texte secondaire.

A SAVOIR...

Une note sur le texte secondaire Un texte secondaire est une description textuelle d’une image sur

une page Web. Il fait partie du code HTML et n’est pas visible sur la page. Il est important de fournir un
texte secondaire pour la plupart de vos images pour que les personnes qui utilisent des lecteurs d’écrans
ou des navigateurs à texte puissent recevoir l’information fournie par l’image. Dans le cas d’un graphisme
représentant une bannière, qui se borne à afficher un logo pour un site Web, il n’est pas essentiel de
fournir un tel texte. Si vous ne remplissez pas le champ de texte secondaire dans la boite de dialogue
Espace réservé pour l’image, Dreamweaver ajoute un attribut alt="" à la balise img. Si vous voulez par la
suite ajouter un texte secondaire à une image, il suffit de la sélectionner et d’entrer le texte désiré dans
l’inspecteur de propriétés. Par exemple, si vous changez le logo plus tard pour inclure un numéro de
téléphone ou une adresse, il est souhaitable de fournir cette information sous forme de texte secondaire.

Insérez un espace réservé pour l’image 75

A SAVOIR...

Présentation des espaces réservés pour l’image Un espace réservé pour l’image est un graphisme

que vous emploierez jusqu’à ce que le graphisme définitif soit prêt à être ajouté à la page Web. Il ne s’agit
pas d’une image qui s’affiche dans un navigateur. Avant de publier votre site, remplacez tous les espaces
réservés pour une image que vous avez ajoutés par des fichiers graphiques adaptés au Web, tels que des
images GIF ou JPEG.
Si vous possédez Macromedia Fireworks, vous pouvez créer un nouveau graphisme à partir d’un espace
réservé pour l’image dans Dreamweaver. Lorsque vous sélectionnez l’espace réservé pour l’image et que
vous cliquez sur le bouton Créer de l’inspecteur de propriétés, Fireworks démarre et présente un nouveau
document. La nouvelle image reprend la même taille que celle de l’espace réservé pour l’image. Vous
pouvez ensuite créer et modifier l’image comme bon vous semble, puis remplacer l’espace réservé pour
l’image dans Dreamweaver. Pour obtenir des informations sur la création d’une image dans Fireworks à
partir d’un espace réservé pour l’image, voir Utilisation de Fireworks pour modifier les espaces réservés
pour les images Dreamweaver dans Utilisation de Dreamweaver

4. Cliquez sur OK.

L’espace réservé pour l’image apparaît à l’intérieur du premier tableau.
Il affiche une étiquette et les attributs de taille de l’image que vous
placerez à cet endroit.

REMARQUE

Lorsqu’ils sont affichés dans un navigateur, le texte de l’étiquette et de la
taille d’un espace réservé pour l’image n’apparaissent pas.

5. Enregistrez votre page.

76 Didacticiel : Création d’une mise en forme de page basée sur un tableau

Ajoutez de la couleur à la page

Vous allez à présent ajouter de la couleur à la page en définissant les
couleurs de certaines cellules du tableau et de l’arrière-plan de la page.

1. Cliquez à l’intérieur de la première cellule du tableau à trois colonnes.

2. Cliquez sur la balise <td> (balise de cellule) dans le sélecteur de balises

afin de sélectionner la cellule.

3. Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez dans la

zone de texte Couleur d’arrière-plan.
Cette zone se trouve juste à côté de la zone de couleur Couleur d’ar-pl.

REMARQUE

Si vous ne voyez pas la zone de texte Couleur d’arrière-plan, cliquez sur la
flèche d’extension dans l’angle inférieur droit de l’inspecteur des
propriétés.

Ajoutez de la couleur à la page 77

4. Dans la zone de texte Couleur d’arrière-plan, entrez la valeur

hexadécimale #993300 puis appuyez sur la touche Entrée (Windows)
ou Retour (Macintosh).

La cellule du tableau prend une couleur brun rougeâtre.

5. Cliquez à l’intérieur de la deuxième cellule du tableau à trois colonnes.

6. Cliquez sur la balise <td> (balise de cellule) dans le sélecteur de balises

afin de sélectionner la cellule.

7. Dans l’inspecteur de propriétés, cliquez dans la zone de texte Couleur

d’arrière-plan, entrez la valeur hexadécimale #F7EEDF puis appuyez sur
la touche Entrée (Windows) ou Retour (Macintosh).

La cellule du tableau prend une couleur brun clair.

8. Répétez les étapes 5 à 7 pour appliquer également la couleur brun clair

à la troisième cellule du tableau.

9. Lorsque les trois couleurs sont définies, cliquez une fois en dehors du

tableau pour le désélectionner.

Vous allez ensuite modifier la couleur d’arrière-plan de la page entière en
modifiant les propriétés de la page. La boîte de dialogue Propriétés de la
page permet de définir diverses propriétés, comme la taille et la couleur des
polices de la page, les couleurs des liens visités, les marges de la page, etc.

78 Didacticiel : Création d’une mise en forme de page basée sur un tableau

1. Choisissez Modifier > Propriétés de la page.

2. Dans la catégorie Apparence de la boîte de dialogue Propriétés de la

page, cliquez sur la zone de couleur Couleur d’arrière-plan et choisissez
le noir (#000000) dans le sélecteur de couleur.

A SAVOIR...

En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour
les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en
mode 256 couleurs, reste toujours la même dans Netscape Navigator et Microsoft Internet Explorer, sous
Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur
hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux
niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.
Vous pouvez sélectionner des couleurs dans Dreamweaver en entrant des valeurs hexadécimales dans
les zones de texte appropriées ou en sélectionnant une couleur au moyen du sélecteur. Le sélecteur de
couleur emploie la palette sécurisée de 216 couleurs ; la sélection d’une couleur dans cette palette
entraîne l’affichage de la valeur hexadécimale correspondante. Pour utiliser le sélecteur de couleur,
cliquez sur la zone de couleur et utilisez la pipette pour sélectionner une couleur.
Vous pouvez également utiliser le sélecteur de couleur pour faire correspondre des couleurs. Par
exemple, si une image de votre page contient une nuance de bleu précise que vous voulez également
appliquer à l’arrière-plan d’une cellule de tableau, vous pouvez sélectionner cette cellule, cliquer sur la
zone de couleur pour ouvrir le sélecteur de couleur, amener la pipette au-dessus de la couleur bleue de
l’image puis cliquer. Le sélecteur de couleur remplira la zone sélectionnée de la couleur la plus proche de
celle sur laquelle vous avez cliqué à l’aide de la pipette. Toutefois, si vous sélectionnez des couleurs en
procédant de cette manière, il peut arriver que le sélecteur de couleur ne choisisse pas une couleur
sécurisée pour le Web.

Ajoutez de la couleur à la page 79

3. Cliquez sur OK.

L’arrière-plan de la page devient noir.

4. Enregistrez votre travail.

La mise en forme de votre page est maintenant terminée. La mise en forme
contient un certain nombre de tableaux qui contiennent des actifs tels que
des images, du texte et des fichiers vidéo Flash (FLV). Dans le prochain
didacticiel, Chapitre 5, Didacticiel : Ajout de contenu aux pages vous
apprendrez à ajouter des actifs à la page en utilisant diverses fonctionnalités
d’insertion qui se trouvent dans Dreamweaver.

80 Didacticiel : Création d’une mise en forme de page basée sur un tableau

CHAPITRE 5

Didacticiel : Ajout de contenu aux pages

Ce didacticiel vous explique comment ajouter des pages Web à l’aide de
Macromedia Dreamweaver 8. Vous pouvez ajouter des éléments de tous
ordres à ces pages comme des graphismes, des fichiers Macromedia Flash,
des fichiers Macromedia Flash Video, et du texte, pour ne citer que ceux-là.
Lorsque vous avez ajouté du contenu à vos pages, vous pouvez consulter un
aperçu de votre travail dans un navigateur de manière à voir à quoi il
ressemblera sur le Web.

Dans ce didacticiel, vous allez accomplir les tâches suivantes :

Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Insérez des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Insérez et lisez un fichier Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92

Insérez une vidéo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Insérez du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Créez des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Aperçu de votre page dans un navigateur . . . . . . . . . . . . . . . . . . . 106

5

Localisez vos fichiers

Dans ce didacticiel, vous commencerez par la mise en forme basée sur un
tableau (index.html) que vous avez créée dans Chapitre 4, Didacticiel :

Création d’une mise en forme de page basée sur un tableau Si vous n’êtes pas

allé jusqu’au bout de ce didacticiel, vous pouvez le faire avant d’aller plus
loin ou vous pouvez également ouvrir la version terminée du didacticiel et
commencer par là.

81

La version terminée du didacticiel, table_layout.html, se trouve dans le
dossier tutorials_completed du dossier cafe_townsend que vous avez copié
sur votre disque dur au Chapitre 3, Didacticiel : Configuration de votre site

et des fichiers de projet

REMARQUE

Si vous entamez ce didacticiel avec le fichier table_layout.html terminé, au
lieu du fichier index.html du Chapitre 4, Didacticiel : Création d’une mise en

forme de page basée sur un tableau, certaines étapes et illustrations du

didacticiel ne correspondront pas à ce que vous verrez à l’écran.

82 Didacticiel : Ajout de contenu aux pages

Passez votre tâche en revue

Dans ce didacticiel, vous ajouterez des actifs à la page d’accueil du Cafe
Townsend, un restaurant fictif. Vous apprendrez à ajouter des images, un
fichier Macromedia Flash, un fichier Macromedia Flash Video et du texte.
Quand vous aurez terminé, la page aura l’aspect suivant :

Vous remarquerez que le texte dans la page n’est pas encore mis en forme.
C’est le cas parce que vous apprendrez à le mettre en forme à l’aide de
Cascading Style Sheets (CSS) dans le prochain didacticiel.

Passez votre tâche en revue 83

Vous pouvez trouver les actifs dont vous avez besoin pour ce didacticiel
dans de dossier racine de cafe_townsend que vous avez copié sur votre
disque dur dans Chapitre 3, Didacticiel : Configuration de votre site et des

fichiers de projet Si vous ne l’avez pas fait, il le faut absolument avant de

poursuivre. Le didacticiel vous indique exactement où trouver les actifs au
fur et à mesure que vous avancez.

Insérez des images

Après avoir créé la mise en forme de votre page, vous êtes prêt à ajouter des
actifs à la page. Vous allez commencer par ajouter des images. Vous pouvez
faire appel à plusieurs méthodes pour ajouter des images à une page Web
dans Dreamweaver. Dans cette section, vous allez ajouter quatre images
différentes à la page d’index de Cafe Townsend, au moyen de différentes
méthodes.

Remplacez l’espace réservé pour l’image

1. Dans Dreamweaver, ouvrez le fichier index.html que vous avez créé au

Chapitre 4, Didacticiel : Création d’une mise en forme de page basée sur un
tableau

REMARQUE

Si vous n’avez pas terminé le Chapitre 4, Didacticiel : Création d’une mise

en forme de page basée sur un tableau voir Localisez vos fichiers, page 81

pour savoir comment poursuivre.

84 Didacticiel : Ajout de contenu aux pages

2. Double-cliquez sur le l’espace réservé pour l’image, banner_graphic,

dans le haut de la page.

3. Dans la boîte de dialogue Sélectionnez la source de l’image, accédez au

dossier images du dossier cafe_townsend que vous avez défini comme
dossier racine de votre site.

4. Sélectionnez le fichier banner_graphic.jpg, puis cliquez sur OK.

Insérez des images 85

Dreamweaver remplace l’espace réservé pour l’image par la bannière de
Cafe Townsend.

5. Cliquez une fois à l’extérieur du tableau pour le désélectionner.

6. Enregistrez la page (Fichier > Enregistrer).

Insérez une image à l’aide du menu Insérer.

1. Cliquez à l’intérieur de la troisième ligne du premier tableau (deux lignes

sous la bannière que vous venez d’insérer, juste au-dessus des cellules en
couleur).

2. Choisissez Insertion > Image.

86 Didacticiel : Ajout de contenu aux pages

3. Dans la boîte de dialogue Sélectionnez la source de l’image, accédez au

dossier images du dossier cafe_townsend, sélectionnez le fichier
body_main_header.gif puis cliquez sur OK.

REMARQUE

Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.

Un long graphisme de couleur s’affiche dans la ligne du tableau. Même
s’il ressemble davantage à une couleur d’arrière-plan du tableau qu’à un
graphisme, examinez-le de plus près : vous constaterez qu’il possède des
coins arrondis. Ainsi, l’effet de coin arrondi donnera à la partie
inférieure de votre page un aspect intéressant lorsque vous aurez ajouté
tous les autres actifs.

Insérez des images 87

Insérez une image par glissement

1. Cliquez dans la dernière ligne du dernier tableau de la page (juste en

dessous des cellules en couleur).

2. Dans le panneau Fichiers (Fenêtre > Fichiers), recherchez le fichier

body_main_footer.gif (qui se trouve dans le dossier images) et faites-le
glisser jusqu’au point d’insertion dans le dernier tableau.

REMARQUE

Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.

3. Cliquez en dehors du tableau puis enregistrez la page (Fichier >

Enregistrer).

88 Didacticiel : Ajout de contenu aux pages

Insérez une image à partir du panneau Actifs

1. Cliquez dans la colonne centrale du tableau à trois colonnes (la première

cellule de couleur brun clair).

2. Dans l’inspecteur de propriétés (Fenêtre > Propriétés), sélectionnez

Centre dans le menu contextuel Alignement horizontal et sélectionnez
Haut dans le menu contextuel Alignement vertical. Cette action aligne
le contenu de chaque cellule du tableau au centre de la partie supérieure
de la cellule.

REMARQUE

Si vous ne voyez pas les menus contextuels Alignement vertical et
Alignement horizontal, cliquez sur la flèche d’extension dans l’angle
inférieur droit de l’inspecteur des propriétés.

3. Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour créer

davantage de place.

Insérez des images 89

A SAVOIR...

Le panneau Actifs Vous pouvez utiliser le panneau Actifs pour afficher et gérer les actifs de votre site

actif. Ce dernier présente les actifs du site associés au document actif dans la fenêtre du document.
Vous devez définir un site local avant d’afficher les actifs dans le panneau Actifs. Pour plus
d’informations, voir Chapitre 3, Didacticiel : Configuration de votre site et des fichiers de projet ou Utilisation
de Dreamweaver.
Deux vues sont disponibles pour le panneau Actifs :
La liste Site présente tous les actifs de votre site, y compris les couleurs et adresses URL utilisées dans
les documents de votre site.
La liste Favoris affiche uniquement les actifs explicitement sélectionnés. Pour ajouter un actif à la liste
Favoris, sélectionnez-le dans la liste Site puis cliquez sur Ajouter aux favoris dans le menu Options, situé
dans le coin supérieur droit du panneau Fichiers.
Lorsque vous cliquez sur un actif dans le panneau Actifs, il s’affiche dans la zone d’aperçu. Pour modifier
la taille de la zone d’aperçu, faites glisser la ligne qui la sépare des en-têtes des colonnes d’actifs.
Pour plus d’informations, voir Utilisation des actifs dans Utilisation de Dreamweaver.

4. Cliquez sur l’onglet Actifs du panneau Fichiers ou sélectionnez Fenêtre

> Actifs.
Les actifs du site s’affichent.

Bouton Images

5. Si l’affichage des images n’est pas sélectionné, cliquez sur le bouton

Images pour afficher vos actifs d’image.

6. Dans le panneau Actifs, sélectionnez le fichier street_sign.jpg.

90 Didacticiel : Ajout de contenu aux pages

7. Effectuez l’une des tâches suivantes :

■ Faites glisser le fichier sign.jpg jusqu’au point d’insertion de la

cellule centrale du tableau.

■ Cliquez sur le bouton Insérer dans la partie inférieure du panneau

Actifs.

REMARQUE

Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.

Le graphisme street_sign.jpg s’affiche sur la page.

8. Cliquez une fois à l’extérieur du tableau pour désélectionner l’image.

9. Enregistrez la page.

Insérez des images 91

Insérez et lisez un fichier Flash

Vous allez ensuite insérer un fichier Flash qui affiche un diaporama de
photos des plats mis en vedette du Cafe Townsend. Le fichier Flash que
vous allez insérer est un fichier de zone de messagerie variable — ou FMA.
Un FMA est une application Flash très commune qui affiche un message
d’information au public. Le message peut varier en fonction des besoins de
l’entreprise. Par exemple, si le Cafe Townsend organise une manifestation,
le FMA pourrait être aisément modifié (sans affecter le reste de la page
Web) pour afficher des informations à son sujet, en lieu et place des plats
mis en vedette.

Pour insérer le fichier Flash, vous devez insérer le code HTML
correspondant dans la page Dreamweaver. La méthode la plus rapide pour
ce faire consiste à insérer le fichier SWF (fichier d’animation Flash exporté)
sur la page. Lorsque vous insérez un fichier SWF dans Dreamweaver, ce
dernier écrit le code HTML Flash nécessaire à votre place.

1. Lorsque la page index.html est ouverte dans la fenêtre de document

Dreamweaver, cliquez une fois dans la deuxième ligne du premier
tableau.

Il s’agit de la ligne juste en dessous de la bannière que vous avez insérée
dans la section précédente.

2. Dans l’inspecteur de propriétés (Fenêtre > Propriétés), sélectionnez

Centre dans le menu contextuel Alignement horizontal et sélectionnez
Haut dans le menu contextuel Alignement vertical.

Le contenu de la cellule du tableau est ainsi placé au milieu de celle-ci.

REMARQUE

Si vous ne voyez pas les menus déroulants Alignement vertical et
Alignement horizontal, cliquez sur la flèche d’extension dans l’angle
inférieur droit de l’inspecteur des propriétés.

92 Didacticiel : Ajout de contenu aux pages

3. Sélectionnez Insertion > Médias > Flash.

Dans la boîte de dialogue Sélectionner un fichier, accédez au fichier
flash_fma.swf (il se trouve dans le dossier racine de cafe_townsend de
votre site), sélectionnez ce fichier, puis cliquez sur OK.

Si la boîte de dialogue Attributs d’accessibilté à des balises objet
apparaît, cliquez sur OK.

Insérez et lisez un fichier Flash 93

A SAVOIR...

Présentation des fichiers Lorsque vous créez des actifs dans Macromedia Flash, vous travaillez dans

des fichiers FLA, c’est-à-dire le type de fichier par défaut pour l’application Flash. Les fichiers FLA
possèdent l’extension .fla. Par exemple, si vous travaillez sur un logo animé pour un site Web, le fichier
Flash pourrait se nommer animated_logo.fla.
Lorsque vous avez terminé votre travail sur un fichier FLA dans Flash, vous devez l’exporter vers un
format qui pourra être lu dans FlashPlayer sur le Web. Quand vous exportez vos fichiers FLA dans Flash,
ils sont convertis en des fichiers SWF et identifiés par une extension .swf. Ce sont les fichiers SWF (pas
les fichiers FLA) qui lisent le contenu Flash dans un navigateur Web. C’est le type de fichier que vous
devez insérer dans une page Web que vous êtes en train de construire avec Dreamweaver.

Un espace réservé pour du contenu Flash, plutôt qu’une séquence du
FMA lui-même, s’affiche dans la fenêtre de document. Cela se produit
parce que le code HTML pointe vers le fichier SWF flash_fma.swf.
Lorsqu’un utilisateur charge la page index.html, le navigateur lit le
fichier SWF.

4. L’espace réservé pour le contenu Flash doit toujours être sélectionné

après l’insertion du fichier SWF, pour autant que vous ne cliquiez nulle
part ailleurs sur la page.

Si l’espace réservé pour le contenu Flash n’est pas sélectionné, cliquez
dessus.

5. Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur le

bouton Lire.

REMARQUE

Si vous ne voyez pas le bouton Lire, cliquez sur la flèche d’extension dans
l’angle inférieur droit de l’inspecteur des propriétés.

94 Didacticiel : Ajout de contenu aux pages

Dreamweaver lit le fichier Flash dans la fenêtre de document et vous
montre ce que les visiteurs du site verront lorsqu’ils afficheront la page
dans un navigateur.

6. Dans l’inspecteur de propriété, cliquez sur Arrêt pour interrompre la

lecture du fichier Flash.

7. Enregistrez la page.

Insérez et lisez un fichier Flash 95

Insérez une vidéo Flash

Ensuite, vous allez insérer un fichier vidéo Flash en utilisant un actif qui
vous sera fourni.

1. Lorsque la page index.html est ouverte dans la fenêtre Document de

Dreamweaver, cliquez au-dessus du graphisme que vous avez placé dans
la colonne centrale du tableau à trois colonnes.

Dans la section précédente, vous avez créé de l’espace avant d’insérer le
graphisme; c’est à cet endroit que vous devez cliquer.

2. Sélectionnez Insertion > Médias > Flash Video.

96 Didacticiel : Ajout de contenu aux pages

3. Dans la boîte de dialogue Insérer une vidéo Flash, choisissez Vidéo en

téléchargement progressif dans le menu Type de vidéo.

A SAVOIR...

Présentation de Vidéo Flash La commande Insérer Flash Video (Insertion d’une vidéo) de

Dreamweaver permet d’insérer des vidéos Flash dans vos pages Web sans employer Flash l’outil de
création. La commande insère dans ces pages un Flash composant vidéo Flash (qui prend en charge
l’affichage du contenu vidéo Flash que vous sélectionnez) ainsi qu’un ensemble de contrôle de lecture qui
apparaissent dans le navigateur.
La commande Insérer vidéo Flash (Insertion d’une vidéo Flash) dispose des options suivantes pour la
fourniture de contenu vidéo aux visiteurs de votre site :
Vidéo en téléchargement progressif télécharge le fichier vidéo Flash (FLV) sur le disque dur des
visiteurs du site puis entame sa lecture. Contrairement aux méthodes traditionnelles de fourniture de
vidéo par « téléchargement et lecture », le téléchargement progressif permet de lancer la lecture du
fichier vidéo avant la fin de son téléchargement.
Vidéo en flux continu diffuse le contenu vidéo Flash et le lit immédiatement sur la page Web. Pour
permettre la diffusion en direct de vidéo sur vos pages Web, vous devez toutefois disposer d’un accès à
Macromedia Flash Communication Server, le seul serveur de diffusion en direct capable de diffuser du
contenu vidéo Flash.
Pour plus d’informations sur l’utilisation de la fenêtre de document, voir Insertion de contenu Flash Video
dans Utilisation de Dreamweaver.

4. Dans la zone de texte URL, entrez un chemin d’accès relatif au fichier

cafe_townsend_home.flv en cliquant sur le bouton Parcourir, en
accédant au fichier cafe_townsend_home.flv (qui se trouve dans le
dossier racine cafe_townsend de votre site) puis en le sélectionnant.

Insérez une vidéo Flash 97

5. Sélectionnez Halo Skin 2 dans le menu déroulant Apparence.

Un aperçu de l’apparence sélectionée apparaît sous le menu déroulant
Apparence. L’option Apparence indique l’aspect et le comportement du
composant vidéo Flash qui contiendra le contenu vidéo Flash.

Pour plus d’informations sur la sélection d’apparences pour les
composants vidéo Flash, consultez le site www.macromedia.com/go/

flv_tutorial_fr.

6. Dans les zones de texte Largeur et Hauteur, exécutez les opérations

suivantes :

■ Dans la zone de texte Largeur, saisissez 180.

■ Dans la zone de texte Hauteur, saisissez 135 et appuyez sur Entrée

(Windows) ou Retour (Macinstosh).

98 Didacticiel : Ajout de contenu aux pages

Les valeurs affichées dans Largeur et Hauteur indiquent la largeur et la
hauteur du fichier FLV exprimées en pixels. Vous pouvez modifier ces
valeurs à votre guise pour changer la taille du Vidéo Flash sur votre
page Web. Quand vous augmentez les dimensions d’une animation, la
qualité de l’image décroît généralement.

REMARQUE

‘Total avec enveloppe’ indique la largeur et la hauteur du fichier FLV plus
la largeur et la hauteur de l’apparence sélectionnée.

7. Conservez les valeurs par défaut des autres options :
Contraindre permet de préserver le rapport d’aspect entre la largeur et

la hauteur du composant vidéo Flash. Cette option est sélectionnée par
défaut.

Lecture auto détermine si la vidéo doit être lue automatiquement à

l’ouverture de la page Web. Cette option est désélectionnée par défaut.

Rembobinage automatique détermine si le contrôle de lecture doit

revenir en position de départ au terme de la lecture de la vidéo. Cette
option est désélectionnée par défaut.

8. Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu

vidéo Flash à votre page Web.
La commande Insérer une vidéo Flash génère un fichier SWF de lecteur

vidéo et un fichier SWF d’habillage qui serviront à afficher votre
contenu vidéo Flash sur une page Web. Il peut être nécessaire de cliquer
sur le bouton Actualiser du panneau Fichiers pour voir les nouveaux
fichiers. Ces fichiers sont stockés dans le même répertoire que le fichier
HTML auquel vous ajoutez du contenu vidéo Flash (dans le cas
présent, le dossier racine cafe_townsend). Quand vous téléchargez vers
le serveur la page HTML qui enchâsse le contenu vidéo Flash, les
fichiers ainsi téléchargés sont dépendants les uns des autres (à condition
que vous ayez cliqué Oui dans la Boîte de dialogue Placer les fichiers
dépendants).

9. Enregistrez la page.

CONSEIL

Vous pouvez cliquer
sur Détecter la taille
pour déterminer
avec exactitude la
largeur et la hauteur
du fichier FLV.
Cependant, il peut
arriver que
Dreamweaver ne
puisse pas établir les
dimensions du
fichier FLV. Dans
ces cas-là, il vous
faut saisir vous­même les valeurs de
la largeur et de la
hauteur.

Insérez une vidéo Flash 99

Insérez du texte

Vous allez à présent ajouter du texte à la page. Vous pouvez taper
directement le texte dans la fenêtre Document de Dreamweaver ou le
copier et le coller à partir d’autres sources (comme un fichier
Microsoft Word ou un fichier texte). Par la suite, vous mettrez le texte en
forme à l’aide de feuilles de style en cascade (CSS).

Insertion du corps de texte

1. Dans le panneau Fichiers, localisez le fichier sample_text.txt (dans le

dossier racine cafe_townsend root) puis double-cliquez sur l’icône du
fichier pour l’ouvrir dans Dreamweaver.

Cette fenêtre s’affiche en mode Code ; il est impossible de passer en
mode Création (le mode dans lequel vous avez travaillé jusqu’ici), parce
que ce fichier n’est pas un fichier HTML.

2. Dans la fenêtre de document sample_text.txt, appuyez sur Ctrl+A

(Windows) ou Commande+A (Macintosh) pour sélectionner la totalité
du texte, puis sélectionnez Edition > copier pour copier le texte.

3. Fermez le fichier sample_text.txt en cliquant sur le X dans le coin

supérieur droit du document.

4. Dans la fenêtre de document index.html, cliquez dans la troisième

cellule du tableau à trois colonnes (celle qui se trouve à droite de la
colonne contenant le graphisme et la vidéo Flash).

100 Didacticiel : Ajout de contenu aux pages