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

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

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

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

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

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.

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

+ 322 hidden pages