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