DREAMWEAVER 8-BIEN DMARRER AVEC DREAMWEAVER - Développement Web MACROMEDIA - Notice d'utilisation et mode d'emploi gratuit

Type de produit	Logiciel de développement Web
Marque	Macromedia
Modèle	Dreamweaver 8
Version	8
Langue du manuel	Français
Format du manuel	PDF
Nombre de pages	352
Plateformes supportées	Windows 2000/XP, Mac OS X
Fonctions principales	Édition visuelle et codage HTML, CSS, XML, technologies serveur (ASP, JSP, PHP, ColdFusion), gestion de sites, publication
Installation	CD-ROM, assistant d'installation
Enregistrement	Recommandé (en ligne ou postal)
Mise à jour	Disponible sur le site Macromedia
Aide intégrée	Système d'aide, LiveDocs, références O'Reilly
Type de support	CD-ROM

FOIRE AUX QUESTIONS - DREAMWEAVER 8-BIEN DMARRER AVEC DREAMWEAVER MACROMEDIA

Comment installer Dreamweaver 8 ?

Insérez le CD de Dreamweaver dans le lecteur. Sous Windows, l'installation démarre automatiquement ; sous Macintosh, double-cliquez sur l'icône d'installation. Suivez les instructions à l'écran et redémarrez l'ordinateur si nécessaire.

Comment enregistrer Dreamweaver 8 ?

Sélectionnez Aide > Activation enregistrement en ligne et remplissez le formulaire électronique, ou imprimez le formulaire via Aide > Imprimer l'enregistrement et envoyez-le par courrier.

Comment créer un nouveau document dans Dreamweaver ?

Choisissez Fichier > Nouveau. Sélectionnez la catégorie de page (par exemple, Page de base) et le type de document (HTML). Cliquez sur Créer, puis enregistrez le fichier.

Comment utiliser les feuilles de style CSS dans Dreamweaver ?

Créez une feuille de style externe via Fichier > Nouveau > CSS. Définissez des règles CSS (exemples : p { font-size:11px; }). Associez la feuille à votre page via le panneau Styles CSS en cliquant sur le bouton Associer feuille de style.

Comment insérer une image dans une page ?

Placez le curseur à l'endroit souhaité, puis choisissez Insertion > Image. Sélectionnez le fichier image dans votre dossier local. Vous pouvez également glisser-déposer depuis le panneau Fichiers.

Comment créer des liens hypertextes ?

Sélectionnez le texte ou l'image à lier. Dans l'inspecteur des propriétés, cliquez sur l'icône dossier à côté du champ Lien et choisissez le fichier cible. Le texte devient souligné et bleu.

Comment publier un site Web avec Dreamweaver ?

Définissez un dossier distant dans Site > Gérer les sites > Avancé > Infos distantes. Utilisez le panneau Fichiers pour télécharger les fichiers locaux vers le serveur distant via les boutons Mettre à jour ou Transférer.

Comment personnaliser l'espace de travail ?

Sous Windows, choisissez Fenêtre > Présentation de l'espace de travail et sélectionnez Designer ou Codeur. Sur Macintosh, vous pouvez regrouper les documents en onglets via Fenêtre > Combiner en onglets.

Comment afficher des données XML dans une page ?

Créez une page XSLT via Fichier > Nouveau > Page XSLT. Associez une source de données XML, puis liez les champs XML à la page à l'aide du panneau Liaisons.

Comment utiliser les tableaux pour la mise en page ?

Placez le curseur, choisissez Insertion > Tableau. Définissez le nombre de lignes et colonnes. Utilisez l'inspecteur des propriétés pour régler la largeur, l'alignement et les couleurs des cellules.

MODE D'EMPLOI DREAMWEAVER 8-BIEN DMARRER AVEC DREAMWEAVER MACROMEDIA

Bien démarrer avec Dreamweaver

8

Marques de commerce

1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breeze, 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 à 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ôleés par Macromedia et Macromedia ne peut en particulier cas être tenu responsable du contentu de ces sites. Si vous accedez à l'un de ces sites, vous le faites à vos propres risques et péris. Macromedia mentionne ces liens pour faciliter leur travail et l'inclusion de ces liens n'implique pas que Macromedia approuve le contentu 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 produit, 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, revenue 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

Direction de la production et de l'edition 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

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 équipés de l'ingenierie de Dreamweaver et de l'assurance qualité.

Première édition : September 2005

Macromedia, Inc.

601 Townsend St.

San Francisco, CA 94103

Table des matières

Ce que vous pouvezaccomplir 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 ou débuter. 17

Tirer le meilleur parte 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

Chapitre 3: Didacticiel: Configuration de votre site et des fichiers de projet 53

Apprenez a utiliser des sites Dreamweaver 54

Configurez vos fichiers de projet. 55

Définissez un dossier local 57

Chapitre 4: Didacticiel: Creation d'une mise en forme de page basée sur un tableau. 61

Examinez la maquette détaillée de conception 62

Criez 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-vous tâche en revue 83
Insérez des images 84
Insérez et lisez un fichier Flash 92
Insérez une video Flash 96
Insérez du texte 100
Criez des liens 105
Aperçu de votre page dans un navigateur 106

Chapitre 6: Didacticiel: Mise en forme de votre page avec CSS 109

Localizes vos fichiers 110
Passez notre tâche en revue 111
Étude de CSS. 112
Creez une nouvelle feuille de style. 114
Associez une feuille de style 116
Explorez le panneau Styles CSS 119
Criez 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

Configuerez 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: DIDACTCIELS 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

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

Chapitre 9: Didacticiel: Creation d'une mise en forme de page basée sur CSS. 165

Apprendela mise en forme de page en utilisant CSS. 166

Verification de la maquette de construction 167

Creation 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 notre 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

Creation d'un lien dynamique. 204

Ajout d'un objet XSLT Région repé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 notre tâche en revue 214

Ouvrez un document de travail 216

Définissez un jeu d'enregistrements 217

Affichez les enregistements de la base de données 221

Ajoutez des champes dynamiques au tableau 223

Définissez une région repétée 224

Affichez notre page 225

Creez un formulaire d'insertion d'enregistrement 225

Copiez les fichiers sur le serveur 231

Documentation connexe. 232

PARTIE 4: ANNEXES

Annexe A: Description des applications Web 235

Présentation des applications Web. 235

Fonctionnement d'une application Web 238

Creation 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 elementaires 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

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

PARTIE1 Introduction à Dreamweaver

1

La première partie de ce manuel vous déscrit 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 aidont à créé des applications Web.

Ce guide vous indique comment utiliser Macromedia Dreamweaver 8 dans le cas où vous ne connaîtrepas bien l'un de ses aspects majorés. Les didactériels dans ce guide constituent une marche à suivre pour creator un site web simple mais fonctionnel.

Ce chapitre contient les rubriques suivantes :

Ce que vous pouvezaccomplir 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 pouvezaccomplir avec Dreamweaver 8

Les fonctions d'édition visuelles de Dreamweaver vous permettent de créé rapidement des pages sans rédigier 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éé et en modifier 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-de-)poser qui vous aient à construire des pages Web, Dreamweaver fournit un environnement complet de codage qui comprend des outils d'édition de code (tehs 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 votreCHOIX.

Dreamweaver permit également de creator 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 creator aisément des pages XSLT, d'associer des pages XML et d'afficher des données XML sur vos pages Web.

Dreamweaver est entierement personalisable. Vous pouvez creer vos propres objets et commandes, modifier les raccourcis clavier ou encore rédigér 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.

Nouveautés de Dreamweaver 8

Dreamweaver 8 comprehend a 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 arrête-plan
  ■ Inséorer 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 dire 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. Procedez de l'une des manieres suivantes:

Sous Windows, l'installation du programme Dreamweaver démarre automatiquement.
Sous Macintosh, double-cliquer l'icone d'installation de Dreamweaver qui parait sur le bureau.

1. Suivez les instructions à l'écran.

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

1. 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 à receiveoir des informations de derniere 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 replissez le formulaire électronique.
• Sélectionnez Aide > Imprimer l'enregistrement, imprimez le formulaire et envoyez-le à l'adresse indiquée sur le formulaire.

Conventions typographiques

Ce manuel utilise les conventions typographiques suivantes :

• Les options de menu sont indiquées comme suit : intitulé du menu > intitulé de l'options de menu. Les options des sous-menus sont indiquées comme suit : intitulé du menu > intitulé du sous-menue > intitulé de l'options 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 replacables (parfois appelés métasymboles) dans le code.
  Le texte romain en gras indique le texte que vous devez saisir à l'identique.

CHAPTER1

Apprentissage de

Dreamweaver

1

Macromedia Dreamweaver 8 comprehend diverses ressources qui vous aideront à vous familiariserrapidement avecleprogramme etacréer facilementvospropresitesetpagesWeb.Toute ladocumentation de Dreamweaverestdisponible sousla formed'uneaideelectroniqueetdans un formatPDF.

Ce chapitre contient les rubriques suivantes :

Par ou débuter 17

Tirer le meilleur parte 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ésirezaccomplir avec Dreamweaver.

Elle aborde les sujets suivants :

• Concepheurs débutants, page 17
• Concepheurs experimentés, page 18
  Codeurs manuels experimentes, page 20
  Développeurs d'applications Web, page 21

Conceuteurs débutants

Si vous étés 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ébut :

1. Commencez par litre 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 consus 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 dire les chapitres sur les pages dynamiques.

Concepteurs experimentés

Si vous étés un concepteur de sites Web experimenté, 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 experimentés qui utilisent Dreamweaver pour la première fois :

1. Commencez par litre les didacticiels dans ce guide Bien demarrer 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 presentation au début des autres chapitres de Utilisation de Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous interesser.

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

1. Commencez par litre 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 part des fonctions de développement visuel.

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 presentation au début de chaque chapitre de Utilisation de Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous interesser.

Codeurs manuels experimentés

Si vous étés un codeur manuel experimenté, cette section vous guidera vers les points essentiels de la documentation Dreamweaver correspondant à vos connaissances.

Pour les codeurs manuels experimentés :

1. Commencez par litre le Chapitre 8, Didacticiel : Travail avec du code dans ce guide Bien demarrer 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 chaprites 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 presentation au début de chaque chapitre de Utilisation de Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous interesser.

Développeurs d'applications Web

Si vous étés un développement d'applications Web experimenté, 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évelopppeurs 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 œuvre 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 presentation au début des autres chapitres de Utilisation de Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous interreisser.

Pour les développpeurs 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

Tirer le meilleur parte de la documentation Dreamweaver

Dreamweaver comprend diverses ressources qui vous aideront à vous familiariserrapidement avecleprogramme etàcréerfacilitémentvospropres pagesWeb.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 auxquellesyoupouvez acceder en mode interactif au fur età mesure queyouapprenezàmonterdespagesWeb.

Accès à la documentation Dreamweaver

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

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

Titre	Description/Utilisateurs visés	Où le trouver
Bien démarrer avec Dreamweaver	Décrit les concepts de base de Dreamweaver et de son interface avec des didactériels 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.	• 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
Utilisation de Dreamweaver	Information complètesur toutes les fonctionnalités de Dreamweaver. Conçu pour tous les utilisateurs de Dreamweaver	• 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
Extension 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.	• 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
Guide des API de Dreamweaver	Décrit l'utilitaire API et l'API JavaScript, tous deux vous venant en aide quand vous développpez des extensions à Dreamweaver Conçu pour les utilisateurs avances qui veulent développer l'interface de Dreamweaver ou bien la personnaliser	• 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
Utilisation de ColdFusion	Comprend une sélection des livres les plus importantes dans le lot de la documentation ColdFusion. (Le lot complet est disponible sur LiveDocs.) Conçu pour quiconque est intéresse par ColdFusion, des développpeurs débutants jusqu'aux avances	• 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
Référence	Comprend plusieurs types de manuels de référence à propos de HTML, de modèles de serveurs et d'autres sujets, parus rundout chez O'Reilly Conçu pour quiconque a besoin de plus d'information sur la syntaxe de codage, les concepts et autres.	• Affichage dans Dreamweaver : Sélectionner Aide > Référence. Pour une liste complète de manuels, cliquer sur le menu dérouulant de Book dans le Panneau de références.

Acceder à 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	Où le trouver
Centre de support de Dreamweaver	Notes techniques, assistance et informations pour résoudre les problèmes à l'intention des utilisateurs de Dreamweaver.	www.macromedia.com/go/dreamweaver_support_fr
Centre de développement des Dreamweaver	Articles et didactériels pour vous aider à améliorer vos capacities et en-acquérir de nouvelles.	www.macromedia.com/go/dreamweaver_devcenter_fr
Centre de documentation de Dreamweaver	Obtenir des manuels de produits en format PDF, lists d'erreurs, didactériels et notes d'accompagnement.	www.macromedia.com/go/dw/documentation_fr
Forums Macromedia interactifs	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.	www.macromedia.com/go/dreamweaver_newsgroup
Formation Macromedia	Cours complément des travaux pratiques et des scénarios tirés de la vie réelle.	www.macromedia.com/go/dreamweaver_training_fr

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 pouvezaccomplir 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 laide, page 27
Utilisation de l'index, page 27
Changement de la taille de police, page 28
Utilisation de la Page de démarriage, page 28
Impression de la documentation Dreamweaver, page 29
Discussion portant sur la documentation de Dreamweaver avec LiveDocs, page 29

Ouvrir Aide

Vou puez acceder à l'Aide du produit pendant que vous travailliez avec Dreamweaver.

Pour ouvrir l'Aide de Dreamweaver :

Selectionnez 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 I'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

You pouze trouverrapidementde l'informationaveclindex.

Pour utiliser l'index (Windows) :

1. Dans l'Aide de Dreamweaver, cliquez sur I'onglet rechercher.
2. Faites défilier la liste alphé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 matieres.
2. Cliquez sur une dette et faites defiler la liste jusqu'à l'entrée d'index recherche.
3. Cliquez sur un nombre en regard de l'entrée afin d'obtenir l'affichage de l'information indexée.

Changement de la taille de police

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

1. 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 pourrait dans la zone de travail. La Page de démarrage vous donne un accès rapide aux didactériels 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 que cette fonctionnalité pour l'utiliser.

Pour désactiver la Page de démarriage :

1. Lancer Dreamweaver sans ouvrir de document.

La Page de démarriage apparait.

1. 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 imprintante 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 sujeit donné de Dreamweaver basé sur votre propre expérience ou solliciter l'avis de collègues concepteurs ou développpeurs de Dreamweaver.

Les LiveDocs de Dreamweaver sont disponibles sur http://livedocs.macromedia.com/go/livedocs_dreamweaver_fr/

CHAPTER 2

Notions de base de Dreamweaver

2

Pour tirer le meilleur parti de votre experience 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 importantes et les plus utilisés. Il vous explique commentaccomplirquelles tâchesde base dansDreamwork.

Ce chapitre contient les sections suivantes :

Apprendé à 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'unquelconque des éléments de l'espace de travail presenté dans cette section,voir Chapitre 1,Exploration de l'espace de travail dans Utilisation deDreamweaver.

La presente section contient les rubriques suivantes :

Presentsation de l'espace de travail, page 32
Fenetre de document, page 34
Barredoutildedocument,page35
Barredetat,page36

Barre Inserer, page 37
La barred'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 a presentation 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.

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 presentation 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êtes s'alignent automatiquement les unes sur les autres sur les côts de l'écran, et sur la fenêtre du document au fur et à mesure que vous les faites glisser ou que vous les redimensionnéz.

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 presentation de l'espace de travail (sous Windows uniquement), page 43 et Affichage de documents à anglets (Macintosh seulement), page 45.

Fenêtre de document

La fenêtre de document affiche le document actif. Vous pouvez désirier 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éveloppementrapide 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édigier 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 Creation vous permettent d'obtenir l'affichage Code et l'affichage Creation 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 presentation 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 fjichier s'afficient 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.

Barre d'outils de document

La barre d'outils de document est composée de boutons qui permettent d'accederrapidementauxdifférentsmodesd'affichage:Code,Création et unmode 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.

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 évientulement générées 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.

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

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 executer 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 Creation, notamment le mode devant s'afficher au-dessus de l'autre. Les options du menu s'appliquent à l'affichage actuel : Mode Creation, 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.

Barredétat

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

Le sélecteur de balises affiche la hierarchie des balises entourant la sélection active. Cliquez sur une balise quelconque dans la hierarchie pour la sélectionner avec son contenu. Cliquez sur

pour selectionner tout le corps du document. Pour définir les attributs class ou id d'une balise dans le sélecteur de balises, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Option enfoncée (Macintosh) sur la balise etCHOISSEZ une classe ou un ID dans le menu contextual. Il est préféable de faire appel au Sélecteur de balises pour selectionner des balises car il garantit avec certitude la bonne sclection.

L'outil Main vous permet de cliquer sur le document et de le glisser jusqu'à 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 arrêté dans Utilisation de Dreamweaver.

Le menu contextual Taille de la fenêtre (visible en mode Création uniquement) permet de redimensionner la fenêtre du document selon des dimensions prédéfinitiones 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'etat, voir Chapitre 1, Exploration de l'espace de travail dans Utilisation de Dreamweaver.

Barre Insérer

Les boutons qui compose la barre Insérer permettent de creer 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 apparait.

Les boutons sont organises 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 contextual 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 creer et d'inserer 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 pouze égalementCHOISIR parmi trois types de tableaux:Standard (par defaut),Tableaux etendus et Mise en forme.Si le mode Mise en forme est selectionné, vous pouze utiliser les outils demise 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 creer des formulaires et d'y insérer des éléments.

La catégorie Texte insère diverses balises de mise en forme de texte et de liste, telles que b, em, p, h1 et ul.

La catégorie HTML insère des balises HTML pour les règlesizontales, 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.

La catégorie Application insère des éléments dynamiques, tels que les yeux d'enregistements, les régions répetées et les formulaires d'insertion d'enregistements 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 fraisment.

Pour plus d'informations sur l'utilisation de la barre d'etat, 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 apparait verticalement sur le côté gauche de la fenêtre de Document.

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'élement de la page sélectionnée, tel que le texte ou un objet inséré. Le contenu de linspecteur de propriétés varie en fonction de l'élement sélectionné. Par exemple, si vous sélectionnez une image de la page, l'inspecteur des propriétés se modifie pour montré 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 cordure 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.

Panneau Fichiers

Vou puevez 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 pouze é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 modifier 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.

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 place sur la partie supérieure du panneau CSS vous permit de passer d'un mode à l'autre. Le panneau Styles CSS vous permit de modifier les propriétés CSS dans les deux modes.

Vou puevez redimensionner l'unquelconque 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éfinitant 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

Vou pousse personneler Dreamweaver en fonction de vos besoin, à l'aide de certaines techniques élémentaires sans avoir à comprendre le code complexe ni à modifier aucun fichier texte.

La presente section contient les rubriques suivantes :

Choix de la presentation de l'espace de travail (sous Windows uniquement), page 43
■ Affichage de documents à onglets (Macintosh seul), page 45
■ Affichage et masquage de la page de démarriage, page 45

Choix de la presentation de l'espace de travail (sous Windows uniquement)

Sous Windows, vous pouvezCHOISIR entre les presentations Creation et Codeur de I'espace de travail. La première fois que vous demarrez Dreamweaver, une boite de dialogue vous permit deCHOISIR la presentation d'un espace de travail. Vous pouvez changer d'espace a tout moment.

Pour désir la presentation de l'espace de travail la première fois que vous démarrez Dreamweaver :

1. Sélectionnez l'une des presentations 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 presentation similaire à celle utilisée par Macromedia HomeSite et Macromedia ColdFusion Studio. Les fenêtes de document affichent par défaut le mode Code.

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

1. Cliquez sur OK.

Pour changer la presentation de l'espace de travail après lechioix initial :

Choisissez Fenêtre > Présentation de l'espace de travail puis seLECTIONnez la presentation d'espace de travail que vous préférez.

Outre l'option Codeur et Designer, vous pouvez également sélectionner l'options 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.

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 apparaitre 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 selectionnez Déplacer dans une nouvelle fenêtre dans le menu contextual.

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

Choisissez Fenetre > Combiner en ontlets.

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éslectionnez Ouvrir les documents dans des onglets et cliquez sur OK.

Dreamweaver ne modifie pas l'affichage des documents ouverts lorsqu'you modifie 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 besoin. Lorsque la page de démarrage est masquee et qu'aucun document n'est ouvert, la fenêtre de document est vide.

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

1. 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éscrit comment accomplir des tâches élémentaires telles que créé, ouvrir et enregistrer des fischiers. Pour plus d'informations, voir Chapitre 3, Création et ouverture de documents dans Utilisation de Dreamweaver.

La presente section contient les rubriques suivantes :

■ Présentation des sites Dreamweaver, page 47
Creer de nouveaux fichiers dans Dreamweaver, page 48
Enregister des fichiers dans Dreamweaver, page 49
Ouvrir des fichiers dans Dreamweaver, page 49

Présentation des sites Dreamweaver

Vous pouvez travailler avec un grand besoin 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 travailliez avec Dreamweaver.

CSS (ou Cascading Style Sheet) pour des fischiers 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 fischiers, voir Description des feuilles de style en cascade dans Utilisation de Dreamweaver.

GIF (ou Graphics Interchange Format) pour des fischié 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 poursvues de transitions à gradient de couleurs ainsi que toutes les images exigeant plus de 256 couleurs.

XML (pour Extensible Markup Language) pour des fischiers avec une extension de type .xml. Ils contiennent des données brutes qui peuvent être formattées en utilisant XSL (Extensible Stylesheet Language). Pour plus d'informations sur l'utilisation de ces types de fischiers, 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éé des données XML que vous poulez 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.

CFML (ou ColdFusion Markup Language) pour des fichiers avec une extension de type .cfm. Ils sont utilisés pour Traits 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 pourTRAITER des pages dynamiques. Pour plus d'informations sur l'utilisation de ces types de fichiers, voir Chapitre 41, Creation 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 pourTRAiter des pages dynamiques. Pour plus d'informations sur l'utilisation de ces types de fichiers, voir Chapitre 43, Creation rapide d'applications PHP dans Utilisation de Dreamweaver.

Créer de nouveaux fichiers dans Dreamweaver

Cette section vous explique comment creer un nouveau document vierge dans Dreamweaver.

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

Pour creer 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à seLECTIONné.

1. Sélectionnez l'une des catégories suivantes dans la liste : Page de base, page dynamique, page modèle, autre ouiaux de cadres. Sélectionnez ensuite le type de document que vous souhaitez créé dans la liste de droite.

Par exemple, sélection Page de base pour creer un document HTML, ou sélection Page dynamique pour creer 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.

1. Cliquez sur le bouton Creer. Le nouveau document s'ouvre dans la fenetre de document.
2. Enregistrez le document (voir Enregistrer des fichiers dans Dreamweaver, page 49).

Enregister des fichiers dans Dreamweaver

Il est nécessaire d'enregistrer tout nouveau document que vous creez.

Pour enregistrer un document :

1. Choisissez Fichier > Enregister.
2. Dans la boîte de dialogue qui s'affiche, recherche le dossier où vous pouze 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'utilise pas de caractères spéciaux (par exemple é, c 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.

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 boite de dialogue Ouvrir, selectionnez le fichier et cliquez sur Ouvrir.

PARTIE 2

Didacticiels

2

La deuxieme 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

CHAPITRE 3

Didacticiel : Configuration devotre site et des fichiers de projet

3

Ce didacticiel va vousprésenté le concept d'un site Macromedia Dreamweaver 8 et vous expliquer comment configurer les fischiers 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 fischiers 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 fischiers afin de lesmettre, le moment venu, à la disposition d'autres utilisateurs (le site distant). Vous pouvez utiliser les panneaux Fichiers de Dreamweaver pour afficher et exploiter les fischiers dans votre site.

En général, les personnes créant un site Web à l'aide de Dreamweaver créé et modifiert des pages sur leur disque local et en téléchargeant 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 à creator un site distant de manière à envoyer vos fichiers sur un serveur Web.

Dans ce didacticiel, vous allezaccomplir les tâches suivantes :

Apprenez à utiliser des sites Dreamweaver 54

Configurez vos fichiers de projet 55

Définissez un dossier local 57

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 apparentant à un site Web. Vous devez définir un tel emplacement avant de creer 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énér 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éseau 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éseau 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 (dossoir 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 vousSOCiez pas de ce dossier, sauf si vousdéveloppèz 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.

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 creez 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é localSites sur votre disque dur.

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

Sous Windows :

C:\Documents and Settings\voiture_nom_d'utilisateur\Mes documents\localSites.

• Sur Macintosh: DD Macintosh/Utilisateurs/votre_nom_d'utilisateur/Documents/localsites.

REMARQUE

Sur un Macintosh, votre dossier d'utilisateur contient deja 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.

1. Recherche le dossier cafe_townsend dans le dossier d'application Dreamweaver sur votre disque dur.

Si Dreamweaver a ete installedans l'emplacement par defaut, le chemin du dossier est le suivant:

Sous Windows : C:\Program Files\Macromedia\Dreamweaver 8\Promptual_assets\cafe_townsend.
- Sur Macintosh: DD Macintosh/Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend.

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 vous 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 étés le propriétaire du nom de Domaine www.monsiteweb.com, avec un réseau 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 qu'les noms de dossiers (public_html sur le site distant et monsiteweb sur l'ordinateur local) qui seraient différents.

1. Copiez le dossier cafe_townsend dans le dossier localSites.

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

Définissez un dossier local

Vous doivent 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 fischiers 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 localSites.

1. Lancez Dreamweaver, puis selectionnéz Site > Gérer les sites.

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

1. Cliquez sur le bouton Nouveau, puis selectionnéz Site.

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

1. Si l'assistant (onglet Elémentaire) s'affiche, cliquez sur l'onglet Avancé et SélectionnezInfos locales dans la liste Catégorie (seLECTION par défaut).

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

3. Dans la zone de texte Dossier racine local, indiquez le dossier cafe_townsend que vous avez copied dans le dossier localSites selon les instructions de la section precedente.

Vouss pouvez cliquer sur l'icone du dossier pour rechercher le dossier et le selectionner, ou entre son chemin d'accès dans la zone de texte Dossier racine local.

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

Vou puez cliquer sur l'icone du dossier pour rechercher le dossier et le selectionner, ou enter son chemin d'accès dans la zone de texte Dossier des images par défaut.

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

1. Cliquez sur OK.

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

1. Cliquez sur Terminate pour fermer la boite de dialogue Gérer les sites.

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 contendra des copies des pages publiées de vos fichiers locaux.

Vou puevez suivre les autres didacticiels de ce guide pour creer l'exemple du site Cafe Townsend ouCHOISIR de travailler sur vos propres pages. ApreS avoir cree et editedes vos pages,definissez un dossier distant sur un serveur et publiez vos pages.Pour plus d'informations,voir la section Chapitre 7, Didacticiel:Publicationdevotsere site.

CHAPTER 4

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

4

Ce didacticiel indique comment creer dans Macromedia Dreamweaver 8 une mise en forme de page basée sur un tableau. La mise en forme déterminne 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 partager des données tabulaires etmettre en forme du texte et des images dans une page HTML. Vous pouvez utiliser des tableaux pour creer une mise en forme de manière rapide et aisee. Dans ce didacticiel, vous alze creer 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 allezaccomplir les tâches suivantes:

Examinez la maquette détaillée de conception 62

Creez 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

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 enuttant 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 à lapré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 video. Selon ces desiderater, le concepteur entame la planification de la mise en forme du site et creé des esquisSES de pages répondant aux attentes du client.

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 étés charge 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évelopppeurs 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 pourmettre ce concept en forme.

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 copé 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éé 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électionnéz 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 Enregisterz 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é localSites.
5. Tapez index.html dans la zone de texte Nom de fichier puis cliquez sur Enregister.

Le nom du fichier pourraitmaintenant dans la barre de titre dans la partie supérieure de la fenetre de l'application.

1. 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 filchier). Les visiteurs de cette site verront ce titre dans la barre de titre de la fenêtre du navigateur lorsqu'ils afficheront la page dans un navigateur Web.

1. Choisissez Fichier > Enregistrer pour enregistrer votre page.

Insérez des tableaux

Vou les alliez ensuite ajouter un tableau qui contendra 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.

1. Choisissez Insertion > Tableau.

2. Dans la boite de dialogue tableau, procedez de la maniere 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érouulant Largeur du tableau.
- Entrez 0 dans la zone de texte Largeur de la cordure.
Saisissez 0 dans la zone de texte Marge interieure des cellules.
Saisissez 0 dans la zone de texte Espacement entre les cellules.

1. Cliquez sur OK.

Un tableau compteant 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 interieure ni d'espacement.

Compléments sur les tableaux Les tableaux sont très utiles pour partager des données tabulaires etmettre 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 creez de multiples lignes avec de multiplescellules, ces dernières forment des colonnes. Techniquement parlant, une cellule est une séparation dansune ligne horizontal 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 Selecteur 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 entêtes de colonne. Vous pouvez utiliser les menus pour accederrapidement àdes commandes standard relatives aux tableaux. Vous pouvez activer ou désactiver l'affichage des largeurs et des menus en selectionnant Affichage > Assistance visuelle > Largeurs de tableau.

Un tableau peut posseder des cordures et ses cellules peuvent composer une marge interieure, un espacement ou les deux à la fois. La marge interieure représenté le nombre de pixels entre le contenu de la cellule et les limites de celle-ci. L'espacement entre les cellules représenté le nombre de pixels entre les cellules contiguès d'un tableau.

Si vous n'attribuiez 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.

1. Cliquez à droite du tableau pour le déslectionner.
2. Sélectionnéz Insérer > tableau pour insérer un autre tableau.
3. Dans la boite de dialogue Tableau, précé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érouulant Largeur du tableau.
Saisissez 0 dans la zone de texte Largeur de la cordure.
- Entrez 0 dans la zone de texte Marge interieure des cellules.
Entrez 0 dans la zone de texte Espacement entre les cellules.

1. Cliquez sur OK.

Un deuxième tableau compte une ligne et trois colonnes s'affiché sous le premier tableau.

1. Cliquez à droite du tableau pour le déslectionner.

2. Insérez un troisième tableau en selectionnant 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.
Tapez 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 cordure.
Saisissez 0 dans la zone de texte Marge interieure des cellules.
Saisissez 0 dans la zone de texte Espacement entre les cellules.

1. 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éslectionner. Notre page doit maintainant ressembler à la page suivante :

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 enCHOISIGANT 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éveloppement. Cette fonctionnalité ajoute temporairement une marge interieure et un espacement aux cellules et élargit les cordures des tableaux afin de facilititer leur manipulation. Cela vous permet particulièrement de placer le point d'insertion de manière précise sans selectionner accidentellement le mauvais tableau ou tout autre contenu du tableau.

Lorsque vous avez terminé de définir les propriétés des tableaux en mode Tableaux développement, vous devez toujours revenir au mode Standard. Le mode Tableaux développement 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 donneuron pas le résultat attendu.

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

REMARQUE

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

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

1. 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).

Si vous ne VOYZ 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.

1. Cliquez à l'intérieur de la deuxieme ligne du premier tableau.

1. 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).
2. Cliquez à l'intérieur de la troisième ligne du premier tableau.
3. 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).

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

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

1. Cliquez à l'intérieur de la première colonne du deuxieme tableau.

1. 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).
2. Cliquez à l'intérieur de la deuxième colonne du第二种 tableau.
3. 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).

1. 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 entre aucune valeur de hauteur pour les cellules de ce tableau, car leur hauteur variera en fonction du contenu que vous ajouterez par la suite.

1. Enfin, cliquez dans le dernier tableau (celui qui contient une ligne et une colonne).

2. 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 maintainant ressembler à la suivante :

1. 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
2. Enregistrez votre page.

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 > Objects image > Espace réservé pour l'image.
3. Dans la boite de dialogue Espace réservé pour l'image, précédez de la manière suivante :

Tapez 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 besoin un brun rougeâtre (#993300).
Laissez vide la zone de texte secondaire.

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 puissant receivevoir 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 réalissez pas le champ de texte secondaire dans la boite de dialogue Espace réservé pour l'image, Dreamweaver ajoute un attribut a t=" " à la balise img. Si vous poulez par la suite ajouter un texte secondaire à une image, il suffit de la sélectionner et d'entre r 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.

Présentation des espaces réservés pour l'image Un espace réservé pour l'image est un graphisme que vous employez 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创建工作 un nouveau graphisme à partir d'un espace réservé pour l'image dans Dreamweaver. Lorsque vous scé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éé et modifier l'image comme bon vous semble, puis replacer 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 apparait à l'intérieur du premier tableau. Il affiche une étiquette et les attributs de taille de l'image que vous placerez à cet endroit.

banner Graphic (700 x 90)

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.

1. Enregistrez votre page.

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.

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

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

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

1. Cliquez à l'intérieur de la deuxième cellule du tableau à trois colonnes.
2. Cliquez sur la balise < td > (balise de cellule) dans le sélecteur de balises afin de seLECTIONner la cellule.
3. 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.
4. Répétez les étapes 5 à 7 pour appliquer également la couleur brun clair à la troisième cellule du tableau.
5. Lorsque les trois couleurs sont définies, cliquez une fois en dehors du tableau pour le déslectionner.

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.

1. Choisissez Modifier > Propriétés de la page.
2. Dans la catégorie Apparance de la boîte de dialogue Propriétés de la page, cliquez sur la zone de couleur Couleur d'arrière-plan et désisseez le noir (#000000) dans le sélecteur de couleur.

En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour les principales, par leur nom en angeais (red). Une valeur sécurisée pour le Web est une valeur 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ésentée une valeur sécurisée pour le Web.

Voussousysectionnerdescouleurs dansDreamweaverenentrantdesvaleurshexadecimalesdans les zones de texte appropriees ou en selectionnantune couleur au moyen du selecteur.Le selecteur de couleur employe la palette securiseede 216 couleurs ;la selection d'une couleur dans cette palette entraine l'affichage de la valeur hexadecimale correspondante. Pourutiliserleselecteurde couleur, cliquez sur la zone de couleur et utilisez la pipette pour selectionner une couleur.

Vous peuvent également utiliser le sélection de couleur pour faire correspondre des couleurs. Par exemple, si une image de votre page contient une nuance de bleu précise que vous pouze également appliquer à l'arrière-plan d'une cellule de tableau, vous pouze selectionner cette cellule,clinquer sur la zone de couleur pour ouvrir le筛选eur de couleur, amener la pipette au-dessus de la couleur bleue de l'image puis cliquer. Le selectionur de couleur replira la zone selectionnnee de la couleur la plus proche de cette sur laquelle vous avez cliqué a l'aide de la pipette. Toutefois, si vous selectionnez des couleurs en procédant de cette manière, il peut arriver que le selectionur de couleur neCHOISSE pas une couleur sécurisée pour le Web.

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 maintainant 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 video Flash (FLV). Dans le prochain didacticiel, Chapitre 5, Didacticiel: Ajout de contenu aux pages vous apprendez à ajouter des actifs à la page en utilisant diverses fonctionnalités d'insertion qui se trouvent dans Dreamweaver.

CHAPTER 5

Didacticiel : Ajout decontenu aux pages

5

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 resemblera sur le Web.

Dans ce didacticiel, vous allezaccomplir les tâches suivantes :

Localisez vos fichiers 81

Passez notre tâche en revue 83

Insérez des images 84

Insérez et lisez un fichier Flash 92

Insérez une video Flash 96

Insérez du texte 100

Creezdesliens 105

Aperçu de votre page dans un navigateur 106

Localisez vos fichiers

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

Création d'une mise en forme de page basée sur un tableau Si vous n'étés pas allé jusqu'àu 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à.

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

3

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.

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 à lemettre en forme à l'aide de Cascading Style Sheets (CSS) dans le prochain didacticiel.

Voussoupiezrouverlesactifsdontvousavezbesoin pourcedidacticieldansdossierracinedecafe_townsendqueyouvascecopiedurvotsedisqudurndansChapitre3,Didacticiel:ConfigurationdevorsitesetdesfichiersdeprojetSiyoune l'avozpasfait,illeftaftabsolumentavandepoursuivre.Ledidacticielyouindiquexactementoutrouverlesactifsaufur eta mesure queyouavancez.

Insérez des images

Après avoir créé la mise en forme de votre page, vous étés prét à ajouter des actifs à la page. Vous allez commencer par ajouter des images. Vous pouze 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, ouvre le fjichier index.html que vous avez créé au Chapitre 4, Didacticiel: Création d'une mise en forme de page basée sur un tableau

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.

1. Double-cliquez sur le l'espace réservé pour l'image, banner Graphic, dans le haut de la page.

1. 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éfinir comme dossier racine de votre site.
2. Sélectionnez le fichier banner_graphic.jpg, puis cliquez sur OK.

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

café TOWNSEND

Nouveau World Cuisine

1. Cliquez une fois à l'extérieur du tableau pour le déslectionner.
2. 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).

1. Choisissez Insertion > Image.

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

Si la boîte de dialogue Attributes d'accessibilité à des balises apparait, cliquez sur OK.

Un long graphisme de couleur s'affiche dans la ligne du tableau. Meme s'il ressemble davantage à une couleur d'arrière-plan du tableau qu'à un graphisme, examinez-le de plus pres : vous constaterez qu'il possède des coins arrondis. Ainsi, l'effect de coin arrondi donna r à la partie inférieure de votre page un aspect intéressant lorsque vous aurez ajusté tous les autres actifs.

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), recherche 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.

3

Si la bofte de dialogue Attributes d'accessibilité à des balises apparait, cliquez sur OK.

café TOWNSEND

Nouveau World Cuisine

m - 1 0 ;

1 + u7 = 70%

图中

Cafe Townsend

Affichage local

1 éléments locaux selectionné: Journal.

1. Cliquez en dehors du tableau puis enregistrez la page (Fichier > Enregistrer).

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 Alignment horizontal et Sélectionnez Haut dans le menu contextuel Alignment vertical. Cette action aligne le contenu de chaque cellule du tableau au centre de la partie supérieure de la cellule.

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

1. Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour créé davantage de place.

Le panneau Actifs You pouze utiliser le panneau Actifs pour afficher et géné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 doivent 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éLECTIONNZ-le dans la liste Site puis cliquez sur Ajouter aux favors 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.

1. Cliquez sur l'onglet Actifs du panneau Fichiers ou selectionnez Fenetre > Actifs.

Les actifs du site s'afficient.

1. Si l'affichage des images n'est pas sélectionné, cliquez sur le bouton Images pour afficher vos actifs d'image.

2. Dans le panneau Actifs, Sélectionnez le fichier street_sign.jpg.

3. Effectuez l'une des tâches suivantes :

4. Faites glisser le fichier sign.jpg jusqu'au point d'insertion de la cellule centrale du tableau.

5. Cliquez sur le bouton Insérer dans la partie inférieure du panneau Actifs.

Si la boîte de dialogue Attributs d'accessibilité à des balises apparait, cliquez sur OK.

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

1. Cliquez une fois à l'extérieur du tableau pour désélectionner l'image.
2. Enregistrez la page.

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 besoin 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 sujeet, en lieu et place des plats mis en vedette.

Pour insérer le fjichier Flash, vous doivent insérer le code HTML correspondent dans la page Dreamweaver. La méthode la plusrapide pour ce faire consiste à insérer le fjichier SWF (fichier d'animation Flash exporté) sur la page. Lorsque vous insérez un fjichier 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.

1. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), Sélectionnez Centre dans le menu contextual Alignment horizontal et Sélectionnez Haut dans le menu contextual Alignment vertical.

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

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

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

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

Si la boîte de dialogue Attributes d'accessibilité à des balises objet apparait, cliquez sur OK.

Présentation des fichiers Lorsque vous creez des actifs dans Macromedia Flash, vous travailliez 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 travailliez sur un logo animé pour un site Web, le fichier Flash pourrait se nommer animéné_logo.fla.

Lorsque vous avez terminé votre travail sur un fichier FLA dans Flash, vous devez l'exporter vers un format qui pourrait ê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 nevez insérer dans une page Web que vous estes en train de construire avec Dreamweaver.

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

1. L'espace réservé pour le contenu Flash doit toujours être seLECTIONné 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.

1. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur le bouton Lire.

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

Dreamweaver lit le fjichier 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.

1. Dans l'inspecteur de propriété, cliquez sur Arrêt pour interrompre la lecture du fichier Flash.
2. Enregistrez la page.

Insérez une video Flash

Ensuite, vous allez insérer un fisier video 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.

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

2. Dans la boîte de dialogue Insérer une video Flash,CHOISSEZ Video en téléchargement progressif dans le menu Type de video.

Présentation de Video Flash La commande Insérer Flash Video (Insertion d'une video) de

Dreamweaver permet d'insérer des videos Flash dans vos pages Web sans employer Flash l'outil de création. La commande insère dans ces pages un Flash composant video Flash (qui prend en charge l'affichage du contenu video Flash que vous sélectionnez) ainsi qu'un ensemble de contrôle de lecture qui apparaissent dans le navigateur.

La commande Insérer video Flash (Insertion d'une video Flash) dispose des options suivantes pour lafourniture de contenu video aux visiteurs de votre site :

Vidéo en téléchargement progressif telécharge le fichier video Flash (FLV) sur le disque dur des visiteurs du site puis entame sa lecture. Contrairement aux méthodes traditionnelles de fourniture de video par « téléchargement et lecture», le téléchargement progressif permet de lancer la lecture du fichier video avant la fin de son téléchargement.

Vidéo en flux continu diffuse le contentu video Flash et le lit immédiatement sur la page Web. Pour permettre la diffusion en direct de video sur vos pages Web, vous doivent toutes disposser d'un accès à Macromedia Flash Communication Server, le seul serveur de diffusion en direct capable de diffuser du contentu video Flash.

Pour plus d'informations sur l'utilisation de la fenêtre de document, voir Insertion de contenu Flash Video dans Utilisation de Dreamweaver.

1. Dans la zone de texte URL, entreprises un chemin d'accès relatif au fichier cafe_townsend_home.flv enclistuant sur le bouton Parcourir, en accedant au fichier cafe_townsend_home.flv (qui se trouve dans le dossoir racine cafe_townsend de votre site) puis en le selectionnant.

1. Sélectionnez Halo Skin 2 dans le menu dérouulant Apparce.

Un aperçu de l'apparce sélectionée apparait sous le menu déroulant Apparce. L'option Apparce indique l'aspect et le comportement du composant video Flash qui contendra le contenu video Flash. Pour plus d'informations sur la selection d'apparces pour les composants video Flash, consultez le site www.macromedia.com/go/ fly_tutorial_fr.

1. Dans les zones de texte Largeur et Hauteur, executez les opérations suivantes:

Dans la zone de texte Largeur, saisissez 180.
- Dans la zone de texte Hauteur, saisissez 135 et appuyez sur Entre (Windows) ou Retour (Macintosh).

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 Video Flash sur votre page Web. Quand vous augmentez les dimensions d'une animation, la qualité de l'image décroit généralement.

'Total avec enveloppe' indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l'apparence selectionnée.

1. Conserve 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 video Flash. Cette option est seLECTIONnée par défaut.

Lecture auto déterminé si la video doit être lue automatiquement à l'ouverture de la page Web. Cette option est déslectionné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 vente. Cette option est déslectionnée par défaut.

1. Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu video Flash à votre page Web.

La commande Insérer une video Flash génére un fisier SWF de lecteur video et un fisier SWF d'habillage qui serviront à afficher votre contenu video Flash sur une page Web. Il peut être nécessaire de cliquer sur le bouton Actualiser du panneau Fichiers pour voir les nouveaux fisiers. Ces fichiers sont stockés dans le même repertoire que le fisier HTML auquel vous ajoutez du contenu video Flash (dans le cas present, le dossier racine cafe_townsend). Quand vous téléchargez vers le serveur la page HTML qui enchasse le contenu video Flash, les fisiers 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 fisiers dépendants).

1. Enregistrez la page.

Vous pouvez cliquer sur Détector la taille pour déterminer avec exactitude la largeur et la hauteur du fichier FLV. Cependant, il peut arriver que Dreamweaver ne puisse pas étabir 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 du texte

Vous allez à présent ajouter du texte à la page. Vous pouze 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'icone 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'à), parce que ce fjichier n'est pas un fjichier HTML.

1. Dans la fenêtre de document sample_text.txt, appuyez sur Ctrl+A (Windows) ou Commande+A (Macintosh) pour selectionner la totalité du texte, puis selectionnez Edition > copier pour copier le texte.
2. Fermez le fichier sample_text.txt en cliquant sur le X dans le coin supérieur droit du document.

3. Dans la fenêtre de document index.html, cliquez dans la troisième cellule du tableau à trois colonnes (elle qui se trouve à droite de la colonne contenant le graphisme et la video Flash).

4. Sélectionnez Edition > Coller.

Le texte du fichier texte apparait dans la cellule selectionnée du tableau.

Suivant la résolution de votre écran, le tableau à trois colonnes s'élargit pour tener compte du texte. Ne vous souciez pas de son appearance pour l'instant. Dans le didacticiel suivant, vous apprendrez àmettre le texte en forme à l'aide de CSS de manière à ce que tout tienne sans difficulté dans le tableau.

1. Assurez-vous que le point d'insertion reste dans la cellule du tableau où vous venez de coller le texte. Si ce n'est pas le cas, cliquez à l'intérieur de cette cellule.

2. Dans l'inspecteur des propriétés (Fenêtre > Propriétés),CHOISSEZ Haut dans le menu Alignment vertical. Le texte que vous venez de taper est ainsi aligné sur le haut de la cellule du tableau. Si vous ne voirz pas le menu Alignment vertical, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

1. Enregistrez la page.

Insérez du texte pour une barre de navigation

Vou allez à présent insérer le texte d'une barre de navigation. Toutefois, le texte ne seprésentera pas comme une barre de navigation tant que vous n'aurez pas définir sa mise en forme, dans le didacticiel suivant.

1. Cliquez dans la première colonne du tableau à trois colonnes (la colonne de couleur brun rougeâtre).

2. Tapez le terme Cuisine.

1. Appuyez sur la barre d'espace puis tapez Chef Ipsum.
2. Répétez l'étape précédente jusqu'à ce que vous ayez entre les mots suivants, séparés l'un de l'autre par un espace : Articles, Special Events, Location, Menu, Contact Us.

N'appuyez pas sur Entrée (Windows) ou Retour (Macintosh) en cours de frappe. N'employez que la barre d'espace pour séparer les mots et laissez ceux-ci aller à la ligne naturellement. La largeur fixe de la cellule du tableau déterminé le nombre de mots qui tiendrauf sur une ligne.

1. Tout en maintainant le point d'insertion dans la première cellule du tableau à trois colonnes, cliquez sur la balise du sélecteur de balises.

   

   1. Dans l'inspecteur des propriétés (Fenêtre > Propriétés),CHOISSEZ Haut dans le menu Alignment vertical.

   Le texte que vous venez de taper est ainsi aligné sur le haut de la cellule du tableau.

   

   eae

   Si vous ne VOYZ pas le menu Alignement vertical, cliquez sur la flèche d'extension dans l'angle inférieur droit de l'inspecteur des propriétés.

   1. Enregistrez votre page.

   Créez des liens

   Un lien est une reférence, insérée dans une page Web, qui pointe sur un autre document. Vous pouvez transformer pratiquement un actif quelconque en un lien bien que le lien le plus courant soit un lien de texte.

   Vou puez creer des liens à tout moment du processus de création d'un site. Dans cette section, vous allez creer des liens pour la barre de navigation, même si le texte n'est pas encore mis en forme pour ressembler à une barre de navigation.

   Le dossier racine du site cafe_townsend contient une page HTML terminée que vous pouvezlier à (une page de menu pour Cafe Townsend). Vous employez cette page pour tous les liens de la barre de navigation. Si vousétiez en train de creator un vrai site, chacun de ces liens accederait a une page différente.

   1. Dans la page index.html ouverte de la fenêtre de document, Sélectionnez le terme Cuisine que vous avez saisi dans la première cellule du tableau à trois colonnes. Prenez garde de ne saisir que le terme Cuisine sans l'espace qui le suit.

   

   1. Dans l'inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur l'icone de dossier située en regard de la zone de texte Lien.

   

   1. Dans la boîte de dialogue Sélectionner un fichier, accédez au fichier menu.html (qui se trouve dans le même dossier que le fichier index.html) puis cliquez sur OK (Windows) ou Choisir (Macintosh).

   2. Cliquez sur la page pour déslectionner le mot Cuisine. Le texte « Cuisine » est souligné et s'affiche en bleu, ce qui indique qu'il s'agit désormais d'un lien.

   3. Répétez les étapes précédentes pour lier chaque mot ou ensemble de mots que vous avez saisis pour la navigation. Vous pouze créé plus de six liens : un pour Chef Ipsum, Articles, Special Events, Location, Menu, et Contact Us.

   Liez chaque mot ou groupe de mots à la page menu.html et prenez garde de ne laisser aucun espace avant et après les mots ou groupes de mots quand vous créez des liens. Il ne s'agit ici que de liens factices; en réalité, il faudraitlier chaque mot de la navigation à une page qui lui soit propre.

   eOnnRn

   Les liens ne fonctionnent pas lorsque vous-cliquez dessus dans la fenêtre de document dans Dreamweaver. Ils ne fonctionnent que dans un navigateur. Pour vous assurer que vous lien fonctionne correctement, vous doivent afficher votre page dans un navigateur. Pour obtenir des instructions sur la manière de procéder, poursuivez avec Aperçu de votre page dans un navigateur, page 106.

   1. Enregistrez votre page.

   Aperçu de votre page dans un navigateur

   Le mode Création vous donne une vague idée de l'apparance de votre page sur le Web, mais il vous faut obtenir un aperçu de la page dans le navigateur pour vous rendre compte du résultat effectif. Bien que les navigateurs fournissent les mêmes résultats en tège générale, chaque version de navigateur peut afficher des pages HTML plus ou moins différentes. Dreamweaver fait de son mieux pour partager des HTML qui serontsemblablesquelque soitle navigateurutilisé.Maisil est difficile d'éviter des différences.Dés lors,la consultation d'un aperçu de votre travail dans un navigateur est la seule manière dont vous disposez pour voir ce que verront les visiteurs de votre site après la publication de vos pages.

   1. Assurez-vous que le fichier index.html soit ouvert dans la fenêtre du document.
   2. Appuyez sur la touche F12 (Windows) ou Commande+F12 (Macintosh).

   Votre navigateur principal est lancé s'il n'est pas deja actif et il affiche la page index.

   

   Dreamweaver doit automatiquement détecter votre navigateur principal et l'utiliser pour afficher un aperçu de votre page. Si aucun aperçu de la page ne s'affiche dans le navigateur de votre choix, repassez à Dreamweaver (si cela est nécessaire) et Sélectionnez Fichier > Aperçu dans le navigateur > Modifier liste des navigateurs. La boîte de dialogue Préférences apparait et vous pouvez ajouter le navigateur de votre可以选择 dans la liste. Pour plus d'informations, cliquez sur le bouton Aide de la boîte de dialogue Préférences.

   1. (En option) Revenez à Dreamweaver pour faire les modifications nécessaires.

   Enregistrez ensuite votre travail et appuyez de nouveau sur la touche F12 pour vous assurer que vos modifications aient ete prises en compte.

   Vous avez maintainant une page Web avec un contenu au complet. L'etape suivante consiste à mesure en forme une partie du contenu pour le rendre plus attrayant. Dans le didacticiel suivant, vous apprendrez à utiliser CSS pour mesure en forme le texte que vous avez ajoute.

   CHAPTER 6

   Didacticiel : Mise en formede votre page avec CSS

   6

   Ce didacticiel vous montre commentmettre du texte en forme dans votre page enutilisant CSS (Cascading Style Sheets ou Feuilles de style en cascade) dans Dreamweaver. CSS vous donne une plus grande maitrise sur I'aspect de votre page en vous permettant demettre en forme et de positionner le texte avec des moyens dont HTML ne dispose pas.

   Dans ce didacticiel, vous allezaccomplir les tâches suivantes :

   Localisez vos fichiers 110

   Passez notre tâche en revue 111

   Etude de CSS 112

   Creez une nouvelle feuille de style 114

   Explorez le panneau Styles CSS 119

   Associez une feuille de style 116

   Creez 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

   Localisez vos fichiers

   Dans ce didacticiel, vous commenceriez par la page index de Cafe Townsend à laquelle vous avez ajoute un contenu dans Chapitre 5, Didacticiel: Ajout de contenu aux pages Si vous n'êtes pas allé jusqu'à bout de ce didacticiel, vous pouze le faire avant d'aler plus loin ou bien vous pouvez ouvrir la version terminée du didacticiel et commencer par là. La version terminée du didacticiel, add_content.html, se trouve dans le dossier completed_files/dreamweaver, dans le dossier cafe_townsend que vous avez copié sur votre disque dur au Chapitre 3, Didacticiel: Configuration de votre site et des fichiers de projet.

   Si vous entamez ce didacticiel avec le fichier add_content.html terminé, au lieu du fichier index.html du Chapitre 5, Didacticiel : Ajout de contenu aux pages, certaines étapes et illustrations du didactiel ne correspondront pas à ce que vous verrez à l'écran.

   Passez votre tâche en revue

   Dans ce didacticiel, vous utiliserez des Feuilles de style en cascade (CSS) pourmettre en forme le texte sur la page d'accueil de Cafe Townsend, un restaurant fictif. Vous aliez creer différentes sortes de regles CSS pourmettre en forme le texte du corps. Vous aliez égalementmettre en forme le texte de lien sur le cote gauche de la page afin de creer une barre de navigation. Quand vous aurez terminé, la page ressemblera à l'exemple suivant:

   

   Pour plus d'informations sur CSS, passes à la section suivante. Pour commencer à创建工作 CSS tout de suite, passes à Créez une nouvelle feuille de style, page 114.

   Étude de CSS

   Les feuilles de style en cascade (.CSS) regroupent des règles de mise en forme qui déterminent l'aspect du contenu d'une page Web. Quand vous utilisez CSS pourmettre une page en forme, vous séparez le contenu de la presentation. Le contenu de votre page, c'est-à-dire, le code HTML, se trouve dans le fichier HTML lui-même tandis que les règles CSS qui définiennent la presentation du code est dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement la

   section). CSS youpermét de gérer en souplesse l'aspect d'une page, tant en termes de précision de l'emplacement des éléments qu'en termes de choix de polices et de styles spécifique.

   Par ailleurs, CSS permet de contrôle de nombreuses propriétés que HTML seul est incapable de génér. Par exemple, pour un texte donné, vous pouvez spécifier différentes tailles et unités (pixels, points, et ainsi de suite) de police. En utilisant CSS et en définissant les tailles de police en pixels, vous garantissez un traitement plus homogène de la presentation et de l'aspect de votre page dans différents navigateurs.

   Une rècle de style CSS se compose de deux entités: le sélection et la déclaration. Le sélection est un terme (tel que P, H1, un nom de classe ou un identifient) qui identifie l'objet mis en forme tandis que la déclaration définit quels sont les éléments de style. Dans l'exemple suivant, H1 correspond au sélection tandis que tout ce qui est placé entre les crochets ({}) correspond à la déclaration :

   H1{ font-size:16pixels; font-family:Helvetica; font-weight:bold; } 
   

   La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple, Helvetica). L'exemple précédent create un style pour des balises H1 : Le texte de toutes les balises H1 liées à ce style sera associé à une police Helvetica, d'une taille de 16 pixels et en gras.

   Le terme « en cascade » signifie qu'il est possible d'appliquer plusieurs feuilles de style à un même élément ou à une même page Web. Vous pouvez, par exemple,isser une règle CSS pour définir la couleur et une autre pour les marges, puis les appliquer toutes les deux au texte d'une même page. Les styles définis sont appliqués en cascade aux éléments de votre page Web, créé en fin de compte la conception désirée.

   CSS présente l'avantage major d'être facilement mis à jour. Lorsque vous modifiez une rècle CSS en un emplacement, la mise en forme de tous les documents utilisant ce style reflète automatiquement le nouveau style.

   You pouvez définir les types de styles suivants dans Dreamweaver :

   • Les règles CSS personnalisées, également appelées styles de classe, définitissant les attributs de styles d'une plage ou d'un bloc de texte. Tous les styles de classe sont précédés d'un point (.). Par exemple, vous pourriez créé un style de classe appelé .rouge, attribuer le rouge à la propriété de la color de la règle et l'appliquer à du texte dans une partie de paragraphe déjà pourvu d'un style.
   • Les styles appliqués aux balises HTML redéfinissent la mise en forme de ces balises, par exemple p ou h1. Lorsque vous créez ou modifiez une règle CSS pour la balise h1, tout le texte mis en forme à l'aide de cette balise h1 est immédiatement modifié en conséquence.
   • Les règles du sélectioneur CSS (styles avances) redéfinissent la mise en forme pour une combinaison particulière d'éléments ou pour d'autres formes du sélectionur admises par CSS (par exemple, le sélectiont td h2 s'applique chaque fois qu'un en-tête h2 apparait dans une cellule de tableau. Les styles avances peuvent également redéfinir la mise en forme pour des balises qui contiennent un attribut id (identifiant) (par exemple, les styles définis par #monStyle s'appliquent à toutes les balises qui contiennent la paire valeur-attribut id="monStyle").

   Pour plus d'informations, voir A propos du formatage de texte dans Dreamweaver dans Utilisation de Dreamweaver.

   Créez une nouvelle feuille de style

   D'abord, vous allez创建工作 une feuille de style externe qui contient une rège CSS définitissant un style pour du texte de paragraphe. Quand vous créez des styles dans une feuille de style externe, vous pouvez contrôler l'aspect de pages Web multiples à partir d'un même emplacement au lieu d'avoir à définir des styles pour chacune des pages.

   1. Choisissez Fichier> Nouveau.
   2. Dans la boîte de dialogue Nouveau document, Sélectionnez Page de base dans la colonne Catégorie, Sélectionnez CSS dans la colonne Page de base et cliquez sur Créer.

   

   Une feuille de style vierge apparait dans la fenetre de document. Les boutons pour les modes Creation et Code sont désactivés. Les feuilles de style CSS sont des fichiers de texte uniquement, c'est-à-dire que leur contenu n'est pas prévu pour être affché dans un navigateur.

   Compléments sur les règles CSS

   Les règles CSS peuvent se trouver aux emplacements suivants :

   Les feuilles de style CSS externes regroupent des règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site Web à l'aide d'un lien situé dans la head section d'un document.

   Les feuilles de style CSS internes (ou incorporeés) regroupent les règles CSS inclues dans une balise style dans la section

   d'un document HTML. Ainsi, l'exemple suivant définit la taille de police pour l'ensemble du texte dans le document mis en forme à l'aide de la balise paragraphe :

   <head>   
   <style> p{ font-size:80px } </style>   
   </head> 
   

   Les styles en ligne sont définis avec des instances spécifiques de balises dans un document HTML. Par exemple,

   définit la taille de la police uniquement pour le paragraph mis en forme avec la balise qui contient le style incorpore.

   Dreamweaver restitue la plupart des attributes de style appliqués directement dans la fenêtre de document. Vous pouvez également afficher un aperçu des styles appliqués au document dans une fenêtre de navigator. Certains attributes de style CSS sont représentés différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera et Apple Safari.

   1. Enregistrez la page (Fichier > Enregister) sous le nom cafe_townsend.css.

   Quand vous enregistrez la feuille de style, assurez-vous que vous le faites dans le dossier cafe_townsend (le dossier racine de votre site Web).

   1. Saisissez le code suivant dans la feuille de style :

   p{   
   font-family:Verdana,sans-serif;   
   font-size:11px;   
   color:#000000;   
   line-height:18px;   
   padding:3px;   
   } 
   

   Au fur et à mesure que vous tapez, Dreamweaver vous propose des options de code pour vous aider à terminer votre saisie. Appuyez sur Entrée (Windows) ou Retour (Macintosh) quand vous apercevez le code que Dreamweaver vous propose pour terminer la saisie à votre place.

   N'oubliez pas d'inclure un point-virgule à la fin de chaque ligne, après les valeurs de propriété.

   Quand vous aurez terminé, le code devrait avoir l'aspect suivant :

   

   Pour plus d'informations sur unequelconque propriete CSS, reportez-vous au guide de reference O'Reilly qui est livre avec Dreamweaver. Pour afficher le guide,choisissez Aide Reference et selectionnez O'Reilly -Reference CSS dans le menu déroulant du panneau Reference.

   1. Enregistrez la feuille de style.

   Ensuite, vous allez associer la feuille de style à la page index.html.

   Associez une feuille de style

   Quand vous associez une feuille de style à une page web, les règles définies dans la feuille sont appliquées aux éléments correspondants de la page. Par exemple, quand vous associez la feuille de style de cafe_townsend.css à la page index.html, tout texte de paragraphe (texte mis en forme avec la balise dans le code HTML) est mis en forme suivant la règle CSS que vous avez définié.

   1. Dans la fenêtre de document, ouvre le fichier index.html de Cafe Townsend. (Vou陏 posses cliquer sur sa balise si elle est déjà ouverte.)
   2. Sélectionnez le texte du premier paragraphe que vous avez collé dans la page dans Chapitre 5, Didacticiel: Ajout de contenu aux pages.

   

   1. Regardez dans l'inspecteur de propriété et assurez-vous que le paragraphe est mis en forme avec la balise paragraphe.

   Si le menu déroulant Mise en forme dans l'inspecteur de propriété indique « Paragraphe », alors le paragraphe est mis en forme avec la balise paragraphe. Si le menu déroulant Mise en forme dans l'inspecteur de propriété indique « Aucun», Sélectionnez Paragraphe pourmettrele paragraphe en forme.

   

   1. Répétez l' étape 3 pour le deuxième paragraphe.

   2. Dans l'angle inférieur droit du panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Associer feuille de style.

   

   1. Dans la boîte de dialogue Associer feuille de style externe, cliquez sur Naviguer et naviguez jusqu'àu fichier cafe_townsend.css que vous avez créé à la section précédente.

   2. Cliquez sur OK.
      Le texte dans fenêtre de document est mis en forme suivant la règle CSS de la feuille de style externe.

   Explore le 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). Il vous permet également de modifier les propriétés CSS sans ouvrir une feuille de style externe.

   1. Assurez-vous que la page index.html est ouverte dans la fenêtre de document.
   2. Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur Tous dans la partie supérieure du panneau et vérifie vos règes CSS.

   En mode Tous, le panneau CSS vous affiche toutes les règles CSS qui s'appliquent au document actif, qu'elles soient dans une feuille de style externe ou dans le document lui-même. Vous devriez apercevoir deux catégories principales dans le volet Toutes les règles : une catégorie de balise