ADOBE Dreamweaver 2 User Manual [fr]

macromedia

DREAMWEAVER™2

Utilisation de Dreamweaver

Marques

Macromedia, le logoMacromedia logo, le logo Made With Macromedia, Authorware, Backstage, Director, Extreme 3D et Fontographer sont des marques déposées, et Afterburner, AppletAce, Authorware Interactive Studio, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, DECK II, Director Multimedia Studio, Doc Around the Clock, Extreme 3D, Flash, FreeHand, FreeHand Graphics Studio, Lingo, Macromedia xRes, MAGIC, Power Applets, Priority Access, SoundEdit, Shockwave, Showcase, Tools to Power Your Ideas et Xtra sont des marques commerciales de Macromedia, Inc. D’autres noms de produit, logos, dessins, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques commerciales, des marques de service ou des noms commerciaux de Macromedia, Inc. ou d’autres entités éventuellement enregistrés dans certaines juridictions.

Exonération de responsabilité d'Apple APPLE COMPUTER, INC. N'OFFRE AUCUNE GARANTIE, EXPRESSE OU TACITE, CONCERNANT LE LOT DE

LOGICIELS INFORMATIQUES CI-JOINT, SA COMMERCIALITÉ NI SON ADÉQUATION À UNE TÂCHE PARTICULIÈRE. L'EXCLUSION DE GARANTIES IMPLICITES ÉTANT ILLICITE DANS CERTAINS ÉTATS, IL SE PEUT QUE LA CLAUSE D'EXCLUSION CI-DESSUS NE VOUS SOIT PAS APPLICABLE. CETTE GARANTIE VOUS CONFÈRE CERTAINS DROITS JURIDIQUES. IL SE PEUT ÉGALEMENT QUE VOUS DISPOSIEZ D'AUTRES DROITS EN FONCTION DE L'ÉTAT OÙ VOUS RÉSIDEZ.

Copyright © 1998 Macromedia, Inc. Tous droits réservés. Les pages de ce manuel ne peuvent pas être copiées, photocopiées, reproduites, traduites ni publiées, fût-ce partiellement, sous quelque forme électronique ou informatique que ce soit, sans le consentement écrit préalable de Macromedia, Inc. Part Number ZDW20M100F

Remerciements

Gestion du projet et architecture du contenu : Sheila McGinn Rédaction : Lori Hylan, Corinne Chandel, Denise Lee, Erica Edmonds et Sheila McGinn Conception multimédia : James Khazar Production multimédia : John “Zippy” Lehnus et Pat Knoff Ingénierie de l’aide : Lori Hylan Conception du site didacticiel : Akimbo Design Ingénierie Java : Eric Harshbarger Édition : Judy Walthers von Alten et Judy Ziajka Gestion de production : Gemma Londono Conception de l’impression et de aide : Noah Zilberberg Production : Noah Zilberberg et Paul Benkman Directeur de localisation : Kristin Conradi Nous remercions en particulier Margaret Dumas, Paul Madar, Heidi Bauer, nj, Mike Sundermeyer, Jean Fitzgerald, David George,

Karen Olsen-Dunn, Peter Fenczik, Karen Catlin, Victor Grigorieff, Scott Richards, Peter von dem Hagen, Keiko Higuchi, Hisami Scott, David Lenoe, Sophie Rollins, Arati Rajesh, Harald Mehlem, Bastian Stein, Sabine Rusam-Hathaway, Gwenhaël Jacq, Richard Verdoni et Rubric, Inc.

Première édition : décember 1998

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

SOMMAIRE

CHAPITRE 1

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Nouveautés de Dreamweaver 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

Conﬁguration système requise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

Installation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

Guide pour les médias d'instructions. . . . . . . . . . . . . . . . . . . . . . . . . . .13

CHAPITRE 2

Didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Didacticiel – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17

Déﬁnition d'un site local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

Modiﬁcation de la page d'accueil d'Olivebranch . . . . . . . . . . . . . . . . . .23

Création d'une mise en page complexe . . . . . . . . . . . . . . . . . . . . . . . . .33

Edition d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45

Mise en forme de texte avec des styles personnalisés . . . . . . . . . . . . . . .49

Application d'un modèle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51

Association de comportements à des éléments de page. . . . . . . . . . . . . .61

Ajout d'une séquence vidéo ﬂash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64

Vériﬁcation du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66

CHAPITRE 3

Prise en main . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Prise en main – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

Paramétrage des préférences. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72

Utilisation de Dreamweaver avec d'autres applications . . . . . . . . . . . . .75

CHAPITRE 4

Création de documents . . . . . . . . . . . . . . . . . . . . . . . . . 77

Création de documents – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . .77

Création de nouveaux documents HTML. . . . . . . . . . . . . . . . . . . . . . .78

Utilisation de guides visuels pour la conception. . . . . . . . . . . . . . . . . . .79

Ajout de texte et insertion d'objets . . . . . . . . . . . . . . . . . . . . . . . . . . . .82

Sélection d'éléments dans la fenêtre Document. . . . . . . . . . . . . . . . . . .84

Conﬁguration de documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86

Choix de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88

Afﬁchage et édition du contenu de l'EN-TÊTE . . . . . . . . . . . . . . . . . .90

CHAPITRE 5

Utilisation des modèles . . . . . . . . . . . . . . . . . . . . . . . . . 91

Modèles – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91

Création des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92

Importation et exportation de contenu XML . . . . . . . . . . . . . . . . . . .102

CHAPITRE 6

Planification du site. . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Planiﬁcation du site – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . .105

Création d'un site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106

Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107

Afﬁchage de ﬁchier dans une fenêtre Site. . . . . . . . . . . . . . . . . . . . . . .115

Travail avec les ﬁchiers du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

Création de cartes de site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118

CHAPITRE 7

Gestion de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Gestion de site – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . . . . . .127

Déﬁnition d'un site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128

Options de la fenêtre Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130

Utilisation du système d'archivage et d'extraction de ﬁchiers. . . . . . . .133

Recherche et remplacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137

Gestion des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145

Test du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147

Sommaire

CHAPITRE 8

Utilisation de Roundtrip HTML. . . . . . . . . . . . . . . . . 153

Roundtrip – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153

Utilisation de l'inspecteur HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . .154

Déﬁnition de contrôles de format source HTML . . . . . . . . . . . . . . . .155

Nettoyage de documents HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . .159

Correction du code non valide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160

Utilisation d'autres éditeurs HTML . . . . . . . . . . . . . . . . . . . . . . . . . .161

Insertion de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164

Insertion de commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165

CHAPITRE 9

Formatage du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Formatage du texte – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . . .167

Formatage du texte avec les balises HTML . . . . . . . . . . . . . . . . . . . . .168

Création de listes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173

Formatage du texte avec des feuilles de style . . . . . . . . . . . . . . . . . . . .174

Conversion des styles CSS en code HTML . . . . . . . . . . . . . . . . . . . . .182

Vériﬁcation de l'orthographe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184

CHAPITRE 10

Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Insertion d'images – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . . .185

Insertion d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186

Création d'un effet de survol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187

Conﬁguration des propriétés d’image . . . . . . . . . . . . . . . . . . . . . . . . .188

Utilisation d'un éditeur d'image externe . . . . . . . . . . . . . . . . . . . . . . .192

Création de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193

CHAPITRE 11

Création de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . 195

Création de tableaux – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . .195

Création de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196

Formatage de tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200

Tri de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205

Redimensionnement des tableaux et cellules . . . . . . . . . . . . . . . . . . . .206

Ajout et retrait de lignes et de colonnes . . . . . . . . . . . . . . . . . . . . . . . .207

Copie et collage de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210

Sommaire

CHAPITRE 12

Utilisation des calques . . . . . . . . . . . . . . . . . . . . . . . . . 213

Utilisation des calques – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . .213

Création de calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214

Utilisation de la palette de calques. . . . . . . . . . . . . . . . . . . . . . . . . . . .220

Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220

Déplacement des calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223

Modiﬁcation de l'ordre de superposition des calques. . . . . . . . . . . . . .225

Modiﬁcation de la visibilité des calques. . . . . . . . . . . . . . . . . . . . . . . .225

Utilisation des calques pour concevoir des tableaux. . . . . . . . . . . . . . .226

Conversion des navigateurs de 3.0 à 4.0 . . . . . . . . . . . . . . . . . . . . . . .229

CHAPITRE 13

Utilisation de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Utilisation de cadres – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . .231

Création de cadres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232

Sélection d’un cadre ou jeu de cadres. . . . . . . . . . . . . . . . . . . . . . . . . .233

À propos des propriétés de cadre et jeu de cadre . . . . . . . . . . . . . . . . .235

Contrôle du contenu d'un cadre au moyen de liens. . . . . . . . . . . . . . .239

Création de contenu sans cadre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240

CHAPITRE 14

Création de formulaires . . . . . . . . . . . . . . . . . . . . . . . . 241

Création de formulaires – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . .241

Création d'un formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242

Ajout d'un objet à un formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . .243

Traitement des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244

CHAPITRE 15

Réutilisation des éléments d’une page . . . . . . . . . 247

Réutilisation des éléments d'une page – Vue d’ensemble . . . . . . . . . . .247

Utilisation des éléments de la bibliothèque . . . . . . . . . . . . . . . . . . . . .248

Utilisation des insertions côté serveur . . . . . . . . . . . . . . . . . . . . . . . . .253

Sommaire

CHAPITRE 16

Ajout d’interactivité et d’animation. . . . . . . . . . . . . 257

Ajout d’interactivité et d’animation – Vue d'ensemble. . . . . . . . . . . . .257

Présentation des comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258

Utilisation des comportements livrés avec Dreamweaver . . . . . . . . . . .263

Animation avec HTML dynamique . . . . . . . . . . . . . . . . . . . . . . . . . .286

Ajout d'animations, d'appliquettes et d'autres éléments multimédia . .296

CHAPITRE 17

Personnalisation de Dreamweaver . . . . . . . . . . . . 307

Personnalisation de Dreamweaver – Vue d’ensemble . . . . . . . . . . . . . .307

Modiﬁer la palette d’objets et le menu Insertion . . . . . . . . . . . . . . . . .308

Modiﬁer le proﬁl du formatage de la source HTML . . . . . . . . . . . . . .310

Créer et modiﬁer les proﬁls de navigateur . . . . . . . . . . . . . . . . . . . . . .311

ANNEXE A

Raccourcis clavier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

Menu Fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315

Menu Édition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316

Éditer du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316

Formater du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317

Rechercher et remplacer du texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . .318

Travailler avec des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318

Travailler avec des cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319

Travailler avec des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319

Travailler avec des scénarios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320

Travailler avec des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320

Gérer les hyperliens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321

Cibler et visualiser dans les navigateurs . . . . . . . . . . . . . . . . . . . . . . . .321

Gestion de site et FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322

Carte du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323

Lecture des plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323

Afﬁchage des éléments de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323

Travailler avec des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324

Insérer des objets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324

Ouvrir et fermer des palettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324

Obtenir de l'aide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325

INDEX

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Sommaire

CHAPITRE 1

Introduction

.............................................................................................................

Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web. Avec Dreamweaver, il est facile de créer des pages s’afﬁchant correctement sur différents types de plates-formes et de navigateurs. La technologie Roundtrip HTML™ de Macromedia importe des documents HTML sans reformater le code.

Dreamweaver rend également possible l'utilisation des fonctions HTML dynamique, telles que les calques animés et les comportements, sans avoir à écrire de ligne de code. La vériﬁcation ciblée sur le navigateur est là pour assurer que votre travail s’afﬁche sans problème sur toutes les plates-formes et tous les navigateurs.

Nouveautés de Dreamweaver 2

Dreamweaver 2 offre plusieurs fonctions qui améliorent votre productivité au cours du développement d'un site web.

Édition de contenu dynamique

contenu sur le web.



Utilisez les modèles pour séparer le contenu de la création graphique, permettant ainsi une diffusion plus rapide sur le web. Voir

d’ensemble



Afﬁchez les insertions côté serveur directement dans la fenêtre de document. Voir

Éditon au niveau du site



Créez une carte visuelle et hiérarchique du site ; utile pour présenter

, page 91.

Utilisation des insertions côté serveur

visuellement vos idées à vos clients, ainsi que pour gérer la structure du site. Voir

Création de cartes de site



Pour créer des liens, faites glisser les ﬁchiers, ou pointez simplement vers les ﬁchiers. Voir



Utilisez les outils de gestion de liens pour les mettre à jour au fur et à mesure

Création de liens

que vous déplacez, renommez et supprimez les ﬁchiers. Voir page 145.



Rechercher plusieurs ﬁchiers au niveau du site et effectuez un remplacement global sur votre site.



Proﬁtez des avantages de la fonction de recherche-remplacement compatible HTML pour localiser des balises et des attributs HTML. Vous pouvez également utiliser des expressions standard pour rendre vos recherches encore plus puissantes. Voir

Outils pour les concepteurs graphiques

concepteurs graphiques au processus de développement du site.



Utilisez les calques pour la conception de pages complexes et précises en nombre de pixels, puis convertissez-les en tableaux pour créer des pages fonctionnant dans tous les navigateurs. Voir

concevoir des tableaux



Choisissez une couleur n'importe où sur le bureau, et grâce à la palette adaptée au web, placez-la sur la couleur adaptée au web la plus rapprochée. Voir

de couleurs



Utilisez un tracé d'image pour concevoir rapidement des pages à partir de la

, page 88.

maquette d'un concepteur. Voir

Facilite et accélère la mise en place et l'accès à votre

Modèles – Vue

, page 253.

Vous aide à gérer des sites importants.

, page 118.

, page 107.

Gestion des liens

Recherche et remplacement

, page 137.

Vous permet de faire participer vos

Utilisation des calques pour

, page 226.

Utilisation du tracé de l'image

, page 81.

Choix

Chapitre 1

Édition de tableau améliorée



Coupez, copiez et collez des cellules, des lignes et des colonnes multiples aisément. Voir



Sélectionnez plusieurs cellules d'un tableau et modiﬁez leurs propriétés facilement. Voir



Fractionnez n'importe quelle cellule de tableau en plusieurs cellules. Voir

Copie et collage de cellules

Sélection d'éléments de tableau

Fractionnement et fusion de cellules



Formatez rapidement les tableaux avec des conceptions graphiques prédéﬁnies. Voir

Formatage d'un tableau à l'aide d'une mise en forme prédéfinie



Triez les tableaux par ordre numérique et alphabétique, par colonne ou par ligne. Voir

Fonctions de productivité améliorées

Tri de tableaux

Facilite la création de tableaux HTML élégants.

, page 210.

, page 198.

, page 208.

, page 204.

, page 205.

Vous permet de travailler plus

intelligemment et plus rapidement.



Personnalisez votre espace de travail en combinant les palettes et les inspecteurs en une unique palette à onglets. Voir

flottantes ancrables



Redimensionnez la fenêtre de document instantanément, pour prédéﬁnir ou personnaliser les dimensions. Voir

, page 72.

Redimensionnement de la fenêtre Document

Utilisation des palettes

page 80.



Utilisez les menus de raccourci pour accéder rapidement aux commandes que vous utilisez le plus souvent. Voir



Afﬁchez et manipulez le contenu de la section document. Voir



Exécutez les plug-ins directement dans la fenêtre de document de Dreamweaver. Voir

Un environnement extensible

Affichage et édition du contenu de l'EN-TÊTE

Lecture du plug-in dans la fenêtre du document

Vous permet de personnaliser et d'étendre

Dreamweaver pour qu'il corresponde à votre façon de travailler. Voir

Dreamweaver overview



Utilisez les commandes pour modiﬁer le document courant, par exemple pour

Utilisation des menus contextuels

HEAD

dans la fenêtre de

, page 90.

, page 71.

, page 301.

Extending

trier un tableau ou nettoyer votre code source HTML.



Écrivez vos propres commandes comme s'il s'agissait d'objets ou d'actions.



Donnez une représentation visuelle aux balises personnalisées dans la fenêtre de document et créez des inspecteurs de propriétés pour déﬁnir rapidement leurs propriétés.



Écrivez vos propres traducteurs de données pour afﬁcher les résultats de traitement du serveur dans la fenêtre de document.

Introduction

Configuration système requise

Le matériel et les logiciels suivants sont requis pour l'exécution de Dreamweaver :

Pour Microsoft Windows™ :



Processeur Intel Pentium® 90 ou équivalent tournant sous Windows 95, Windows 98 ou Windows NT version 4.0 ou plus récente.



16 Mo de mémoire vive (RAM) plus 20 Mo d'espace disque disponible.



Moniteur couleur capable d'une résolution de 800 x 600 pixels.



Lecteur CD-ROM.

Pour Macintosh® :



Power Macintosh sous MacOS 7.5.5 ou supérieur.



24 Mo de RAM plus 20 Mo d'espace disque disponible.



Moniteur couleur capable d'une résolution de 800 x 600 pixels.



Lecteur CD-ROM.

Installation de Dreamweaver

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

Pour installer Dreamweaver :

Chapitre 1

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

Choisissez une des options suivantes :



Sous Windows, choisissez Démarrer > Exécuter. Cliquez ensuite sur Parcourir et choisissez le ﬁchier Setup.exe sur le CD de Dreamweaver. Cliquez sur OK dans la boîte de dialogue Exécuter pour commencer l'installation.



Sur le Macintosh, double-cliquez sur l'icône Installation de Dreamweaver.

Suivez les instructions afﬁchées à l'écran.

4 Redémarrez votre ordinateur si nécessaire.

Guide pour les médias d'instructions

Le kit Dreamweaver contient toutes sortes de médias pour vous aider à apprendre le programme rapidement et à devenir compétent dans la création de pages Web : pages d'aide HTML en ligne qui apparaissent dans votre navigateur, animations Montrez-moi, un didacticiel, un manuel imprimé et un site web régulièrement mis à jour.

Didacticiel de Dreamweaver

Le didacticiel de Dreamweaver est idéal pour commencer, si votre expérience en matière de création de sites web est minimale. Ce didacticiel vous montre comment éditer un modèle de site web à l'aide de quelques-unes des fonctions les plus utiles et les plus puissantes de Dreamweaver. Vous le trouverez à la fois dans l'Aide de Dreamweaver et dans le manuel Utilisation de Dreamweaver.

Visite guidée et animations Montrez-moi

La visite guidée et les animations Montrez-moi dans les pages d’aide HTML sont une introduction animée des fonctions-clés. La visite guidée inclut toutes les animations Montrez-moi en séquence. Vous pouvez également voir les animations Montrez-moi individuellement dans leur section de présentation respective.

Cette icône indique qu'une rubrique contient une animation Montrez-moi.

Les animations Montrez-moi nécessitent le plug-in Shockwave Director, qui est inclus sur le CD de Dreamweaver. Si vous avez acheté votre copie de Dreamweaver électroniquement, vous pouvez télécharger plug-in de Shockwave le plus récent à partir du site web de Macromedia à http://www.macromedia.com/shockwave/download/.

Dreamweaver HTML Help Pages™

Dreamweaver HTML Help Pages™ fournit des informations détaillées sur toutes les fonctions de Dreamweaver. Pour enrichir votre expérience, nous vous recommandons vivement d'utiliser l'un de ces navigateurs :



Sous Windows, nous vous recommandons Netscape Navigator 4.0 ou plus récent ou Microsoft Internet Explorer 4.0 ou plus récent.



Sur Macintosh, nous vous recommandons Netscape Navigator 4.0 et plus récent (Internet Explorer pour Macintosh n'est pas recommandé car il ne peut pas jouer les animations Montrez-moi).

Si vous utilisez un navigateur 3.0, tout le contenu sera disponible, mais certaines fonctions, (telles que Rechercher) ne fonctionneront pas.

Introduction 13

Les pages d'aide HTML de Dreamweaver utilisent JavaScript à outrance. Assurezvous que JavaScript est activé dans votre navigateur. Si vous prévoyez d'utiliser la fonction Rechercher, assurez-vous aussi que Java est activé.

Table des matières Utilisez la table des matières pour consulter toutes les

informations organisées par sujet. Cliquez sur les entrées principales pour afﬁcher les sous-rubriques.

Index Utilisez l'index comme un index imprimé, pour trouver des termes

importants et vous rendre aux rubriques associées.

Rechercher Utilisez Rechercher pour trouver une chaîne de caractères dans tout le

texte de la rubrique. La fonction de recherche nécessite un navigateur 4.0 avec Java activé.



Pour rechercher une phrase, il vous sufﬁt de la taper dans la zone de texte.



Pour rechercher des ﬁchiers contenant deux mots-clés, (par exemple, calques et styles), séparez les termes de la recherche par un signe plus (+).

Liens contextuels Cliquez sur le bouton d'aide de n'importe quelle boîte de

dialogue ou sur le point d'interrogation des inspecteurs, des fenêtres et des palettes pour ouvrir la rubrique d'aide correspondante.

Cliquez ici pour ouvrir l'Aide

Chapitre 114

Barre de navigation

Utilisez les boutons de la barre de navigation pour vous

déplacer dans les rubriques.



Retour et Avance fonctionnent comme les boutons Précédente et Suivante du navigateur, vous ramenant ainsi à des rubriques que vous venez de consulter.



Précédente et Suivante appellent la rubrique précédente ou suivante d'une section (suivant l'ordre des rubriques listées dans la tables des matières).



Nouveautés lie au centre de développement de Dreamweaver sur le site web de Macromedia.

Centre de développement de Dreamweaver

Le site web du centre de développement de Dreamweaver est régulièrement mis à jour avec les dernières informations sur Dreamweaver, et contient également des conseils d'experts, des informations sur les rubriques de pointe, des exemples, des conseils et des mises à niveau. Vériﬁez souvent ce site pour obtenir les dernières nouvelles sur Dreamweaver et pour apprendre comment mieux utiliser ce programme à l'adresse http://www.macromedia.com/support/dreamweaver/.

Utilisation de Dreamweaver

Le manuel Utilisation de Dreamweaver vous présente le programme de Dreamweaver et contient une version condensée de l'Aide de Dreamweaver, sans certaines informations de référence sur les options du programme.

Introduction 15

Chapitre 116

CHAPITRE 2

Didacticiel

.............................................................................................................

Didacticiel – Vue d’ensemble

Ce didacticiel explique comment utiliser Dreamweaver pour modiﬁer et mettre à jour un site web.

Dans le cadre de ce didacticiel, vous allez modiﬁer le site web d'une société ﬁctive, Olivebranch Gourmet Foods, exploitation agricole qui commercialise des produits alimentaires pour gourmets.

Lorsqu'ils visitent le site web d'Olivebranch, les clients peuvent lire une présentation des spécialités du jour et parcourir le catalogue en ligne des vins, fromages, huiles et autres condiments. Ils ont également la possibilité de s'informer sur Olivebranch et les événements que cette société parraine.

Vous allez apprendre à accomplir les tâches suivantes :



Afﬁchage des pages dans un navigateur



Déﬁnition d'un site local



Déﬁnition des propriétés d'une page telles que l'arrière-plan et les couleurs des liens



Création d'une carte du site



Création de liens



Création d'une mise en forme à l'aide de calques, et conversion de ceux-ci en tableaux



Utilisation d'un nouveau tracé de l'image



Edition d'un tableau



Mise en forme du texte à l'aide de styles



Application d'un modèle



Liaison de comportements



Insertion d'une séquence vidéo ﬂash

Remarque: Ce didacticiel montre certaines fonctions prises en charge uniquement par les

navigateurs de version 4.0 ou ultérieure.

Visite guidée de Dreamweaver

Avant de commencer, regardez les séquences vidéo de la visite guidée ﬁgurant dans les pages d'aide aﬁn de vous familiariser avec les fonctions de Dreamweaver.

Pour afficher les séquences vidéo :

Dans Dreamweaver, choisissez Aide > Rubriques d'aide de Dreamweaver.

2 Dans le cadre de gauche de la liste du sommaire, cliquez sur Introduction, puis

sur Visite guidée de Dreamweaver.

3 Cliquez sur Afﬁcher pour assister à la visite guidée.

4 Fermez le navigateur lorsque vous avez terminé.

Chapitre 218

Affichage du site web achevé

Consultez ensuite le site web achevé pour vous faire une idée de ce vers quoi vous allez.

Pour afficher le site Olivebranch achevé :

Dans Dreamweaver, choisissez Fichier > Ouvrir. Naviguez jusqu'au répertoire de l'application Dreamweaver, puis ouvrez successivement les répertoires Tutorial et Olivebranch_site.

2 Dans Olivebranch_site, cliquez sur le ﬁchier index.htm pour ouvrir la page

d'accueil d'Olivebranch dans la fenêtre Document. Ne modiﬁez pas cette page car elle est déjà terminée. Vous allez en modiﬁer

une autre version.

3 Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur

pour afﬁcher la page d'accueil d'Olivebranch (choisissez un navigateur version

4.0 pour afﬁcher ce site).

Remarque: L'application Flash Player doit être installée dans votre navigateur par défaut

pour pouvoir afﬁcher les communiqués spéciaux de la semaine ﬁgurant sur la page d'accueil d'Olivebranch. Si vous ne disposez pas de cette application, repérez son logiciel d'installation dans le répertoire Flash du CD de Dreamweaver, ou téléchargez-le sur le site http://www.macromedia.com/shockwave/download/.

Didacticiel 19

Faites glisser le curseur de la souris successivement sur les quatre éléments situés dans la partie gauche de la page (about, events, etc.) ; notez que ces éléments s'afﬁchent en surbrillance pour indiquer qu'il s'agit de liens actifs. Cliquez sur n'importe lequel de ces éléments pour explorer les pages correspondantes.

Remarque: La section gift basket de ce site n'est pas utilisée.

Fermez le navigateur lorsque vous avez ﬁni d'examiner le site.

Organisation des fichiers du didacticiel

Les ﬁchiers HTML, tant achevés qu'inachevés, utilisés dans ce didacticiel se trouvent dans le sous-répertoire Olivebranch_site du répertoire Tutorial. Les images et autres ﬁchiers associés pour le site se trouvent dans les sous-répertoires du répertoire Olivebranch_site (le chemin d'accès complet du répertoire Olivebranch_site varie en fonction de l'emplacement où Dreamweaver 2.0 a été installé).

Chaque ﬁchier porte un nom signiﬁcatif (en anglais) – par exemple, le ﬁchier HTML correspondant à la page où sont présentés les événements parrainés par Olivebranch s'appelle events_main.htm. Les ﬁchiers inachevés sur lesquels vous allez travailler portent des noms identiques à ceux qui leur sont attribués dans le site achevé, à l'exception du préﬁxe DW2_. Par exemple, la version inachevée de la page events_main.htm, s'appelle DW2_events_main.htm.

Définition d'un site local

Pour travailler avec Dreamweaver, vous devez commencer par créer un site local. Ce dernier déﬁnit la structure des pages que vous allez créer.

Un site est un emplacement où vous allez stocker l'ensemble des documents et des ﬁchiers appartenant à un site web. Un site local requiert un nom et un répertoire racine local indiquant à Dreamweaver l'emplacement où vous souhaitez conserver les ﬁchiers du site. Vous devez créer un site local pour chaque site web sur lequel vous travaillez.

Dans le cadre de ce didacticiel, vous allez spéciﬁer le répertoire Olivebranch_site comme répertoire du site local.

Chapitre 220

Pour créer un site local :

Dans Dreamweaver, ouvrez la boîte de dialogue Déﬁnition du site en procédant comme suit :



Sur Macintosh, choisissez Site > Nouveau site.



Sous Windows, choisissez Fichier > Nouveau Site.

2 Dans la boîte de dialogue Déﬁnition du site, vériﬁez si l'option Infos locales

est sélectionnée dans la liste Catégorie.

3 Nommez le site My_Tutorial en tapant ce nom dans le champ Nom du site.

Le nom du site local est un surnom qui renvoie directement au répertoire déﬁni comme site local.

4 Cliquez sur l'icône de répertoire à droite du champ Dossier racine local et

naviguez jusqu'au répertoire Olivebranch_site, puis cliquez sur Enregistrer.

Remarque: Le chemin d'accès complet du répertoire Olivebranch_site varie en fonction

de l'emplacement où Dreamweaver 2.0 a été installé.

Didacticiel 21

Cliquez sur OK, puis sur Créer lorsque Dreamweaver vous demande si vous voulez créer un ﬁchier cache pour le site.

L'option de création d'un ﬁchier cache dans le répertoire Olivebranch_site permet de créer un enregistrement des ﬁchiers existants de manière à ce que Dreamweaver puisse rapidement mettre les liens à jour lorsque vous déplacez, renommez ou supprimez un ﬁchier.

La fenêtre du site afﬁche une liste de tous les répertoires et ﬁchiers contenus dans le site local My_Tutorial. La liste fait également ofﬁce de gestionnaire de ﬁchiers, en vous permettant de copier, coller, supprimer, déplacer et ouvrir des ﬁchiers exactement comme dans le sélecteur de ﬁchier ou l'explorateur de l'ordinateur.

6 Fermez la fenêtre Document contenant le ﬁchier index.htm, mais laissez la

fenêtre du site ouverte.

Chapitre 222

Modification de la page d'accueil d'Olivebranch

Vous avez à présent déﬁni une structure pour le site Olivebranch que vous êtes en train de créer. Ouvrez la version inachevée de la page d'accueil. Vous allez créer des liens et choisir une couleur d'arrière-plan, une image d'arrière-plan et un titre pour la page de manière à ce qu'elle présente le même aspect que la page d'accueil d'Olivebranch terminée.

Pour ouvrir la page d'accueil inachevée dans Dreamweaver :

Dans la fenêtre du site, double-cliquez sur DW2_index.htm.

2 Fermez la fenêtre du site.

Didacticiel 23

Définissez la couleur et l'image d'arrière-plan

Si vous utilisez une image et une couleur d'arrière-plan, la couleur s'afﬁche pendant le téléchargement de l'image, ce qui confère à la page un aspect plus attrayant pour les utilisateurs attendant le téléchargement de l'image. Si l'image d'arrière-plan comprend des pixels transparents, la couleur d'arrière-plan ﬁltre.

Pour définir une couleur d'arrière-plan pour la page :

Choisissez Modiﬁer > Propriétés de la page pour ouvrir la boîte de dialogue Propriétés de la page.

2 Changez la couleur d'arrière-plan par défaut en tapant #FFFFCC dans le

champ Couleur d'arrière-plan. Dans ce cas, vous savez précisément la couleur que vous voulez. Vous pouvez

également choisir une couleur dans la palette ou utiliser le compte-gouttes pour sélectionner une couleur d'un objet de la page.

3 Cliquez sur Appliquer pour appliquer la couleur à l'arrière-plan.

Dès que vous avez cliqué sur Appliquer dans la boîte de dialogue Propriétés de la page, la page est mise à jour dans la fenêtre Document.

Chapitre 224

Spéciﬁez ensuite une image d'arrière-plan pour la page.

Pour définir une image d'arrière-plan pour la page :

Cliquez sur Parcourir (Windows) ou Choisir (Macintosh) à côté du champ Image d'arrière-plan.

2 Sélectionnez home_bg.jpg dans le sous-répertoire Assets du répertoire

Olivebranch_site.

3 Cliquez sur Appliquer pour ajouter l'image d'arrière-plan à la page.

4 Laissez provisoirement la boîte de dialogue Propriétés de la page ouverte.

Une fois la couleur et l'image d'arrière-plan en place, la page d'accueil sur laquelle vous travaillez devrait avoir l'aspect suivant :

Didacticiel 25

Définissez le titre de la page

Le titre d'une page HTML aide les utilisateurs à conserver la trace de ce qui s'afﬁche en cours de navigation ; il identiﬁe aussi la page dans les listes de l'historique et des signets. Si vous n'attribuez pas de titre à la page, elle apparaîtra dans la fenêtre du navigateur et dans les listes de signet et de l'historique comme Document sans titre.

Pour définir le titre d'une page :

Dans le champ Titre de la boîte de dialogue Propriétés de la page, tapez Olivebranch Gourmet Foods pour nommer la page d'accueil, puis cliquez sur OK.

La barre de titre actualisée afﬁche le nom que vous avez donné au ﬁchier.

2 Choisissez Fichier > Enregistrer pour enregistrer les changements apportés.

Chapitre 226

Création d'une carte du site

Une carte du site est une représentation visuelle précise de la structure d'un site. Vous pouvez également utilisez la carte du site pour ajouter de nouveaux ﬁchiers, ajouter, supprimer ou modiﬁer des liens, et pour créer une image BMP ou PICT du site que vous pourrez exporter vers une application d'édition d'où vous l'imprimerez.

La page d'accueil d'un site apparaît toujours en haut de la carte du site. Sous la page d'accueil, s'afﬁchent les ﬁchiers auxquels ses liens renvoient. Si le répertoire que vous déﬁnissez comme racine du site contient un ﬁchier nommé index.htm, Dreamweaver utilise automatiquement ce dernier comme page d'accueil à la base de la carte du site. Du fait que la page d'accueil du site My_Tutorial s'appelle en réalité DW2_index.htm, vous la redéﬁnirez en personnalisant l'aspect de la carte du site.

Pour créer une carte du site :



Dans la fenêtre du site, appuyez et maintenez enfoncée l'icône Carte du site dans le coin supérieur gauche, puis sélectionnez Carte et ﬁchiers dans le menu déroulant.

La fenêtre du site afﬁche à présent deux vues du site local : à gauche, apparaît la structure arborescente de la carte du site Olivebranch achevé (avec la page d'accueil index.htm) et, à droite, la liste de ﬁchiers utilisée précédemment.

Didacticiel 27

Redéﬁnissez à présent la page d'accueil de manière à ce que le site utilise la version du didacticiel au lieu de la version achevée.

Pour redéfinir la page d'accueil et personnaliser l'aspect de la carte du site :

Ouvrez la boîte de dialogue Déﬁnition du site en procédant comme suit :



Sous Windows, choisissez Afﬁchage > Mise en page dans la barre de menus de la fenêtre du site.



Sur Macintosh, choisissez Site > Afﬁchage de carte de site > Mise en page.

2 Sélectionnez Mise en forme de la carte du site dans la liste Catégorie de la

boîte de dialogue Déﬁnition du site.

3 Spéciﬁez la nouvelle page d'accueil du site en cliquant sur le répertoire du

ﬁchier à côté du champ Page d'accueil, puis en navigant vers le ﬁchier DW2_index.htm se trouvant dans le sous-répertoire Olivebranch_site du répertoire Tutorial.

4 Fixez la valeur du champ Nombre de colonnes à 3.

Chapitre 228

Cliquez sur OK pour fermer la boîte de dialogue Déﬁnition du site et revenir à la fenêtre du site.

La carte du site est actualisée de manière à reﬂéter le changement apporté, la page d'accueil du didacticiel étant à présent à la racine de la structure arborescente de la carte du site.

En ce moment précis, la page d'accueil du didacticiel ne contient qu'un seul lien. Vous allez bientôt y ajouter d'autres liens.

6 Laissez provisoirement la fenêtre du site ouverte aﬁn de pouvoir constater la

manière dont le site s'actualise à mesure que vous ajoutez des liens à la page d'accueil.

Didacticiel 29

Création de liens

Les images s'afﬁchant dans la colonne de gauche de la page d'accueil guident les visiteurs à travers le site d'Olivebranch. L'image du haut, intitulée about, établit déjà un lien vers la page appropriée du site. Vous allez ajouter des liens à deux autres éléments graphiques, events et catalog, de manière à ce qu'ils renvoient également à d'autres pages du site (vous ne toucherez pas à l'image gift basket).

Commencez par ajouter un lien du graphique events vers la page Events à l'aide de l'inspecteur de propriétés.

Pour créer un lien à l'aide de l'inspecteur de propriétés :

Cliquez sur la barre de titre de la fenêtre Document contenant le ﬁchier DW2_index.htm pour l'activer ou sélectionnez le nom du ﬁchier dans le menu Fenêtre.

2 Dans la fenêtre Document, cliquez sur l'image events pour la sélectionner.

Remarque: Si vous double-cliquez sur l'image, Dreamweaver vous invitera à

sélectionner un autre ﬁchier pour remplacer l'image.

Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés. L'inspecteur de propriétés afﬁche des informations sur l'image sélectionnée.

4 Dans l'inspecteur de propriétés, cliquez sur l'icône de répertoire située à côté

du champ Lien vide.

5 Dans la boîte de dialogue Sélectionner ﬁchier HTML, naviguez vers le

répertoire Olivebranch_site, sélectionnez DW2_events_main.htm, puis cliquez sur Sélectionner.

Le nom du ﬁchier avec lequel vous établissez un lien s'inscrit dans le champ Lien de l'inspecteur de propriétés.

Chapitre 230

+ 310 hidden pages