MACROMEDIA DREAMWEAVER 8-BIEN DMARRER AVEC DREAMWEAVER Manuel utilisateur

Bien démarrer avec Dreamweaver
Marques de commerce
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et
WebHelp sont des marques déposées ou des marques commerciales de Macromedia, Inc. qui peuvent être enregistrées soit aux
Etats-Unis, soit auprès d’autres juridictions y compris internationales. Les autres noms de produits, logos, graphiques, mises en
page, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques, des marques de service ou des noms de
marque appartenant à Macromedia,Inc. ou à d’autres entités et peuvent être déposés dans certains pays, états ou provinces.
Informations de tiers
Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et Macromedia ne peut en aucun
cas être tenu responsable du contenu de ces sites. Si vous accédez à l’un de ces sites, vous le faites à vos propres risques et périls.
Macromedia mentionne ces liens pour faciliter votre travail et l’inclusion de ces liens n’implique pas que Macromedia approuve le
contenu de ces sites tiers ou en accepte la responsabilité.
Navigateur Opera ® Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.
Copyright © 1997-2005 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut être ni copié, ni photocopié, ni
reproduit, ni traduit ni transposé sous une forme exploitable par ordinateur ou sous une forme électronique quelconque,
en tout ou en partie, sans l’accord écrit préalable de Macromedia, Inc. Nonobstant ce qui précède, le propriétaire ou
l’utilisateur autorisé d’une copie valable du logiciel qui accompagne ce manuel peut imprimer une copie de ce manuel à
partir d’une version électronique dudit manuel dans le seul but que ce propriétaire ou cet utilisateur autorisé puisse
apprendre à utiliser ce logiciel, sous réserve qu’aucune partie de ce manuel ne soit imprimée, reproduite, distribuée,
revendue ou transmise à d’autres fins, y compris, sans restrictions, à des fins commerciales telles que la vente de copies de
cette documentation ou la fourniture de services contre rémunération. Code d’article ZDW80M100F
Remerciements
Direction Charles Nadeau
Rédaction : Jon Michael Varese
Edition : Rosana Francescato, Lisa Stanziano, Evelyn Eldridge, Mark Nigara
Direction de la production et de l’édition Patrice O’Neill et Rosana Francescato
Conception et production : Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel,
Arena Reed, Mario Reynoso
Localization Management: Melissa Baerwald
Assurance Qualité Localisation: Vince Truong
Remerciements particuliers à Sheila McGinn, Jennifer Rowe, Jay Armstrong, Sally Sadosky, Jennifer Taylor, Paul Gubbay, Melissa
Baerwald, Sami Kaied, Jung Choi, Masayo Noda, Kristin Conradi, Yuko Yagi ainsi qu’à tous les membres des équipes de
l’ingénierie de Dreamweaver et de l’assurance qualité.
Première édition : Septembre 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103
Table des matières
PARTIE 1 : INTRODUCTION A DREAMWEAVER
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Ce que vous pouvez accomplir avec Dreamweaver 8 . . . . . . . . . . . . . . 12
Nouveautés de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Installation de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Enregistrement de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Chapitre 1 : Apprentissage de Dreamweaver. . . . . . . . . . . . . . . . . 17
Par où débuter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Tirer le meilleur parti de la documentation Dreamweaver . . . . . . . . . . 22
Utilisation du système d’aide de Dreamweaver . . . . . . . . . . . . . . . . . . . 26
Chapitre 2 : Notions de base de Dreamweaver. . . . . . . . . . . . . . . 31
Apprendre à connaître l’espace de travail de Dreamweaver 8. . . . . . . 31
Personnaliser l’espace de travail de Dreamweaver 8. . . . . . . . . . . . . . 43
Accomplir des tâches élémentaires dans Dreamweaver 8 . . . . . . . . . 46
PARTIE 2 : DIDACTICIELS
Chapitre 3 : Didacticiel : Configuration de votre site et
des fichiers de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Apprenez à utiliser des sites Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 54
Configurez vos fichiers de projet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Définissez un dossier local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Chapitre 4 : Didacticiel : Création d’une mise en forme
de page basée sur un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Examinez la maquette détaillée de conception . . . . . . . . . . . . . . . . . . . 62
Créez et enregistrez une nouvelle page . . . . . . . . . . . . . . . . . . . . . . . . . 64
Insérez des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
3
Définissez les propriétés des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Insérez un espace réservé pour l’image . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Ajoutez de la couleur à la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Chapitre 5 : Didacticiel : Ajout de contenu aux pages . . . . . . . . . 81
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Insérez des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Insérez et lisez un fichier Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Insérez une vidéo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Insérez du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Créez des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Aperçu de votre page dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . 106
Chapitre 6 : Didacticiel : Mise en forme de votre page
avec CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Étude de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Créez une nouvelle feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Associez une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Explorez le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Créez une nouvelle règle CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Appliquez un style de classe à un texte. . . . . . . . . . . . . . . . . . . . . . . . . . 125
Mettez en forme le texte de la barre de navigation . . . . . . . . . . . . . . . 126
(En option) Centrez le contenu de la page . . . . . . . . . . . . . . . . . . . . . . . 136
Chapitre 7 : Didacticiel : Publication de votre site . . . . . . . . . . . 139
Étudiez les sites distants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Configurez un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Téléchargez vos fichiers locaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Résolution des problèmes de configuration du dossier
distant (en option) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
PARTIE 3 : DIDACTICIELS AVANCES
Chapitre 8 : Didacticiel : Travail avec du code . . . . . . . . . . . . . . 149
Affichez le code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Activez l’espace de travail de codage (Windows uniquement) . . . . . 152
Ajoutez une balise à l’aide du sélecteur de balises. . . . . . . . . . . . . . . . 152
4
Table des matières
Modifiez une balise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155
Consultez des informations relatives à une balise. . . . . . . . . . . . . . . . . 157
Ajoutez une image à l’aide des indicateurs de code . . . . . . . . . . . . . . .159
Vérifiez vos modifications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162
Imprimez votre code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163
Chapitre 9 : Didacticiel : Création d’une mise en forme
de page basée sur CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Apprendre la mise en forme de page en utilisant CSS. . . . . . . . . . . . .166
Vérification de la maquette de construction . . . . . . . . . . . . . . . . . . . . . . 167
Création et enregistrement d’une nouvelle page . . . . . . . . . . . . . . . . . .169
Insertion de calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Ajoutez des couleurs à la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
Chapitre 10 : Didacticiel : Affichage de données XML . . . . . . . . 189
Localiser vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190
Passer votre tâche en revue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Utilisation de XML et XSL dans des pages Web . . . . . . . . . . . . . . . . .192
Pages XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194
Conversion d’une page HTML en page XSLT. . . . . . . . . . . . . . . . . . . .196
Association d’une source de données XML à la page XSLT . . . . . . . 197
Modification de la mise en page XSLT . . . . . . . . . . . . . . . . . . . . . . . . . .198
Liaison des données XML à la page XSLT. . . . . . . . . . . . . . . . . . . . . . .201
Application de styles aux données XML . . . . . . . . . . . . . . . . . . . . . . . . 203
Création d’un lien dynamique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Ajout d’un objet XSLT Région répétée . . . . . . . . . . . . . . . . . . . . . . . . . 206
Association de la page XSLT à la page XML . . . . . . . . . . . . . . . . . . . . 209
Autres options de déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Chapitre 11 : Didacticiel : Développement d’une
application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
Ouvrez un document de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216
Définissez un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Affichez les enregistrements de la base de données . . . . . . . . . . . . . .221
Ajoutez des champs dynamiques au tableau . . . . . . . . . . . . . . . . . . . . 223
Définissez une région répétée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Affichez votre page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Créez un formulaire d’insertion d’enregistrement . . . . . . . . . . . . . . . . 225
Copiez les fichiers sur le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231
Documentation connexe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Table des matières
5
PARTIE 4 : ANNEXES
Annexe A : Description des applications Web . . . . . . . . . . . . . 235
Présentation des applications Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . .235
Fonctionnement d’une application Web . . . . . . . . . . . . . . . . . . . . . . . .238
Création de pages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243
Choix d’une technologie de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Terminologie du développement d’applications Web . . . . . . . . . . . . .246
Annexe B : Installation d’un serveur Web . . . . . . . . . . . . . . . . . . 251
Premiers pas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252
Installation d’Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . .252
Test de IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253
Test du serveur Web Macintosh (développeurs PHP) . . . . . . . . . . . 254
Fonctions élémentaires du serveur Web . . . . . . . . . . . . . . . . . . . . . . . .255
Annexe C : Configuration d’un exemple de site ColdFusion. . 257
Aide-mémoire pour la configuration à l’intention des
développeurs ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Configuration du système (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . .258
Définition d’un site Dreamweaver (ColdFusion) . . . . . . . . . . . . . . . . . .263
Connexion à l’exemple de base de données (ColdFusion). . . . . . . . .269
Annexe D : Configuration d’un exemple de site ASP.NET . . . 275
Aide-mémoire pour la configuration à l’intention des développeurs ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Configuration du système (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Définition d’un site Dreamweaver (ASP.NET) . . . . . . . . . . . . . . . . . . 280
Connexion à l’exemple de base de données (ASP.NET) . . . . . . . . . .286
Annexe E : Configuration d’un exemple de site ASP. . . . . . . . . 291
Aide-mémoire pour la configuration à l’intention des
développeurs ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292
Configuration du système (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292
Définition d’un site Dreamweaver (ASP) . . . . . . . . . . . . . . . . . . . . . . . .298
Connexion à l’exemple de base de données (ASP) . . . . . . . . . . . . . . 303
6
Table des matières
Annexe F : Configuration d’un exemple de site JSP . . . . . . . . 309
Aide-mémoire pour la configuration à l’intention des
développeurs JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310
Configuration du système (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Définition d’un site Dreamweaver (JSP) . . . . . . . . . . . . . . . . . . . . . . . . .315
Connexion à l’exemple de base de données (JSP) . . . . . . . . . . . . . . 320
Annexe G : Configuration d’un exemple de site PHP. . . . . . . . 327
Aide-mémoire pour la configuration à l’intention des
développeurs PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Configuration du système (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Définition d’un site Dreamweaver PHP . . . . . . . . . . . . . . . . . . . . . . . . . 338
Connexion à l’exemple de base de données (PHP) . . . . . . . . . . . . . . 343
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Table des matières
7
8
Table des matières
1
PARTIE 1
Introduction à Dreamweaver
La première partie de ce manuel vous décrit Macromedia Dreamweaver 8
et comprend des informations sur son installation ainsi qu’une vue
d’ensemble d’un espace de travail. Elle fournit également une liste
d’éléments disponibles pour apprendre Dreamweaver.
Cette partie du manuel contient les sections suivantes :
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Apprentissage de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Notions de base de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
9
Introduction
Macromedia Dreamweaver MX 8 est un éditeur HTML professionnel
destiné à la conception, au codage et au développement de sites, de pages et
d’applications Web. Quel que soit l’environnement de travail utilisé
(codage manuel HTML ou environnement d’édition visuel), Dreamweaver
propose des outils qui vous aideront à créer des applications Web.
Ce guide vous indique comment utiliser Macromedia Dreamweaver 8
dans le cas où vous ne connaîtriez pas bien l’un de ses aspects majeurs. Les
didacticiels dans ce guide constituent une marche à suivre pour créer un
site web simple mais fonctionnel.
Ce chapitre contient les rubriques suivantes :
Ce que vous pouvez accomplir avec Dreamweaver 8 . . . . . . . . . . 12
Nouveautés de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Installation de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Enregistrement de Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Conventions typographiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
11
Ce que vous pouvez accomplir
avec Dreamweaver 8
Les fonctions d’édition visuelles de Dreamweaver vous permettent de créer
rapidement des pages sans rédiger une seule ligne de code. Vous pouvez
afficher tous les éléments ou actifs de votre site et les faire glisser
directement d’un panneau convivial dans un document. Vous pouvez
rationaliser les tâches de développement en créant et en modifiant des
images dans Macromedia Fireworks ou toute autre application graphique,
puis en les important directement dans Dreamweaver. Dreamweaver
fournit également des outils pour faciliter l’adjonction d’actifs Flash aux
pages web.
Outre les caractéristiques du glisser-déposer qui vous aident à construire
des pages Web, Dreamweaver fournit un environnement complet de
codage qui comprend des outils d’édition de code (tels que coloration de
code, achèvement de balises, barre à outils de code et réduction de code)
ainsi que de la documentation de référence portant sur les langages
Cascading Style Sheets (CSS), JavaScript, ColdFusion Markup Language
(CFML) et autres. La technologie Roundtrip HTML de Macromedia
permet d’importer des documents HTML codés manuellement sans en
modifier le code pour que vous puissiez ensuite remettre en forme ce
dernier avec le style de mise en forme de votre choix.
Dreamweaver permet également de créer des applications Web reposant sur
des bases de données dynamiques au moyen de technologies serveur
comme CFML, ASP.NET, ASP, JSP et PHP. Si vous préférez travailler avec
des données XML, Dreamweaver fournit des outils qui vous permettent de
créer aisément des pages XSLT, d’associer des pages XML et d’afficher des
données XML sur vos pages Web.
Dreamweaver est entièrement personnalisable. Vous pouvez créer vos
propres objets et commandes, modifier les raccourcis clavier ou encore
rédiger un code JavaScript pour intégrer de nouveaux comportements,
inspecteurs de propriétés et rapports de site aux fonctionnalités de
Dreamweaver.
Pour plus de renseignements sur les possibilités qui existent en vue
d’apprendre Dreamweaver, voir Chapitre 1, Apprentissage de Dreamweaver,
page 17.
12
Introduction
Nouveautés de Dreamweaver 8
Dreamweaver 8 comprend un grand nombre de nouvelles fonctionnalités
pour vous aider à construire des sites Web et des applications avec un
minimum d’effort dans un minimum de temps. Dreamweaver rend
simples et accessibles les technologies complexes, vous aidant ainsi à
accomplir davantage en moins de temps.
Voici quelques-unes des nouvelles fonctionnalités principales disponibles
dans Dreamweaver 8 :
■
Outil de zoom et guides
■
Liaisons de données XML visuelles
■
Nouveau panneau de Styles CSS
■
Visualisation de mise en forme CSS
■
Réduction du code
■
Barre d’outils de codage
■
Transfert de fichiers en arrière-plan
■
Insérer une commande Flash Video
Pour une liste et une description complètes de nouvelles fonctionnalités
dans Dreamweaver 8, voir Nouveautés de Dreamweaver 8 dans Utilisation de
Dreamweaver (Aide > Utilisation de Dreamweaver).
Installation de Dreamweaver 8
Cette section explique comment installer Dreamweaver.
N’oubliez pas de lire les notes d’accompagnement sur le site Web de
Macromedia sous www.macromedia.com/go/dw_documentation_fr pour
obtenir les dernières informations ou instructions.
Pour installer Dreamweaver :
1.
Insérez le CD de Dreamweaver dans le lecteur de CD-ROM.
2.
Procédez de l’une des manières suivantes :
■
Sous Windows, l’installation du programme Dreamweaver démarre
automatiquement.
■
Sous Macintosh, double-cliquer l’icône d’installation de
Dreamweaver qui paraît sur le bureau.
Installation de Dreamweaver 8
13
3.
Suivez les instructions à l’écran.
Le programme d’installation vous invite à saisir l’information
demandée.
4.
Redémarrez votre ordinateur si nécessaire.
Enregistrement de
Dreamweaver 8
Pour bénéficier du support technique de Macromedia, nous vous
conseillons d’enregistrer votre copie de Macromedia Dreamweaver 8 par
courrier électronique ou postal.
Lorsque vous vous enregistrez, vous pouvez demander à recevoir des
informations de dernière minute concernant les mises à niveau et les
nouveaux produits Macromedia. Vous pouvez également être averti par
courriel de chaque mise à jour des produits et de contenu nouveau sur les
sites Web www.macromedia.com et www-euro.macromedia.com.
Pour enregistrer Macromedia Dreamweaver 8, procédez de
l’une des manières suivantes :
14
Introduction
■
Sélectionnez Aide > Activation enregistrement en ligne et remplissez le
formulaire électronique.
■
Sélectionnez Aide > Imprimer l’enregistrement, imprimez le formulaire
et envoyez-le à l’adresse indiquée sur le formulaire.
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
■
Les options de menu sont indiquées comme suit : intitulé du menu >
intitulé de l’option de menu. Les options des sous-menus sont
indiquées comme suit : intitulé du menu > intitulé du sous-menu >
intitulé de l’option de menu.
■
La police de code indique les intitulés des balises et attributs
HTML, ainsi que le texte utilisé littéralement dans les exemples.
■
La police de code en italique indique les éléments remplaçables
(parfois appelés métasymboles) dans le code.
■
Le texte romain en gras indique le texte que vous devez saisir à
l’identique.
Conventions typographiques
15
16
Introduction
CHAPITRE 1
Apprentissage de
Dreamweaver
1
Macromedia Dreamweaver 8 comprend diverses ressources qui vous
aideront à vous familiariser rapidement avec le programme et à créer
facilement vos propres sites et pages Web. Toute la documentation de
Dreamweaver est disponible sous la forme d’une aide électronique et dans
un format PDF.
Ce chapitre contient les rubriques suivantes :
Par où débuter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Tirer le meilleur parti de la documentation Dreamweaver. . . . . . . 22
Utilisation du système d’aide de Dreamweaver. . . . . . . . . . . . . . . . 26
Par où débuter
La documentation de Dreamweaver contient des informations destinées à
des lecteurs ayant divers niveaux d’expérience. Cette section vous aide à
comprendre comment aborder la documentation en fonction de votre
bagage et de ce que vous désirez accomplir avec Dreamweaver.
Elle aborde les sujets suivants :
■
Concepteurs débutants, page 17
■
Concepteurs expérimentés, page 18
■
Codeurs manuels expérimentés, page 20
■
Développeurs d’applications Web, page 21
Concepteurs débutants
Si vous êtes novice dans le domaine de la conception de sites Web, cette
section vous guidera vers les points essentiels de la documentation
Dreamweaver pour approfondir vos connaissances.
17
Pour les concepteurs Web qui débutent :
1.
Commencez par lire Chapitre 2, Notions de base de Dreamweaver,
page 31. Puis poursuivez en suivant les didacticiels dans ce manuel. Les
didacticiels sont composés de deux sections Les cinq premiers sont
conçus pour les débutants. Ils vous guident du début jusqu’à la fin dans
le développement d’un site Web, modeste mais fonctionnel. La
deuxième section de didacticiels vous propose des concepts plus poussés.
Si vous le souhaitez, vous pourriez attendre d’avoir acquis une certaine
expérience dans la construction de pages Web avant d’aborder ces
derniers.
2.
Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),
vous avez une idée plus précise de ce que vous avez appris dans ce guide
Bien démarrer avec Dreamweaver en lisant Chapitre 1, “Exploration de
l'espace de travail,” Chapitre 2, “Configuration d'un site
Dreamweaver,” Chapitre 4, “Gestion des fichiers,” et Chapitre 3,
Création et ouverture de documents.
3.
Lisez Chapitre 7, “Mise en forme des pages avec les styles CSS,” et
Chapitre 8, Présentation de contenu à l'aide de tableaux dans Utilisation
de Dreamweaver pour apprendre ce qu’est la mise en forme de pages.
4.
Lisez le Chapitre 13, “Insertion et mise en forme de texte,” et le
Chapitre 14, Insertion d’images dans Utilisation de Dreamweaver pour en
savoir plus sur le formatage de texte et l’ajout d’images à vos pages.
5.
C’est tout ce dont vous avez besoin pour commencer à réaliser des sites
Web de qualité ; lorsque vous vous sentirez prêt à utiliser des outils plus
perfectionnés, lisez les autres chapitres concernant les pages statiques
dans Utilisation de Dreamweaver. Si vous le souhaitez, vous pourriez
d’abord vous familiariser avec la création de pages Web avant de lire les
chapitres sur les pages dynamiques.
Concepteurs expérimentés
Si vous êtes un concepteur de sites Web expérimenté, cette section vous
guidera vers les points essentiels de la documentation Dreamweaver
correspondant à vos connaissances. Deux approches différentes sont
proposées : une pour les concepteurs qui n’ont jamais ou peu utilisé
Dreamweaver et une autre pour les concepteurs qui connaissent déjà bien
Dreamweaver mais qui veulent en savoir plus sur la création de pages
dynamiques.
18
Apprentissage de Dreamweaver
Pour les concepteurs Web expérimentés qui utilisent
Dreamweaver pour la première fois :
1.
Commencez par lire les didacticiels dans ce guide Bien démarrer avec
Dreamweaver.
2.
Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),
lisez le Chapitre 1, Exploration de l'espace de travail pour en savoir plus
sur l’interface utilisateur de Dreamweaver.
3.
Bien que vous connaissiez la plupart des sujets abordés dans le
Chapitre 2, Configuration d'un site Dreamweaver et le Chapitre 4,
Gestion des fichiers, parcourez ces chapitres pour savoir comment ces
concepts sont mis en oeuvre dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site
Dreamweaver.
4.
Pour obtenir des informations utiles sur la création de pages HTML
simples dans Dreamweaver, lisez le Chapitre 13, Insertion et mise en
forme de texte et le Chapitre 14, Insertion d’images.
5.
Pour plus d’informations sur le codage dans Dreamweaver, voir le
Chapitre 19, “Configuration d'un environnement de codage,”,
Chapitre 20, “Codage dans Dreamweaver,”, le Chapitre 21,
“Optimisation et débogage de code,” et le Chapitre 22, Modification du
code en mode Création.
6.
Lisez la présentation au début des autres chapitres de Utilisation de
Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous
intéresser.
Pour les concepteurs Web expérimentés qui connaissent bien
Dreamweaver et souhaitent en apprendre davantage sur la
création de pages dynamiques :
1.
Commencez par lire Annexe A, Description des applications Web,
page 235 et Chapitre 11, Didacticiel : Développement d’une application
Web, page 213.
2.
Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),
parcourez le Chapitre 1, Exploration de l'espace de travail pour en savoir
plus sur les nouveaux aspects de l’interface utilisateur de Dreamweaver,
puis lisez Chapitre 30, Optimisation de l'espace de travail pour tirer parti
des fonctions de développement visuel.
Par où débuter
19
3.
Familiarisez-vous avec la conception de pages dynamiques dans
Dreamweaver en lisant Chapitre 31, Déroulement de la conception de
pages dynamiques.
4.
Configurez un serveur Web et un serveur d’application. (voir
Chapitre 23, Configuration d'une application Web).
5.
Connectez-vous à une base de données. (Voir Connexion à une base de
données dans Chapitre 23, Configuration d'une application Web.)
6.
Lisez la présentation au début de chaque chapitre de Utilisation de
Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous
intéresser.
Codeurs manuels expérimentés
Si vous êtes un codeur manuel expérimenté, cette section vous guidera vers
les points essentiels de la documentation Dreamweaver correspondant à vos
connaissances.
Pour les codeurs manuels expérimentés :
20
1.
Commencez par lire le Chapitre 8, Didacticiel : Travail avec du code dans
ce guide Bien démarrer avec Dreamweaver.
2.
Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),
lisez le Chapitre 1, Exploration de l'espace de travail pour en savoir plus
sur l’interface utilisateur de Dreamweaver.
3.
Bien que vous connaissiez la plupart des sujets abordés dans le
Chapitre 2, Configuration d'un site Dreamweaver et le Chapitre 4,
Gestion des fichiers, parcourez ces chapitres pour savoir comment ces
concepts sont mis en oeuvre dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site
Dreamweaver.
4.
Lisez le Chapitre 19, “Configuration d'un environnement de codage,”,
le Chapitre 20, “Codage dans Dreamweaver,”, le Chapitre 21,
“Optimisation et débogage de code,” et le Chapitre 22, Modification du
code en mode Création pour en savoir plus sur le codage dans
Dreamweaver.
5.
Lisez la présentation au début de chaque chapitre de Utilisation de
Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous
intéresser.
Apprentissage de Dreamweaver
Développeurs d’applications Web
Si vous êtes un développeur d’applications Web expérimenté, cette section
vous guidera vers les points essentiels de la documentation Dreamweaver
correspondant à vos connaissances. Deux approches différentes sont
proposées, selon que vous avez déjà utilisé Dreamweaver ou non.
Pour les développeurs d’applications Web n’ayant jamais
utilisé Dreamweaver :
1.
Commencez par parcourir rapidement le guide Bien démarrer avec
Dreamweaver pour vous familiariser avec les notions de base de
Dreamweaver.
2.
Dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver),
lisez le Chapitre 1, Exploration de l'espace de travail pour en savoir plus
sur l’interface utilisateur de Dreamweaver.
3.
Bien que vous connaissiez la plupart des sujets abordés dans le
Chapitre 2, Configuration d'un site Dreamweaver et le Chapitre 4,
Gestion des fichiers , parcourez ces chapitres pour savoir comment ces
concepts sont mis en oeuvre dans Dreamweaver. Attachez-vous
particulièrement aux sections traitant de la configuration d’un site
Dreamweaver.
4.
Configurez un serveur Web et un serveur d’application à l’aide de
Dreamweaver (voir Chapitre 23, Configuration d'une application Web).
5.
Connectez-vous à une base de données. (voir Connexion à une base de
données dans Chapitre 23, Configuration d'une application Web.)
6.
Lisez la présentation au début des autres chapitres de Utilisation de
Dreamweaver pour savoir si les sujets abordés sont susceptibles de vous
intéresser.
Pour les développeurs d’applications Web ayant déjà utilisé
Dreamweaver :
1.
Commencez par consulter Nouveautés de Dreamweaver 8 dans
Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver). La
section « Quoi de neuf? » se trouve dans , Introduction.
2.
Parcourez le Chapitre 1, Exploration de l'espace de travail pour en savoir
plus sur les nouveaux aspects de l’interface utilisateur Dreamweaver
Par où débuter
21
Tirer le meilleur parti de la
documentation Dreamweaver
Dreamweaver comprend diverses ressources qui vous aideront à vous
familiariser rapidement avec le programme et à créer facilement vos propres
pages Web. Le système d’aide de Dreamweaver est composé de plusieurs
documents qui vous aident à vous familiariser avec Dreamweaver,
Dreamweaver Extensibility et ColdFusion. Il existe également des
informations complémentaires auxquelles vous pouvez accéder en mode
interactif au fur et à mesure que vous apprenez à monter des pages Web.
Accès à la documentation Dreamweaver
Le tableau suivant récapitule la documentation qui se trouve dans le
système d’aide de Dreamweaver.
Vous pouvez acheter des imprimés de titres choisis Pour plus
d'informations, visitez www.macromedia.com/go/buy_books.
22
Apprentissage de Dreamweaver
Titre
Description/
Utilisateurs visés
Où le trouver
Bien démarrer
avec
Dreamweaver
Décrit les concepts
• Affichage dans Dreamweaver :
Sélectionner Aide > Bien
de base de
démarrer avec Dreamweaver
Dreamweaver et de
• Affichage interactif : http://
son interface avec
livedocs.macromedia.com/go/
des didacticiels
livedocs_dreamweaver_fr/
détaillés conçus pour
• Obtenir le PDF :
des débutants. Conçu
www.macromedia.com/go/
pour des utilisateurs
dw_documentation_fr
débutants, mais
convient également
aux utilisateurs de
niveaux avancé ou
intermédiaire qui
désirent se
familiariser avec les
nouvelles
fonctionnalités.
Titre
Description/
Utilisateurs visés
Où le trouver
Utilisation de
Dreamweaver
Information complète • Affichage dans Dreamweaver :
Sélectionner Aide > Aide
sur toutes les
Dreamweaver ou Aide >
fonctionnalités de
Utilisation de Dreamweaver
Dreamweaver. Conçu
•
Affichage interactif : http://
pour tous les
livedocs.macromedia.com/go/
utilisateurs de
livedocs_dreamweaver_fr/
Dreamweaver
• Obtenir le PDF :
www.macromedia.com/go/
dw_documentation_fr
Extension de
Dreamweaver
Décrit le cadre de
• Affichage dans Dreamweaver :
Sélectionner Aide > Extensions
Dreamweaver et
de Dreamweaver
l'interface de
• Affichage interactif : http://
programmation
livedocs.macromedia.com/go/
d'application (API).
livedocs_dreamweaver_fr/
Conçu pour les
• Obtenir le PDF :
utilisateurs avancés
www.macromedia.com/go/
qui veulent construire
dw_documentation_fr
des extensions à
l'interface de
Dreamweaver ou bien
la personnaliser.
Guide des API
de
Dreamweaver
• Affichage dans Dreamweaver :
Décrit l'utilitaire API
Sélectionner Aide > Référence
et l'API JavaScript,
API Dreamweaver
tous deux vous
venant en aide quand • Affichage interactif : http://
livedocs.macromedia.com/go/
vous développez des
livedocs_dreamweaver_fr/
extensions à
•
Obtenir le PDF :
Dreamweaver Conçu
www.macromedia.com/go/
pour les utilisateurs
dw_documentation_fr
avancés qui veulent
développer l'interface
de Dreamweaver ou
bien la personnaliser
Tirer le meilleur parti de la documentation Dreamweaver
23
24
Apprentissage de Dreamweaver
Titre
Description/
Utilisateurs visés
Où le trouver
Utilisation de
ColdFusion
Comprend une
sélection des livres
les plus importants
dans le lot de la
documentation
ColdFusion. (Le lot
complet est
disponible sur
LiveDocs.) Conçu
pour quiconque est
intéressé par
ColdFusion, des
développeurs
débutants jusqu'aux
avancés
• 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 • Affichage dans Dreamweaver :
Sélectionner Aide > Référence.
types de manuels de
Pour une liste complète de
référence à propos de
manuels, cliquer sur le menu
HTML, de modèles
déroulant de Book dans le
de serveurs et
Panneau de références.
d'autres sujets, parus
surtout chez O'Reilly
Conçu pour
quiconque a besoin
de plus d'informations
sur la syntaxe de
codage, les concepts
et autres.
Accéder à des informations
complémentaires sur Dreamweaver en
mode interactif
Le tableau suivant récapitule les informations complémentaires disponibles
en mode interactif pour l'apprentissage de Dreamweaver.
Information
Description/
Utilisateurs visés
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éveloppeurs
Dreamweaver
Articles et didacticiels www.macromedia.com/go/
pour vous aider à
dreamweaver_devcenter_fr
améliorer vos
capacités et en
acquérir de nouvelles.
Centre de
documentation
de
Dreamweaver
Obtenir des manuels www.macromedia.com/go/
de produits en format dw_documentation_fr
PDF, listes d'erreurs,
didacticiels et notes
d'accompagnement.
Forums
Macromedia
interactifs
www.macromedia.com/go/
Discussions et
dreamweaver_newsgroup
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.
Formation
Macromedia
Cours comprenant
www.macromedia.com/go/
des travaux pratiques dreamweaver_training_fr
et des scénarios tirés
de la vie réelle.
Tirer le meilleur parti de la documentation Dreamweaver
25
Utilisation du système d’aide de
Dreamweaver
Le système d’aide interactif disponible à partir du menu Aide fournit des
renseignements détaillés sur toutes les tâches que vous pouvez accomplir
avec Dreamweaver. Pour voir une liste de documents disponibles dans
Aide, voir Accès à la documentation Dreamweaver, page 22.
Elle aborde les sujets suivants :
■
Ouvrir Aide, page 26
■
Chercher de l’aide, page 27
■
Utilisation de l’index, page 27
■
Changement de la taille de police, page 28
■
Utilisation de la Page de démarrage, page 28
■
Impression de la documentation Dreamweaver, page 29
■
Discussion portant sur la documentation de Dreamweaver avec LiveDocs,
page 29
Ouvrir Aide
Vous pouvez accéder à l’Aide du produit pendant que vous travaillez avec
Dreamweaver.
Pour ouvrir l’Aide de Dreamweaver :
■
26
Apprentissage de Dreamweaver
Sélectionnez Aide > Aide de Dreamweaver.
Chercher de l’aide
Vous pouvez faire une recherche complète de texte dans l’Aide de
Dreamweaver.
Pour chercher dans l’Aide du produit (Windows) :
1.
Dans l’Aide de Dreamweaver, cliquez sur l’onglet rechercher.
2.
Tapez un mot ou une expression dans la boîte de texte, puis cliquez sur
liste des rubriques.
3.
Double-cliquez sur un sujet dans la liste des résultats afin de l’afficher.
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.
Pour chercher une
expression
spécifique, l’entourer
de double
guillemets.
C ON S E I L
1.
CONSEIL
Pour chercher dans l’Aide du produit (Macintosh) :
Vous pouvez
commencer à taper
un mot-clé dans la
zone de texte pour
atteindre rapidement
l’entrée d’index
recherchée.
Utilisation de l’index
Vous pouvez trouver rapidement de l’information avec l’index.
Pour utiliser l’index (Windows) :
1.
Dans l’Aide de Dreamweaver, cliquez sur l’onglet rechercher.
2.
Faites défiler la liste alphabétique jusqu’à l’entrée d’index voulue, puis
double-cliquez dessus pour afficher l’information pertinente.
Pour utiliser l’index (Macintosh) :
1.
Dans l’Aide de Dreamweaver, cliquez sur le lien à l’Index dans la table
des matières.
2.
Cliquez sur une lettre et faites défiler la liste jusqu’à l’entrée d’index
recherchée.
3.
Cliquez sur un nombre en regard de l’entrée afin d’obtenir l’affichage de
l’information indexée.
Utilisation du système d’aide de Dreamweaver
27
Changement de la taille de police
Vous pouvez modifier la taille de la police utilisée par le système d’aide.
Pour changer la taille de la police dans l’afficheur de l’aide de
Windows :
1.
Ouvrez Internet Explorer.
La taille de la police dans l’afficheur de l’aide de Windows est définie
dans Internet Explorer.
2.
Sélectionner Affichage > Taille de texte, puis sélectionnez une taille.
Pour changer la taille de la police dans l’afficheur de l’aide
d’Apple :
■
Dans aide, sélectionnez Edition > Réduire la taille de la police ou
Edition > Augmenter la taille de la police.
Utilisation de la Page de démarrage
Quand vous démarrez Dreamweaver sans ouvrir un document, la Page de
démarrage de Dreamweaver paraît dans la zone de travail. La Page de
démarrage vous donne un accès rapide aux didacticiels de Dreamweaver
ainsi qu’aux fichiers récents et à Dreamweaver Exchange qui vous permet
d’ajouter des fonctions nouvelles à des caractéristiques de Dreamweaver.
Utilisez la Page de démarrage tout comme une page Web. Cliquez sur
n’importe quelle fonctionnalité pour l’utiliser.
Pour désactiver la Page de démarrage :
1.
Lancer Dreamweaver sans ouvrir de document.
La Page de démarrage apparaît.
2.
28
Apprentissage de Dreamweaver
Cliquez Ne plus afficher
Impression de la documentation
Dreamweaver
Les livres suivants sont disponibles en format PDF sur le site Web de
Macromedia sous www.macromedia.com/go/dw_documentation_fr :
■
Utilisation de Dreamweaver
■
Bien démarrer avec Dreamweaver
■
Extension de Dreamweaver
■
Guide des API de Dreamweaver
Vous pouvez imprimer tout ou partie du PDF sur votre propre imprimante
ou vous pouvez remettre le PDF à une boutique qui fait des copies.
Discussion portant sur la documentation
de Dreamweaver avec LiveDocs
La documentation de Dreamweaver est également disponible de manière
interactive dans le format LiveDocs. La version LiveDocs de l’Aide de
Dreamweaver ressemble beaucoup à l’aide du produit mais elle vous
permet de faire des commentaires sur le contenu des pages d’aide
individuelles. Vous pouvez ajouter des renseignements utiles sur un sujet
donné de Dreamweaver basé sur votre propre expérience ou solliciter l’avis
de collègues concepteurs ou développeurs de Dreamweaver.
Les LiveDocs de Dreamweaver sont disponibles sur
http://livedocs.macromedia.com/go/livedocs_dreamweaver_fr/
Utilisation du système d’aide de Dreamweaver
29
30
Apprentissage de Dreamweaver
CHAPITRE 2
Notions de base de
Dreamweaver
2
Pour tirer le meilleur parti de votre expérience avec Macromedia
Dreamweaver 8, il vous faut comprendre les éléments de base de
l’Dreamweaverespace de travail. Ce chapitre vous présente les éléments de
l’espace de travail les plus importants et les plus utilisés. Il vous explique
comment accomplir quelques tâches de base dans Dreamwork.
Ce chapitre contient les sections suivantes :
Apprendre à connaître l’espace de travail de Dreamweaver 8 . . 31
Personnaliser l’espace de travail de Dreamweaver 8 . . . . . . . . . . 43
Accomplir des tâches élémentaires dans Dreamweaver 8. . . . . . 46
Apprendre à connaître l’espace
de travail de Dreamweaver 8
L’espace de travail de Dreamweaver permet d’afficher des documents et les
propriétés des objets. Il comporte des barres d’outils donnant accès aux
opérations les plus courantes, vous permettant ainsi de modifier
rapidement vos documents.
Cette section vous présente une vue d’ensemble de l’espace de travail de
Dreamweaver 8. Pour des renseignements plus complets sur l’un
quelconque des éléments de l’espace de travail présenté dans cette section,
voir Chapitre 1, Exploration de l'espace de travail dans Utilisation de
Dreamweaver.
La présente section contient les rubriques suivantes :
■
Présentation de l’espace de travail, page 32
■
Fenêtre de document, page 34
■
Barre d’outils de document, page 35
■
Barre d’état, page 36
31
■
Barre Insérer, page 37
■
La barre d’outils de codage, page 39
■
Inspecteur des propriétés, page 40
■
Panneau Fichiers, page 41
■
Panneau Styles CSS, page 42
Présentation de l’espace de travail
Sous Windows, Dreamweaver propose une présentation intégrée en une
seule fenêtre. Dans l’espace de travail intégré, toutes les fenêtres et tous les
panneaux sont rassemblés dans une grande fenêtre d’application.
Barre Insérer
Barre d’outils de document
Sélecteur de balises
32
Notions de base de Dreamweaver
Fenêtre de document
Inspecteur des propriétés
Groupes de
panneaux
Panneau Fichiers
R E MA R Q U E
L’espace de travail Windows dispose également d’une option Codeur qui
ancre les groupes de panneaux sur le côté gauche et affiche par défaut la
fenêtre de document en mode Code. Pour plus d’informations, voir
Utilisation de l'espace de travail orienté en mode Code (Windows
uniquement) dans Utilisation de Dreamweaver. Pour l’utilisation de cette
option, voir Choix de la présentation de l’espace de travail (sous Windows
uniquement), page 43.
Sur le Macintosh, Dreamweaver peut afficher de multiples documents dans
une seule fenêtre avec des onglets qui identifient chacun des documents.
Dreamweaver peut aussi apparaître sous la forme d’une partie de l’espace de
travail flottant dans laquelle chaque document s’affiche dans sa propre
fenêtre. Les groupes de panneaux sont initialement ancrés ensemble, mais
vous pouvez les séparer pour les faire apparaître dans leur propre fenêtre.
Les fenêtres s’alignent automatiquement les unes sur les autres sur les côtés
de l’écran, et sur la fenêtre du document au fur et à mesure que vous les
faites glisser ou que vous les redimensionnez.
Barre Insérer
Barre d’outils du document
Fenêtre de document
Sélecteur de balises
Inspecteur des propriétés
Groupes de
panneaux
Panneau Fichiers
Apprendre à connaître l’espace de travail de Dreamweaver 8
33
Vous pouvez basculer entre différentes mises en forme à la fois dans
Windows et Macintosh. Pour plus d’informations, consultez les sections
Choix de la présentation de l’espace de travail (sous Windows uniquement),
page 43 et Affichage de documents à onglets (Macintosh seulement), page 45.
Fenêtre de document
La fenêtre de document affiche le document actif. Vous pouvez choisir
parmi les modes d’affichage suivants :
Affichage Création est un environnement de création pour la mise en
forme visuelle des pages, l’édition visuelle et le développement rapide
d’applications. Dans ce mode, Dreamweaver affiche une représentation
visuelle entièrement modifiable du document, similaire à la représentation
de la page sur un navigateur.
Affichage Code est
un environnement de codage manuel pour rédiger et
modifier du code HTML, JavaScript et du code de langage de-serveur, tel
que le langage PHP ou CFML (ColdFusion Markup Language), ou tout
autre type de code. Pour plus d’informations, voir Chapitre 20, Codage
dans Dreamweaver dans Utilisation de Dreamweaver.
vous permettent d’obtenir l’affichage Code
et l’affichage Création du document dans une même fenêtre.
Affichages Code et Création
Lorsque la fenêtre de document dispose d’une barre de titre, cette dernière
affiche le titre de la page, et, entre parenthèses, le chemin et le nom de
fichier du document. Dreamweaver affiche un astérisque à la suite du nom
de fichier si vous avez apporté des modifications et que vous ne les avez pas
encore enregistrées.
Lorsque vous agrandissez la fenêtre de document de la présentation de l’espace
de travail intégré (sous Windows uniquement), elle s’affiche sans barre de
titre; le titre de la page, ainsi que le chemin et le nom du fichier s’affichent
alors dans la barre de titre de la fenêtre principale de l’espace de travail.
En outre, lorsqu’une fenêtre de Document est agrandie, des onglets
s’affichent en haut de la zone de la fenêtre de document indiquant les noms
de fichier de tous les documents ouverts. Pour passer à un autre document,
cliquez sur son onglet.
Pour plus d’informations sur l’utilisation de la fenêtre de document, voir
Chapitre 1, Exploration de l'espace de travail dans Utilisation de
Dreamweaver.
34
Notions de base de Dreamweaver
Barre d’outils de document
La barre d’outils de document est composée de boutons qui permettent
d’accéder rapidement aux différents modes d’affichage : Code, Création et
un mode d’affichage partagé pour afficher les modes Code et Création en
même temps.
La barre d’outils contient également plusieurs commandes et options
courantes permettant d’afficher le document et de le transférer d’un site
local vers un site distant.
Mode Code
Modes Code et Création
Aucune erreur du navigateur
Valider le marqueur
Gestion de fichiers
Mode Création
Débogage du serveur
Assistances visuelles
Options d’affichage
Actualiser mode Création
Titre de document
Aperçu/Débogage dans le navigateur
Les options suivantes s’affichent dans la barre d’outils de document :
Mode Code
pour afficher uniquement le mode Code dans la fenêtre de
document.
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.
Modes Code et Création
Mode Création pour afficher uniquement le mode Création dans la fenêtre
de document.
affiche un rapport pour vous aider à déboguer la
page ColdFusion en cours. Le rapport indique les erreurs éventuellement
présentes sur votre page.
Débogage de serveur
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.
Titre de document
Aucune erreur du navigateur
permet de vérifier la compatibilité avec
différents navigateurs.
Apprendre à connaître l’espace de travail de Dreamweaver 8
35
Valider le marqueur
vous permet de valider le document actif ou la balise
sélectionnée.
Gestion des fichiers
pour afficher le menu contextuel correspondant.
pour prévisualiser ou déboguer un
document dans un navigateur. Sélectionnez un navigateur dans le menu
contextuel.
Aperçu/Débogage dans le navigateur
Actualiser le mode Création pour actualiser le mode Création du
document après avoir apporté des modifications dans le mode Code. Les
modifications apportées dans le mode Code n’apparaissent pas
automatiquement dans le mode Création. Vous devez exécuter tout
d’abord certaines opérations, comme enregistrer le fichier ou utiliser ce
bouton.
pour définir les options d’affichage des modes Code
et Création, notamment le mode devant s’afficher au-dessus de l’autre. Les
options du menu s’appliquent à l’affichage actuel : Mode Création, mode
Code ou les deux.
Options d’affichage
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.
Barre d’état
La barre d’état, située au bas de la fenêtre de document, fournit des
informations supplémentaires sur le document en cours de création.
Taille du document et estimation du
temps de téléchargement
Sélecteur de
balises
36
Notions de base de Dreamweaver
Menu contextuel Taille de fenêtre
Définir le facteur de zoom
Outil Zoom
Outil Main
Outil Sélectionner
Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection
active. Cliquez sur une balise quelconque dans la hiérarchie pour la
sélectionner avec son contenu. Cliquez sur <body> pour sélectionner 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 maintenant la touche Option enfoncée (Macintosh) sur
la balise et choisissez une classe ou un ID dans le menu contextuel. Il est
préférable de faire appel au Sélecteur de balises pour sélectionner des balises
car il garantit avec certitude la bonne sélection.
L’outil Main vous permet de cliquer sur le document et de le glisser jusque
dans la fenêtre de document. Cliquer sur l’outil Sélectionner pour
désactiver l’outil Main.
L’outil Zoom et le menu contextuel Définir le facteur de zoom permettent
de définir un taux d’agrandissement pour votre document. Pour plus
d’informations, voir Zoom avant et arrière dans Utilisation de Dreamweaver.
Le menu contextuel Taille de la fenêtre (visible en mode Création
uniquement) permet de redimensionner la fenêtre du document selon des
dimensions prédéfinies ou personnalisées. Pour plus d’informations, voir
Redimensionnement de la fenêtre de document dans Utilisation de
Dreamweaver.
A droite du menu contextuel Taille de fenêtre figurent une estimation de la
taille du document et du temps de téléchargement de la page, ainsi que la
liste de tous les fichiers dépendants, tels que les images et autres fichiers de
données. Pour plus d’informations, voir Vérification des préférences de durée
et de la taille de téléchargement dans Utilisation de Dreamweaver.
Pour plus d’informations sur l’utilisation de la barre d’état, voir Chapitre 1,
Exploration de l'espace de travail dans Utilisation de Dreamweaver.
Barre Insérer
Les boutons qui composent la barre Insérer permettent de créer et d’insérer
des objets, tels que des tableaux, des calques et des images. Lorsque vous
placez le curseur de la souris sur un bouton, une info-bulle indiquant le
nom de ce bouton apparaît.
Apprendre à connaître l’espace de travail de Dreamweaver 8
37
Les boutons sont organisés en plusieurs catégories, sur le côté gauche de la
barre Insérer. D’autres catégories s’affichent lorsque le document
sélectionné contient du code serveur, tel que des documents ASP ou
CFML. Au démarrage de Dreamweaver, la dernière catégorie
utilisée s’ouvre.
Certaines catégories disposent de boutons ouvrant des menus contextuels.
Lorsque vous sélectionnez une option dans l’un d’eux, l’action associée est
attribuée par défaut au bouton. Par exemple, si vous sélectionnez le menu
contextuel du bouton Image, puis Espace réservé pour l’image, la
prochaine fois que vous cliquerez sur le bouton Image, Dreamweaver
insérera un espace réservé pour l’image. Lorsque vous sélectionnez une
nouvelle option dans l’un de ces menus, l’action attribuée par défaut au
bouton change.
La barre Insérer est organisée en différentes catégories, comme suit :
La catégorie Commun permet de créer et d’insérer les objets les plus
couramment utilisés, comme les images et les tableaux.
La catégorie Mise en forme permet d’insérer des tableaux, des balises div,
des calques et des cadres. Vous pouvez également choisir parmi trois types
de tableaux : Standard (par défaut), Tableaux étendus et Mise en forme. Si
le mode Mise en forme est sélectionné, vous pouvez utiliser les outils de
mise en forme de Dreamweaver : Dessiner la cellule de Mise en forme et
Dessiner le tableau de Mise en forme.
La catégorie Formulaires contient
des boutons permettant de créer des
formulaires et d’y insérer des éléments.
La catégorie Texte insère diverses balises de mise en forme de texte et de
liste, telles que b, em, p, h1 et ul.
insère des balises HTML pour les règles horizontales,
le contenu de l’en-tête, les tableaux, les cadres et les scripts.
La catégorie HTML
Les catégories de code serveur sont disponibles uniquement pour les
pages utilisant un langage serveur spécifique comme ASP, ASP.NET,
CFML Basic, CFML Flow, CFML Advanced, JSP et PHP. Ces catégories
proposent des objets de type code serveur que vous pouvez insérer en mode
Code.
38
Notions de base de Dreamweaver
La catégorie Application insère des éléments dynamiques, tels que les jeux
d’enregistrements, les régions répétées et les formulaires d’insertion
d’enregistrements et de mise à jour.
La catégorie éléments Flash
insère des éléments Flash de Macromedia.
La catégorie Favoris permet
de regrouper et d’organiser, dans un espace
commun, les boutons de la barre Insérer que vous utilisez le plus
fréquemment.
Pour plus d’informations sur l’utilisation de la barre d’état, voir Chapitre 1,
Exploration de l'espace de travail dans Utilisation de Dreamweaver.
La barre d’outils de codage
La barre d’outils de codage est composée de boutons qui vous permettent
d’effectuer de nombreuses opérations de codage standard (réduction et
agrandissement des sélections de code, mise en évidence de code non
valide, application et suppression de commentaires, mise en retrait de code,
insertion de fragments de code récemment utilisés, etc.) La barre d’outils
Codage est visible uniquement en mode Code et apparaît verticalement sur
le côté gauche de la fenêtre de Document.
Apprendre à connaître l’espace de travail de Dreamweaver 8
39
Vous ne pouvez pas détacher ni déplacer la barre d’outils de codage mais
vous pouvez la masquer. Pour plus d’informations, voir Affichage des barres
d'outils dans Utilisation de Dreamweaver.
Pour plus d’informations sur l’utilisation de la barre d’outils Codage, voir
Insertion rapide de code avec la barre d'outils de codage dans Utilisation de
Dreamweaver.
Inspecteur des propriétés
L’inspecteur de propriétés permet d’examiner et de modifier les propriétés
les plus fréquentes de l’élément de la page sélectionnée, tel que le texte ou
un objet inséré. Le contenu de l’inspecteur de propriétés varie en fonction
de l’élément sélectionné. Par exemple, si vous sélectionnez une image de la
page, l’inspecteur des propriétés se modifie pour montrer les propriétés de
l’image (telles que le chemin d’accès au fichier, la largeur et la hauteur de
l’image, la bordure autour de l’image, s’il y a lieu, et ainsi de suite).
Par défaut, l’inspecteur de propriétés se trouve au bas de l’espace de travail,
mais vous pouvez l’ancrer en haut de l’espace de travail si vous le souhaitez.
Vous pouvez aussi le laisser flotter dans l’espace de travail. Pour plus
d’informations sur le déplacement de l’inspecteur de propriétés, voir
Ancrage et annulation d'ancrage de panneaux et de groupes de panneaux dans
Utilisation de Dreamweaver.
Pour plus d’informations sur l’utilisation de l’inspecteur de propriétés, voir
Utilisation de l'inspecteur Propriétés dans Utilisation de Dreamweaver.
40
Notions de base de Dreamweaver
Panneau Fichiers
Vous pouvez utiliser les panneaux Fichiers pour afficher et exploiter les
fichiers dans votre site Dreamweaver.
Lorsque vous affichez des sites, des fichiers ou des dossiers dans le panneau
Fichiers, vous pouvez modifier la taille de la zone d’affichage. Vous pouvez
également agrandir ou réduire le panneau Fichiers. Dans sa forme réduite,
le panneau Fichiers affiche le contenu du site local, du site distant ou du
serveur d’évaluation sous la forme d’une liste de fichiers. Sous sa forme
développée, le panneau affiche le site local et soit le site distant, soit le
serveur d’évaluation. Le panneau Fichiers peut également afficher une carte
d’arborescence du site local.
Pour les sites Dreamweaver, il est également possible de personnaliser le
panneau Fichiers en modifiant la vue (site local ou distant) qui s’affiche par
défaut dans le panneau réduit.
Pour plus d’informations sur l’utilisation du panneau Fichiers pour gérer
votre site, voir Chapitre 4, Gestion des fichiers dans Utilisation de
Dreamweaver.
Apprendre à connaître l’espace de travail de Dreamweaver 8
41
Panneau Styles CSS
Il vous permet de suivre les règles CSS et les propriétés qui affectent un
élément de page sélectionné (mode Actuel), ou les règles et les propriétés
qui affectent l’ensemble d’un document (mode Tous). Un bouton bascule
placé sur la partie supérieure du panneau CSS vous permet de passer d’un
mode à l’autre. Le panneau Styles CSS vous permet de modifier les
propriétés CSS dans les deux modes.
Vous pouvez redimensionner l’un quelconque des volets en faisant glisser
les cadres entre les volets.
En mode Actuel, le panneau Styles CSS présente trois volets : un volet
Résumé de la sélection qui présente les propriétés CSS de la sélection en
cours dans le document; un volet Règles qui précise l’emplacement des
propriétés sélectionnées (ou une cascade de règles pour la balise
sélectionnée, selon votre sélection); et un volet Propriétés qui vous permet
de modifier les propriétés CSS de la règle définissant la sélection.
42
Notions de base de Dreamweaver
En mode Tout, le panneau Styles CSS présente deux volets : un volet
Toutes les règles (en haut) et un volet Propriétés (en bas). Le volet Toutes
les règles présente la liste des règles définies dans le document actif, ainsi
que l’ensemble des règles définies dans les feuilles de styles jointes à ce
document. Le volet Propriétés permet de modifier les propriétés CSS de
toute règle sélectionnée dans le volet Toutes les règles.
Toute modification apportée dans le volet Propriétés s’applique
immédiatement, ce qui vous permet d’avoir un aperçu direct de votre
travail.
Pour plus d’informations sur le panneau Styles CSS, voir A propos du
panneau Styles CSS dans Utilisation de Dreamweaver.
Personnaliser l’espace de travail
de Dreamweaver 8
Vous pouvez personnaliser Dreamweaver en fonction de vos besoins, à
l’aide de certaines techniques élémentaires sans avoir à comprendre le code
complexe ni à modifier aucun fichier texte.
La présente section contient les rubriques suivantes :
■
Choix de la présentation de l’espace de travail (sous Windows uniquement),
page 43
■
Affichage de documents à onglets (Macintosh seulement), page 45
■
Affichage et masquage de la page de démarrage, page 45
Choix de la présentation de l’espace de
travail (sous Windows uniquement)
Sous Windows, vous pouvez choisir entre les présentations Création et
Codeur de l’espace de travail. La première fois que vous démarrez
Dreamweaver, une boîte de dialogue vous permet de choisir la présentation
d’un espace de travail. Vous pouvez changer d’espace à tout moment.
Personnaliser l’espace de travail de Dreamweaver 8
43
Pour choisir la présentation de l’espace de travail la première
fois que vous démarrez Dreamweaver :
1.
Sélectionnez l’une des présentations suivantes :
Designer : il s’agit d’un espace de travail intégré utilisant l’interface
MDI (Multiple Document Interface), dans laquelle toutes les fenêtres
de document et tous les panneaux sont rassemblés dans une grande
fenêtre d’application, les groupes de panneaux étant ancrés sur la
droite.
: il s’agit du même espace de travail intégré, mais avec les
groupes de panneaux ancrés sur la gauche, dans une présentation
similaire à celle utilisée par Macromedia HomeSite et Macromedia
ColdFusion Studio. Les fenêtres de document affichent par défaut le
mode Code.
Codeur
REMARQUE
Ces deux espaces de travail autorisent l’ancrage des groupes de
panneaux à droite ou à gauche.
2.
Cliquez sur OK.
Pour changer la présentation de l’espace de travail après le
choix initial :
■
Choisissez Fenêtre > Présentation de l’espace de travail puis
sélectionnez la présentation d’espace de travail que vous préférez.
Outre l’option Codeur et Designer, vous pouvez également sélectionner
l’option Double écran. Si vous possédez un moniteur secondaire, cette
option permet de placer tous les panneaux sur ce dernier et de conserver la
fenêtre Document sur le moniteur principal.
44
Notions de base de Dreamweaver
Affichage de documents à onglets
(Macintosh seulement)
Sur le Macintosh, Dreamweaver peut afficher de multiples documents dans
une seule fenêtre de document avec des onglets qui identifient chacun des
documents. Dreamweaver peut aussi apparaître sous la forme d’une partie
de l’espace de travail flottant dans laquelle chaque document s’affiche dans
sa propre fenêtre.
Pour ouvrir un document à onglet dans une fenêtre séparée :
■
Cliquez-droit ou maintenez la touche Option enfoncée et sélectionnez
Déplacer dans une nouvelle fenêtre dans le menu contextuel.
Pour rassembler des documents épars dans des fenêtres à
onglets :
■
Choisissez Fenêtre > Combiner en onglets.
Pour modifier le paramètre de document à onglet par défaut :
1.
Sélectionnez Dreamweaver > Préférences, puis la catégorie Général.
2.
Sélectionnez ou désélectionnez Ouvrir les documents dans des onglets
et cliquez sur OK.
REMARQUE
Dreamweaver ne modifie pas l’affichage des documents ouverts lorsque
vous modifiez les préférences. En revanche, une fois que vous avez
sélectionné une nouvelle préférence, les documents ouverts s’affichent en
fonction de cette dernière.
Affichage et masquage de la page de
démarrage
La page de démarrage de Dreamweaver s’affiche lorsque vous démarrez
Dreamweaver ou lorsqu’aucun document n’est ouvert. Vous pouvez
masquer ou afficher cette page selon vos besoins. Lorsque la page de
démarrage est masquée et qu’aucun document n’est ouvert, la fenêtre de
document est vide.
Personnaliser l’espace de travail de Dreamweaver 8
45
Pour masquer la page de démarrage :
■
Activez la case Ne plus afficher dans la page de démarrage.
Cette page ne s’affichera plus lors du démarrage de Dreamweaver ni
après l’ouverture et la fermeture d’un document.
Pour afficher la page de démarrage :
1.
Choisissez Edition > Préférences (Windows) ou Dreamweaver >
Préférences (Macintosh).
La boîte de dialogue Préférences contenant la catégorie de préférences
générales s’affiche.
2.
Activez la case Afficher la page de démarrage.
Cette page s’affichera lors du démarrage de Dreamweaver ou après
l’ouverture et la fermeture d’un document.
Accomplir des tâches
élémentaires dans
Dreamweaver 8
Cette section décrit comment accomplir des tâches élémentaires telles que
créer, ouvrir et enregistrer des fichiers. Pour plus d’informations, voir
Chapitre 3, Création et ouverture de documents dans Utilisation de
Dreamweaver.
La présente section contient les rubriques suivantes :
46
■
Présentation des sites Dreamweaver, page 47
■
Créer de nouveaux fichiers dans Dreamweaver, page 48
■
Enregistrer des fichiers dans Dreamweaver, page 49
■
Ouvrir des fichiers dans Dreamweaver, page 49
Notions de base de Dreamweaver
Présentation des sites Dreamweaver
Vous pouvez travailler avec un grand choix de types de fichiers dans
Dreamweaver. Le fichier HTML est celui avec lequel vous travaillerez le
plus souvent. Les fichiers HTML (pour fichiers de type Hypertext Markup
Language) contiennent le langage à base de balises qui se charge d’afficher
une page Web dans un navigateur. Vous pouvez enregistrer les fichiers
HTML avec l’extension .html ou .htm. Dreamweaver enregistre par défaut
les fichiers avec l’extension .html.
Voici quelques autres types de fichiers courants que vous pourriez utiliser
quand vous travaillez avec Dreamweaver.
CSS (ou Cascading Style Sheet) pour des fichiers avec une extension .css.
Ils sont utilisés pour formater le contenu HTML et fixer le positionnement
de divers éléments de page. Pour plus d’informations sur l’utilisation de ces
types de fichiers, voir Description des feuilles de style en cascade dans
Utilisation de Dreamweaver.
(ou Graphics Interchange Format) pour des fichier qui ont une
extension .gif. Ce format graphique est très utilisé dans les dessins
humoristiques, les logos, les graphismes pourvus de zones transparentes et
les animations. Les GIF sont constitués d’un maximum de 256 couleurs.
GIF
JPEG (ou Joint Photographic Experts Group, du nom de l’organisation
qui a créé le format) pour des fichiers qui ont une extension .jpg et qui
correspondent généralement à des photographies ou à des images très
colorées. Ce format est le plus approprié pour les photographies
numériques ou scannées, les images utilisant des textures, les images
pourvues de transitions à gradient de couleurs ainsi que toutes les images
exigeant plus de 256 couleurs.
XML (pour Extensible Markup Language) pour des fichiers avec une
extension de type .xml. Ils contiennent des données brutes qui peuvent être
formatées en utilisant XSL (Extensible Stylesheet Language). Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 36,
Affichage de données XML dans des pages Web dans Utilisation de
Dreamweaver.
(ou Extensible Stylesheet Language) pour des fichiers avec une
extension de type .xsl ou .xslt. Ils sont utilisés pour créer des données XML
que vous voulez afficher sur une page Web. Pour plus d’informations sur
l’utilisation de ces types de fichiers, voir Chapitre 36, Affichage de données
XML dans des pages Web dans Utilisation de Dreamweaver.
XSL
Accomplir des tâches élémentaires dans Dreamweaver 8
47
(ou ColdFusion Markup Language) pour des fichiers avec une
extension de type .cfm. Ils sont utilisés pour traiter des pages dynamiques.
Pour plus d’informations sur l’utilisation de ces types de fichiers, voir
Chapitre 40, Création rapide d'applications ColdFusion dans Utilisation de
Dreamweaver.
CFML
(ou ASP.NET) pour des fichiers qui ont une extension de type
.aspx. Ils sont utilisés pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 41,
Création rapide d'applications ASP.NET dans Utilisation de Dreamweaver.
ASPX
PHP (ou PHP) : les fichiers Hypertext Preprocessor ont une extension du
type .php. Ils sont utilisés pour traiter des pages dynamiques. Pour plus
d’informations sur l’utilisation de ces types de fichiers, voir Chapitre 43,
Création rapide d'applications PHP dans Utilisation de Dreamweaver.
Créer de nouveaux fichiers dans
Dreamweaver
Cette section vous explique comment créer un nouveau document vierge
dans Dreamweaver.
Dans Dreamweaver, vous pouvez aussi créer de nouveaux documents qui
sont basés sur un fichier conçu à partir du produit lui-même ou sur la base
d’un modèle existant. Pour plus d’informations, voir Création de nouveaux
documents dans Utilisation de Dreamweaver.
Pour créer un nouveau document vierge :
1.
Choisissez Fichier > Nouveau.
La boîte de dialogue Nouveau document s’affiche. L’onglet Général est
déjà sélectionné.
2.
Sélectionnez l’une des catégories suivantes dans la liste : Page de base,
page dynamique, page modèle, autre ou jeux de cadres. Sélectionnez
ensuite le type de document que vous souhaitez créer dans la liste de
droite.
Par exemple, sélectionnez Page de base pour créer un document
HTML, ou sélectionnez Page dynamique pour créer un document
ColdFusion ou ASP, et ainsi de suite.
Pour plus d’informations concernant les options de cette boîte de
dialogue, cliquez sur le bouton Aide dans la boîte de dialogue.
48
Notions de base de Dreamweaver
3.
Cliquez sur le bouton Créer.
Le nouveau document s’ouvre dans la fenêtre de document.
4.
Enregistrez le document (voir Enregistrer des fichiers dans Dreamweaver,
page 49).
Enregistrer des fichiers dans
Dreamweaver
Il est nécessaire d’enregistrer tout nouveau document que vous créez.
Pour enregistrer un document :
Choisissez Fichier > Enregistrer.
2.
Dans la boîte de dialogue qui s’affiche, recherchez le dossier où vous
voulez enregistrer le fichier.
3.
Dans la zone de texte Nom de fichier, entrez le nom du fichier.
Evitez les espaces et les caractères spéciaux pour les noms de fichiers et
de dossiers ; les noms de fichiers ne doivent pas commencer par un
chiffre. En particulier, n’utilisez pas de caractères spéciaux (par exemple
é, ç ou ¥) ou de signes de ponctuation (deux points, barres obliques ou
points) dans le nom des fichiers que vous avez l’intention de placer sur
un serveur distant. En effet, la plupart des serveurs transforment ces
caractères lors du transfert, rendant ainsi inopérants les liens vers
ces fichiers.
4.
C O N S E IL
1.
Il est conseillé
d’enregistrer votre
fichier dans un site
Dreamweaver. Pour
plus d’informations,
consultez la section
Chapitre 3,
Didacticiel :
Configuration de
votre site et des
fichiers de projet,
page 53.
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 boîte de dialogue Ouvrir, sélectionnez le fichier et cliquez sur
Ouvrir.
Accomplir des tâches élémentaires dans Dreamweaver 8
49
50
Notions de base de Dreamweaver
2
PARTIE 2
Didacticiels
La deuxième partie de ce manuel contient cinq didacticiels de base qui vous
conduisent à travers les étapes de la construction d’une page Web. Cette
page va devenir la page d’accueil du Cafe Townsend, un restaurant fictif.
Cette partie du manuel contient les sections suivantes :
Didacticiel : Configuration de votre site et des fichiers
de projet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53
Didacticiel : Création d’une mise en forme de page basée
sur un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Didacticiel : Ajout de contenu aux pages . . . . . . . . . . . . . . . . . . . . . 81
Didacticiel : Mise en forme de votre page avec CSS . . . . . . . . . . 109
Didacticiel : Publication de votre site . . . . . . . . . . . . . . . . . . . . . . . . 139
51
CHAPITRE 3
Didacticiel : Configuration de
votre site et des fichiers de projet
3
Ce didacticiel va vous présenter le concept d’un site Macromedia
Dreamweaver 8 et vous expliquer comment configurer les fichiers de projet
pour l’exemple de site Web Cafe Townsend. Dans Dreamweaver, un site se
compose généralement de deux parties : un ensemble de fichiers stockés sur
un ordinateur local (le site local) et un emplacement situé sur un serveur
Web distant vers lequel vous pouvez télécharger ces fichiers afin de les
mettre, le moment venu, à la disposition d’autres utilisateurs (le site
distant). Vous pouvez utiliser les panneaux Fichiers de Dreamweaver pour
afficher et exploiter les fichiers dans votre site.
En général, les personnes créant un site Web à l’aide de Dreamweaver
créent et modifient des pages sur leur disque local et en téléchargent un
exemplaire sur un serveur Web afin de permettre leur visualisation sur le
Web. Dans ce didacticiel, vous apprendrez uniquement à configurer le site
local, de manière à entamer immédiatement la création de pages Web. Par
la suite, quand vous aurez terminé le site Web, vous apprendrez à créer un
site distant de manière à envoyer vos fichiers sur un serveur Web.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Apprenez à utiliser des sites Dreamweaver . . . . . . . . . . . . . . . . . . . 54
Configurez vos fichiers de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Définissez un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
53
Apprenez à utiliser des sites
Dreamweaver
Dans Dreamweaver, le terme « site » peut se rapporter aussi bien à un site
Web qu’à un lieu de stockage local dans lequel sont conservés tous les
documents appartenant à un site Web. Vous devez définir un tel
emplacement avant de créer votre site. Un site Dreamweaver organise tous
les documents associés à votre site Web et vous permet de suivre et de gérer
les liens, de gérer et de partager les fichiers, ainsi que de transférer vos
fichiers de site à un serveur Web.
REMARQUE
Les utilisateurs de Macromedia HomeSite et de ColdFusion Studio
peuvent considérer un site Dreamweaver comme un projet HomeSite ou
Studio.
Un site Dreamweaver se compose de trois parties, selon votre
environnement de travail et le type de site Web en cours de
développement :
Le dossier local correspond à votre répertoire de travail. Dreamweaver
désigne ce dossier comme votre site local. Le dossier local est généralement
un dossier qui se trouve sur votre disque dur.
Le dossier distant est le répertoire dans lequel sont stockés les fichiers,
selon votre environnement, que vous réservez aux évaluations, à la
production, à la collaboration et à la publication. Dreamweaver considère
ce dossier comme votre site distant. Le dossier distant est un dossier qui se
trouve sur l’ordinateur qui fait tourner le serveur Web. Cet ordinateur est
souvent (mais pas toujours) celui qui rend votre site disponible au grand
public sur le Web.
Le dossier des pages dynamiques (dossier du serveur d’évaluation) est
l’emplacement dans lequel Dreamweaver traite les pages dynamiques. Ce
dossier est généralement le même que le dossier distant. Ne vous souciez
pas de ce dossier, sauf si vous développez une application Web. Pour plus
d’informations sur le dossier du serveur d’évaluation, voir Définition du
dossier de traitement des pages dynamiques dans Utilisation de Dreamweaver.
54
Didacticiel : Configuration de votre site et des fichiers de projet
Vous pouvez définir un site Dreamweaver à l’aide de l’assistant de
définition d’un site, qui vous guide tout au long de la procédure de
configuration, ou à l’aide des paramètres avancés de définition du site, qui
vous permettent de configurer individuellement des dossiers locaux,
distants et d’évaluation, si nécessaire. Dans ce didacticiel, vous allez utiliser
les paramètres avancés de la boîte de dialogue de Configuration du site afin
de configurer un dossier local pour vos fichiers de projet. Plus loin dans ce
manuel, vous apprendrez à configurer un dossier distant de manière à
publier vos pages sur un serveur Web et à les rendre accessibles au public.
Pour plus d’informations sur l’utilisation de l’assistant de Configuration du
site, voir Configuration d'un nouveau site Dreamweaver dans Utilisation de
Dreamweaver.
Pour plus d’informations sur la configuration d’un site distant, voir
Chapitre 7, Didacticiel : Publication de votre site.
Pour plus d’informations sur les sites Dreamweaver en général, voir
« Configuration d’un site Dreamweaver » dans l’aide Utilisation de
Dreamweaver.
Configurez vos fichiers de projet
Lorsque vous créez un site local, vous pouvez placer les actifs existants
(images ou autres éléments de contenu) dans le dossier racine du site local
(le dossier « principal » du site). Puis, lorsque vous serez disposé à ajouter
du contenu à vos pages, les actifs seront à cet endroit, prêts à l’emploi.
Les exemples de fichiers inclus avec Dreamweaver contiennent des actifs
pour l’exemple de site à construire avec les didacticiels du guide Bien
démarrer avec Dreamweaver. La première étape dans la création d’un site est
la copie des exemples de fichiers du dossier de l’application Dreamweaver
vers un dossier approprié sur votre disque dur.
1.
Créez un nouveau dossier nommé local_sites sur votre disque dur.
Par exemple, créez un dossier nommé local_sites à l’un des deux
endroits suivants :
■
Sous Windows :
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites.
Configurez vos fichiers de projet
55
■
Sur Macintosh : DD Macintosh/Utilisateurs/
votre_nom_d’utilisateur/Documents/local_sites.
REMARQUE
Sur un Macintosh, votre dossier d’utilisateur contient déjà un dossier
intitulé Sites. N’utilisez pas le dossier Sites en tant que dossier local ; le
dossier Sites correspond au dossier de stockage des pages que vous
souhaitez diffuser lors de l’utilisation du Macintosh comme serveur Web.
2.
Recherchez le dossier cafe_townsend dans le dossier d’application
Dreamweaver sur votre disque dur.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin
du dossier est le suivant :
■
Sous Windows : C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\.
■
Sur Macintosh : DD Macintosh/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend.
A S A VO I R . ..
Présentation des dossiers locaux et distants « racines » Le dossier racine local de votre site
Dreamweaver est souvent le dossier principal, ou le dossier de niveau supérieur, de votre site Web. Il
correspond généralement à un dossier identique sur le site distant (serveur Web). En outre, le dossier
racine définit généralement la première partie de l’URL de votre site Web, celle qui précède le nom de
domaine. Par exemple, si votre dossier racine local se nomme monsiteweb et que vous avez défini un
dossier racine identique sur le site distant, l’URL de votre site Web pourrait être de type « http://
www.yahoo.com/monsiteweb ».
Dans certains cas, le dossier racine local peut ne pas avoir un nom absolument identique à celui se
trouvant sur le site distant. Par exemple, si vous êtes le propriétaire du nom de domaine
www.monsiteweb.com, avec un répertoire racine distant public_html, votre dossier racine local pourrait
quand même s’appeler monsiteweb. Les fichiers dans les répertoires racines locaux et distants seraient
isentiques; il n’y a que les noms de dossiers (public_html sur le site distant et monsiteweb sur l’ordinateur
local) qui seraient différents.
3.
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine
(principal) de votre site Dreamweaver.
56
Didacticiel : Configuration de votre site et des fichiers de projet
Définissez un dossier local
Vous devez définir un dossier local Dreamweaver pour chaque site Web
créé. Ce dossier local est le dossier du disque dur dans lequel seront
stockées les copies de travail des fichiers du site. Ce dossier local est
indispensable au bon fonctionnement de certaines fonctions de
Dreamweaver.
La définition d’un dossier local vous permet également de gérer vos fichiers
et de les transférer vers ou depuis le serveur Web à l’aide de méthodes
différentes de transfert de fichiers.
Vous allez à présent définir comme dossier local le dossier cafe_townsend
que vous avez copié dans le dossier local_sites.
1.
Lancez Dreamweaver, puis sélectionnez Site > Gérer les sites.
La boîte de dialogue Gérer les sites s’affiche.
2.
Cliquez sur le bouton Nouveau, puis sélectionnez Site.
La boîte de dialogue Définition du site s’ouvre.
3.
Si l’assistant (onglet Elémentaire) s’affiche, cliquez sur l’onglet Avancé
et sélectionnez Infos locales dans la liste Catégorie (sélection par défaut).
4.
Dans la zone de texte Nom du site, tapez Cafe Townsend en tant que
nom du site.
5.
Dans la zone de texte Dossier racine local, indiquez le dossier
cafe_townsend que vous avez copié dans le dossier local_sites selon les
instructions de la section précédente.
Vous pouvez cliquer sur l’icône du dossier pour rechercher le dossier et
le sélectionner, ou entrer son chemin d’accès dans la zone de texte
Dossier racine local.
6.
Dans la zone de texte Dossier des images par défaut, indiquez le dossier
d’images qui figure déjà dans le dossier cafe_townsend.
Vous pouvez cliquer sur l’icône du dossier pour rechercher le dossier et
le sélectionner, ou entrer son chemin d’accès dans la zone de texte
Dossier des images par défaut.
Définissez un dossier local
57
La boîte de dialogue Définition d’un site s’affiche comme suit :
7.
Cliquez sur OK.
La boîte de dialogue Gérer les sites s’affiche et présente votre nouveau
site.
8.
58
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Didacticiel : Configuration de votre site et des fichiers de projet
Le panneau Fichiers affiche maintenant le nouveau dossier racine local du
site actuel. La liste de fichiers du panneau Fichiers tiendra lieu de
gestionnaire de fichiers et vous permettra de copier, de coller, de supprimer,
de déplacer et d’ouvrir des fichiers tout comme vous le feriez sur le Bureau
de votre ordinateur.
Pour plus d’informations sur le fonctionnement du panneau Fichiers, voir
Panneau Fichiers, page 41.
Un dossier racine local est désormais défini pour votre site. C’est dans le
dossier racine local de votre ordinateur local que vous conservez les copies
de travail de vos pages Web. Plus tard, si vous désirez publier vos pages et
les rendre disponibles au grand public, il vous faudra définir un dossier
distant, c’est-à-dire un emplacement sur un ordinateur distant qui fait
tourner un serveur Web et qui contiendra des copies des pages publiées de
vos fichiers locaux.
Vous pouvez suivre les autres didacticiels de ce guide pour créer l’exemple
du site Cafe Townsend ou choisir de travailler sur vos propres pages. Après
avoir créé et édité vos pages, définissez un dossier distant sur un serveur et
publiez vos pages. Pour plus d’informations, voir la section Chapitre 7,
Didacticiel : Publication de votre site.
Définissez un dossier local
59
60
Didacticiel : Configuration de votre site et des fichiers de projet
CHAPITRE 4
Didacticiel : Création d’une mise en
forme de page basée sur un tableau
4
Ce didacticiel indique comment créer dans Macromedia Dreamweaver 8
une mise en forme de page basée sur un tableau. La mise en forme
détermine la manière dont votre page s’affichera dans le navigateur, par
exemple où seront placés les menus, les images et le contenu de
Macromedia Flash.
Les tableaux sont très utiles pour présenter des données tabulaires et mettre
en forme du texte et des images dans une page HTML. Vous pouvez
utiliser des tableaux pour créer une mise en forme de manière rapide et
aisée. Dans ce didacticiel, vous allez créer plusieurs tableaux dans un
nouveau document Dreamweaver. Les lignes et les cellules des tableaux
font office de «conteneurs» pour le contenu que vous ajouterez plus tard.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Examinez la maquette détaillée de conception . . . . . . . . . . . . . . . . 62
Créez et enregistrez une nouvelle page . . . . . . . . . . . . . . . . . . . . . . 64
Insérez des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Définissez les propriétés des tableaux . . . . . . . . . . . . . . . . . . . . . . . 69
Insérez un espace réservé pour l’image . . . . . . . . . . . . . . . . . . . . . . 75
Ajoutez de la couleur à la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
61
Examinez la maquette détaillée
de conception
En règle générale, vous n’entamerez pas la création d’un site Web en
ouvrant Dreamweaver puis en mettant immédiatement des pages en forme.
Les premières étapes de la création d’un site Web se déroulent sur une
feuille de papier ou dans une application de graphisme telle que
Macromedia Fireworks. Les concepteurs graphiques créent généralement
une maquette détaillée du site Web de manière à la présenter au client et à
s’assurer que celui-ci approuve les idées initiales relatives au site.
Une maquette détaillée se compose d’un certain nombre d’éléments de
page que le client a demandés pour son site Web. Par exemple, le client
peut demander à avoir un logo en haut de la page, une section de
navigation avec des liens vers les autres pages, une section contenant un
magasin en ligne et un endroit où insérer des clips vidéo. Selon ces
desiderata, le concepteur entame la planification de la mise en forme du
site et crée des esquisses de pages répondant aux attentes du client.
62
Didacticiel : Création d’une mise en forme de page basée sur un tableau
Dans ce didacticiel, vous disposerez de la maquette détaillée complète et
approuvée de Cafe Townsend, un restaurant fictif qui désire disposer d’un
site Web. En tant que concepteur Web, vous êtes chargé de transformer
cette maquette détaillée en une page Web fonctionnelle (dans la plupart des
cas, en collaboration avec d’autres concepteurs graphiques et des
développeurs Flash).
Vous remarquerez que le concepteur graphique vous a fourni une maquette
détaillée de page Web qui comprend un certain nombre de zones de
contenu et quelques idées concernant les graphismes. Dans les sections
suivantes, vous allez employer Dreamweaver pour mettre ce concept en
forme.
Examinez la maquette détaillée de conception
63
Vous pouvez également ouvrir le fichier original de la maquette détaillée si
vous désirez le voir s’afficher sur l’écran de l’ordinateur. Vous pouvez
trouver la maquette, homepage-mockup.jpg, dans le dossier
fireworks_assets du dossier cafe_townsend que vous avez copié sur votre
disque dur dans Chapitre 3, Didacticiel : Configuration de votre site et des
fichiers de projet. Si vous le souhaitez, vous pouvez même l’imprimer pour
l’avoir sous les yeux pendant que vous construisez votre page.
Créez et enregistrez une
nouvelle page
Après avoir configuré un site et consulté les maquettes détaillées, vous
pouvez entamer la création de pages Web. Vous allez tout d’abord créer une
nouvelle page et l’enregistrer dans le dossier racine local cafe_townsend de
votre site Web. Cette page va devenir la page d’accueil du Cafe Townsend,
un restaurant fictif.
Si vous n’avez pas créé ce dossier, il faut absolument le faire avant de
poursuivre. Pour toutes instructions, voir Chapitre 3, Didacticiel :
Configuration de votre site et des fichiers de projet.
1.
Dans Dreamweaver, choisissez Fichier > Nouveau.
2.
Dans l’onglet Général de la boîte de dialogue Nouveau document,
sélectionnez Page de base dans la liste Catégorie, puis cliquez sur Créer.
3.
Sélectionnez Fichier > Enregistrer sous.
4.
Dans la boîte de dialogue Enregistrer sous, accédez au dossier
cafe_townsend que vous avez défini comme dossier racine local du site.
Dans le Chapitre 3, Didacticiel : Configuration de votre site et des fichiers
de projet, vous avez créé ce dossier dans un dossier nommé local_sites.
5.
Tapez index.html dans la zone de texte Nom de fichier puis cliquez sur
Enregistrer.
Le nom du fichier paraît maintenant dans la barre de titre dans la partie
supérieure de la fenêtre de l’application.
64
Didacticiel : Création d’une mise en forme de page basée sur un tableau
6.
Dans la zone texte Titre du document, dans le haut de votre nouveau
document, entrez Cafe Townsend.
Il s’agit du titre de votre page (qui est différent du nom de fichier). Les
visiteurs de votre site verront ce titre dans la barre de titre de la fenêtre
du navigateur lorsqu’ils afficheront la page dans un navigateur Web.
7.
Choisissez Fichier > Enregistrer pour enregistrer votre page.
Insérez des tableaux
Vous allez ensuite ajouter un tableau qui contiendra du texte, des
graphismes et des actifs Macromedia Flash.
1.
Cliquez sur la page pour placer le point d’insertion dans l’angle
supérieur gauche de la page.
2.
Choisissez Insertion > Tableau.
Insérez des tableaux
65
3.
4.
Dans la boîte de dialogue Tableau, procédez de la manière suivante :
■
Entrez 3 dans la zone de texte Lignes.
■
Entrez 1 dans la zone de texte Colonnes.
■
Saisissez 700 dans la zone de texte Largeur du tableau.
■
Sélectionnez Pixels dans le menu déroulant Largeur du tableau.
■
Entrez 0 dans la zone de texte Largeur de la bordure.
■
Saisissez 0 dans la zone de texte Marge intérieure des cellules.
■
Saisissez 0 dans la zone de texte Espacement entre les cellules.
Cliquez sur OK.
Un tableau comportant trois lignes et une colonne s’affiche dans votre
document. Ce tableau fait 700 pixels de large, ne possède pas de
bordure et ses cellules n’ont pas de marge intérieure ni d’espacement.
66
Didacticiel : Création d’une mise en forme de page basée sur un tableau
A S A V O I R . ..
Compléments sur les tableaux Les tableaux sont très utiles pour présenter des données tabulaires et
mettre en forme du texte et des images dans une page HTML. Un tableau comprend au moins une ligne ;
chaque ligne comporte au moins une cellule. Quand vous créez de multiples lignes avec de multiples
cellules, ces dernières forment des colonnes. Techniquement parlant, une cellule est une séparation dans
une ligne horizontale et une colonne est un cumul vertical de ces séparations de cellules.
Dreamweaver affiche la largeur du tableau et de chaque colonne du tableau dans le Sélecteur de tableau
(matérialisé par des lignes vertes) lorsque le tableau est sélectionné ou que le point d’insertion se trouve
dedans.
En regard des largeurs se trouvent les flèches du menu des en-têtes de tableau et des menus des entêtes de colonne. Vous pouvez utiliser les menus pour accéder rapidement à des commandes standard
relatives aux tableaux. Vous pouvez activer ou désactiver l’affichage des largeurs et des menus en
sélectionnant Affichage > Assistance visuelle > Largeurs de tableau.
Un tableau peut posséder des bordures et ses cellules peuvent comporter une marge intérieure, un
espacement ou les deux à la fois. La marge intérieure représente le nombre de pixels entre le contenu de
la cellule et les limites de celle-ci. L’espacement entre les cellules représente le nombre de pixels entre les
cellules contiguës d’un tableau.
Si vous n’attribuez pas de façon explicite de valeurs pour les marges intérieures et l’espacement des
cellules, la plupart des navigateurs affichent le tableau comme si les marges des cellules étaient fixées à 1
et leur espacement à 2. Pour vous assurer que les navigateurs affichent le tableau sans aucune marge ou
espacement, fixez à 0 la marge intérieure des cellules et l’espacement entre les cellules.
Pour plus d’informations sur les tableaux, voir Chapitre 8, Présentation de contenu à l'aide de tableaux
dans Utilisation de Dreamweaver.
5.
Cliquez à droite du tableau pour le désélectionner.
6.
Sélectionnez Insérer > tableau pour insérer un autre tableau.
7.
Dans la boîte de dialogue Tableau, procédez de la manière suivante pour
le deuxième tableau :
8.
■
Entrez 1 dans la zone de texte Lignes.
■
Entrez 3 dans la zone de texte Colonnes.
■
Saisissez 700 dans la zone de texte Largeur du tableau.
■
Sélectionnez Pixels dans le menu déroulant Largeur du tableau.
■
Saisissez 0 dans la zone de texte Largeur de la bordure.
■
Entrez 0 dans la zone de texte Marge intérieure des cellules.
■
Entrez 0 dans la zone de texte Espacement entre les cellules.
Cliquez sur OK.
Insérez des tableaux
67
Un deuxième tableau comportant une ligne et trois colonnes s’affiche
sous le premier tableau.
9.
Cliquez à droite du tableau pour le désélectionner.
10. Insérez
un troisième tableau en sélectionnant Insertion > Tableau et en
entrant les valeurs suivantes dans la boîte de dialogue Tableau :
11.
■
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 bordure.
■
Saisissez 0 dans la zone de texte Marge intérieure des cellules.
■
Saisissez 0 dans la zone de texte Espacement entre les cellules.
Cliquez sur OK.
Un troisième tableau avec une ligne et une colonne s’affiche sous le
deuxième tableau.
Cliquez à droite du tableau pour le désélectionner. Votre page doit
maintenant ressembler à la page suivante :
68
Didacticiel : Création d’une mise en forme de page basée sur un tableau
R E MA R Q U E
Le sélecteur de tableau (indiqué par des lignes vertes) s’affiche après
l’insertion d’un tableau. Vous pouvez masquer le sélecteur de tableau en
cliquant en dehors du tableau. Vous pouvez également désactiver le
Sélecteur de tableau en choisissant Affichage > Assistances visuelles >
Largeurs des tableaux.
Définissez les propriétés des
tableaux
Vous allez à présent définir les propriétés précises des tableaux à l’aide du
mode Tableaux développés. Cette fonctionnalité ajoute temporairement
une marge intérieure et un espacement aux cellules et élargit les bordures
des tableaux afin de faciliter leur manipulation. Cela vous permet
particulièrement de placer le point d’insertion de manière précise sans
sélectionner accidentellement le mauvais tableau ou tout autre contenu du
tableau.
REMARQUE
Lorsque vous avez terminé de définir les propriétés des tableaux en mode
Tableaux développés, vous devez toujours revenir au mode Standard. Le
mode Tableaux développés n’est pas un environnement WYSIWYG
(« what you see is what you get » ou affichage et impression identiques)
de sorte que certaines opérations, telles que le redimensionnement, ne
donneront pas le résultat attendu.
Définissez les propriétés des tableaux
69
1.
REMARQUE
Si vous consultez le guide de démarrage avec la boîte de dialogue Mode
Tableaux développés, cliquez sur OK.
2.
70
Sélectionnez Affichage > Mode Tableau> Mode Tableaux développés.
Cliquez à l’intérieur de la première ligne du premier tableau.
Didacticiel : Création d’une mise en forme de page basée sur un tableau
3.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés), tapez 90 dans la
zone de texte H (hauteur des cellules) et appuyez sur Entrée (Windows)
ou Retour (Macintosh).
REMARQUE
Si vous ne voyez pas la zone de texte H (hauteur des cellules), cliquez sur
la flèche d’extension dans l’angle inférieur droit de l’inspecteur des
propriétés.
4.
Cliquez à l’intérieur de la deuxième ligne du premier tableau.
5.
Dans l’inspecteur des propriétés, tapez 166 dans la zone de texte H
(hauteur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).
6.
Cliquez à l’intérieur de la troisième ligne du premier tableau.
7.
Dans l’inspecteur des propriétés, tapez 24 dans la zone de texte H
(hauteur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).
Définissez les propriétés des tableaux
71
Le premier tableau doit à présent comporter trois lignes de hauteurs
différentes.
Vous allez à présent définir les propriétés du deuxième tableau (celui
qui contient trois colonnes).
8.
72
Cliquez à l’intérieur de la première colonne du deuxième tableau.
Didacticiel : Création d’une mise en forme de page basée sur un tableau
9.
Dans l’inspecteur des propriétés, tapez 140 dans la zone de texte L
(Largeur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).
10. Cliquez
11.
à l’intérieur de la deuxième colonne du deuxième tableau.
Dans l’inspecteur des propriétés, tapez 230 dans la zone de texte L
(Largeur des cellules) et appuyez sur Entrée (Windows) ou Retour
(Macintosh).
12. Fixez
la largeur de la troisième colonne à 330 pixels.
Si le Sélecteur de tableau est activé (Affichage > Assistances visuelles >
Largeurs des tableaux), les valeurs en pixels que vous venez de saisir
s’afficheront au-dessus des colonnes du tableau.
Vous n’allez entrer aucune valeur de hauteur pour les cellules de ce
tableau, car leur hauteur variera en fonction du contenu que vous
ajouterez par la suite.
13.
Enfin, cliquez dans le dernier tableau (celui qui contient une ligne et une
colonne).
Définissez les propriétés des tableaux
73
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).
14. Dans
Votre mise en forme doit maintenant ressembler à la suivante :
74
15.
Cliquez sur le lien [quitter] dans la barre intitulée Mode Tableaux
développés en haut de la fenêtre de document pour revenir au mode
Standard. 7
16.
Enregistrez votre page.
Didacticiel : Création d’une mise en forme de page basée sur un tableau
Insérez un espace réservé pour
l’image
Un espace réservé pour image est un graphisme que vous utilisez jusqu’à ce
que le dessin final soit prêt à être ajouté à une page Web. L’espace réservé
pour l’image est utile lors de la mise en forme de pages Web, car il permet
de placer une image sur une page avant même d’avoir créé l’image.
1.
Dans la fenêtre de document, cliquez à l’intérieur de la première ligne
du premier tableau.
2.
Sélectionnez Insertion > Objets image > Espace réservé pour l’image.
3.
Dans la boîte de dialogue Espace réservé pour l’image, procédez de la
manière suivante :
■
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 choisir un brun rougeâtre
(#993300).
■
Laissez vide la zone de texte secondaire.
A S A V OI R . . .
Une note sur le texte secondaire Un texte secondaire est une description textuelle d’une image sur
une page Web. Il fait partie du code HTML et n’est pas visible sur la page. Il est important de fournir un
texte secondaire pour la plupart de vos images pour que les personnes qui utilisent des lecteurs d’écrans
ou des navigateurs à texte puissent recevoir l’information fournie par l’image. Dans le cas d’un graphisme
représentant une bannière, qui se borne à afficher un logo pour un site Web, il n’est pas essentiel de
fournir un tel texte. Si vous ne remplissez pas le champ de texte secondaire dans la boite de dialogue
Espace réservé pour l’image, Dreamweaver ajoute un attribut alt="" à la balise img. Si vous voulez par la
suite ajouter un texte secondaire à une image, il suffit de la sélectionner et d’entrer le texte désiré dans
l’inspecteur de propriétés. Par exemple, si vous changez le logo plus tard pour inclure un numéro de
téléphone ou une adresse, il est souhaitable de fournir cette information sous forme de texte secondaire.
Insérez un espace réservé pour l’image
75
A S A VO I R .. .
Présentation des espaces réservés pour l’image Un espace réservé pour l’image est un graphisme
que vous emploierez jusqu’à ce que le graphisme définitif soit prêt à être ajouté à la page Web. Il ne s’agit
pas d’une image qui s’affiche dans un navigateur. Avant de publier votre site, remplacez tous les espaces
réservés pour une image que vous avez ajoutés par des fichiers graphiques adaptés au Web, tels que des
images GIF ou JPEG.
Si vous possédez Macromedia Fireworks, vous pouvez créer un nouveau graphisme à partir d’un espace
réservé pour l’image dans Dreamweaver. Lorsque vous sélectionnez l’espace réservé pour l’image et que
vous cliquez sur le bouton Créer de l’inspecteur de propriétés, Fireworks démarre et présente un nouveau
document. La nouvelle image reprend la même taille que celle de l’espace réservé pour l’image. Vous
pouvez ensuite créer et modifier l’image comme bon vous semble, puis remplacer l’espace réservé pour
l’image dans Dreamweaver. Pour obtenir des informations sur la création d’une image dans Fireworks à
partir d’un espace réservé pour l’image, voir Utilisation de Fireworks pour modifier les espaces réservés
pour les images Dreamweaver dans Utilisation de Dreamweaver
4.
Cliquez sur OK.
L’espace réservé pour l’image apparaît à l’intérieur du premier tableau.
Il affiche une étiquette et les attributs de taille de l’image que vous
placerez à cet endroit.
REMARQUE
Lorsqu’ils sont affichés dans un navigateur, le texte de l’étiquette et de la
taille d’un espace réservé pour l’image n’apparaissent pas.
5.
76
Enregistrez votre page.
Didacticiel : Création d’une mise en forme de page basée sur un tableau
Ajoutez de la couleur à la page
Vous allez à présent ajouter de la couleur à la page en définissant les
couleurs de certaines cellules du tableau et de l’arrière-plan de la page.
1.
Cliquez à l’intérieur de la première cellule du tableau à trois colonnes.
2.
Cliquez sur la balise <td> (balise de cellule) dans le sélecteur de balises
afin de sélectionner la cellule.
3.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez dans la
zone de texte Couleur d’arrière-plan.
Cette zone se trouve juste à côté de la zone de couleur Couleur d’ar-pl.
REMARQUE
Si vous ne voyez pas la zone de texte Couleur d’arrière-plan, cliquez sur la
flèche d’extension dans l’angle inférieur droit de l’inspecteur des
propriétés.
Ajoutez de la couleur à la page
77
4.
Dans la zone de texte Couleur d’arrière-plan, entrez la valeur
hexadécimale #993300 puis appuyez sur la touche Entrée (Windows)
ou Retour (Macintosh).
La cellule du tableau prend une couleur brun rougeâtre.
5.
Cliquez à l’intérieur de la deuxième cellule du tableau à trois colonnes.
6.
Cliquez sur la balise <td> (balise de cellule) dans le sélecteur de balises
afin de sélectionner la cellule.
7.
Dans l’inspecteur de propriétés, cliquez dans la zone de texte Couleur
d’arrière-plan, entrez la valeur hexadécimale #F7EEDF puis appuyez sur
la touche Entrée (Windows) ou Retour (Macintosh).
La cellule du tableau prend une couleur brun clair.
8.
Répétez les étapes 5 à 7 pour appliquer également la couleur brun clair
à la troisième cellule du tableau.
9.
Lorsque les trois couleurs sont définies, cliquez une fois en dehors du
tableau pour le désélectionner.
Vous allez ensuite modifier la couleur d’arrière-plan de la page entière en
modifiant les propriétés de la page. La boîte de dialogue Propriétés de la
page permet de définir diverses propriétés, comme la taille et la couleur des
polices de la page, les couleurs des liens visités, les marges de la page, etc.
78
Didacticiel : Création d’une mise en forme de page basée sur un tableau
1.
Choisissez Modifier > Propriétés de la page.
2.
Dans la catégorie Apparence de la boîte de dialogue Propriétés de la
page, cliquez sur la zone de couleur Couleur d’arrière-plan et choisissez
le noir (#000000) dans le sélecteur de couleur.
A S A V OI R . . .
En HTML, les couleurs sont exprimées par leur valeur hexadécimale (par exemple, #FF0000) ou, pour
les principales, par leur nom en anglais (red). Une couleur sécurisée pour le Web est une couleur qui, en
mode 256 couleurs, reste toujours la même dans Netscape Navigator et Microsoft Internet Explorer, sous
Windows comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur
hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux
niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.
Vous pouvez sélectionner des couleurs dans Dreamweaver en entrant des valeurs hexadécimales dans
les zones de texte appropriées ou en sélectionnant une couleur au moyen du sélecteur. Le sélecteur de
couleur emploie la palette sécurisée de 216 couleurs ; la sélection d’une couleur dans cette palette
entraîne l’affichage de la valeur hexadécimale correspondante. Pour utiliser le sélecteur de couleur,
cliquez sur la zone de couleur et utilisez la pipette pour sélectionner une couleur.
Vous pouvez également utiliser le sélecteur de couleur pour faire correspondre des couleurs. Par
exemple, si une image de votre page contient une nuance de bleu précise que vous voulez également
appliquer à l’arrière-plan d’une cellule de tableau, vous pouvez sélectionner cette cellule, cliquer sur la
zone de couleur pour ouvrir le sélecteur de couleur, amener la pipette au-dessus de la couleur bleue de
l’image puis cliquer. Le sélecteur de couleur remplira la zone sélectionnée de la couleur la plus proche de
celle sur laquelle vous avez cliqué à l’aide de la pipette. Toutefois, si vous sélectionnez des couleurs en
procédant de cette manière, il peut arriver que le sélecteur de couleur ne choisisse pas une couleur
sécurisée pour le Web.
Ajoutez de la couleur à la page
79
3.
Cliquez sur OK.
L’arrière-plan de la page devient noir.
4.
Enregistrez votre travail.
La mise en forme de votre page est maintenant terminée. La mise en forme
contient un certain nombre de tableaux qui contiennent des actifs tels que
des images, du texte et des fichiers vidéo Flash (FLV). Dans le prochain
didacticiel, Chapitre 5, Didacticiel : Ajout de contenu aux pages vous
apprendrez à ajouter des actifs à la page en utilisant diverses fonctionnalités
d’insertion qui se trouvent dans Dreamweaver.
80
Didacticiel : Création d’une mise en forme de page basée sur un tableau
CHAPITRE 5
Didacticiel : Ajout de
contenu aux pages
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
ressemblera sur le Web.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Insérez des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Insérez et lisez un fichier Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Insérez une vidéo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Insérez du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Créez des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Aperçu de votre page dans un navigateur . . . . . . . . . . . . . . . . . . . 106
Localisez vos fichiers
Dans ce didacticiel, vous commencerez par la mise en forme basée sur un
tableau (index.html) que vous avez créée dans Chapitre 4, Didacticiel :
Création d’une mise en forme de page basée sur un tableau Si vous n’êtes pas
allé jusqu’au bout de ce didacticiel, vous pouvez le faire avant d’aller plus
loin ou vous pouvez également ouvrir la version terminée du didacticiel et
commencer par là.
81
La version terminée du didacticiel, table_layout.html, se trouve dans le
dossier tutorials_completed du dossier cafe_townsend que vous avez copié
sur votre disque dur au Chapitre 3, Didacticiel : Configuration de votre site
et des fichiers de projet
REMARQUE
82
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.
Didacticiel : Ajout de contenu aux pages
Passez votre tâche en revue
Dans ce didacticiel, vous ajouterez des actifs à la page d’accueil du Cafe
Townsend, un restaurant fictif. Vous apprendrez à ajouter des images, un
fichier Macromedia Flash, un fichier Macromedia Flash Video et du texte.
Quand vous aurez terminé, la page aura l’aspect suivant :
Vous remarquerez que le texte dans la page n’est pas encore mis en forme.
C’est le cas parce que vous apprendrez à le mettre en forme à l’aide de
Cascading Style Sheets (CSS) dans le prochain didacticiel.
Passez votre tâche en revue
83
Vous pouvez trouver les actifs dont vous avez besoin pour ce didacticiel
dans de dossier racine de cafe_townsend que vous avez copié sur votre
disque dur dans Chapitre 3, Didacticiel : Configuration de votre site et des
fichiers de projet Si vous ne l’avez pas fait, il le faut absolument avant de
poursuivre. Le didacticiel vous indique exactement où trouver les actifs au
fur et à mesure que vous avancez.
Insérez des images
Après avoir créé la mise en forme de votre page, vous êtes prêt à ajouter des
actifs à la page. Vous allez commencer par ajouter des images. Vous pouvez
faire appel à plusieurs méthodes pour ajouter des images à une page Web
dans Dreamweaver. Dans cette section, vous allez ajouter quatre images
différentes à la page d’index de Cafe Townsend, au moyen de différentes
méthodes.
Remplacez l’espace réservé pour l’image
1.
REMARQUE
84
Dans Dreamweaver, ouvrez le fichier index.html que vous avez créé au
Chapitre 4, Didacticiel : Création d’une mise en forme de page basée sur un
tableau
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.
Didacticiel : Ajout de contenu aux pages
2.
Double-cliquez sur le l’espace réservé pour l’image, banner_graphic,
dans le haut de la page.
3.
Dans la boîte de dialogue Sélectionnez la source de l’image, accédez au
dossier images du dossier cafe_townsend que vous avez défini comme
dossier racine de votre site.
4.
Sélectionnez le fichier banner_graphic.jpg, puis cliquez sur OK.
Insérez des images
85
Dreamweaver remplace l’espace réservé pour l’image par la bannière de
Cafe Townsend.
5.
Cliquez une fois à l’extérieur du tableau pour le désélectionner.
6.
Enregistrez la page (Fichier > Enregistrer).
Insérez une image à l’aide du menu Insérer.
86
1.
Cliquez à l’intérieur de la troisième ligne du premier tableau (deux lignes
sous la bannière que vous venez d’insérer, juste au-dessus des cellules en
couleur).
2.
Choisissez Insertion > Image.
Didacticiel : Ajout de contenu aux pages
3.
Dans la boîte de dialogue Sélectionnez la source de l’image, accédez au
dossier images du dossier cafe_townsend, sélectionnez le fichier
body_main_header.gif puis cliquez sur OK.
REMARQUE
Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.
Un long graphisme de couleur s’affiche dans la ligne du tableau. Même
s’il ressemble davantage à une couleur d’arrière-plan du tableau qu’à un
graphisme, examinez-le de plus près : vous constaterez qu’il possède des
coins arrondis. Ainsi, l’effet de coin arrondi donnera à la partie
inférieure de votre page un aspect intéressant lorsque vous aurez ajouté
tous les autres actifs.
Insérez des images
87
Insérez une image par glissement
1.
Cliquez dans la dernière ligne du dernier tableau de la page (juste en
dessous des cellules en couleur).
2.
Dans le panneau Fichiers (Fenêtre > Fichiers), recherchez le fichier
body_main_footer.gif (qui se trouve dans le dossier images) et faites-le
glisser jusqu’au point d’insertion dans le dernier tableau.
REMARQUE
Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.
3.
88
Cliquez en dehors du tableau puis enregistrez la page (Fichier >
Enregistrer).
Didacticiel : Ajout de contenu aux pages
Insérez une image à partir du panneau
Actifs
1.
Cliquez dans la colonne centrale du tableau à trois colonnes (la première
cellule de couleur brun clair).
2.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), sélectionnez
Centre dans le menu contextuel Alignement horizontal et sélectionnez
Haut dans le menu contextuel Alignement vertical. Cette action aligne
le contenu de chaque cellule du tableau au centre de la partie supérieure
de la cellule.
REMARQUE
Si vous ne voyez pas les menus contextuels Alignement vertical et
Alignement horizontal, cliquez sur la flèche d’extension dans l’angle
inférieur droit de l’inspecteur des propriétés.
3.
Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour créer
davantage de place.
Insérez des images
89
A S A VO I R .. .
Le panneau Actifs Vous pouvez utiliser le panneau Actifs pour afficher et gérer les actifs de votre site
actif. Ce dernier présente les actifs du site associés au document actif dans la fenêtre du document.
Vous devez définir un site local avant d’afficher les actifs dans le panneau Actifs. Pour plus
d’informations, voir Chapitre 3, Didacticiel : Configuration de votre site et des fichiers de projet ou Utilisation
de Dreamweaver.
Deux vues sont disponibles pour le panneau Actifs :
La liste Site présente tous les actifs de votre site, y compris les couleurs et adresses URL utilisées dans
les documents de votre site.
La liste Favoris affiche uniquement les actifs explicitement sélectionnés. Pour ajouter un actif à la liste
Favoris, sélectionnez-le dans la liste Site puis cliquez sur Ajouter aux favoris dans le menu Options, situé
dans le coin supérieur droit du panneau Fichiers.
Lorsque vous cliquez sur un actif dans le panneau Actifs, il s’affiche dans la zone d’aperçu. Pour modifier
la taille de la zone d’aperçu, faites glisser la ligne qui la sépare des en-têtes des colonnes d’actifs.
Pour plus d’informations, voir Utilisation des actifs dans Utilisation de Dreamweaver.
4.
Cliquez sur l’onglet Actifs du panneau Fichiers ou sélectionnez Fenêtre
> Actifs.
Les actifs du site s’affichent.
Bouton Images
90
5.
Si l’affichage des images n’est pas sélectionné, cliquez sur le bouton
Images pour afficher vos actifs d’image.
6.
Dans le panneau Actifs, sélectionnez le fichier street_sign.jpg.
Didacticiel : Ajout de contenu aux pages
7.
Effectuez l’une des tâches suivantes :
■
Faites glisser le fichier sign.jpg jusqu’au point d’insertion de la
cellule centrale du tableau.
■
Cliquez sur le bouton Insérer dans la partie inférieure du panneau
Actifs.
REMARQUE
Si la boîte de dialogue Attributs d’accessibilté à des balises apparaît,
cliquez sur OK.
Le graphisme street_sign.jpg s’affiche sur la page.
8.
Cliquez une fois à l’extérieur du tableau pour désélectionner l’image.
9.
Enregistrez la page.
Insérez des images
91
Insérez et lisez un fichier Flash
Vous allez ensuite insérer un fichier Flash qui affiche un diaporama de
photos des plats mis en vedette du Cafe Townsend. Le fichier Flash que
vous allez insérer est un fichier de zone de messagerie variable — ou FMA.
Un FMA est une application Flash très commune qui affiche un message
d’information au public. Le message peut varier en fonction des besoins de
l’entreprise. Par exemple, si le Cafe Townsend organise une manifestation,
le FMA pourrait être aisément modifié (sans affecter le reste de la page
Web) pour afficher des informations à son sujet, en lieu et place des plats
mis en vedette.
Pour insérer le fichier Flash, vous devez insérer le code HTML
correspondant dans la page Dreamweaver. La méthode la plus rapide pour
ce faire consiste à insérer le fichier SWF (fichier d’animation Flash exporté)
sur la page. Lorsque vous insérez un fichier SWF dans Dreamweaver, ce
dernier écrit le code HTML Flash nécessaire à votre place.
1.
Lorsque la page index.html est ouverte dans la fenêtre de document
Dreamweaver, cliquez une fois dans la deuxième ligne du premier
tableau.
Il s’agit de la ligne juste en dessous de la bannière que vous avez insérée
dans la section précédente.
2.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), sélectionnez
Centre dans le menu contextuel Alignement horizontal et sélectionnez
Haut dans le menu contextuel Alignement vertical.
Le contenu de la cellule du tableau est ainsi placé au milieu de celle-ci.
REMARQUE
92
Si vous ne voyez pas les menus déroulants Alignement vertical et
Alignement horizontal, cliquez sur la flèche d’extension dans l’angle
inférieur droit de l’inspecteur des propriétés.
Didacticiel : Ajout de contenu aux pages
3.
Sélectionnez Insertion > Médias > Flash.
Dans la boîte de dialogue Sélectionner un fichier, accédez au fichier
flash_fma.swf (il se trouve dans le dossier racine de cafe_townsend de
votre site), sélectionnez ce fichier, puis cliquez sur OK.
Si la boîte de dialogue Attributs d’accessibilté à des balises objet
apparaît, cliquez sur OK.
Insérez et lisez un fichier Flash
93
A S A VO I R .. .
Présentation des fichiers Lorsque vous créez des actifs dans Macromedia Flash, vous travaillez dans
des fichiers FLA, c’est-à-dire le type de fichier par défaut pour l’application Flash. Les fichiers FLA
possèdent l’extension .fla. Par exemple, si vous travaillez sur un logo animé pour un site Web, le fichier
Flash pourrait se nommer animated_logo.fla.
Lorsque vous avez terminé votre travail sur un fichier FLA dans Flash, vous devez l’exporter vers un
format qui pourra être lu dans FlashPlayer sur le Web. Quand vous exportez vos fichiers FLA dans Flash,
ils sont convertis en des fichiers SWF et identifiés par une extension .swf. Ce sont les fichiers SWF (pas
les fichiers FLA) qui lisent le contenu Flash dans un navigateur Web. C’est le type de fichier que vous
devez insérer dans une page Web que vous êtes en train de construire avec Dreamweaver.
Un espace réservé pour du contenu Flash, plutôt qu’une séquence du
FMA lui-même, s’affiche dans la fenêtre de document. Cela se produit
parce que le code HTML pointe vers le fichier SWF flash_fma.swf.
Lorsqu’un utilisateur charge la page index.html, le navigateur lit le
fichier SWF.
4.
L’espace réservé pour le contenu Flash doit toujours être sélectionné
après l’insertion du fichier SWF, pour autant que vous ne cliquiez nulle
part ailleurs sur la page.
Si l’espace réservé pour le contenu Flash n’est pas sélectionné, cliquez
dessus.
5.
R E M AR QU E
94
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur le
bouton Lire.
Si vous ne voyez pas le bouton Lire, cliquez sur la flèche d’extension dans
l’angle inférieur droit de l’inspecteur des propriétés.
Didacticiel : Ajout de contenu aux pages
Dreamweaver lit le fichier Flash dans la fenêtre de document et vous
montre ce que les visiteurs du site verront lorsqu’ils afficheront la page
dans un navigateur.
6.
Dans l’inspecteur de propriété, cliquez sur Arrêt pour interrompre la
lecture du fichier Flash.
7.
Enregistrez la page.
Insérez et lisez un fichier Flash
95
Insérez une vidéo Flash
Ensuite, vous allez insérer un fichier vidéo Flash en utilisant un actif qui
vous sera fourni.
1.
Lorsque la page index.html est ouverte dans la fenêtre Document de
Dreamweaver, cliquez au-dessus du graphisme que vous avez placé dans
la colonne centrale du tableau à trois colonnes.
Dans la section précédente, vous avez créé de l’espace avant d’insérer le
graphisme; c’est à cet endroit que vous devez cliquer.
2.
96
Sélectionnez Insertion > Médias > Flash Video.
Didacticiel : Ajout de contenu aux pages
3.
Dans la boîte de dialogue Insérer une vidéo Flash, choisissez Vidéo en
téléchargement progressif dans le menu Type de vidéo.
A S A VO I R .. .
Présentation de Vidéo Flash
La commande Insérer Flash Video (Insertion d’une vidéo) de
Dreamweaver permet d’insérer des vidéos Flash dans vos pages Web sans employer Flash l’outil de
création. La commande insère dans ces pages un Flash composant vidéo Flash (qui prend en charge
l’affichage du contenu vidéo Flash que vous sélectionnez) ainsi qu’un ensemble de contrôle de lecture qui
apparaissent dans le navigateur.
La commande Insérer vidéo Flash (Insertion d’une vidéo Flash) dispose des options suivantes pour la
fourniture de contenu vidéo aux visiteurs de votre site :
Vidéo en téléchargement progressif télécharge le fichier vidéo Flash (FLV) sur le disque dur des
visiteurs du site puis entame sa lecture. Contrairement aux méthodes traditionnelles de fourniture de
vidéo par « téléchargement et lecture », le téléchargement progressif permet de lancer la lecture du
fichier vidéo avant la fin de son téléchargement.
Vidéo en flux continu diffuse le contenu vidéo Flash et le lit immédiatement sur la page Web. Pour
permettre la diffusion en direct de vidéo sur vos pages Web, vous devez toutefois disposer d’un accès à
Macromedia Flash Communication Server, le seul serveur de diffusion en direct capable de diffuser du
contenu vidéo Flash.
Pour plus d’informations sur l’utilisation de la fenêtre de document, voir Insertion de contenu Flash Video
dans Utilisation de Dreamweaver.
4.
Dans la zone de texte URL, entrez un chemin d’accès relatif au fichier
cafe_townsend_home.flv en cliquant sur le bouton Parcourir, en
accédant au fichier cafe_townsend_home.flv (qui se trouve dans le
dossier racine cafe_townsend de votre site) puis en le sélectionnant.
Insérez une vidéo Flash
97
5.
Sélectionnez Halo Skin 2 dans le menu déroulant Apparence.
Un aperçu de l’apparence sélectionée apparaît sous le menu déroulant
Apparence. L’option Apparence indique l’aspect et le comportement du
composant vidéo Flash qui contiendra le contenu vidéo Flash.
Pour plus d’informations sur la sélection d’apparences pour les
composants vidéo Flash, consultez le site www.macromedia.com/go/
flv_tutorial_fr.
6.
98
Dans les zones de texte Largeur et Hauteur, exécutez les opérations
suivantes :
■
Dans la zone de texte Largeur, saisissez 180.
■
Dans la zone de texte Hauteur, saisissez 135 et appuyez sur Entrée
(Windows) ou Retour (Macinstosh).
Didacticiel : Ajout de contenu aux pages
REMARQUE
‘Total avec enveloppe’ indique la largeur et la hauteur du fichier FLV plus
la largeur et la hauteur de l’apparence sélectionnée.
7.
Conservez les valeurs par défaut des autres options :
permet de préserver le rapport d’aspect entre la largeur et
la hauteur du composant vidéo Flash. Cette option est sélectionnée par
défaut.
Contraindre
Lecture auto détermine si la vidéo doit être lue automatiquement à
l’ouverture de la page Web. Cette option est désélectionnée par défaut.
CONSEIL
Les valeurs affichées dans Largeur et Hauteur indiquent la largeur et la
hauteur du fichier FLV exprimées en pixels. Vous pouvez modifier ces
valeurs à votre guise pour changer la taille du Vidéo Flash sur votre
page Web. Quand vous augmentez les dimensions d’une animation, la
qualité de l’image décroît généralement.
Vous pouvez cliquer
sur Détecter la taille
pour déterminer
avec exactitude la
largeur et la hauteur
du fichier FLV.
Cependant, il peut
arriver que
Dreamweaver ne
puisse pas établir les
dimensions du
fichier FLV. Dans
ces cas-là, il vous
faut saisir vousmême les valeurs de
la largeur et de la
hauteur.
Rembobinage automatique détermine si le contrôle de lecture doit
revenir en position de départ au terme de la lecture de la vidéo. Cette
option est désélectionnée par défaut.
8.
Cliquez sur OK pour fermer la boîte de dialogue et ajouter le contenu
vidéo Flash à votre page Web.
La commande Insérer une vidéo Flash génère un fichier SWF de lecteur
vidéo et un fichier SWF d’habillage qui serviront à afficher votre
contenu vidéo Flash sur une page Web. Il peut être nécessaire de cliquer
sur le bouton Actualiser du panneau Fichiers pour voir les nouveaux
fichiers. Ces fichiers sont stockés dans le même répertoire que le fichier
HTML auquel vous ajoutez du contenu vidéo Flash (dans le cas
présent, le dossier racine cafe_townsend). Quand vous téléchargez vers
le serveur la page HTML qui enchâsse le contenu vidéo Flash, les
fichiers ainsi téléchargés sont dépendants les uns des autres (à condition
que vous ayez cliqué Oui dans la Boîte de dialogue Placer les fichiers
dépendants).
9.
Enregistrez la page.
Insérez une vidéo Flash
99
Insérez du texte
Vous allez à présent ajouter du texte à la page. Vous pouvez taper
directement le texte dans la fenêtre Document de Dreamweaver ou le
copier et le coller à partir d’autres sources (comme un fichier
Microsoft Word ou un fichier texte). Par la suite, vous mettrez le texte en
forme à l’aide de feuilles de style en cascade (CSS).
Insertion du corps de texte
1.
Dans le panneau Fichiers, localisez le fichier sample_text.txt (dans le
dossier racine cafe_townsend root) puis double-cliquez sur l’icône du
fichier pour l’ouvrir dans Dreamweaver.
Cette fenêtre s’affiche en mode Code ; il est impossible de passer en
mode Création (le mode dans lequel vous avez travaillé jusqu’ici), parce
que ce fichier n’est pas un fichier HTML.
2.
Dans la fenêtre de document sample_text.txt, appuyez sur Ctrl+A
(Windows) ou Commande+A (Macintosh) pour sélectionner la totalité
du texte, puis sélectionnez Edition > copier pour copier le texte.
3.
Fermez le fichier sample_text.txt en cliquant sur le X dans le coin
supérieur droit du document.
4.
Dans la fenêtre de document index.html, cliquez dans la troisième
cellule du tableau à trois colonnes (celle qui se trouve à droite de la
colonne contenant le graphisme et la vidéo Flash).
100 Didacticiel : Ajout de contenu aux pages
5.
Sélectionnez Edition > Coller.
Le texte du fichier texte apparaît dans la cellule sélectionnée du tableau.
Suivant la résolution de votre écran, le tableau à trois colonnes s’élargit
pour tenir compte du texte. Ne vous souciez pas de son apparence 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.
6.
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.
Insérez du texte
101
7.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés), choisissez Haut
dans le menu Alignement vertical. Le texte que vous venez de taper est
ainsi aligné sur le haut de la cellule du tableau. Si vous ne voyez 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.
8.
Enregistrez la page.
Insérez du texte pour une barre de
navigation
Vous allez à présent insérer le texte d’une barre de navigation. Toutefois, le
texte ne se présentera pas comme une barre de navigation tant que vous
n’aurez pas défini 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).
102 Didacticiel : Ajout de contenu aux pages
2.
Tapez le terme Cuisine.
3.
Appuyez sur la barre d’espace puis tapez Chef Ipsum.
4.
Répétez l’étape précédente jusqu’à ce que vous ayez entré 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étermine le nombre de mots qui tiendront sur une ligne.
Insérez du texte 103
5.
Tout en maintenant le point d’insertion dans la première cellule du
tableau à trois colonnes, cliquez sur la balise <td> du sélecteur de balises.
6.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés), choisissez Haut
dans le menu Alignement vertical.
Le texte que vous venez de taper est ainsi aligné sur le haut de la cellule
du tableau.
R E MA R Q U E
Si vous ne voyez 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.
7.
Enregistrez votre page.
104 Didacticiel : Ajout de contenu aux pages
Créez des liens
Un lien est une réfé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.
Vous pouvez créer des liens à tout moment du processus de création d’un
site. Dans cette section, vous allez créer 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 pouvez lier à (une page de menu pour Cafe Townsend).
Vous emploierez cette page pour tous les liens de la barre de navigation. Si
vous étiez en train de créer un vrai site, chacun de ces liens accéderait à 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.
2.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), cliquez sur
l’icône de dossier située en regard de la zone de texte Lien.
Créez des liens 105
3.
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).
4.
Cliquez sur la page pour désélectionner 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.
5.
Répétez les étapes précédentes pour lier chaque mot ou ensemble de
mots que vous avez saisis pour la navigation. Vous voulez créer 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 faudrait lier chaque mot de la navigation à une page qui lui
soit propre.
REMARQUE
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 votre lien fonctionne correctement,
vous devez 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.
6.
Enregistrez votre page.
Aperçu de votre page dans un
navigateur
Le mode Création vous donne une vague idée de l’apparence 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ègle générale, chaque
version de navigateur peut afficher des pages HTML plus ou moins
différentes. Dreamweaver fait de son mieux pour présenter des HTML qui
seront semblables quel que soit le navigateur utilisé. Mais il 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.
106 Didacticiel : Ajout de contenu aux 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 déjà actif et il affiche la
page index.
R E M AR QU E
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 apparaît
et vous pouvez ajouter le navigateur de votre choix dans la liste. Pour plus
d’informations, cliquez sur le bouton Aide de la boîte de dialogue
Préférences.
Aperçu de votre page dans un navigateur 107
3.
(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 été prises en compte.
Vous avez maintenant une page Web avec un contenu au complet. L’étape
suivante consiste à mettre en forme une partie du contenu pour le rendre
plus attrayant. Dans le didacticiel suivant, vous apprendrez à utiliser CSS
pour mettre en forme le texte que vous avez ajouté.
108 Didacticiel : Ajout de contenu aux pages
CHAPITRE 6
Didacticiel : Mise en forme
de votre page avec CSS
6
Ce didacticiel vous montre comment mettre du texte en forme dans votre
page en utilisant CSS (Cascading Style Sheets ou Feuilles de style en
cascade) dans Dreamweaver. CSS vous donne une plus grande maîtrise sur
l’aspect de votre page en vous permettant de mettre en forme et de
positionner le texte avec des moyens dont HTML ne dispose pas.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Localisez vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Étude de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Créez une nouvelle feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Explorez le panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Associez une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Créez une nouvelle règle CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Appliquez un style de classe à un texte . . . . . . . . . . . . . . . . . . . . . . 125
Mettez en forme le texte de la barre de navigation . . . . . . . . . . . . 126
(En option) Centrez le contenu de la page . . . . . . . . . . . . . . . . . . . 136
109
Localisez vos fichiers
Dans ce didacticiel, vous commencerez par la page index de Cafe
Townsend à laquelle vous avez ajouté un contenu dans Chapitre 5,
Didacticiel : Ajout de contenu aux pages Si vous n’êtes pas allé jusqu’au bout
de ce didacticiel, vous pouvez le faire avant d’aller 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.
REMARQUE
110
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 didacticiel ne
correspondront pas à ce que vous verrez à l’écran.
Didacticiel : Mise en forme de votre page avec CSS
Passez votre tâche en revue
dans ce didacticiel, vous utiliserez des Feuilles de style en cascade (CSS)
pour mettre en forme le texte sur la page d’accueil de Cafe Townsend, un
restaurant fictif. Vous allez créer différentes sortes de règles CSS pour
mettre en forme le texte du corps. Vous allez également mettre en forme le
texte de lien sur le côté gauche de la page afin de créer une barre de
navigation. Quand vous aurez terminé, la page ressemblera à l’exemple
suivant :
Passez votre tâche en revue
111
Pour plus d’informations sur CSS, passez à la section suivante. Pour
commencer à créer CSS tout de suite, passez à 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 pour mettre une page en forme, vous séparez le contenu de la
présentation. 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éfinissent la présentation du code est dans un autre fichier (une feuille de
style externe) ou dans une autre partie du document HTML (généralement
la <head> section). CSS vous permet 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écifiques.
Par ailleurs, CSS permet de contrôler de nombreuses propriétés que
HTML seul est incapable de gérer. 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 présentation et de
l’aspect de votre page dans différents navigateurs.
Une règle de style CSS se compose de deux entités: le sélecteur et la
déclaration. Le sélecteur est un terme (tel que P, H1, un nom de classe ou
un identifiant) qui identifie l’élément 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électeur tandis que tout ce qui est placé entre les
crochets ({}) correspond à la déclaration :
H1 {
font-size: 16 pixels;
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
crée 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.
112
Didacticiel : Mise en forme de votre page avec CSS
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, créer 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éant en fin de compte la conception désirée.
CSS présente l’avantage majeur d’être facilement mis à jour. Lorsque vous
modifiez une règle CSS en un emplacement, la mise en forme de tous les
documents utilisant ce style reflète automatiquement le nouveau style.
Vous pouvez définir les types de styles suivants dans Dreamweaver :
■
Les règles CSS personnalisées, également appelées styles de classe,
définissent 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ééer 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électeur CSS (styles avancés) redéfinissent la mise en
forme pour une combinaison particulière d’éléments ou pour d’autres
formes du sélecteur admises par CSS (par exemple, le sélecteur td h2
s’applique chaque fois qu’un en-tête h2 apparaît dans une cellule de
tableau. Les styles avancés 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.
Étude de CSS
113
Créez une nouvelle feuille de
style
D’abord, vous allez créer une feuille de style externe qui contient une règle
CSS définissant 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 apparaît dans la fenêtre de document. Les
boutons pour les modes Création 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 affiché dans un navigateur.
114
Didacticiel : Mise en forme de votre page avec CSS
A S A VO I R .. .
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 incorporées) regroupent les règles CSS incluses dans une balise
style dans la section <head> 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, <p style=“font-size: 9px”> définit la taille de la police uniquement pour le paragraphe mis
en forme avec la balise qui contient le style incorporé.
Dreamweaver restitue la plupart des attributs 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 navigateur. Certains attributs de style CSS sont représentés différemment dans Microsoft
Internet Explorer, Netscape Navigator, Opera et Apple Safari.
3.
Enregistrez la page (Fichier > Enregistrer) 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).
4.
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.
Créez une nouvelle feuille de style
115
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 :
C O N S E IL
116
5.
Pour plus
d’informations sur
une quelconque
propriété CSS,
reportez-vous au
guide de référence
O’Reilly qui est livré
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide > Référence et
sélectionnez O’Reilly
- Référence CSS
dans le menu
déroulant du
panneau Référence.
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
<p> dans le code HTML) est mis en forme suivant la règle CSS que vous
avez définie.
Didacticiel : Mise en forme de votre page avec CSS
1.
Dans la fenêtre de document, ouvrez le fichier index.html de Cafe
Townsend. (Vous pouvez 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.
3.
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
pour mettre le paragraphe en forme.
4.
Répétez l’étape 3 pour le deuxième paragraphe.
Associez une feuille de style
117
5.
Dans l’angle inférieur droit du panneau Styles CSS (Fenêtre > Styles
CSS), cliquez sur le bouton Associer feuille de style.
6.
Dans la boîte de dialogue Associer feuille de style externe, cliquez sur
Naviguer et naviguez jusqu’au fichier cafe_townsend.css que vous avez
créé à la section précédente.
7.
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.
118
Didacticiel : Mise en forme de votre page avec CSS
Explorez 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érifiez vos règles 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 <style> et une catégorie cafe_townsend.css.
3.
Cliquez sur plus (+) pour développer la catégorie de balise <style> si elle
est réduite.
4.
Cliquez sur la règle body.
Explorez le panneau Styles CSS
119
La propriété background-color avec une valeur de #000000 apparaît
en bas dans le volet Propriétés.
REMARQUE
Il vous faudra peut-être réduire un autre panneau, tel que le panneau
Fichiers, pour voir le panneau Styles CSS in extenso. Vous pouvez aussi
modifier la longueur du panneau des Styles CSS en faisant glisser les
bordures entre les volets.
Vous définissez la couleur d’arrière-plan pour la page dans Chapitre 4,
Didacticiel : Création d’une mise en forme de page basée sur un tableau en
utilisant la boîte de dialogue Modifier propriétés de page. Quand vous
définissez ainsi des proprétés de page, Dreamweaver rédige un style
CSS qui est interne au document.
5.
Cliquez sur plus (+) pour développer la catégorie cafe_townsend.css.
6.
Cliquez sur la règle p.
120 Didacticiel : Mise en forme de votre page avec CSS
Toutes les propriétés et valeurs que vous avez définies dans la feuille de
style externe pour la règle p apparaissent au bas du volet Propriétés.
7.
Dans le document de fenêtre, cliquez une fois en un endroit quelconque
dans l’un ou l’autre des paragraphes que vous venez de mettre en forme.
8.
Dans le panneau Styles CSS, cliquez sur Sélection dans la partie
supérieure du panneau et vérifiez vos styles CSS. En mode Sélection, le
panneau CSS affiche un récapitulatif des propriétés pour la sélection
active. Les propriétés affichées correspondent aux propriétés pour la
règle p dans la feuille de style externe.
Dans la prochaine section, vous utiliserez le panneau Styles CSS pour créer
une nouvelle règle. Utiliser le panneau Styles CSS pour créer une nouvelle
règle est beaucoup plus facile que saisir la règle à la main, comme vous
l’avez fait quand vous avez créé une feuille de style externe au départ..
Explorez le panneau Styles CSS
121
Créez une nouvelle règle CSS
Dans cette section, vous allez utiliser le panneau Styles CSS pour créer une
règle CSS personnalisée ou un style de classe. Les styles de classe vous
permettent de définir des attributs de style pour une plage ou un bloc de
texte quelconques. Ils peuvent être appliqués à n’importe quelle balise
HTML. Pour plus d’informations sur différents types de règles CSS, voir
Étude de CSS, page 112.
1.
Dans le panneau Styles CSS, cliquez sur Nouvelle règle CSS dans l’angle
inférieur droit du panneau.
2.
Dans la boîte de dialogue Nouvelle règle CSS, Sélectionnez Classe à
partir des options du Sélecteur de types. Il doit être sélectionné par
défaut.
3.
Tapez .gras dans la zone de texte Nom.
Assurez-vous de saisir le point (.) devant le mot « gras ». Tous les styles
de classe sont précédés d’un point (.).
122 Didacticiel : Mise en forme de votre page avec CSS
4.
Sélectionnez cafe_townsend.css du menu déroulant Définir dans. Il doit
être sélectionné par défaut.
5.
Cliquez sur OK.
La boîte de dialogue Définir une règle CSS apparaît, vous indiquant
ainsi que vous êtes en train de créer un style de classe appelé .gras dans
le fichier cafe_townsend.css.
6.
Dans la boîte de dialogue Défintion de règle CSS, procédez de la
manière suivante :
■
Dans la zone de texte Police, tapez Verdana, sans-serif.
■
Dans la zone de texte Taille, tapez 11 et sélectionnez pixels du menu
déroulant tout de suite à droite.
■
Dans la zone de texte Hauteur de ligne, tapez 18 et sélectionnez pixels
du menu déroulant tout de suite à droite.
■
Sélectionnez gras dans le menu déroulant épaisseur.
Créez une nouvelle règle CSS 123
■
Saisissez #990000 dans la zone de texte Couleur.
.
CONSEIL
Pour plus
d’informations sur
une quelconque
propriété CSS,
reportez-vous au
guide de référence
O’Reilly qui est livré
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide > Référence et
sélectionnez O’Reilly
- Référence CSS
dans le menu
déroulant du
panneau Référence.
7.
Cliquez sur OK.
8.
Cliquez sur Tout, situé en haut du panneau Styles CSS.
9.
Cliquez sur le bouton plus (+) en regard de la catégorie
cafe_townsend.css si celle-ci n’est pas développée.
Vous vous apercevrez que Dreamweaver a ajouté le style de classe .gras à
la liste des règles définies dans la feuille de style externe. Si vous cliquez
sur la règle .gras dans le volet Toutes les règles, les propriétés de la règle
apparaissent dans le volet Propriétés. La nouvelle règle apparaît aussi
dans le menu déroulant Style dans l’inspecteur de propriétés.
124 Didacticiel : Mise en forme de votre page avec CSS
Appliquez un style de classe à un
texte
Maintenant que vous avez créé une règle de classe, vous allez l’appliquer à
un texte de paragraphe.
1.
Dans la fenêtre de document, sélectionnez les six premiers mots dans le
texte du premier paragraphe : Le chef visionnaire du Cafe Townsend.
2.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), choisissez gras
dans le menu déroulant Style.
Le style de classe gras est appliqué à votre texte.
3.
Répétez l’étape 2 pour appliquer le style de classe gras aux six premiers
mots du deuxième paragraphe.
4.
Enregistrez votre page.
Appliquez un style de classe à un texte 125
Mettez en forme le texte de la
barre de navigation
Ensuite, vous utiliserez CSS pour appliquer des styles au texte de lien pour
la barre de navigation. Beaucoup de pages Web utilisent les images de
rectangles colorés avec du texte à l’intérieur pour créer une barre de
navigation, mais avec CSS vous n’avez besoin que de texte de lien et un peu
de mise en forme. Utilisation de l’ display:block; et en définissant une
largeur pour le bloc, vous pouvez effectivement créer des rectangles sans
faire appel à des images séparées.
Créez une nouvelle règle pour la navigation
1.
Ouvrez le fichier cafe_townsend.css s’il ne l’est pas déjà ou cliquez sur
son onglet pour le voir.
2.
Définissez une nouvelle règle en saisissant le code suivant dans le fichier,
après le style de classe .gras :
.navigation {
}
Il s’agit d’une règle vide.
Le code dans le fichier devrait ressembler à l’exemple suivant :
126 Didacticiel : Mise en forme de votre page avec CSS
3.
Enregistrez le fichier cafe_townsend.css.
Ensuite, vous utiliserez le panneau de styles CSS pour ajouter des
propriétés à la règle.
4.
Ouvrez le fichier index.html s’il ne l’est pas déjà.
5.
Dans le panneau de Styles CSS, assurez-vous que le mode Tout est
sélectionné, sélectionnez la nouvelle règle .navigation et cliquez sur
Éditer style dans l’angle inférieur droit du panneau.
6.
Dans la boîte de dialogue Défintion de règle CSS, procédez de la
manière suivante :
■
Dans la zone de texte Police, tapez Verdana, sans-serif.
■
Sélectionnez 16 dans le menu déroulant Taille et pixels dans le menu
déroulant juste à droite du menu Taille.
■
Sélectionnez Normal dans le menu déroulant Style.
■
Sélectionnez Aucune dans la liste Décoration.
■
Sélectionnez Gras dans le menu déroulant épaisseur.
■
Entrez #FFFFFF dans la zone de texte Couleur.
Mettez en forme le texte de la barre de navigation 127
C ON S E I L
7.
Pour plus
d’informations sur
une quelconque
propriété CSS,
reportez-vous au
guide de référence
O’Reilly qui est livré
avec Dreamweaver.
Pour afficher le
guide, choisissez
Aide > Référence et
sélectionnez O’Reilly
- Référence CSS
dans le menu
déroulant du
panneau Référence.
Cliquez sur OK.
Ensuite, vous utiliserez le panneau de styles CSS pour ajouter quelques
autres propriétés à la règle .navigation.
128 Didacticiel : Mise en forme de votre page avec CSS
8.
Dans le panneau Styles CSS, assurez-vous que la règle .navigation est
sélectionnée et cliquez sur mode Afficher liste.
Le mode Liste réorganise le volet Propriétés pour afficher une liste
alphabétique de toutes les propriétés disponibles, à la différence du
mode Définir propriétés, le mode précédent, qui n’affiche que celles
que vous avez déjà définies.
9.
Cliquez sur la colonne à la droite de la propriété background-color.
Pour voir le libellé entier d’une propriété, placez la souris au-dessus de
la propriété.
Mettez en forme le texte de la barre de navigation 129
#993300 comme valeur hexadécimale et appuyez sur Entrée
(Windows) ou sur Retour (Macintosh).
10. Tapez
CONSEIL
11.
Pour voir l’effet de
votre travail sur la
feuille de style
externe, laissez
le fichier
cafe_townsend.css
ouvert dans la
fenêtre de document
pendant que vous
travaillez. Quand
vous faites une
sélection dans le
panneau Styles
CSS, vous vous
apercevrez que
Dreamweaver écrit
du code CSS dans la
feuille de style en
même temps.
Localisez la propriété display (il faudra peut-être faire défiler votre
curseur vers le bas), cliquez une fois sur la colonne de droite et
sélectionnez block dans le menu déroulant.
12. Localisez
la propriété padding, cliquez sur la colonne de droite, tapez
8px comme valeur et appuyez sur Entrée (Windows) ou sur Retour
(Macintosh).
13.
Localisez la propriété width, cliquez sur la colonne de droite, tapez 140
dans la première zone de texte, sélectionnez pixels dans le menu
déroulant et appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
130 Didacticiel : Mise en forme de votre page avec CSS
14. Cliquez sur Afficher propriétés définies pour que les propriétés que vous
avez définies apparaissent dans le volet Propriétés.
15.
Cliquez sur le fichier cafe_townsend.css pour l’afficher. Vous verrez que
Dreamweaver a ajouté au fichier toutes les propriétés que vous avez
définies.
16.
Enregistrez le fichier afe_townsend.css et fermez-le.
Vous avez maintenant créé une règle pour mettre le texte de la barre de
navigation en forme. Ensuite, vous appliquerez la règle aux liens
sélectionnés.
Mettez en forme le texte de la barre de navigation
131
Appliquez la règle
1.
La page index.html étant ouverte dans la fenêtre de document, cliquez
sur le mot cuisine de telle sorte que le point d’insertion soit quelque part
dans le mot.
2.
Dans le sélecteur de balises, cliquez sur la balise <a> la plus à droite.
Cette opération sélectionne la totalité du texte pour la balise <a>
spécifiée, ou le lien.
3.
Dans l’inspecteur de propriétés (Fenêtre > Propriétés), choisissez
navigation dans le menu déroulant Style.
Dans la fenêtre de document, l’aspect du texte cuisine change
complètement. Le texte a la forme d’un bouton de barre de navigation
à présent, conformément aux propriétés de la règle .navigation que
vous avez définie dans la section précédente.
132 Didacticiel : Mise en forme de votre page avec CSS
4.
Répétez les étapes 1 à 3 pour chacun des liens individuels dans la barre
de navigation.
Vous devez affecter un style de classe de navigation à chacune des
balises <a> ou du lien, de sorte qu’il est important d’utiliser le sélecteur
de balises pour sélectionner chaque lien individuellement et puis
affecter les styles de classe un à un.
Si vous avez des difficultés dans la mise en forme de texte de lien,
assurez-vous qu’un espace (pas un « retour de chariot ») existe entre
chaque mot du lien. Assurez-vous également que l’espace entre deux
liens n’est pas lui-même lié. Si c’est le cas, sélectionnez soigneusement
l’espace lié, videz la zone de texte Lien dans l’inspecteur de propriétés et
appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
5.
Quand vous aurez fini de mettre en forme tous les mots de la barre de
navigation, enregistrez la page et obtenez un aperçu de votre travail dans
un navigateur (Fichier > Aperçu dans navigateur >...).
Vous pouvez cliquer sur les liens pour vous assurer qu’ils fonctionnent.
Mettez en forme le texte de la barre de navigation 133
Ajoutez un effet de survol
A présent, vous ajouterez un effet de survol pour que la couleur d’arrièreplan des blocs de la barre de navigation change toutes les fois que le
pointeur de la souris passe par-dessus l’un des liens. Pour ajouter un effet de
survol, créez une nouvelle règle qui contient la pseudo-classe :survol
1.
Ouvrez le fichier cafe_townsend.css.
2.
Sélectionnez la règle .navigation entière.
3.
Copiez le texte (Editer > copier).
A S A V O I R . ..
Présentation de la pseudo-classe :survol Une pseudo-classe est un moyen d’avoir un effet sur
certains éléments dans un document HTML, basé non pas sur le code HTML du document lui-même,
mais sur des conditions extérieures appliquées par le navigateur Web. Les pseudo-classes peuvent être
dynamiques dans le sens où un élément de la page peut acquérir ou perdre la pseudo-classe tandis qu’un
utilisateur « interagit » avec le document.
La pseudo-classe :survol crée un changement dans l’élément de page mis en forme quand l’utilisateur
passe la souris par-dessus l’élément. Par exemple, quand la pseudo-classe :survol est ajoutée au style de
classe .navigation (.navigation:survol) pour créer une nouvelle règle, tous les éléments de texte que la
règle .navigation met en forme changent conformément aux propriétés de la règle .navigation:survol.
134 Didacticiel : Mise en forme de votre page avec CSS
4.
Cliquez une fois à la fin de la règle et appuyez sur Entrée (Windows) ou
sur Retour (Macintosh) plusieurs fois pour créer des espaces.
5.
Collez (Edition > coller) le texte copié dans l’espace que vous venez de
créer.
6.
Ajoutez la pseudo-classe :hover au sélecteur .navigation collé, comme
suit :
Mettez en forme le texte de la barre de navigation 135
7.
Dans la nouvelle règle .navigation:hover, remplacez la couleur d’arrièreplan active (#993300) par #D03D03.
8.
Enregistrez le fichier et fermez-le.
9.
Ouvrez le fichier index.html dans la fenêtre de document et obtenez un
aperçu de la page dans un navigateur (Fichier > Aperçu dans
navigateur >...).
Quand vous placez la souris par-dessus un lien quelconque, vous
pouvez voir le nouvel effet de survol.
(En option) Centrez le contenu
de la page
Enfin, vous utiliserez le sélecteur de balises pour sélectionner tout le
HTML du document et centrer son contenu.
REMARQUE
Quelques navigateurs, comme l’Explorateur Internet 6, centre le texte de
la page dans le contexte des cellules du tableau quand vous utilisez la
méthode utilisée dans cette section. Si le contenu dans l’aperçu de la page
dans le navigateur ne vous plaît pas, vous pouvez sauter cette section et
laisser le contenu de la page aligné à gauche.
136 Didacticiel : Mise en forme de votre page avec CSS
1.
Avec la page index.html ouverte dans la fenêtre de document, cliquez
sur la balise <body> dans le sélecteur de balises.
En cliquant sur cette balise, on sélectionne tout entre l’ouverture et la
fermeture des balises <body> de la fenêtre de document. Pour voir la
sélection, cliquez sur mode Code dans la partie supérieure de la fenêtre
de document.
(En option) Centrez le contenu de la page 137
2.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur le
bouton Aligner au centre.
Dreamweaver insère des balises CSS <div> qui centrent l’ensemble du
contenu de la page. En mode Création, des pointillés entourent la zone
qui fait l’objet du centrage des balises <div>.
3.
Enregistrez la page.
Votre page est maintenant terminée. La dernière tâche dans la construction
de votre site Web consiste à publier la page. Pour ce faire, vous devez
définir un dossier sur un site distant et télécharger vos fichiers dans ce
dossier vers ce serveur. Pour obtenir des instructions, passez au didacticiel
suivant.
138 Didacticiel : Mise en forme de votre page avec CSS
CHAPITRE 7
Didacticiel : Publication
de votre site
7
Ce didacticiel vous montre comment configurer un site distant avec
Macromedia Dreamweaver 8 et publier vos pages web. Un site distant est
souvent un emplacement dans un ordinateur distant qui fait tourner un
serveur Web et qui conserve des copies de vos fichiers locaux. Les
utilisateurs accèdent au site distant qui tourne sur le serveur Web quand ils
visualisent vos pages dans un explorateur.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Étudiez les sites distants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Configurez un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Téléchargez vos fichiers locaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Résolution des problèmes de configuration du dossier
distant (en option) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Étudiez les sites distants
L’étape suivante de création d’un site consiste à le publier en téléchargeant
les fichiers vers un dossier distant. Un dossier distant est l’emplacement
dans lequel vous conservez vos 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.
Avant de poursuivre, vous devez pouvoir accéder à un serveur Web distant
(le serveur de votre fournisseur d’accès Internet, un serveur appartenant à
un client pour lequel vous travaillez, un serveur intranet de votre société ou
un serveur IIS sur un ordinateur Windows). Si vous ne pouvez accéder à un
serveur de ce type, contactez votre fournisseur d’accès Internet, votre client
ou votre administrateur système.
139
Vous pouvez également choisir d’exécuter un serveur Web sur votre
ordinateur local, par exemple, IIS (Windows) ou Apache (Macintosh).
Pour plus d’informations sur la configuration d’un serveur Web sur votre
ordinateur local, voir Annexe B, Installation d’un serveur Web, page 251.
Les marches à suivre décrites dans ce didacticiel aboutissent à de meilleurs
résultats si votre dossier racine distant est vide. S’il contient déjà des
fichiers, créez un dossier vide dans votre site distant (sur le serveur) et
utilisez ce dernier comme dossier racine distant.
Vous aurez également besoin d’un site local configuré avant de poursuivre.
Pour plus d’informations, consultez la section Didacticiel : Configuration de
votre site et des fichiers de projet, page 53.
Pour plus d’informations sur les sites Dreamweaver, voir Chapitre 2,
Configuration d'un site Dreamweaver dans Utilisation de Dreamweaver.
Configurez un dossier distant
Vous allez maintenant configurer un dossier distant pour pouvoir publier
vos pages Web. Il porte le même nom que le dossier local car votre site
distant sera une copie conforme de votre site local. Cela signifie que les
fichiers et les sous-dossiers que vous transférerez dans votre dossier distant
seront des copies des fichiers et des sous-dossiers créés localement.
1.
Dans votre site distant (sur le serveur), créez un dossier vide dans le
dossier racine Web pour le serveur.
Appelez-le cafe_townsend (du même nom que votre dossier racine
local).
140 Didacticiel : Publication de votre site
A S A V OI R . . .
Création d’un dossier distant avec Dreamweaver Si Dreamweaver constitue votre seul moyen
d’accès au serveur distant, vous ne serez pas en mesure de créer un fichier vide dessus tant que vous
n’aurez pas terminé les paramétrages dans Dreamweaver et établi une connexion. Si c’est le cas, vous
pouvez soit définir votre répertoire hôte comme étant votre dossier distant, soit créer un dossier distant
après avoir établi une connexion avec le serveur. Dans un cas comme dans l’autre, continuez à suivre les
les instructions de ce didacticiel jusqu’à ce que vous soyez connecté au serveur distant. Une fois la
connexion obtenue, vous pouvez utiliser le panneau Fichiers Dreamweaver pour créer un nouveau
dossier distant.
Quand vous avez cette connexion avec un serveur distant, le panneau Fichiers affiche tous les fichiers sur
ce serveur en Mode distant (tout comme le Mode local avec les fichiers locaux de votre ordinateur). Pour
afficher le Mode distant, sélectionnez-le dans le menu déroulant dans la partie supérieure du panneau
Fichiers ou cliquez sur Développer/Réduire dans la barre d’outils du panneau Fichiers. En cliquant sur
Développer/Réduire, le panneau Fichiers affiche à la fois le Mode local et le Mode distant.
Pour ajouter un fichier vide dans le Mode distant, affichez d’abord le Mode distant en utilisant l’une des
méthodes décrites auparavant. (Si vous ne voyez pas votre connexion, cliquez sur Actualiser dans la
barre d’outils du panneau Fichiers.) Quand vous avez constaté que vous êtes connecté au serveur Web,
cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Option enfoncée
(Macintosh) dans le Mode distant et sélectionnez Nouveau dossier.
Bouton Actualiser
Développer/Réduire
Pour plus d’informations, voir Chapitre 4, Gestion des fichiers dans Utilisation de Dreamweaver.
2.
Dans Dreamweaver, sélectionnez Site > Gérer les sites.
3.
Dans la boîte de dialogue Gérer les sites, sélectionnez le site Cafe
Townsend.
Si vous n’avez pas défini le site Cafe Townsend, créez un dossier local
pour le site avant de poursuivre. Pour plus d’informations, consultez la
section Didacticiel : Configuration de votre site et des fichiers de projet,
page 53.
4.
Cliquez sur Edition.
5.
Dans la boîte de dialogue Définition de site, cliquez sur l’onglet Avancé
si les réglages correspondants ne paraissent pas.
6.
Sélectionnez la catégorie Info distante dans la liste de gauche.
Configurez un dossier distant
141
7.
Sélectionnez une option d’accès.
Les méthodes les plus courantes de connexion à un serveur sur Internet
sont le FTP et le SFTP. La méthode la plus courante de connexion à un
serveur sur votre intranet ou à votre ordinateur local (si celui-ci est
utilisé comme serveur Web) est Local/Réseau. Dans l’incertitude,
demandez à l’administrateur système du serveur.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de
dialogue.
8.
Si vous sélectionnez FTP, utilisez les options suivantes :
■
Saisissez le nom d’hôte du serveur (par exemple,
ftp.macromedia.com).
■
Dans la zone de texte du répertoire hôte, saisissez le chemin d’accès
sur le serveur du dossier racine FTP à celui du site distant
(cafe_townsend). En cas de doute, consultez votre administrateur
système.
Dans bien des cas, cette zone de texte doit rester vierge.
■
Indiquez votre nom d’utilisateur et votre mot de passe dans les
zones appropriées.
■
Si votre serveur prend en charge le SFTP, sélectionnez l’option
Utiliser Secure FTP (SFTP).
■
Cliquez sur Tester pour tester vos paramètres de connexion.
■
En cas d’échec, consultez votre administrateur système.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de
dialogue.
9.
Si vous sélectionnez Local/Réseau, cliquez sur l’icône de dossier se
trouvant près de la zone de texte pour rechercher le dossier racine du site
distant.
Pour plus d’informations, cliquez sur le bouton Aide de la boîte de
dialogue.
10. Cliquez
sur OK.
Dreamweaver crée une connexion avec le dossier distant.
11.
142 Didacticiel : Publication de votre site
Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Téléchargez vos fichiers locaux
Après avoir défini vos dossiers locaux et distants, vous pouvez transférer vos
fichiers du dossier local vers le serveur Web. Il est impératif de télécharger
vos pages pour les rendre accessibles, même si le serveur Web est exécuté
sur votre ordinateur local.
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier
racine local du site (cafe_townsend).
2.
Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers.
.
3.
Quand Dreamweaver vous demande si vous voulez placer le site entier,
cliquez sur OK.
Dreamweaver copie tous les fichiers dans le dossier distant défini dans
Configurez un dossier distant, page 140. Cette opération peut prendre
quelque temps puisque Dreamweaver doit télécharger tous les fichiers
du site vers le serveur distant.
4.
Ouvrez votre site distant dans un navigateur pour vous assurer que le
transfert s’est bien déroulé.
Téléchargez vos fichiers locaux 143
Résolution des problèmes de
configuration du dossier distant
(en option)
Un serveur Web peut être configuré de différentes façons. La liste suivante
vise à vous expliquer certains problèmes courants que vous pouvez avoir en
configurant un dossier distant et à vous aider à les résoudre :
■
La mise en oeuvre FTP de Dreamweaver peut ne pas fonctionner
correctement avec certains serveurs proxy, pare-feu multiniveaux et
autres formes d’accès indirect à un serveur.
Si vous avez des problèmes d’accès en FTP, demandez l’aide de votre
administrateur système.
■
Pour la mise en oeuvre FTP de Dreamweaver, il est indispensable de se
connecter au dossier racine du système distant (Dans de nombreuses
applications, vous pouvez vous connecter à n’importe quel répertoire
distant, puis naviguer dans le système de fichiers distants pour
rechercher un répertoire).
Veillez à indiquer le dossier racine du système distant comme répertoire
hôte.
Si vous avez des problèmes de connexion et avez spécifié le répertoire
hôte avec une seule barre oblique (/), c’est peut-être qu’il vous faut
spécifier un chemin relatif entre le répertoire auquel vous vous
connectez et le dossier racine distant.
Si, par exemple, le dossier racine distant est un répertoire de niveau
supérieur, vous devez parfois spécifier ../../ pour le répertoire hôte.
■
Par ailleurs, les noms de dossiers et de fichiers qui contiennent des
espaces ou des caractères spéciaux peuvent souvent occasionner des
problèmes à l’occasion d’un transfert sur un site distant.
Utilisez des traits de soulignement à la place des espaces, et évitez, dans
la mesure du possible, d’utiliser des caractères spéciaux pour les noms
de fichiers et de dossiers. En particulier, les deux points (:), barres
obliques, virgules et apostrophes sont à éviter dans les noms de fichiers
et de dossiers. Il arrive que la présence de caractères spéciaux dans les
noms de fichiers ou de dossiers empêche Dreamweaver de créer une
carte du site.
144 Didacticiel : Publication de votre site
■
En cas de problème avec un nom de fichier long, raccourcissez ce nom.
Sur Macintosh, les noms de fichiers ne peuvent pas compter plus de
31 caractères.
■
Notez que certains serveurs utilisent ce qui est appelé, suivant le
système d’exploitation, des liens symboliques (Unix), des raccourcis
(Windows) ou des alias (Macintosh), pour connecter un dossier situé
en un point du disque du serveur à un autre dossier situé ailleurs.
Par exemple, le sous-répertoire public_html de votre répertoire
principal sur le serveur peut n’être qu’un simple lien pointant sur une
toute autre partie du serveur. Dans la plupart des cas, ces alias n’ont pas
d’effet négatif sur votre capacité à vous connecter au dossier ou
répertoire approprié, mais si vous ne pouvez vous connecter qu’à une
partie du serveur, il s’agit peut-être d’un problème d’alias.
■
Si vous découvrez un message d’erreur du type « impossible de placer le
fichier », votre dossier distant peut être saturé. Pour plus
d’informations, consultez le journal FTP.
REMARQUE
En règle générale, si vous avez un problème avec un transfert FTP,
consultez le journal FTP en sélectionnant Site > Avancé > Journal FTP.
Résolution des problèmes de configuration du dossier distant (en option) 145
146 Didacticiel : Publication de votre site
3
PARTIE 3
Didacticiels avancés
La troisième partie de ce manuel contient des didacticiels qui vous
présentent des fonctionnalités plus avancées de Dreamweaver. Vous n’avez
pas besoin de connaître HTML ou d’autres langages au préalable afin de
terminer ces didacticiels. Prenez note cependant qu’ils sont plus complexes
que les précédents.
Cette partie du manuel contient les sections suivantes :
Didacticiel : Travail avec du code . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Didacticiel : Création d’une mise en forme de page basée
sur CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Didacticiel : Affichage de données XML . . . . . . . . . . . . . . . . . . . . . 189
Didacticiel : Développement d’une application Web . . . . . . . . . . 213
147
CHAPITRE 8
Didacticiel : Travail avec
du code
8
Au fur et à mesure que vous ajoutez du texte, des images ou un autre
contenu, Dreamweaver 8 génère du code HTML. Le présent didacticiel
indique comment utiliser le mode Code pour afficher, ajouter et modifier
manuellement le code sous-jacent d’un document.
Après avoir configuré votre site et terminé les didacticiels précédents, vous
pouvez continuer à travailler dans le même fichier index.html.
Si vous n’avez pas terminé les didacticiels précédents, vous pouvez toutefois
passer à celui-ci. Tout d’abord, configurez votre site en suivant les instructions
de Didacticiel : Configuration de votre site et des fichiers de projet, page 53.
Ensuite, utilisez le fichier index_code.html dans le dossier cafe_townsend/
completed_files/dreamweaver pour en terminer avec ce didacticiel.
index_code.html est une copie conforme du fichier index.html terminé du
Chapitre 6, Didacticiel : Mise en forme de votre page avec CSS, page 109.
REMARQUE
Si vous entamez ce didacticiel avec le fichier table_layout.html terminé, au
lieu du fichier index.html du Chapitre 6, Didacticiel : Mise en forme de votre
page avec CSS, page 109, certaines étapes et illustrations du didacticiel
ne correspondront pas à ce que vous verrez à l’écran.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
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
Imprimez votre code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
149
Affichez le code
Dans Dreamweaver, vous pouvez afficher votre page dans les deux modes
suivants : mode Création (affichage du document comme il apparaît dans
un navigateur) ou mode Code (affichage du code HTML). Vous pouvez
également afficher ces deux modes Code et Design simultanément à
l’écran.
1.
Veillez à ce que la page index.html soit ouverte dans la fenêtre de
document.
REMARQUE
Si vous n’avez pas terminé le fichier index.html en suivant les indications
des didacticiels précédents, voir l’introduction de ce didacticiel sur la
manière de poursuivre.
2.
Dans la barre d’outils du document, cliquez sur le bouton Afficher les
modes Code et Création (intitulé Fractionner).
REMARQUE
Si la barre d’outils du document n’apparaît pas, sélectionnez Affichage >
Barres d’outils > Document.
150 Didacticiel : Travail avec du code
La fenêtre se divise en deux parties : le mode Création et le code
HTML sous-jacent.
Bouton
Actualiser
Vous pouvez alors modifier le code dans le mode Code. Les
modifications que vous avez faites au code n’apparaissent pas en mode
Création tant que vous n’avez pas cliqué sur Actualiser dans la barre
d’outils Document ou sur un endroit quelconque dans le mode
Création.
3.
(En option) Pour n’afficher que le mode Création, cliquez sur mode
Création.
4.
(En option) Pour n’afficher que le mode Code, cliquez sur mode Code.
Vous pouvez travailler dans le mode qui vous convient le mieux. La plupart
des didacticiels figurant dans ce guide supposent que vous travailliez en
mode Création.
Affichez le code
151
Activez l’espace de travail de
codage (Windows uniquement)
Si vous ne l’avez pas déjà fait à l’installation, vous pouvez faire en sorte que
votre espace de travail Windows ressemble plus aux environnements de
codage bien connus de Macromedia HomeSite et ColdFusion Studio.
REMARQUE
Les utilisateurs Macintosh ne peuvent pas modifier l’espace de travail.
Pour passer à l’espace de travail de codage :
■
Choisissez Fenêtre > Présentation de l’espace de travail > Codeur.
Ajoutez une balise à l’aide du
sélecteur de balises
Ensuite, vous utiliserez le sélecteur de balises pour entourer une balise div
autour de l’une des images sur la page. Vous pouvez affecter à votre guise
des marges, des bordures ou des couleurs à l’image. Cette opération peut
s’effectuer de différentes manières : la leçon ci-dessous explique le
fonctionnement du sélecteur de balises, qui vous permet d’insérer toutes
sortes de balises et d’indiquer les valeurs d’attributs correspondantes.
1.
152 Didacticiel : Travail avec du code
Ouvrez le fichier index.html s’il ne l’est pas déjà.
2.
Dans Mode création, cliquez sur la bannière Cafe Townsend
(banner_graphic.jpg) pour la sélectionner.
3.
Passez à mode Code en cliquant dessus dans la barre d’outils de
document ou en sélectionnant Mode > mode Code.
Vous verrez que le code pour l’image sélectionnée est activée dans mode
Code. Veillez à bien sélectionner toute la balise img, y compris les
crochets.
4.
Sélectionnez Affichage > Options d’affichage de code > Retour
automatique à la ligne pour activer cette option, si elle ne l’est pas.
Ajoutez une balise à l’aide du sélecteur de balises 153
5.
Cliquez sur le texte avec le bouton droit de la souris (Windows) ou tout
en maintenant la touche Contrôle enfoncée (Macintosh), puis choisissez
Insérer la balise dans le menu contextuel.
Le Sélecteur de balises s’affiche.
6.
Dans le sélecteur de balises, développez la catégorie Balises HTML, puis
la sous-catégorie Formatage et mise en forme sélectionnez ensuite
Général.
Une liste de noms de balise s’affiche dans le volet de droite ; dans cette
liste, sélectionnez la balise div.
REMARQUE
Vous pouvez également sélectionner la catégorie Balises HTML, puis
sélectionner directement la balise div dans le volet de droite sans développer la
sous-catégorie Formatage et mise en forme.
7.
Cliquez sur Insérer.
L’éditeur de balises s’ouvre pour la balise div.
154 Didacticiel : Travail avec du code
8.
Dans cet éditeur de balises, sélectionnez la catégorie Feuille de style/
Accessibilité, puis saisissez bannière dans la zone de texte ID.
9.
Cliquez sur OK pour fermer l’éditeur de balises et insérer la balise.
Dreamweaver insère la balise div dans votre page, de part et d’autre de
la balise correspondant à l’image.
10. Cliquez
11.
sur Fermer pour fermer le sélecteur de balises.
Enregistrez votre page.
Modifiez une balise
Vous allez à présent apprendre à utiliser l’inspecteur de balises pour
apporter rapidement des modifications aux attributs d’une balise.
L’inspecteur de balises affiche les attributs de la balise sélectionnée dans la
fenêtre de document.
1.
Ouvrez le fichier index.html en mode Code, s’il n’est pas déjà ouvert.
2.
Ouvrez l’inspecteur de balises en sélectionnant Fenêtre > Inspecteur de
balises, s’il n’est pas déjà ouvert.
3.
Sélectionnez l’onglet Attributs.
Modifiez une balise 155
4.
Cliquez sur mode Affichage de listes dans l’inspecteur de balises pour
afficher par ordre alphabétique tous les attributs d’une balise
sélectionnée.
5.
Dans le mode Code de la fenêtre de document, cliquez quelque part
entre les crochets d’ouverture et de fermeture d’une balise.
L’onglet Attributs de l’inspecteur de balises affiche les informations
concernant les attributs HTML de la balise.
6.
Toujours en mode Code, recherchez la balise img correspondant à la
bannière banner_graphic.jpg au haut de la page, puis cliquez dessus.
L’onglet Attributs de l’inspecteur de balises affiche les informations
concernant les attributs de la balise img.
156 Didacticiel : Travail avec du code
7.
Dans l’inspecteur de balises, cliquez sur la zone de texte vide située près
de l’attribut alt, puis tapez Cafe Townsend ; appuyez ensuite sur la
touche Entrée (Windows) ou Retour (Macintosh).
Dreamweaver affiche la nouvelle valeur dans l’inspecteur de balises et
modifie le code dans la fenêtre de document.
8.
Enregistrez votre page.
Consultez des informations
relatives à une balise
Pour obtenir de l’aide sur les attributs et les valeurs des balises, vous pouvez
consulter des informations de référence dans Dreamweaver.
1.
Ouvrez le fichier index.html en mode Code, s’il n’est pas déjà ouvert.
2.
Dans la fenêtre de document, sélectionnez le nom d’attribut alt (et non
sa valeur) dans une balise img.
Consultez des informations relatives à une balise 157
3.
Cliquez sur le texte sélectionné avec le bouton droit de la souris
(Windows) ou tout en maintenant la touche Contrôle enfoncée
(Macintosh), puis sélectionnez Référence dans le menu contextuel.
Le panneau Référence qui s’ouvre affiche des informations sur l’attribut
alt.
REMARQUE
Vous pouvez également sélectionner Fenêtre > Référence pour ouvrir le
panneau Référence.
158 Didacticiel : Travail avec du code
4.
Pour plus d’informations sur une autre balise ou un autre attribut,
sélectionnez la balise ou l’attribut dans le menu contextuel approprié du
panneau Référence.
Ajoutez une image à l’aide des
indicateurs de code
Pour ajouter manuellement du code à la page, sélectionnez le mode Code,
puis commencez à taper le code. La fonction Indicateurs de code permet
d’accélérer votre saisie.
Dans cette section, vous utiliserez des indicateurs de code pour ajouter
l’image de la plaque de rue à la page index du Cafe Townsend.
1.
Ouvrez la page index.html si elle ne l’est pas déjà.
2.
En mode Création, sélectionnez l’image street_sign.jpg (elle se trouve
sous l’espace réservé pour l’image de vidéo Flash) et appuyez sur
Supprimer.
Ajoutez une image à l’aide des indicateurs de code 159
Vous utiliserez à présent des indicateurs de code pour réinsérer l’image
plutôt que de la faire glisser du panneau Actifs comme vous l’avez fait
au Chapitre 5, Didacticiel : Ajout de contenu aux pages, page 81.
3.
Passez à mode Code en cliquant dessus dans la barre d’outils de
document ou en sélectionnant Affichage > mode Code.
En mode Code, le point d’insertion devrait se trouver entre une balise
d’ouverture et une autre de fermeture de paragraphe, comme suit :
Si vous ne voyez pas une balise d’ouverture et une autre de fermeture de
paragraphe devant la balise de fermeture de la cellule de tableau </td>,
tapez ces éléments comme suit :
Placez le point d’insertion entre la balise d’ouverture <p> et la balise de
fermeture <p>.
4.
Supprimez tout ce qui pourrait se trouver entre la balise d’ouverture <p>
et la balise de fermeture <p>, par exemple un espace insécable ( ).
5.
Avec le point d’insertion entre la balise <p>d’ouverture et la balise<p> de
fermeture , tapez un crochet ouvert (<).
160 Didacticiel : Travail avec du code
Une liste de balises apparaît au niveau du point d’insertion.
R E M A R QU E
Vous pouvez définir le délai précédant l’affichage de la liste en
sélectionnant Edition > Préférences (Windows) ou Dreamweaver >
Préférences (Macintosh), puis la catégorie Indicateurs de code sur la
gauche. En mode Code, vous pouvez afficher un menu d’indicateurs de
code à tout moment en appuyant sur Ctrl+Barre d’espace ; vous pouvez
également fermer ce menu à tout moment en appuyant sur Echap.
Sélectionnez la balise img dans la liste, puis appuyez sur Entrée
(Windows) ou Retour (Macintosh) pour insérer la première partie de la
balise.
7.
Appuyez sur la barre d’espace pour afficher la liste des attributs de la
balise.
8.
Lorsque l’attribut src est sélectionné dans la liste des indicateurs, tapez
src, puis appuyez sur Entrée (Windows) ou Retour (Macintosh).
C O NSE I L
6.
Pour sélectionner
rapidement une
balise dans la liste,
commencez à saisir
son nom.
La mention Parcourir s’affiche et est sélectionnée sous le code que vous
venez de saisir.
9.
Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour rechercher
un fichier.
Ajoutez une image à l’aide des indicateurs de code
161
10. Dans la boîte de dialogue Sélectionner fichier, naviguez jusqu’au fichier
street_sign.jpg (il se trouve dans le fichier images du dossier racine de
cafe_townsend) et cliquez sur OK (Windows) ou Choisir (Macintosh).
L’URL du fichier image est insérée comme valeur de l’attribut src, et le
point d’insertion apparaît après le guillemet de fermeture.
11.
Appuyez sur la barre d’espace, sélectionnez l’attribut alt dans le menu
des indicateurs, puis appuyez sur Entrée (Windows) ou Retour
(Macintosh).
12. N’insérez rien entre les guillemets, car l’image n’est qu’une illustration.
Utilisez la touche fléchée droite pour placer le point d’insertion à droite
des guillemets.
13.
Saisissez un crochet droit (>) pour terminer la balise.
14. Enregistrez
C ON S E I L
Pour ajouter un
attribut à une balise
existante, placez le
point d’insertion
juste après la valeur
d’attribut définitive
de la balise et
appuyez sur barre
d’espace. Quand une
liste d’attributs
apparaît, ajoutez un
attribut et spécifiez
une valeur s’il y a
lieu.
votre page.
Vérifiez vos modifications
Vous pouvez afficher immédiatement le code que vous avez modifié.
Pour afficher une représentation visuelle de votre code,
procédez de l’une des manières suivantes :
■
Cliquez sur mode Création ou modes Code et Création (intitulé
Fractionner) dans la barre d’outils de document.
■
Affichez un aperçu de la page dans un navigateur Web en appuyant sur
la touche F12 (Windows) ou Option+F12 (Macintosh). Pour fermer le
navigateur et revenir au code, appuyez sur Alt+F4 (Windows
uniquement).
162 Didacticiel : Travail avec du code
Imprimez votre code
Vous pouvez imprimer le code que vous avez rédigé pour le consulter,
l’archiver ou le distribuer.
Pour imprimer du code :
1.
Affichez une page en mode Code.
2.
Sélectionnez Fichier > Imprimer le code.
3.
Spécifiez les options d’impression, puis cliquez sur OK (Windows) ou
sur Imprimer (Macintosh).
Imprimez votre code 163
164 Didacticiel : Travail avec du code
CHAPITRE 9
Didacticiel : Création d’une mise
en forme de page basée sur CSS
9
Au Chapitre 4, Didacticiel : Création d’une mise en forme de page basée sur
un tableau vous avez appris à utiliser les fonctionnalités de création de
tableau de Dreamweaber pour créer une mise en forme de page. Dans ce
didacticiel, vous apprendrez à utiliser les CSS ou feuilles de style en cascade
pour créer une mise en forme semblable. De nombreux concepteurs
préfèrent celles-ci car CSS vous donne une meilleure maîtrise sur le
positionnement des élément. CSS réduit la quantité de code dont vous avez
besoin et vous permet de mettre en forme des blocs avec des marges, des
bordures, des couleurs et ainsi de suite.
Si vous n’avez pas défini un site Dreamweaver et créé le dossier racine local
cafe_townsend, il faut absolument le faire avant de poursuivre. Pour toutes
instructions, voir Chapitre 3, Didacticiel : Configuration de votre site et des
fichiers de projet.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Apprendre la mise en forme de page en utilisant CSS . . . . . . . . 166
Vérification de la maquette de construction. . . . . . . . . . . . . . . . . . 167
Création et enregistrement d’une nouvelle page. . . . . . . . . . . . . . 169
Insertion de calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Ajoutez des couleurs à la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
165
Apprendre la mise en forme de
page en utilisant CSS
De nombreux sites utilisent des mises en forme à partir de tableaux pour
afficher des informations sur leurs pages. Les tableaux sont utiles pour
présenter des tonnées tabulaires (comme des lignes et colonnes d’éléments
répétitifs) et sont très faciles à créer sur une page. Mais les tableaux ont
tendance à engendrer une grande quantité de code qu’il est difficile de lire
et de maintenir. En outre, en raison de la quantité de balises nécessaires et
des possibilités d’« imbrication », ils peuvent causer des difficultés aux
personnes diminuées qui utilisent des lecteurs d’écrans pour visualiser les
pages Web.
Une mise en forme créée à partir de CSS, c’est à dire une mise en forme qui
fait appel à des éléments de bloc plutôt qu’à des lignes et des colonnes,
contient beaucoup moins de code qu’un processus de même nature à base
tabulaire. Ces mises en forme CSS utilisent généralement des balises <div>
plutôt que des balises <table> pour créer des blocs. Vous pouvez disposer
ces blocs n’importe où sur la page et leur affecter des propriétés telles que
bordures, marges, couleurs d’arrière-plan, etc. De plus, les personnes qui
utilisent des lecteurs d’écran pour visualiser des pages Web ont davantage
de facilité pour naviguer dans les pages construites avec CSS étant donné
que le code est plus simple et moins volumineux.
Dreamweaver vous permet de créer des calques. Un calque est un élément
de page HTML que vous pouvez placer à l’endroit de votre choix sur la
page. Plus précisément, il s’agit d’une balise <div> (ou toute autre balise)
dans un endroit déterminé.. Vous utilisez Dreamweaver pour faire glisser
des calques sur votre page en vue de les positionner où vous voulez. Ils
agissent comme des blocs de contenu qui contiennent des actifs comme des
images, des fichiers Flash, du texte, etc.
Les calques Dreamweaver sont des éléments qui occupent un
positionnement absolu. Autrement dit, leur position est fixée par rapport à
la marge supérieure et à la marge gauche de la page. Il n’est pas possible de
créer une mise en forme CSS avec des calques et puis de centrer le contenu
de la page. De ce fait, la mise en forme dans ce didacticiel est légèrement
différente que celle créée au Chapitre 4, Didacticiel : Création d’une mise
en forme de page basée sur un tableau.
166 Didacticiel : Création d’une mise en forme de page basée sur CSS
Pour plus d’informations sur les calques Dreamweaver, voir Chapitre 7,
Mise en forme des pages avec les styles CSS dans Utilisation de Dreamweaver.
Vérification de la maquette de
construction
REMARQUE
Si vous avez terminé Chapitre 4, Didacticiel : Création d’une mise en forme
de page basée sur un tableau et vérifié la maquette de construction, vous
pouvez passer à la section suivante pour démarrer immédiatement avec la
création de mise en forme CSS.
En règle générale, vous n’entamerez pas la création d’un site Web en
ouvrant Dreamweaver puis en mettant immédiatement des pages en forme.
Les premières étapes de la création d’un site Web se déroulent sur une
feuille de papier ou dans une application de graphisme telle que
Macromedia Fireworks. Les concepteurs graphiques créent généralement
une maquette détaillée du site Web de manière à la présenter au client et à
s’assurer que celui-ci approuve les idées initiales relatives au site.
Une maquette détaillée se compose d’un certain nombre d’éléments de
page que le client a demandés pour son site Web. Par exemple, le client
peut demander à avoir un logo en haut de la page, une section de
navigation avec des liens vers les autres pages, une section contenant un
magasin en ligne et un endroit où insérer des clips vidéo. Selon ces
desiderata, le concepteur entame la planification de la mise en forme du
site et crée des esquisses de pages répondant aux attentes du client.
Vérification de la maquette de construction 167
Dans ce didacticiel, vous disposerez de la maquette détaillée complète et
approuvée de Cafe Townsend, un restaurant fictif qui désire disposer d’un
site Web. En tant que concepteur Web, vous êtes chargé de transformer
cette maquette détaillée en une page Web fonctionnelle (dans la plupart des
cas, en collaboration avec d’autres concepteurs graphiques et des
développeurs Flash).
Vous remarquerez que le concepteur graphique vous a fourni une maquette
détaillée de page Web qui comprend un certain nombre de zones de
contenu et quelques idées concernant les graphismes. Dans les sections
suivantes, vous allez employer Dreamweaver pour mettre ce concept en
forme.
168 Didacticiel : Création d’une mise en forme de page basée sur CSS
Vous pouvez également ouvrir le fichier original de la maquette détaillée si
vous désirez le voir s’afficher sur l’écran de l’ordinateur. Vous pouvez
trouver la maquette, homepage-mockup.jpg, dans le dossier
fireworks_assets du dossier cafe_townsend que vous avez copié sur votre
disque dur dans Chapitre 3, Didacticiel : Configuration de votre site et des
fichiers de projet. Si vous le souhaitez, vous pouvez même l’imprimer pour
l’avoir sous les yeux pendant que vous construisez votre page.
Création et enregistrement d’une
nouvelle page
Après avoir configuré un site et consulté les maquettes détaillées, vous
pouvez entamer la création de pages Web. Vous allez tout d’abord créer une
nouvelle page et l’enregistrer dans le dossier racine local cafe_townsend de
votre site Web. Cette page va devenir la page d’accueil du Cafe Townsend,
un restaurant fictif.
Si vous n’avez pas créé ce dossier, il faut absolument le faire avant de
poursuivre. Pour toutes instructions, voir Chapitre 3, Didacticiel :
Configuration de votre site et des fichiers de projet.
1.
Dans Dreamweaver, choisissez Fichier > Nouveau.
2.
Dans l’onglet Général de la boîte de dialogue Nouveau document,
sélectionnez Page de base dans la liste Catégorie, puis cliquez sur Créer.
3.
Sélectionnez Fichier > Enregistrer sous.
4.
Dans la boîte de dialogue Enregistrer sous, accédez au dossier
cafe_townsend que vous avez défini comme dossier racine local du site.
Dans le Chapitre 3, Didacticiel : Configuration de votre site et des fichiers
de projet, vous avez créé ce dossier dans un autre dossier appelé
local_sites.
5.
Entrez index_css.html dans la zone de texte Nom de fichier puis cliquez
sur Enregistrer.
Le nom du fichier paraît maintenant dans la barre de titre dans la partie
supérieure de la fenêtre de l’application, entre parenthèses.
Création et enregistrement d’une nouvelle page 169
6.
Dans la zone texte Titre du document, dans le haut de votre nouveau
document, saisissez Cafe Townsend.
Il s’agit du titre de votre page (qui est différent du nom de fichier). Les
visiteurs de votre site verront ce titre dans la barre de titre de la fenêtre
du navigateur lorsqu’ils afficheront la page dans un navigateur Web.
7.
Choisissez Fichier > Enregistrer pour enregistrer votre page.
Insertion de calques
Vous allez à présent ajouter des calques à la page. Un calque est un élément
à position absolue que vous pouvez utiliser pour conserver des images, du
texte, des fichiers Flash ou tout autre contenu. Pour plus d’informations sur
les modèles, voir Apprendre la mise en forme de page en utilisant CSS,
page 166..
Dessinez un nouveau calque
1.
La page index_css.html étant ouverte dans la fenêtre de document,
sélectionnez mode Mise en forme dans la barre Insérer.
170 Didacticiel : Création d’une mise en forme de page basée sur CSS
2.
Cliquez sur Dessiner un calque.
Le pointeur de la souris se transforme en croix quand vous le déplacez
au-dessus de la page.
3.
Faites glisser un calque de taille quelconque sur la page et lâchez le
bouton de la souris.
4.
Cliquez sur la poignée de sélection dans la partie supérieure gauche du
calque pour vous assurer qu’il est sélectionné.
5.
Le nouveau calque étant activé, procédez comme suit dans l’inspecteur
de propriété (Fenêtre > Propriétés) :
■
Cliquez dans la zone de texte ID de calque et attribuez un autre
nom au calque banner_graphic.
■
Dans la zone de texte Largeur (L), tapez 700px.
■
Dans la zone de texte Hauteur (H), tapez 90px.
■
Dans la zone de texte Gauche (G), tapez 20px.
■
Dans la zone de texte Haut (S), tapez 20px.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les modifications.
Insertion de calques
171
Dreamweaver redimensionne et positionne alors le nouveau calque
banner_graphic. Le calque banner_graphic a une largeur de 700 pixels
pour une hauteur de 90 pixels. Il est également positionné à 20 pixels
de la marge gauche et à 20 pixels de la marge supérieure de la page.
CONSEIL
Vous avez disposé
ce calque en
fournissant des
valeurs précises de
pixels à l’inspecteur
de propriété, mais en
fait vous pouvez le
disposer n’importe
où sur la page en
faisant glisser la
poignée de sélection
de la partie
supérieure gauche
d’un calque activé.
6.
Ouvrez le panneau Calques (Fenêtre > Calques). Vous verrez que
Dreamweaver a ajouté le nouveau calque (banner_graphic) à la liste de
calques.
7.
Cliquez une fois à l’extérieur de l’image pour la désélectionner.
8.
Enregistrez votre page.
Ajoutez de nouveaux calques
Vous allez à présent ajouter des calques à la page. Vous utiliserez le premier
calque (banner_graphic) comme point de référence pour positionner les
suivants. Vous utiliserez également la fonctionnalité Arrière-plans de CSS
pour vous aider à les positionner et à les distinguer les uns des autres.
1.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur Dessiner un
calque et faites glisser un autre calque de taille quelconque sur la page.
2.
Cliquez sur la poignée de sélection du nouveau calque pour l’activer.
172 Didacticiel : Création d’une mise en forme de page basée sur CSS
3.
Une fois que cela est fait, procédez comme suit dans l’inspecteur de
propriété (Fenêtre Propriétés) :
■
Cliquez dans la zone de texte ID de calque et attribuez un autre
nom au calque flash_fma.
■
Dans la zone de texte Largeur (L), tapez 700px.
■
Dans la zone de texte Hauteur (H), tapez 166px.
■
Dans la zone de texte Gauche (G), tapez 20px.
■
Dans la zone de texte Haut (S), tapez 111px.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les éléments de cette saisie.
Dreamweaver redimensionne et positionne alors le nouveau calque
flash_fma.
.
Le calque flash_fma a une largeur de 700 pixels pour une hauteur de
166 pixels. Il est également positionné à 20 pixels de la marge gauche et
à 111 pixels de la marge supérieure de la page. Il est à 111 pixels de la
partie supérieure de la marge de la page pour qu’il ne recouvre pas le
calque banner_graphic.
Insertion de calques 173
Quand des calques se chevauchent, vous constaterez que la bordure de
l’un des calques (en l’occurrence, celui du dessous) est représenté par
des pointillés.
4.
Cliquez une fois à l’extérieur du nouveau calque pour le désélectionner.
5.
Choisissez Affichage > Assistances visuelles > Arrière-plans en feuilles
CSS.
Dreamweaver ajoute des couleurs d’arrière-plan à vos calques. Elles sont
choisies au hasard et ne paraissent pas sur la page Web publiée. Elles ne
sont que des aides visuelles que Dreamweaver met à votre disposition
pour vous aider à voir où les calques et autres types de blocs d’éléments
se trouvent sur la page.
Si vous le voulez, vous pouvez désactiver les Arrière-plans de mise en
forme CSS à nouveau en sélectionnant Affichage > Assistances visuelles
et en désélectionnant Arrière-plans en feuilles CSS.
174 Didacticiel : Création d’une mise en forme de page basée sur CSS
6.
Ensuite, faites glisser trois nouveaux calques sur la page, sous les calques
banner_graphic layer et flash_fma.
Rappelez-vous de cliquer sur Dessiner un calque dans la barre Insérer
avant chaque opération de glissement d’un nouveau calque.
Insertion de calques 175
7.
C O N S E IL
REMARQUE
Quand vous
sélectionnez un
calque, veillez à
cliquer quelque part
sur sa bordure ou sur
sa poignée de
sélection, et pas à
l’intérieur du calque.
Vous pouvez être
certain qu’un calque
est sélectionné si
vous apercevez des
poignées de
redimensionnement
sur les bordures du
calque ainsi que des
propriétés de largeur
et de hauteur dans
l’inspecteur de
propriétés. Vous
pouvez sélectionner
un calque en cliquant
sur sur son nom dans
le panneau Calques
(Fenêtre > Calques).
Quand vous avez terminé, utilisez l’inspecteur de propriétés pour
exécuter les opérations suivantes :
■
Sélectionnez le premier calque, appelez-le en-tete et attribuez-lui
une largeur de 700 pixels pour une hauteur de 24.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les éléments de cette saisie.
■
Sélectionnez le deuxième calque, appelez-le contenu_central et
attribuez-lui une largeur de 700 pixels pour une hauteur de 350.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les éléments de cette saisie.
Quand vous redimensionnez le calque contenu_central à une hauteur de
350 pixels, il va chevaucher l’autre calque sur la page. Avant de passer à
l’étape suivante, sélectionnez l’autre calque et faites glisser la poignée de
sélection jusqu’au bas de la page afin de le positionner sous le calque
contenu_central.
■
Sélectionnez le troisième calque, appelez-le pied_de_page et
attribuez-lui une largeur de 700 pixels pour une hauteur de 24.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les éléments de cette saisie.
176 Didacticiel : Création d’une mise en forme de page basée sur CSS
Lorsque vous avez terminé, votre page doit ressembler à la suivante :
8.
Ensuite, sélectionnez le calque en-tete et faites glisser la poignée de
sélection jusqu’à ce que le calque soit placé juste en-dessous du calque
flash_fma.
Vous pouvez vérifier votre position de temps à autre pendant que vous
déplacez le calque en cliquant à l’extérieur de celui-ci pour le désactiver.
Insertion de calques 177
CONSEIL
CONSEIL
9.
Vous pouvez aussi
déplacer, un pixel à
la fois, des calques
sélectionnés en
appuyant sur les
touches de direction
du clavier. Essayez
d’utiliser l’inspecteur
de propriétés pour
aligner le calque entête à 20 pixels du
bord de la marge
gauche de la page.
Utilisez ensuite la
touche Flèche vers
le haut pour déplacer
le calque jusqu’à ce
qu’il touche la
bordure inférieure du
calque flash_fma.
Vous pouvez aussi
utiliser le bouton
Assistances visuelles
sur la barre d’outils
pour activer ou
désactiver les
arrière-plans de mise
en forme CSS.
Sélectionnez et faites glisser les calques contenu_central et pied_de_page
ou bien utilisez les flèches de direction de votre clavier pour les
positionner, comme le montre l’exemple suivant :
10. Dès que vos calques sont en position, désactivez les arrière-plans de mise
en forme CSS (si ce n’est déjà fait) en sélectionnant Affichage >
Assistances visuelles et en désélectionnant les Arrière-plans en feuilles
CSS.
Ajoutez un calque à l’intérieur d’un calque
Les derniers calques que vous allez dessiner se trouveront dans le grand
calque contenu_central. Ces calques se comportent comme les cellules de
tableau que vous avez ajoutées à la page si vous avez suivi le Chapitre 4,
Didacticiel : Création d’une mise en forme de page basée sur un tableau
1.
Cliquez une seule fois à la droite de vos calques pour vous assurer que
tout est désélectionné.
178 Didacticiel : Création d’une mise en forme de page basée sur CSS
2.
Dans la catégorie Mise en forme de la barre Insérer, cliquez sur Dessiner
un calque et faites glisser un autre calque à l’intérieur du calque
contenu_central comme l’indique l’exemple suivant:
3.
Cliquez sur la poignée de sélection du nouveau calque pour le
sélectionner.
4.
Une fois que cela est fait, procédez comme suit dans l’inspecteur de
propriété :
■
Cliquez dans la zone de texte ID de calque et changez le nom du
calque en navigation.
■
Dans la zone de texte Largeur (L), tapez 140px.
■
Dans la zone de texte Hauteur (H), tapez 350px.
■
Dans la zone de texte Gauche (G), tapez 20px.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les éléments de cette saisie.
Insertion de calques 179
5.
Utilisez la touche Flèche vers le haut de votre clavier pour déplacer le
calque navigation jusqu’à ce qu’il se trouve en plein centre du calque
contenu_central, comme le montre l’exemple suivant:
180 Didacticiel : Création d’une mise en forme de page basée sur CSS
6.
Créez un autre calque dans le calque contenu_central en cliquant sur
Dessiner un calque et en faisant glisser un autre calque commele montre
l’exemple suivant:
7.
Cliquez sur la poignée de sélection du nouveau calque pour être sûr qu’il
soit sélectionné.
8.
Une fois que cela est fait, procédez comme suit dans l’inspecteur de
propriété :
■
Cliquez dans la zone de texte ID de calque et changez le nom du
calque en flash_video.
■
Dans la zone de texte Largeur (L), tapez 230px.
■
Dans la zone de texte Hauteur (H), tapez 350px.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les éléments de cette saisie.
Insertion de calques
181
9.
Faites glisser le calque flash_video ou utilisez les flèches de direction de
votre clavier pour le disposer comme le montre l’exemple suivant :
182 Didacticiel : Création d’une mise en forme de page basée sur CSS
10. Créez encore un autre calque dans le calque contenu_central en cliquant
sur Dessiner un calque et en faisant glisser un autre calque comme le
montre l’exemple suivant:
11.
Cliquez sur la poignée de sélection du nouveau calque pour être sûr qu’il
soit sélectionné.
12. Une
fois que cela est fait, procédez comme suit dans l’inspecteur de
propriété :
■
Cliquez dans la zone de texte ID de calque et attribuez un autre
nom au calque texte.
■
Dans la zone de texte Largeur (L), tapez 330px.
■
Dans la zone de texte Hauteur (H), tapez 350px.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour
appliquer les éléments de cette saisie.
Insertion de calques 183
13.
Faites glisser le calque texte ou utilisez les flèches de direction de votre
clavier pour le disposer comme le montre l’exemple suivant :
REMARQUE
Cela n’a pas d’importance si vous apercevez des pointillés sur les
bordures du calque. Cela signifie que vos calques se chevauchent d’un
pixel ou deux.
14. Enregistrez
votre page.
184 Didacticiel : Création d’une mise en forme de page basée sur CSS
Ajoutez des couleurs à la page
1.
Sélectionnez le calque navigation en cliquant sur sur son nom dans le
panneau Calques (Fenêtre > Calques).
2.
Dans l’inspecteur de propriétés, cliquez une fois dans la zone de texte
Couleur d’arrière-plan.
CONSEIL
Vous allez à présent ajouter des couleurs d’arrière-plan à quelques-uns des
calques ainsi qu’a la page entière.
Vous pouvez
changer la largeur de
la colonne Nom dans
le panneau Calques
en faisant glisser la
bordure droite du
titre de la colonne
vers la gauche ou la
droite.
Cette zone se trouve juste à côté de la zone de couleur Couleur
d’arrière-plan (ar-pl).
3.
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).
Le calque navigation prend une couleur brun rougeâtre.
4.
Sélectionnez le calque flash_video en cliquant sur son nom dans le
panneau Calques.
5.
Dans l’inspecteur de propriétés, cliquez une fois 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).
Le calque flash_video prend une couleur brun clair.
Ajoutez des couleurs à la page 185
6.
Répétez les étapes précédentes pour changer la couleur du calque texte
en brun clair également.
7.
Dès que vous aurez défini les couleurs d’arrière-plan des trois calques,
cliquez une seule fois à la droite de tous les calques pour vous assurer que
rien n’est sélectionné.
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.
8.
Choisissez Modifier > Propriétés de la page.
9.
Dans la catégorie Aspect de la boîte de dialogue Propriétés de la page,
cliquez sur la zone de couleur Couleur d’arrière-plan et choisissez le noir
(#000000) dans le sélecteur de couleur.
10. Cliquez
sur OK.
L’arrière-plan de la page devient noir.
11.
Enregistrez votre page.
186 Didacticiel : Création d’une mise en forme de page basée sur CSS
La mise en forme CSS de votre page est maintenant terminée. La mise en
forme contient un certain nombre de tableaux qui contiennent des actifs
tels que des images, du texte et des fichiers vidéo Flash. L’étape suivante
consiste à ajouter le contenu.
Si vous avez suivi le Chapitre 5, Didacticiel : Ajout de contenu aux pages,
vous savez que vous pouvez utiliser Dreamweaver pour insérer aisément des
actifs dans votre page. Si vous n’avez pas terminé ce didacticiel, vous
pouvez prendre les illustrations comme références pendant que vous
ajoutez du contenu à la page que vous venez de terminer en utilisant la
mise en forme CSS.
Vous pouvez trouver une version terminée de ce didacticiel dans le dossier
cafe_townsend/completed_files/dreamweaver.
Ajoutez des couleurs à la page 187
188 Didacticiel : Création d’une mise en forme de page basée sur CSS
CHAPITRE 10
Didacticiel : Affichage de
données XML
10
Le présent didacticiel indique comment créer une page Web qui affiche des
données XML. Pour afficher des données XML, il faut récupérer des
informations stockées dans un fichier XML local ou distant, puis en
effectuer le rendu sur la page. L’utilisation de données XML sur des pages
Web permet de séparer le contenu de la présentation, ce qui constitue un
avantage majeur. En d’autres termes, le contenu de votre page (les données)
est totalement séparé de la présentation de la page (mise en page, style du
texte, etc.). Il est donc possible à quiconque de travailler sur le fichier XML
sans avoir à modifier la présentation de la page, et inversement.
Bien que cela ne soit pas nécessaire, il est préférable de connaître le
fonctionnement des feuilles de style en cascade (CSS) avant d’effectuer ce
didacticiel. Le cas échéant, vous pouvez effectuer Chapitre 6, Didacticiel :
Mise en forme de votre page avec CSS, page 109.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Localiser vos fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Passer votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191
Utilisation de XML et XSL dans des pages Web . . . . . . . . . . . . . 192
Pages XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Conversion d’une page HTML en page XSLT . . . . . . . . . . . . . . . 196
Association d’une source de données XML à la page XSLT . . . 197
Modification de la mise en page XSLT . . . . . . . . . . . . . . . . . . . . . . 198
Liaison des données XML à la page XSLT . . . . . . . . . . . . . . . . . . 201
Application de styles aux données XML . . . . . . . . . . . . . . . . . . . . 203
Création d’un lien dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Ajout d’un objet XSLT Région répétée . . . . . . . . . . . . . . . . . . . . . 206
Association de la page XSLT à la page XML. . . . . . . . . . . . . . . . 209
Autres options de déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211
189
Localiser vos fichiers
Les fichiers dont vous avez besoin pour suivre ce didacticiel se trouvent
dans le dossier xml, qui figure dans le dossier racine cafe_townsend que
vous avez copié sur votre ordinateur dans Chapitre 3, Didacticiel :
Configuration de votre site et des fichiers de projet. Si vous n’avez pas suivi ce
didacticiel, vous devez le faire avant de continuer.
Le dossier xml contient le fichier principal que vous allez utiliser dans ce
didacticiel (xml_menu.html), la feuille de style en cascade (CSS) associé à
la page de menu (xml_menu.css), un fichier contenant vos données XML
(specials.xml), un dossier d’images et un certain nombre d’autres pages
HTML.
La version finale du didacticiel, xml_menu.xsl, se trouve dans le répertoire
cafe_townsend/completed_files/dreamweaver/xml.
190 Didacticiel : Affichage de données XML
Passer votre tâche en revue
Cafe Townsend est un restaurant fictif qui affiche actuellement la liste de
ses plats du jour sur son site Web. Les informations sont présentées dans un
tableau HTML contenant des lignes. La colonne de gauche de chaque
ligne indique le nom du plat et sa description. La colonne de droite précise
le prix du plat. Toutes les informations figurant sur la page sont codées
manuellement (autrement dit, elles ne proviennent pas d’une source de
données dynamique) et le texte est formaté par le biais d’une feuille de style
externe.
Les propriétaires de Cafe Townsend ont décidé d’utiliser une source de
données dynamique et d’afficher les plats du jour à partir de données
enregistrées dans un fichier XML. L’utilisation de données XML permet de
séparer le contenu de la page (les plats du jour) de la présentation (mise en
page, style du texte, etc.). Même s’il ne sait pas utiliser HTML ni assurer la
maintenance de pages Web, un employé peut facilement mettre les
informations à jour en modifiant le fichier XML, sans avoir à intervenir sur
la présentation de la page affichant les plats du jour.
Passer votre tâche en revue
191
Dans ce didacticiel, vous allez convertir la page specials (une page HTML)
en une page XSLT afin d’y afficher des données XML. Vous appliquerez
également des styles aux données XML afin que de les harmoniser avec le
reste de la page.
Si vous savez utiliser XML, XSLT et les transformations côté client, vous
pouvez passer directement à Conversion d’une page HTML en page XSLT,
page 196. Si ces concepts sont nouveaux pour vous, lisez les sections
suivantes.
Utilisation de XML et XSL dans
des pages Web
Le langage XML (Extensible Markup Language) permet de structurer les
informations. Tout comme HTML, XML utilise des balises pour structurer
les informations, mais les balises XML ne sont pas prédéfinies comme c’est
le cas des balises HTML. En effet, XML permet de créer des balises sur
mesure, adaptées à la structure des données. Les balises sont imbriquées
dans d’autres balises afin de créer un schéma de balises parentes et enfants.
Comme la plupart des balises HTML, toutes les balises d’un schéma XML
comprennent une balise d’ouverture et une balise de fermeture.
L’exemple suivant illustre la structure de base d’un fichier XML :
<?xml version=“1.0”>
<mybooks>
<book bookid=“1”>
<pubdate>03/01/2004</pubdate>
<title>Displaying XML Data with Macromedia Dreamweaver</
title>
<author>Charles Brown</author>
</book>
<book bookid=“2”>
<pubdate>04/08/2004</pubdate>
<title>Understanding XML</title>
<author>John Thompson</author>
</book>
</mybooks>
192 Didacticiel : Affichage de données XML
Dans cet exemple, chaque balise parente <book> contient trois balises
enfants : <pubdate>, <title> et <author>. Mais chaque balise <book> est
elle-même un enfant de la balise <mybooks>, qui se trouve à un niveau
hiérarchique plus élevé du schéma. Vous pouvez nommer et structurer les
balises XML comme vous le souhaitez, sous réserve qu’elles soient
imbriquées en conséquence et qu’une balise de fermeture corresponde à
chaque balise d’ouverture.
Les documents XML ne contiennent pas d’instructions de mise en forme,
ce sont de simples conteneurs d’informations structurées. (Vous
remarquerez que le code échantillon ne contient pas de police, de tableau
ou de balises d’en-tête.) Après avoir créé un schéma XML, vous pouvez
utiliser le langage XSL (Extensible Stylesheet Language) pour afficher les
informations. Tout comme les feuilles de style en cascade (CSS) permettent
de formater le contenu HTML, le langage XSL permet de formater les
données XML. Vous pouvez définir des styles, des éléments de page, la
mise en page, etc. dans un fichier XSL, puis associer celui-ci à un fichier
XML. Lorsqu’un utilisateur affiche les données XML dans un navigateur,
elles sont mises en forme conformément aux éléments définis dans le
fichier XSL. Le contenu (les données XML) et la présentation (définie par
le fichier XSL) sont entièrement séparés, ce qui offre un meilleur contrôle
sur la façon dont les informations sont affichées dans une page Web. En
bref, le langage XSL constitue une technologie de présentation pour les
données XML, la sortie principale correspondant à une page HTML.
Le langage XSLT (Extensible Stylesheet Language Transformations) est un
sous-ensemble du langage XSL qui permet d’afficher des données XML sur
une page Web et de les « transformer », parallèlement aux styles XSL, en
informations lisibles et mises en forme au format HTML. Vous pouvez
utiliser Dreamweaver pour créer des pages XSLT permettant d’effectuer des
transformations XSL dans un serveur d’application ou un navigateur.
Lorsqu’une transformation XSL est effectuée sur le serveur, ce dernier
prend en charge toutes les opérations de transformation des données XML
et XSL et de leur affichage. Lorsque cette transformation a lieu côté client,
c’est le navigateur (par exemple Internet Explorer) qui se charge de ces
opérations.
Utilisation de XML et XSL dans des pages Web 193
La méthode que vous adoptez (transformations côté serveur ou client)
dépend du résultat final que vous souhaitez obtenir, des technologies à
votre disposition, du niveau d’accès aux fichiers XML source dont vous
disposez et d’autres facteurs. Les deux méthodes présentent des avantages et
des inconvénients. Les transformations côté serveur, par exemple, sont
gérés par tous les navigateurs, alors que les transformations coté clients ne
sont pris en charge uniquement que par les navigateurs récents (Internet
Explorer 6, Netscape 8, Mozilla 1.8 et Firefox 1.0.2). Les transformations
côté serveur vous permettent d’afficher les données XML dynamiquement
à partir de votre propre serveur ou de n’importe où sur le Web. En
revanche, les données XML utilisées par les transformations côté client
doivent impérativement être hébergées localement sur votre propre serveur
Web. Enfin, les transformations côté serveur requièrent le déploiement des
pages sur un serveur d’application configuré, tandis que les transformations
côté client exigent uniquement l’accès à un serveur Web.
Ce didacticiel présente les procédures de création d’une page XSLT et
d’exécution d’une transformation côté client (principalement parce que le
processus côté client est beaucoup plus facile à exécuter et ne nécessite pas
l’utilisation d’un serveur d’application). Pour plus d’informations sur les
autres méthodes de déploiement des pages XSLT, consultez la section
Autres options de déploiement, page 211.
Pages XSLT
Lorsque vous faites appel à des transformations XSL côté serveur, vous
pouvez utiliser Dreamweaver pour créer des pages XSLT générant des
documents HTML complets (des pages XSLT entières) ou des fragments
XSLT générant une partie seulement d’un document HTML.
Une page XSLT entière est semblable à une page HTML classique. Elle
contient une balise <body> et une balise <head>, et permet d’afficher des
données HTML et XML sur la page. Un fragment XSLT est un segment de
code utilisé par un document distinct et qui affiche des données XML
formatées. A la différence d’une page XSLT, un fragment XSLT est un
fichier indépendant qui ne contient pas de balises <body> ou <head>.
194 Didacticiel : Affichage de données XML
Pour afficher des données XML sur une page distincte, vous pouvez créer
une page XSLT entière et la lier à vos données XML. Si, en revanche, vous
souhaitez afficher les données XML dans une section particulière d’une
page dynamique existante (par exemple, la page d’accueil dynamique d’un
magasin d’équipement sportif, sur laquelle des scores issus d’un fil RSS
sont affichés sur le côté gauche), vous pouvez créer un fragment XSLT et
insérer une référence à ce fragment dans la page dynamique. Les
transformations côté serveur s’utilisent le plus souvent pour créer des
fragments XSLT et les utiliser avec d’autres pages dynamiques afin
d’afficher des données XML.
Dans ce didacticiel, vous allez créer une page XSLT entière et l’utiliser pour
transformer un fichier XML exemple. La transformation aura lieu côté
client et sera pris en charge par un navigateur récent (Internet Explorer 6,
Netscape 8, Mozilla 1.8, or Firefox 1.0.2). Ce didacticiel ne propose pas de
transformations côté serveur car il faut qu’un serveur d’application soit
configuré avec un moteur de transformation.
Pour vue d’ensemble complète des transformations XLS côté serveur et
client, consultez les sections Transformations XSL côté serveur et
Transformations XSL côté client dansUtilisation de Dreamweaver (Aide >
Utilisation de Dreamweaver).
Pour toute ressource supplémentaire, notamment des didacticiels sur les
transformations côté serveur, consultez le site Web www.macromedia.com/
go/dw_xsl_fr.
Pages XSLT 195
Conversion d’une page HTML en
page XSLT
Vous allez commencer par convertir la page existante specials de Cafe
Townsend, une page HTML, en une page XSLT qui peut afficher des
données XML.
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), localisez le fichier
xml_menu.html, puis double-cliquez sur dessus pour l’ouvrir. Le fichier
xml_menu.html se trouve dans le dossier xml, qui réside dans le dossier
racine cafe_townsend. Pour plus d’informations, consultez la section
Localiser vos fichiers, page 190.
2.
Sélectionnez Fichier > Convertir > XSLT 1.0.
Dreamweaver ouvre une copie de la page xml_menu dans la fenêtre de
document. La nouvelle page est une feuille de style XSL, qui porte
l’extension .xsl.
3.
Cliquez sur la page xml_menu.html et fermez-la afin que seule la
nouvelle page xml_menu.xsl soit affichée dans la fenêtre de document.
196 Didacticiel : Affichage de données XML
Association d’une source de
données XML à la page XSLT
Vous allez à présent associer une source de données XML à la page à l’aide
du panneau Liaisons.
1.
Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur la liaison
XML.
REMARQUE
Pour ajouter une source de données XML, vous pouvez aussi cliquer sur le
lien Source, dans le coin supérieur droit du panneau Liaisons.
2.
Sélectionnez Associer un fichier local (cette option est normalement
sélectionnée par défaut), cliquez sur le bouton Parcourir, recherchez le
fichier specials.xml sur votre ordinateur et cliquez sur OK.
3.
Cliquez sur OK pour fermer la boîte de dialogue Localiser source XML.
Association d’une source de données XML à la page XSLT 197
Dreamweaver insère le schéma de la source de données XML dans le
panneau Liaisons.
Pour en savoir plus sur les symboles que contient ce schéma, consultez
la section Création de pages XSLT dans Utilisation de Dreamweaver
(Aide > Utilisation de Dreamweaver).
Modification de la mise en page
XSLT
Puisque vous allez utiliser des données XML sur la page plutôt que du texte
statique, vous n’avez plus besoin de toutes les lignes de tableau. Vous allez
donc supprimer toutes les lignes, sauf une que vous utiliserez pour afficher
les données.
198 Didacticiel : Affichage de données XML
1.
Cliquez une fois dans la dernière ligne du tableau (la ligne New York
Cheesecake) et cliquez sur la balise <tr> la plus à droite dans le sélecteur
de balises pour sélectionner la ligne.
2.
Appuyez sur la touche Suppr.
3.
Répétez les étapes précédentes pour supprimer les lignes Grilled Pacific
Salmon et Thai Noodle Salad. Lorsque vous avez terminé, la page ne
doit plus contenir qu’une seule ligne, Summer Salad.
4.
Sélectionnez tout le texte que contient la cellule de gauche.
Modification de la mise en page XSLT 199
5.
Dans l’Inspecteur de propriétés (Fenêtre > Propriétés), choisissez Aucun
dans le menu déroulant Style.
Cette opération supprime le style de classe menu du texte sélectionné.
Vous n’effectuerez pas nécessairement cette opération dans des
circonstances normales. Vous supprimez tous les styles dans ce cas
précis afin d’apprendre plus tard à appliquer des styles à des données
XML.
6.
Le texte étant toujours sélectionné, appuyez sur la touche Suppr.
7.
Enregistrez votre travail (Fichier > Enregistrer).
200 Didacticiel : Affichage de données XML
Liaison des données XML à la
page XSLT
Vous êtes maintenant prêt à lier des données XML à la page.
1.
Dans le panneau Liaisons (Fenêtre > Liaisons), sélectionnez l’élément
item et faites-le glisser vers la cellule vide du tableau.
Un espace réservé pour données XML est créé sur la page. Cet espace
réservé est en surbrillance et encadré d’accolades. Il utilise la syntaxe
XPath (Langage XML Path) pour décrire la structure hiérarchique du
schéma XML.
2.
Appuyez sur la touche fléchée droite sur votre clavier pour placer le
point d’insertion à droite de l’espace réservé pour données XML.
3.
Appuyez sur la barre des espaces, tapez un tiret et appuyez sur la barre à
nouveau.
Liaison des données XML à la page XSLT 201
4.
Dans le panneau Liaisons, sélectionnez l’élément description et faites-le
glisser vers le point d’insertion.
Un autre espace réservé pour données XML est créé sur la page. Selon
la résolution de votre moniteur, il se peut que l’espace réservé apparaisse
sur la ligne suivante. Ne vous en inquiétez pas. Lorsque vous afficherez
la page dans un navigateur ultérieurement, les données seront insérées
correctement dans le tableau
5.
Enfin, sélectionnez le prix (7) dans la cellule de droite.
6.
Dans le panneau Liaisons, double-cliquez sur l’élément price.
L’espace réservé pour données XML affecte à nouveau la mise en page.
Ne vous en inquiétez pas.
REMARQUE
L’espace réservé aux données XML price est formaté avec le style de
classe menu, car vous n’avez pas supprimé les styles comme vous l’avez
fait dans la cellule de gauche.
7.
Enregistrez la page, puis affichez un aperçu de votre travail dans un
navigateur en appuyant sur F12 (Windows) ou sur Option+F12
(Macintosh).
Le navigateur affiche la page, qui contient une ligne de données issues
du fichier XML.
202 Didacticiel : Affichage de données XML
Application de styles aux
données XML
Vous allez à présent appliquer des styles aux espaces réservés aux données
XML item et description. Lorsque vous appliquez des styles à un espace
réservé pour données XML, le texte de l’espace réservé lui-même affiche les
styles. Par la suite, lorsque vous effectuez un aperçu de la page dans un
navigateur, les données XML résultantes affichent également les styles
affectés.
1.
Cliquez une fois dans la cellule de gauche du tableau, puis cliquez sur la
balise <td> la plus à droite dans le sélecteur de balises pour sélectionner
la cellule.
Vous sélectionnez la cellule afin de pouvoir formater son contenu
entier, tiret compris, en une seule opération.
2.
Dans l’Inspecteur de propriétés, sélectionnez menu dans la liste des
styles de classe que propose le menu déroulant Style.
3.
Cliquez une fois à l’intérieur de la cellule de gauche pour la
désélectionner.
4.
Cliquez une fois sur l’espace réservé aux données XML item pour le
sélectionner.
Application de styles aux données XML 203
5.
Dans l’Inspecteur de propriétés, cliquez sur le bouton Italique.
6.
Enregistrez la page, puis affichez un aperçu de votre travail dans un
navigateur en appuyant sur F12 (Windows) ou sur Option+F12
(Macintosh).
Pour plus d’informations sur l’application de styles à des données XML,
consultez la section Application de styles aux fragments XSLT dans Utilisation
de Dreamweaver (Aide > Utilisation de Dreamweaver).
Création d’un lien dynamique
Vous allez à présent créer un lien dynamique pour le nom du plat sur le
menu « specials » soit lié à une page contenant une image du plat.
1.
Dans la fenêtre de document, cliquez sur l’élément XML 'item' afin de
le sélectionner.
204 Didacticiel : Affichage de données XML
2.
Dans l’Inspecteur de propriétés, cliquez sur l’icône Rechercher le fichier
située en regard de la zone de texte Lien.
3.
Dans la boîte de dialogue Sélectionner un fichier, sélectionnez Sources
de données.
Sous Windows, l’option se trouve dans la partie supérieure de la boîte
de dialogue). Sur un Macintosh, elle se trouve dans la partie inférieure
de la boîte de dialogue).
Création d’un lien dynamique 205
4.
Lorsque le schéma XML apparaît dans la boîte de dialogue, sélectionnez
l’élément link.
5.
Cliquez sur OK.
Dreamweaver crée un lien dynamique. Dans le fichier XML, chaque
élément link pointe vers une page HTML contenant une image du plat
correspondant.
REMARQUE
Si vous ouvrez le fichier specials.xml et examinez le code, vous
constaterez que chaque élément <link> contient le nom du fichier HTML
contenant l’image du plat correspondant. Il s’agit en fait du chemin au
fichier HTML, car les pages HTML contenant les images résident dans le
même répertoire xml que la page XSLT sur laquelle vous travaillez.
L’élément link représente systématiquement le chemin d’accès complet à
la page liée et se présente souvent sous la forme d’une adresse HTTP.
6.
Enregistrez la page, puis affichez un aperçu de votre travail dans un
navigateur en appuyant sur F12 (Windows) ou sur Option+F12
(Macintosh).
Le navigateur affiche la page, qui contient un lien actif. Si vous cliquez
sur le lien, vous accédez à une autre page.
Ajout d’un objet XSLT Région
répétée
L’objet XSLT Région répétée permet d’afficher sur une page Web des
éléments répétés provenant d’un fichier de données XML. Vous allez à
présent ajouter un objet XSLT Région répétée à la ligne du tableau afin de
pouvoir afficher plusieurs plats du jour sur la page.
1.
Dans la fenêtre de document, cliquez une fois n’importe où à l’intérieur
de la ligne contenant les espaces réservés pour les données XML.
2.
Dans le sélecteur de balises, cliquez sur la balise <tr> la plus à droite
pour sélectionner la ligne de tableau.
206 Didacticiel : Affichage de données XML
3.
Choisissez Insertion > Objets XSLT > Région répétée.
Ajout d’un objet XSLT Région répétée 207
4.
Dans Créateur d’espression XPATH, sélectionnez l’élément répété
menu_item. (Les éléments répétés sont signalés par un petit signe plus).
5.
Cliquez sur OK.
Dans la fenêtre de document, un contour fin de couleur grise délimite
la région répétée. (il vous faudra désélectionner le tableau pour le voir.)
Par la suite, lors de l’affichage de l’aperçu dans un navigateur, le
contour gris disparaît et la sélection est développée pour afficher les
éléments répétés spécifiés dans le fichier XML.
Dreamweaver réduit également la longueur de l’espace réservé pour
données XML. En effet, Dreamweaver met à jour le chemin XPath de
l’espace réservé afin qu’il soit relatif au chemin de l’élément répété. Pour
plus d’informations à ce sujet, consultez la section Données XML et
éléments répétés dans Utilisation de Dreamweaver.
6.
Enregistrez la page, puis affichez un aperçu de votre travail dans un
navigateur en appuyant sur F12 (Windows) ou sur Option+F12
(Macintosh).
Le navigateur affiche à présent la page, qui contient chaque plat du
jour.
208 Didacticiel : Affichage de données XML
Association de la page XSLT à la
page XML
Une fois votre page XSLT terminée, vous devez l’associer à la page XML.
Lorsque vous utilisez Dreamweaver pour lier la page, Dreamweaver insère
un lien vers la page XSLT en haut de la page XML.
La page XML est la page à laquelle les visiteurs de votre site accèdent
lorsqu’ils consultent la page en ligne. Ils doivent en effet accéder à la page
contenant les données (le fichier XML), plutôt qu’à la page contenant les
styles (la page XLST).
REMARQUE
Les fichiers XML et XSL que vous utilisez dans les transformations côté
client doivent résider dans un même répertoire. Si tel n’est pas le cas, le
navigateur lit le fichier XML et trouve la page XLST à utiliser pour la
transformation, mais ne peut pas localiser les actifs (feuilles de style,
images etc.) définis par les liens relatifs dans la page XSLT.
1.
La page xml_menu.xsl étant ouverte dans la fenêtre de document,
ouvrez si besoin est le panneau Liaisons (Fenêtre > Liaisons).
2.
Dans le panneau Liaisons, double-cliquez sur Schéma pour specials.xml
pour ouvrir le fichier specials.xml. (Vous devez double-cliquer sur les
mots et non sur l’icône de page.)
3.
Sélectionnez Commandes > Associer une feuille de style XSLT.
4.
Dans la boîte de dialogue Associer une feuille de style XSLT, cliquez sur
le bouton Parcourir, localisez et sélectionnez la page xml_menu.xsl, puis
cliquez sur OK.
5.
Cliquez sur OK pour fermer la boîte de dialogue Associer une feuille de
style XSLT.
Association de la page XSLT à la page XML 209
Dreamweaver insère la référence à la page XSLT en haut du document
XML.
6.
Enregistrez la page specials.xml.
7.
Affichez un aperçu de la page XML (et non de la page XSLT) dans un
navigateur en appuyant sur F12 (Windows) ou sur Option+F12
(Macintosh).
La page XML est affichée dans un navigateur et contient les mises en
forme créées dans la page XSLT que vous avez créée.
210 Didacticiel : Affichage de données XML
Pour rappel, les visiteurs de votre site accéderont à la page XML (et non
à la page XSLT) une fois les deux pages déployées sur votre serveur.
Pour plus d’informations, consultez la section Transformations XSL côté
client dans Utilisation de Dreamweaver (Aide > Utilisation de
Dreamweaver).
Autres options de déploiement
Dans ce didacticiel, vous avez appris à créer une page XSLT entière et à
l’utiliser dans une transformation côté client. Vous pouvez également
utiliser des pages XSLT entières dans les transformations côté serveur. Dans
ce cas, la procédure de création de la page est identique.
Les transformations côté serveur s’utilisent cependant plutôt avec les
fragments XSLT. Un fragment XSLT est un segment de code utilisé par un
document distinct et qui affiche des données XML formatées.
Pour une courte présentation des pages et des fragments XSLT, consultez la
section Pages XSLT, page 194. Pour des informations plus complètes sur le
fonctionnement des pages XSLT entières et des fragments XSLT, consultez
la section Transformations XSL côté serveur dans Utilisation de Dreamweaver
(Aide > Utilisation de Dreamweaver).
Pour toute ressource supplémentaire, notamment des didacticiels sur
l’utilisation des fragments XSLT, consultez le site Web
www.macromedia.com/go/dw_xsl_fr.
Le processus à suivre pour effectuer des transformations côté serveur sur les
pages XSLT est le suivant :
■
Créez un site Dreamweaver. Consultez la section Chapitre 2,
Configuration d'un site Dreamweaver dans Utilisation de Dreamweaver.
■
Choisissez une technologie de serveur et configurez un serveur
d’application. Consultez la section Configuration d'un serveur
d'application dans Utilisation de Dreamweaver.
■
Testez le serveur d’application pour vous assurer qu’il fonctionne
correctement. Vous pouvez par exemple créer une page à traiter et vous
assurer que le serveur d’application effectue l’opération requise. Vous
trouverez un didacticiel à ce sujet sur le site www.macromedia.com/go/
dw_xsl_fr.
Autres options de déploiement
211
■
Procédez de l’une des manières suivantes :
■
Sur votre site Dreamweaver, créez un fragment XSLT ou une page
XSLT entière. Consultez la section Création de pages XSLT dans
Utilisation de Dreamweaver.
■
Convertissez une page HTML existante en une page XSLT entière.
Consultez la section Conversion de pages HTML en pages XSLT dans
Utilisation de Dreamweaver.
■
Le cas échéant, associez une source de données XML à la page.
Consultez la section Association de sources de données XML dans
Utilisation de Dreamweaver.
■
Liez vos données XML au fragment XSLT ou à la page XSLT entière.
Consultez la section Affichage de données XML dans des pages XSLT dans
Utilisation de Dreamweaver.
■
Si cela s’impose, ajoutez un objet XSLT Région répétée au tableau ou à
la ligne de tableau contenant le ou les espaces réservés pour données
XML. Consultez la section Affichage d’éléments répétés XML dans
Utilisation de Dreamweaver.
■
Procédez de l’une des manières suivantes :
■
Pour insérer une référence au fragment XSLT dans votre page
dynamique, utilisez le comportement de serveur Transformation
XSL. Consultez la section Insertion de fragments XSLT dans des pages
dynamiques dans Utilisation de Dreamweaver.
■
Supprimez tout le code HTML de la page dynamique, puis utilisez
le comportement de serveur Transformation XSL pour insérer une
référence à la page XSLT entière dans la page dynamique.
■
Envoyez la page dynamique et le fragment XSLT (ou la page XSLT
entière) à votre serveur d’application. Si vous utilisez un fichier XML
local, envoyez-le également.
■
Affichez la page dynamique dans un navigateur. Le serveur
d’application transforme alors les données XML, les insère dans la page
dynamique et les affiche dans le navigateur.
212 Didacticiel : Affichage de données XML
CHAPITRE 11
Didacticiel : Développement
d’une application Web
11
Dans ce didacticiel, vous allez découvrir comment utiliser Macromedia
Dreamweaver pour créer rapidement des applications Web dynamiques
reposant sur des bases de données, ce qui vous permettra d’insérer des
informations provenant d’une base de données dans vos pages Web.
Vous pourrez afficher des données sur les pages Web du site Cafe
Townsend , à l’aide d’un exemple de base de données fournie avec
Dreamweaver. Vous utiliserez également Dreamweaver pour créer un
formulaire d’insertion d’enregistrement pour permettre à vos visiteurs de
laisser des commentaires.
Dans ce didacticiel, vous allez accomplir les tâches suivantes :
Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Passez votre tâche en revue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Ouvrez un document de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Définissez un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . 217
Affichez les enregistrements de la base de données . . . . . . . . . . 221
Ajoutez des champs dynamiques au tableau . . . . . . . . . . . . . . . . 223
Définissez une région répétée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Affichez votre page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Créez un formulaire d’insertion d’enregistrement . . . . . . . . . . . . 225
Copiez les fichiers sur le serveur. . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
213
Avant de commencer
Vous devez construire votre environnement de travail Dreamweaver pour le
développement d’applications avant de pouvoir terminer ce didacticiel.
Pour des informations sur la configuration, voir le chapitre de
configuration approprié pour votre serveur d’applications dans la liste
suivante. Si vous ne savez pas quel serveur d’application utiliser, contactez
votre administrateur système.
■
Annexe C, Configuration d’un exemple de site ColdFusion, page 257
■
Annexe D, Configuration d’un exemple de site ASP.NET, page 275
■
Annexe E, Configuration d’un exemple de site ASP, page 291
■
Annexe F, Configuration d’un exemple de site JSP, page 309
■
Annexe G, Configuration d’un exemple de site PHP, page 327
Ces chapitres de configuration vous indiquent comment compléter les
tâches suivantes :
■
Configurez votre système.
■
Configurez Dreamweaver de sorte qu’il puisse fonctionner avec le
serveur d’application sélectionné.
■
Définissez une connexion à la base de données.
Vous ne pouvez pas terminer ce didacticiel sans avoir effectué ces tâches.
Les captures d’écran présentes dans ce didacticiel représentent les boîtes de
dialogue Macromedia ColdFusion. Vous pouvez néanmoins terminer les
leçons de ce didacticiel en utilisant n’importe quel modèle de serveur pris
en charge par Dreamweaver.
Passez votre tâche en revue
Votre tâche consiste à construire les pages dynamiques suivantes pour le site
Web Cafe Townsend :
■
Une page qui affiche les commentaires déjà présents dans la base de
données.
■
Une page qui permet aux visiteurs du site d’envoyer des commentaires
à l’entreprise, et de les stocker dans une base de données.
214 Didacticiel : Développement d’une application Web
La page qui permet aux cadres de Cafe Townsend de visualiser les
commentaires dans la base de données ressemblera à ce qui suit :
La page qui permet aux visiteurs d’envoyer des commentaires aura
l’apparence suivante :
Passez votre tâche en revue 215
Ouvrez un document de travail
Pour commencer, nous vous conseillons de créer une page contenant une
liste des enregistrements stockés dans la base de données. Parmi les
applications créées dans ce didacticiel, vous formerez une page Web
dynamique qui établit une liste des informations dans le tableau des
commentaires des clients de la base de données. Ensuite, vous allez créer
une autre page Web dynamique qui permet au client d’insérer des
commentaires ou des questions directement dans la base de données.
Commençons par rechercher les documents que vous allez utiliser au fur et
à mesure de la création de ces pages.
1.
Sélectionnez Fenêtre > Fichiers pour ouvrir le panneau Fichiers.
Le panneau Fichiers s’affiche.
2.
Dans le menu déroulant Site, sélectionnez le site Cafe Townsend défini
durant la procédure de configuration.
Pour plus d’informations, voir les chapitres dédiés à la configuration
dans Avant de commencer, page 214.
3.
Dans le panneau Fichiers, double-cliquez sur le fichier « view » pour
l’ouvrir.
Le document s’ouvre dans la fenêtre de document.
216 Didacticiel : Développement d’une application Web
4.
Si le document s’affiche en mode Code, cliquez sur le bouton Afficher
le mode Création (appelé « Création ») ou Afficher les modes Code et
Création (appelé « Fractionner ») dans la barre d’outils du document
pour pouvoir utiliser les exemples d’écran fournis au cours de cette leçon
afin de contrôler votre progression.
Définissez un jeu
d’enregistrements
Vous allez maintenant créer un jeu d’enregistrements pour sélectionner les
données que vous voulez afficher. Un jeu d’enregistrements est un
ensemble d’informations extraites d’une base de données par une requête
de base de données. Dans ASP.NET, un jeu d’enregistrements est désigné
par le terme Ensemble de données. Une requête de base de données
constitue un procédé de demande de données dans une base de données en
utilisant un critère spécifique de recherche, le plus souvent dans un langage
nommé SQL. Vous pouvez ensuite utiliser les informations extraites
comme source de contenu pour vos pages dynamiques.
Dreamweaver offre une interface facile à utiliser qui permet de créer des
requêtes SQL simples (vous n’avez pas à connaître le langage SQL pour
créer un jeu d’enregistrements dans Dreamweaver).
Pour ce faire, vous allez créer un jeu d’enregistrements qui sélectionne
toutes les valeurs de la table COMMENTS dans la base de données du
didacticiel.
REMARQUE
Avant de terminer cette procédure, vous devez établir une connexion avec
la base de données. Pour plus d’informations, consultez la section Avant
de commencer, page 214.
1.
Dans le document Cafe Townsend ouvert dans Dreamweaver, placez le
point d’insertion sous l’en-tête de « Customer Comments ».
2.
Ouvrez la boîte de dialogue Jeu d’enregistrements ou (pour ASP.NET)
la boîte de dialogue Ensemble de données en effectuant l’une des
opérations suivantes :
Définissez un jeu d’enregistrements 217
■
Dans la catégorie Application de la barre Insérer, cliquez sur le
bouton Jeu d’enregistrement ou (pour ASP.NET) sur le bouton
Ensemble de données.
■
Sélectionnez Fenêtre > Liaisons pour ouvrir le panneau Liaisons,
puis cliquez sur le bouton plus (+) et sélectionnez Jeu
d’enregistrements ou Ensemble de données (pour ASP.NET).
La boîte de dialogue Jeu d’enregistrements ou (pour ASP.NET) la boîte
de dialogue Ensemble de données s’affiche.
REMARQUE
Si cette boîte de dialogue semble plus complexe que celle de l’illustration
ci-après, cliquez sur le bouton Simple.
3.
Dans la zone de texte Nom, tapez rs_Comments.
218 Didacticiel : Développement d’une application Web
4.
Dans le menu déroulant Source de données (ColdFusion) ou
Connexion (autres types de pages de serveur), choisissez
connTownsend.
La boîte de dialogue Jeu d’enregistrements ou Ensemble
d’enregistrements est mise à jour à l’aide des informations de la base de
données.
5.
Le cas échéant, entrez le nom utilisateur et mot de passe associés à la
source de données ou à la connexion. Laissez ces cases vierges si vous
n’avez pas précisé de nom d’utilisateur ou de mot de passe lors de la
configuration de la source de données.
6.
N’apportez pas de modification au menu déroulant Table
(COMMENTS est déjà sélectionné).
7.
Dans Colonnes, vérifiez que Toutes est activé afin de sélectionner
l’ensemble des colonnes de la table.
8.
Assurez-vous que Aucun est activé dans le menu déroulant Filtre, afin
de sélectionner toutes les rangées.
Définissez un jeu d’enregistrements 219
9.
Dans le premier menu déroulant Trier, choisissez LAST_NAME puis,
dans le second menu déroulant, choisissez Croissant.
Ceci indique que les enregistrements extraits seront classés par nom de
famille des clients dans l’ordre alphabétique.
10. Cliquez sur Tester pour tester le jeu d’enregistrements ou l’ensemble de
données.
Les enregistrements de la base de données qui correspondent aux
critères de sélection du jeu d’enregistrements ou de l’ensemble de
données sont affichés dans la fenêtre Tester l’instruction SQL. Dans le
cas présent, vous avez sélectionné toutes les données du tableau.
11.
Cliquez sur OK pour fermer la fenêtre Tester l’instruction SQL.
220 Didacticiel : Développement d’une application Web
12. Cliquez sur OK pour fermer la
boîte de dialogue Jeu d’enregistrements
ou Ensemble de données et créer un jeu d’enregistrements ou un
ensemble de données.
Le jeu d’enregistrements s’affiche dans le panneau Liaisons. La fenêtre
du document n’est pas modifiée.
CO NS EIL
Affichez les enregistrements de
la base de données
Si tous les champs du
jeu d’enregistrements
ne s’affichent pas
dans le panneau
Liaisons, cliquez sur
le bouton Plus (+)
(Windows) ou sur la
flèche
d’agrandissement
(Macintosh) en
regard du jeu
d’enregistrements
(rs_Comment) pour
développer sa
structure.
Vous allez ensuite créer une page qui contient la liste des enregistrements
de la table COMMENTS. Elle sera générée dynamiquement et vous
n’aurez pas à saisir manuellement les informations.
Commencez par créer un tableau de structure des données.
1.
Dans le document Cafe Townsend, placez le point d’insertion dans la
ligne vide sous le titre «Customer Comments».
2.
Insérez un tableau en procédant de l’une des manières suivantes :
■
Dans la barre Insérer, sélectionnez la catégorie Commun, puis cliquez
sur le bouton Tableau ou faites glisser le bouton vers le document.
■
Choisissez Insertion > Tableau.
La boîte de dialogue Tableau apparaît.
3.
Dans la boîte de dialogue, définissez les options suivantes :
■
Dans le champ Lignes, tapez 2.
■
Dans le champ Colonnes, tapez 4.
■
Laissez Largeur de tableau fixée à 100 pour cent.
Affichez les enregistrements de la base de données 221
■
Laissez 1 comme valeur du champ Largeur de la bordure.
■
Dans le champ Marge intérieure des cellules, tapez 2.
■
Dans le champ Espacement entre les cellules, tapez 2.
■
Dans la section En-tête, sélectionnez l’option Haut.
Dans la zone de texte Résumé, entrez une description textuelle du
tableau pour aider les visiteurs qui utilisent des lecteurs d’écran. Entrez
par exemple :
Ce tableau répertorie les commentaires entrés par les visiteurs dans la
base de données.
Une fois les champs de la boîte de dialogue renseignés, elle doit avoir
l’apparence suivante :
4.
Cliquez sur OK.
Le tableau est inséré dans le document.
5.
6.
Dans la ligne supérieure du tableau, ajoutez des étiquettes :
■
Dans la première cellule du tableau, tapez First Name.
■
Dans la cellule suivante, tapez Last Name.
■
Dans la cellule suivante, tapez E-mail.
■
Dans la dernière cellule, tapez Comments.
Enregistrez votre page.
222 Didacticiel : Développement d’une application Web
Ajoutez des champs dynamiques
au tableau
Vous pouvez maintenant ajouter les champs du jeu d’enregistrements au
tableau.
1.
2.
3.
Ouvrez le panneau Liaisons, le cas échéant, en procédant de l’une des
manières suivantes :
■
Sélectionnez Fenêtre > Liaisons.
■
Cliquez sur la flèche d’agrandissement du groupe de panneaux
Application, puis choisissez le panneau Liaisons.
Ajoutez le champ FIRST_NAME dans le tableau en procédant de l’une
des manières suivantes :
■
Placez le point d’insertion dans la cellule du tableau qui se trouve
en dessous de l’étiquette First Name, puis, dans le panneau
Liaisons, choisissez FIRST_NAME et cliquez sur Insérer.
■
Faites glisser FIRST_NAME du panneau Liaisons vers la cellule du
tableau sous l’étiquette First Name.
Reprenez l’étape 2 pour ajouter les champs LAST_NAME, EMAIL et
COMMENTS (et non COMMENT_ID) au tableau.
Votre tableau devrait avoir l’apparence de l’exemple suivant. Vous
devrez peut-être élargir votre fenêtre du document pour l’afficher en
entier.
4.
Enregistrez votre page.
Ajoutez des champs dynamiques au tableau 223
Définissez une région répétée
Le tableau que vous venez de créer ne contient qu’une seule ligne de
données. Pour afficher tous les enregistrements, vous devez définir cette
ligne de tableau comme région répétée. Lorsqu’il sera affiché dans un
navigateur, le tableau comportera une ligne par enregistrement
correspondant aux critères de recherche de jeu d’enregistrements.
1.
2.
Dans la fenêtre de document, sélectionnez la ligne inférieure du tableau
en procédant de l’une des manières suivantes :
■
Cliquez dans l’une des cellules puis, dans le sélecteur de balises,
cliquez sur la dernière balise <tr> de la liste.
■
Placez le pointeur sur le côté gauche de la ligne dans le tableau et,
lorsque le pointeur se transforme en flèche orientée vers la droite,
cliquez sur la bordure de ligne pour sélectionner la ligne.
Créez une région répétée en procédant de l’une des manières suivantes :
■
Dans le panneau Comportements de serveur, cliquez sur le bouton
plus (+), puis choisissez Région répétée.
■
Dans la catégorie Application de la barre Insérer, cliquez sur le
bouton Région répétée.
■
Choisissez Insertion > Objets d’application > Région répétée.
La boîte de dialogue Région répétée s’affiche.
3.
Dans la boîte de dialogue, cliquez sur OK pour accepter les paramètres
par défaut.
Un contour s’affiche autour de la ligne du tableau et un onglet s’affiche
au-dessus à gauche pour indiquer qu’il s’agit d’une région répétée.
L’étiquette de l’onglet varie selon la technologie de serveur utilisée.
4.
Enregistrez votre page.
224 Didacticiel : Développement d’une application Web
Affichez votre page
Vous devez ensuite afficher vos pages. Pour afficher une page dans
Dreamweaver comme si elle était traitée par le serveur, utilisez l’affichage
des données dynamiques.
Alors que le document Cafe Townsend est encore actif, procédez de l’une
des manières suivantes pour afficher les données dans vos pages:
■
Dans la barre d’outils du document, cliquez sur le bouton Affichage des
données dynamiques.
■
Choisissez Affichage > Données dynamiques.
La page est mise à jour afin d’afficher les données extraites de la base de
données.
Créez un formulaire d’insertion
d’enregistrement
La prochaine page à créer pour le site Web Cafe Townsend permet aux
utilisateurs d’ajouter des commentaires dans la base de données.
Créez un formulaire d’insertion d’enregistrement 225
Dreamweaver comprend plusieurs objets d’application qui facilitent et
accélèrent la création de pages d’application Web. Vous allez utiliser un
objet d’application pour créer la page d’insertion. L’objet d’application
Insérer un enregistrement crée un formulaire HTML, des champs de
données qui correspondent à des champs dans la base de données et les
scripts de serveur nécessaires à la création d’une page dynamique.
Ajout d’un objet d’application Formulaire
d’insertion d’enregistrement
Vous pouvez utiliser un objet d’application Formulaire d’insertion
d’enregistrement pour créer un formulaire permettant aux visiteurs d’entrer
des données dans une base de données. L’objet d’application vous permet
de sélectionner les champs à inclure dans le formulaire, d’attribuer une
étiquette aux champs et de choisir les types d’objet de formulaire à insérer.
Lorsqu’un utilisateur saisit des données dans les champs du formulaire et
qu’il clique sur le bouton d’envoi, un nouvel enregistrement est inséré dans
une base de données. Vous pouvez également définir une page qui s’ouvrira
après l’envoi d’un enregistrement afin que l’expéditeur sache que la base de
données a été mise à jour.
1.
Dans le panneau Fichiers, localisez le fichier appelé « send », puis
double-cliquez sur le fichier pour l’ouvrir.
Le document s’ouvre dans la fenêtre de document.
226 Didacticiel : Développement d’une application Web
2.
Placez le point d’insertion dans la ligne vide du tableau sous celle qui
contient le paragraphe.
L’objet de l’application est insérée dans la la ligne vide.
3.
Procédez de l’une des manières suivantes pour ajouter un objet
d’insertion d’enregistrement dans votre page :
■
Dans la catégorie Application de la barre Insérer, sélectionnez
l’assistant de formulaire d’insertion d’enregistrement dans le menu
contextuel Insérer un enregistrement.
■
Sélectionnez Insertion > Objets d’application > Insérer un
enregistrement > Assistant de formulaire d’insertion
d’enregistrement.
La boîte de dialogue Formulaire d’insertion d’enregistrement s’affiche.
4.
Dans le menu déroulant Source de données (ColdFusion) ou
Connexion, choisissez connTownsend.
5.
Le cas échéant, entrez le nom utilisateur et mot de passe associés à la
source de données ou à la connexion.
Laissez ces cases vierges si vous n’avez pas précisé de nom d’utilisateur
ou de mot de passe lors de la configuration de la source de données ou
de la connexion.
6.
Dans le menu déroulant Insérer dans la table, assurez-vous que
COMMENTS est sélectionné.
Créez un formulaire d’insertion d’enregistrement 227
7.
Cliquez sur le bouton Parcourir en regard de la zone de texte Après
l’insertion, aller à; ou bien (pour ASP.NET) en regard de la zone de texte
En cas de réussite, aller à.
8.
Dans la boîte de dialogue qui s’affiche, sélectionnez le fichier appelé
« view », puis cliquez sur OK pour fermer la boîte.
Pour des besoins de test, vous voulez voir la page qui affiche tous les
commentaires après que vous en ayez saisi un. Après avoir testé
l’application Web, changez ce réglage pour afficher une page qui
remercie le visiteur pour son commentaire.
9.
La procédure de l’assistant sera complétée dans la section suivante.
Créez le formulaire d’insertion
Dans la section Champs du formulaire de l’assistant de formulaire
d’insertion d’enregistrement, définissez le formulaire dans lequel les
visiteurs doivent saisir des informations.
1.
2.
3.
Dans cet assistant, supprimez les champs que vous ne souhaitez pas
inclure dans le formulaire en procédant de l’une des manières suivantes:
■
Sélectionnez COMMENT_ID, puis cliquez sur le bouton moins (-).
■
Sélectionnez TELEPHONE, puis cliquez sur le bouton moins (-).
■
Sélectionnez SUBMIT_DATE, puis cliquez sur le bouton moins (-).
■
Sélectionnez ANSWERED, puis cliquez sur le bouton moins (-).
Si vous créez une page pour ASP.NET, modifiez l’ordre alphabétique
des champs de formulaire, en procédant de la manière suivante :
■
Dans la liste Colonne, sélectionnez COMMENTS, puis cliquez sur
le bouton représentant une flèche vers le bas pour placer
COMMENTS sous LAST_NAME.
■
Dans la liste Colonne, sélectionnez EMAIL, puis cliquez sur le
bouton représentant une flèche vers le bas pour placer EMAIL sous
LAST_NAME.
Dans la liste Champs du formulaire, sélectionnez FIRST_NAME pour
spécifier la façon dont le champ s’affichera dans le formulaire.
228 Didacticiel : Développement d’une application Web
4.
Dans la zone de texte Etiquette, entrez First Name à la place du texte
par défaut.
Cette étiquette apparaîtra dans le formulaire HTML en regard de la
zone de texte.
5.
6.
Définissez le type d’objet de formulaire pour le champ en utilisant l’une
des méthodes suivantes :
■
Si vous utilisez ASP.NET, acceptez l’option par défaut Champ de
texte du menu contextuel Afficher en tant que, puis, dans le menu
déroulant Envoyer en tant que, modifiez la valeur par défaut
WChar à VARCHAR.
■
Si vous utilisez une technologie de serveur autre que ASP.NET,
acceptez l’option par défaut Champ de texte du menu contextuel
Afficher en tant que, puis, dans le menu déroulant Envoyer en tant
que, acceptez l’option Texte par défaut.
Laissez le champ Valeur par défaut vide.
Pour certaines applications Web, ce champ vous permet de définir un
texte initial pour le champ permettant à l’utilisateur de connaître le
type d’informations à fournir. Dans le cas présent, l’étiquette de champ
« First Name » indique clairement que l’utilisateur doit entrer son
prénom.
Lorsque vous avez complété tous les champs, l’entrée FIRST_NAME
ressemble à la suivante:
7.
Répétez les étapes 3 à 6 pour le champ LAST_NAME, dont l’étiquette
doit être Last Name, qui doit s’afficher comme un champ de texte et être
soumis sous forme textuelle.
Créez un formulaire d’insertion d’enregistrement 229
8.
Répétez les étapes 3 à 6 pour le champ EMAIL, dont l’étiquette doit être
Email, qui doit s’afficher comme un champ de texte et être soumis sous
forme textuelle.
9.
Dans la liste Champs du formulaire, sélectionnez COMMENTS.
10. Dans
11.
le champ Etiquette, saisissez Comments.
Définissez le type d’objet de formulaire pour le champ Comments du
formulaire en utilisant l’une des méthodes suivantes :
■
Si vous utilisez ASP.NET, sélectionnez Zone de texte dans le menu
contextuel Afficher en tant que, puis dans le menu déroulant
Envoyer en tant que, sélectionnez VARCHAR.
■
Si vous utilisez une technologie de serveur autre que ASP.NET,
sélectionnez Zone de texte dans le menu contextuel Afficher en tant
que, puis dans le menu contextuel Envoyer en tant que, acceptez
l’option par défaut Texte.
Lorsque vous avez renseigné tous les champs, la boîte de dialogue
ressemble à la suivante :
12. Cliquez
sur OK pour fermer la boîte de dialogue et créer le formulaire
d’insertion d’enregistrement.
230 Didacticiel : Développement d’une application Web
L’objet d’application Formulaire d’insertion d’enregistrement est inséré
dans le document.
13.
Enregistrez votre page.
Copiez les fichiers sur le serveur
Vous allez ensuite copier les fichiers mis à jour sur le serveur. Une fois la
copie terminée, vous allez afficher la page d’insertion d’enregistrements,
ajouter un commentaire ou une question, puis envoyer les données afin de
tester l’application.
1.
Dans le panneau Fichiers, pour télécharger les fichiers vers votre serveur,
cliquez (Windows) ou maintenez la touche Commande enfoncée
(Macintosh) sur les fichiers appelés « view » et « send », puis cliquez sur
l’icône bleue (en forme de flèche) Placer fichiers.
2.
Lorsque Dreamweaver vous invite à copier les fichiers dépendants sur le
serveur, sélectionnez Oui.
R EM A R Q U E
Sur certains modèles, Dreamweaver crée un dossier Connexions dans votre
dossier local. Vous devez également copier ce dossier sur votre serveur
distant pour que l’application Web fonctionne. Dans le panneau Fichiers,
sélectionnez le dossier Connexions, puis cliquez sur le bouton Placer le(s)
fichier(s) pour copier le dossier sur votre serveur.
Copiez les fichiers sur le serveur 231
3.
Lorsque le fichier appelé « send » est le document actif, sélectionnez
Fichier > Aperçu dans le navigateur ou appuyez sur F12 pour afficher
votre page.
4.
Tapez les données de test dans le formulaire, puis cliquez sur le bouton
Insérer un enregistrement dans le document pour envoyer les données.
Le serveur d’application reçoit les informations envoyées, met à jour la
base de données et affiche la page de commentaires avec l’information
mise à jour.
Documentation connexe
Ce didacticiel vous a présenté des informations sur quelques outils que
vous pouvez utiliser pour créer des pages dynamiques reposant sur des
données. Vous avez appris à créer des jeux d’enregistrements qui vous
permettent de définir les données de votre site Web. Vous avez également
appris à utiliser un objet d’application Dreamweaver pour créer une
application Web qui vous permet d’interagir avec les données de la base de
données.
Pour plus d’informations sur le développement d’applications Web,
reportez-vous aux rubriques suivantes dans l’aide Utilisation de
Dreamweaver :
■
Récupération des données spécifiques à une page
■
Définition de sources de contenu dynamique
■
Ajout d'un contenu dynamique à une page Web
■
Affichage des enregistrements de base de données
232 Didacticiel : Développement d’une application Web
4
PARTIE 4
Annexes
La quatrième partie de ce manuel contient des appendices qui fournissent
des compléments sur les concepts abordés dans les sections précédentes.
Cette partie du manuel contient les sections suivantes :
Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . 235
Installation d’un serveur Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Configuration d’un exemple de site ColdFusion . . . . . . . . . . . . . 257
Configuration d’un exemple de site ASP.NET . . . . . . . . . . . . . . . 275
Configuration d’un exemple de site ASP. . . . . . . . . . . . . . . . . . . . . 291
Configuration d’un exemple de site JSP . . . . . . . . . . . . . . . . . . . . 309
Configuration d’un exemple de site PHP . . . . . . . . . . . . . . . . . . . 327
233
ANNEXE A
Description des
applications Web
A
Une application Web est un ensemble de pages qui interagissent avec les
utilisateurs, les unes avec les autres, ainsi qu’avec les différentes ressources
d’un serveur Web, notamment les bases de données. Familiarisez-vous avec
les concepts abordés dans ce chapitre avant de créer vos propres
applications Web.
Ce chapitre contient les rubriques suivantes :
Présentation des applications Web . . . . . . . . . . . . . . . . . . . . . . . . 235
Fonctionnement d’une application Web. . . . . . . . . . . . . . . . . . . . 238
Création de pages dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Choix d’une technologie de serveur. . . . . . . . . . . . . . . . . . . . . . . . 245
Terminologie du développement d’applications Web . . . . . . . . 246
Présentation des applications
Web
Une application Web est un site Web dont le contenu des pages est
partiellement ou entièrement indéterminé. Le contenu final d’une page est
déterminé uniquement lorsque l’utilisateur requiert une page depuis le
serveur Web. Le contenu final d’une page variant d’une requête à une autre
en fonction des actions de l’utilisateur, ce type de page est appelé page
dynamique.
Les applications Web sont construites de manière à répondre à différents
types de défis et de problèmes. Cette section décrit les utilisations courantes
des applications Web et présente un exemple simple.
235
Utilisations courantes des applications
Web
Les applications Web peuvent être utilisées de diverses façons par les
visiteurs d’un site et les développeurs, notamment pour :
■
Permettre aux utilisateurs de trouver rapidement et facilement des
informations sur un site Web riche en contenu.
Ce type d’applications Web permet aux visiteurs du site de rechercher,
d’organiser et de parcourir le contenu à leur convenance. Les exemples
incluent des réseaux intranet d’entreprises, tels Microsoft MSDN
(www.msdn.microsoft.com) et Amazon.com (www.amazon.com).
■
Collecter, enregistrer et analyser des données fournies par les visiteurs
du site.
Auparavant, les données saisies dans des formulaires HTML étaient
envoyées sous forme de courriels aux employés ou sous forme
d’applications CGI pour le traitement. Une application Web peut
enregistrer les données d’un formulaire directement dans une base de
données, ainsi qu’extraire les données et créer des rapports Web pour
l’analyse. Les exemples incluent des pages de banque en ligne et de
contrôle des stocks, ainsi que des sondages et des formulaires de
commentaires.
■
Mettre à jour des sites Web dont le contenu change souvent.
Une application Web évite au créateur d’avoir à mettre fréquemment à
jour le code HTML du site. Les fournisseurs de contenu, tels que les
rédacteurs en chef, alimentent l’application Web et celle-ci met
automatiquement le site à jour, Il peut s’agir de The Economist
(www.economist.com) et CNN (www.cnn.com).
236 Description des applications Web
Exemple d’application Web
Janet, professionnelle de la création Web, utilise Macromedia
Dreamweaver depuis de nombreuses années. Elle est chargée de la
maintenance des sites intranet et Internet d’une entreprise de taille
moyenne comptant 1 000 employés. Christophe, du service des Ressources
humaines, lui soumet un jour un problème. Ce service gère un programme
de mise en forme qui attribue des points aux employés pour chaque
kilomètre parcouru en marchant, en courant ou à vélo. Tous les mois,
chaque employé doit communiquer à Christophe le nombre total de
kilomètres parcourus, par courriel. A la fin du mois, Christophe rassemble
tous les courriels et récompense chaque employé avec des prix en espèces,
en fonction de leur total de points.
Le problème est que ce programme de mise en forme a suscité de plus en
plus d’enthousiasme. Le nombre de participants est si important que
Christophe est submergé de courriels à chaque fin de mois. Il demande
donc à Julie si une solution Web serait envisageable.
Julie suggère une application Web basée sur un réseau intranet exécutant les
tâches suivantes :
■
Permettre aux employés de saisir leur kilométrage sur une page Web au
moyen d’un simple formulaire HTML ;
■
Stocker le kilométrage des employés dans une base de données ;
■
Calculer les points de mise en forme en fonction du kilométrage ;
■
Permettre aux employés de suivre leurs progrès au fil des mois ;
■
Permettre à Christophe d’accéder au total des points en un seul clic à
chaque fin de mois.
Janet met rapidement en place l’application à l’aide de Dreamweaver,
logiciel doté des outils nécessaires à la création rapide et facile de ce type
d’applications.
Présentation des applications Web 237
Fonctionnement d’une
application Web
Une application Web est un ensemble de pages statiques et dynamiques.
Une page statique n’est pas modifiée lorsqu’un visiteur la consulte : le
serveur Web transmet la page au navigateur qui la sollicite sans la modifier.
A l’inverse, une page Web dynamique est modifiée par le serveur avant d’être
transmise au navigateur qui la sollicite. C’est pourquoi cette page est dite
dynamique.
Vous pouvez par exemple créer une page pour afficher les résultats du
programme de mise en forme et faire en sorte que certaines informations
(telles le nom et les résultats de l’employé) soient déterminées lorsqu’une
page est sollicitée par un employé donné.
Traitement des pages Web statiques
Un site Web statique comprend un jeu de pages et fichiers HTML associés
hébergés sur un ordinateur exécutant un serveur Web.
Un serveur Web est un logiciel qui fournit des pages Web en réponse à des
requêtes de navigateurs Web. Une requête de page est générée lorsqu’un
utilisateur clique sur un lien d’une page Web, choisit un signet dans le
navigateur ou saisit une URL dans le champ Adresse du navigateur.
Le contenu final d’une page Web statique est déterminé par le créateur de
la page et n’est pas modifié lorsqu’un utilisateur la demande. Exemple :
<html>
<head>
<title>Page d'informations de Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est un des principaux constructeurs
automobile.</p>
</body>
</html>
238 Description des applications Web
Chaque ligne du code HTML de la page est rédigée par le créateur avant
que la page ne soit placée sur le serveur. Ce code HTML n’étant pas
modifié une fois la page sur le serveur, cette page est dite statique.
REMARQUE
Au sens strict du terme, une page dite « statique » peut ne pas être
statique du tout. Une image survolée ou une animation Flash (un fichier
SWF), par exemple, peuvent animer une page statique. Cependant, ce
guide qualifie une page de statique si elle est adressée au navigateur sans
modifications.
Lorsqu’un serveur Web reçoit une requête de page statique, il lit la requête,
localise la page et la transmet au navigateur qui l’a sollicitée, tel qu’indiqué
dans la figure ci-dessous :
Etape 1 - Le
navigateur
Web
demande une
page statique.
Navigateur Web
Requête
Réponse
SERVEUR WEB
Etape 2 - Le
serveur Web
trouve la
page.
Etape 3 - Le
serveur Web
envoie la page au
navigateur
demandeur.
<HTML>
<p>Hi
</HTML>
Page statique
Dans le cas des applications Web, certaines lignes de code ne sont pas
déterminées au moment où l’utilisateur sollicite la page. Ces lignes doivent
être déterminées via un mécanisme avant que la page ne soit transmise au
navigateur. Ce mécanisme est présenté dans la section suivante.
Fonctionnement d’une application Web 239
Traitement des pages dynamiques
Lorsqu’un serveur Web reçoit une requête de page Web statique, il
transmet directement cette page au navigateur qui la demande. Le serveur
Web réagit différemment lorsqu’il reçoit une requête de page dynamique :
Il transmet la page à un logiciel spécial chargé de terminer la page. Ce
logiciel spécial est appelé un serveur d’application.
Le serveur d’application lit le code de la page, termine cette page en
fonction des instructions figurant dans le code, puis en retire le code. Il en
résulte une page statique que le serveur d’application renvoie au serveur
Web, lequel transmet alors cette page au navigateur demandeur. Le
navigateur reçoit uniquement du code HTML pur lorsque la page lui est
transmise. Voici un aperçu du processus :
Etape 1 - Le
navigateur Web
demande une
page dynamique.
Navigateur Web
Requête
Réponse
Etape 5 - Le
serveur Web
envoie la page
achevée au
navigateur
requérant.
SERVEUR WEB
Etape 2 - Le
serveur Web
recherche la
page et la
transmet au
serveur
d’application.
Etape 3- Le
serveur
d’application
analyse la page à
la recherche
d’instructions et la
termine.
240 Description des applications Web
<HTML>
<code>
</HTML>
<HTML>
<p>Hi
</HTML>
Etape 4 - Le
serveur
d’application
transmet la page
terminée au
serveur Web.
Serveur d’application
Accès à une base de données
Un serveur d’application vous permet de travailler avec des ressources côté
serveur telles que les bases de données. Une page dynamique peut, par
exemple, ordonner au serveur d’application d’extraire des données de la
base de données et de les insérer dans le code HTML de la page. Pour plus
d’informations, voir Annexe A, Guide du débutant en base de données dans
Utilisation de Dreamweaver.
L’instruction d’extraction des données de la base est nommée requête de
base de données. Une requête est composée de critères de recherche rédigés
dans un langage de base de données appelé SQL (Structured Query
Language). La requête SQL est rédigée dans les scripts ou les balises de la
page côté serveur.
Un serveur d’application ne peut pas communiquer directement avec une
base de données car le format propriétaire de cette dernière rend les
données indéchiffrables, de la même manière qu’un document Microsoft
Word ouvert dans Bloc-notes ou BBEdit peut être indéchiffrable. Le
serveur d’application peut communiquer avec la base de données
uniquement via un pilote de base de données, logiciel faisant office
d’interprète entre le serveur d’application et la base de données.
Une fois que le pilote a établi la communication, la requête est exécutée par
rapport à la base de données et un jeu d’enregistrements est créé. Un jeu
d’enregistrements est un ensemble de données extraites d’une ou de
plusieurs tables de base de données. Le jeu d’enregistrements est renvoyé au
serveur d’application, lequel utilise les données pour terminer la page.
Voici un exemple simple de requête de base de données rédigée en SQL :
SELECT lastname, firstname, fitpoints
FROM employees
Cette instruction crée un jeu d’enregistrements à trois colonnes et le
remplit de lignes comportant le nom, le prénom et les points forts en forme
de tous les employés de la base de données. Pour plus d’informations, voir
Annexe B, Initiation à SQL dans Utilisation de Dreamweaver.
Fonctionnement d’une application Web 241
Voici une illustration du processus d’interrogation de la base de données
via des requêtes et de la transmission des données au navigateur :
Etape 1 - Le
navigateur Web
demande une page
dynamique.
Navigateur Web
Requête
Réponse
Etape 9 - Le serveur
Web envoie la page
achevée au
navigateur requérant.
SERVEUR WEB
Etape 2 - Le
serveur Web
recherche la page et
la transmet au
serveur
d’application.
<HTML>
<code>
</HTML>
Etape 3 - Le serveur
d’application analyse
la page à la recherche
d’instructions.
Etape 4 - Le serveur
d’application envoie
une requête au pilote
de la base de
données.
Etape 5 - Le pilote
exécute la requête au
niveau de la base de
données.
<HTML>
<p>Hi
</HTML>
Etape 8 - Le serveur
d’application insère
les données dans la
page, puis transmet la
page au serveur Web.
Serveur d’application
Interrogation
Jeu d’enregistrements
Pilote de base de données
Etape 7 - Le pilote
transmet le jeu
d’enregistrements au
serveur d’application.
Etape 6 - Le jeu
d’enregistrements est
renvoyé au pilote.
Base de données
Vous pouvez utiliser pratiquement toutes les bases de données avec votre
application Web, à condition que les pilotes de base de données appropriés
soient installés sur le serveur.
242 Description des applications Web
Si vous prévoyez de créer de petites applications peu onéreuses, vous
pouvez utiliser une base de données fichier, créée par exemple sous
Microsoft Access. Si vous prévoyez de créer des applications stratégiques
robustes, vous pouvez utiliser une base de données serveur, créée par
exemple avec Microsoft SQL Server, Oracle 9i ou MySQL.
Si votre base de données réside sur un système autre que votre serveur Web,
assurez-vous qu’il existe une connexion rapide entre les deux systèmes pour
un fonctionnement efficace et rapide de votre application Web.
Création de pages dynamiques
La création d’une page dynamique consiste à écrire d’abord le
code HTML, puis à ajouter les scripts ou les balises côté serveur au
code HTML pour rendre la page dynamique. Lorsque vous visualisez le
code obtenu, le langage apparaît incorporé dans le code HTML de la page.
Par conséquent, ces langages sont appelés langages de programmation
HTML intégrés. L’exemple élémentaire ci-dessous utilise le langage CFML
(ColdFusion Markup Language) :
<html>
<head>
<title>Page d'informations de Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est un des principaux constructeurs
automobile.</p>
<!--- début des instructions intégré --->
<cfset department="Sales">
<cfoutput>
<p>Assurez vous de visiter notre page #department#.</p>
</cfoutput>
<!--- fin des instructions intégrés --->
</body>
</html>
Les instructions incorporées dans cette page exécutent les actions
suivantes :
1.
Création d’une variable appelée department et assignation de la chaîne
"Service commercial" à cette variable.
Création de pages dynamiques 243
2.
Insertion de la valeur de la variable, "Service commercial", dans le
code HTML.
Le serveur d’application renvoie la page suivante au serveur Web :
<html>
<head>
<title>Page d'informations de Trio Motors</title>
</head>
<body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est un des principaux constructeurs
automobile.</p>
<p>Assurez vous de visiter notre page du service
commercial.</p>
</body>
</html>
Le serveur Web transmet la page au navigateur requérant, lequel l’affiche
de la manière suivante :
A propos de Trio Motors
Trio Motors est leader dans le domaine de la construction automobile.
Nous vous invitons à visiter la page de notre Service commercial.
Choisissez un langage de script ou de balise en fonction de la technologie
de votre serveur. Les langages les plus employés pour les cinq technologies
de serveur prises en charge par Dreamweaver sont :
Technologie de serveur
Langue
ColdFusion
CFML (ColdFusion Markup Language)
ASP.NET
Visual Basic
C#
Pages ASP (Active Server
Pages)
VBScript
JavaScript
JSP (Java Server Pages)
Java
PHP
PHP
Pour plus d’informations, consultez la section Choix d’une technologie de
serveur, page 245.
Dreamweaver peut créer les scripts ou les balises côté serveur nécessaires au
bon fonctionnement de vos pages. Vous pouvez également les rédiger
manuellement dans l’environnement de codage de Dreamweaver.
244 Description des applications Web
Choix d’une technologie de
serveur
Dreamweaver vous permet de créer des applications Web à partir de l’une
des cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP ou
PHP. Chacune de ces technologies correspond à un type de document dans
Dreamweaver. Le choix d’une technologie pour vos applications Web
repose sur plusieurs facteurs, notamment votre niveau de connaissance des
différents langages de script et le serveur d’application que vous envisagez
d’utiliser.
Si vous n’avez jamais créé d’applications Web ou d’applications en général,
vous préférerez sûrement utiliser ColdFusion en raison de son
environnement de script serveur convivial intégré à Dreamweaver. Si vous
êtes déjà familiarisé avec les autres technologies de serveur, JSP, PHP, ASP
ou ASP.NET par exemple, Dreamweaver les prend également en charge.
Le choix de la technologie de serveur dépend également du serveur
d’application que vous souhaitez utiliser pour l’application Web. Un
serveur d’application est un logiciel qui aide un serveur Web à traiter des
pages Web contenant des scripts ou des balises côté serveur. Par exemple, si
vous disposez de ColdFusion MX 7 Server, vous pouvez choisir
ColdFusion comme technologie de serveur. Si vous avez accès au serveur
Microsoft Internet Information Server 5 (IIS) avec la plate-forme .NET,
vous pouvez choisir ASP.NET. Sélectionnez PHP si vous avez accès à un
serveur Web avec un serveur d’application PHP. En revanche, choisissez
JSP pour les serveurs Web avec serveur d’application JSP, tel que
Macromedia JRun.
Vous trouverez une version de ColdFusion MX 7 destinée aux
développeurs sur le CD Dreamweaver (version Windows uniquement) et
sur le site Web de Macromedia à l’adresse suivante :
www.macromedia.com/go/coldfusion/.
Pour plus d’informations, voir Configuration d'un serveur d'application dans
Utilisation de Dreamweaver.
Pour en savoir davantage sur ColdFusion, sélectionnez ColdFusion dans le
menu Aide.
Pour en savoir plus sur ASP.NET, visitez le site Web Microsoft à l’adresse
suivante : http://msdn.microsoft.com/asp.net/.
Choix d’une technologie de serveur 245
Pour en savoir plus sur ASP, visitez le site Web Microsoft à l’adresse
suivante : http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnanchor/html/activeservpages.asp. (en anglais)
Pour en savoir plus sur JSP, visitez le site Web de Sun Microsystems à
l’adresse suivante : java.sun.com/products/jsp/ (en anglais).
Pour en savoir plus sur PHP, visitez le site Web de PHP à l’adresse
suivante : www.php.net/ (en anglais).
Terminologie du développement
d’applications Web
Cette section regroupe la définition des termes relatifs aux applications
Web fréquemment utilisés.
est un logiciel qui aide un serveur Web à traiter
des pages Web contenant des scripts ou des balises côté serveur. Lorsqu’une
page de ce type est requise par le serveur, le serveur Web transmet cette
page au serveur d’application afin qu’il la traite avant de l’envoyer au
navigateur. Pour plus d’informations, consultez la section Fonctionnement
d’une application Web, page 238.
Un serveur d’application
Les serveurs d’application les plus utilisés sont Macromedia ColdFusion,
Macromedia JRun Server, la plate-forme .NET de Microsoft, IBM
WebSphere et Apache Tomcat.
est un ensemble de données stockées sous forme de
tables. Chaque ligne d’une table correspond à un enregistrement et chaque
colonne correspond à un champ de l’enregistrement, tel qu’illustré dans
l’exemple ci-dessous.
Une base de données
Champs (colonnes)
Numéro
Nom
Prénom
Position
Objectif
Enregistrements
(lignes)
246 Description des applications Web
Un pilote de base de données est un logiciel qui agit comme un
interprète entre un serveur d’application et une base de données. Les
données d’une base de données sont stockées dans un format propriétaire.
Un pilote de base de données permet à l’application Web de lire et de
manipuler des données qui, sans cela, seraient indéchiffrables.
Un système de gestion de base de données (SGBD ou système de base
de données) est un logiciel utilisé pour créer et manipuler des bases
de données. Les systèmes de base de données les plus courants sont
Microsoft Access, Oracle 9i et MySQL.
Une requête de base de données désigne l’opération permettant
d’extraire un jeu d’enregistrements d’une base de données. Une requête est
constituée de critères de recherche exprimés en langage de base de données
appelé SQL. La requête peut, par exemple, spécifier que seules certaines
colonnes ou certains enregistrements doivent être inclus dans le jeu
d’enregistrements.
Une page dynamique est une page Web qui est personnalisée par un
serveur d’application avant qu’elle ne soit transmise à un navigateur. Pour
plus d’informations, consultez la section Fonctionnement d’une application
Web, page 238.
Un jeu d’enregistrements est un ensemble de données extraites d’une ou
plusieurs tables de base de données, comme l’illustre l’exemple suivant :
Numéro
Nom
Prénom
Position
Objectifs
Table de base de données
Nom
Prénom
Position
Table de jeu d’enregistrements
Terminologie du développement d’applications Web 247
Une base de données relationnelle est une base de données contenant
plusieurs tables qui partagent des données. La base de données suivante est
relationnelle car deux tables partagent la colonne DepartmentID.
est une technologie utilisée par un serveur
d’application pour modifier des pages dynamiques lors de l’exécution.
Une technologie de serveur
L’environnement de développement de Dreamweaver prend en charge les
technologies de serveur suivantes :
■
Macromedia ColdFusion
■
Microsoft ASP.NET
■
Pages ASP (Active Server Pages) de Microsoft
■
JSP (Java Server Pages)
■
PHP : Hypertext Preprocessor (PHP)
Vous pouvez également utiliser l’environnement de codage de
Dreamweaver pour développer des pages destinées à une technologie de
serveur quelconque non répertoriée ci-dessus.
Une page statique est une page Web qui n’est pas modifiée par un serveur
d’application avant qu’elle ne soit envoyée à un navigateur. Pour plus
d’informations, consultez la section Traitement des pages Web statiques,
page 238.
est un site Internet dont le contenu des pages
constitutives est partiellement ou entièrement indéterminé. Le contenu
final de ces pages est déterminé uniquement lorsque l’utilisateur requiert
une page depuis le serveur Web. Le contenu final d’une page variant d’une
requête à une autre en fonction des actions de l’utilisateur, ce type de page
est appelé page dynamique.
Une application Web
est un logiciel qui renvoie des pages Web en réponse aux
requêtes de navigateurs Web. Une requête de page est générée lorsqu’un
utilisateur clique sur un lien d’une page Web, choisit un signet dans le
navigateur ou saisit une URL dans le champ Adresse du navigateur.
Un serveur Web
248 Description des applications Web
Les serveurs Web les plus courants sont Microsoft Internet Information
Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape
Enterprise Server et Sun ONE Web Server.
Terminologie du développement d’applications Web 249
250 Description des applications Web
ANNEXE B
Installation d’un serveur
Web
B
Pour développer et tester des pages Web dynamiques, vous avez besoin
d’un serveur Web opérationnel. Ce chapitre explique aux utilisateurs
Windows comment installer et utiliser un serveur Web Microsoft sur un
ordinateur local.
Si vous travaillez sous Windows et que vous souhaitez développer des sites
ColdFusion, vous pouvez utiliser le serveur Web inclus dans l’édition
développeur du serveur d’application ColdFusion MX. Vous pouvez
l’installer et l’utiliser gratuitement. Pour plus d’informations, consultez la
section Annexe C, Configuration d’un exemple de site ColdFusion,
page 257.
Si vous travaillez sur Macintosh, vous pouvez exploiter le serveur Web d’un
ordinateur en réseau ou d’une société d’hébergement Web. Si vous
souhaitez développer des applications PHP, vous pouvez utiliser le serveur
Web Apache déjà installé sur votre Macintosh.
Ce chapitre contient les sections suivantes :
Premiers pas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Installation d’Internet Information Server . . . . . . . . . . . . . . . . . . . 252
Test de IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Test du serveur Web Macintosh (développeurs PHP) . . . . . . . 254
Fonctions élémentaires du serveur Web . . . . . . . . . . . . . . . . . . . 255
R E MA R Q U E
Macromedia ne fournit aucune assistance technique pour les logiciels
tiers, tels que Microsoft Internet Information Server. Si vous avez besoin
d’aide pour un produit Microsoft, contactez le support technique de
Microsoft.
251
Premiers pas
Si vous travaillez sous Windows, vous pouvez installer et utiliser les serveurs
Web suivants sur votre ordinateur: Vous pouvez également installer votre
serveur Web sur un ordinateur Windows en réseau afin que les autres
développeurs de votre équipe puissent l’utiliser.
Si vous travaillez sous Windows et que vous souhaitez développer des
applications ColdFusion, vous pouvez également utiliser le serveur Web
inclus dans l’édition développeur de ColdFusion MX 7. Pour plus de
détails, reportez-vous à Annexe C, Configuration d’un exemple de site
ColdFusion, page 257
IIS est peut-être déjà installé sur votre ordinateur. Parcourez votre
arborescence pour vérifier si elle comporte un dossier C:\Inetpub ou
D:\Inetpub. IIS crée ce dossier pendant l’installation.
Si le dossier n’existe pas, installez IIS. Pour plus d’informations, consultez
la section Installation d’Internet Information Server, page 252.
Si vous travaillez sur Macintosh et voulez développer des applications PHP,
vous pouvez utiliser le serveur Web Apache déjà installé sur votre machine.
Pour plus d’informations, consultez la section Test du serveur Web
Macintosh (développeurs PHP), page 254.
Installation d’Internet Information
Server
Les utilisateurs de Windows 2000 et Windows XP Professionnel doivent
installer IIS (Internet Information Server).
Si vous utilisez Windows 2000 ou Windows XP Professionnel, vérifiez si
IIS est déjà installé et en cours d’exécution sur votre système. Pour cela,
recherchez le dossier C:\Inetpub. S’il n’existe pas, il est probable qu’IIS
n’est pas installé sur votre système.
Pour installer IIS sous Windows 2000 et XP Professionnel :
252 Installation d’un serveur Web
1.
Sélectionnez Démarrer > Paramètres > Panneau de configuration >
Ajouter ou supprimer des programmes ou Démarrer > Panneau de
configuration > Ajout/Suppression de programmes.
2.
Cliquez sur Ajouter/Supprimer des composants Windows.
3.
Sélectionnez Internet Information Services (IIS) et cliquez sur Suivant.
4.
Suivez les instructions d’installation.
Vous pouvez tester le serveur Web après l’avoir installé.
Test de IIS
Pour tester le serveur Web, créez une page HTML simple intitulée
monFichierTest.html, puis enregistrez-la dans le dossier Inetpub\wwwroot
de l’ordinateur exécutant le serveur Web. Cette page HTML peut
comporter une seule ligne, par exemple :
<p>Mon serveur fonctionne.</p>
Ouvrez ensuite une page test dans un navigateur Web avec une requête
HTTP. Si IIS est exécuté sur votre ordinateur local, entrez l’URL suivante
dans votre navigateur Web :
http://localhost/monFichierTest.html
Si IIS est exécuté sur un ordinateur en réseau, utilisez le nom de
l’ordinateur en réseau comme nom de domaine. Par exemple, si le nom de
l’ordinateur qui exécute IIS est rockford-pc, entrez l’URL suivante dans
votre navigateur:
http://rockford-pc/monFichierTest.html
REMARQUE
Pour plus d’informations sur les noms d’ordinateurs, voir Fonctions
élémentaires du serveur Web, page 255.
Si le navigateur affiche votre page, le serveur Web est exécuté normalement.
Si le navigateur ne peut pas afficher la page, assurez-vous que le serveur est
en cours d’exécution. Si la page ne s’affiche toujours pas, assurez-vous que
votre page test est placée dans le dossier Inetpub\wwwroot et comporte une
extension .htm ou .html.
Test de IIS 253
Test du serveur Web Macintosh
(développeurs PHP)
Vous pouvez utiliser le serveur Web Apache déjà installé sur votre
Macintosh pour développer des applications PHP.
Pour tester le serveur, créez une page HTML simple appelée
monFichierTest.html et enregistrez-la dans le dossier /Utilisateurs/
votre_nom_utilisateur/Sites/ de votre Macintosh (où votre_nom_utilisateur
est votre nom d’utilisateur Macintosh). Cette page HTML peut comporter
une seule ligne, par exemple :
<p>Mon serveur fonctionne.</p>
Ouvrez ensuite une page test dans un navigateur Web avec une requête
HTTP. Pour cela, saisissez l’URL ci-dessous dans votre navigateur Web :
http://localhost/~votre_nom_utilisateur/monFichierTest.html
REMARQUE
Par défaut, le serveur Apache s’exécute sur le port 80.
Si le navigateur affiche votre page, le serveur Web est exécuté normalement.
Si le navigateur ne peut pas afficher la page, assurez-vous que le serveur est
en cours d’exécution. Pour cela, affichez les préférences du système et
vérifiez le panneau de préférences de partage. L’option Partage Web
personnel doit être activée.
Par défaut, le serveur Web Apache ne fonctionne pas avec PHP ; vous
devez d’abord le configurer. Pour plus d’informations, consultez la section
Configuration du système (PHP), page 328.
254 Installation d’un serveur Web
Fonctions élémentaires du
serveur Web
Un serveur Web est un logiciel qui fournit des pages Web en réponse à des
requêtes de navigateurs Web. Un serveur Web est parfois appelé serveur
HTTP.
Supposons que vous utilisiez IIS pour développer des applications Web. Le
nom par défaut de votre serveur Web est le même que celui qui désigne
votre ordinateur. Vous pouvez modifier le nom du serveur en modifiant
celui de votre ordinateur. Si votre ordinateur n’a pas de nom, le serveur
utilise le mot « localhost ».
Le nom du serveur correspond au dossier racine du serveur, lequel est
généralement (sur un ordinateur fonctionnant sous Windows) :
C:\Inetput\wwwroot. Vous pouvez ouvrir une page Web quelconque
stockée dans le dossier racine en entrant l’URL suivante dans un navigateur
en cours d’exécution sur votre ordinateur.
http://nom_du_serveur/nom_de_fichier
Par exemple, si le nom du serveur est mer_noire et qu’une page Web
intitulée soleil.html est stockée dans C:\Inetput\wwwroot\, vous pouvez
ouvrir cette page en tapant l’URL suivante dans le navigateur en cours
d’exécution sur l’ordinateur local :
http://mer_noire/soleil.html
REMARQUE
Veillez à taper des barres obliques normales et non inverses dans les URL.
Vous pouvez également ouvrir une page Web quelconque stockée dans un
sous-dossier du dossier racine en spécifiant ce sous-dossier dans l’URL. Par
exemple, supposons que le fichier soleil.html est stocké dans un sousdossier nommé gamelan, de la façon suivante :
C:\Inetput\wwwroot\gamelan\soleil.html
Vous pouvez ouvrir cette page en entrant l’URL suivante dans un
navigateur en cours d’exécution sur votre ordinateur :
http://mer_noire/gamelan/soleil.html
Fonctions élémentaires du serveur Web 255
Lorsque le serveur Web est exécuté sur votre ordinateur, vous pouvez
remplacer le nom du serveur par « localhost ». Par exemple, les URL
suivantes ouvrent la même page dans un navigateur :
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
REMARQUE
256 Installation d’un serveur Web
Vous pouvez aussi utiliser une autre expression à la place du nom du
serveur ou de localhost : 127.0.0.1 (par exemple, http://127.0.0.1/
gamelan/soleil.html).
ANNEXE C
Configuration d’un exemple
de site ColdFusion
C
Macromedia Dreamweaver 8 contient des exemples de pages ColdFusion
pour vous permettre de créer une petite application Web. Ce chapitre vous
explique comment configurer l’exemple d’application.
La configuration d’une application Web s’effectue en trois étapes. Vous
devez d’abord configurer votre système. Vous devez ensuite définir un site
Dreamweaver. Puis, vous devez connecter l’application à votre base de
données. Ce guide de configuration décrit cette procédure en trois étapes.
Ce chapitre contient les sections suivantes :
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
Aide-mémoire pour la
configuration à l’intention des
développeurs ColdFusion
Pour configurer une application Web, vous devez configurer votre système,
définir un site Dreamweaver, puis vous connecter à une base de données.
Cette section fournit une liste de contrôle pour chaque tâche. Les
différentes tâches sont décrites de manière plus détaillée dans le reste du
chapitre.
257
Configurez votre système :
1.
Installez le serveur d’application ColdFusion. Ce serveur contient un
serveur Web.
2.
Créez un dossier racine.
Définissez un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur.
2.
Définissez le dossier comme dossier Dreamweaver local.
3.
Définissez un dossier de serveur Web comme dossier Dreamweaver
distant.
4.
Définissez un dossier dans lequel traiter les pages dynamiques.
5.
Téléchargez les exemples de fichiers sur le serveur Web.
Connectez-vous à la base de données :
1.
Si votre serveur est un ordinateur distant, copiez l’exemple de base de
données sur l’ordinateur distant.
2.
Créez la connexion dans Dreamweaver.
Configuration du système
(ColdFusion)
Cette section fournit des instructions pour les deux configurations de
système les plus courantes : lorsque ColdFusion est installé sur votre disque
dur et lorsque ColdFusion est installé sur un ordinateur Windows distant.
Pour utiliser une configuration différente, voir , Configuration d'une
application Web dans Utilisation de Dreamweaver.
258 Configuration d’un exemple de site ColdFusion
L’illustration suivante présente les deux configurations décrites dans cette
section :
Configuration locale
(Windows uniquement)
Configuration du serveur distant
(Macintosh ou Windows)
WINDOWS PC
MAC ou PC WINDOWS
Dreamweaver
Dreamweaver
Serveur ColdFusion
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Accès réseau ou ftp
SERVEUR WINDOWS
Serveur ColdFusion
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Pour configurer votre système :
1.
Installez le serveur d’application ColdFusion.
2.
Créez un dossier racine.
R E MA R Q U E
L’installation du serveur d’application est une tâche unique (non
répétitives).
Configuration du système (ColdFusion) 259
Installation de ColdFusion MX 7
Un serveur Web et un serveur d’application sont nécessaires pour traiter les
pages Web dynamiques. ColdFusion MX 7 inclut ces deux serveurs. Un
serveur Web est un logiciel qui fournit des pages Web en réponse à des
requêtes de navigateurs Web. Un serveur d’application est un logiciel qui
aide un serveur Web à traiter des pages Web contenant des scripts ou des
balises côté serveur. Lorsqu’une page portant cette marque est demandée
par un navigateur, le serveur Web transmet la page au serveur d’application
pour que celui-ci la traite avant qu’elle ne soit envoyée au navigateur. Pour
plus d’informations, consultez la section Description des applications Web,
page 235.
Vous pouvez accéder au site Web de Macromedia, à l’adresse
www.macromedia.com/go/coldfusion/, pour télécharger et installer la
version complète de ColdFusion MX 7 (édition développeur). Veillez à
sélectionner la version Windows de l’édition développeur de ColdFusion
MX 7. Un exemplaire du serveur ColdFusion MX 7 édition développeur
est également disponible sur le CD de Dreamweaver (version Windows
uniquement).
REMARQUE
Vous pouvez également installer ColdFusion sur un ordinateur Mac OS X
où s’exécute un serveur J2EE tel que JRun ou Tomcat. Pour plus
d’informations, voir le site Web de Macromedia à l’adresse :
www.macromedia.com/go/cfmx7_mac. Le processus d’installation est
toutefois assez compliqué et Dreamweaver n’a pas été testé sur un
serveur ColdFusion exécuté sur Macintosh. En outre, la connexion d’un
serveur ColdFusion exécuté sur Macintosh vers des systèmes de base de
données tels que MySQL peut s’avérer difficile.
Pour installer ColdFusion MX 7 :
1.
Le cas échéant, connectez-vous au système Windows en utilisant le
compte Administrateur.
2.
Fermez toutes les applications ouvertes.
3.
Double-cliquez sur le fichier d’installation ColdFusion MX 7.
4.
Suivez les instructions d’installation.
Certains affichages de l’assistant d’installation se passent d’explications.
Cependant, pour les affichages suivants, sélectionnez les options
suivantes :
260 Configuration d’un exemple de site ColdFusion
■
A l’affichage de Configuration d’installation, sélectionnez l’option
Configuration de serveur.
.
■
A l’affichage de Sélectionner répertoire d’installation, acceptez le
dossier par défaut C:\CFusionMX7 en cliquant sur Suivant.
Configuration du système (ColdFusion) 261
■
A l’affichage de Configurer le serveur Web, sélectionner l’option
Serveur Web pré-défini (incorporé) au bas de l’écran.
■
A l’affichage du mot de passe RDS, veillez à ce que l’option Activer
RDS soit sélectionnée, puis tapez et confirmez un mot de passe.
262 Configuration d’un exemple de site ColdFusion
Pour plus d’informations, reportez-vous à la documentation ColdFusion
dans Dreamweaver (Aide > Utilisation de ColdFusion).
Après avoir installé et démarré ColdFusion, créez un dossier racine pour
votre application Web.
Création d’un dossier racine
Après avoir installé le logiciel de serveur, créez un dossier racine pour votre
application Web sur le système exécutant ColdFusion et assurez-vous que le
dossier dispose des autorisations nécessaires.
Pour créer un dossier racine pour votre application Web :
■
Dans le dossier CFusionMX7\wwwroot du système exécutant
ColdFusion, créez un dossier intitulé MonApplicationWeb.
REMARQUE
Notez ce nom de dossier. Il vous sera utile par la suite. Attention, lorsque
vous l’utiliserez à nouveau, la casse devra être identique à celle utilisée lors
de sa création.
Par défaut, le serveur Web de ColdFusion est configuré pour fournir des
pages provenant du dossier CFusionMX7\wwwroot. Le serveur Web
répondra aux requêtes HTTP des navigateurs Web en renvoyant les pages
de ce dossier ou de ses sous-dossiers.
Une fois votre système configuré, vous devez définir un site Dreamweaver
Définition d’un site Dreamweaver
(ColdFusion)
Une fois que vous avez configuré votre système, vous devez copier les
exemples de fichiers dans un dossier local et définir un site Dreamweaver
pour les gérer.
Pour définir un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur
(voir Copie des exemples de fichiers, page 264).
2.
Définissez le dossier comme un dossier Dreamweaver local (voir
Définition d’un dossier local, page 265).
Définition d’un site Dreamweaver (ColdFusion) 263
3.
Définissez votre dossier racine sur le serveur Web comme dossier
Dreamweaver distant (voir Définition d’un dossier distant, page 266).
4.
Spécifiez un dossier dans lequel traiter les pages dynamiques (voir
Spécification de l’endroit où traiter les pages dynamiques, page 267).
5.
Téléchargez les exemples de fichiers sur le serveur Web (voir
Téléchargement des exemples de fichiers, page 268).
Copie des exemples de fichiers
Si ce n’est pas déjà fait, copiez les exemples de fichiers du dossier
d’application Dreamweaver dans un dossier de votre disque dur.
Pour copier les exemples de fichiers :
1.
Créez un dossier intitulé local_sites dans le dossier utilisateur de votre
disque dur.
Par exemple, créez l’un des dossiers suivants :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes documents\
local_sites (Windows)
■
/Utilisateurs/votre_nom_d’utilisateur/Documents/local_sites
(Macintosh).
REMARQUE
Sur un Macintosh, votre dossier d’utilisateur contient déjà un dossier
intitulé Sites. N’utilisez pas le dossier Sites en tant que dossier local ; le
dossier Sites correspond au dossier de stockage des pages que vous
souhaitez diffuser lors de l’utilisation du Macintosh comme serveur Web.
2.
Recherchez le dossier cafe_townsend dans le dossier d’application sur
votre disque dur.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin
du dossier est le suivant :
3.
■
Sous Windows : C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\.
■
Sur Macintosh : DD Macintosh/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine (dossier
principal) de votre site Dreamweaver.
264 Configuration d’un exemple de site ColdFusion
Après avoir copié le dossier cafe_townsend, définissez le dossier en tant que
Dreamweaver dossier local.
Définition d’un dossier local
Après avoir copié le dossier cafe_townsend, définissez le dossier contenant
les exemples de fichiers ColdFusion comme dossier Dreamweaver local.
Pour définir le dossier Dreamweaver local :
1.
Dans Dreamweaver, sélectionnez Site > Gérer les sites.
Dans la boîte de dialogue Gérer les sites, cliquez sur le bouton
Nouveau, puis sélectionnez Site.
La boîte de dialogue Définition du site s’ouvre.
2.
Si l’onglet Elémentaire s’affiche, cliquez sur l’onglet Avancé.
3.
Dans la zone de texte Nom du site, saisissez Cafe Townsend
ColdFusion.
Le nom identifie votre site dans Dreamweaver.
4.
5.
Cliquez sur le dossier situé à côté de la zone de texte dossier racine local
et naviguez jusqu’au dossier suivant qui contient des exemples de
fichiers ColdFusion :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes Documents\
local_sites\cafe_townsend \contact\coldfusion (Windows)
■
/Utilisateurs/votre_nom_d’utilisateurDocuments/local_sites/
cafe_townsend/contact/coldfusion (Macintosh)
Cliquez sur Sélectionner pour finaliser la définition du dossier local
Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez un dossier de serveur Web comme dossier Dreamweaver distant
Définition d’un site Dreamweaver (ColdFusion) 265
Définition d’un dossier distant
Après avoir défini un dossier local, définissez un dossier de serveur Web
comme dossier Dreamweaver distant.
Pour définir le dossier Dreamweaver distant :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Infos distantes.
L’écran Infos distantes apparaît.
2.
Dans le menu déroulant Accès, choisissez la manière dont vous
souhaitez placer et déplacer vos fichiers sur le serveur : via un réseau local
(option Local/Réseau) ou en utilisant le protocole FTP.
REMARQUE
Le menu déroulant Accès contient d’autres options, qui ne sont pas
traitées dans ce guide. Pour des informations sur les autres options,
consultez Utilisation de Dreamweaver.
3.
Tapez le chemin d’accès ou les paramètres FTP qui mènent au dossier
du serveur Web créé dans Création d’un dossier racine, page 263.
Le dossier peut se trouver sur votre disque dur ou sur un ordinateur
distant. Même si vous avez créé le dossier sur votre disque dur, il est
toujours considéré comme le dossier « distant ». L’exemple ci-dessous
correspond à un chemin de dossier distant possible pour l’option Local/
Réseau (dossier distant stocké sur votre disque dur Windows) :
Répertoire distant : C:\CFusionMX7\wwwroot\MonApplicationWeb
Pour plus d’informations sur FTP, consultez Définition des options
distantes pour l'accès FTP dans Utilisation de l’aide Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez ensuite un dossier dans lequel traiter les pages dynamiques
266 Configuration d’un exemple de site ColdFusion
Spécification de l’endroit où traiter les
pages dynamiques
Après avoir défini le dossier Dreamweaver distant, spécifiez un dossier dans
lequel seront traitées les pages dynamiques. Dreamweaver utilise ce dossier
pour afficher les pages dynamiques et se connecter aux bases de données
lorsque vous développez votre application.
Pour spécifier le dossier dans lequel traiter les pages
dynamiques :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Serveur d’évaluation.
L’écran Serveur d’évaluation apparaît. Dreamweaver doit pouvoir
recourir aux services d’un serveur d’évaluation pour générer et afficher
du contenu dynamique pendant que vous procédez à la création du
site. Dans la mesure où il traite les pages ColdFusion, ce serveur peut se
trouver sur votre ordinateur local, un serveur de développement, un
serveur intermédiaire ou un serveur de production. Souvent,
notamment lors de la définition du site Cafe Townsend, vous pouvez
utiliser les mêmes paramètres que dans la catégorie Infos distantes (voir
Définition d’un dossier distant, page 266) car ceux-ci pointent vers un
serveur capable de traiter les pages ColdFusion.
2.
Sélectionnez ColdFusion dans le menu déroulant Modèle de serveur.
3.
Dans le menu déroulant Accès, sélectionnez la méthode (Local/Réseau
ou FTP) que vous avez spécifiée pour accéder à votre dossier distant.
Dreamweaver entre les paramètres spécifiés dans la catégorie Infos
distantes. Laissez les paramètres tels qu’ils sont.
4.
Dans le champ Préfixe de l’URL, tapez l’URL racine à saisir dans un
navigateur Web pour appeler une page dans votre application Web.
Pour afficher des données dynamiques dans vos pages lorsque vous
travaillez, Dreamweaver crée un fichier temporaire, le copie dans le
dossier racine du site Web et essaie de le demander en utilisant le
préfixe de l’URL.
REMARQUE
Dreamweaver déduit le préfixe de l’URL en fonction des informations
fournies dans la boîte de dialogue Définition du site. Si toutefois le préfixe
de l’URL suggéré est incorrect, corrigez-le ou saisissez un nouveau
préfixe d’URL. Pour plus d’informations, voir « Paramétrer le préfixe
URL » dans Utilisation de Dreamweaver.
Définition d’un site Dreamweaver (ColdFusion) 267
Si le dossier spécifié dans le champ Dossier distant est
c:\CFusionMX7\wwwroot\MonApplicationWeb, le préfixe de l’URL
devrait se présenter comme suit:
http://localhost/MonApplicationWeb/
REMARQUE
Par défaut, le serveur Web ColdFusion s’exécute sur le port 8500.
CONSEIL
5.
Le préfixe de l’URL
doit toujours indiquer
un répertoire et non
une page spécifique
du site. De plus,
veillez à respecter la
casse utilisée lors de
la création du
dossier.
Cliquez sur OK pour définir le site et fermer la boîte de dialogue
Définition du site, puis fermez la boîte de dialogue Gérer les sites en
cliquant sur Terminé.
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web
Téléchargement des exemples de fichiers
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web Vous devez
télécharger les fichiers, même si le serveur Web est exécuté sur votre
ordinateur local.
Si vous ne téléchargez pas les fichiers, des fonctions telles que l’affichage des
données dynamiques et l’aperçu dans le navigateur ne fonctionneront pas
avec les pages dynamiques. Par exemple, des liens d’image risquent d’être
rompus dans l’affichage des données dynamiques car les fichiers d’image ne
se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien
vers une page d’informations détaillées tout en affichant l’aperçu d’une
page principale dans un navigateur provoque une erreur si la page
d’informations détaillées ne figure pas sur le serveur.
268 Configuration d’un exemple de site ColdFusion
Pour télécharger les exemples de fichiers dans un serveur
Web :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier
racine du site dans le volet Affichage local.
Le dossier racine est le premier dossier de la liste.
2.
Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers, puis confirmez le
téléchargement de l’ensemble du site.
Dreamweaver copie tous les fichiers dans le dossier du serveur Web
défini dans Définition d’un dossier distant, page 266.
Le site Dreamweaver est maintenant défini. L’étape suivante consiste à se
connecter à l’exemple de base de données installé avec Dreamweaver
Connexion à l’exemple de base
de données (ColdFusion)
Au cours de l’installation, Dreamweaver copie un exemple de base de
données Microsoft Access sur votre disque dur. Cette section explique
comment créer une connexion à un exemple de base de données.
REMARQUE
Pour plus d’informations sur la connexion à une autre base de données
voir « Connexions à des bases de données pour les développeurs
ColdFusion » dans l’aide Utilisation de Dreamweaver.
Pour créer une connexion à une base de données :
1.
Si votre serveur est un ordinateur distant, copiez l’exemple de base de
données sur l’ordinateur distant. (Voir Configuration de la base de
données (serveur sur l’ordinateur distant), page 270).
2.
Créez une source de données ColdFusion et visualisez la connexion dans
Dreamweaver (voir Connexion à la base de données, page 270).
Connexion à l’exemple de base de données (ColdFusion) 269
Configuration de la base de données
(serveur sur l’ordinateur distant)
Cette section s’applique uniquement si votre serveur Web est exécuté sur
un ordinateur distant. Si votre serveur Web s’exécute sur le même
ordinateur que Dreamweaver, passez directement à la section Connexion à
la base de données, page 270.
Avant d’essayer de vous connecter à l’exemple de base de données, copiez la
base de données sur le disque dur de l’ordinateur distant. Si Dreamweaver a
été installé dans l’emplacement par défaut, le chemin du dossier contenant
le fichier de base de données (tutorial.mdb) sur votre disque dur est le
suivant :
■
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data
\tutorial.mdb (Windows)
■
/Applications/Macromedia Dreamweaver 8/Tutorial_assets/
cafe_townsend/data/tutorial.mdb (Macintosh)
Vous pouvez placer le fichier dans le dossier de votre choix, sur l’ordinateur
distant, ou créer un nouveau dossier.
REMARQUE
Il peut être risqué de placer le fichier de base de données dans le dossier
Inetpub de l’ordinateur distant. Il est préférable de le placer dans un
dossier auquel le public n’a pas accès.
Une fois que vous avez placé la base de données, créez une source de
données ColdFusion.
Connexion à la base de données
Pour vous connecter à la base de données, vous devez créer une source de
données ColdFusion appelée connTownsend qui pointe sur l’exemple de
fichier de base de données.
Connectez-vous à la base de données :
1.
Dans Dreamweaver, ouvrez une page ColdFusion telle que send.cfm et
view.cfm.
2.
Dans le panneau Bases de données (Fenêtre > Bases de données), cliquez
sur le lien « RDS login », tapez votre mot de passe RDS et cliquez sur OK.
270 Configuration d’un exemple de site ColdFusion
3.
Cliquez sur le bouton Plus (+) du panneau Bases de données, puis
sélectionnez Connexion à Microsoft Access dans le menu contextuel.
R E M A R QU E
Si le bouton Plus apparaît dans le panneau de Bases de données,
redémarrez Dreamweaver.
4.
Dans la zone de texte Nom de la source de données CF, tapez
connTownsend.
5.
Dans la zone de texte Fichier de base de données, tapez le chemin d’accès
au fichier de la base de données tutorial.mdb.
Si ColdFusion tourne sur votre ordinateur local et que Dreamweaver a
été installé dans son emplacement par défaut, saisissez le chemin
suivant :
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data
\tutorial.mdb
Si ColdFusion tourne sur un ordinateur distant, créez une source de
données qui pointe vers le fichier de base de données que vous avez
placé sur cet ordinateur dans Configuration de la base de données (serveur
sur l’ordinateur distant), page 270.
Pour plus d’informations, reportez-vous à la documentation
ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
6.
Cliquez sur OK pour créer la connexion
Connexion à l’exemple de base de données (ColdFusion) 271
La nouvelle connexion s’affiche dans le panneau Bases de données.
Si ce n’est pas le cas, procédez de l’une des manières suivantes :
7.
■
Vérifiez les paramètres du dossier utilisé par Dreamweaver pour
traiter les pages dynamiques (voir Spécification de l’endroit où traiter
les pages dynamiques, page 267).
■
Consultez « Résolution des problèmes de connexion à des bases de
données » dans l’aide de (Aide > Utilisation de Dreamweaver).
Développez la branche connTownsend , puis la branche Table.
Si la branche Table contient trois tables comme suit, l’exemple
d’application ColdFusion est configuré pour les didacticiels du guide
Bien démarrer avec Dreamweaver. Pour plus d’informations, consultez la
section Didacticiel : Développement d’une application Web, page 213.
272 Configuration d’un exemple de site ColdFusion
Si la branche Table ne contient pas de table, cliquez sur l’icône
Modifier les sources de données dans la barre d’outils de panneau Bases
de données et contrôlez avec soin les paramètres de connexion dans
Configuration et gestion de ColdFusion MX. En particulier, assurez-vous
que le chemin d’accès au fichier de base de données est correct.
Connexion à l’exemple de base de données (ColdFusion) 273
274 Configuration d’un exemple de site ColdFusion
ANNEXE D
Configuration d’un exemple
de site ASP.NET
D
Macromedia Dreamweaver 8 contient des exemples de pages ASP.NET
pour vous permettre de créer une petite application Web. Ce chapitre vous
explique comment configurer l’exemple d’application.
Ce chapitre concerne les développeurs ASP.NET. Pour plus d’informations
sur l’utilisation du protocole ASP, voir Configuration d’un exemple de site
ASP, page 291.
La configuration d’une application Web s’effectue en trois étapes. Vous
devez d’abord configurer votre système. Vous devez ensuite définir un site
Dreamweaver. Puis, vous devez connecter l’application à votre base de
données. Ce chapitre de configuration décrit cette procédure en trois
étapes.
Ce chapitre contient les sections suivantes :
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
Aide-mémoire pour la
configuration à l’intention des
développeurs ASP.NET
Pour configurer une application Web, vous devez configurer votre système,
définir un site Dreamweaver, puis vous connecter à une base de données.
Cette section fournit une liste de contrôle pour chaque tâche. Les
différentes tâches sont décrites de manière plus détaillée dans le reste du
chapitre.
275
Configurez votre système :
1.
Vérifiez que vous disposez d’un serveur Web.
2.
Installez la plate-forme .NET de Microsoft.
3.
Créez un dossier racine.
Définissez un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur.
2.
Définissez le dossier comme dossier Dreamweaver local.
3.
Définissez un dossier de serveur Web comme dossier Dreamweaver
distant.
4.
Définissez un dossier dans lequel traiter les pages dynamiques.
5.
Téléchargez les exemples de fichiers sur le serveur Web.
Connectez-vous à la base de données :
1.
Si votre serveur est un ordinateur distant, copiez l’exemple de base de
données sur l’ordinateur distant.
2.
Créez la connexion dans Dreamweaver.
Configuration du système
(ASP.NET)
Cette section fournit des instructions pour les deux configurations de
système les plus courantes : lorsque Windows 2000 ou Windows XP
Professionnel est installé sur votre disque dur et lorsque Windows 2000 ou
Windows XP Professionnel est installé sur un ordinateur distant. Pour
utiliser une configuration différente, voir Chapitre 23, Configuration d'une
application Web dans Utilisation de Dreamweaver.
276 Configuration d’un exemple de site ASP.NET
L’illustration suivante présente les deux configurations décrites dans cette
section :
Configuration locale
(Windows 2000 ou XP uniquement)
WINDOWS 2000 ou XP
Dreamweaver
Configuration du serveur distant
(Macintosh ou Windows)
MAC ou PC WINDOWS
Dreamweaver
IIS 5 ou plus récent
.NET Framework
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Accès réseau ou ftp
SERVEUR WINDOWS
IIS 5 ou plus récent
.NET Framework
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Pour configurer votre système :
1.
Vérifiez que vous disposez d’un serveur Web (voir Recherche d’un serveur
Web, page 278).
2.
Installez la plate-forme .NET (voir Installation de la plate-forme .NET,
page 278).
Configuration du système (ASP.NET) 277
3.
Créez un dossier racine (voir Création d’un dossier racine, page 279).
REMARQUE
L’installation du serveur Web et de la plate-forme .NET sont des tâches
uniques (non répétitives).
Recherche d’un serveur Web
Pour développer et tester des pages Web dynamiques, vous avez besoin
d’un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit
des pages Web en réponse à des requêtes de navigateurs Web.
Les pages ASP.NET ne sont compatibles qu’avec un seul serveur Web :
Microsoft IIS 5 ou version supérieure. IIS 5 étant un service des systèmes
d’exploitation Windows 2000 et Windows XP Professionnel, vous devez
impérativement utiliser l’une de ces deux versions de Windows pour
héberger des applications ASP.NET.
Assurez-vous que IIS 5 est installé et s’exécute sur un ordinateur
fonctionnant sous Windows 2000 ou Windows XP Professionnel. Vous
pouvez utiliser votre ordinateur local comme serveur si vous travaillez sous
Windows 2000 ou Windows XP Professionnel.
Pour savoir rapidement si IIS est installé sur votre ordinateur, vérifiez la
structure du dossier afin de déterminer si elle comporte un dossier
C:\Inetpub ou D:\Inetpub. IIS crée ce dossier pendant l’installation.
Si IIS n’est pas installé, installez-le. Pour plus d’informations, consultez la
section Installation d’Internet Information Server, page 252.
Après avoir installé le serveur Web, installez la plate-forme .NET
Installation de la plate-forme .NET
Un serveur d’application est nécessaire pour traiter les pages Web
dynamiques. Un serveur d’application est un logiciel qui aide un serveur
Web à traiter des pages Web contenant des scripts ou des balises côté
serveur. Lorsqu’une page portant cette marque est demandée par un
navigateur, le serveur Web transmet la page au serveur d’application pour
que celui-ci la traite avant qu’elle ne soit envoyée au navigateur. Pour plus
d’informations, consultez la section Description des applications Web,
page 235.
278 Configuration d’un exemple de site ASP.NET
Dans ASP.NET, le serveur d’application est appelé plate-forme .NET 1.1.
Pour développer des applications Web ASP.NET, vous devez également
installer le kit de développement Microsoft .NET (SDK) de la plate-forme
.NET 1.1 Assurez-vous que la plate-forme .NET et le SDK sont installés
et fonctionnent sur les systèmes Windows 2000 ou
Windows XP Professionnel exécutant IIS 5 ou supérieur.
Pour installer la plate-forme .NET et SDK :
1.
Contrôlez que la plate-forme .NET est installée sur votre système en
parcourant la liste des applications dans la boîte de dialogue Ajout/
Suppression de programmes (Démarrer > Panneau de configuration >
Ajout/Suppression de programmes).
Si vous trouvez Microsoft .NET Framework 1.1 dans la liste, alors la
plate-forme est déjà installée et il n’est pas nécessaire de la réinstaller.
Passez à l’étape 3
2.
Si la plate-forme n’est pas installée sur votre système, alors installez le
package redistributable .NET Framework version 1.1 à partir du site
Web de Microsoft à l’adresse http://msdn.microsoft.com/
netframework/downloads/framework1_1/ et suivez les instructions
d’installation que vous trouverez sur ce site.
Vous installez la plate-forme comme une mise à jour de Windows.
3.
Téléchargez le kit de développement Microsoft .NET SDK version 1.1
du même site Web et suivez les instructions d’installation.
Après avoir installé la plate-forme .NET et SDK, vous devez créer un
dossier racine pour votre application Web.
Création d’un dossier racine
Après avoir installé le logiciel de serveur, créez un dossier racine pour votre
application Web sur le système exécutant Microsoft IIS, et assurez-vous que
le dossier dispose des autorisations nécessaires.
Configuration du système (ASP.NET) 279
Pour créer un dossier racine pour votre application Web :
1.
Créez un dossier appelé MonApplicationWeb sur le système
exécutant IIS.
REMARQUE
Notez ce nom de dossier. Il vous sera utile par la suite. Attention, lorsque
vous l’utiliserez à nouveau, la casse devra être identique à celle utilisée lors
de sa création.
Utilisez de préférence l’emplacement suivant pour créer le dossier :
C:\Inetpub\wwwroot\. Par défaut, votre serveur Web IIS est configuré
pour fournir les pages contenues dans le dossier Inetpub\wwwroot. Le
serveur Web répondra aux requêtes HTTP des navigateurs Web en
renvoyant les pages de ce dossier ou de ses sous-dossiers.
2.
Assurez-vous que l’autorisation Scripts est activée pour le dossier en
lançant l’outil d’administration IIS (sous Windows XP, sélectionnez
Démarrer > Panneau de configuration ou Démarrer >
Paramètres >Panneau de configuration, puis double-cliquez sur
Outils d’administration, et enfin double-cliquez sur Services Internet
(IIS)). Développez la liste ordinateur local, puis le dossier Sites Web,
puis le dossier Site Web par défaut. Cliquez avec le bouton droit de la
souris sur votre dossier MonApplicationWeb, puis sélectionnez
Propriétés dans le menu contextuel. Dans le menu déroulant Exécuter
les autorisations, vérifiez que l’option Scripts est sélectionnée. (Pour des
raisons de sécurité, nous vous recommandons de ne pas sélectionner
l’option Scripts et exécutables). Cliquez ensuite sur OK.
Le serveur Web est maintenant configuré pour fournir les pages Web de
votre dossier racine en réponse aux requêtes HTTP des navigateurs Web.
Une fois votre système configuré, vous devez définir un site Dreamweaver
Définition d’un site Dreamweaver
(ASP.NET)
Une fois que vous avez configuré votre système, vous devez copier les
exemples de fichiers dans un dossier local et définir un site Dreamweaver
pour les gérer.
280 Configuration d’un exemple de site ASP.NET
Pour définir un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur
(voir Copie des exemples de fichiers, page 281).
2.
Définissez le dossier comme un dossier Dreamweaver local (voir
Définition d’un dossier local, page 282).
3.
Définissez votre dossier racine sur le serveur Web comme dossier
Dreamweaver distant (voir Définition d’un dossier distant, page 283).
4.
Spécifiez un dossier dans lequel traiter les pages dynamiques (voir
Définition du dossier de traitement des pages dynamiques, page 283).
5.
Téléchargez les exemples de fichiers sur le serveur Web (voir
Téléchargement des exemples de fichiers, page 285).
Copie des exemples de fichiers
Si ce n’est pas déjà fait, copiez les exemples de fichiers du dossier
d’application Dreamweaver dans un dossier de votre disque dur.
Pour copier les exemples de fichiers :
1.
Créez un dossier intitulé local_sites dans le dossier utilisateur de votre
disque dur.
Par exemple, créez l’un des dossiers suivants :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\ local_sites (Windows)
■
/Utilisateurs/votre_nom_d’utilisateur/Documents/local_sites (Macintosh).
REMARQUE
Sur un Macintosh, votre dossier d’utilisateur contient déjà un dossier
intitulé Sites. N’utilisez pas le dossier Sites en tant que dossier local ; le
dossier Sites correspond au dossier de stockage des pages que vous
souhaitez diffuser lors de l’utilisation du Macintosh comme serveur Web.
2.
Recherchez le dossier cafe_townsend dans le dossier d’application sur
votre disque dur.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin
du dossier est le suivant :
■
Sous Windows : C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\.
■
Sur Macintosh : DD Macintosh/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend.
Définition d’un site Dreamweaver (ASP.NET) 281
3.
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine (dossier
principal) de votre site Dreamweaver.
Après avoir copié le dossier cafe_townsend, définissez le dossier en tant que
Dreamweaver dossier local.
Définition d’un dossier local
Après avoir copié le dossier cafe_townsend, définissez le dossier contenant
les exemples de fichiers ASP.NET comme dossier Dreamweaver local.
Pour définir le dossier Dreamweaver local :
1.
Dans Dreamweaver, sélectionnez Site > Gérer les sites. Dans la boîte de
dialogue Gérer les sites, cliquez sur le bouton Nouveau, puis
sélectionnez Site.
La boîte de dialogue Définition du site s’ouvre.
2.
Si l’onglet Elémentaire s’affiche, cliquez sur l’onglet Avancé.
3.
Dans la zone de texte Nom du site, saisissez Cafe Townsend ASP.NET.
Le nom identifie votre site dans Dreamweaver.
4.
5.
Cliquez sur le dossier situé à côté de la zone de texte Dossier racine local
et naviguez jusqu’au dossier suivant qui contient des exemples de
fichiers ASP.NET :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes documents\
local_sites\cafe_townsend\contact\aspnet (Windows)
■
/Utilisateurs/votre_nom_d’utilisateurDocuments/local_sites/
cafe_townsend/contact/aspnet (Macintosh)
Cliquez sur Sélectionner pour finaliser la définition du dossier local
Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez un dossier de serveur Web comme dossier Dreamweaver distant
282 Configuration d’un exemple de site ASP.NET
Définition d’un dossier distant
Après avoir défini un dossier local, définissez un dossier de serveur Web
comme dossier Dreamweaver distant.
Pour définir le dossier Dreamweaver distant :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Infos distantes.
L’écran Infos distantes apparaît.
2.
Dans le menu déroulant Accès, choisissez la manière dont vous
souhaitez placer et déplacer vos fichiers sur le serveur : via un réseau local
(option Local/Réseau) ou en utilisant le protocole FTP.
REMARQUE
Le menu déroulant Accès contient d’autres options, qui ne sont pas
traitées dans ce guide. Pour plus d’informations concernant leur
utilisation, consultez Utilisation de Dreamweaver (Aide > Utilisation de
Dreamweaver).
3.
Tapez le chemin d’accès ou les paramètres FTP qui mènent au dossier
du serveur Web créé dans Création d’un dossier racine, page 279.
Le dossier peut se trouver sur votre disque dur ou sur un ordinateur
distant. Même si vous avez créé le dossier sur votre disque dur, il est
toujours considéré comme le dossier « distant ». L’exemple ci-dessous
correspond à un chemin de dossier distant possible pour l’option Local/
Réseau (dossier distant stocké sur votre disque dur Windows) :
Répertoire distant : C:\Inetpub\wwwroot\MonApplicationWeb
Pour plus d’informations sur FTP, consultez Définition des options
distantes pour l'accès FTP dans Utilisation de l’aide Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez ensuite un dossier dans lequel traiter les pages dynamiques
Définition du dossier de traitement des
pages dynamiques
Après avoir défini le dossier Dreamweaverdistant, spécifiez un dossier pour
traiter les pages dynamiques. Dreamweaver utilise ce dossier pour afficher
les pages dynamiques et se connecter à des bases de données pendant que
vous développez des applications.
Définition d’un site Dreamweaver (ASP.NET) 283
Pour spécifier le dossier dans lequel traiter les pages
dynamiques :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Serveur d’évaluation.
L’écran Serveur d’évaluation apparaît. Dreamweaver doit pouvoir
recourir aux services d’un serveur d’évaluation pour générer et afficher
du contenu dynamique pendant que vous procédez à la création du
site. Dans la mesure où il traite les pages ASP.NET, ce serveur peut se
trouver sur votre ordinateur local, un serveur de développement, un
serveur intermédiaire ou un serveur de production. Souvent,
notamment lors de la définition du site Cafe Townsend, vous pouvez
utiliser les mêmes paramètres que dans la catégorie Infos distantes (voir
Définition d’un dossier distant, page 283) car ceux-ci pointent vers un
serveur capable de traiter les pages ASP.NET.
2.
Sélectionnez ASP.NET VB ou ASP.NET C# dans le menu contextuel
Modèle de serveur.
3.
Dans le menu déroulant Accès, sélectionnez la méthode (Local/Réseau
ou FTP) que vous avez spécifiée pour accéder à votre dossier distant.
Dreamweaver entre les paramètres spécifiés dans la catégorie Infos
distantes. Laissez les paramètres tels qu’ils sont.
4.
Dans le champ Préfixe de l’URL, tapez l’URL racine à saisir dans un
navigateur Web pour demander une page dans votre application Web.
Pour afficher des données dynamiques dans vos pages lorsque vous
travaillez, Dreamweaver crée un fichier temporaire, le copie dans le
dossier racine du site Web et essaie de le demander en utilisant le
préfixe de l’URL.
Dreamweaver déduit le préfixe de l’URL en fonction des informations
fournies dans la boîte de dialogue Définition du site. Il arrive
cependant que le préfixe d’URL proposé soit incorrect. Corrigez-le ou
saisissez un nouveau préfixe d’URL si la proposition de Dreamweaver
est incorrecte. Pour plus d’informations, voir « Paramétrer le préfixe
URL » dans Utilisation de Dreamweaver.
284 Configuration d’un exemple de site ASP.NET
Si le dossier spécifié dans le champ Dossier distant est
C:\Inetpub\wwwroot\MonApplicationWeb, le préfixe de l’URL doit se
présenter comme suit:
http://localhost/MonApplicationWeb/
Cliquez sur OK pour définir le site et fermer la boîte de dialogue
Définition du site, puis fermez la boîte de dialogue Gérer les sites en
cliquant sur Terminé.
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web
Téléchargement des exemples de fichiers
C ON S E I L
5.
Le préfixe de l’URL
doit toujours indiquer
un répertoire et non
une page spécifique
du site. De plus,
veillez à respecter la
casse utilisée lors de
la création du
dossier.
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web. Vous devez
télécharger les fichiers, même si le serveur Web est exécuté sur votre
ordinateur local.
Si vous ne téléchargez pas les fichiers, des fonctions telles que l’affichage des
données dynamiques et l’aperçu dans le navigateur ne fonctionneront pas
avec les pages dynamiques. Par exemple, des liens d’image risquent d’être
rompus dans l’affichage des données dynamiques car les fichiers d’image ne
se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien
vers une page d’informations détaillées tout en affichant l’aperçu d’une
page principale dans un navigateur provoquera une erreur si la page
d’informations détaillées manque dans le serveur.
Pour télécharger les exemples de fichiers dans un serveur
Web :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier
racine du site dans le volet Affichage local.
Le dossier racine est le premier dossier de la liste.
2.
Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers, puis confirmez le
téléchargement de l’ensemble du site.
Dreamweaver copie tous les fichiers dans le dossier du serveur Web
défini dans Définition d’un dossier distant, page 283.
Le site Dreamweaver est maintenant défini. L’étape suivante consiste à se
connecter à l’exemple de base de données installé avec Dreamweaver
Définition d’un site Dreamweaver (ASP.NET) 285
Connexion à l’exemple de base
de données (ASP.NET)
Au cours de l’installation, Dreamweaver copie un exemple de base de
données Microsoft Access sur votre disque dur. Cette section explique
comment créer une connexion à un exemple de base de données.
REMARQUE
Pour des informations sur la connexion à une autre base de données, voir
Chapitre 25, Connexions à des bases de données pour les développeurs
ASP.NET dans Utilisation de Dreamweaver (Aide > Utilisation de
Dreamweaver).
Pour créer une connexion à une base de données :
1.
Si votre serveur est un ordinateur distant, copiez l’exemple de base de
données sur l’ordinateur distant. (Voir Configuration de la base de
données (serveur sur l’ordinateur distant), page 286).
2.
Créez la connexion dans Dreamweaver (voir Création d’une connexion à
une base de données, page 287).
Configuration de la base de données
(serveur sur l’ordinateur distant)
Cette section s’applique uniquement si votre serveur Web est exécuté sur
un ordinateur distant. Si votre serveur Web s’exécute sur le même
ordinateur que Dreamweaver, passez directement à la section Création
d’une connexion à une base de données, page 287.
Avant d’essayer de vous connecter à l’exemple de base de données, copiez la
base de données sur le disque dur de l’ordinateur distant. Si Dreamweaver a
été installé dans l’emplacement par défaut, le chemin du dossier contenant
le fichier de base de données (tutorial.mdb) sur votre disque dur est le
suivant :
■
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data
\tutorial.mdb (Windows)
■
/Applications/Macromedia Dreamweaver 8/Tutorial_assets/
cafe_townsend/data/tutorial.mdb (Macintosh)
286 Configuration d’un exemple de site ASP.NET
Vous pouvez placer le fichier dans le dossier de votre choix, sur l’ordinateur
distant, ou créer un nouveau dossier. Dans les deux cas, notez le chemin
complet du fichier de base de données sur une feuille de papier.
REMARQUE
Il peut être risqué de placer le fichier de base de données dans le dossier
Inetpub de l’ordinateur distant. Il est préférable de le placer dans un
dossier auquel le public n’a pas accès.
Une fois que vous avez placé la base de données, vous pouvez vous y
connecter
Création d’une connexion à une base de
données
La dernière étape du processus de configuration consiste à établir une
connexion à la base de données.
Pour créer une connexion à une base de données dans
Dreamweaver :
1.
Ouvrez une page ASP.NET quelconque dans Dreamweaver, puis allez
dans le panneau Bases de données (Fenêtre > Bases de données).
2.
Cliquez sur le bouton Plus (+) du panneau Bases de données, puis
sélectionnez Connexion à la BD OLE dans le menu contextuel.
La boîte de dialogue Connexion à la BD OLE s’affiche.
3.
Tapez connTownsend comme nom de connexion.
4.
Cliquez sur le bouton Modèles.
La boîte de dialogue Modèle de chaîne de connexion s’affiche.
5.
Dans la liste des modèles, sélectionnez Microsoft Access 2000
(Fournisseur Microsoft Jet 4.0), puis cliquez sur OK.
Dreamweaver ajoute un modèle de chaîne de connexion dans la boîte
de dialogue Connexion à la BD OLE. Le modèle contient des espaces
réservés pour les informations manquantes dans la chaîne de
connexion.
Connexion à l’exemple de base de données (ASP.NET) 287
6.
Dans la zone de texte data source, saisissez le chemin complet vers
l’exemple de fichier de base de données sur votre disque dur ou sur le
disque dur de l’ordinateur distant. Si ASP.NET s’exécute sur votre
ordinateur local et que Dreamweaver a été installé dans l’emplacement
par défaut, saisissez le chemin suivant :
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\data\tutorial.mdb
REMARQUE
Le chemin peut varier en fonction de l’endroit où vous avez installé
Dreamweaver.
Par exemple, vous devrez peut-être indiquer le chemin suivant pour la
valeur Source de données correspondant à une base de données stockée
sur votre disque dur local :
Data Source=C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_
assets\data\tutorial.mdb;
Vous pouvez également entrer un chemin pour une base de données se
trouvant sur un serveur distant, par exemple :
Data Source=C:\users\Denman\Sites\data\tutorial.mdb;
7.
Supprimez les lignes User ID et Password.
La base de données Access ne requiert pas de numéro d’utilisateur ni de
mot de passe.
8.
Cliquez sur Tester.
Dreamweaver tente d’établir la connexion à la base de données. Si la
connexion échoue, procédez de la manière suivante :
■
Vérifiez le chemin de la base de données.
■
Vérifiez les paramètres du dossier utilisé par Dreamweaver pour
traiter les pages dynamiques (voir Définition du dossier de traitement
des pages dynamiques, page 283).
■
Déployez les fichiers de support en sélectionnant Site > Avancé >
Déployer fichiers de prise en charge.
■
Reportez-vous à Chapitre 29, Résolution des problèmes de connexion
à des bases de données dans Utilisation de Dreamweaver
(Aide > Utilisation de Dreamweaver).
288 Configuration d’un exemple de site ASP.NET
9.
Cliquez sur OK.
La nouvelle connexion s’affiche dans le panneau Bases de données.
L’exemple d’application ASP.NET est configuré pour les didacticiels Bien
démarrer avec Dreamweaver. Pour plus d’informations, consultez la section
Didacticiel : Développement d’une application Web, page 213.
Connexion à l’exemple de base de données (ASP.NET) 289
290 Configuration d’un exemple de site ASP.NET
ANNEXE E
Configuration d’un
exemple de site ASP
E
Macromedia Dreamweaver 8 contient des exemples de pages ASP (Active
Server Pages) de Microsoft qui vous permettront de créer une petite
application Web. Ce chapitre explique comment configurer l’exemple
d’application en utilisant Microsoft Internet Information Server (IIS). Pour
plus d’informations sur ces serveurs Web, voir Installation d’un serveur Web,
page 251.
Ce chapitre s’adresse uniquement aux développeurs ASP. Pour plus
d’informations sur l’utilisation du protocole ASP.NET, voir Configuration
d’un exemple de site ASP.NET, page 275.
La configuration d’une application Web s’effectue en trois étapes. Vous
devez d’abord configurer votre système. Vous devez ensuite définir un site
Dreamweaver. Puis, vous devez connecter l’application à votre base de
données. Ce chapitre de configuration décrit cette procédure en trois
étapes.
Ce chapitre contient les sections suivantes :
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
291
Aide-mémoire pour la
configuration à l’intention des
développeurs ASP
Pour configurer une application Web, vous devez configurer votre système,
définir un site Dreamweaver, puis vous connecter à une base de données.
Cette section fournit une liste de contrôle pour chaque tâche. Les
différentes tâches sont décrites de manière plus détaillée dans le reste du
chapitre.
Configurez votre système :
1.
Vérifiez que vous disposez d’un serveur Web.
2.
Installez un serveur d’application.
3.
Testez votre installation.
4.
Créez un dossier racine.
Définissez un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur.
2.
Définissez le dossier comme dossier Dreamweaver local.
3.
Définissez un dossier de serveur Web comme dossier Dreamweaver
distant.
4.
Définissez un dossier dans lequel traiter les pages dynamiques.
5.
Téléchargez les exemples de fichiers sur le serveur Web.
Connectez-vous à la base de données :
1.
Si votre serveur est un ordinateur distant, copiez l’exemple de base de
données sur l’ordinateur distant.
2.
Créez la connexion dans Dreamweaver.
Configuration du système (ASP)
Cette section fournit des instructions pour les deux configurations de
système les plus courantes : lorsque Microsoft IIS est installé sur votre
disque dur et lorsque IIS est installé sur un ordinateur Windows distant.
292 Configuration d’un exemple de site ASP
L’illustration suivante présente les deux configurations décrites dans cette
section :
Configuration locale
(Windows uniquement)
Configuration du serveur distant
(Macintosh ou Windows)
PC WINDOWS
MAC ou PC WINDOWS
Dreamweaver
Dreamweaver
IIS
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Accès réseau ou ftp
SERVEUR WINDOWS
IIS
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Pour configurer votre système :
1.
Vérifiez que vous disposez d’un serveur Web (voir Recherche d’un serveur
Web, page 294).
2.
Si besoin est, installez un serveur d’application (voir Installation d’un
serveur d’application ASP, page 294).
3.
Testez votre installation (voir Test de l’installation, page 295).
Configuration du système (ASP) 293
4.
Créez un dossier racine (voir Création d’un dossier racine, page 296).
REMARQUE
L’installation du serveur Web et du serveur d’application sont des tâches
que vous n’aurez à exécuter qu’une seule fois.
Recherche d’un serveur Web
Pour développer et tester des pages Web dynamiques, vous avez besoin
d’un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit
des pages Web en réponse à des requêtes de navigateurs Web.
Vérifiez que Microsoft IIS est installé et exécuté sur votre disque dur ou un
ordinateur Windows distant (les utilisateurs de Macintosh doivent installer
Microsoft IIS sur un ordinateur Windows distant). Pour savoir rapidement
si IIS est installé sur votre ordinateur, vérifiez la structure du dossier afin de
déterminer si elle comporte un dossier C:\Inetpub ou D:\Inetpub. IIS crée
ce dossier pendant l’installation.
Si IIS n’est pas installé, installez-le tout de suite. Pour toutes instructions,
voir Installation d’un serveur Web, page 251.
Après avoir installé le serveur Web, vous devez installer un serveur
d’application
Installation d’un serveur d’application ASP
Un serveur d’application est nécessaire pour traiter les pages Web
dynamiques. Un serveur d’application est un logiciel qui aide un serveur
Web à traiter des pages Web contenant des scripts ou des balises côté
serveur. Lorsqu’une page portant cette marque est demandée par un
navigateur, le serveur Web transmet la page au serveur d’application pour
que celui-ci la traite avant qu’elle ne soit envoyée au navigateur. Pour plus
d’informations, consultez la section Description des applications Web,
page 235.
Si vous avez installé IIS sur un ordinateur Windows, vous n’avez pas besoin
d’un autre serveur d’application ASP. IIS tourne aussi comme un serveur
d’application ASP. Pour plus d’informations sur l’installation et le test de
IIS, voir Installation d’un serveur Web, page 251.
Vous devez tester le serveur pour vérifier qu’il fonctionne correctement
294 Configuration d’un exemple de site ASP
Test de l’installation
Vous pouvez tester le moteur ASP de IIS en exécutant une page de test.
Pour tester le moteur ASP de IIS :
1.
Dans Dreamweaver ou dans tout éditeur de texte, créez un fichier de
texte brut intitulé heuretest.asp.
2.
Tapez le code suivant dans le fichier :
<p>Cette page a été crée <b>
<%= Time %>
</b> sur un ordinateur exécutant ASP.</p>
Ce code affiche l’heure à laquelle la page a été traitée sur le serveur.
3.
Copiez le fichier dans le dossier C:Inetpub\wwwroot de l’ordinateur
Windows qui exécute IIS.
4.
Dans votre navigateur Web, tapez l’URL de votre page de test, puis
appuyez sur Entrée.
Si IIS est exécuté sur votre ordinateur local, vous pouvez taper l’URL
suivante:
http://localhost/heuretest.asp
La page de test doit s’ouvrir et indiquer une heure :
Configuration du système (ASP) 295
L’heure indiquée correspond au contenu dynamique car elle change chaque
fois que vous appelez la page. Cliquez sur le bouton Actualiser du
navigateur pour générer une nouvelle page avec une heure différente.
REMARQUE
En consultant le code source (Affichage > Source dans Internet Explorer),
vous pourrez vérifier que la page n’utilise pas de code JavaScript côté
client pour obtenir ce résultat.
Si la page ne fonctionne pas correctement, recherchez les erreurs
potentielles suivantes :
■
Le fichier ne porte pas l’extension .asp.
■
Vous avez saisi le chemin du fichier de la page
(C:\Inetput\wwwroot\heuretest.asp) au lieu de son URL (par exemple,
http://localhost/heuretest.asp) dans le champ Adresse du navigateur.
Si vous tapez un chemin de fichier dans le navigateur (comme vous en
avez peut-être l’habitude avec les pages HTML normales), vous
contournez le serveur Web et le serveur d’application. Votre page n’est
alors jamais traitée par le serveur.
■
L’URL contient une faute de frappe. Recherchez les erreurs éventuelles
et vérifiez que le nom de fichier n’est pas suivi d’une barre oblique,
comme dans l’exemple suivant : http://localhost/heuretest.asp/.
■
Le code de la page contient une faute de frappe.
Après avoir installé et testé le logiciel de serveur, créez un dossier racine
pour votre application Web
Création d’un dossier racine
Après avoir installé le logiciel de serveur, créez un dossier racine pour votre
application Web sur le système exécutant Microsoft IIS, et assurez-vous que
le dossier dispose des autorisations nécessaires.
296 Configuration d’un exemple de site ASP
Pour créer un dossier racine pour votre application Web :
1.
Créez un dossier appelé MonApplicationWeb sur le système exécutant
IIS.
REMARQUE
Notez ce nom de dossier. Il vous sera utile par la suite. Attention, lorsque
vous l’utiliserez à nouveau, la casse devra être identique à celle utilisée lors
de sa création.
Utilisez de préférence l’emplacement suivant pour créer le dossier :
C:\Inetpub\wwwroot\. Par défaut, votre serveur Web IIS est configuré
pour fournir les pages contenues dans le dossier Inetpub\wwwroot. Le
serveur Web répondra aux requêtes HTTP des navigateurs Web en
renvoyant les pages de ce dossier ou de ses sous-dossiers.
2.
Pour vous assurer que les autorisations Lire et Scripts sont activées pour
le dossier, suivez l’une des procédures suivantes :
a.
Si vous utilisez IIS, lancez l’outil administratif IIS (sous
Windows XP, sélectionnez Démarrer > Panneau de configuration
ou Démarrer > Paramètres >Panneau de configuration, puis
double-cliquez sur Outils administratifs et double-cliquez sur
Services Internet (IIS)).
b.
Développez la liste ordinateur local, puis le dossier Sites Web, puis
le dossier Site Web par défaut.
c.
Cliquez avec le bouton droit de la souris sur votre dossier
MonApplicationWeb, puis sélectionnez Propriétés dans le menu
déroulant.
d.
Dans le menu contextuel Exécuter les autorisations, vérifiez que
l’option Scripts est sélectionnée (pour des raisons de sécurité, nous
vous recommandons de ne pas sélectionner l’option Scripts et
exécutables).
e.
Cliquez sur OK.
Le serveur Web est maintenant configuré pour fournir les pages Web de
votre dossier racine en réponse aux requêtes HTTP des navigateurs Web.
Une fois votre système configuré, vous devez définir un site Dreamweaver
Configuration du système (ASP) 297
Définition d’un site Dreamweaver
(ASP)
Une fois que vous avez configuré votre système, vous devez copier les
exemples de fichiers dans un dossier local et définir un site Dreamweaver
pour les gérer.
Pour définir un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur
(voir Copie des exemples de fichiers, page 298).
2.
Définissez le dossier comme un dossier Dreamweaver local (voir
Définition d’un dossier local, page 299).
3.
Définissez votre dossier racine sur le serveur Web comme dossier
Dreamweaver distant (voir Définition d’un dossier distant, page 300).
4.
Spécifiez un dossier dans lequel traiter les pages dynamiques (voir
Définition du dossier de traitement des pages dynamiques, page 301).
5.
Téléchargez les exemples de fichiers sur le serveur Web (voir
Téléchargement des exemples de fichiers, page 302).
Copie des exemples de fichiers
Si ce n’est pas déjà fait, copiez les exemples de fichiers du dossier
d’application Dreamweaver dans un dossier de votre disque dur.
Pour copier les exemples de fichiers :
1.
Créez un dossier intitulé local_sites dans le dossier utilisateur de votre
disque dur.
Par exemple, créez l’un des dossiers suivants :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites (Windows)
■
/Utilisateurs/votre_nom_d’utilisateur/Documents/local_sites
(Macintosh).
R E MA R Q U E
Sur un Macintosh, votre dossier d’utilisateur contient déjà un dossier
intitulé Sites. N’utilisez pas le dossier Sites en tant que dossier local ; le
dossier Sites correspond au dossier de stockage des pages que vous
souhaitez diffuser lors de l’utilisation du Macintosh comme serveur Web.
298 Configuration d’un exemple de site ASP
2.
Recherchez le dossier cafe_townsend dans le dossier d’application sur
votre disque dur.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin
du dossier est le suivant :
3.
■
Sous Windows : C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\.
■
Sur Macintosh : DD Macintosh/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend.
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine (dossier
principal) de votre site Dreamweaver.
Après avoir copié le dossier cafe_townsend, définissez le dossier en tant
que Dreamweaver dossier local.
Définition d’un dossier local
Après avoir copié le dossier cafe_townsend, définissez le dossier contenant
les exemples de fichiers ASP comme dossier Dreamweaver local.
Pour définir le dossier Dreamweaver local :
1.
Dans Dreamweaver, sélectionnez Site > Gérer les sites. Dans la boîte de
dialogue Gérer les sites, cliquez sur le bouton Nouveau, puis
sélectionnez Site.
La boîte de dialogue Définition du site s’ouvre.
2.
Si l’onglet Elémentaire s’affiche, cliquez sur l’onglet Avancé.
3.
Dans la zone de texte Nom du site, saisissez Cafe Townsend ASP.
Le nom identifie votre site dans Dreamweaver.
4.
5.
Cliquez sur le dossier situé à côté de la zone de texte Dossier racine local
et naviguez jusqu’au dossier suivant qui contient des exemples de
fichiers ASP :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites\cafe_townsend\contact\asp (Windows)
■
/Utilisateurs/votre_nom_d’utilisateurDocuments/local_sites/
cafe_townsend/contact/asp (Macintosh)
Cliquez sur Sélectionner pour finaliser la définition du dossier local
Dreamweaver.
Définition d’un site Dreamweaver (ASP) 299
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez un dossier de serveur Web comme dossier Dreamweaver distant
Définition d’un dossier distant
Après avoir défini un dossier local, définissez un dossier de serveur Web
comme dossier Dreamweaver distant.
Pour définir le dossier Dreamweaver distant :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Infos distantes.
La boîte de dialogue Infos distantes s’affiche.
2.
Dans le menu déroulant Accès, sélectionnez la manière dont vous
souhaitez placer et déplacer vos fichiers sur le serveur : via un réseau local
(option Local/Réseau) ou en utilisant le protocole FTP.
REMARQUE
Le menu déroulant Accès contient d’autres options, qui ne sont pas
traitées dans ce guide. Pour plus d’informations concernant leur
utilisation, voir l’aide Utilisation de Dreamweaver.
3.
Saisissez le chemin ou les paramètres FTP qui mènent au dossier du
serveur Web créé dans Création d’un dossier racine, page 296.
Le dossier peut se trouver sur votre disque dur ou sur un ordinateur
distant. Même si vous avez créé le dossier sur votre disque dur, il est
toujours considéré comme le dossier « distant ». L’exemple ci-dessous
correspond à un chemin de dossier distant possible pour l’option Local/
Réseau (dossier distant stocké sur votre disque dur Windows) :
Répertoire distant : C:\Inetpub\wwwroot\MonApplicationWeb
Pour plus d’informations sur FTP, consultez Définition des options
distantes pour l'accès FTP dans Utilisation de l’aide Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez ensuite un dossier dans lequel traiter les pages dynamiques
300 Configuration d’un exemple de site ASP
Définition du dossier de traitement des
pages dynamiques
Après avoir défini le dossier Dreamweaver distant, spécifiez un dossier dans
lequel seront traitées les pages dynamiques. Dreamweaver utilise ce dossier
pour afficher les pages dynamiques et se connecter aux bases de données
lorsque vous développez votre application.
Pour spécifier le dossier dans lequel traiter les pages
dynamiques :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Serveur d’évaluation.
L’écran Serveur d’évaluation apparaît. Dreamweaver doit pouvoir
recourir aux services d’un serveur d’évaluation pour générer et afficher
du contenu dynamique pendant que vous procédez à la création du
site. Dans la mesure où il traite les pages ASP, ce serveur peut se trouver
sur votre ordinateur local, un serveur de développement, un serveur
intermédiaire ou un serveur de production. Souvent, notamment lors
de la définition du site Cafe Townsend, vous pouvez utiliser les mêmes
paramètres que dans la catégorie Infos distantes (voir Définition d’un
dossier distant, page 300) car ceux-ci pointent vers un serveur capable
de traiter les pages ASP.
2.
Sélectionnez une technologie de serveur ASP JavaScript ou ASP
VBScript dans le menu contextuel Modèle de serveur.
3.
Dans le menu déroulant Accès, sélectionnez la méthode (Local/Réseau
ou FTP) que vous avez spécifiée pour accéder à votre dossier distant.
Dreamweaver entre les paramètres spécifiés dans la catégorie Infos
distantes. Laissez les paramètres tels qu’ils sont.
4.
Dans le champ Préfixe de l’URL, tapez l’URL racine à saisir dans un
navigateur Web pour demander une page dans votre application Web.
Pour afficher des données dynamiques dans vos pages lorsque vous
travaillez, Dreamweaver crée un fichier temporaire, le copie dans le
dossier racine du site Web et essaie de le demander en utilisant le
préfixe de l’URL.
Définition d’un site Dreamweaver (ASP) 301
Dreamweaver déduit le préfixe de l’URL en fonction des informations
fournies dans la boîte de dialogue Définition du site. Il arrive
cependant que le préfixe d’URL proposé soit incorrect. Corrigez-le ou
saisissez un nouveau préfixe d’URL si la proposition de Dreamweaver
est incorrecte. Pour plus d’informations, voir « Paramétrer le préfixe
URL » dans Utilisation de Dreamweaver.
Si le dossier spécifié dans le champ Dossier distant est
C:\Inetpub\wwwroot\MonApplicationWeb, le préfixe de l’URL doit se
présenter comme suit :
http://localhost/MonApplicationWeb/
C O N S E IL
Le préfixe de l’URL
doit toujours indiquer
un répertoire et non
une page spécifique
du site. De plus,
veillez à respecter la
casse utilisée lors de
la création du
dossier.
5.
Cliquez sur OK pour fermer la boîte de dialogue Définition du site et
définir le site, puis fermez la boîte de dialogue Gérer les sites en cliquant
sur Terminé.
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web
Téléchargement des exemples de fichiers
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web. Vous devez
télécharger les fichiers, même si le serveur Web est exécuté sur votre
ordinateur local.
Si vous ne téléchargez pas les fichiers, des fonctions telles que l’affichage des
données dynamiques et l’aperçu dans le navigateur ne fonctionneront pas
avec les pages dynamiques. Par exemple, des liens d’image risquent d’être
rompus dans l’affichage des données dynamiques car les fichiers d’image ne
se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien
vers une page d’informations détaillées tout en affichant l’aperçu d’une
page principale dans un navigateur provoquera une erreur si la page
d’informations détaillées manque dans le serveur.
Pour télécharger les exemples de fichiers dans un serveur
Web :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier
racine du site dans le volet Affichage local.
Le dossier racine est le premier dossier de la liste.
302 Configuration d’un exemple de site ASP
2.
Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers, puis confirmez le
téléchargement de l’ensemble du site.
Dreamweaver copie tous les fichiers dans le dossier du serveur Web
défini dans Définition d’un dossier distant, page 300.
Le site Dreamweaver est maintenant défini. L’étape suivante consiste à se
connecter à l’exemple de base de données installé avec Dreamweaver
Connexion à l’exemple de base
de données (ASP)
Au cours de l’installation, Dreamweaver copie un exemple de base de
données Microsoft Access sur votre disque dur. Cette section explique
comment créer une connexion à un exemple de base de données.
REMARQUE
Pour des informations sur la connexion à une autre base de données, voir
Chapitre 26, Connexions à des bases de données pour les développeurs
ASP dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver).
Pour créer une connexion à une base de données :
1.
Si votre serveur est un ordinateur distant, définissez l’exemple de base de
données sur le serveur distant (voir Configuration de la base de données
(serveur sur l’ordinateur distant), page 303).
2.
Créez la connexion dans Dreamweaver (voir Création d’une connexion à
une base de données, page 306).
Configuration de la base de données
(serveur sur l’ordinateur distant)
Cette section s’applique uniquement si votre serveur Web est exécuté sur
un ordinateur distant. Si votre serveur Web s’exécute sur le même
ordinateur que Dreamweaver, passez directement à la section Création
d’une connexion à une base de données, page 306.
Connexion à l’exemple de base de données (ASP) 303
Avant de tenter de vous connecter à l’exemple de base de données, effectuez
les opérations suivantes sur l’ordinateur distant sur lequel votre serveur
Web est exécuté : copiez l’exemple de base de données sur le disque dur de
l’ordinateur et créez un DSN sur l’ordinateur pointant vers la base de
données.
Pour configurer l’exemple de base de données sur l’ordinateur
distant :
1.
Copiez la base de données sur le disque dur de l’ordinateur distant. Si
Dreamweaver a été installé dans l’emplacement par défaut, le chemin du
dossier contenant le fichier de base de données (tutorial.mdb) sur votre
disque dur est le suivant :
■
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\
data\tutorial.mdb (Windows)
■
/Applications/Macromedia Dreamweaver 8/Tutorial_assets/
cafe_townsend/data/tutorial.mdb (Macintosh)
Vous pouvez placer le fichier dans le dossier de votre choix, sur
l’ordinateur distant, ou créer un nouveau dossier.
REMARQUE
Il peut être risqué de placer le fichier de base de données dans le dossier
Inetpub de l’ordinateur distant. Il est préférable de le placer dans un
dossier auquel le public n’a pas accès.
2.
Vérifiez que Microsoft Access Driver, version 4.0 ou ultérieure, est
installé sur l’ordinateur distant.
Pour savoir si le pilote est déjà installé, voir Affichage des pilotes ODBC
installés sur un système Windows dans Utilisation de Dreamweaver.
304 Configuration d’un exemple de site ASP
Si le pilote n’est pas installé, téléchargez et installez Microsoft Data
Access Components (MDAC) 2.5 et 2.7 sur l’ordinateur distant. Vous
pouvez télécharger MDAC gratuitement du site Web de Microsoft à
l’adresse http://msdn.microsoft.com/data/mdac/downloads/. Ces
progiciels contiennent les pilotes Microsoft les plus récents, y compris
le pilote Microsoft Access.
REMARQUE
Installez MDAC 2.5 avant d’installer MDAC 2.7.
3.
Configurez un DSN intitulé CafeTownsend pointant vers l’exemple de
base de données sur l’ordinateur distant.
Pour obtenir des instructions, voir les articles suivants sur le site Web de
Microsoft :
■
Si l’ordinateur distant fonctionne sous Windows 2000, voir l’article
300596 à l’adresse suivante : http://support.microsoft.com/
default.aspx?scid=kb;en-us;300596.
■
Si l’ordinateur distant fonctionne sous Windows XP, voir l’article
305599 à l’adresse suivante : http://support.microsoft.com/
default.aspx?scid=kb;en-us;305599.
Une fois que la base de données, le pilote de la base de données et le DSN
sont en place, vous devez créer une connexion à une base de données
dans Dreamweaver
Connexion à l’exemple de base de données (ASP) 305
Création d’une connexion à une base de
données
La dernière étape du processus de configuration consiste à établir une
connexion à la base de données.
Si le serveur Web s’exécute sur votre ordinateur local, vous pouvez utiliser
le DSN (Data Source Name, nom de source de données) créé par
Dreamweaver au cours de l’installation pour vous connecter rapidement à
l’exemple de base de données. Pour plus d’informations sur les DSN, voir
Utilisation d'un DSN dans Utilisation de Dreamweaver.
Pour créer une connexion à une base de données dans
Dreamweaver :
1.
Ouvrez une page ASP quelconque dans Dreamweaver, puis allez dans le
panneau Bases de données (Fenêtre > Bases de données).
2.
Cliquez sur le bouton Plus (+) dans le panneau et sélectionnez Nom de
la source de données (DSN) dans le menu contextuel.
La boîte de dialogue Nom de la source de données (DSN) s’affiche.
3.
Tapez connTownsend comme nom de connexion.
4.
(Windows uniquement) Effectuez l’une des opérations suivantes :
■
Si le serveur Web s’exécute sur votre ordinateur local, sélectionnez
l’option Utilisation du DSN local.
■
Si le serveur Web s’exécute sur un système distant, sélectionnez
l’option Utilisation du DSN sur le serveur d’évaluation.
Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les
connexions à des bases de données utilisent des DSN sur le serveur
d’évaluation.
5.
Cliquez sur le bouton DSN, puis sélectionnez CafeTownsend dans la
liste des DSN.
Si vous utilisez Dreamweaver sur un ordinateur Windows, durant
l’installation Dreamweaver a créé un DSN appelé CafeTownsend, qui
pointe sur la base de données Microsoft Access dans le dossier
d’application de Dreamweaver.
306 Configuration d’un exemple de site ASP
6.
Cliquez sur Tester.
Dreamweaver tente d’établir la connexion à la base de données. Si la
connexion échoue, procédez de la manière suivante :
7.
■
Vérifiez le DSN.
■
Vérifiez les paramètres du dossier utilisé par Dreamweaver pour
traiter les pages dynamiques (voir Définition du dossier de traitement
des pages dynamiques, page 301).
■
Reportez-vous à Chapitre 29, Résolution des problèmes de connexion
à des bases de données dans Utilisation de Dreamweaver
(Aide > Utilisation de Dreamweaver).
Cliquez sur OK.
La nouvelle connexion s’affiche dans le panneau Bases de données.
L’exemple d’application ASP est configuré pour les didacticiels Bien
démarrer avec Dreamweaver. Pour plus d’informations, voir Didacticiel :
Développement d’une application Web, page 213.
Connexion à l’exemple de base de données (ASP) 307
308 Configuration d’un exemple de site ASP
ANNEXE F
Configuration d’un
exemple de site JSP
F
Macromedia Dreamweaver 8 contient des exemples de pages JavaServer
(JSP) qui vous permettront de créer une petite application Web. Ce
chapitre explique comment configurer l’exemple d’application en utilisant
Microsoft Internet Information Server (IIS). Pour plus d’informations sur
ces serveurs Web, voir Installation d’un serveur Web, page 251. Si vous
utilisez un autre serveur Web, voir Chapitre 23, Configuration d'une
application Web dans Utilisation de Dreamweaver (Aide > Utilisation
de Dreamweaver).
La configuration d’une application Web s’effectue en trois étapes. Vous
devez d’abord configurer votre système. Vous devez ensuite définir un site
Dreamweaver. Puis, vous devez connecter l’application à votre base de
données. Ce chapitre de configuration décrit cette procédure en trois
étapes.
Ce chapitre contient les sections suivantes :
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
309
Aide-mémoire pour la
configuration à l’intention des
développeurs JSP
Pour configurer une application Web, vous devez configurer votre système,
définir un site Dreamweaver, puis vous connecter à une base de données.
Cette section fournit une liste de contrôle pour chaque tâche. Les
différentes tâches sont décrites de manière plus détaillée dans le reste du
chapitre.
Configurez votre système :
1.
Vérifiez que vous disposez d’un serveur Web.
2.
Installez le serveur d’application JSP.
3.
Créez un dossier racine.
Définissez un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur.
2.
Définissez le dossier comme dossier Dreamweaver local.
3.
Définissez un dossier de serveur Web comme dossier Dreamweaver
distant.
4.
Définissez un dossier dans lequel traiter les pages dynamiques.
5.
Téléchargez les exemples de fichiers sur le serveur Web.
Connectez-vous à la base de données :
1.
Installez un pilote de pont JDBC-ODBC.
2.
Si votre serveur est un ordinateur distant, copiez l’exemple de base de
données sur l’ordinateur distant.
3.
Créez la connexion dans Dreamweaver.
310 Configuration d’un exemple de site JSP
Configuration du système (JSP)
Cette section fournit des instructions pour les deux configurations de
système les plus courantes : lorsque Microsoft IIS est installé sur votre
disque dur et lorsque IIS est installé sur un ordinateur Windows distant.
Pour utiliser une configuration différente, voir Chapitre 23, Configuration
d'une application Web dans Utilisation de Dreamweaver.
L’illustration suivante présente les deux configurations décrites dans cette
section :
Configuration locale
(Windows uniquement)
Configuration du serveur distant
(Macintosh ou Windows)
PC WINDOWS
Dreamweaver
MAC ou PC WINDOWS
Dreamweaver
IIS
Serveur d’applications JSP
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Accès réseau ou ftp
SERVEUR WINDOWS
IIS
Serveur d’applications JSP
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Configuration du système (JSP)
311
Pour configurer votre système :
1.
Vérifiez que vous disposez d’un serveur Web (voir Recherche d’un serveur
Web, page 312).
2.
Installez le serveur d’application JSP (voir Installation d’un serveur
d’application JSP, page 312).
3.
Créez un dossier racine (voir Création d’un dossier racine, page 314).
REMARQUE
L’installation du serveur Web et du serveur d’application sont des tâches
que vous n’aurez à exécuter qu’une seule fois.
Recherche d’un serveur Web
Pour développer et tester des pages Web dynamiques, vous avez besoin
d’un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit
des pages Web en réponse à des requêtes de navigateurs Web.
Vérifiez que Microsoft IIS est installé et qu’il tourne sur votre disque dur ou
un ordinateur Windows distant (les utilisateurs de Macintosh doivent
installer Microsoft IIS sur un ordinateur Windows distant). Pour savoir
rapidement si IIS est installé sur votre ordinateur, vérifiez la structure du
dossier afin de déterminer si elle comporte un dossier C:\Inetpub
ou D:\Inetpub. IIS crée ce dossier pendant l’installation.
Si IIS n’est pas installé, installez-le tout de suite. Pour toutes instructions,
voir Installation d’un serveur Web, page 251.
Après avoir installé le serveur Web, installez le serveur d’application
Installation d’un serveur d’application JSP
Un serveur d’application est nécessaire pour traiter les pages Web
dynamiques. Un serveur d’application est un logiciel qui aide un serveur
Web à traiter des pages Web contenant des scripts ou des balises côté
serveur. Lorsqu’une page portant cette marque est demandée par un
navigateur, le serveur Web transmet la page au serveur d’application pour
que celui-ci la traite avant qu’elle ne soit envoyée au navigateur. Pour plus
d’informations, consultez la section Description des applications Web,
page 235.
312 Configuration d’un exemple de site JSP
Vérifiez que le serveur d’application JSP est installé et qu’il tourne sur le
système exécutant IIS (IIS peut être installé sur votre disque dur local ou
sur un ordinateur distant).
Si vous n’avez pas de serveur d’application JSP, vous pouvez télécharger et
installer une version d’essai de Macromedia JRun, serveur d’application
JSP complet, à partir du site Web de Macromedia à l’adresse suivante :
www.macromedia.com/go/jrun_fr/.
JRun est disponible pour les environnements Windows et Macintosh.
Toutefois, l’utilisation de JRun sur Macintosh n’est pas abordée dans ce
guide.
Pour installer JRun :
1.
Le cas échéant, connectez-vous à votre système Windows en utilisant le
compte Administrateur.
2.
Fermez toutes les applications ouvertes.
3.
Double-cliquez sur le fichier d’installation de la version d’essai de JRun.
L’écran d’accueil apparaît.
4.
Si vous ne disposez pas d’un Java Runtime Environment (JRE) sur votre
système, sélectionnez l’option qui permet de l’installer à l’écran
d’accueil.
L’application JRun se base sur Java, ce qui signifie qu’un JRE doit
d’abord être installé sur le système sur lequel sera exécuté votre serveur
d’application. Une fois le JRE installé, vous pouvez installer le serveur
d’application JRun.
5.
Sélectionnez l’option qui permet d’installer JRun à l’écran d’accueil.
6.
Suivez les instructions à l’écran pour finir d’installer et de tester le
programme.
7.
Une fois que l’installation est terminée, créez un connecteur JRun à
votre serveur Web IIS en sélectionnant Démarrer > Programmes >
Macromedia JRun 4 > Web Server Configuration.
Pour obtenir des instructions, voir la documentation relative à JRun.
Après avoir installé et lancé JRun, créez un dossier racine pour votre
application Web
Configuration du système (JSP) 313
Création d’un dossier racine
Après avoir installé le logiciel de serveur, créez un dossier racine pour votre
application Web sur le système exécutant Microsoft IIS, et assurez-vous que
le dossier dispose des autorisations nécessaires.
Pour créer un dossier racine pour votre application Web :
1.
Créez un dossier appelé MonApplicationWeb sur le système exécutant IIS.
REMARQUE
Notez ce nom de dossier. Il vous sera utile par la suite. Attention, lorsque
vous l’utiliserez à nouveau, la casse devra être identique à celle utilisée lors
de sa création.
Utilisez de préférence l’emplacement suivant pour créer le dossier :
C:\Inetpub\wwwroot\. Par défaut, votre serveur Web IIS est configuré
pour fournir les pages contenues dans le dossier Inetpub\wwwroot. Le
serveur Web répondra aux requêtes HTTP des navigateurs Web en
renvoyant les pages de ce dossier ou de ses sous-dossiers.
2.
Pour vous assurer que les autorisations Lire et Scripts sont activées pour
le dossier, suivez l’une des procédures suivantes :
a.
Si vous utilisez IIS, lancez l’outil administratif IIS (sous
Windows XP, sélectionnez Démarrer > Panneau de configuration
ou Démarrer > Paramètres Panneau de configuration, puis doublecliquez sur Outils administratifs et double-cliquez sur Services
Internet (IIS)).
b.
Développez la liste ordinateur local, puis le dossier Sites Web, puis
le dossier Site Web par défaut.
c.
Cliquez avec le bouton droit de la souris sur votre dossier
MonApplicationWeb, puis sélectionnez Propriétés dans le menu
déroulant.
d.
Dans le menu contextuel Exécuter les autorisations, vérifiez que l’option
Scripts est sélectionnée (pour des raisons de sécurité, nous vous
recommandons de ne pas sélectionner l’option Scripts et exécutables).
e.
Cliquez sur OK.
Le serveur Web est maintenant configuré pour fournir les pages Web de
votre dossier racine en réponse aux requêtes HTTP des navigateurs Web.
Une fois votre système configuré, vous devez définir un site Dreamweaver
314 Configuration d’un exemple de site JSP
Définition d’un site Dreamweaver
(JSP)
Une fois que vous avez configuré votre système, vous devez copier les
exemples de fichiers dans un dossier local et définir un site Dreamweaver
pour les gérer.
Pour définir un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur
(voir Copie des exemples de fichiers, page 315).
2.
Définissez le dossier comme un dossier Dreamweaver local (voir
Définition d’un dossier local, page 316).
3.
Définissez votre dossier racine sur le serveur Web comme dossier
Dreamweaver distant (voir Définition d’un dossier distant, page 317).
4.
Spécifiez un dossier dans lequel traiter les pages dynamiques (voir
Définition du dossier de traitement des pages dynamiques, page 318).
5.
Téléchargez les exemples de fichiers sur le serveur Web (voir
Téléchargement des exemples de fichiers, page 319).
Copie des exemples de fichiers
Si ce n’est pas déjà fait, copiez les exemples de fichiers du dossier
d’application Dreamweaver dans un dossier de votre disque dur.
Pour copier les exemples de fichiers :
1.
Créez un dossier intitulé local_sites dans le dossier utilisateur de votre
disque dur.
Par exemple, créez l’un des dossiers suivants :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites (Windows)
■
/Utilisateurs/votre_nom_d’utilisateur/Documents/local_sites
(Macintosh).
R E MA R Q U E
Sur un Macintosh, votre dossier d’utilisateur contient déjà un dossier
intitulé Sites. N’utilisez pas le dossier Sites en tant que dossier local ; le
dossier Sites correspond au dossier de stockage des pages que vous
souhaitez diffuser lors de l’utilisation du Macintosh comme serveur Web.
Définition d’un site Dreamweaver (JSP) 315
2.
Recherchez le dossier cafe_townsend dans le dossier d’application sur
votre disque dur.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin
d’accès au dossier est le suivant :
3.
■
Sous Windows : C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\.
■
Sur Macintosh : DD Macintosh/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend.
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine (dossier
principal) de votre site Dreamweaver.
Après avoir copié le dossier cafe_townsend, définissez le dossier en tant que
Dreamweaver dossier local.
Définition d’un dossier local
Après avoir copié le dossier cafe_townsend, définissez le dossier contenant
les exemples de fichiers JSP comme dossier Dreamweaver local.
Pour définir le dossier Dreamweaver local :
1.
Dans Dreamweaver, sélectionnez Site > Gérer les sites. Dans la boîte de
dialogue Gérer les sites, cliquez sur le bouton Nouveau, puis
sélectionnez Site.
La boîte de dialogue Définition du site s’ouvre.
2.
Si l’onglet Elémentaire s’affiche, cliquez sur l’onglet Avancé.
3.
Dans la zone de texte Nom du site, saisissez Cafe Townsend JSP.
4.
Cliquez sur le dossier situé à côté de la zone de texte Dossier racine local
et naviguez jusqu’au dossier suivant qui contient des exemples de
fichiers JSP :
Le nom identifie votre site dans Dreamweaver.
5.
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites\cafe_townsend\contact\jsp (Windows)
■
/Utilisateurs/votre_nom_d’utilisateurDocuments/local_sites/
cafe_townsend/contact/jsp (Macintosh)
Cliquez sur Sélectionner pour finaliser la définition du dossier local
Dreamweaver.
316 Configuration d’un exemple de site JSP
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez un dossier de serveur Web comme dossier Dreamweaver distant
Définition d’un dossier distant
Après avoir défini un dossier local, définissez un dossier de serveur Web
comme dossier Dreamweaver distant.
Pour définir le dossier Dreamweaver distant :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Infos distantes.
L’écran Infos distantes apparaît.
2.
Dans le menu déroulant Accès, choisissez la manière dont vous
souhaitez placer et déplacer vos fichiers sur le serveur : via un réseau local
(option Local/Réseau) ou en utilisant le protocole FTP.
REMARQUE
Le menu déroulant Accès contient d’autres options, qui ne sont pas
traitées dans ce guide. Pour plus d’informations concernant leur
utilisation, voir Utilisation de Dreamweaver.
3.
Saisissez le chemin ou les paramètres FTP qui mènent au dossier du
serveur Web créé dans Création d’un dossier racine, page 314.
Le dossier peut se trouver sur votre disque dur ou sur un ordinateur
distant. Même si vous avez créé le dossier sur votre disque dur, il est
toujours considéré comme le dossier « distant ». L’exemple ci-dessous
correspond à un chemin de dossier distant possible pour l’option Local/
Réseau (dossier distant stocké sur votre disque dur Windows) :
Répertoire distant : C:\Inetpub\wwwroot\MonApplicationWeb
Pour plus d’informations sur FTP, consultez Définition des options
distantes pour l'accès FTP dans Utilisation de Dreamweaver (Aide >
Utilisation de Dreamweaver).
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez ensuite un dossier dans lequel traiter les pages dynamiques
Définition d’un site Dreamweaver (JSP) 317
Définition du dossier de traitement des
pages dynamiques
Après avoir défini le dossier Dreamweaver distant, spécifiez un dossier dans
lequel seront traitées les pages dynamiques. Dreamweaver utilise ce dossier
pour afficher les pages dynamiques et se connecter aux bases de données
lorsque vous développez votre application.
Pour spécifier le dossier dans lequel traiter les pages
dynamiques :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Serveur d’évaluation.
L’écran Serveur d’évaluation apparaît. Dreamweaver doit pouvoir
recourir aux services d’un serveur d’évaluation pour générer et afficher
du contenu dynamique pendant que vous procédez à la création du
site. Dans la mesure où il traite les pages JSP, ce serveur peut se trouver
sur votre ordinateur local, un serveur de développement, un serveur
intermédiaire ou un serveur de production. Souvent, notamment lors
de la définition du site Cafe Townsend, vous pouvez utiliser les mêmes
paramètres que dans la catégorie Infos distantes (voir Définition d’un
dossier distant, page 317) car ceux-ci pointent vers un serveur capable
de traiter les pages JSP.
2.
Dans le menu déroulant Modèle de serveur, sélectionnez JSP.
3.
Dans le menu déroulant Accès, sélectionnez la méthode (Local/Réseau
ou FTP) que vous avez spécifiée pour accéder à votre dossier distant.
Dreamweaver entre les paramètres spécifiés dans la catégorie Infos
distantes. Laissez les paramètres tels qu’ils sont.
4.
Dans le champ Préfixe de l’URL, tapez l’URL racine à saisir dans un
navigateur Web pour demander une page dans votre application Web.
Pour afficher des données dynamiques dans vos pages lorsque vous
travaillez, Dreamweaver crée un fichier temporaire, le copie dans le
dossier racine du site Web et essaie de le demander en utilisant le
préfixe de l’URL.
318 Configuration d’un exemple de site JSP
Dreamweaver déduit le préfixe de l’URL en fonction des informations
fournies dans la boîte de dialogue Définition du site. Il arrive
cependant que le préfixe d’URL proposé soit incorrect. Corrigez-le ou
saisissez un nouveau préfixe d’URL si la proposition de Dreamweaver
est incorrecte. Pour plus d’informations, voir Définition du préfixe
d'URL dans Utilisation de Dreamweaver.
Si le dossier spécifié dans le champ Dossier distant est
C:\Inetpub\wwwroot\MonApplicationWeb, le préfixe de l’URL doit se
présenter comme suit :
http://localhost/MonApplicationWeb/
Cliquez sur OK pour définir le site et fermer la boîte de dialogue
Définition du site; puis fermez la boîte de dialogue Gérer les sites en
cliquant sur Terminé.
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web
Téléchargement des exemples de fichiers
C O N S E IL
5.
Le préfixe de l’URL
doit toujours indiquer
un répertoire et non
une page spécifique
du site. De plus,
veillez à respecter la
casse utilisée lors de
la création du
dossier.
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web. Vous devez
télécharger les fichiers, même si le serveur Web est exécuté sur votre
ordinateur local.
Si vous ne téléchargez pas les fichiers, des fonctions telles que l’affichage des
données dynamiques et l’aperçu dans le navigateur ne fonctionneront pas
avec les pages dynamiques. Par exemple, des liens d’image risquent d’être
rompus dans l’affichage des données dynamiques car les fichiers d’image ne
se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien
vers une page d’informations détaillées tout en affichant l’aperçu d’une
page principale dans un navigateur provoquera une erreur si la page
d’informations détaillées manque dans le serveur.
Pour télécharger les exemples de fichiers dans un serveur
Web :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier
racine du site dans le volet Affichage local.
Le dossier racine est le premier dossier de la liste.
Définition d’un site Dreamweaver (JSP) 319
2.
Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers, puis confirmez le
téléchargement de l’ensemble du site.
Dreamweaver copie tous les fichiers dans le dossier du serveur Web
défini dans Définition d’un dossier distant, page 317.
Le site Dreamweaver est maintenant défini. L’étape suivante consiste à se
connecter à l’exemple de base de données installé avec Dreamweaver
Connexion à l’exemple de base
de données (JSP)
Au cours de l’installation, Dreamweaver copie un exemple de base de
données Microsoft Access sur votre disque dur. Cette section explique
comment créer une connexion à un exemple de base de données.
REMARQUE
Pour des informations sur la connexion à une autre base de données, voir
Chapitre 27, Connexions à des bases de données pour les développeurs
JSP dans Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver).
Pour créer une connexion à une base de données :
1.
Installez le pilote de pont (voir Installation du pilote de pont, page 320).
2.
Si votre serveur est un ordinateur distant, définissez l’exemple de base de
données sur le serveur distant (voir Configuration de la base de données
(serveur sur l’ordinateur distant), page 321).
3.
Créez la connexion dans Dreamweaver (voir Création d’une connexion à
une base de données, page 324).
Installation du pilote de pont
Avant de tenter de vous connecter à l’exemple de base de données, installez
le pilote JDBC-ODBC Bridge de Sun sur l’ordinateur exécutant votre
serveur Web. Le pilote de pont vous permet d’utiliser des noms de source
de données (DSN) Windows pour créer des connexions. Ce pilote est
fourni avec Java 2 SDK de Sun, Standard Edition, pour Windows.
320 Configuration d’un exemple de site JSP
Pour savoir si vous avez déjà Java 2 SDK avec le pilote, recherchez l’un de
ces répertoires sur votre disque dur :
C:\jdk1.2.x
C:\jdk1.3.x
C:\j2sdk1.4.x
REMARQUE
Le terme « Java 2 » désigne les versions Java 1.2 et ultérieures.
Si vous ne disposez pas de SDK, vous pouvez le télécharger à partir du site
Web de Sun à l’adresse suivante : java.sun.com/j2se/. Après avoir téléchargé
le fichier d’installation, double-cliquez dessus pour exécuter le programme
d’installation. Suivez les instructions à l’écran et vérifiez que le composant
Java 2 Runtime Environment est sélectionné dans la boîte de dialogue
Sélectionner un composant. Il doit être sélectionné par défaut. Le pilote est
installé automatiquement lorsque vous installez le SDK.
Bien qu’il soit parfaitement adapté au développement avec des systèmes de
bases de données bas de gamme tels que Microsoft Access, le pilote JDBCODBC Bridge de Sun n’est pas conçu pour la production. Par exemple, il
ne permet la connexion à la base de données que d’une seule page JSP à la
fois (en d’autres termes, il ne prend pas en charge l’utilisation simultanée
par plusieurs threads). Pour plus d’informations sur les limites du pilote,
voir l’article 17392 sur le centre de support Macromedia à l’adresse
suivante : www.macromedia.com/go/17392.
Après avoir installé le pilote de pont, configurez la base de données si
nécessaire, puis créez la connexion à la base de données dans Dreamweaver
Configuration de la base de données
(serveur sur l’ordinateur distant)
Cette section s’applique uniquement si votre serveur Web est exécuté sur
un ordinateur distant. Si votre serveur Web s’exécute sur le même
ordinateur que Dreamweaver, passez directement à la section Création
d’une connexion à une base de données, page 324.
Connexion à l’exemple de base de données (JSP) 321
Avant de tenter de vous connecter à l’exemple de base de données, effectuez
les opérations suivantes sur l’ordinateur distant sur lequel votre serveur
Web est exécuté : copiez l’exemple de base de données sur le disque dur de
l’ordinateur, créez un DSN sur l’ordinateur pointant vers la base de
données, puis installez le pilote JDBC-ODBC Bridge de Sun sur
l’ordinateur.
Pour configurer l’exemple de base de données sur l’ordinateur
distant :
1.
Copiez la base de données sur le disque dur de l’ordinateur distant. Si
Dreamweaver a été installé dans l’emplacement par défaut, le chemin du
dossier contenant le fichier de base de données (tutorial.mdb) sur votre
disque dur est le suivant :
■
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\
data\tutorial.mdb (Windows)
■
/Applications/Macromedia Dreamweaver 8/Tutorial_assets/
cafe_townsend/data/tutorial.mdb (Macintosh)
Vous pouvez placer le fichier dans le dossier de votre choix, sur
l’ordinateur distant, ou créer un nouveau dossier.
REMARQUE
Il peut être risqué de placer le fichier de base de données dans le dossier
Inetpub de l’ordinateur distant. Il est préférable de le placer dans un
dossier auquel le public n’a pas accès.
2.
Vérifiez que Microsoft Access Driver, version 4.0 ou ultérieure, est
installé sur l’ordinateur distant.
Pour savoir si le pilote est déjà installé, voir Affichage des pilotes ODBC
installés sur un système Windows dans Utilisation de Dreamweaver.
322 Configuration d’un exemple de site JSP
Si le pilote n’est pas installé, téléchargez et installez Microsoft Data
Access Components (MDAC) 2.5 et 2.7 sur l’ordinateur distant. Vous
pouvez télécharger MDAC gratuitement du site Web de Microsoft à
l’adresse http://msdn.microsoft.com/data/mdac/downloads/. Ces
progiciels contiennent les pilotes Microsoft les plus récents, y compris
le pilote Microsoft Access.
REMARQUE
Installez MDAC 2.5 avant d’installer MDAC 2.7.
3.
Configurez un DSN intitulé CafeTownsend pointant vers l’exemple de
base de données sur l’ordinateur distant.
Pour obtenir des instructions, voir les articles suivants sur le site Web de
Microsoft :
4.
■
Si l’ordinateur distant fonctionne sous Windows 2000, voir l’article
300596 à l’adresse suivante : http://support.microsoft.com/
default.aspx?scid=kb;en-us;300596.
■
Si l’ordinateur distant fonctionne sous Windows XP, voir l’article
305599 à l’adresse suivante : http://support.microsoft.com/
default.aspx?scid=kb;en-us;305599.
Vérifiez que le pilote de pont JDBC-ODBC de Sun est installé sur
l’ordinateur distant.
Vous utiliserez ce pilote et le DSN pour créer une connexion à la base
de données. Pour toutes instructions, voir Installation du pilote de pont,
page 320.
Une fois que la base de données, le DSN et le pilote de pont sont en place,
créez une connexion à une base de données dans Dreamweaver
Connexion à l’exemple de base de données (JSP) 323
Création d’une connexion à une base de
données
La dernière étape du processus de configuration consiste à établir une
connexion à la base de données.
Pour créer une connexion à une base de données dans
Dreamweaver :
1.
Ouvrez une page JSP quelconque dans Dreamweaver, puis allez dans le
panneau Bases de données (Fenêtre > Bases de données).
2.
Cliquez sur le bouton Plus (+) dans le panneau, puis sélectionnez Pilote
JDBC-ODBC Sun (Base de données ODBC) dans le menu déroulant.
La boîte de dialogue Base de données ODBC (Pilote JDBC-ODBC
Sun) s’affiche.
3.
Tapez connTownsend comme nom de connexion.
4.
(Windows uniquement) Effectuez l’une des opérations suivantes :
■
Si le serveur s’exécute sur votre ordinateur local, sélectionnez
l’option Utilisation du pilote sur cette machine.
■
Si le serveur Web s’exécute sur un système distant, sélectionnez
l’option Utilisation du pilote sur le serveur d’évaluation.
Les utilisateurs Macintosh peuvent ignorer cette étape, car toutes les
connexions à des bases de données utilisent des pilotes sur le serveur
d’évaluation.
5.
Dans la zone URL, remplacez l’espace réservé [odbc dsn] par
CafeTownsend.
Dans le champ URL, vous devez pouvoir lire ce qui suit :
jdbc:odbc:CafeTownsend
Si vous utilisez Dreamweaver sur un ordinateur Windows, durant
l’installation Dreamweaver a créé un DSN appelé CafeTownsend, qui
pointe sur la base de données Microsoft Access dans le dossier
d’application de Dreamweaver.
324 Configuration d’un exemple de site JSP
6.
Cliquez sur Tester.
Dreamweaver tente d’établir la connexion à la base de données. Si la
connexion échoue, procédez de la manière suivante :
7.
■
Revérifiez le DSN et les autres paramètres de la connexion.
■
Vérifiez les paramètres du dossier utilisé par Dreamweaver pour
traiter les pages dynamiques (voir Définition du dossier de traitement
des pages dynamiques, page 318).
■
Reportez-vous à Chapitre 29, Résolution des problèmes de connexion
à des bases de données dans Utilisation de Dreamweaver
(Aide >Utilisation deDreamweaver).
Cliquez sur OK.
La nouvelle connexion s’affiche dans le panneau Bases de données.
L’exemple d’application JSP est configuré pour les didacticiels Bien
démarrer avec Dreamweaver. Pour plus d’informations, consultez la section
Didacticiel : Développement d’une application Web, page 213.
Connexion à l’exemple de base de données (JSP) 325
326 Configuration d’un exemple de site JSP
ANNEXE G
Configuration d’un
exemple de site PHP
G
Macromedia Dreamweaver 8 contient des exemples de pages PHP pour
vous permettre de créer une petite application Web. Ce chapitre explique
comment configurer l’exemple d’application en utilisant Microsoft
Internet Information Server (IIS). Pour plus d’informations sur ces serveurs
Web, voir Installation d’un serveur Web, page 251. Si vous utilisez un autre
serveur Web, voir Chapitre 23, Configuration d'une application Web dans
Utilisation de Dreamweaver.
Si vous travaillez sous Macintosh, vous pouvez vous connecter à un serveur
PHP distant ou développer des sites PHP localement en utilisant le serveur
Web Apache et le serveur d’application PHP installé avec votre système
d’exploitation. Pour plus d’informations sur la configuration, consultez les
sites Web suivants :
■
http://developer.apple.com/internet/opensource/php.html
■
www.entropy.ch/software/macosx/php/
La configuration d’une application Web s’effectue en trois étapes. Vous
devez d’abord configurer votre système. Vous devez ensuite définir un site
Dreamweaver. Puis, vous devez connecter l’application à votre base de
données. Ce guide de configuration décrit cette procédure en trois étapes.
Ce chapitre contient les sections suivantes :
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
327
Aide-mémoire pour la
configuration à l’intention des
développeurs PHP
Pour configurer une application Web, vous devez configurer votre système,
définir un site Dreamweaver, puis vous connecter à une base de données.
Cette section fournit une liste de contrôle pour chaque tâche. Les
différentes tâches sont décrites de manière plus détaillée dans le reste du
chapitre.
Configurez votre système :
1.
Vérifiez que vous disposez d’un serveur Web.
2.
Installez le serveur d’application PHP.
3.
Testez votre installation.
4.
Créez un dossier racine.
Définissez un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur.
2.
Définissez le dossier comme dossier Dreamweaver local.
3.
Définissez un dossier de serveur Web comme dossier Dreamweaver
distant.
4.
Définissez un dossier dans lequel traiter les pages dynamiques.
5.
Téléchargez les exemples de fichiers sur le serveur Web.
Connectez-vous à la base de données :
1.
Créez un exemple de base de données MySQL.
2.
Créez la connexion dans Dreamweaver.
Configuration du système (PHP)
L’exécution de pages PHP requiert une configuration préalable de votre
système. En d’autres termes, vous devez vous assurer que votre système
inclut un serveur Web et un serveur d’application PHP et que ces deux
serveurs sont en cours d’exécution. Vous devez ensuite créer un dossier
racine pour les fichiers PHP.
328 Configuration d’un exemple de site PHP
Configuration du système Windows (PHP)
Cette section fournit des instructions pour les deux configurations
Windows les plus courantes : lorsque Microsoft IIS est installé sur votre
disque dur et lorsque IIS est installé sur un ordinateur Windows distant.
Pour utiliser une configuration différente, voir Chapitre 23, Configuration
d'une application Web dans Utilisation de Dreamweaver.
L’illustration suivante présente les deux configurations décrites dans cette
section :
Configuration locale
(Windows uniquement)
Configuration du serveur distant
(Macintosh ou Windows)
PC WINDOWS
Dreamweaver
MAC ou PC WINDOWS
Dreamweaver
IIS
Serveur d’applications PHP
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Accès réseau ou ftp
SERVEUR WINDOWS
IIS
Serveur d’applications PHP
Dossier racine
du site Web dans
c:\Inetpub\wwwroot\
Configuration du système (PHP) 329
Pour configurer votre système :
1.
Vérifiez que vous disposez d’un serveur Web (voir Recherche d’un serveur
Web (Windows), page 330).
2.
Installez le serveur d’applications PHP (voir Installation d’un serveur
d’application PHP (Windows), page 331).
3.
Testez votre installation (voir Test de l’installation PHP (Windows),
page 333).
4.
Créez un dossier racine (voir Création d’un dossier racine (Windows),
page 334).
REMARQUE
L’installation du serveur Web et du serveur d’application sont des tâches
que vous n’aurez à exécuter qu’une seule fois.
Recherche d’un serveur Web (Windows)
Pour développer et tester des pages Web dynamiques, vous avez besoin
d’un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit
des pages Web en réponse à des requêtes de navigateurs Web.
Vérifiez que Microsoft IIS est installé et qu’il tourne sur votre disque dur ou
un ordinateur Windows distant Pour savoir rapidement si IIS est installé
sur votre ordinateur, vérifiez la structure du dossier afin de déterminer si
elle comporte un dossier C:\Inetpub ou D:\Inetpub. IIS crée ce dossier
pendant l’installation.
Si IIS n’est pas installé, installez-le tout de suite. Pour toutes instructions,
voir Installation d’un serveur Web, page 251.
Après avoir installé le serveur Web, installez le serveur d’application
330 Configuration d’un exemple de site PHP
Installation d’un serveur d’application PHP
(Windows)
Un serveur d’application est nécessaire pour traiter les pages Web
dynamiques. Un serveur d’application est un logiciel qui aide un serveur
Web à traiter des pages Web contenant des scripts ou des balises côté
serveur. Lorsqu’une page portant cette marque est demandée par un
navigateur, le serveur Web transmet la page au serveur d’application pour
que celui-ci la traite avant qu’elle ne soit envoyée au navigateur. Pour plus
d’informations, consultez la section Description des applications Web,
page 235.
Vérifiez que le serveur d’application PHP est installé et qu’il tourne sur le
système exécutant IIS (IIS peut être installé sur votre disque dur local ou
sur un ordinateur distant). Vous pouvez télécharger et installer le serveur
d’application PHP depuis le site Web PHP, à l’adresse www.php.net/
downloads.php.
Avec PHP 5, l’extension qui permet à PHP de travailler avec un serveur de
base de données MySQL n’est pas installée ou activée par défaut par
Windows Installer. Il faut l’installer et l’activer soi-même.
Pour installer PHP sur un système Windows:
1.
Le cas échéant, connectez-vous à votre système Windows en utilisant le
compte Administrateur.
2.
Télécharger Windows PHP 5.x Installer du site Web PHP à l’adresse
www.php.net/downloads.php.
3.
Double-cliquez sur le fichier d’installation que vous avez téléchargé et
suivez les instructions d’installation qui paraissent à l’écran.
4.
Une fois que PHP est installé avec succès, téléchargez le package
Windows PHP 5.x comprimé en mode zip du site Web PHP
www.php.net/downloads.php, puis extrayez le package dans un dossier
temporaire sur votre disque dur.
Le package zip contient l’extension dont vous avez besoin pour
travailler avec MySQL.
5.
Dans le dossier temporaire contenant les fichiers décomprimés, repérez
le dossier appelé ext et copiez-le dans le dossier C:\PHP\
Le dossier PHP contient des extensions communes PHP, y compris
l’extension MySQL.
Configuration du système (PHP) 331
6.
Dans le dossier C:\Windows, repérez le fichier appelé php.ini et ouvrezle dans Notepad.
Vous devez modifier ce fichier pour activer l’extension MySQL.
7.
Trouvez la ligne suivante dans ce fichier.
extension_dir = "./"
Cette ligne précise à quel endroit PHP doit aller chercher des
extensions.
8.
C ON S E I L
N’oubliez pas
d’inclure la dernière
oblique gauche.
Modifiez la ligne comme suit :
extension_dir = "C:\PHP\ext\"
9.
Trouvez la ligne suivante dans ce fichier :
;extension=php_mysql.dll
Le point-virgule en début de ligne demande à PHP d’ignorer cette
ligne.
10. Supprimez
le point-virgule en début de ligne pour activer l’extension.
extension=php_mysql.dll
11.
Enregistrez et fermez le fichier php.ini.
12. Dans
le dossier temporaire contenant vos fichiers PHP décomprimés,
repérez le dossier appelé libmysql.dll et copiez-le dans le dossier
C:\Windows\system32.
Ce fichier est nécessaire pour que IIS puisse travailler avec PHP 5 et
MySQL.
13.
Redémarrez IIS.
Pour plus d’informations sur l’activation de l’extension MySQL, voir le site
Web PHP à l’adresse www.php.net/manual/en/ref.mysql.php. Pour plus
d’informations sur le serveur d’application, reportez-vous à la
documentation PHP, que vous pouvez télécharger à partir du site Web
PHP à l’adresse suivante : www.php.net/download-docs.php.
Après avoir installé PHP, vous pouvez tester le serveur pour vous assurer
qu’il fonctionne correctement
332 Configuration d’un exemple de site PHP
Test de l’installation PHP (Windows)
Vous pouvez tester le serveur d’application PHP en exécutant une page de
test.
Pour tester le serveur d’application PHP :
1.
Dans Dreamweaver ou dans tout éditeur de texte, créez un fichier de
texte brut intitulé heuretest.php.
2.
Saisissez le code suivant dans le fichier :
<p>Cette page a été crée à <b>
<?php echo date("h:i:s a", time()); ?>
</b> sur un ordinateur exécutant PHP.</p>
Ce code affiche l’heure à laquelle la page a été traitée sur le serveur.
3.
Copiez le fichier dans le dossier C:Inetpub\wwwroot de l’ordinateur
Windows qui exécute IIS.
4.
Dans votre navigateur Web, tapez l’URL de votre page de test, puis
appuyez sur Entrée.
Si vous avez installé PHP sur votre ordinateur local, vous pouvez taper
l’URL suivante :
http://localhost/heuretest.php
La page de test doit s’ouvrir et indiquer une heure :
Configuration du système (PHP) 333
L’heure indiquée correspond au contenu dynamique car elle change chaque
fois que vous appelez la page. Cliquez sur le bouton Actualiser du
navigateur pour générer une nouvelle page avec une heure différente.
REMARQUE
En consultant le code source (Affichage > Source dans Internet Explorer),
vous pourrez vérifier que la page n’utilise pas de code JavaScript côté
client pour obtenir ce résultat.
Si la page ne fonctionne pas correctement, recherchez les erreurs
potentielles suivantes :
■
Le fichier n’a pas d’extension .php.
■
Vous avez saisi le chemin du fichier de la page
(C:\Inetput\wwwroot\heuretest.asp) au lieu de son URL (par exemple,
http://localhost/heuretest.asp) dans le champ Adresse du navigateur.
Si vous tapez un chemin de fichier dans le navigateur (comme vous en
avez peut-être l’habitude avec les pages HTML normales), vous
contournez le serveur Web et le serveur d’application. Votre page n’est
alors jamais traitée par le serveur.
■
L’URL contient une faute de frappe. Recherchez les erreurs éventuelles
et vérifiez que le nom de fichier n’est pas suivi d’une barre oblique,
comme dans l’adresse suivante : http://localhost/heuretest.php/.
■
Le code de la page contient une faute de frappe.
Après avoir installé et testé le logiciel de serveur, créez un dossier racine
pour votre application Web
Création d’un dossier racine (Windows)
Après avoir installé le logiciel de serveur, créez un dossier racine pour votre
application Web sur le système exécutant Microsoft IIS, et assurez-vous que
le dossier dispose des autorisations nécessaires.
Pour créer un dossier racine pour votre application Web :
1.
Créez un dossier appelé MonApplicationWeb sur le système exécutant IIS.
REMARQUE
Notez ce nom de dossier. Il vous sera utile par la suite. Attention, lorsque
vous l’utiliserez à nouveau, la casse devra être identique à celle utilisée lors
de sa création.
334 Configuration d’un exemple de site PHP
Utilisez de préférence l’emplacement suivant pour créer le dossier :
C:\Inetpub\wwwroot\. Par défaut, votre serveur Web IIS est configuré
pour fournir les pages contenues dans le dossier Inetpub\wwwroot. Le
serveur Web répondra aux requêtes HTTP des navigateurs Web en
renvoyant les pages de ce dossier ou de ses sous-dossiers.
2.
Pour vous assurer que les autorisations Lire et Scripts sont activées pour
le dossier, suivez l’une des procédures suivantes :
a.
Si vous utilisez IIS, lancez l’outil administratif IIS (sous
Windows XP, sélectionnez Démarrer > Panneau de configuration
ou Démarrer > Paramètres> Panneau de configuration, puis
double-cliquez sur Outils administratifs et double-cliquez sur
Services Internet (IIS)).
b.
Développez la liste ordinateur local, puis le dossier Sites Web, puis
le dossier Site Web par défaut.
c.
Cliquez avec le bouton droit de la souris sur votre dossier
MonApplicationWeb, puis sélectionnez Propriétés dans le menu
déroulant.
d.
Dans le menu déroulant Exécuter les autorisations, vérifiez que
l’option Scripts est sélectionnée (pour des raisons de sécurité, nous
vous recommandons de ne pas sélectionner l’option Scripts et
exécutables).
e.
Cliquez sur OK.
Le serveur Web est maintenant configuré pour fournir les pages Web de
votre dossier racine en réponse aux requêtes HTTP des navigateurs Web.
Une fois votre système configuré, vous devez définir un site Dreamweaver
(voir Définition d’un site Dreamweaver PHP, page 338).
Configuration du système Macintosh
(PHP)
Si vous travaillez sous Macintosh, vous pouvez exécuter des pages PHP sur
votre ordinateur en utilisant le serveur Web Apache et le serveur
d’application PHP installé avec votre système d’exploitation. La
configuration de votre système consiste à vous assurer que le serveur Web et
le serveur PHP fonctionnent, puis à créer le dossier racine pour les fichiers
PHP.
Configuration du système (PHP) 335
Cette section contient les rubriques suivantes :
■
Test de l’installation PHP (Macintosh), page 336
■
Création d’un dossier racine (Macintosh), page 337
Pour plus d’informations sur Apache et PHP sur le Macintosh, voir les sites
Web suivants :
■
http://developer.apple.com/internet/opensource/php.html
■
www.entropy.ch/software/macosx/php/
Test de l’installation PHP (Macintosh)
Vous pouvez tester le serveur Web Apache et le serveur d’application PHP
installés sur votre Macintosh en exécutant une page de test.
Néanmoins, avant de pouvoir utiliser le serveur Web pour servir des pages
PHP et du contenu provenant de bases de données MySQL, vous devez
configurer le serveur afin qu’il fonctionne avec PHP et MySQL. Pour plus
d’informations sur cette opération, voir www.macromedia.com/go/
php_macintosh.
Pour tester le serveur Web Apache et le serveur d’application
PHP :
1.
Configurez le serveur comme décrit dans l’article disponible sur le
site Web Macromedia.
2.
Dans Dreamweaver ou dans tout éditeur de texte, créez un fichier de
texte brut intitulé heuretest.php.
3.
Tapez le code suivant dans le fichier :
<p>Cette page a été crée à <b>
<?php echo date("h:i:s a", time()); ?>
</b> sur un ordinateur exécutant PHP.</p>
Ce code affiche l’heure à laquelle la page a été traitée sur le serveur.
4.
Copiez ce fichier dans le dossier /Utilisateurs/votre_nom_d’utilisateur/
Sites de votre Macintosh.
Le dossier Sites correspond à votre dossier racine personnel sur le
serveur Web Apache.
5.
Dans votre navigateur Web, saisissez l’URL ci-dessous, puis appuyez sur
la touche Retour :
http://localhost/~votre_nom_d’utilisateur/heuretest.php
La page de test doit s’ouvrir et indiquer une heure.
336 Configuration d’un exemple de site PHP
L’heure indiquée correspond au contenu dynamique car elle change chaque
fois que vous appelez la page. Cliquez sur le bouton Actualiser du
navigateur pour générer une nouvelle page avec une heure différente.
REMARQUE
En consultant le code source (Présentation > Code source dans Safari),
vous pourrez vérifier que la page n’utilise pas de code JavaScript côté
client pour obtenir ce résultat.
Si la page ne fonctionne pas correctement, recherchez les erreurs
potentielles suivantes :
■
Le fichier n’a pas d’extension .php.
■
L’URL contient une faute de frappe. Recherchez les erreurs éventuelles
et vérifiez que le nom de fichier n’est pas suivi d’une barre oblique, tel
que dans l’adresse suivante : http://localhost/~votre_nom_d’utilisateur/
heuretest.php/. Vérifiez également que vous avez inséré le tilde (~)
devant votre nom d’utilisateur.
■
Le code de la page contient une faute de frappe.
■
Le serveur Apache n’est pas en cours d’exécution. Vérifiez que l’option
de partage Web est activée dans la catégorie Partage des préférences
système.
Après avoir installé et testé le logiciel de serveur, créez un dossier racine
pour votre application Web
Création d’un dossier racine (Macintosh)
Après avoir installé le logiciel de serveur, vous devez créer un dossier racine
pour l’application sur votre Macintosh.
Pour créer un dossier racine pour votre application Web :
■
Dans le dossier /Utilisateurs/votre_nom_d’utilisateur/Sites, créez un
dossier intitulé MonApplicationWeb.
Apache répondra aux requêtes HTTP des navigateurs Web en
renvoyant les pages de ce dossier ou de ses sous-dossiers.
Une fois votre système configuré, vous devez définir un site Dreamweaver
Configuration du système (PHP) 337
Définition d’un site Dreamweaver
PHP
Une fois que vous avez configuré votre système, vous devez copier les
exemples de fichiers dans un dossier local et définir un site Dreamweaver
pour les gérer.
Pour définir un site Dreamweaver :
1.
Copiez les exemples de fichiers dans un dossier, sur votre disque dur
(voir Copie des exemples de fichiers, page 338).
2.
Définissez le dossier comme un dossier Dreamweaver local (voir
Définition d’un dossier local, page 339).
3.
Définissez votre dossier racine sur le serveur Web comme dossier
Dreamweaver distant (voir Définition d’un dossier distant, page 340).
4.
Spécifiez un dossier dans lequel traiter les pages dynamiques (voir
Définition du dossier de traitement des pages dynamiques (PHP),
page 341).
5.
Téléchargez les exemples de fichiers sur le serveur Web (voir
Téléchargement des exemples de fichiers, page 342).
Copie des exemples de fichiers
Si ce n’est pas déjà fait, copiez les exemples de fichiers du dossier
d’application Dreamweaver dans un dossier de votre disque dur.
Pour copier les exemples de fichiers :
1.
Créez un dossier intitulé local_sites dans le dossier utilisateur de votre
disque dur.
Par exemple, créez l’un des dossiers suivants :
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites (Windows)
■
/Utilisateurs/votre_nom_d’utilisateur/Documents/local_sites (Macintosh).
R E MA R Q U E
Sur un Macintosh, votre dossier d’utilisateur contient déjà un dossier
intitulé Sites. N’utilisez pas le dossier Sites en tant que dossier local ; le
dossier Sites correspond au dossier de stockage des pages que vous
souhaitez diffuser lors de l’utilisation du Macintosh comme serveur Web.
338 Configuration d’un exemple de site PHP
2.
Recherchez le dossier cafe_townsend dans le dossier d’application sur
votre disque dur.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin
du dossier est le suivant :
3.
■
Sous Windows : C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\.
■
Sur Macintosh : DD Macintosh/Applications/Macromedia
Dreamweaver 8/Tutorial_assets/cafe_townsend.
Copiez le dossier cafe_townsend dans le dossier local_sites.
Il s’agit du dossier que vous allez utiliser comme dossier racine (dossier
principal) de votre site Dreamweaver.
Après avoir copié le dossier cafe_townsend, définissez le dossier en tant que
Dreamweaver dossier local.
Définition d’un dossier local
Après avoir copié le dossier cafe_townsend, définissez le dossier contenant
les exemples de fichiers PHP comme dossier Dreamweaver local.
Pour définir le dossier Dreamweaver local :
1.
Dans Dreamweaver, sélectionnez Site > Gérer les sites. Dans la boîte de
dialogue Gérer les sites, cliquez sur le bouton Nouveau, puis
sélectionnez Site.
La boîte de dialogue Définition du site s’ouvre.
2.
Si l’onglet Elémentaire s’affiche, cliquez sur l’onglet Avancé.
3.
Dans la zone de texte Nom du site, saisissez Cafe Townsend PHP.
4.
Cliquez sur le dossier situé à côté de la zone de texte Dossier racine local
et naviguez jusqu’au dossier suivant qui contient des exemples de
fichiers PHP :
Le nom identifie votre site dans Dreamweaver.
5.
■
C:\Documents and Settings\votre_nom_d’utilisateur\Mes
documents\local_sites\cafe_townsend\contact\php (Windows)
■
/Utilisateurs/votre_nom_d’utilisateurDocuments/local_sites/
cafe_townsend/contact/php (Macintosh)
Cliquez sur Sélectionner pour finaliser la définition du dossier local
Dreamweaver.
Définition d’un site Dreamweaver PHP 339
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez un dossier de serveur Web comme dossier Dreamweaver distant
Définition d’un dossier distant
Après avoir défini un dossier local, définissez un dossier de serveur Web
comme dossier Dreamweaver distant.
Pour définir le dossier Dreamweaver distant :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Infos distantes.
L’écran Infos distantes apparaît.
2.
Dans le menu déroulant Accès, choisissez la manière dont vous
souhaitez placer et déplacer vos fichiers sur le serveur : via un réseau local
(option Local/Réseau) ou en utilisant le protocole FTP.
REMARQUE
Le menu déroulant Accès contient d’autres options, qui ne sont pas
traitées dans ce chapitre. Pour plus d’informations concernant leur
utilisation, voir Utilisation de Dreamweaver.
3.
Tapez le chemin ou les paramètres FTP qui mènent au dossier du
serveur Web créé dans Création d’un dossier racine (Windows), page 334.
Le dossier peut se trouver sur votre disque dur ou sur un ordinateur
distant. Même si vous avez créé le dossier sur votre disque dur, il est
toujours considéré comme le dossier « distant ». L’exemple ci-dessous
correspond à un chemin de dossier distant possible pour l’option Local/
Réseau (dossier distant stocké sur votre disque dur Windows) :
Répertoire distant : C:\Inetpub\wwwroot\MonApplicationWeb
Sur un Macintosh, le dossier peut se présenter de la manière suivante :
Répertoire distant : /Utilisateurs/votre_nom_d’utilisateur/Sites/
MonApplicationWeb
Pour plus d’informations sur FTP, consultez Définition des options
distantes pour l'accès FTP dans Utilisation de l’aide Dreamweaver.
Pour le moment, laissez ouverte la boîte de dialogue Définition du site.
Définissez ensuite un dossier dans lequel traiter les pages dynamiques
340 Configuration d’un exemple de site PHP
Définition du dossier de traitement des
pages dynamiques (PHP)
Après avoir défini le dossier Dreamweaver distant, spécifiez un dossier dans
lequel seront traitées les pages dynamiques. Dreamweaver utilise ce dossier
pour afficher les pages dynamiques et se connecter aux bases de données
lorsque vous développez votre application.
Pour spécifier le dossier dans lequel traiter les pages
dynamiques :
1.
Dans l’onglet Avancé de la boîte de dialogue Définition du site,
sélectionnez la catégorie Serveur d’évaluation.
L’écran Serveur d’évaluation apparaît. Dreamweaver doit pouvoir
recourir aux services d’un serveur d’évaluation pour générer et afficher
du contenu dynamique pendant que vous procédez à la création du
site. Dans la mesure où il traite les pages PHP, ce serveur peut se trouver
sur votre ordinateur local, un serveur de développement, un serveur
intermédiaire ou un serveur de production. Souvent, notamment lors
de la définition du site Cafe Townsend, vous pouvez utiliser les mêmes
paramètres que dans la catégorie Infos distantes (voir Définition d’un
dossier distant, page 340) car ceux-ci pointent vers un serveur capable
de traiter les pages PHP.
2.
Dans le menu déroulant Modèle de serveur, sélectionnez PHP MySQL.
3.
Dans le menu déroulant Accès, sélectionnez la méthode (Local/Réseau
ou FTP) que vous avez spécifiée pour accéder à votre dossier distant.
Dreamweaver entre les paramètres spécifiés dans la catégorie Infos
distantes. Laissez les paramètres tels qu’ils sont.
4.
Dans le champ Préfixe de l’URL, tapez l’URL racine à saisir dans un
navigateur Web pour demander une page dans votre application Web.
Pour afficher des données dynamiques dans vos pages lorsque vous
travaillez, Dreamweaver crée un fichier temporaire, le copie dans le
dossier racine du site Web et essaie de le demander en utilisant le
préfixe de l’URL.
Définition d’un site Dreamweaver PHP 341
Dreamweaver déduit le préfixe de l’URL en fonction des informations
fournies dans la boîte de dialogue Définition du site. Il arrive cependant
que le préfixe d’URL proposé soit incorrect. Corrigez-le ou saisissez un
nouveau préfixe d’URL si la proposition de Dreamweaver est incorrecte.
Pour plus d’informations sur FTP, consultez Définition du préfixe
d'URL dans Utilisation de Dreamweaver (Aide > Utilisation de
Dreamweaver).
Sous Windows, le préfixe des exemples PHP doit se présenter de la
manière suivante :
Préfixe de l’URL : http://localhost/MonApplicationWeb/
Sur un Macintosh, le préfixe doit se présenter de la manière suivante :
Préfixe de l’URL : http://localhost/~votre_nom_d’utilisateur/
MonApplicationWeb/
C ON S E I L
5.
Le préfixe de l’URL
doit toujours indiquer
un répertoire et non
une page spécifique
du site. De plus,
veillez à respecter la
casse utilisée lors de
la création du
dossier.
Cliquez sur OK pour définir le site et fermer la boîte de dialogue
Définition du site, puis fermez la boîte de dialogue Gérer les sites en
cliquant sur Terminé.
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web
Téléchargement des exemples de fichiers
Après avoir spécifié un dossier pour le traitement des pages dynamiques,
téléchargez les exemples de fichiers dans le serveur Web. Vous devez
télécharger les fichiers, même si le serveur Web est exécuté sur votre
ordinateur local.
Si vous ne téléchargez pas les fichiers, des fonctions telles que l’affichage des
données dynamiques et l’aperçu dans le navigateur ne fonctionneront pas
avec les pages dynamiques. Par exemple, des liens d’image risquent d’être
rompus dans l’affichage des données dynamiques car les fichiers d’image ne
se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien
vers une page d’informations détaillées tout en affichant l’aperçu d’une
page principale dans un navigateur provoquera une erreur si la page
d’informations détaillées manque dans le serveur.
Pour télécharger les exemples de fichiers dans un serveur Web :
1.
Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier
racine du site dans le volet Affichage local.
342 Configuration d’un exemple de site PHP
Le dossier racine est le premier dossier de la liste.
2.
Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers)
dans la barre d’outils du panneau Fichiers, puis confirmez le
téléchargement de l’ensemble du site.
Dreamweaver copie tous les fichiers dans le dossier du serveur Web
défini dans Définition d’un dossier distant, page 340.
Le site Dreamweaver est maintenant défini. L’étape suivante consiste à se
connecter à l’exemple de base de données installé avec Dreamweaver
Connexion à l’exemple de base
de données (PHP)
Au cours de l’installation, Dreamweaver copie un script SQL sur votre
disque dur. Vous pouvez utiliser ce script pour créer automatiquement un
exemple de base de données MySQL. Cette section explique comment
créer une connexion à un exemple de base de données.
Vous devez avoir préalablement installé et configuré MySQL sur votre
ordinateur local ou distant. Pour télécharger et installer le système de base
de données, visitez le site Web MySQL à l’adresse suivante :
www.mysql.com.
Pour créer une connexion à une base de données :
1.
Créez l’exemple de base de données MySQL en utilisant le script SQL
(voir Création de la base de données MySQL, page 343).
2.
Créez la connexion dans Dreamweaver (voir Création d’une connexion à
une base de données, page 345).
Création de la base de données MySQL
Les exemples de fichiers pour Dreamweaver MX 2004 comprennent un
script SQL capable de créer et de remplir un exemple de base de données
MySQL.
Avant de commencer, vérifiez que MySQL est installé et configuré sur votre
ordinateur local ou distant. Téléchargez la dernière version du site MySQL
à l’adresse http://dev.mysql.com/downloads/. Pour les besoins du
développement, téléchargez et installez la version Windows Essentials du
serveur de base de données MySQL.
Connexion à l’exemple de base de données (PHP) 343
Pour créer l’exemple de base de données MySQL :
1.
Copiez le fichier de script SQL, insert.sql, dans un dossier approprié
dans l’ordinateur sur lequel est installé MySQL.
Si Dreamweaver a été installé dans l’emplacement par défaut, le chemin
du fichier de script est le suivant :
■
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\
data\insert.sql (Windows)
■
/Applications/Macromedia Dreamweaver 8/Tutorial_assets/
cafe_townsend/data/insert.sql (Macintosh)
Si l’ordinateur sur lequel est exécuté MySQL fonctionne sous
Windows, copiez le script insert.sql dans Program
Files\MySQL\MySQL Server 4.x\bin. Si l’ordinateur sur lequel est
exécuté MySQL fonctionne sous Windows, copiez le script insert.sql
dans votre dossier Documents dans votre dossier de base.
2.
3.
Sur l’ordinateur qui fait tourner MySQL, démarrez la ligne de
commande client MySQL (Windows) ou le Terminal (Macintosh).
■
Dans Windows, démarrez la ligne de commande client MySQL en
sélectionnant Démarrer > MySQL > MySQL Server 4.x > MySQL
Command Line Client.
■
Sur Macintosh, vous pouvez ouvrir une fenêtre Terminal en
sélectionnant le dossier Applications, en ouvrant le dossier Utilities
et en double-cliquant sur Terminal.
Dans Windows, tapez votre nom d’utilisateur (s’il y en a un) et votre
mot de passe, puis cliquez sur Entrée.
L’invite de commande du client MySQL apparaît comme suit :
mysql>
4.
Sur Macintosh, utilisez la commande suivante :
mysql -uUser -pPassword
Par exemple, si votre nom d’utilisateur MySQL (également appelé nom
de compte) et votre mot de passe sont Tara et Telly3, tapez la
commande suivante :
mysql -uTara -pTelly3
Si vous n’avez pas de mot de passe, laissez de côté l’argument -p :
mysql -uTara
344 Configuration d’un exemple de site PHP
Si vous n’avez pas défini un nom d’utilisateur en configurant votre
installation MySQL, tapez la racine comme nom d’utilisateur :
mysql -uroot
L’invite de commande du client MySQL apparaît :
mysql>
5.
Créez une nouvelle base de données en tapant la commande suivante à
l’invite MySQL :
mysql>CREATE DATABASE CafeTownsend;
MySQL crée une nouvelle base de données, mais elle ne contient aucun
tableau ou enregistrement pour le moment.
6.
Déconnectez-vous du client MySQL en tapant la commande suivante à
l’invite :
mysql>quit;
7.
(Windows) Ouvrir l’invite de commande Windows en cliquant sur
Démarrer > Exécuter, et en tapant cmd dans la boîte de dialogue
Exécuter.
8.
A l’invite de commande du système, complétez la nouvelle base de
données CafeTownsend dans MySQL.
Sous Windows, utilisez la commande suivante :
cd \
cd Program Files\MySQL\MySQL Server 4.x\bin
mysql -uUser -pPassword CafeTownsend < insert.sql
Sur Macintosh, utilisez la commande suivante :
mysql -uUser -pPassword CafeTownsend < ~/Documents/
insert.sql
Cette commande utilise le fichier insert.sql pour ajouter des tables et
enregistrements dans la base de données CafeTownsend créée à l’étape 5.
Après avoir créé la base de données MySQL, créez une connexion à cette
base de données dans Dreamweaver
Création d’une connexion à une base de
données
La dernière étape du processus de configuration consiste à établir une
connexion à la base de données.
Connexion à l’exemple de base de données (PHP) 345
Pour créer une connexion à une base de données dans
Dreamweaver :
1.
Ouvrez une page PHP quelconque dans Dreamweaver, puis allez dans
le panneau Bases de données (Fenêtre > Bases de données).
2.
Cliquez sur le bouton plus (+) dans le panneau et choisissez Connexion
MySQL dans le menu contextuel.
La boîte de dialogue Connexion MySQL s’ouvre.
3.
Tapez connTownsend comme nom de connexion.
4.
Dans la zone Serveur MySQL, indiquez l’ordinateur qui héberge
MySQL.
Entrez une adresse IP ou un nom de serveur. Si MySQL est exécuté sur
le même ordinateur que Dreamweaver, tapez localhost.
5.
Entrez votre nom d’utilisateur et mot de passe MySQL.
Si vous n’avez pas défini un nom d’utilisateur en configurant votre
installation MySQL, tapez root dans la zone de texte Nom d’utilisateur.
Si vous n’avez pas de mot de passe, laissez la zone Mot de passe vierge.
6.
Dans la zone de texte Base de données, tapez CafeTownsend.
CafeTownsend est le nom de l’exemple de base de données MySQL
créée (voir Création de la base de données MySQL, page 343).
7.
Cliquez sur Tester.
Dreamweaver tente d’établir la connexion à la base de données. Si la
connexion échoue, procédez de la manière suivante :
8.
■
Vérifiez le nom du serveur, le nom d’utilisateur et le mot de passe.
■
Vérifiez les paramètres du dossier utilisé par Dreamweaver pour
traiter les pages dynamiques (voir Définition du dossier de traitement
des pages dynamiques (PHP), page 341).
■
Reportez-vous à Chapitre 29, Résolution des problèmes de connexion
à des bases de données dans Utilisation de Dreamweaver
(Aide >Utilisation deDreamweaver).
Cliquez sur OK.
La nouvelle connexion s’affiche dans le panneau Bases de données.
L’exemple d’application PHP est configuré pour les didacticiels Bien
démarrer avec Dreamweaver. Pour plus d’informations, consultez la section
Didacticiel : Développement d’une application Web, page 213.
346 Configuration d’un exemple de site PHP
Index
A
Access. Voir Microsoft Access
actifs, ajout à un site 55
Active Server Pages. Voir ASP.
Actualiser, bouton 151
Adresses IP et numéro IP (127.0.0.1) 256
adresses réseau numériques 256
aide
changement de la taille de police 28
utilisation 17
aide-mémoire
configuration ASP 292
configuration ASP.NET 276
configuration JSP 310
configuration PHP 328
définition ColdFusion 258
Aperçu dans le navigateur, dépannage de pages
dynamiques
ASP 302
ASP.NET 285
ColdFusion 268
JSP 319
PHP 342
Aperçu dans un navigateur
à propos 106
modification des préférences 107
Apple. Voir Mac OS X
Application, catégorie de la barre Insérer 224, 227
applications Web
à propos
ASP, configuration 291
ASP.NET, configuration 275
ColdFusion, configuration 257
définition 248
développement 213
JSP, configuration 309
PHP, configuration 327
utilisations courantes 236
applications, Web. Voir applications Web
ASP
applications Web, configuration 291
dépannage 296
heure, affichage 295
serveurs d'application, installation 294
ASP.NET
applications Web, configuration 275
Ensembles de données 217
langages utilisés avec 244
Plate-forme .NET 278
serveurs, pris en charge 278
attributs, informations de référence 157
B
balises
côté serveur 241
indicateurs 159
modification 155
recherche d'informations de référence 157
Sélecteur de balises 152
sélection 152
barre d'état
Menu contextuel Taille de fenêtre 37
présentation 36
Barre d'outils de codage 39
347
Barre d'outils de document
présentation 35
barre d'outils du document
Données dynamiques, affichage 225
Barre Insérer
catégories 38
barres d'outils
Codage 39
Document 35
document 225
bases de données
à propos 246
affichage de données 221, 241
connexion à (ASP) 306, 324, 345
connexion à (ASP.NET) 286
connexion à (ColdFusion) 269
fichier
jeux d'enregistrements
pilotes 241, 247
relationnelles 248
requêtes 241, 247
sélection
serveur
tableaux
utilisation avec des applications Web 236
bases de données relationnelles 248
configuration
ASP 291
ASP.NET 275
ColdFusion 257
JSP 309
PHP 327
systèmes avec ColdFusion MX 258
systèmes avec plate-forme .NET 276
systèmes avec serveur d'application ASP 292
systèmes avec serveur d'application JSP 311
systèmes avec serveur d'application PHP 328
connexion
aux bases de données (ASP) 306, 324, 345
aux bases de données (ASP.NET) 286
aux bases de données (ColdFusion) 269
conventions typographiques 15
couleurs d'arrière-plan, définition 77, 185
Création, mode
CSS (feuilles de style en cascade)
association 116
création 114
et mise en forme 165
Mise en forme avec 109–138
présentation 112
Styles CSS, panneau 42
CSS Voir Feuilles de style en cascade
C
D
C# (langage) 244
calques 166
imbrication 178
insertion 170
CFML (ColdFusion Markup Language) 243
champs, dynamiques 223
code
création avec le sélecteur de balises 152
impression 163
ColdFusion
applications Web, configuration 257
installation 260
ColdFusion Administrator 270
ColdFusion Studio 152
ColdFusion, langages utilisés avec 244
Comportements de serveur, panneau 224
data
dynamique, insertion 223
extraction depuis des bases de données 241
définition de dossiers distants 266, 283, 300, 317,
340
définition des serveurs d'évaluation 267, 283, 301,
318, 341
définition des termes relatifs aux applications Web 246
dépannage 302
à propos 337
affichage des pages 296, 334
ASP 296
ouverture des pages 253
pages dynamiques 268, 285, 302, 319, 342
PHP (Macintosh) 337
PHP (Windows) 334
serveurs 251, 253
documents
affichage dans des onglets (Macintosh) 45
enregistrement 64, 169
348
Index
Données dynamiques, affichage 225
dépannage 268, 285, 302, 319, 342
dossiers distants 140
création (JSP) 317
Création avec Dreamweaver 141
définition (ASP) 300
Définition (ASP.NET) 283
Définition (ColdFusion) 266
définition (PHP) 340
dépannage de configuration 144
dossiers locaux
définition 57–59, 282, 299, 316, 339
dossiers racine 265
dossiers racine
création (ASP) 296
création (ASP.NET) 279
création (ColdFusion) 263
création (JSP) 314
création (PHP) 334
définition 282, 299, 316, 339
Voir aussi dossiers locaux
F
E
G
enregistrement dans Dreamweaver 14
enregistrements
affichage 221
insertion 225
Ensembles de données (jeux d'enregistrements
ASP.NET) 217
espace de travail
à propos 31
mise en forme 44
présentation flottante 32
espace de travail, codage 152
espace réservé pour image
création d'images 85
espaces réservés pour l'image
insertion 75
présentation 76
exemple de base de données, connexion
ASP 303, 306
ASP.NET 286
ColdFusion 269
JSP 324
PHP 345
exemples d'applications Web 236
extraction de données des bases de données 241
Général, catégorie, boîte de dialogue Préférences 152
glossaire de termes courants relatifs aux applications
Web 246
Fenêtre de document
barre d'état 36
barre de titre 34
Menu contextuel Taille de fenêtre 37
notions de base 34
sélecteur de balises 37
taille de la page et temps de téléchargement 37
fichiers
chargement d'un exemple 268, 285, 302, 319
envoi sur un serveur 231
Téléchargement du dossier local vers le serveur
distant 143
fichiers texte en mode Code 100
Flash
fichiers SWF, insertion 92
lecture de contenu dans Dreamweaver 94
Formulaire d'insertion d'enregistrement, boîte de
dialogue 227
formulaires d'insertion d'enregistrement 225
H
heure, affichage dans ASP 295
HomeSite 152
HTML
langages de programmation intégrés 243
Voir aussi code
I
IIS (Services d'informations Internet) 245
à propos 252
installation 252
outils d'administration, démarrage 280
prise en charge ASP.NET 278
images, insertion 84–91
indicateurs de code 159
Insérer l'enregistrement, objet 225
Insérer, barre
Catégorie Application 224, 227
Inspecteur de balises 155
Index
349
installation
ColdFusion MX 260
Dreamweaver 13
IIS (Services d'informations Internet) 252
Plate-forme .NET 278
serveurs d'application, ASP 294
serveurs d'application, JSP 312
serveurs d'application, PHP 331
J
Java 244
JavaScript 244
jeux d'enregistrements
création 217
définition 247
test d'évaluation 220
Voir aussi bases de données
JRun
JSP (Java Server Pages) 244
applications Web, configuration 309
serveurs d'application, installation 312
L
langage XSL (Extensible Stylesheet Language) 193
transformations, côté client 195
Voir aussi XSLT
langages de script côté serveur 244
langages, côté serveur 243, 244
Liaisons, panneau 218
liens, création 105
localhost 255
M
Macintosh
Mac OS X exécutant Apache et PHP
serveurs 254
Macintosh, documents à onglets 45
Macromedia JRun
installation 313
Menu contextuel Taille de fenêtre 37
menu des en-têtes de colonne 67
menu des en-têtes de tableau 67
Microsoft Access 243
Microsoft Internet Information Server (IIS). Voir IIS.
Microsoft Personal Web Server (PWS) 249, 252
Microsoft SQL Server 243
350
Index
mise en forme
Base CSS 165
basée sur un tableau 61–80
Mode Code
Mode Création et spécification entre 35
mode Code
affichage de fichiers texte 100
affichage en mode Création 150, 151
modèles de serveur. Voir technologies de serveur
modes
Données dynamiques, affichage 225
mode Code
modification, balises 155
MySQL, base de données 243
téléchargement 343
N
Netscape Enterprise Server 249
numéro IP 127.0.0.1 256
O
objet XSLT Région répétée 206
Oracle 9i, base de données 243
Outil Main 37
P
pages
affichage de données des bases de données 241
dynamique, traitement 240
dynamiques, création 243
dynamiques, définition
insertion d'enregistrement 225
statiques 239
pages dynamiques
à propos 247
traitement dans ASP 301
traitement dans ASP.NET 283
traitement dans ColdFusion 267
traitement dans JSP 318
traitement dans PHP 341
utilisation 240, 243
pages statiques 239
Voir aussi pages
pages Web. Voir pages
panneau Actifs 90
panneaux
Actifs 90
Comportements de serveur, panneau 224
Liaisons, panneau 218
PHP
applications Web, configuration 327
dépannage (Macintosh) 337
dépannage (Windows) 334
Mac OS X, configuration
serveurs d'application (Windows), installation 331
PHP, technologie de serveur 244
pilotes pour bases de données 241, 247
Placer les fichiers, bouton 231
Plate-forme .NET
installation 278
polices, changement de la taille dans l'aide 28
préférences générales 152
Préfixe d'URL, option 267, 284, 301, 318, 341
présentation de l'espace de travail, codage 152
publication 139–145
PWS (Microsoft Personal Web Server) 249
à propos 252
prise en charge ASP.NET 278
R
référence, panneau 157
régions répétées, création 224
requêtes
base de données 241
définition 247
test d'évaluation 220
S
scripts, côté serveur 241
Sélecteur de balises 152
sélecteur de balises 104
sélecteur de couleur 79
serveur ColdFusion MX Developer Edition 260
serveur d'application Apache Tomcat 246
serveur d'application Tomcat 246
serveur d'application WebSphere d'IBM 246
Serveur Web Apache sur Mac OS X 254
serveurs
à propos
adresses IP 256
dépannage 253
dossiers racine 266, 283, 300, 317, 340
HTTP
options d'accès 142
prise en charge ASP.NET 278
serveurs d'application 240
serveurs Web, définis 248
téléchargement de fichiers 268, 302, 319, 342
ASP.NET 285
téléchargement de fichiers vers le serveur distant
143
test d'évaluation 253
Voir aussi serveurs Web, serveurs d'application
serveurs d'application 240, 246
ColdFusion;MX:installation 260
PHP, installation 331
plate-forme .NET (ASP.NET), installation 279
pour ASP, installation 294
pour JSP, installation 312
serveurs d'évaluation
à propos
spécification 267, 283, 301, 318, 341
serveurs HTTP. Voir serveurs
serveurs Web
définition 248
vérification du fonctionnement du serveur Web
278, 294, 312, 330
Voir aussi serveurs, serveurs d'application
SGBD (système de gestion de bases de données). Voir
systèmes de gestion de bases de données
sites
à propos 54
actifs, ajout 55
définition 57–59
ASP 298
ASP.NET 280
ColdFusion 263
JSP 315
PHP 338
distant 54, 140
local 54
sources de données
ColdFusion 270
SQL 241
SQL (Structured Query Language) 241
Structured Query Language (SQL) 241
Styles CSS, panneau 42, 119
Index
351
Sun ONE Web Server 249
support technique pour les serveurs 251
systèmes de gestion de bases de données 247
systèmes, configuration 258, 276, 292, 311, 328
T
tableaux
base de données 241
création d'une mise en forme 61–80
définition des propriétés 69–74
insertion 65–69, 221
présentation 67
Tableaux développés 69
Tableaux développés 69
technologies de serveur
définition 248
prise en charge 244
sélection 245
téléchargement de fichiers
exemple 342
téléchargement, fixer le temps à lui attribuer 37
termes relatifs aux applications Web courants,
définition 246
terminologie du développement d'applications Web
246
Tester la connexion, bouton 142
texte
dynamique 223
dynamique, insertion 223
insertion 100
sélection 100
texte de remplacement 75
texte dynamique, insertion 223
V
variables en langage CFML 244
VBScript 244
Vidéo Flash, insertion 96
Visual Basic 244
W
WebSphere 246
352
Index
X
XML (Extensible Markup Language)
affichage sur des pages Web 189
application de styles 203
création de liens avec 204
présentation 192
XSLT (Extensible Stylesheet Language Transformation)
et transformations côté client 195
fragments 195
objet XSLT Région répétée 206
pages 195
pages, affichage de données XML 201
pages, association à des données XML 197
pages, conversion 196
pages, liaison à des fichiers XML 209
présentation 193
">