ADOBE Dreamweaver 8 Mise A Jour User Manual [fr]

Bien démarrer avec Dreamweaver
Marques commerciales
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware, Authorware Star, Backstage, Bright Tiger, Clustercats, Cold Fusion, Contribute, Design in Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo & Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be et Xtra sont des marques commerciales de Macromedia, Inc. et peuvent être déposées aux Etats-Unis ou dans d’autres juridictions ou pays. Les autres noms de produit, logos, concepts, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques commerciales, des marques de service ou des noms commerciaux de Macromedia, Inc. ou d’autres entités et peuvent être déposés dans certaines juridictions ou certains pays.
Informations tierces
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. Macromedia propose ces liens dans un but pratique uniquement et ne peut en aucun cas endosser ou accepter la responsabilité du contenu de ces sites tiers.
Vous trouverez des informations sur les logiciels tiers et/ou d’autres conditions générales à l’adresse suivante : http://www.macromedia.com/go/thirdparty_fr/.
Opera ® browser Copyright © 1995-2002 Opera Software ASA et ses fourniseurs. Tous droits réservés.
Dénégation de responsabilité d’Apple
APPLE COMPUTER, INC. N’ASSUME AUCUNE GARANTIE, IMPLICITE OU EXPLICITE, SUR LE LOGICIEL INFORMATIQUE CI-INCLUS, SA COMMERCIABILITE OU SON ADEQUATION A UN OBJECTIF PARTICULIER. L’EXCLUSION DES GARANTIES IMPLICITES N’ETANT PAS AUTORISEE DANS CERTAINS ETATS, L’EXCLUSION CI-DESSUS PEUT DONC NE PAS S’APPLIQUER A VOTRE CAS. CETTE GARANTIE VOUS OFFRE DES DROITS JURIDIQUES SPECIFIQUES. VOUS POUVEZ DISPOSER DE CERTAINS AUTRES DROITS, QUI VARIENT SELON LES ETATS.
Copyright © 1997-2003 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l’autorisation écrite préalable de Macromedia, Inc. Numéro de référence ZDW70M100F
Remerciements
Direction : Sheila McGinn
Gestion de projet : Charles Nadeau
Rédaction : Jed Hartman
Mise en forme : Lisa Stanziano, Mary Ferguson
Gestion de la production : Patrice O’Neill
Conception et production média : Adam Barnett, Chris Basmajian, Aaron Begley, John Francis, Jeff Harmon
Remerciements particuliers à Jay London, David Deming, Jennifer Taylor, Lori Hylan-Cho, Dominic Sagolla, Mary Ann Walsh, Jennifer Rowe, Chris Bedford, Jon Varese, Rosana Francescato, Bonnie Loo, Gwenael Cossoul, Luciano Arruda, Masayo Noda, Richard Clairicia, Scott Richards, Seungmin Lee, Vincent Truong, Birnou Sébarte et les équipes d’ingénierie et de contrôle qualité de Dreamweaver.
Première édition : Septembre 2003
Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103
TABLE DES MATIERES
INTRODUCTION : Bienvenue dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 7
Notions de base de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Utilisation de ce guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Autres ressources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Installation et exécution de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Configuration système requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Installation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Activation Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Utilisation de Dreamweaver dans un environnement multiutilisateur . . . . . . . . 10
Enregistrement de Dreamweaver MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Affichage de l’exemple de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
CHAPITRE 1 : L’espace de travail Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 13
Choix de la présentation de l'espace de travail (sous Windows uniquement) . . . . . 14
Présentation des fenêtres et des panneaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Présentation des menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
CHAPITRE 2 : Configuration rapide de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
A propos des sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Création d’un site : présentation du déroulement du travail. . . . . . . . . . . . . . . . . . 18
Définition d’un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Définition d’un dossier local à l’aide de l’assistant de définition d’un site . . . . . 20
Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Téléchargez vos fichiers locaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
CHAPITRE 3 : Didacticiel : Création d’une page statique . . . . . . . . . . . . . . . . . . . 27
Ouverture et enregistrement d’une nouvelle page . . . . . . . . . . . . . . . . . . . . . . . . . 27
Ajout d’un espace réservé pour une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Définition d’un titre de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3
Ajout de texte formaté . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Ajout de styles au texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Ajout d’images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Définition de couleurs d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
CHAPITRE 4 : Didacticiel : Modification du code . . . . . . . . . . . . . . . . . . . . . . . . . 39
Affichage du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Activation de l’espace de travail de codage (Windows uniquement) . . . . . . . . . . . . 41
Ajout d’une balise à l’aide du sélecteur de balises . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Modification d’une balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Consultation des informations relatives à une balise . . . . . . . . . . . . . . . . . . . . . . . 44
Ajout d’une image à l’aide des indicateurs de code. . . . . . . . . . . . . . . . . . . . . . . . . 45
Vérification des modifications apportées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Impression du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CHAPITRE 5 : Didacticiel : Lien et aperçu de pages . . . . . . . . . . . . . . . . . . . . . . 49
Création d’une seconde page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Ajout de liens texte entre des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Création d’une barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Copie de la barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Aperçu des pages dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Configuration d’un site distant et publication . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
CHAPITRE 6 : Description des applications Web. . . . . . . . . . . . . . . . . . . . . . . . . 57
A propos des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Utilisations courantes des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Exemple d’application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Fonctionnement d’une application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Traitement des pages Web statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Traitement des pages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Accès à une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Création de pages dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Choix d’une technologie de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Terminologie du développement d’applications Web. . . . . . . . . . . . . . . . . . . . . . . 67
CHAPITRE 7 : Didacticiel : Développement d’une application Web. . . . . . . . . . . 71
Avant de commencer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Ouverture d’un document de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Définition d’un jeu d’enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Affichage des enregistrements de la base de données . . . . . . . . . . . . . . . . . . . . . . . 77
Ajout de champs dynamiques au tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Définition d’une région répétée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Affichage des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
4 Table des matières
Création d’un formulaire d’insertion d’enregistrement. . . . . . . . . . . . . . . . . . . . . . 80
Ajout d’un objet d’application Formulaire d’insertion d’enregistrement . . . . . . 80
Création du formulaire d’insertion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Copie des fichiers sur le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
CHAPITRE 8 : Installation d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Bien démarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Installation de Personal Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Installation d’Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Tester PWS ou IIS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Test du serveur Web Macintosh (développeurs PHP) . . . . . . . . . . . . . . . . . . . . . . 90
Fonctions élémentaires du serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
CHAPITRE 9 : Configuration d’un exemple de site ColdFusion . . . . . . . . . . . . . . 93
Aide-mémoire pour la configuration à l’intention des développeurs ColdFusion . . 93
Configuration du système (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Installation de ColdFusion MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Définition d’un site Dreamweaver (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . . 98
Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Connexion à l’exemple de base de données (ColdFusion) . . . . . . . . . . . . . . . . . . . 99
Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 100
Création d’une source de données ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . 100
Connexion à la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
CHAPITRE 10 : Configuration d’un exemple de site ASP.NET. . . . . . . . . . . . . . 103
Aide-mémoire pour la configuration à l’intention des développeurs ASP.NET. . . 103
Configuration du système (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Recherche d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Installation de la plate-forme .NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Définition d’un site Dreamweaver (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . 109
Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Connexion à l’exemple de base de données (ASP.NET) . . . . . . . . . . . . . . . . . . . . 111
Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 111
Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 111
Table des matières 5
CHAPITRE 11 : Configuration d’un exemple de site ASP . . . . . . . . . . . . . . . . . . 113
Aide-mémoire pour la configuration à l’intention des développeurs ASP. . . . . . . 114
Configuration du système (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Recherche d’un serveur Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Installation d’un serveur d’application ASP. . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Test de l’installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Définition d’un site Dreamweaver (ASP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . 121
Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Connexion à l’exemple de base de données (ASP) . . . . . . . . . . . . . . . . . . . . . . . . 122
Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 122
Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 123
CHAPITRE 12 : Configuration d’un exemple de site JSP . . . . . . . . . . . . . . . . . . 125
Aide-mémoire pour la configuration à l’intention des développeurs JSP . . . . . . . 126
Configuration du système (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Recherche d’un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Installation d’un serveur d’application JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Création d’un dossier racine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Définition d’un site Dreamweaver (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Définition du dossier de traitement des pages dynamiques . . . . . . . . . . . . . . . 132
Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Connexion à l’exemple de base de données (JSP). . . . . . . . . . . . . . . . . . . . . . . . . 133
Installation du pilote de pont . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Configuration de la base de données (serveur sur l’ordinateur distant) . . . . . . 134
Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 135
CHAPITRE 13 : Configuration d’un exemple de site PHP. . . . . . . . . . . . . . . . . . 137
Aide-mémoire pour la configuration à l’intention des développeurs PHP . . . . . . 138
Configuration du système (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Configuration du système Windows (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Configuration du système Macintosh (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . 143
Définition d’un site Dreamweaver PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Copie des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Définition d’un dossier local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Définition d’un dossier distant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Définition du dossier de traitement des pages dynamiques (PHP) . . . . . . . . . 146
Téléchargement des exemples de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Connexion à l’exemple de base de données (PHP). . . . . . . . . . . . . . . . . . . . . . . . 148
Création de la base de données MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Création d’une connexion à une base de données . . . . . . . . . . . . . . . . . . . . . . 150
6 Table des matières
INTRODUCTION

Bienvenue dans Dreamweaver

Ce guide a pour objectif de vous faire découvrir les principales fonctions de Macromedia Dreamweaver MX 2004 et leur utilisation. Les didacticiels de ce guide expliquent comment créer un site Web simple et fonctionnel.
Dreamweaver MX 2004 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.
Les fonctions d’édition visuelles de Dreamweaver vous permettent de créer rapidement des pages sans rédiger une seule ligne de code. Si vous préférez faire appel au codage manuel, Dreamweaver intègre également de nombreux outils et fonctions de codage. Avec Dreamweaver, vous pouvez créer des applications Web dynamiques reposant sur des bases de données à l’aide de langages serveur tels que ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP et PHP.
Remarque : Ce guide ne présente pas toutes les fonctions de Dreamweaver MX 2004 et ne constitue pas non plus une introduction à la conception Web. Pour plus d’informations sur Dreamweaver, voir l’aide de Dreamweaver (sélectionnez Utilisation de Dreamweaver dans le menu Aide).
Ce chapitre contient les sections suivantes :
Notions de base de Dreamweaver, page 8
Installation et exécution de Dreamweaver, page 9
Affichage de l’exemple de site, page 11
7

Notions de base de Dreamweaver

Pour apprendre à utiliser Dreamweaver, commencez par lire ce guide de démarrage Bien démarrer avec Dreamweaver. Ensuite, consultez d’autres sources, telles que le système d’aide ou le centre de
support Macromedia.

Utilisation de ce guide

Ce guide comprend plusieurs chapitres. Il est recommandé de les lire dans l’ordre suivant :
1 Cette introduction expose les principes élémentaires de l’installation et de l’utilisation de
Dreamweaver.
2 L’espace de travail Dreamweaver, page 13, présente l’espace de travail de Dreamweaver MX 2004
de manière générale.
3 Configuration rapide de site, page 17, explique comment configurer un site. Lorsque vous aurez
lu ce chapitre de configuration, vous pourrez si vous le souhaitez essayer directement de créer vos propres sites sans lire le reste du guide.
4 Si vous avez déjà créé des pages Web mais que vous n’avez jamais travaillé sur Dreamweaver,
suivez les didacticiels consacrés aux sites statiques : Didacticiel : Création d’une page statique,
page 27, Didacticiel : Modification du code, page 39 et Didacticiel : Lien et aperçu de pages, page 49. Ces didacticiels décrivent les opérations de base que vous devez effectuer pour créer un
petit site Web statique à l’aide des outils de programmation visuels de Dreamweaver. Ils décrivent également les principes élémentaires d’utilisation des outils permettant de modifier directement le code dans Dreamweaver.
5 Si vous souhaitez vous familiariser avec le concept d’application Web, consultez le chapitre
Description des applications Web, page 57.
6 Si vous souhaitez en savoir plus sur le développement d’applications Web, commencez par
choisir une technologie de serveur (ColdFusion, ASP.NET, ASP, JSP ou PHP), puis consultez le chapitre approprié : Configuration d’un exemple de site ColdFusion, page 93, Configuration d’un
exemple de site ASP.NET, page 103, Configuration d’un exemple de site ASP, page 113, Configuration d’un exemple de site JSP, page 125 ou Configuration d’un exemple de site PHP,
page 137.
7 Le cas échéant, vous devrez peut être installer un serveur Web ; pour cela, suivez les instructions
du chapitre Installation d’un serveur Web, page 87.
8 Pour apprendre à développer une application Web simple reposant sur une base de données à
l’aide de Dreamweaver, suivez le didacticiel consacré aux applications Web : Didacticiel :
Développement d’une application Web, page 71.
Lorsque vous étudiez un chapitre, il est recommandé de le faire dans l’ordre chronologique.
Les leçons de ce guide utilisent des mises en forme de page et des échantillons fournis avec Dreamweaver. Si vous le souhaitez, vous pouvez créer votre premier site Dreamweaver avec vos propres mises en forme et contenu. Toutefois, il est plus facile de suivre les leçons si vous utilisez les exemples inclus dans le programme.

Autres ressources

Dreamweaver comprend diverses ressources qui vous aideront à vous familiariser rapidement avec le programme et à créer facilement vos propres sites et pages Web.
L’aide de Dreamweaver comporte des informations exhaustives sur l’utilisation des fonctions de
Dreamweaver. L’aide de Dreamweaver s’affiche dans le visualisateur d’aide fourni avec votre système d’exploitation : Microsoft HTML Help (Windows) ou Aide Apple (Macintosh).
8 Introduction : Bienvenue dans Dreamweaver
Utilisation de Dreamweaver est une version PDF de l’aide de Dreamweaver qui fournit des
informations sur l’utilisation des commandes et des fonctions de Dreamweaver. Certaines rubriques de référence ne sont pas incluses dans la version PDF. Pour plus d’informations sur ces rubriques, voir l’aide de Dreamweaver. Le fichier PDF est disponible sur le CD de Dreamweaver.
du centre de support de Dreamweaver (www.macromedia.com/go/dreamweaver_support_fr/)
est actualisé régulièrement. Il propose des informations à jour sur Dreamweaver, ainsi que des conseils donnés par des utilisateurs expérimentés, des exemples, des conseils généraux, des mises à jour et des informations sur des sujets plus techniques.
Le Centre des développeurs de Macromedia (www.macromedia.com/go/developer_fr/)
propose des outils, des didacticiels et bien plus encore pour tous les produits Macromedia.
Pour plus d’informations sur d’autres ressources proposant des informations et des instructions sur Dreamweaver, voir Guide des supports de formation à Dreamweaver dans l’aide de Dreamweaver (Aide > Utilisation de Dreamweaver).

Conventions typographiques

Ce manuel utilise les conventions typographiques suivantes :
Les éléments de menus sont indiqués de la manière suivante : nom du menu > nom de
l’élément de menu. Les éléments de sous-menus sont indiqués de la manière suivante : nom du menu > nom du sous-menu > nom de l’élément de menu.
Police de code indique les noms des balises et attributs HTML, ainsi que le texte utilisé
littéralement dans les exemples.
Police de code en italique indique les éléments remplaçables (parfois appelés
métasymboles) dans le code.
Texte en gras indique le texte que vous devez saisir exactement à l’identique.

Installation et exécution de Dreamweaver

Cette section décrit la configuration système requise pour exécuter Dreamweaveret explique comment installer Dreamweaver. Elle indique également comment personnaliser Dreamweaver en fonction de vos préférences sur un système d’exploitation multiutilisateur tel que Windows XP ou Mac OS X.

Configuration système requise

Vous devez vous équiper du matériel et des logiciels suivants pour exécuter Dreamweaver :
Configuration système requise dans Microsoft Windows :
Processeur Intel Pentium III ou équivalent, 600 MHz ou vitesse supérieure
Windows 98, Windows 2000, Windows XP ou Windows .NET Server 2003
Au minimum 128 Mo de mémoire RAM disponible (256 Mo recommandés)
275 Mo d’espace disque disponible
Moniteur 16 bits (couleurs) d’une résolution de 1024 x 768 pixels ou supérieur (résolutions en
millions de couleurs recommandées)
Installation et exécution de Dreamweaver 9
Configuration système requise sur un ordinateur Macintosh d’Apple :
Power Macintosh G3 ou supérieur, 500 MHz ou vitesse supérieure
Mac OS X 10.2.6
Au minimum 128 Mo de mémoire RAM disponible (256 Mo recommandés)
275 Mo d’espace disque disponible
Moniteur 16 bits (couleurs) d’une résolution de 1024 x 768 pixels ou supérieur (résolutions en
millions de couleurs recommandées)

Installation de Dreamweaver

Suivez les étapes ci-dessous pour installer Dreamweaver sur un ordinateur Windows ou Macintosh.
Remarque : Sur certains systèmes d’exploitation, vous pouvez installer ou désinstaller Dreamweaver uniquement si vous disposez de privilèges administratifs sur votre ordinateur. Pour plus d’informations, voir Utilisation de Dreamweaver dans un environnement multiutilisateur, page 10.
Pour installer Dreamweaver :
1 Insérez le CD de Dreamweaver dans le lecteur de CD-ROM. 2 Double-cliquez sur l’icône d’installation de Dreamweaver MX 2004. 3 Suivez les instructions à l’écran. 4 Redémarrez votre ordinateur si nécessaire.

Activation Dreamweaver

Si vous disposez d’une licence pour utilisateur unique, vous devez activer votre licence sous trente jours après installation du programme. Cette activation peut être effectuée rapidement et en toute simplicité via Internet ou par téléphone. Aucune information personnelle ne vous sera demandée. Il vous suffit de fournir le numéro de série du produit. Pour plus d’informations, visitez le Centre d’activation des produits Macromedia à l’adresse suivante : www.macromedia.com/go/
activation_fr.

Utilisation de Dreamweaver dans un environnement multiutilisateur

Avec un système d’exploitation multiutilisateur tel que Windows 2000, Windows XP ou Mac OS X, les applications sont généralement installées dans un dossier à partir duquel elles peuvent être exécutées, par exemple le dossier C:\Program Files (Windows) ou /Applications (Macintosh). Sur un système d’exploitation multiutilisateur, seuls les utilisateurs dotés de privilèges administratifs peuvent installer des applications dans ces dossiers.
Vous pouvez personnaliser Dreamweaver de plusieurs façons. Dreamweaver empêche que la configuration personnalisée d’un utilisateur n’affecte celle d’un autre. Pour éviter que votre configuration n’en affecte une autre, la première fois que vous exécutez Dreamweaver sur l’un des systèmes multiutilisateurs reconnus, l’application crée automatiquement des copies de divers fichiers de configuration. Ces fichiers sont enregistrés dans un dossier vous appartenant.
Remarque : Sur des systèmes d’exploitation plus anciens (par exemple, Windows 98), un seul groupe de fichiers de configuration Dreamweaver est partagé par tous les utilisateurs, même si la configuration du système d’exploitation prend en charge plusieurs utilisateurs.
10 Introduction : Bienvenue dans Dreamweaver
Si vous réinstallez Dreamweaver ou si vous le mettez à niveau après avoir installé Dreamweaver MX 2004, Dreamweaver crée automatiquement des copies de sauvegarde des fichiers de configuration utilisateur existants. Par conséquent, si vous avez personnalisé manuellement ces fichiers, vous pouvez toujours accéder aux modifications que vous avez apportées. Pour plus d’informations sur la personnalisation manuelle des fichiers de configuration, voir Personnalisation de Dreamweaver dans l’aide Extension de Dreamweaver (Aide > Extensions > Extension de Dreamweaver).
Lorsque vous désinstallez Dreamweaver d’un système multiutilisateur, Dreamweaver supprime chaque dossier de configuration utilisateur.

Enregistrement de Dreamweaver MX 2004

Pour bénéficier du support technique de Macromedia, nous vous conseillons d’enregistrer votre copie de Macromedia Dreamweaver MX 2004 en envoyant un 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 sur les sites Web www.macromedia.com et www-euro.macromedia.com.
Pour enregistrer Macromedia Dreamweaver MX 2004, procédez de l’une des manières suivantes :
Sélectionnez Aide > Activation > Enregistrement en ligne et remplissez le formulaire
électronique.
Sélectionnez Aide > Activation > Imprimer l’enregistrement, imprimez le formulaire et
envoyez-le à l’adresse indiquée sur le formulaire.

Affichage de l’exemple de site

Les exemples utilisés dans ce guide sont extraits d’un petit exemple de site développé pour une société fictive appelée Trio Motors. Avant de commencer les didacticiels, affichez l’exemple de site dans un navigateur pour vous faire une idée de l’objectif à atteindre.
Pour afficher l’exemple de site dans un navigateur :
1 Ouvrez le dossier Samples dans le dossier de l’application Dreamweaver. Ouvrez le dossier
GettingStarted, puis le dossier FinalSite.
2 Ouvrez le fichier index.html (dans le dossier FinalSite) dans un navigateur. 3 Après avoir consulté l’exemple de site, passez au chapitre suivant de ce guide.
Affichage de l’exemple de site 11
12 Introduction : Bienvenue dans Dreamweaver
CHAPITRE 1

L’espace de travail Dreamweaver

Sous Windows, Dreamweaver MX 2004 se présente sous la forme d’un espace de travail intégré 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. Vous avez le choix entre une présentation axée sur la conception et une autre axée sur les besoins des codeurs manuels.
Sur Macintosh, Dreamweaver se présente sous la forme d’un espace de travail flottant, dans lequel chaque document est localisé dans une fenêtre individuelle. 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.
Remarque : Vous pouvez personnaliser votre espace de travail en réorganisant les groupes de panneaux ; pour plus d’informations, voir l’aide Utilisation de Dreamweaver.
Ce chapitre contient les sections suivantes :
Choix de la présentation de l'espace de travail (sous Windows uniquement), page 14
Présentation des fenêtres et des panneaux, page 15
Présentation des menus, page 16
13

Choix de la présentation de l'espace de travail (sous Windows uniquement)

Lorsque vous lancez Dreamweaver pour la première fois dans Windows, une boîte de dialogue vous demande de choisir une présentation d’espace de travail. Vous pourrez choisir un autre type de présentation ultérieurement, à partir de la boîte de dialogue Préférences.
Pour choisir la présentation de l’espace de travail :
Sélectionnez l’une des options suivantes :
Espace de travail 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. C’est la présentation recommandée pour la plupart des utilisateurs.
Remarque : Dans la quasi-totalité de ce guide, nous supposons que vous utilisez l’espace de travail Designer.
Espace de travail Codeur
: correspond au 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. La fenêtre de document affiche le mode Code par défaut. Cette présentation est recommandée pour les utilisateurs de HomeSite ou ColdFusion Studio et les autres utilisateurs habitués au codage manuel qui préfèrent travailler dans un espace de travail familier.
Remarque : Ces deux espaces de travail autorisent l’ancrage des groupes de panneaux à droite ou à gauche.
14 Chapitre 1 : L’espace de travail Dreamweaver

Présentation des fenêtres et des panneaux

B
L’utilisation de ces outils est abordée dans les différentes sections de ce guide ; pour plus d’informations, voir l’aide Utilisation de Dreamweaver.
arre Insérer
Barre d’outils du document
Fenêtre de document
Groupes de panneaux
Inspecteur de propriétés
Sélecteur de balises
La page de démarrage (aucune illustration disponible) permet d’ouvrir un document récent ou
Panneau Fichiers
de créer un nouveau document. Elle contient également des informations complémentaires sur Dreamweaver (présentation du produit, didacticiels).
La barre Insérer contient des boutons permettant d’insérer divers types d’« objets », tels que des
images, tableaux et calques dans un document. Chaque objet est une portion de code HTML vous permettant de définir des attributs lors de son insertion. Par exemple, vous pouvez insérer un tableau en cliquant sur le bouton Tableau de la barre Insérer. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion.
La barre d’outils du document contient des boutons et des menus déroulants permettant
d’accéder aux différents modes d’affichage de la fenêtre du document (tels que le mode Création ou le mode Code), de définir les différentes options d’affichage et d’effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur.
La fenêtre de document affiche le document que vous créez et modifiez.
L’inspecteur de propriétés permet de visualiser et de modifier diverses propriétés de l’objet ou
du texte sélectionné. Chaque objet contient des propriétés différentes.
Les groupes de panneaux sont des ensembles de panneaux associés regroupés sous un même
titre. Pour développer un groupe de panneaux, cliquez sur la flèche d’agrandissement située à gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée d’ancrage sur le côté gauche de la barre de titre du groupe.
Présentation des fenêtres et des panneaux 15
Le panneau Fichiers vous permet de gérer vos fichiers et dossiers, qu’ils fassent partie d’un site
Dreamweaver ou qu’ils se trouvent sur un serveur distant. Il permet également d’accéder à tous les fichiers stockés sur votre disque local, tout comme l’Explorateur Windows (Windows) ou le Finder (Macintosh).
Dreamweaver propose de nombreux autres inspecteurs, panneaux et fenêtres qui ne sont pas illustrés ici, tels que le panneau Styles CSS et l’inspecteur de balises. Pour ouvrir les panneaux, inspecteurs et fenêtres Dreamweaver, utilisez le menu Fenêtre.

Présentation des menus

Cette section présente les menus de Dreamweaver.
Le
menu Fichier et le menu Edition contiennent des éléments de menu standard, tels que
Nouveau, Ouvrir, Enregistrer, Enregistrer tout, Couper, Copier, Coller, Annuler et Rétablir. Le menu Fichier contient également plusieurs autres commandes permettant d’afficher un aperçu du document dans un navigateur ou d’imprimer du code, par exemple. Le menu Edition inclut des commandes de sélection et de recherche, telles que Sélectionner balise parente et Rechercher et Remplacer. Sous Windows, le menu Edition permet également d’accéder aux préférences ; sur Macintosh, le menu Dreamweaver permet d’ouvrir la boîte de dialogue Préférences.
Le
menu Affichage permet de modifier l’affichage du document (mode Création ou mode Code,
par exemple) et d’afficher ou de masquer plusieurs types d’éléments de page ainsi que les différents outils et barres d’outils de Dreamweaver.
Le
menu Insertion et la barre Insérer permettent d’insérer des objets dans votre document.
Le
menu Modifier permet de modifier les propriétés de l’élément de page sélectionné. Vous
pouvez l’ouvrir pour modifier les attributs de balises, des tableaux et leurs éléments et effectuer diverses opérations avec les éléments de bibliothèque et les modèles.
Le
menu Texte permet de formater facilement le texte.
Le
menu Commandes propose une commande de formatage du code qui tient compte de vos
préférences de formatage, une commande de création d’album photos et une commande d’optimisation des images dans Macromedia Fireworks.
Le
menu Site contient des éléments de menu permettant de gérer vos sites et de télécharger des
fichiers vers ou en provenance d’un serveur distant.
Conseil : Certaines commandes du menu Site des versions précédentes de Dreamweaver se trouvent désormais dans le menu Options du panneau Fichiers.
Le menu Fenêtre permet d’accéder à tous les panneaux, inspecteurs et fenêtres de Dreamweaver. (Pour les barres d’outils, voir le menu Affichage.)
Le
menu Aide permet d’accéder à la documentation de Dreamweaver, aux systèmes d’aide relatifs
à l’utilisation de Dreamweaver et à la création d’extensions pour Dreamweaver, ainsi qu’à des références pour plusieurs langages.
Outre les menus de la barre de menus, Dreamweaver propose plusieurs menus contextuels qui permettent d’accéder rapidement à des commandes utiles en rapport avec la zone ou la sélection courante. Pour afficher un menu contextuel, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur un élément qui vous intéresse dans une fenêtre.
16 Chapitre 1 : L’espace de travail Dreamweaver
CHAPITRE 2

Configuration rapide de site

Ce chapitre explique comment configurer un site Dreamweaver MX 2004. 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 à la disposition d’autres utilisateurs le moment venu (le site distant).
Une fois le site configuré, vous pouvez explorer les différentes fonctionnalités de Dreamweaver par vous-même et afficher vos propres pages Web. Vous pouvez également suivre les didacticiels proposés tout au long du présent guide afin d’apprendre à créer un site Web simple à l’aide des échantillons fournis avec Dreamweaver MX 2004.
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 les mettre à la disposition d’autres utilisateurs. Vous pouvez utiliser Dreamweaver d’autres manières (en exécutant un serveur Web sur votre ordinateur local, en téléchargeant des fichiers vers un serveur intermédiaire, en modifiant des fichiers sans définir de site ou en utilisant un disque monté comme s’il s’agissait de votre disque local), mais les leçons proposées dans ce guide supposent que vous utilisez un ordinateur local et que vous téléchargez vos pages vers un serveur distant.
Ce chapitre contient les sections suivantes :
A propos des sites, page 18
Création d’un site : présentation du déroulement du travail, page 18
Définition d’un site Dreamweaver, page 18
17

A propos des sites

Dans Dreamweaver, le mot site fait référence aux éléments suivants :
Site Web : ensemble de pages sur un serveur pouvant être visualisées par tout visiteur du site
disposant d’un navigateur Web.
Site distant : fichiers stockés sur un serveur qui constituent un site Web, du point de vue de
l’auteur (vous) plutôt que de celui du visiteur.
Site local : fichiers stockés sur votre disque local correspondant à ceux que vous avez téléchargés
sur le site distant. En règle générale avec Dreamweaver, les fichiers sont modifiés sur votre disque dur, puis téléchargés vers le site distant.
Définition de site Dreamweaver : ensemble de définitions d’un site local, plus des informations
sur la façon dont le site local correspond à un site distant.

Création d’un site : présentation du déroulement du travail

L’ordre des leçons présentées dans ce guide correspond à un déroulement possible du travail lors de la création d’un site. Pour créer vos sites, vous pouvez adopter le déroulement de travail le mieux adapté à vos besoins.
Pour créer un site Web :
1 Planifiez et préparez votre travail, ce qui inclut la configuration d’un site Dreamweaver (voir
Définition d’un site Dreamweaver, page 18).
2 Créez des pages, ajustez leur mise en forme et ajoutez du contenu (voir Didacticiel : Création
d’une page statique, page 27).
3 Modifiez le code selon vos besoins (voir Didacticiel : Modification du code, page 39). 4 Liez les pages (voir Didacticiel : Lien et aperçu de pages, page 49). 5 Visualisez et publiez votre site (voir Aperçu des pages dans un navigateur, page 55 et Définition
d’un dossier distant, page 24).
6 (Facultatif) Ajoutez des pages dynamiques qui affichent des informations à partir de bases de
données (voir Description des applications Web, page 57 et Didacticiel : Développement d’une
application Web, page 71).

Définition d’un site Dreamweaver

Généralement, la création d’un site Web est précédée d’une étape de planification qui détermine les éléments suivants : le nombre de pages, le contenu de chaque page, la mise en forme des pages et les liens associant les pages entre elles. Toutefois, l’exemple de site dont il est question dans les didacticiels proposés dans ce guide est très sommaire et la phase de planification s’en trouve considérablement réduite. En effet, le site ne comporte que deux pages Web reliées entre elles. Pour ce site, vous pouvez donc directement configurer votre site local.
Pour configurer un site local à l’aide des exemples de fichiers, commencez par copier ces fichiers dans un dossier local, puis créez une définition de site Dreamweaver pour vous permettre de gérer les sites dans Dreamweaver.
Remarque : Les utilisateurs de Macromedia HomeSite et de ColdFusion Studio peuvent considérer un site Dreamweaver comme un projet HomeSite ou Studio.
18 Chapitre 2 : Configuration rapide de site
Pour configurer un site local :
1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur (voir Copie des exemples de
fichiers, page 19).
2 Définissez le dossier comme un dossier Dreamweaver local (voir Définition d’un dossier local à
l’aide de l’assistant de définition d’un site, page 20).
3 Définissez un dossier sur un serveur Web comme dossier Dreamweaver distant (voir Définition
d’un dossier distant, page 24).
4 Téléchargez les exemples de fichiers sur le serveur Web (voir Téléchargez vos fichiers locaux,
page 26).

Copie des exemples de fichiers

Lorsque vous créez un site local, vous pouvez placer les actifs existants (images ou autre élément de contenu) dans un dossier au sein du dossier racine du site local. Lorsque vous serez disposé à ajouter le contenu à vos pages, les actifs seront prêts à l’emploi.
Les exemples de fichiers inclus avec Dreamweaver contiennent des actifs pour le 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 le dossier approprié sur votre disque dur.
Remarque : La structure et l’emplacement recommandés pour les dossiers de votre site local sont adaptés pour suivre les didacticiels. Néanmoins, lorsque les exemples de fichiers se trouvent à l’emplacement recommandé, il est impossible d’utiliser les liens relatifs à la racine du site dans l’exemple de site. Ces didacticiels utilisent donc uniquement des liens relatifs aux documents. Pour plus d’informations sur ces types de liens, voir l’aide Utilisation de Dreamweaver.
Pour copier les exemples de fichiers :
1 Créez un dossier intitulé Sites-Local dans le dossier utilisateur de votre disque dur.
Par exemple, créez un des dossiers suivants, selon le système d’exploitation que vous utilisez :
C:\Documents and Setting\votre_nom_d’utilisateur\Mes documents\Sites-Local (Windows)
/Utilisateurs/votre_nom_d’utilisateur/Documents/Sites-Local (Macintosh).
Remarque : Sous Macintosh, votre dossier 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 GettingStarted 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 :
C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\GettingStarted\
(Windows)
/Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)
3 Copiez le dossier GettingStarted dans le dossier Sites-Local.
Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver local.
Définition d’un site Dreamweaver 19

Définition d’un dossier local à l’aide de l’assistant de définition d’un site

Créez ensuite une définition du site et définissez un dossier local à l’aide de la boîte de dialogue Définition du site. Vous pouvez compléter les champs de cette boîte de dialogue dans l’un des deux affichages suivants : Elémentaire ou Avancé. L’onglet Elémentaire présente toutes les étapes de définition d’un site. Si vous préférez modifier les informations relatives au site sans aide, cliquez sur l’onglet Avancé à tout moment.
La procédure suivante explique comment définir des options dans la version Elémentaire de la boîte de dialogue ; elle est également appelée Assistant de définition d’un site. Pour plus de détails sur la définition d’options dans la version Avancé, cliquez sur l’onglet Avancé, puis sur le bouton Aide.
Si vous disposez déjà d’un site Web sur un serveur distant et que vous souhaitez modifier ce site au lieu d’utiliser les exemples de fichiers, voir Modification de sites Web Dreamweaver existants dans l’aide Utilisation de Dreamweaver (Aide > Utilisation de Dreamweaver).
Pour définir un site :
1 Lancez Dreamweaver. 2 Sélectionnez Site > Gérer les sites (en d’autres termes, sélectionnez Gérer les sites dans le menu
Site). La boîte de dialogue Gérer les sites s’affiche.
3 Dans la boîte de dialogue Gérer les sites, cliquez sur Nouveau et sélectionnez Site dans le menu
contextuel. La boîte de dialogue Définition du site s’ouvre.
4 Si elle affiche l’onglet Avancé, cliquez sur Elémentaire.
Le premier écran de l’Assistant de définition d’un site apparaît et vous demande d’attribuer un nom au site.
20 Chapitre 2 : Configuration rapide de site
5 Dans la zone de texte, tapez un nom permettant d’identifier le site dans Dreamweaver. Il peut
s’agir de n’importe quel nom. Vous pouvez, par exemple, nommer le site Trio Motors.
6 Cliquez sur Suivant pour passer à l’étape suivante.
L’écran suivant de l’Assistant apparaît et vous demande si vous souhaitez utiliser une technologie de serveur.
Définition d’un site Dreamweaver 21
7 Choisissez l’option Non pour indiquer que, pour l’instant, le site est statique et qu’il ne contient
aucune page dynamique.
Pour définir un site dans le but de créer une application Web, vous devez sélectionner un type de document dynamique, comme Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP) ou PHP : Hypertext Preprocessor (PHP), puis indiquer les informations concernant votre serveur d’application. Pour plus d’informations, voir Chapitre 7, Didacticiel : Développement d’une application Web, page 71.
8 Cliquez sur Suivant pour passer à l’étape suivante.
L’écran suivant de l’Assistant s’affiche et vous demande comment vous souhaitez travailler avec vos fichiers.
9 Sélectionnez l’option Modifier les copies locales sur ma machine, puis télécharger vers le serveur
lorsque je suis prêt (recommandé). Vous pouvez utiliser les fichiers de diverses façons pendant le développement du site, mais dans
le cadre de cette leçon, sélectionnez cette option.
10 Cliquez sur l’icône de dossier en regard de la zone de texte. La zone de texte vous permet de
spécifier un dossier sur votre disque local dans lequel Dreamweaver doit stocker les versions locales des fichiers du site. Il est néanmoins plus pratique d’utiliser la fonction de navigation plutôt que d’entrer le chemin à l’aide du clavier.
La boîte de dialogue Choisissez le dossier racine local pour le site Trio Motors apparaît.
22 Chapitre 2 : Configuration rapide de site
11 Dans la boîte de dialogue Choisissez le dossier racine local pour le site Trio Motors, sélectionnez
le dossier Sites-Local sur votre disque local, dossier dans lequel vous avez copié les exemples de fichiers dans Copie des exemples de fichiers, page 19. Sélectionnez le dossier GettingStarted dans le dossier Sites-Local. Ouvrez le dossier GettingStarted, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).
12 Cliquez sur Suivant pour passer à l’étape suivante.
L’écran de l’Assistant apparaît et vous demande de préciser le type de connexion au serveur distant.
13 Pour l’instant, choisissez Aucun dans le menu contextuel.
Vous pouvez définir ultérieurement des informations concernant votre site distant (voir
Définition d’un dossier distant, page 24) ; pour le moment, les informations concernant le site
local suffisent pour créer une page.
14 Cliquez sur Suivant pour passer à l’étape suivante.
L’écran suivant apparaît, affichant un résumé de vos paramètres.
15 Cliquez sur Terminé.
La boîte de dialogue Gérer les sites s’affiche et présente votre nouveau site.
16 Cliquez sur Terminé pour fermer la boîte de dialogue Gérer les sites.
Définition d’un site Dreamweaver 23
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.
Un dossier racine local est désormais défini pour votre site. Vous pouvez suivre les autres didacticiels de ce guide pour créer l’exemple de site Trio Motors 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..

Définition d’un dossier distant

L’étape suivante de création d’un site consiste à le publier en téléchargeant les fichiers vers un serveur Web 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 ou PWS 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.
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 Installation d’un serveur Web, page 87.
La procédure suivante suppose que votre dossier racine distant est vide. Si votre site distant 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.
La procédure suivante suppose que vous avez configuré un site local. Pour plus d’informations, voir Définition d’un dossier local à l’aide de l’assistant de définition d’un site, page 20.
24 Chapitre 2 : Configuration rapide de site
Pour vous connecter à un site distant :
1 Dans votre site distant (sur le serveur), créez un dossier vide dans le dossier racine Web pour le
serveur. Donnez à ce nouveau dossier vide le même nom que votre dossier racine local. Par exemple, pour le site du didacticiel, le nom à utiliser est normalement GettingStarted, afin qu’il corresponde au nom du dossier racine local.
2 Dans Dreamweaver, sélectionnez Site > Gérer les sites. 3 Sélectionnez un site (par exemple Trio Motors), puis cliquez sur Modifier. 4 Cliquez sur l’onglet Elémentaire dans la partie supérieure de la boîte de dialogue. 5 Si, lors de la configuration de votre site local, vous avez déjà suivi les premières étapes indiquées
dans l’onglet Elémentaire, cliquez sur Suivant plusieurs fois jusqu’à ce que vous atteigniez l’étape de Partage des fichiers qui doit s’afficher dans la partie supérieure de l’Assistant.
6 Dans le menu déroulant Comment vous connectez-vous à votre serveur distant ?, sélectionnez
une méthode de connexion au site distant. 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.
7 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 dans laquelle vous devez indiquer le nom du dossier qui contient vos
fichiers, tapez le chemin d’accès au dossier sur le serveur à partir du dossier racine FTP jusqu’au dossier racine du site distant. 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 la connexion.
En cas d’échec, consultez votre administrateur système.
Définition d’un site Dreamweaver 25
8 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. Vous pouvez choisir de désélectionner l’option Actualiser automatiquement la liste des fichiers distants pour plus de rapidité.
9 Après avoir entré les informations appropriées, cliquez sur Suivant.
10 N’activez pas l’option d’archivage et d’extraction des fichiers pour le site Trio Motors.
Si vous et vos collègues travaillez sur un site plus important, l’option d’archivage et d’extraction des fichiers empêche l’écrasement de vos fichiers respectifs. De plus, si vos collègues utilisent Macromedia Contribute, vous devez activer l’option d’archivage et d’extraction des fichiers. Nous n’aurons pas besoin de cette option dans le cadre du site Trio Motors.
11 Cliquez sur Suivant. 12 Cliquez sur Terminé pour terminer la configuration du site distant. 13 Cliquez à nouveau 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.
Pour télécharger vos pages vers un site distant :
1 Dans le panneau Fichiers (Fenêtre > Fichiers), sélectionnez le dossier racine local du site. 2 Cliquez sur l’icône représentant une flèche bleue (Placer les fichiers) dans la barre d’outils du
panneau Fichiers. Dreamweaver copie tous les fichiers dans le dossier distant défini dans Définition d’un dossier
distant, page 24. Cette opération peut demander un peu de temps car Dreamweaver doit
télécharger tous les fichiers dans le site, y compris plusieurs versions de certains fichiers à utiliser avec divers didacticiels.
3 Ouvrez le site distant dans un navigateur pour vous assurer que le transfert s’est bien déroulé.
26 Chapitre 2 : Configuration rapide de site
CHAPITRE 3

Didacticiel : Création d’une page statique

Le présent didacticiel indique comment créer et enregistrer une page dans Macromedia Dreamweaver MX 2004, puis y ajouter du texte, des images et des couleurs.
Avant de lancer ce didacticiel, définissez votre site en suivant les instructions décrites dans
Configuration rapide de site, page 17.
Ce didacticiel contient les leçons suivantes :
Ouverture et enregistrement d’une nouvelle page, page 27
Ajout d’un espace réservé pour une image, page 29
Définition d’un titre de page, page 30
Ajout de texte formaté, page 31
Ajout d’images, page 35
Définition de couleurs d’arrière-plan, page 36
Documentation connexe, page 37

Ouverture et enregistrement d’une nouvelle page

Une fois le site défini, vous pouvez créer des pages Web afin de le remplir.
Pour créer une nouvelle page, vous pouvez utiliser la page de démarrage Dreamweaver ou sélectionner Fichier > Nouveau et choisir une conception parmi celles prédéfinies.
Veuillez noter que ce didacticiel suppose que vous utilisiez la conception layout.html fournie dans l’exemple de Dreamweaver.
27
Pour ouvrir une page :
1 Dans le panneau Fichiers, développez le dossier 1-Design, puis double-cliquez sur le fichier
layout.html. La page layout.html apparaît dans une nouvelle fenêtre de document. La page contient le texte
« Lorem ipsum » qui correspond à l’emplacement d’un espace réservé, ce qui permet de donner un aperçu de la conception de la page lorsque le texte y sera inséré.
2 Enregistrez la page en lui donnant un nouveau nom.
Pour enregistrer votre page :
1 Sélectionnez Fichier > Enregistrer sous. 2 Dans la boîte de dialogue Enregistrer sous, accédez au dossier 1-Design qui se trouve dans le
dossier racine local du site. Rappel : le dossier racine local du site est le dossier que vous avez créé lors de la définition du
site dans Définition d’un dossier local à l’aide de l’assistant de définition d’un site, page 20.
3 Saisissez le nom de fichier index.html. 4 Cliquez sur Enregistrer pour enregistrer le fichier dans le dossier 1-Design.
Le nom de fichier apparaît désormais dans la barre de titre de la fenêtre, entre parenthèses, après les mots « Document sans nom ».
28 Chapitre 3 : Didacticiel : Création d’une page statique

Ajout d’un espace réservé pour une image

Vous allez à présent créer un espace réservé pour les images que vous ajouterez ultérieurement.
Pour ajouter un espace réservé pour une image :
1 Cliquez au début de la colonne de texte principale, juste avant le mot « Titre », puis appuyez sur
Entrée (Windows) ou Retour (Macintosh) pour créer une ligne vierge avant le titre. Cliquez sur la nouvelle ligne vierge.
Le point d’insertion occupe la première ligne. Si ce n’est pas le cas, placez-le sur la ligne vierge.
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, entrez un nom (par exemple,
SplashImage).
Remarque : Les noms d’espaces réservés doivent commencer par une lettre et ne peuvent contenir que des lettres et des chiffres.
4 Toujours dans la boîte de dialogue Espace réservé pour l’image, entrez une largeur et une
hauteur. Si vous créez la page Trio Motors, indiquez 176 pour la largeur et 190 pour la hauteur.
5 N’indiquez aucune valeur dans les zones de texte Couleur et Autre texte.
Remarque : Il est important de fournir un autre texte pour certains types d’image, afin que les visiteurs qui utilisent des lecteurs d’écran ou des navigateurs en mode texte uniquement puissent comprendre l’information véhiculée par l’image. Pour les images qui ne véhiculent aucune information, utilisez l’attribut alt vide. Lorsque vous ne remplissez pas la zone Autre texte, Dreamweaver ajoute un attribut alt="" à la balise img.
Ajout d’un espace réservé pour une image 29
6 Cliquez sur OK.
Une boîte grise aux dimensions fournies apparaît. Il s’agit d’un espace réservé pour une image, qui vous permet de mettre des pages en forme en l’absence des images finales.
7 Cliquez sur l’en-tête « Lorem Ipsum Dolor », en haut de la page. Dans le sélecteur de balises
situé en bas de la fenêtre de document, sélectionnez la balise <h1>, puis appuyez sur la touche Retour arrière (Windows) ou Supprimer (Macintosh).
Le texte et la balise h1 sont supprimés.
8 Ne déplacez pas le point d’insertion. Répétez les étapes 2 à 6 pour insérer un autre espace pour
les images. Cette fois, nommez l’espace Bannière, puis entrez une largeur égale à 600 et une hauteur égale à 41. Une bannière remplacera ensuite cet espace, en haut de la page.
9 Enregistrez votre page.

Définition d’un titre de page

Vous pouvez définir diverses propriétés pour une page, dont le titre, la couleur d’arrière-plan, la couleur du texte, etc. (Pour définir les propriétés d’une page, sélectionnez Modifier > Propriétés de la page.) Si vous souhaitez uniquement définir le titre de la page (titre qui apparaît dans la barre de titre du navigateur), vous pouvez effectuer cette opération dans la barre d’outils du document.
30 Chapitre 3 : Didacticiel : Création d’une page statique
Pour définir le titre de votre page :
1 Si la barre d’outils du document n’apparaît pas, sélectionnez Affichage > Barres d’outils >
Document. La barre d’outils du document apparaît en haut de la fenêtre de document.
Mode Code
Modes Code et Création
Mode Création
Aucune erreur du navigateur
Gestion de fichiers
Aperçu/Débogage dans le navigateur
Débogage du serveur
Titre du document
2 Dans la zone Titre, sélectionnez le texte « Document sans nom », puis appuyez sur la touche
Options d’affichage
Actualiser mode Création
Retour arrière (Windows) ou Supprimer (Macintosh). Saisissez un titre de page, par exemple Page d’accueil de Trio Motors. Appuyez ensuite sur Entrée (Windows) ou Retour (Macintosh) pour mettre à jour le titre de la page dans la barre de titre de la fenêtre.
3 Enregistrez votre page.

Ajout de texte formaté

Vous pouvez taper du texte dans la fenêtre de document ou le copier et le coller à partir d’une autre source (comme un fichier Microsoft Word). Vous pouvez ensuite formater ce texte à l’aide des styles CSS.
Avant de saisir du texte, assurez-vous que vous êtes en mode Création en sélectionnant Affichage > Création.

Ajout de texte

Au fur et à mesure que vous saisissez et formatez du texte en mode Création, Dreamweaver crée le code HTML sous-jacent pour la page. Pour taper le code directement, utilisez le mode Code. Pour plus d’informations sur le mode Code, voir Didacticiel : Modification du code, page 39.
Les pages prédéfinies fournies avec Dreamweaver contiennent le texte d’espace réservé « Lorem ipsum ». Si vos pages s’inspirent d’une page prédéfinie, il vous faudra remplacer ce texte par celui de votre choix au moment d’ajouter le contenu.
Remarque : Il peut être utile de conserver le texte jusqu’à ce que les opérations de conception et de mise en forme soient terminées afin que vous ou votre client puissiez observer la mise en forme sans être distrait par le texte.
Pour ajouter du texte à une page :
1 Dans la colonne de gauche, cliquez trois fois sur le texte de l’en-tête « Titre » situé sous l’espace
réservé pour l’image afin de sélectionner la totalité de l’en-tête.
2 Tapez Lancement en ligne de ZX2002 (ou le texte de l’en-tête de votre choix). 3 Sélectionnez le paragraphe correspondant au texte de l’espace réservé, juste au-dessous du
nouvel en-tête, puis supprimez-le en appuyant sur la touche Retour arrière (Windows) ou Supprimer (Macintosh).
Ajout de texte formaté 31
4 Dans le panneau Fichiers, recherchez le fichier mainItem.txt du dossier Assets (dans le dossier
1-Design). Double-cliquez sur l’icône du fichier pour l’ouvrir dans Dreamweaver.
Remarque : Dans cet exemple de site, le fichier contenant le texte à utiliser est un fichier texte. Dans le cas d’autres sites, il peut s’agir de documents dans différents formats, par exemple des documents HTML générés par Microsoft Word que vous pouvez importer et dont vous pouvez supprimer le code inutile à l’aide de la commande Importer HTML Word de Dreamweaver. Pour plus d’informations, voir l’aide Utilisation de Dreamweaver.
Vous remarquerez que le fichier texte apparaît dans une nouvelle fenêtre de document affichant une barre grise ou colorée sur le côté gauche. Cette fenêtre est en mode Code et vous ne pouvez pas passer au mode Création, car le fichier n’est pas au format HTML.
5 Sélectionnez Affichage > Options d’affichage de code > Retour automatique à la ligne pour voir
tout le texte.
6 Dans la fenêtre de document mainItem.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.
7 Fermez le fichier mainItem.txt en sélectionnant Fichier > Fermer. 8 Dans la fenêtre de document index.htm, cliquez sur la ligne vide située sous l’en-tête de la
colonne principale (colonne de gauche), puis sélectionnez Edition > Coller texte.
9 Dans l’encadré de la colonne de droite du fichier index.html, sélectionnez le texte « Actualités »,
puis tapez Présentation & autres informations. Appuyez ensuite sur Entrée (Windows) ou Retour (Macintosh).
10 Dans le panneau Fichiers, recherchez le fichier previewsItem.doc dans le dossier Assets. Double-
cliquez sur l’icône du fichier pour l’ouvrir dans Microsoft Word. (Si Microsoft Word n’est pas installé sur votre ordinateur, vous pouvez ouvrir la version HTML du fichier, previewsItem.html, dans Dreamweaver.)
Ce fichier contient un exemplaire de présentation spéciale de Trio Motors, à ajouter à l’encadré de la page principale. S’il s’agissait de votre propre site, vous pourriez ajouter le contenu à cet emplacement. Ce contenu peut vous être fourni par un tiers sous la forme d’un fichier texte ou Microsoft Word.
11 Dans Microsoft Word (ou dans la fenêtre du document previewsItem.html), sélectionnez
l’intégralité du contenu du fichier en cliquant sur Edition > Sélectionner tout.
12 Appuyez sur Ctrl+C (Windows) ou Commande+C (Macintosh) pour copier le texte. 13 Fermez la page previewsItem.doc ou previewsItem.html en sélectionnant Fichier > Fermer. 14 Retournez au document index.html dans Dreamweaver. Sélectionnez le paragraphe « Lorem
ipsum » dans l’encadré.
15 Appuyez sur Edition > Coller formaté pour coller le texte.
Un style nommé sidebar-text s’applique au document Microsoft Word. Lorsque vous collez ce texte dans un document HTML, Dreamweaver crée un style CSS nommé sidebar-text, à l’aide de la définition de style du document Word, et l’applique au texte collé.
16 Enregistrez votre page.
32 Chapitre 3 : Didacticiel : Création d’une page statique

Ajout de styles au texte

Plusieurs méthodes vous permettent d’ajouter des styles à un texte dans un document HTML. Vous pouvez utiliser des feuilles de style en cascade (CSS) pour définir des balises HTML afin de formater le texte d’une certaine façon.
Cette leçon explique comment créer une feuille de style CSS simple à partir d’une feuille de style prédéfinie, puis l’appliquer au texte, et modifier les styles.
Pour créer une feuille de style CSS :
1 Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Attacher une feuille
de style. La boîte de dialogue Ajouter une feuille de style externe apparaît.
2 Cliquez sur le lien « exemples de feuilles de style », en bas de la boîte de dialogue.
La boîte de dialogue Exemples de feuilles de style apparaît et affiche une liste de feuilles de style prédéfinies.
3 Sélectionnez une feuille de style. Pour le site Trio Motors, sélectionnez Elémentaire : Verdana,
car ce style redéfinit les balises
body, td et th en leur attribuant des polices.
4 Cliquez sur le bouton Parcourir, en bas de la boîte de dialogue. Accédez au dossier Assets sur
votre site, puis au dossier CSS à l’intérieur du dossier Assets. Une fois le dossier CSS sélectionné, ouvrez-le et cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).
Conseil : Si vous ne possédez aucun dossier CSS sur votre site, ignorez cette étape ; Dreamweaver crée automatiquement un dossier CSS lorsque vous joignez une feuille de style à l’aide de la boîte de dialogue Exemples de feuilles de style.
Ajout de texte formaté 33
5 Cliquez sur OK pour créer la feuille de style et ignorer la boîte de dialogue Exemples de feuilles
de style. Dreamweaver crée un fichier contenant un ensemble limité de styles CSS prédéfinis.
Dreamweaver ajoute également la feuille de style sélectionnée au document actif. Le nom et le contenu de la feuille de style apparaissent dans le panneau Styles CSS. Les styles
définis dans la feuille de style sont appliqués au texte du document HTML. Par exemple, le corps du texte apparaît en Verdana.
6 Enregistrez votre page.
Pour ajouter des styles à la feuille de style :
1 Dans la fenêtre de document, cliquez sur le texte de l’en-tête que vous avez saisi précédemment
(voir Ajout de texte, page 31).
2 Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez la feuille de style
Level1_Verdana.css.
3 Cliquez sur le bouton Nouveau style CSS.
La boîte de dialogue Nouveau style CSS apparaît.
4 Choisissez l’option Balise, sous Type de sélecteur, puis h1 dans le menu contextuel qui apparaît
(si cette option n’est pas déjà sélectionnée).
5 Dans le menu contextuel Définir dans, Level1_Verdana.css devrait être sélectionné. 6 Cliquez sur OK.
La boîte de dialogue Définition du style CSS s’affiche.
7 Dans la zone de texte Taille, saisissez 120. Sélectionnez % dans le menu contextuel qui s’affiche
en regard de cette zone de texte.
8 Cliquez sur OK pour redéfinir le style de balise h1 et ignorer la boîte de dialogue. 9 Cliquez sur l’en-tête « Présentation & autres informations », dans l’encadré.
10 Répétez les étapes 2 à 8 pour redéfinir la balise h2, en spécifiant une taille de 100 %.
La taille des en-têtes de la page se rapproche alors de celle du corps du texte.
11 Si vous avez copié le texte de l’encadré depuis un document HTML et non Word, répétez les
étapes ci-dessus pour ajouter un style nommé sidebar-text. Cette fois-ci, sélectionnez l’option Classe sous Type de sélecteur, puis saisissez .sidebar-text (sans omettre le point initial) dans la zone de texte Nom. Définissez la taille sur 80 %. Si vous effectuez cette étape, ignorez la procédure qui suit.
12 Enregistrez votre page.
Pour modifier un style dans la feuille de style :
1 Si vous avez copié le texte de l’encadré depuis un document HTML et non Word, ignorez cette
procédure. Si vous avez copié le texte depuis un document Word, suivez cette procédure.
2 Dans la fenêtre de document, cliquez sur le paragraphe correspondant au texte de l’encadré. 3 Ouvrez l’inspecteur de balises (Fenêtre > Inspecteur de balises), puis sélectionnez l’onglet CSS
pertinents.
4 Dans la partie supérieure de cet onglet, sélectionnez la règle p.sidebar-text.
La ligne d’état située au milieu du panneau affiche la mention « Dans le document actif ».
5 Cliquez sur le bouton Afficher la vue par catégorie situé au milieu du panneau.
Vous pouvez répertorier les propriétés CSS soit par catégorie ou par ordre alphabétique.
34 Chapitre 3 : Didacticiel : Création d’une page statique
6 Développez la catégorie des polices et recherchez la propriété de taille de police en faisant défiler
la liste, si nécessaire.
7 Dans cette ligne, cliquez sur la colonne de droite. Saisissez 80 dans la première zone de texte,
puis sélectionnez % (pour cent) dans le second menu contextuel. La taille du texte de l’encadré correspond alors à 80 % de sa taille d’origine.
8 Effectuez d’autres modifications si nécessaires. 9 Une fois l’édition des styles terminée, cliquez sur le menu Fenêtre pour afficher la fenêtre
Level1_Verdana.css. Enregistrez ce fichier.

Ajout d’images

Dans cette leçon, vous apprendrez à ajouter des images à la page sur laquelle vous travaillez. Si vous le souhaitez, vous pouvez utiliser vos images, mais lorsque vous ajouterez une image pour la première fois, Macromedia vous recommande d’utiliser celle qui est fournie avec l’exemple de site de Dreamweaver.
Pour ajouter une image à votre page :
1 Enregistrez la page, si ce n’est déjà fait.
Vous pouvez insérer une image dans un document non enregistré, auquel cas une boîte de dialogue apparaît pour vous informer que l’URL utilisée pour l’image servira de chemin d’accès local complet à l’image. Dreamweaver corrige les URL ultérieurement, mais il est plus facile d’enregistrer le document avant d’ajouter des images.
2 Pour insérer une image à la place d’un espace réservé pour l’image, double-cliquez sur l’espace
réservé. Par exemple, pour insérer une image représentant une bannière dans la partie supérieure de la page Trio Motors, double-cliquez sur l’espace réservé portant la mention « Bannière (600 x 41) ».
La boîte de dialogue Sélectionnez la source de l’image s’affiche.
3 En bas de la boîte de dialogue, le menu déroulant Relatif à doit afficher la valeur Document.
Pour plus d’informations sur les URL relatives au document et à la racine, voir l’aide Utilisation de Dreamweaver.
4 Recherchez une image dans le dossier Assets (par exemple, images/trio_logo.jpg). 5 Cliquez sur OK ou Sélectionner (Windows) ou Choisir (Macintosh) pour insérer l’image.
Dans la fenêtre de document, l’image apparaît à la place de l’espace réservé pour l’image.
6 Sélectionnez l’espace réservé pour l’image, dans la colonne principale. Il s’agit de l’espace
SplashImage que vous avez créé dans Ajout d’un espace réservé pour une image, page 29. Ne double-cliquez pas dessus.
Vous pouvez reprendre la méthode utilisée avec l’autre espace réservé pour remplacer cet espace réservé par une image ou suivre les instructions ci-après :
7 Vérifiez que le panneau Fichiers et l’inspecteur des propriétés sont affichés (si ce n’est pas le cas,
sélectionnez Fenêtre > Fichiers et Fenêtre > Propriétés). Vérifiez également que l’espace réservé est toujours sélectionné dans la fenêtre de document.
Ajout d’images 35
8 Dans l’inspecteur de propriétés, faites glisser la souris de l’icône Pointer vers un fichier, de la
zone de texte Src vers le panneau Fichiers. Veillez à faire glisser la souris de l’icône Pointer vers un fichier se trouvant pr ès de la zone de texte Src et non près de la zone de texte Lien. Mainte nez le bouton de la souris enfoncé tout en désignant le dossier Assets (si le dossier n’est pas développé) ; celui-ci doit s’ouvrir. Maintenez toujours le bouton enfoncé tout en désignant le dossier des images, jusqu’à ce que le pointeur se trouve sur le fichier homeMain.jpg. Relâchez le bouton de la souris pour sélectionner homeMain.jpg.
Dans la fenêtre de document, une voiture apparaît à l’emplacement de l’espace réservé. Si l’image qui apparaît n’est pas celle que vous avez choisie, vérifiez son nom dans la zone de texte Src ; si vous n’avez pas sélectionné le bon fichier, recommencez l’opération.
9 Pour insérer des images à des endroits du document ne comportant aucun espace réservé, en
mode Création, placez le point d’insertion à l’endroit où vous souhaitez voir apparaître l’image, puis cliquez, sélectionnez ensuite Insertion > Image.
Si vous insérez une image qui correspond à un fichier d’image ne se trouvant pas dans le dossier racine local, Dreamweaver vous permet de copier automatiquement l’image dans le site.
10 Enregistrez votre page.
Pour que le texte apparaisse de part et d’autre de votre image :
1 Sélectionnez l’image de la voiture dans la colonne principale. 2 Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Nouveau style CSS. 3 Dans la boîte de dialogue Nouveau style CSS, sélectionnez l’option Avancé sous Type de
sélecteur, puis saisissez #SplashImage (sans omettre le dièse initial) dans la zone de texte Nom. Dans l’option Définir dans, sélectionnez Seulement ce document.
4 Cliquez sur OK. 5 Dans la boîte de dialogue Définition du style CSS, sélectionnez la catégorie Boîte, puis Gauche
dans le menu contextuel Flottante.
6 Cliquez sur OK pour définir le style et fermer la boîte de dialogue. 7 Le style est appliqué à l’image (dont la valeur d’attribut d’ID est SplashImage), et le texte
apparaît autour de l’image.

Définition de couleurs d’arrière-plan

Dans les pages prédéfinies fournies avec Dreamweaver, la couleur d’arrière-plan de l’encadré est définie sur gris ; pour la plupart des sites, vous devrez modifier ces couleurs afin de les harmoniser avec celles de la palette de couleurs de votre site.
Pour définir la couleur d’arrière-plan de l’encadré :
1 Cliquez sur le texte de l’en-tête de l’encadré. 2 Dans l’inspecteur de balises (Fenêtre > Inspecteur de balises), sélectionnez l’onglet CSS
pertinents.
3 Dans la liste des règles qui s’appliquent à la sélection en cours, sélectionnez la ligne
correspondant à la règle appliquée #col1. Le texte de la ligne d’état située au milieu de l’inspecteur de balises devient alors « Dans le
fichier : divs.css », indiquant que cette règle est définie dans le fichier divs.css.
36 Chapitre 3 : Didacticiel : Création d’une page statique
4 Cliquez sur le bouton Afficher la vue par catégorie, puis développez la catégorie Arrière-plan.
Le nom de propriété correspondant à la couleur de l’arrière-plan est barré, indiquant que la sélection en cours n’hérite pas de cette propriété. Toutefois, la couleur de l’arrière-plan reste visible car ce dernier est transparent par défaut ; la couleur de l’arrière-plan de la balise parent apparaît alors.
Conseil : A chaque fois qu’un nom de propriété est barré, vous pouvez pointer votre curseur sur ce nom afin d’afficher une info-bulle pour en savoir plus.
5 Cliquez dans la zone de couleur de la colonne de droite, sur la ligne de couleur de l’arrière-plan.
Le sélecteur de couleur apparaît et le pointeur se transforme en une pipette.
6 Sélectionnez une couleur. Vous pouvez choisir une couleur dans la palette du sélecteur de
couleur ou cliquer à un endroit quelconque de l’écran pour sélectionner la couleur du pixel sur lequel vous avez cliqué. Par exemple, cliquez sur l’arrière-plan de l’image du logo Trio pour que la couleur d’arrière-plan de l’encadré corresponde à l’une des couleurs d’arrière-plan de l’image.
L’arrière-plan de l’encadré prend la couleur que vous avez choisie.
7 Si vous avez choisi une couleur sombre, développez la catégorie Police (en veillant à ce que la
règle #col1 soit bien toujours sélectionnée dans la partie supérieure de l’inspecteur de balises), dans la partie inférieure de l’inspecteur de balises, puis définissez une couleur de contraste (le blanc, par exemple) pour le texte, à l’aide de l’attribut de couleur.
8 Enregistrez votre page. 9 Passez au document divs.css (à l’aide du menu Fenêtre), puis enregistrez également ce
document. Dreamweaver a automatiquement ouvert la feuille de style divs.css lorsque vous avez changé la
couleur de l’arrière-plan, définie dans la feuille de style.

Documentation connexe

Pour plus d’informations sur les fonctions abordées dans ce didacticiel, voir l’aide Utilisation de Dreamweaver.
Documentation connexe 37
38 Chapitre 3 : Didacticiel : Création d’une page statique
CHAPITRE 4

Didacticiel : Modification du code

Au fur et à mesure que vous ajoutez du texte, des images ou un autre contenu, Dreamweaver MX 2004 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é le didacticiel précédent, Didacticiel : Création d’une
page statique, page 27, vous pouvez continuer à travailler dans le même dossier, avec les mêmes
fichiers.
Si vous n’avez pas terminé le didacticiel précédent, vous pouvez toutefois passer à celui-ci. Tout d’abord, configurez votre site en suivant les instructions de Configuration rapide de site, page 17. Utilisez ensuite les fichiers dans le dossier 2-Code pour suivre les leçons de ce didacticiel. Le dossier 2-Code contient les fichiers tels qu’ils apparaissent après avoir terminé le didacticiel précédent.
Ce didacticiel contient les leçons suivantes :
Affichage du code, page 40
Activation de l’espace de travail de codage (Windows uniquement), page 41
Ajout d’une balise à l’aide du sélecteur de balises, page 42
Modification d’une balise, page 43
Consultation des informations relatives à une balise, page 44
Ajout d’une image à l’aide des indicateurs de code, page 45
Vérification des modifications apportées, page 46
Impression du code, page 47
Documentation connexe, page 47
39

Affichage du 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 à l’écran.
Pour afficher le code HTML de votre page :
1 Si la barre d’outils du document n’apparaît pas, sélectionnez Affichage > Barres d’outils >
Document.
2 Dans la barre d’outils du document, cliquez sur le bouton Afficher les modes Code et Création
(intitulé Fractionner).
La fenêtre se divise en deux parties : le mode Création et le code HTML sous-jacent.
Vous pouvez alors modifier le code dans le mode Code. En mode Création, vous devez actualiser l’affichage pour constater les modifications apportées au code.
Pour afficher les modifications apportées au code en mode Création :
1 Placez le point d’insertion là où vous souhaitez afficher les modifications du code, puis procédez
de l’une des manières suivantes :
Cliquez à un endroit quelconque en mode Création.
Cliquez sur le bouton Actualiser dans la barre d’outils du document.
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.
Pour afficher le mode Création uniquement :
1 Si la barre d’outils du document n’apparaît pas, sélectionnez Affichage > Barres d’outils >
Document.
2 Dans la barre d’outils du document, cliquez sur le bouton de mode Création.
40 Chapitre 4 : Didacticiel : Modification du code

Activation de 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 :
1 Sélectionnez Edition > Préférences, puis sélectionnez la catégorie Général à gauche.
La catégorie Général apparaît.
2 Cliquez sur le bouton Changer d’espace de travail.
Activation de l’espace de travail de codage (Windows uniquement) 41
La boîte de dialogue Configuration de l’espace de travail apparaît.
3 Sélectionnez l’option Codeur. 4 Cliquez plusieurs fois sur OK pour fermer les boîtes de dialogue Configuration de l’espace de
travail et Préférences.
5 Fermez Dreamweaver, puis redémarrez-le.

Ajout d’une balise à l’aide du sélecteur de balises

L’étape suivante de création de la page d’accueil de Trio Motors consiste à insérer une balise div de part et d’autre d’une bannière, en haut de la page. (Pour obtenir des instructions sur la façon d’ajouter des images à la page, voir Ajout d’images, page 35.) 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.
Pour écrire du code à l’aide du sélecteur de balises :
1 Ouvrez le fichier index.html, s’il ne l’est pas déjà, puis affichez-le en mode Code (Affichage >
Code).
2 Sélectionnez Affichage > Options d’affichage de code > Retour automatique à la ligne pour
activer cette option, si elle ne l’est pas.
3 Dans le code suivant la balise d’ouverture body, recherchez puis sélectionnez la balise img
correspondant à l’image représentant une bannière située dans la partie supérieure de la page.
Remarque : Veillez à bien sélectionner toute la balise img, y compris les crochets.
4 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.
5 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
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.
6 Cliquez sur Insérer.
L’éditeur de balises s’ouvre pour la balise
42 Chapitre 4 : Didacticiel : Modification du code
div.
div.
7 Dans cet éditeur de balises, sélectionnez la catégorie Feuille de style/Accessibilité, puis saisissez
logo dans la zone de texte Classe.
8 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.
9 Cliquez sur Fermer pour fermer le sélecteur de balises.
10 Enregistrez votre page.

Modification d’une balise

Vous allez à présent apprendre à utiliser l’inspecteur de balises pour apporter rapidement des modifications aux attributs d’une balise.
Pour modifier une balise avec l’inspecteur de balises :
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. Sélectionnez ensuite l’onglet Attributs. L’inspecteur de balises affiche les attributs de la balise sélectionnée dans la fenêtre de document.
Pour visualiser tous les attributs possibles de la balise dans l’ordre alphabétique, cliquez sur le bouton Afficher la vue sous forme de liste dans l’inspecteur de balises.
Modification d’une balise 43
3 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.
4 Toujours en mode Code, recherchez la balise img correspondant à l’image trio_logo.jpg
(bannière), puis cliquez dessus. L’onglet Attributs de l’inspecteur de balises affiche les informations concernant les attributs de
la balise
5 Dans l’inspecteur de balises, cliquez sur la zone de texte vide située près de l’attribut alt, puis
img.
tapez Trio Motors ; 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.
6 Enregistrez votre page.

Consultation 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.
Pour consulter les informations relatives à une balise :
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.
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
Remarque : Vous pouvez également sélectionner Fenêtre > Référence pour ouvrir le panneau Référence.
alt.
44 Chapitre 4 : Didacticiel : Modification 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.

Ajout d’une image à l’aide des indicateurs de code

Pour ajouter manuellement du code, sélectionnez le mode Code, puis commencez à taper le code. La fonction Indicateurs de code permet d’accélérer votre saisie.
Dans cette leçon, vous allez utiliser des indicateurs de code pour ajouter une image à la page Trio Motors.
Pour rédiger du code à l’aide des indicateurs de code :
1 Ouvrez le fichier index.html en mode Code, s’il n’est pas déjà ouvert. 2 Recherchez le code correspondant à l’en-tête contenant la mention Présentation & autres
informations. Sélectionnez l’entité d’espace insécable (
 ) dans le code du paragraphe vierge
suivant le texte. Si aucun paragraphe vierge ne suit le texte de l’en-tête, saisissez le code suivant après la balise h2 de fermeture :
<p></p>
Placez ensuite le point d’insertion entre la balise d’ouverture <p> et la balise de fermeture <p>.
3 Tapez un crochet ouvrant (<).
Une liste de balises apparaît au niveau du point d’insertion.
Remarque : 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.
Ajout d’une image à l’aide des indicateurs de code 45
4 Sélectionnez la balise img dans la liste, puis appuyez sur Entrée (Windows) ou Retour
(Macintosh) pour insérer la balise.
Conseil : Pour sélectionner rapidement une balise dans la liste, commencez à saisir son nom.
5 Appuyez sur la barre d’espace pour afficher la liste des attributs de la balise. 6 Lorsque l’attribut src est sélectionné dans la liste des indicateurs, tapez src, puis appuyez sur
Entrée (Windows) ou Retour (Macintosh). La mention Parcourir s’affiche et est sélectionnée sous le code que vous venez de saisir.
7 Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour rechercher un fichier.
La boîte de dialogue Sélectionner un fichier s’affiche.
8 Recherchez, dans le dossier de votre site, le fichier image Assets/images/preview.jpg, puis 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.
9 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).
10 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.
11 Insérez un espace, une barre oblique et un crochet de fermeture ( />) pour terminer la balise.
Remarque : Dans la mesure où cette page est un document XHTML, les balises XHTML (sans balises de fermeture) doivent se terminer par une barre oblique avant le crochet de fermeture.
12 Enregistrez votre page.
Pour ajouter un attribut à une balise existante :
1 Placez le point d’insertion juste après la valeur finale de l’attribut de la balise, puis appuyez sur
la barre d’espace. Une liste d’attributs s’affiche.
2 Ajoutez un attribut et indiquez sa valeur, le cas échéant.

Vérification des modifications apportées

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 le bouton Afficher le mode Création (intitulé Création) ou sur le bouton Afficher
les modes Code et Création (intitulé Fractionner), dans la barre d’outils du document.
Affichez un aperçu de la page dans un navigateur Web en appuyant sur la touche F12. Pour
fermer le navigateur et revenir au code, appuyez sur Alt+F4 (Windows uniquement).
46 Chapitre 4 : Didacticiel : Modification du code

Impression du code

Vous pouvez imprimer le code que vous avez rédigé pour le modifier hors ligne, 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 des options d’impression, puis cliquez sur OK (Windows) ou Imprimer (Macintosh).

Documentation connexe

Pour plus d’informations sur les fonctions abordées dans ce didacticiel, voir l’aide Utilisation de Dreamweaver.
Documentation connexe 47
48 Chapitre 4 : Didacticiel : Modification du code
CHAPITRE 5

Didacticiel : Lien et aperçu de pages

Ce didacticiel vous indique comment ajouter des liens, des images survolées et une barre de navigation à une page dans Macromedia Dreamweaver MX 2004, ainsi que comment afficher les pages dans un navigateur et les publier sur un site Web.
Si vous avez déjà défini votre site et que vous avez terminé les didacticiels précédents, Didacticiel :
Création d’une page statique, page 27 et Didacticiel : Modification du code, page 39, vous pouvez
poursuivre votre travail dans le même dossier avec les mêmes fichiers.
Vous pouvez toutefois suivre ce didacticiel sans avoir terminé les autres. Tout d’abord, configurez votre site en suivant les instructions de Configuration rapide de site, page 17. Utilisez ensuite les fichiers contenus dans le dossier 3-Link pour terminer ce didacticiel. Le dossier 3-Link contient les fichiers tels qu’ils doivent être une fois les précédents didacticiels terminés.
Si vous êtes passé en présentation pour espace de travail Codeur (Windows uniquement) pour un didacticiel, mais que vous préférez utiliser la présentation pour Designer, utilisez la boîte de dialogue Préférences (Edition > Préférences) pour modifier à nouveau l’espace de travail avant de commencer le didacticiel.
Ce didacticiel contient les leçons suivantes :
Création d’une seconde page, page 50
Ajout de liens texte entre des pages, page 51
Création d’une barre de navigation, page 52
Copie de la barre de navigation, page 55
Aperçu des pages dans un navigateur, page 55
Configuration d’un site distant et publication, page 56
Documentation connexe, page 56
49

Création d’une seconde page

Dans cette leçon, vous allez créer une seconde page pour votre site ; vous créerez par la suite des liens pour relier ces pages.
Vous pouvez créer une seconde page de plusieurs façons. Dans cette leçon, vous allez créer une seconde page en effectuant une copie de la première, pour qu’elles aient une mise en forme identique.
Remarque : Si vous souhaitez créer une mise en forme pour la seconde page, utilisez les mises en page prédéfinies contenues dans Dreamweaver ou les outils de conception de calque ou de modification de tableau de Dreamweaver. Notez cependant que ces fonctions ne sont pas traitées dans cette leçon. Pour plus d’informations sur ces points, voir l’aide Utilisation de Dreamweaver.
Pour générer un site plus complexe, il est recommandé d’utiliser un modèle pour vous assurer que toutes les pages présentent une mise en forme identique. Pour plus d’informations sur les calques, les balises cadres et les modèles, voir l’aide Utilisation de Dreamweaver.
La seconde page du site Trio Motors est la page d’actualité. Vous allez créer cette page en effectuant une copie de la page principale (index.html), puis en remplaçant le contenu par celui de votre choix.
Pour plus d’informations sur l’ajout et le formatage de texte, voir Ajout de texte formaté, page 31.
Pour créer une copie de votre première page (index.html) :
1 Dans le panneau Fichiers, sélectionnez le fichier index.html. 2 Dans le menu Options du panneau Fichiers, sélectionnez Edition > Dupliquer.
div, la mise en forme CSS, la modification de tableaux, le mode Mise en forme, les
Une copie du fichier est générée.
Conseil : Si elle n’apparaît pas immédiatement, cliquez sur le bouton Actualiser du panneau Fichiers.
3 Sélectionnez le nouveau fichier dupliqué. Cliquez dessus pour pouvoir en modifier le nom (il
s’agit de la méthode utilisée dans l’Explorateur Windows et le Sélecteur Macintosh).
4 Attribuez au fichier un nom du type news.html.
Pour supprimer les éléments indésirables de la nouvelle page :
1 Ouvrez la nouvelle page news.html en double-cliquant dessus dans le panneau Fichiers.
Dans la barre de titre de la fenêtre du document, vérifiez qu’il s’agit bien du fichier news.html. La barre de titre doit indiquer « Page d’accueil de Trio Motors » suivi d’un nom de dossier et de fichier ; le nom de fichier doit être news.html (ou le nom attribué au cours de l’étape précédente).
2 Dans la page news.html, sélectionnez l’image représentant une voiture dans la colonne de texte
principale, puis appuyez sur Retour arrière (Windows) ou Arrière (Macintosh). L’image est supprimée.
3 Cliquez trois fois sur l’en-tête de la colonne de texte principale (par exemple, l’en-tête
« Lancement en ligne de ZX2002 ») pour la sélectionner. Entrez ensuite une nouvelle en-tête comme « Actualités ».
4 Dans le panneau Fichiers, recherchez le fichier newsItem.txt du dossier Assets. Double-cliquez
sur l’icône du fichier pour l’ouvrir dans Dreamweaver. Ce fichier regroupe le contenu à ajouter à la colonne principale de la page d’actualité.
50 Chapitre 5 : Didacticiel : Lien et aperçu de pages
5 Dans la fenêtre du document newsItem.txt, sélectionnez Edition > Sélectionner tout pour
sélectionner l’ensemble du contenu du fichier.
6 Appuyez sur Ctrl+C (Windows) ou Commande+C (Macintosh) pour copier le texte. 7 Fermez la fenêtre du document newsItem.txt 8 Retournez à la fenêtre de document news.html. Cliquez trois fois sur le corps du texte figurant
à gauche dans la colonne principale.
9 Appuyez sur Ctrl+V (Windows) ou sur Commande+V (Macintosh) pour coller le nouveau
texte.
10 Cliquez devant le mot « Example » (en mode Création) et appuyez sur Entrée (Windows) ou
Retour (Macintosh) pour que l’exemple débute un nouveau paragraphe.
11 Cliquez devant « Home Page » (en mode Création) et appuyez sur Entrée (Windows) ou Retour
(Macintosh) pour que ce groupe de mots débute un nouveau paragraphe.
12 Enregistrez votre page.

Ajout de liens texte entre des pages

Vous pouvez créer des liens à tout moment du processus de création d’un site. Si vous suivez les didacticiels de ce guide dans l’ordre, vous avez déjà créé vos pages et y avez inséré un contenu. Dans cette leçon, vous allez créer des liens entre les pages que vous avez créées.
Il existe deux autres approches pour créer des liens pour un site :
Dans un premier temps, créez un ensemble de pages, puis ajoutez des liens entre elles et enfin
insérez-y un contenu.
Au fur et à mesure que vous créez une page, spécifiez des liens vers des pages qui n’existent pas
encore ; ensuite, créez des pages associées aux noms de fichiers vers lesquels des liens sont établis.
Pour créer un lien depuis la page d’actualité vers le fichier index.html :
1 Activez la page d’actualité, si ce n’est déjà fait. Si la page n’est pas ouverte, ouvrez-la en double-
cliquant sur l’icône correspondante dans le panneau Fichiers.
2 Dans la partie inférieure de la colonne de texte se trouvant à gauche, sélectionnez les mots Page
d’accueil. Si vous n’avez pas inséré de texte dans la colonne gauche de la page d’actualité lors de sa
création, saisissez les mots Page d’accueil dans cette colonne et sélectionnez-les.
3 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. Recherchez le fichier index.html qui se trouve dans le même dossier que le fichier news.html, puis cliquez sur OK (Windows) ou Choisir (Macintosh) pour créer un lien vers ce fichier.
Le texte « Page d’accueil » est souligné et s’affiche en bleu, ce qui indique qu’il s’agit désormais d’un lien.
Remarque : Les liens ne fonctionnent pas lorsque vous cliquez dessus dans la fenêtre du 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 plus d’informations sur les aperçus, voir Aperçu des pages dans un navigateur, page 55.
4 Enregistrez votre page.
Ajout de liens texte entre des pages 51

Création d’une barre de navigation

Une image survolée semble changer d’aspect lorsqu’un visiteur place le pointeur sur cette dernière. Par exemple, le visiteur aura l’impression qu’un bouton s’allume lorsqu’il le survole avec le pointeur. Dreamweaver vous propose de créer facilement une barre de navigation constituée d’un ensemble d’images survolées.
Une image avec effet de survol se compose de deux images : la première s’affiche lors du chargement de la page dans le navigateur, la deuxième apparaît quand le visiteur fait passer le pointeur de la souris au-dessus de l’image initiale.
Une barre de navigation vous permet de spécifier jusqu’à quatre images pour chaque bouton : les deux images de base d’une image survolée, plus d’autres qui indiquent qu’un bouton de navigation est déjà actif sur une page donnée. Cette leçon ne présente toutefois que la création de barres de navigation qui n’utilisent que deux images survolées par bouton.
Remarque : Lorsque vous créez une image survolée ou une barre de navigation, assurez-vous que les différentes images servant à créer un bouton ont une hauteur et une largeur identiques (en pixels).
Dans certains navigateurs, les boutons de barre de navigation qui ne sont pas situés dans un tableau peuvent s’afficher dans une nouvelle ligne si le visiteur réduit trop la largeur de sa fenêtre de navigateur. Pour éviter ce désagrément, ajoutez un style CSS à la balise navigation.
Pour créer une barre de navigation :
1 Activez la page principale (index.html) si ce n’est pas déjà fait. Si la page n’est pas ouverte,
ouvrez-la en double-cliquant sur l’icône correspondante dans le panneau Fichiers.
2 Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous voulez insérer la
barre de navigation. Par exemple, sur la page principale de Trio Motors, placez la barre de navigation juste sous la bannière en haut de la page. Sélectionnez donc cette image, puis sélectionnez la balise
<div.logo> dans le sélecteur de balises en bas de la fenêtre du document.
Appuyez maintenant sur la touche fléchée gauche pour vous assurer que le point d’insertion se trouve en dehors de la balise
3 Choisissez Insertion > Objets mise en forme > Balise Div. Dans la boîte de dialogue Insérer la
balise Div, entrez
navbar dans la zone de texte Classe, puis cliquez sur OK. Appuyez ensuite sur
div qui contient l’image de la bannière.
Retour arrière (Windows) ou Arrière (Macintosh) pour supprimer le texte de l’espace réservé qui s’affiche.
4 Sélectionnez Insertion > Objets Image > Barre de navigation.
div liée à la barre de
52 Chapitre 5 : Didacticiel : Lien et aperçu de pages
5 La boîte de dialogue Insérer une barre de navigation apparaît.
6 Dans le champ Nom d'élément, tapez un nom pour le bouton (par exemple,
showroom_button). Le bouton est ainsi affecté d’un nom unique et est facilement identifiable dans le code HTML.
7 Cliquez sur le bouton Parcourir situé à côté de la zone de texte Image Haut ; recherchez ensuite
le fichier btnShowroom.jpg dans le fichier regroupant les images de votre site (dans le dossier Assets). Veillez à ce que l’option du menu déroulant Relatif à ait la valeur Document, puis cliquez sur OK ou Sélectionner (Windows) ou Choisir (Macintosh).
Le chemin de l’image s’affiche dans le champ Image Haut : Assets/images/btnShowroom.jpg.
Remarque : Si le chemin indiqué est plus long, vous avez probablement sélectionné un fichier image dans un autre dossier ou vous avez choisi autre chose que Document dans le menu contextuel Relatif à. Cliquez sur le bouton Parcourir et essayez à nouveau.
Le champ Image Haut indique l’image à afficher lorsque le bouton est en état « Haut », soit tel qu’il apparaît lors de l’affichage initial de la page.
8 Cliquez sur le bouton Parcourir situé à côté de la zone de texte Image Dessus ; recherchez
ensuite le fichier btnShowroom_on.jpg dans le fichier regroupant les images de votre site. Veillez à ce que l’option du menu déroulant Relatif à ait la valeur Document, puis cliquez sur OK ou Sélectionner (Windows) ou Choisir (Macintosh).
La zone de texte Image Dessus identifie l’image devant s’afficher lorsque le pointeur survole l’image dans le navigateur.
9 Laissez les zones de texte Image Abaissée et Image Au-dessus lorsque Abaissée vides.
10 Tapez Salle d’exposition dans la zone de texte Autre texte. 11 Dans la zone de texte Si cliqué, aller à l’URL, tapez showroom.html.
Une fois cette opération effectuée, l’image survolée est reliée à la page showroom.html. Cette page n’existe pas encore ; si vous deviez créer l’intégralité du site Trio Motors, vous devriez la créer.
Création d’une barre de navigation 53
12 Vérifiez que l’option Précharger les images est activée ; les images survolées sont ainsi chargées
en même temps que la page dans le navigateur, assurant une transition rapide entre les images lorsqu’un utilisateur place le pointeur au-dessus de l’image originale.
13 Désélectionnez l’option Montrer « Image Abaissée » initialement. 14 Cliquez sur le bouton Plus (+) en haut de la page pour ajouter un autre bouton à la barre de
navigation. Répétez les étapes 6 à 13 ; entrez news_button comme nom d’élément, btnNews.jpg pour Image Haut, btnNews_on.jpg pour Image Dessus, Actualités pour Autre texte et news.html pour l’URL.
15 Cliquez à nouveau sur le bouton Plus (+) en haut de la page pour ajouter un autre bouton à la
barre de navigation. Répétez les étapes 6 à 13 ; entrez owners_button comme nom d’élément, btnOwners.jpg pour Image Haut, btnOwners_on.jpg pour Image Dessus, Propriétaires pour Autre texte et owners.html pour l’URL.
16 Cliquez à nouveau sur le bouton Plus (+) en haut de la page pour ajouter un autre bouton à la
barre de navigation. Répétez les étapes 6 à 13 ; entrez services_button comme nom d’élément, btnServices.jpg pour Image Haut, btnServices_on.jpg pour Image Dessus, Services pour Autre texte et services.html pour l’URL.
17 Dans le menu contextuel Insérer, en bas de la boîte de dialogue, assurez-vous que Horizontal est
sélectionné.
18 Désélectionnez l’option Utiliser tableaux. 19 Cliquez sur OK pour fermer la boîte de dialogue et créer la barre de navigation.
Les images définies comme Image Haut s’affichent dans le document.
20 Enregistrez votre page.
Pour vous assurer que les boutons resteront sur une seule ligne :
1 Sélectionnez une des images de la barre de navigation dans la fenêtre du document. 2 Dans le sélecteur de balises, cliquez sur la balise <div.navbar>. 3 Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Nouveau style CSS. 4 Dans les options Type de sélecteur, sélectionnez Classe, puis entrez .navbar dans la zone de texte
Nom. Vérifiez que vous avez inclus le point précédant le mot.
5 Sous Définir dans, sélectionnez Seulement ce document. 6 Cliquez sur OK. 7 Dans la boîte de dialogue Définition du style CSS, sélectionnez la catégorie Bloc. 8 Dans le menu contextuel Espace blanc, sélectionnez nowrap (pas de retour). 9 Cliquez sur OK pour définir le style et fermer la boîte de dialogue.
Remarque : Les images survolées et les barres de navigation ne sont pas modifiées lorsque vous les survolez dans la fenêtre du document dans Dreamweaver ; elles ne changent d’aspect que dans un navigateur. Pour vous assurer que votre barre de navigation fonctionne correctement, vous devez afficher votre page dans un navigateur. Pour plus d’informations sur les aperçus, voir Aperçu des
pages dans un navigateur, page 55.
54 Chapitre 5 : Didacticiel : Lien et aperçu de pages

Copie de la barre de navigation

Maintenant que vous avez créé une barre de navigation qui fonctionne, vous pouvez la réutiliser dans toutes vos pages. Dans cette leçon, vous allez copier les images de la barre de navigation et les coller dans la seconde page.
Vous pouvez réutiliser un contenu de plusieurs façons dans Dreamweaver ; il peut s’agir d’éléments de bibliothèque, de modèles et de fragments de code. Pour plus d’informations sur ces rubriques, voir l’aide Utilisation de Dreamweaver.
Pour copier la barre de navigation dans une autre page :
1 Dans le fichier index.html, sélectionnez l’image survolée Salle d’exposition. 2 Dans le sélecteur de balises, cliquez sur la balise <div#row1>.
La balise
div contenant le logo et les images survolées de la barre de navigation est
sélectionnée.
3 Sélectionnez Edition > Copier. 4 Passez au fichier news.html. 5 Sélectionnez l’image représentant la bannière dans la partie supérieure de la page. 6 Dans le sélecteur de balises, cliquez sur la balise <div#row1>. 7 Sélectionnez Edition > Coller.
Les images survolées de la barre de navigation sont collées dans le fichier, ainsi que le code permettant la prise en charge du comportement de survol.
8 Enregistrez la page news.html.

Aperçu des pages dans un navigateur

La page que vous affichez en mode Création est presque semblable à celle qui apparaît dans le navigateur, mais pour vous en assurer, il convient de la prévisualiser dans un navigateur. Chaque version de chaque navigateur a ses propres caractéristiques ; Dreamweaver s’efforce de produire des fichiers HTML qui auront un aspect identique dans tous les navigateurs, mais il est parfois impossible d’éviter certaines différences. Par conséquent, Dreamweaver n’affiche pas directement d’aperçu dans une fenêtre de document ; Dreamweaver ne peut pas simuler les divers comportements de tous les navigateurs.
La commande Aperçu dans le navigateur présente un aperçu des pages publiées.
Pour afficher un aperçu de vos pages :
1 Activez le fichier index.html, le cas échéant. S’il n’est pas ouvert, ouvrez-le. 2 Appuyez sur la touche F12.
Votre navigateur principal est lancé s’il n’est pas déjà actif. Il affiche la page d’index.
Remarque : 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 des pages dans un navigateur 55
3 Si vous avez ajouté une barre de navigation dans votre page, positionnez le pointeur sur les
images survolées pour observer les modifications. Cliquez sur le bouton Actualités pour vous assurer de son bon fonctionnement.
Remarque : Les autres boutons de la barre de navigation de Trio Motors sont liés à des pages qui n’existent pas.
4 Retournez dans Dreamweaver pour effectuer les modifications nécessaires avant de télécharger
les pages vers votre site distant.

Configuration d’un site distant et publication

Vous avez créé un site Web de petite taille mais néanmoins fonctionnel. L’étape suivante consiste à le publier en téléchargeant les fichiers vers un serveur Web distant.
Pour publier vos pages, suivez la procédure présentée dans Définition d’un dossier distant, page 24 et dans Téléchargez vos fichiers locaux, page 26.

Documentation connexe

Pour plus d’informations sur les fonctions abordées dans ce didacticiel, voir l’aide Utilisation de Dreamweaver.
56 Chapitre 5 : Didacticiel : Lien et aperçu de pages
CHAPITRE 6

Description des applications Web

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 :
A propos des applications Web, page 57
Fonctionnement d’une application Web, page 59
Création de pages dynamiques, page 65
Choix d’une technologie de serveur, page 66
Terminologie du développement d’applications Web, page 67

A propos des applications Web

Une application Web est un site Web qui contient des pages et dont le contenu est partiellement ou totalement 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 donne un exemple simple.

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).
57
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 courriel 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 et créer des rapportsWeb pour l’analyse. Les exemples incluent des pages de banques en ligne, de contrôle des stocks, 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).

Exemple d’application Web

Claude, professionnel de la création Web, utilise Macromedia Dreamweaver MX depuis de nombreuses années. Il est chargé de la maintenance des sites intranet et Internet d’une entreprise de taille moyenne comptant 1 000 employés. Julie, 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 à pied, à vélo ou en courant. Tous les mois, chaque employé doit communiquer à Julie le nombre total de kilomètres parcourus par courriel. A la fin du mois, Julie 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 Julie est submergée de courriels à chaque fin de mois. Julie demande à Claude s’il existe une solution Web.
Claude 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 à Julie d’accéder au total des points en un seul clic à chaque fin de mois
Claude met rapidement en place l’application à l’aide de Dreamweaver MX 2004, logiciel doté des outils nécessaires à la création rapide et facile de ce type d’applications.
58 Chapitre 6 : Description des applications Web

Fonctionnement d’une application Web

Une application Web est un ensemble de pages statiques et dynamiques. Une page statique n’e s t 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 de 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 sollicite. Exemple :
<html>
<head>
<title>Informations relatives à Trio Motors</title> </head> <body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est un grand constructeur automobile.</p> </body>
</html>
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.
Fonctionnement d’une application Web 59
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 sollicite une page statique.
Etape 2 ­Le serveur Web localise la page.
Demande Réponse
Navigateur Web
Serveur Web
<HTML
>
<
p
>
H
i
</HTML
>
Etape 3 - Le serveur Web envoie la page au navigateur requérant.
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.
60 Chapitre 6 : Description des applications Web

Traitement des pages dynamiques

Lorsqu’un serveur Web reçoit une requête de page Web statique, il transmet simplement cette page au navigateur requérant. En revanche, lorsque le serveur Web reçoit une requête de page dynamique, il réagit de manière différente : il transmet cette page à une extension logicielle spéciale chargée d’achever la page. Ce logiciel spécial est appelé 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 requérant. 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 sollicite une page dynamique.
Etape 2 ­Le serveur Web localise 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.
Demande
<HTML
<
code
</
Navigateur Web
Serveur Web
>
>
HTML>
Serveur d'application
Réponse
<HTML <
p
>
H
i
</HTML
Etape 5 - Le serveur Web envoie la page achevée au navigateur requérant.
>
>
Etape 4 - Le serveur d’application transmet la page achevée au serveur Web.

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 l’annexe Guide du débutant en base de données de l’aide 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 côté serveur de la page.
Fonctionnement d’une application Web 61
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 dans BBEdit est indéchiffrable. Le pilote de base de données constitue l’unique moyen de communication entre le serveur d’application et la base de données : ce logiciel agit comme un 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 et les données sont utilisées pour compléter la page dynamique.
Voici un exemple simple de requête de base de données rédigée en SQL :
SELECT lastname, firstname, fitpoints FROM employees
62 Chapitre 6 : Description des applications Web
Cette instruction crée un jeu d’enregistrements à trois colonnes et le remplit de lignes comportant le nom, le prénom et les points de mise en forme de tous les employés de la base de données. Pour plus d’informations, voir l’annexe Initiation à SQL de l’aide Utilisation de Dreamweaver.
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 sollicite une page dynamique.
Etape 2 ­Le serveur Web localise la page et la transmet au serveur d’application.
Etape 3 - Le serveur Web 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.
Navigateur Web
Demande
Serveur Web
<HTML
>
<
code
>
</
HTML>
Serveur d'application
Requête
Pilote de base de données
Réponse
<HTML
>
<
p
>
H
i
</HTML
>
Jeu d'enregistrement
Etape 9 - Le serveur Web envoie la page achevée au navigateur requérant.
Etape 8 - Le serveur d’application insère les données dans la page, puis transmet la page au serveur Web.
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
A partir du moment où les pilotes de base de données requis sont installés sur le serveur, vous pouvez utiliser pratiquement toutes les bases de données avec votre application Web.
Fonctionnement d’une application Web 63
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.
64 Chapitre 6 : Description des applications Web

Création de pages dynamiques

La création d’une page dynamique consiste à écrire d’abord le code HTML, puis à ajouter les scripts et 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 de base ci-dessous utilise le code CFML (ColdFusion Markup Language) :
<html>
<head>
<title>Informations relatives à Trio Motors</title> </head> <body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est un grand constructeur automobile.</p>
<!--- embedded instructions start here --->
<cfset department="Ventes">
</cfoutput>
<p>Pensez à visiter la page #department#.</p>
</cfoutput>
<!--- embedded instructions end here ---> </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 « Ventes » à cette
variable.
2 Insertion de la valeur de la variable, « Ventes », dans le code HTML.
Le serveur d’application renvoie la page suivante au serveur Web :
<html>
<head>
<title>Informations relatives à Trio Motors</title> </head> <body>
<h1>A propos de Trio Motors</h1>
<p>Trio Motors est un grand constructeur automobile.</p>
<p>Pensez à visiter la page Ventes.</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 un grand constructeur automobile. Pensez à visiter la page Ventes.
Création de pages dynamiques 65
Le langage de script ou de balise à utiliser dépend de la technologie de serveur disponible sur votre serveur. Les langages les plus employés pour les cinq technologies de serveur prises en charge par Dreamweaver MX 2004 sont :
Technologie de serveur Langage
ColdFusion CFML (ColdFusion Markup Language)
ASP.NET Visual Basic
C#
Pages ASP (Active Server Pages) VBScript
JavaScript
JSP (JavaServer Pages) Java
PHP PHP
Pour plus d’informations, voir Choix d’une technologie de serveur, page 66.
Dreamweaver peut créer les scripts ou les balises côté serveur nécessaires au fonctionnement de vos pages, mais vous pouvez aussi les rédiger manuellement dans l’environnement de codage de Dreamweaver.

Choix d’une technologie de serveur

Vous pouvez utiliser Dreamweaver pour créer des applications Web à l’aide de cinq technologies de serveur : ColdFusion, ASP.NET, ASP, JSP ou PHP. Chacune de ces technologies correspond à un type de document dans Dreamweaver. Le choix de l’une de 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. Dreamweaver prend également en charge d’autres technologies de serveur, telles que JSP, PHP, ASP ou ASP.NET.
Le choix de la technologie de serveur dépend également du serveur d’application que vous souhaitez utiliser pour votre 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 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. Faites appel à PHP si vous avez accès à un serveur Web avec un serveur d’application PHP ; JSP peut également convenir si vous pouvez accéder à un serveur Web avec un serveur d’application JSP, tel que Macromedia JRun.
Vous trouverez une version de ColdFusion MX 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/fr/software/coldfusion/.
Pour plus d’informations, voir Installation d’un serveur d’application de l’aide Utilisation de Dreamweaver.
Pour en savoir plus sur ColdFusion, voir Utilisation de ColdFusion (disponible via le menu Aide de Dreamweaver) ou visitez le site Web de Macromedia à l’adresse suivante :
www.macromedia.com/fr/software/coldfusion/.
66 Chapitre 6 : Description des applications Web
Pour en savoir plus sur ASP.NET, visitez le site Web Microsoft à l’adresse suivante : www.asp.net/ (en anglais).
Pour en savoir plus sur ASP, visitez le site Web Microsoft à l’adresse suivante :
msdn.microsoft.com/library/psdk/iisref/aspguide.htm (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.
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 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, voir Fonctionnement d’une application Web,
page 59.
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.
Une base de données 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.
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, Oracle9i 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 et cela
avant que la page ne soit transmise à un navigateur. Pour plus d’informations, voir Fonctionnement
d’une application Web, page 59.
Terminologie du développement d’applications Web 67
Un jeu d’enregistrements est un ensemble de données extraites d’une ou plusieurs tables d’une
base de données, tel qu’illustré ci-dessous :
Number
Table de bases de données
est une base de données contenant plusieurs tables qui partagent des données. La base de
LastName FirstName Position Goals
LastName FirstName Position
Table de jeux d'enregistrements
données suivante est relationnelle car deux tables partagent la colonne DepartmentID.
Une technologie de serveur est une technologie utilisée par un serveur d’application pour
modifier des pages dynamiques lors de l’exécution.
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
Pages JSP (JavaSer ver Pages) de Sun
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
l’envoi de la page à un navigateur. Pour plus d’informations, voir Traitement des pages Web
statiques, page 59.
68 Chapitre 6 : Description des applications Web
Une application Web est un site Web qui contient des pages et dont le contenu est partiellement
ou totalement 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.
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.
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 69
70 Chapitre 6 : Description des applications Web
CHAPITRE 7

Didacticiel : Développement d’une application Web

Dans ce didacticiel, vous allez découvrir comment utiliser Macromedia Dreamweaver MX 2004 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 Trio Motors, à 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 créer les pages dynamiques suivantes :
Une page qui affiche les commentaires déjà présents dans la base de données.
Une page d’insertion qui autorise les visiteurs du site à envoyer des commentaires à la société ;
Ce didacticiel comprend les leçons suivantes :
Avant de commencer, page 72
Ouverture d’un document de travail, page 73
Définition d’un jeu d’enregistrements, page 74
Affichage des enregistrements de la base de données, page 77
Ajout de champs dynamiques au tableau, page 78
Définition d’une région répétée, page 79
Affichage des pages, page 80
Création d’un formulaire d’insertion d’enregistrement, page 80
Copie des fichiers sur le serveur, page 84
Documentation connexe, page 84
71

Avant de commencer

Les chapitres de configuration ajoutés à la fin du guide Bien démarrer avec Dreamweaver décrivent les étapes permettant de configurer l’environnement de travail Dreamweaver dans lequel vous allez créer des pages dynamiques.
Reportez-vous au guide de configuration de votre serveur d’application. Si vous ne savez pas quel serveur d’application utiliser, contactez votre administrateur système.
Chapitre 9, Configuration d’un exemple de site ColdFusion, page 93
Chapitre 10, Configuration d’un exemple de site ASP.NET, page 103
Chapitre 11, Configuration d’un exemple de site ASP, page 113
Chapitre 12, Configuration d’un exemple de site JSP, page 125
Chapitre 13, Configuration d’un exemple de site PHP, page 137
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 MX 2004.
72 Chapitre 7 : Didacticiel : Développement d’une application Web

Ouverture d’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 Trio Motors 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 72.
3 Dans le panneau Fichiers, double-cliquez sur le fichier comments-view pour l’ouvrir.
Le document s’ouvre dans la fenêtre de document.
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.
Ouverture d’un document de travail 73

Définition d’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 MX 2004 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 Trio.
Remarque : Avant de terminer cette procédure, vous devez établir une connexion avec la base de données. Pour plus d’informations, voir Avant de commencer, page 72.
1 Dans Dreamweaver, dans le document comment-view, placez le point d’insertion là où les
données doivent être affichées.
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 :
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. Si cette boîte de dialogue semble plus complexe que celle de l’illustration ci-après, cliquez sur le bouton Simple.
74 Chapitre 7 : Didacticiel : Développement d’une application Web
3 Dans la zone de texte Nom, tapez rs_Comments. 4 Dans le menu déroulant Source de données (ColdFusion) ou Connexion (autres types de pages
de serveur), choisissez connTrio. 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 Tableau (COMMENTS est déjà
sélectionné).
7 Dans Colonnes, vérifiez que Toutes est activé afin de sélectionner l’ensemble des colonnes du
tableau.
8 Assurez-vous que Aucun est activé dans le menu contextuel Filtre, afin de sélectionner toutes les
rangées.
9 Dans le premier menu déroulant Trier, choisissez LAST_NAME puis, dans le second menu
déroulant, choisissez Croissant.
Définition d’un jeu d’enregistrements 75
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. 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.
76 Chapitre 7 : Didacticiel : Développement d’une application Web
Conseil : 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.

Affichage des enregistrements de la base de données

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 comments-view, 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-le glisser vers le document.
Choisissez Insertion > Tableau.
La boîte de dialogue Insérer un tableau s’affiche.
3 Dans la boîte de dialogue, définissez les options suivantes :
Dans le champ Ligne, tapez 2.
Dans le champ Colonnes, tapez 4.
Dans le champ Largeur du tableau, entrez 60 et sélectionnez Pourcentage dans le menu
contextuel.
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.
Affichage des enregistrements de la base de données 77
Une fois les champs de la boîte de dialogue renseignés, elle doit ressembler à la suivante :
4 Cliquez sur OK.
Le tableau est inséré dans le document.
5 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 Address.
Dans la dernière cellule, tapez Comments.
6 Enregistrez votre page (Fichier > Enregistrer).

Ajout de champs dynamiques au tableau

Vous pouvez maintenant ajouter les champs du jeu d’enregistrements au tableau.
1 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.
2 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.
78 Chapitre 7 : Didacticiel : Développement d’une application Web
3 Reprenez l’étape 2 pour ajouter les champs LAST_NAME, EMAIL et COMMENTS (et non
COMMENT_ID) au tableau. Votre tableau devrait être similaire à celui-ci. Vous devrez peut-être élargir votre fenêtre du
document pour l’afficher en entier.
4 Enregistrez votre page.

Définition d’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 région 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 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 balise <tr>.
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.
2 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.
Définition d’une région répétée 79

Affichage des pages

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 comments-view 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.
Sélectionnez Affichage > Live Data.
La page est mise à jour afin d’afficher les données extraites de la base de données.

Création d’un formulaire d’insertion d’enregistrement

La prochaine page à créer pour le site Web Trio Motors permet aux utilisateurs d’ajouter des commentaires dans la base de données.
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 comments-add, puis double-cliquez sur le fichier
pour l’ouvrir. Le document s’ouvre dans la fenêtre de document.
2 Placez le point d’insertion dans le document à la fin du paragraphe de texte dans la colonne
principale, après le mot « possible », puis appuyez sur Entrée ou Retour pour définir l’endroit où l’objet d’application sera inséré.
80 Chapitre 7 : Didacticiel : Développement d’une application Web
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 connTrio. 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 Table, assurez-vous que COMMENTS est sélectionné. 7 Cliquez sur le bouton Parcourir en regard de la zone Après l’insertion, aller à ou (pour
ASP.NET) la zone En cas de réussite, aller à.
8 Dans la boîte de dialogue qui s’affiche, sélectionnez le fichier comments-view, puis cliquez sur
OK pour fermer la boîte de dialogue. Lorsque le visiteur aura entré un commentaire, la page présentant tous les commentaires
s’affichera. Dans une application Web plus importante, une page remerciant le visiteur pour son commentaire et lui précisant que vous lui répondrez prochainement peut s’afficher.
9 La procédure de l’assistant sera complétée dans la section suivante.
Création d’un formulaire d’insertion d’enregistrement 81

Création du 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 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 (-).
2 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.
3 Dans la liste Champs du formulaire, sélectionnez FIRST_NAME pour spécifier la façon dont
le champ s’affichera dans le formulaire.
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 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.
6 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 :
82 Chapitre 7 : Didacticiel : Développement d’une application Web
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.
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 le champ Etiquette, saisissez Comments. 11 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 déroulant 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 déroulant Afficher en tant que, puis dans le menu déroulant 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. L’objet d’application Formulaire d’insertion d’enregistrement est inséré dans le document.
13 Enregistrez votre page.
Création d’un formulaire d’insertion d’enregistrement 83

Copie des 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, sélectionnez comments-add et cliquez sur l’icône représentant une
flèche bleue (Placer les fichiers) pour télécharger le fichier local dans votre serveur.
2 Lorsque Dreamweaver vous invite à copier les fichiers dépendants sur le serveur, sélectionnez
Oui.
Remarque : Sur certains modèles, Dreamweaver crée un dossier Connections 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 Connections, puis cliquez sur le bouton Placer le(s) fichier(s) pour copier le dossier sur votre serveur.
3 Lorsque comments-add 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. Les informations sont mises à jour dans la base de données et la page comments-view apparaît.
Affichage de la mise à jour
Pour afficher les modifications apportées à la base de données, ouvrez le document comments­view créé dans la première partie de cette leçon ou ouvrez la base de données pour constater les modifications.
Dans Dreamweaver, dans le panneau Fichiers, double-cliquez sur comments-view, puis
sélectionnez Fichier > Aperçu dans le navigateur et sélectionnez un navigateur. L’enregistrement que vous avez saisi apparaît dans la liste Customer Comments.
Dans Dreamweaver, dans le panneau Base de données (Fenêtre > Base de données), localisez
l’icône de la base de données connTrio, cliquez sur le bouton plus (+) placé devant Tables pour afficher la liste des tables de la base de données. Cliquez avec le bouton droit (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh), puis choisissez la table COMMENTS et sélectionnez Afficher les données.
La liste des enregistrements de la base de données apparaît. Le commentaire que vous venez de saisir est la dernière entrée de la table.

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 la création d’un site Web statique de base dans Dreamweaver, voir
Chapitre 3, Didacticiel : Création d’une page statique, page 27. Pour plus d’informations sur
l’utilisation des fonctions de codage de Dreamweaver, voir Chapitre 4, Didacticiel : Modification
du code, page 39.
84 Chapitre 7 : Didacticiel : Développement d’une application Web
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
Documentation connexe 85
86 Chapitre 7 : Didacticiel : Développement d’une application Web
CHAPITRE 8

Installation d’un serveur Web

Pour développer et tester des pages Web dynamiques, vous avez besoin d’un serveur Web opérationnel. Ce chapitre décrit la façon dont la majorité des utilisateurs Windows peuvent installer et utiliser un serveur Web Microsoft sur leur 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, voir
Chapitre 9, Configuration d’un exemple de site ColdFusion, page 93
Si vous travaillez sous Macintosh, vous pouvez utiliser un serveur Web sur un ordinateur réseau ou un serveur 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 :
Bien démarrer, page 88
Installation de Personal Web Server, page 88
Installation d’Internet Information Server, page 89
Tes te r PW S o u II S, page 89
Test du serveur Web Macintosh (développeurs PHP), page 90
Fonctions élémentaires du serveur Web, page 90
Remarque : Macromedia ne fournit pas de support 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.
87

Bien démarrer

Si vous êtes un utilisateur Windows, vous pouvez installer et exécuter les serveurs Web suivants sur votre ordinateur : Microsoft Personal Web Server (PWS) ou Internet Information Server (IIS), une version complète de PWS. Vous pouvez également installer le serveur Web sur un ordinateur Windows en réseau de façon à ce que d’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. Pour plus d’informations, voir Chapitre 9, Configuration d’un exemple de site
ColdFusion, page 93
PWS ou IIS sont peut-être déjà installés sur votre ordinateur. Parcourez votre arborescence pour vérifier si elle comporte un dossier C:\Inetpub ou D:\Inetpub. PWS et IIS créent ces dossiers lors de l’installation.
Si aucun de ces dossiers n’existe, procédez de la manière suivante :
Windows 98 Copiez le fichier d’installation PWS du CD-ROM Windows 98 sur votre disque
dur. Ce fichier se trouve dans le dossier Add-Ons/PWS. Installez ensuite le serveur Web. Pour obtenir des instructions, voir Installation de Personal Web Server, page 88.
Windows 2000 Installez IIS. Pour plus d’informations, voir Installation d’Internet Information
Server, page 89.
Windows XP Professionnel Installez IIS. Pour plus d’informations, voir Installation d’Internet
Information Server, page 89.
Si vous travaillez sous Macintosh et que vous souhaitez développer des applications PHP, vous pouvez utiliser le serveur Web Apache déjà installé sur votre Macintosh. Pour plus d’informations, voir Test du serveur Web Macintosh (développeurs PHP), page 90.

Installation de Personal Web Server

Les utilisateurs de Windows 98 doivent installer PWS. Si vous utilisez Windows 2000 ou Windows XP Professionnel, installez IIS à la place. Pour plus d’informations, voir Installation
d’Internet Information Server, page 89.
Vous pouvez installer PWS sur le même système Windows 98 qui exécute Macromedia Dreamweaver MX 2004. Assurez-vous que le système dispose de Microsoft Internet Explorer 4.01 ou d’une version ultérieure, sinon vous ne pourrez pas installer PWS.
Pour installer PWS :
1 Double-cliquez sur le fichier d’installation de PWS du CD-ROM de Windows 98. 2 Suivez les instructions de l’assistant d’installation. 3 Lorsque celui-ci vous demande quel est votre répertoire personnel de publication Web par
défaut, acceptez le répertoire par défaut : C:\Inetpub\wwwroot
4 Cliquez sur Terminer pour achever le processus d’installation.
Vous pouvez tester le serveur Web après l’avoir installé. Pour plus d’informations, voir Tes t e r P W S
ou IIS, page 89.
88 Chapitre 8 : Installation d’un serveur Web

Installation d’Internet Information Server

Les utilisateurs de Windows 2000 et Windows XP Professionnel doivent installer IIS (Internet Information Server). Si vous travaillez sous Windows 98, installez PWS à la place. Pour plus d’informations, voir Installation de Personal Web Server, page 88.
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 :
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 Sélectionnez Ajouter/Supprimer des composants Windows. 3 Sélectionnez Services Internet (IIS), puis cliquez sur Suivant. 4 Suivez les instructions d’installation.
Vous pouvez tester le serveur Web après l’avoir installé.

Tester PWS ou 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 Web fonctionne.</p>
Ouvrez ensuite une page test dans un navigateur Web avec une requête HTTP. Si PWS ou IIS est exécuté sur votre ordinateur local, entrez l’URL suivante dans votre navigateur Web :
http://localhost/monFichierTest.html
Si PWS ou 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 PWS ou 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 90.
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. Par exemple, pour PWS, double-cliquez sur l’icône du serveur Web de la barre d’état système (l’icône ressemble à une main tenant une page Web). La boîte de dialogue de Personal Web Manager s’affiche. Si le panneau Publication indique que votre publication Web est désactivée, cliquez sur le bouton Démarrer, puis saisissez à nouveau l’URL appropriée dans votre navigateur.
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.
Tester PWS ou IIS 89

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 Web 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, voir Configuration du système (PHP), page 138.

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 serveurWeb 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 nom de 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_de_votre_serveur/nom_de_votre_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 à utiliser des barres obliques et non des barres obliques inversées pour 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 sous-dossier nommé gamelan, de la façon suivante :
C:\Inetput\wwwroot\gamelan\soleil.html
90 Chapitre 8 : Installation d’un serveur Web
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
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 : 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).
Fonctions élémentaires du serveur Web 91
92 Chapitre 8 : Installation d’un serveur Web
CHAPITRE 9

Configuration d’un exemple de site ColdFusion

Macromedia Dreamweaver MX 2004 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, page 93
Configuration du système (ColdFusion), page 94
Définition d’un site Dreamweaver (ColdFusion), page 96
Connexion à l’exemple de base de données (ColdFusion), page 99

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.
Configurez votre système :
1 Installez le serveur d’application ColdFusion (qui inclut 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.
93
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 une source de données ColdFusion dans le programme ColdFusion Administrator. 3 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. Si vous souhaitez utiliser une autre configuration, voir Configuration d’une application Web dans l’aide Utilisation de Dreamweaver.
L’illustration suivante présente les deux configurations décrites dans cette section :
Configuration locale (utilisateurs Windows uniquement)
PC WINDOWS
Dreamweaver MX
PWS ou IIS
Serveur ColdFusion MX
Dossier racine du
site Web dans
c:\Inetpub\wwwroot\
Configuration de serveur distant (utilisateurs Macintosh ou Windows)
PC MAC ou WINDOWS
Dreamweaver MX
Accès réseau ou FTP
SERVEUR WINDOWS
PWS ou IIS
Serveur ColdFusion MX
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.
Remarque : L’installation du serveur d’application est une tâche unique (non répétée).
94 Chapitre 9 : Configuration d’un exemple de site ColdFusion

Installation de ColdFusion MX

Un serveur Web et un serveur d’application sont nécessaires pour traiter les pages Web dynamiques. ColdFusion MX 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, voir Description des applications Web, page 57.
Vous pouvez accéder au site Web de Macromedia, à l’adresse www.macromedia.com/fr/software/
coldfusion/, pour télécharger et installer la version complète de ColdFusion MX édition
développeur. Un exemplaire du serveur ColdFusion MX édition développeur est également disponible sur le CD de Dreamweaver (version Windows uniquement).
Remarque : Vous pouvez également installer ColdFusion MX sur un ordinateur Mac OS X exécutant un serveur J2EE (par exemple, JRun ou Tomcat). Pour plus d’informations, voir le site Web de Macromedia à l’adresse www.macromedia.com/support/coldfusion/j2ee/cfmx-mac-
onjrunandtomcat.html. Le processus d’installation est toutefois assez compliqué et Dreamweaver n’a
pas été testé sur un serveur ColdFusion MX exécuté sur Macintosh. En outre, la connexion d’un serveur ColdFusion MX 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 :
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 ColdFusion MX. 4 Suivez les instructions d’installation.
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 CFusionMX\wwwroot du système exécutant ColdFusion, créez un dossier
intitulé MySampleApp.
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 CFusionMX\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
Configuration du système (ColdFusion) 95

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.
Remarque : Les utilisateurs de Macromedia HomeSite et de ColdFusion Studio peuvent considérer un site Dreamweaver comme un projet HomeSite ou Studio.
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 96).
2 Définissez le dossier comme un dossier Dreamweaver local (voir Définition d’un dossier local,
page 97).
3 Définissez votre dossier racine sur le serveur Web comme dossier Dreamweaver distant (voir
Définition d’un dossier distant, page 97).
4 Spécifiez un dossier dans lequel traiter les pages dynamiques (voir Définition du dossier de
traitement des pages dynamiques, page 98).
5 Téléchargez les exemples de fichiers sur le serveur Web (voir Téléchargement des exemples de
fichiers, page 99).

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é Sites-Local dans le dossier utilisateur de votre disque dur.
Par exemple, créez l’un des dossiers suivants :
C:\Documents and Setting\votre_nom_d’utilisateur\Mes documents\Sites-Local (Windows)
/Utilisateurs/votre_nom_d’utilisateur/Documents/Sites-Local (Macintosh).
Remarque : Sous Macintosh, votre dossier 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 GettingStarted 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 :
C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\GettingStarted\
(Windows)
/Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)
3 Copiez le dossier GettingStarted dans le dossier Sites-Local.
Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver local.
96 Chapitre 9 : Configuration d’un exemple de site ColdFusion

Définition d’un dossier local

Après avoir copié le dossier GettingStarted, 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 Trio-ColdFusion.
Le nom identifie votre site dans Dreamweaver.
4 Cliquez sur l’icône de dossier située près de la zone de texte Dossier racine local, puis recherchez
et sélectionnez le dossier contenant les exemples de fichiers ColdFusion (dans le dossier GettingStarted). Le chemin d’accès au dossier devrait être le suivant :
C:\Documents and Setting\votre_nom_d’utilisateur\Mes documents\Sites-
Local\GettingStarted\4-Develop\coldfusion (Windows)
/Utilisateurs/votre_nom_d’utilisateur/Documents/Sites-Local/GettingStarted/4-Develop/
coldfusion (Macintosh)
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 Dan s l’ ong let Ava ncé de l a bo îte de d ial ogue Déf ini tion 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 l’aide 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, page 95.
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 disque dur Windows) :
Répertoire distant :
C:\CFusionMX\wwwroot\MySampleApp
Pour plus d’informations sur le protocole FTP, voir Définition des options Infos distantes pour l’accès FTP dans l’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 (ColdFusion) 97

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 ’ongl et Av ancé d e la b oîte d e dial ogue D éfin itio n du si te, s élec tionn ez la catég orie Serveu r
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 Trio, vous pouvez utiliser les mêmes paramètres que dans la catégorie Infos distantes (voir Définition d’un dossier
distant, page 97) car ceux-ci pointent vers un serveur capable de traiter les pages ColdFusion.
2 Dans le menu déroulant Modèle de serveur, sélectionnez ColdFusion. 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.
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 A propos du préfixe d’URL dans l’aide Utilisation de Dreamweaver.
Si le dossier spécifié dans le champ Dossier distant est c:\CFusionMX\wwwroot\MySampleApp, le préfixe de l’URL devrait se présenter comme suit :
http://localhost :8500/MySampleApp/
Remarque : Par défaut, le serveur Web ColdFusion s’exécute sur le port 8500.
Conseil : 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.
98 Chapitre 9 : Configuration d’un exemple de site ColdFusion

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.
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 97.
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 100).
2 Créez une source de données ColdFusion dans le programme ColdFusion Administrator (voir
Création d’une source de données ColdFusion, page 100).
3 Affichez la connexion dans Dreamweaver (voir Connexion à la base de données, page 101).
Connexion à l’exemple de base de données (ColdFusion) 99

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 source de données ColdFusion, page 100.
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 (trio.mdb) sur votre disque dur est le suivant :
C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.mdb
(Windows)
/Applications/Macromedia Dreamweaver MX 2004/Samples/Database/trio.mdb (Macintosh)
Vous pouvez placer le fichier dans le dossier de votre choix, sur l’ordinateur distant, ou créer un nouveau dossier.
Attention : 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 dans le programme ColdFusion Administrator

Création d’une source de données ColdFusion

Créez une source de données ColdFusion appelée connTrio dans le programme ColdFusion Administrator qui pointe vers l’exemple de fichier de base de données.
Pour créer une source de données ColdFusion :
1 Dans Dreamweaver, ouvrez une page ColdFusion. 2 Dans le panneau Bases de données (Fenêtre > Bases de données), cliquez sur le bouton Modifier
les sources de données. ColdFusion Administrator s’ouvre dans un navigateur.
3 Connectez-vous au programme ColdFusion Administrator et, à l’aide du pilote Microsoft
Access, créez une source de données appelée connTrio qui pointe vers le fichier de base de données trio.mdb.
Si ColdFusion s’exécute sur votre ordinateur local et que Dreamweaver a été installé dans l’emplacement par défaut, créez une source de données qui pointe vers le fichier de base de données dans le dossier suivant :
C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.mdb Si ColdFusion s’exécute 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 l’ordinateur distant dans Configuration de
la base de données (serveur sur l’ordinateur distant), page 100.
Pour plus d’informations, reportez-vous à la documentation ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion).
Après avoir créé la source de données ColdFusion, connectez-vous à la base de données dans Dreamweaver.
100 Chapitre 9 : Configuration d’un exemple de site ColdFusion
Loading...