Bien démarrer avec Dreamweaver MX ™ macromedia ® Marques commerciales Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind 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. 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. 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 © 2002 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. 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/. Numéro de référence ZDW60M100F Remerciements Gestion de projet : Sheila McGinn Rédaction : Chris Bedford, Kim Diezel, Jed Hartman, Charles Nadeau, Jennifer Rowe Mise en forme : Mary Ferguson, Mary Kraemer, Lisa Stanziano Gestion de la production : Patrice O’Neill Conception et production multimédia : Aaron Begley, Benjamin Salles et Noah Zilberberg Conception et production de l’aide et de la documentation : Chris Basmajian, Caroline Branch, John Francis Mise en forme et production du site Web : George Brown, Rebecca Godbois, Jeff Harmon, Jon Varese Gestion de la localisation : Bonnie Loo Remerciements particuliers à Luciano Arruda, Jake Cockrell, Kristin Conradi, George Comninos, David Deming, Tonya Estes, Sadia Bellal Faber, Stephanie Goss, David Halbakken, Nick Halbakken, Wanda Huang, Tim Hussey, Narciso (nj) Jaramillo, Craig Jennings, Florian de Joannès, Ken Karleskint, Sho Kuwamoto, David Lenoe, Raymond Lim, Jay London, Sam Mathews, Larry McLister, Susan Morrow, Masayo Noda, Dan Radigan, Nivesh Rajbhandari, Scott Richards, Yoko Shindo, Mike Sundermeyer, Heidi Bauer Williams, Jorge Taylor, Vincent Truong, Lawrence Teschmacher, Venu Venugopal, Yoko Vogt, et les équipes d’ingénierie et de contrôle qualité de Dreamweaver. Première édition : Juin 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 2 TABLE DES MATIÈRES Partie I Prise en main CHAPITRE 1 Introduction . . .......................................................9 Notions de base de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Installation et exécution de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Description de l'espace de travail Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Affichage d'un exemple de site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 CHAPITRE 2 Création de votre premier site Web dans Dreamweaver . . . . . . . . . . . . . . . 19 Définition d'un site local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Création et enregistrement d'une nouvelle page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Ajustement de la mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Définition d'un titre de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Ajout de texte formaté . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Ajout d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Définition de couleurs d'arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Affichage du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Création d'une seconde page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Ajout de liens texte entre des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Création d'images survolées pour des liens graphiques. . . . . . . . . . . . . . . . . . . . . . . . . . 45 Copie de la barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Aperçu dans le navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Configuration d'un site distant et publication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 CHAPITRE 3 Modification de code dans Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Activation de l'espace de travail de codage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Copie d'un dossier dans votre site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Affichage des pages terminées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Ouverture de plusieurs pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Ajout d'une image en la faisant glisser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Ajout d'un lien avec le sélecteur de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Modification d'une balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 3 Consultation des informations relatives à une balise . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Ajout d'une image à l'aide des indicateurs de code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Vérification des modifications apportées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Ajout d'un lien avec la barre Insertion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Impression du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 CHAPITRE 4 Description des applications Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Définition d'une application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Fonctionnement d'une application Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Création de pages dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Choix d'une technologie de serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Termes fréquemment utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 CHAPITRE 5 Création d'applications Web dans Dreamweaver MX . . . . . . . . . . . . . . . . . 73 Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Ouverture d'un document de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Définition d'un jeu d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Affichage des enregistrements de la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Ajout de champs dynamiques au tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Définition d'une région répétée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Affichage des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Création d'un formulaire d'insertion d'enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . 81 Copie des fichiers sur le serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Documentation connexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 CHAPITRE 6 Installation d'un serveur Web sous Windows . . . . . . . . . . . . . . . . . . . . . . . . . 89 Prise en main. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Installation de Personal Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Installation d'Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Test du serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Fonctions élémentaires du serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 CHAPITRE 7 Configuration d'un exemple de site ColdFusion . . . . . . . . . . . . . . . . . . . . . . . 95 Aide-mémoire pour la configuration à l'intention des développeurs ColdFusion . . . . . . 95 Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Connexion à l'exemple de base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 CHAPITRE 8 Configuration d'un exemple de site ASP.NET . . . . . . . . . . . . . . . . . . . . . . . 105 Aide-mémoire pour la configuration à l'intention des développeurs ASP.NET. . . . . . . 105 Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Connexion à l'exemple de base de données (configuration locale) . . . . . . . . . . . . . . . . 112 Connexion à l'exemple de base de données (configuration avec un serveur distant) . . . 113 4 Table des matières CHAPITRE 9 Configuration d'un site ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Configuration de la liste de contrôle des développeurs ASP . . . . . . . . . . . . . . . . . . . . . Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connexion à l'exemple de base de données (configuration locale) . . . . . . . . . . . . . . . . Connexion à l'exemple de base de données (configuration avec un serveur distant) . . . CHAPITRE 10 Configuration d'un exemple de site JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Configuration de la liste de contrôle pour les développeurs JSP . . . . . . . . . . . . . . . . . . Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connexion à l'exemple de base de données (configuration locale) . . . . . . . . . . . . . . . . Connexion à l'exemple de base de données (configuration avec un serveur distant) . . . CHAPITRE 11 Configuration d'un exemple de site PHP 116 117 120 124 125 128 129 131 135 137 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Configuration de la liste de contrôle des développeurs PHP . . . . . . . . . . . . . . . . . . . . Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connexion à l'exemple de base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 141 145 148 CHAPITRE 12 Résolution des problèmes de connexion à des bases de données . . . . . 151 Résolution des messages d'erreur Microsoft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Résolution des messages d'erreur ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Résolution des problèmes d'autorisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Partie II Didacticiels CHAPITRE 13 Didacticiels de Dreamweaver MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Contenu des leçons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 CHAPITRE 14 Didacticiel sur l'utilisation de tableaux pour mettre en forme une page . 163 Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Création et modification d'un tableau en mode Standard . . . . . . . . . . . . . . . . . . . . . . 164 Ajout de couleurs à un tableau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Définition d'un tableau à largeur relative en mode Standard . . . . . . . . . . . . . . . . . . . . 171 Création d'un tableau à largeur exprimée en pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Conception d'une page en mode de Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Dessin d'une cellule de Mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Ajout de plusieurs cellules de Mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Déplacement ou redimensionnement d'une cellule de Mise en forme . . . . . . . . . . . . . 176 Ajout de couleurs à un tableau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Définition d'un tableau à largeur relative en mode de Mise en forme . . . . . . . . . . . . . 178 Etape suivante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Table des matières 5 CHAPITRE 15 Didacticiel sur l'alignement des images et les cartes graphiques . . . . . . 181 Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Définition de l'alignement d'une image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Définition de l'espacement d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Création d'une carte graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Etapes suivantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 CHAPITRE 16 Didacticiel sur l'utilisation des fichiers de conception Dreamweaver . . . 189 Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Manipulation des fragments de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Insertion d'un fragment de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Ajout d'un fragment de code de contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Ajout d'un fragment de code de pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Modification du contenu d'un fragment de code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Enregistrement d'un code en tant que fragment de code . . . . . . . . . . . . . . . . . . . . . . . 195 Etapes suivantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 CHAPITRE 17 Didacticiel sur la conception à l'aide de feuilles de style en cascade . . . 197 Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Ouverture du panneau Styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Redéfinition d'une balise HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Définition de la couleur d'arrière-plan de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Définition d'un style pour les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Exportation de styles pour la création d'une feuille de style externe . . . . . . . . . . . . . . . 204 Attacher une feuille de style externe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Etapes suivantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 CHAPITRE 18 Didacticiel sur la création d'un ensemble de pages Principale-Détails . 207 Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Création d'un ensemble de pages Principale-Détails . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Création d'un jeu d'enregistrements de base de données . . . . . . . . . . . . . . . . . . . . . . . 209 Insertion d'un objet d'application Ensemble de pages Principale-Détails . . . . . . . . . . . 212 Affichage des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Etapes suivantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 CHAPITRE 19 Didacticiel sur la création d'une page d'insertion d'enregistrements . . . 217 Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Création d'une page d'insertion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Ajout d'objets de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Définition d'un comportement de serveur Insérer un enregistrement . . . . . . . . . . . . . 223 Test de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Etapes suivantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 INDEX . 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Table des matières Partie I Partie I Prise en main Familiarisez-vous avec les outils de création visuelle, de codage et de développement d'applications de Dreamweaver MX en créant un site Web simple mais fonctionnel. Cette partie du manuel contient les chapitres suivants : • Chapitre 1, « Introduction » • Chapitre 2, « Création de votre premier site Web dans Dreamweaver » • Chapitre 3, « Modification de code dans Dreamweaver » • Chapitre 4, « Description des applications Web » • Chapitre 5, « Création d'applications Web dans Dreamweaver MX » • Chapitre 6, « Installation d'un serveur Web sous Windows » • Chapitre 7, « Configuration d'un exemple de site ColdFusion » • Chapitre 8, « Configuration d'un exemple de site ASP.NET » • • • • Chapitre 9, « Configuration d'un site ASP » Chapitre 10, « Configuration d'un exemple de site JSP » Chapitre 11, « Configuration d'un exemple de site PHP » Chapitre 12, « Résolution des problèmes de connexion à des bases de données » 7 8 CHAPITRE 1 Introduction Ce guide a pour objectif de vous faire découvrir les principales fonctions de Macromedia Dreamweaver MX et leur utilisation. Les leçons de ce guide expliquent comment créer un site Web simple et fonctionnel. Macromedia Dreamweaver MX 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 et ne constitue pas non plus une introduction à la conception Web. Pour plus d'informations sur Dreamweaver, voir l'aide de Dreamweaver (choisissez Utilisation de Dreamweaver dans le menu Aide). Notions de base de Dreamweaver Pour apprendre à utiliser Dreamweaver, commencez par lire ce guide Bien démarrer avec Dreamweaver MX. Ensuite, consultez d'autres sources, telles que les didacticiels, l'aide ou le centre de support. Utilisation de ce guide Ce guide comprend plusieurs chapitres. Vous pouvez les lire dans l'ordre ou lire la suite de cette introduction et passer au chapitre de votre choix. Nous vous conseillons de suivre les leçons de chaque chapitre dans l'ordre. Vous pourrez ainsi effectuer toutes les opérations nécessaires à la création d'un site Web. La liste suivante décrit le contenu de chaque chapitre : • Cette introduction explique comment installer Dreamweaver et présente l'espace de travail Dreamweaver. Commencez par lire ce chapitre. Ensuite, lisez le chapitre qui vous intéresse. Remarque : l'espace de travail a été considérablement modifié dans cette version de Dreamweaver. Par conséquent, nous vous recommandons de lire cette introduction même si vous avez déjà utilisé Dreamweaver auparavant. 9 • Chapitre 2, « Création de votre premier site Web dans Dreamweaver », page 19 est destiné aux créateurs de pages Web qui utilisent Dreamweaver pour la première fois. Il décrit 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. • Chapitre 3, « Modification de code dans Dreamweaver », page 51 est principalement destiné aux codeurs manuels (utilisateurs de Macromedia HomeSite, par exemple), mais aussi à tous ceux qui ont déjà utilisé des outils visuels et qui souhaitent commencer à modifier du code. • Chapitre 4, « Description des applications Web », page 61 présente les concepts à l'origine des applications Web. • Chapitre 5, « Création d'applications Web dans Dreamweaver MX », page 73 s'adresse à tous ceux qui savent créer des pages statiques (avec ou sans Dreamweaver) et qui souhaitent apprendre à créer des applications Web reposant sur des bases de données à l'aide de Dreamweaver. Il vous guide dans le processus de création d'une application Web simple. • Vous trouverez également dans ce guide des instructions de configuration qui vous permettront d'installer un serveur Web et de configurer des sites dynamiques à l'aide de divers langages serveur. • Un ensemble de didacticiels fournit des instructions détaillées sur la réalisation de certaines tâches courantes. 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. Parmi ces ressources, on compte les suivantes : • Un ensemble de didacticiels propose davantage de leçons traitant de sujets particuliers qui fournissent plus d'informations sur des domaines spécifiques que le reste du guide Bien démarrer avec Dreamweaver MX. • L'aide de Dreamweaver comporte des informations exhaustives sur l'utilisation des fonctions de Dreamweaver, ainsi qu'une version HTML du guide Bien démarrer avec Dreamweaver MX et des didacticiels. 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). • Utilisation de Dreamweaver est une version PDF de l'aide de Dreamweaver (à l'exception du guide Bien démarrer avec Dreamweaver MX. et des didacticiels) 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. En outre, vous trouverez des conseils, des notes techniques, des exemples, des didacticiels et des informations régulièrement mis à jour sur le site du centre de support de Dreamweaver à l'adresse suivante : http://www.macromedia.com/fr/support/. Pour plus d'informations sur d'autres ressources proposant des informations et des instructions sur Dreamweaver, voir l'aide de Dreamweaver. 10 Chapitre 1 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 Dreamweaver et 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 II ou équivalent, 300 MHz ou vitesse supérieure • Windows 98, Windows 2000, Windows NT (avec Service Pack 3 ou ultérieur), Windows ME ou Windows XP • • • • Netscape Navigator ou Microsoft Internet Explorer version 4.0 ou ultérieure 96 Mo de mémoire RAM disponible (128 Mo recommandés) 275 Mo d'espace disque disponible Moniteur 256 couleurs d'une résolution de 800 x 600 pixels (résolutions 1024 x 768 pixels ou millions de couleurs recommandées) • Lecteur de CD-ROM. Configuration système requise sur un ordinateur Macintosh d'Apple : • • • • • • • Processeur Power Macintosh G3 ou version ultérieure Mac OS 9.1, Mac OS 9.2.1 ou Mac OS X 10.1 ou version ultérieure Mac OS Runtime for Java (MRJ) 2.2 ou version ultérieure (disponible sur le CD Dreamweaver MX) Netscape Navigator ou Microsoft Internet Explorer version 4.0 ou ultérieure 96 Mo de mémoire RAM disponible (128 Mo recommandés) 275 Mo d'espace disque disponible Moniteur 256 couleurs d'une résolution de 800 x 600 pixels (résolutions 1024 x 768 pixels ou millions de couleurs recommandées) • Lecteur de CD-ROM. Introduction 11 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 12. Pour installer Dreamweaver : 1 Insérez le CD de Dreamweaver dans le lecteur de CD-ROM. 2 Choisissez parmi les options suivantes : • Sous Windows, choisissez Démarrer > Exécuter. Cliquez sur Parcourir et choisissez le fichier Installer.exe de Dreamweaver sur le CD de Dreamweaver. Lorsque la boîte de dialogue d'exécution apparaît, cliquez sur OK pour lancer l'installation. • Sur un ordinateur Macintosh, double-cliquez sur l'icône Installation de Dreamweaver. 3 Suivez les instructions à l'écran. 4 Redémarrez votre ordinateur si nécessaire. Utilisation de Dreamweaver dans un environnement multiutilisateur Avec un système d'exploitation multiutilisateur tel que Windows NT, 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 ce faire, la première fois que vous exécutez Dreamweaver sur l'un des systèmes multiutilisateurs reconnus, l'application crée des copies de divers fichiers de configuration à votre intention. Ces fichiers sont enregistrés dans un dossier vous appartenant. Remarque : dans les systèmes d'exploitation plus anciens (Windows 98, Windows ME et Mac OS 9.x), un seul jeu de fichiers de configuration Dreamweaver est partagé par tous les utilisateurs, même si le système est configuré pour prendre en charge plusieurs utilisateurs. Si vous réinstallez Dreamweaver ou si vous le mettez à niveau après avoir installé Dreamweaver MX, 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 la section « Customizing Dreamweaver » du centre de support Macromedia, à l'adresse http://www.macromedia.com/go/ customizing_dreamweaver. Lorsque vous désinstallez Dreamweaver d'un système multiutilisateur, Dreamweaver peut automatiquement supprimer chaque dossier de configuration utilisateur. 12 Chapitre 1 Enregistrement de Dreamweaver MX Pour bénéficier du Service technique de Macromedia, nous vous conseillons d'enregistrer votre copie de Macromedia Dreamweaver MX 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 courrier électronique de chaque mise à jour des produits et des sites Web www.macromedia.com et www-euro.macromedia.com. Pour enregistrer Macromedia Dreamweaver MX, procédez de l'une des manières suivantes : • Choisissez Aide > Enregistrement en ligne et remplissez le formulaire électronique. • Choisissez Aide > Imprimer l'enregistrement, imprimez le formulaire et envoyez-le à l'adresse indiquée sur le formulaire. Description de l'espace de travail Dreamweaver Sous Windows, Dreamweaver MX propose deux présentations : un espace de travail intégré en une seule fenêtre contenant tous les éléments et un espace de travail flottant ressemblant beaucoup à celui de la version 4 de Dreamweaver. Sur Macintosh, seule la présentation d'espace de travail flottant est disponible. Cette section explique comment choisir un espace de travail initial dans Windows. Elle décrit également les principaux éléments de l'espace de travail dans les environnements Windows et Macintosh. 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. Introduction 13 Pour choisir la présentation de l'espace de travail : Sélectionnez l'une des options suivantes : Espace de travail Dreamweaver MX : 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 Dreamweaver MX. Espace de travail Dreamweaver MX, HomeSite/Style Codeur : il s'agit du même espace de travail intégré, mais avec les groupes de panneaux ancrés sur la gauche, dans une présentation similaire à celle utilisée par Macromedia HomeSite et Macromedia ColdFusion Studio. Les fenêtres de document affichent le mode Code par défaut. Recommandé pour les utilisateurs de HomeSite ou de ColdFusion Studio et pour tous les codeurs manuels qui souhaitent travailler dans un espace de travail familier. Pour choisir cette présentation, choisissez l'option Espace de travail Dreamweaver MX, puis choisissez l'option HomeSite/Style Codeur. Remarque : ces deux espaces de travail intégrés autorisent l'ancrage des groupes de panneaux à droite ou à gauche. Espace de travail Dreamweaver 4 : il s'agit d'une présentation de l'espace de travail ressemblant à celle utilisée dans Dreamweaver 4, chaque document s'affichant dans une fenêtre flottante individuelle. Les groupes de panneaux sont ancrés ensemble, mais ils ne sont pas ancrés dans une même fenêtre d'application. Cette présentation est uniquement recommandée aux utilisateurs de Dreamweaver 4 qui préfèrent conserver un espace de travail qui leur est familier. 14 Chapitre 1 Présentation des fenêtres et des panneaux Vous trouverez ci-dessous quelques descriptions succinctes des fenêtres et autres éléments figurant dans l'espace de travail de Dreamweaver. Des descriptions plus détaillées relatives à l'utilisation de ces fenêtres sont fournies plus loin dans ce guide ; pour plus d'informations, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Barre Insertion Barre d'outils du document Fenêtre de document Fenêtre de bienvenue Inspecteur de propriétés Groupes de panneaux Panneau Site Sélecteur de balises fournit des conseils de configuration de l'espace de travail selon les besoins, ainsi que des informations sur les nouvelles fonctionnalités de Dreamweaver à l'attention des utilisateurs des versions précédentes du logiciel. La fenêtre Bienvenue 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 une image en cliquant sur l'icône Image dans la barre Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion. La barre 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. Introduction 15 La fenêtre de document affiche le document que vous créez et modifiez. 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. L'inspecteur de propriétés Les groupes de panneaux sont des ensembles de panneaux connexes ancrés ensemble sous un même en-tête. 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. Le panneau Site permet de gérer les fichiers et les dossiers composant votre site. Pour plus d'informations, voir « Définition d'un site local », page 19. Il permet également d'afficher tous les fichiers situé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 Historique et l'inspecteur de code. 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, Couper, Copier et Coller. 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, Rechercher et Remplacer, et permet d'ouvrir l'Editeur de raccourcis clavier ainsi que l'Editeur de la bibliothèque de balises. Vous pouvez également l'utiliser pour accéder aux Préférences, sauf si vous disposez d'un ordinateur Macintosh fonctionnant sous Mac OS X dans lequel les préférences se trouvent dans le menu Dreamweaver. 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 et d'outils Dreamweaver. Le menu Insertion et la barre Insertion 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 créer, d'ouvrir et de modifier des sites, ainsi que de gérer les fichiers du site courant si vous utilisez un ordinateur Macintosh. Le menu Fenêtre permet d'accéder à tous les panneaux, inspecteurs et fenêtres de Dreamweaver. 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 vers Dreamweaver, ainsi qu'à des références en plusieurs langues. 16 Chapitre 1 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. Tous les éléments des menus contextuels figurent également dans la barre de menus. Affichage d'un 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 « Global Car Rentals ». Avant de commencer les leçons, 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 Double-cliquez sur le fichier index.htm dans le dossier FinalSite pour afficher le site dans un navigateur. 3 Lorsque vous aurez affiché l'exemple de site, passez au chapitre qui vous intéresse. Introduction 17 18 Chapitre 1 CHAPITRE 2 Création de votre premier site Web dans Dreamweaver Ce chapitre fournit plusieurs leçons courtes qui vous guideront lors de la création d'un site Web statique simple à l'aide des outils visuels de programmation Web dans MacromediaDreamweaver MX. Pour plus d'informations sur l'utilisation des outils de codage manuel dans Dreamweaver, voir Chapitre 3, « Modification de code dans Dreamweaver », page 51. Pour plus d'informations sur la création d'une application Web dynamique reposant sur une base de données, voir Chapitre 4, « Description des applications Web », page 61. L'ordre des leçons présentées dans ce chapitre 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 statique : 1 Planifiez et préparez votre travail (voir « Définition d'un site local », page 19 et « Ajout d'actifs à votre site », page 25). 2 Créez des pages (voir « Création et enregistrement d'une nouvelle page », page 26). 3 Mettez en forme et définissez les pages (voir « Ajustement de la mise en forme », page 29 et « Définition d'un titre de page », page 35). 4 Ajoutez un contenu aux pages (voir « Ajout de texte formaté », page 35 et « Ajout d'images », page 39). 5 Liez les pages (voir « Ajout de liens texte entre des pages », page 45 et « Création d'images survolées pour des liens graphiques », page 45). 6 Publiez votre site (voir « Aperçu dans le navigateur », page 48 et « Configuration d'un site distant et publication », page 48). Définition d'un site local 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. Il est possible d'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 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. 19 Dans Dreamweaver, le mot site fait référence aux éléments suivants : • Un site Web : ensemble de pages sur un serveur pouvant être visualisées par tout visiteur du site disposant d'un navigateur Web. • Un 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. • Un site local : fichiers stockés sur votre disque local correspondant à ceux que vous avez téléchargés sur le site distant. Les fichiers sont modifiés sur votre disque dur, puis téléchargés vers le site distant. • Une 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. 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 et les liens associant les pages entre elles. Dans cette leçon, le site que vous allez créer est très simple et la planification sera brève : il comportera deux pages Web reliées entre elles. Dans ce cas, vous pouvez passer l'étape de planification et commencer à créer une définition de site. La boîte de dialogue Définition du site vous permet de créer une définition de 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. Pour définir un site : 1 Choisissez Site > Nouveau site. (Choisissez Nouveau site dans le menu Site.) La boîte de dialogue Définition du site s'ouvre. 2 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 3 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 Global Car Rental. 4 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. Création de votre premier site Web dans Dreamweaver 21 5 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 choisir 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 5, « Création d'applications Web dans Dreamweaver MX », page 73). 6 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. 7 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, choisissez cette option. 8 La zone de texte vous permet d'indiquer un dossier de votre disque dur dans lequel Dreamweaver doit stocker la version locale des fichiers du site. Pour indiquer un nom de dossier exact, il est préférable de parcourir l'arborescence pour trouver ce dernier que d'en indiquer le chemin d'accès dans la zone appropriée. Cliquez sur l'icône représentant un dossier située près de la zone de texte. La boîte de dialogue Choisissez le dossier racine local pour le site Global Car Rental apparaît. 22 Chapitre 2 9 Dans cette boîte de dialogue, choisissez un dossier de votre disque local dans lequel vous voulez stocker tous vos sites. Ne cliquez pas encore sur OK. Remarque : ce dossier doit contenir tous vos sites ; il est donc préférable de ne pas choisir le dossier racine de votre disque local. Vous allez créer ultérieurement pour ce site un dossier racine sur votre disque local dans le dossier des sites. Si vous ne disposez d'aucun dossier de sites, créez-en un maintenant (en utilisant le bouton de création de dossier dans la boîte de dialogue Choisissez le dossier racine local pour le site Global Car Rental). Nommez le dossier Sites. L'emplacement le mieux approprié au dossier des sites dépend de votre système d'exploitation : • Sous Windows, si vous ne disposez d'aucun répertoire de stockage des sites, créez un dossier au niveau supérieur de l'arborescence de votre disque C et nommez le dossier Sites. Le chemin d'accès au dossier est donc le suivant : C:\Sites. • Sous Mac OS 9, si vous ne disposez d'aucun répertoire de stockage des sites, créez un dossier au niveau supérieur de votre disque et nommez-le Sites. • Sous Mac OS X, votre dossier de base (/Users/your_user_name) contient un dossier appelé Documents. Naviguez vers ce dossier, puis créez à l'intérieur un dossier appelé Sites. 10 Dans la boîte de dialogue Choisissez le dossier racine local pour le site Global Car Rental, créez un dossier dans le dossier Sites. Nommez le nouveau dossier GettingStarted et cliquez sur OK pour fermer la boîte de dialogue Choisissez le dossier racine local pour le site Global Car Rental. Ce nouveau dossier est le dossier racine local de votre site. Création de votre premier site Web dans Dreamweaver 23 11 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. 12 Pour l'instant, choisissez Aucun dans le menu déroulant. Cliquez sur Suivant pour passer à l'étape suivante. L'écran suivant apparaît, affichant un résumé de vos paramètres. 13 Cliquez sur Terminé. Vous pouvez définir ultérieurement des informations concernant votre site distant (voir « Configuration d'un site distant et publication », page 48) ; pour le moment, les informations concernant le site local suffisent pour créer une page. Un message vous informe que Dreamweaver va créer un cache de site. Ce cache permet à Dreamweaver de stocker des informations concernant le site pour accélérer certaines opérations devant être effectuées sur ce dernier. 14 Cliquez sur OK pour permettre à Dreamweaver de créer le cache de site. Le panneau Site affiche maintenant le nouveau dossier racine local de votre site actuel et une icône vous permet d'afficher tous vos disques locaux dans une arborescence hiérarchique. L'icône est intitulée Bureau (Windows) ou Ordinateur (Macintosh). Le panneau Site affiche normalement tous les fichiers et dossiers de votre site, mais pour l'instant, votre site ne contient aucun fichier ni dossier. Lorsque votre site contiendra des fichiers, la liste de fichiers du panneau Site 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 le feriez sur le Bureau de votre ordinateur. Si disposez déjà d'un ensemble de fichiers HTML locaux que vous souhaitez utiliser pour créer un site Web, vous pouvez utiliser le navigateur de fichiers du panneau Site pour les copier dans le dossier du site que vous venez de créer. Toutefois, vous voudrez peut-être suivre toutes les leçons de ce guide en utilisant les fichiers fournis avec Dreamweaver avant d'utiliser vos propres fichiers. Si vous disposez déjà d'un site Web sur un serveur distant et que vous souhaitez modifier ce site à l'aide de Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). 24 Chapitre 2 Ajout d'actifs à votre site Si vous avez déjà créé des actifs (images ou autres éléments de contenu) pour le site local que vous venez de créer, placez-les dans un dossier se trouvant à l'intérieur du dossier racine du site local. Lorsque vous êtes prêt à ajouter le contenu à vos pages, les actifs seront prêts à l'emploi. Les images et fichiers texte du site Global Car Rental sont fournis avec Dreamweaver. Si vous créez les pages du site Global Car Rental, vous devez copier les images destinées au site dans le dossier racine local de votre site. Le panneau Site vous permet d'exécuter cette opération. Les actifs se trouvent dans un dossier appelé Design. Pour des raisons de simplicité et de cohérence avec le reste du guide Bien démarrer avec Dreamweaver MX, vous copierez la totalité du dossier Design dans votre site et vous travaillerez dans ce dossier. Pour copier un dossier d'images dans le dossier racine local de votre site : 1 Si le panneau Site n'est pas ouvert, ouvrez-le en choisissant Fenêtre > Site. Le panneau Site apparaît (s'il était déjà ouvert, il disparaîtra). S'il n'apparaît pas, choisissez de nouveau Fenêtre > Site pour l'afficher.) 2 Dans le panneau Site, développez l'icône Bureau (Windows) ou Ordinateur (Macintosh) pour afficher les disques disponibles. 3 S'il le faut, développez les dossiers pour atteindre le dossier de l'application Dreamweaver. 4 Développez le dossier Samples. 5 Développez le dossier GettingStarted se trouvant dans le dossier Samples. 6 Sélectionnez le dossier Design se trouvant dans le dossier GettingStarted et appuyez sur Ctrl+C (Windows) ou Commande+C (Macintosh) pour le copier. Le dossier Design contient un dossier nommé Assets qui contient divers actifs associés au site, dont un sous-dossier d'images. 7 Dans le panneau Site, recherchez le dossier racine local de votre site (le dossier que vous avez créé lorsque vous avez défini le site) et sélectionnez-le. Appuyez sur Ctrl+V (Windows) ou Commande+V (Macintosh) pour coller un exemplaire du dossier Design dans votre site. Création de votre premier site Web dans Dreamweaver 25 Création et enregistrement d'une nouvelle page Une fois votre site défini, vous pouvez créer des pages Web pour le remplir. Lorsque vous avez démarré Dreamweaver, un document HTML vierge a été automatiquement généré. Avant de poursuivre, fermez ce document. Pour fermer le document vierge par défaut : Choisissez Fichier > Fermer. Pour créer une page : 1 Choisissez Fichier > Nouveau. La boîte de dialogue Nouveau document s'affiche. 2 Dans la liste Catégorie se trouvant dans la partie gauche de la fenêtre, sélectionnez Conceptions de page. La liste se trouvant au milieu de la boîte de dialogue est renommée Conceptions de page. Une liste de pages préalablement conçues apparaît. 26 Chapitre 2 3 Faites défiler la liste Conceptions de page et choisissez l'élément appelé Text: Article D with Navigation. Remarque : il existe un autre élément portant un nom semblable. Veillez à ne pas sélectionner l'élément appelé Text: Article D qui ne comporte aucune barre de navigation. Un petit aperçu de la page apparaît dans la partie droite de la boîte de dialogue. Si vous préférez, vous pouvez créer une page à l'aide d'une des autres conceptions de pages fournies ou créer une page sans conception prédéfinie en choisissant un élément dans la catégorie Page de base. Le reste de la leçon suppose que vous utilisez la conception de page Text: Article D with Navigation. 4 Veillez à ce que le bouton radio Document soit sélectionné dans la partie inférieure droite de la boîte de dialogue. Création de votre premier site Web dans Dreamweaver 27 5 Cliquez sur Créer. La nouvelle page qui apparaît affiche la mise en forme que vous avez choisie dans une nouvelle fenêtre de document. La page contient le texte « Lorem ipsum » d'indication de position pour donner un aperçu de la conception de la page lorsque le texte y sera inséré. 6 Enregistrez votre document. Pour enregistrer votre page : 1 Choisissez Fichier > Enregistrer. 2 Dans la boîte de dialogue Enregistrer sous, recherchez le dossier Design figurant dans le dossier racine du site. Rappel : le dossier racine du site est le dossier que vous avez créé lors de la définition du site dans « Définition d'un site local », page 19. 3 Saisissez le nom de fichier index.htm. 4 Cliquez sur Enregistrer. Le nom de fichier apparaît désormais dans la barre de titre de la fenêtre de document, entre parenthèses après les mots « Document sans titre ». 28 Chapitre 2 Ajustement de la mise en forme Les pages prédéfinies constituent un point de départ, mais il est peu probable qu'elles proposent une mise en forme qui convienne exactement à vos pages. Pour modifier la mise en forme d'une page, utilisez les outils de mise en forme de Dreamweaver. Ce guide ne présente que certains outils ; pour plus d'informations voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Dans un premier temps, supprimez les éléments de la mise en forme dont vous n'avez pas besoin. Pour créer la mise en forme de la page Global Car Rental, supprimez les tableaux et cellules superflues. Ajoutez des espaces réservés pour les images et ajustez les largeurs des colonnes de tableaux (à l'aide du mode de Mise en forme de Dreamweaver) pour organiser votre page. Suppression d'éléments superflus Une conception de page prédéfinie risque de contenir des éléments dont vous n'avez pas besoin dans votre page finale. Vous pouvez sélectionner ces éléments et les supprimer. Si vous créez la page Global Car Rental, les éléments suivants de la conception de page standard sont superflus : • • • • Deux liens de navigation dans la partie supérieure de la page La zone de titre et d'en-tête située au-dessus de la colonne de texte principale Une petite case se trouvant près du titre dans la colonne encadrée La barre de copyright en bas de la page Pour supprimer un élément, sélectionnez-le et appuyez sur RET. ARR (Windows) ou Arrière (Macintosh). Les procédures suivantes indiquent comment sélectionner et supprimer chaque élément superflu. Une fois l'opération terminée, vérifiez que vous avez supprimé tout ce qui doit l'être et enregistrez le document. Pour supprimer les liens de navigation superflus : 1 Choisissez Affichage > Mode Tableau > Mode Standard pour vous assurer que vous affichez les tableaux en mode Standard. 2 Dans la barre de navigation du document, faites glisser la souris de la cellule contenant le lien « Sic Amet » à celle contenant le lien « Consectetur ». Les deux cellules sont en surbrillance pour indiquer qu'elles sont sélectionnées. 3 Appuyez sur RET. ARR (Windows) ou Arrière (Macintosh). Les cellules sont supprimées. Les autres cellules (les liens « Lorem », « Ipsum » et « Dolor ») sont automatiquement développées pour occuper la largeur du tableau. Création de votre premier site Web dans Dreamweaver 29 Pour supprimer le titre superflu d'une colonne de texte : 1 Dans la partie supérieure des colonnes de texte, cliquez sur le mot Title. 2 Dans le sélecteur de balises situé en bas de la fenêtre de document, cliquez sur la balise la plus à gauche <table> la plus à gauche, située juste à droite de la balise <body>. Si vous ne pouvez pas voir la balise <body> dans l'espace de travail flottant, élargissez la fenêtre de document. 3 Appuyez sur RET. ARR (Windows) ou Arrière (Macintosh) pour supprimer la table contenant le titre. Remarque : le sélecteur de balises contient deux balises <table>, car la zone de titre est un tableau imbriqué dans un autre tableau. Dans notre cas, supprimez le tableau externe, identifié par la balise <table> la plus à gauche. Pour supprimer la boîte superflue de l'en-tête de l'encadré : 30 1 Dans la colonne de droite, à gauche du mot News, cliquez dans la zone qui contient le point d'exclamation. 2 Dans le sélecteur de balises, cliquez sur la balise <td>se trouvant le plus à droite pour sélectionner la zone dans laquelle apparaît le point d'exclamation. 3 Appuyez sur RET. ARR (Windows) ou Arrière (Macintosh). Chapitre 2 Pour supprimer la barre de copyright superflue : 1 Faites défiler la page jusqu'en bas du document. Cliquez n'importe où dans la barre de copyright. 2 Dans le sélecteur de balises, cliquez sur la balise <table> la plus à gauche qui apparaît à droite de la balise <body>. Appuyez sur la touche de suppression pour supprimer le tableau contenant les informations de copyright. Pour vérifier et enregistrer votre page : 1 Assurez-vous que vous avez supprimé tous les éléments superflus de la page. Elle doit ressembler à l'image suivante : 2 Enregistrez votre document. Création de votre premier site Web dans Dreamweaver 31 Ajout d'un espace réservé pour une image Vous allez à présent créer un espace réservé pour une image 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, dans la partie supérieure gauche du texte, avant le premier mot en gras. Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour insérer une ligne vierge à cet endroit. 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 Choisissez Insertion > Espace réservé pour l'image. 3 Dans la boîte de dialogue correspondante, saisissez un nom pour l'espace réservé (comme SplashImage) et indiquez des valeurs de largeur et de hauteur. Pour la page Global Car Rental, indiquez une largeur de 523 et une hauteur de 220. Remarque : les noms d'espaces réservés doivent commencer par une lettre et ne peuvent contenir que des lettres et des chiffres. 32 Chapitre 2 4 Cliquez sur OK. Une boîte grise aux dimensions fournies apparaît. Il s'agit d'un espace réservé pour une image et il vous permet de mettre des pages en forme en l'absence des images finales. 5 Il vous faudra peut-être élargir la fenêtre de document pour afficher la colonne de texte la plus à droite. Application de l'extension automatique à une colonne La largeur de la colonne encadrée de texte figurant dans la partie droite de la page index.htm est fixe. Pour qu'elle change lorsque le visiteur redimensionne la fenêtre du navigateur, vous devez l'associer à l'option d'extension automatique. Ajustez ensuite la largeur de la colonne large qui contient l'espace réservé pour l'image. Pour appliquer l'extension automatique à la colonne de gauche : 1 Si la barre Insertion n'est pas affichée, choisissez Fenêtre > Insertion pour l'afficher. 2 Dans la barre Insertion, cliquez sur l'onglet M. en forme. 3 Cliquez sur le bouton Mode de Mise en forme pour passer au mode correspondant. 4 Lisez les informations figurant dans la boîte de dialogue qui s'affiche, puis cliquez sur OK. Dans le coin supérieur gauche de chaque tableau de votre page apparaît un onglet vert. Il est appelé « Tableau de Mise en forme ». 5 Dans la fenêtre de document, cliquez sur l'onglet Tableau de Mise en forme en haut à gauche de l'espace réservé pour l'image que vous avez inséré pour sélectionner le tableau qui contient les deux colonnes de texte. Un en-tête de colonne affichant la largeur de chaque colonne apparaît au-dessus de chacune des deux colonnes de texte. Création de votre premier site Web dans Dreamweaver 33 6 Si la fenêtre de document est trop étroite pour afficher la totalité de la colonne de droite, élargissez-la. Même après avoir élargi la fenêtre de document, les autres onglets Tableau de Mise en forme risquent de masquer la valeur de largeur dans l'en-tête de colonne se trouvant sur la droite. Ne cliquez pas sur les autres onglets. 7 Prenez soin de cliquer dans l'en-tête de colonne se trouvant au-dessus de la colonne de droite. (Cliquez au-dessus des onglets verts Tableau de Mise en forme dans la colonne de droite.) Un menu contextuel s'affiche. 8 Dans ce menu, choisissez Extension automatique de la colonne. Une boîte de dialogue intitulée Choisissez l'image d'espacement apparaît et vous demande de choisir une image d'espacement. Remarque : si vous avez déjà choisi une image d'espacement, cette boîte de dialogue n'apparaît pas et, dans ce cas, la colonne de droite est associée à l'option Extension automatique. Si la boîte de dialogue n'apparaît pas, ignorez le reste de cette procédure. 9 Dans la boîte de dialogue Choisissez l'image d'espacement, choisissez Utiliser un fichier image d'espacement existant et cliquez sur OK. La boîte de dialogue Sélectionner le fichier image d'espacement apparaît. 10 Dans cette boîte de dialogue, recherchez le dossier racine local et ouvrez le dossier Assets. Ouvrez alors le dossier Images et sélectionnez le fichier spacer.gif, puis cliquez sur OK (Windows) ou Ouvrir (Macintosh). La colonne de droite est désormais associée à l'option Extension automatique, ce qui signifie que dans un navigateur, la colonne de droite sera aussi large que possible une fois la largeur de la colonne de gauche fixée. Pour ajuster la largeur de la colonne de texte principale : 1 Cliquez sur l'en-tête de colonne au-dessus de la colonne de gauche et choisissez Uniformiser les largeurs de cellules dans le menu contextuel qui s'affiche. La largeur de la colonne de gauche est désormais fixe (égale à la largeur de l'image plus les valeurs de marge intérieure et d'espacement entre les cellules). 34 2 Cliquez sur le bouton Mode Standard dans la barre Insertion pour repasser dans ce mode. 3 Enregistrez votre document. Chapitre 2 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, choisissez 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. Pour définir un titre de page pour votre document : 1 Si la barre d'outils du document n'apparaît pas, choisissez Affichage > Barres d'outils > Document. La barre d'outils du document de Dreamweaver apparaît. Dans l'espace de travail intégré, elle apparaît par défaut dans la partie supérieure de la zone de document ; dans l'espace de travail flottant, elle fait partie de la fenêtre de document. Gestion de fichiers Mode Code Aperçu/Débogage dans le navigateur Mode Création Titre du document Affichage des données dynamiques Modes Code et Création Référence Options d'affichage Navigation dans le code Actualiser mode Création 2 Dans la zone de texte Titre qui indique « Document sans titre », tapez un titre pour la page, comme Page d'accueil de Global Car Rental. 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 document. 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 du panneau Styles CSS. Avant de saisir du texte, assurez-vous que vous êtes en mode Création en choisissant 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 taper le code directement, utilisez le mode Code. Pour plus d'informations sur le mode Code, voir Chapitre 3, « Modification de code dans Dreamweaver », page 51. Les pages prédéfinies fournies avec Dreamweaver contiennent le texte d'indication de position « Lorem ipsum ». Si vos pages s'inspirent d'une page prédéfinie, il vous faudra remplacer le texte d'indication de position par celui de votre choix au moment d'ajouter le contenu. Il peut être utile de garder le texte d'indication de position 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. Création de votre premier site Web dans Dreamweaver 35 Pour ajouter du texte à une page : 1 Cliquez trois fois sur le texte d'indication de position en gras dans la partie supérieure de la colonne de gauche (sous l'espace réservé pour l'image) pour sélectionner le paragraphe entier. 2 Tapez Safety Tips (ou le texte de l'en-tête de votre choix). 3 Sélectionnez les trois paragraphes de texte d'indication de position figurant sous la barre horizontale. 4 Tapez le texte suivant (ou le texte de votre choix) : The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch! 5 Dans la colonne de droite, cliquez trois fois sur le mot « News » et tapez Globe-Trotter Promotions à la place. 6 Dans le panneau Site, recherchez le fichier promotions.txt du dossier Assets. Double-cliquez sur l'icône du fichier pour l'ouvrir. Ce fichier contient un exemplaire de promotion spéciale de Global Car Rental. Remarque : dans cet exemple de site, le fichier qui contient l'exemplaire est au format texte. Dans le cas d'autres site, il pourra s'agir de documents HTML générés par Microsoft Word que vous pouvez importer et nettoyer à l'aide de la commande Importer HTML Word de Dreamweaver. Pour plus d'informations, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Vous remarquerez que le fichier texte apparaît dans une nouvelle fenêtre de document affichant une barre sombre 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. Remarque : si vous le souhaitez, vous pouvez taper le texte de votre choix sur cette page plutôt que d'utiliser le texte fourni. 7 Dans la fenêtre de document promotions.txt, appuyez sur Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner la totalité du texte, puis choisissez Edition > Copier pour copier le texte. 8 Dans la fenêtre de document index.htm, sélectionnez la totalité du texte d'indication de position dans la cellule inférieure de la colonne de droite et choisissez Edition > Coller. Le texte est collé dans le tableau. 36 9 Cliquez avant le mot « Rent » (second paragraphe de texte que vous venez de coller) et choisissez Insertion > Barre horizontale pour insérer une barre horizontale entre les deux promotions. 10 Enregistrez votre document. 11 Passez au texte promotions.txt. Fermez ce fichier en choisissant Fichier > Fermer. Chapitre 2 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 formatées 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 Choisissez Fichier > Nouveau. 2 Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Feuilles de style en cascade (CSS) dans la liste des catégories à gauche. La liste se trouvant au milieu de la boîte de dialogue est renommée Feuilles de style en cascade (CSS). Une liste de feuilles de style prédéfinies apparaît. 3 Dans la liste Feuilles de style CSS, sélectionnez une feuille de style. Pour le site Global Car Rental, sélectionnez Elémentaire : Verdana, car ce style redéfinit les balises body, td et th en leur attribuant des polices. Ensuite, cliquez sur Créer. Dreamweaver crée un fichier texte contenant un ensemble limité de styles CSS prédéfinis. 4 Choisissez Fichier > Enregistrer pour enregistrer le nouveau fichier CSS. Enregistrez-le dans le dossier Assets du site sous le nom de text.css (ou tout autre nom de votre choix). 5 Choisissez Fichier > Fermer pour fermer le fichier CSS. Création de votre premier site Web dans Dreamweaver 37 Pour appliquer à votre texte les styles de la feuille de style CSS : 1 Dans le menu Fenêtre, choisissez un fichier HTML (comme index.htm). Remarque : si vous avez choisi de ne pas afficher les extensions des fichiers, le fichier index.htm apparaît comme index. 2 Choisissez Fenêtre > Styles CSS pour afficher le panneau Styles CSS. 3 En haut du panneau Styles CSS, cliquez sur le bouton radio Modifier les styles pour afficher les styles disponibles. Aucun style n'est disponible si vous n'en avez jamais défini pour ce document. 4 Dans la partie inférieure du panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style. La boîte de dialogue Ajouter une feuille de style externe apparaît. 5 Dans cette boîte de dialogue, cliquez sur Parcourir pour rechercher une feuille de style. 6 Dans la boîte de dialogue Sélectionner le fichier feuille de style, sélectionnez dans le dossier Assets la feuille de style que vous venez de créer et cliquez sur OK (Windows) ou Choisir (Macintosh) pour l'attacher. 7 Dans la boîte de dialogue Ajouter une feuille de style externe, cliquez sur OK pour attacher la feuille de style. 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. 8 Enregistrez votre document. Pour modifier les styles de la feuille de style : 1 En haut du panneau Styles CSS, cliquez sur le bouton radio Modifier les styles pour afficher les styles disponibles. 2 Sélectionnez le nom du fichier CSS dans le panneau Styles CSS et cliquez sur le bouton Modifier une feuille de style dans la partie inférieure du panneau Styles CSS. La boîte de dialogue qui apparaît affiche le nom des styles de la feuille de style. 38 Chapitre 2 3 Sélectionnez un des styles, comme body, et cliquez sur Modifier. La boîte de dialogue Définition du style CSS s'affiche. 4 Attribuez une taille au texte, comme 13 pixels. Modifiez les autres options comme vous le souhaitez. 5 Cliquez sur OK pour redéfinir le style. 6 Modifiez les autres styles. Pour créer les styles utilisés dans le site Global Car Rental, définissez les styles body, td et th sur une taille de 13 pixels. 7 Une fois l'édition des styles terminée, cliquez sur le bouton Enregistrer pour enregistrer vos modifications et fermer la boîte de dialogue de la feuille de style. Les styles modifiés sont appliqués à votre document. Par exemple, le corps du texte apparaît en Verdana, 13 pixels. 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, nous vous recommandons d'utiliser celle qui est fournie avec l'exemple de site de Dreamweaver. Si vous n'avez pas déjà suivi la procédure de la section « Ajout d'actifs à votre site », page 25 permettant de copier les actifs du site Global Car Rental dans le dossier racine local, effectuez cette opération maintenant. Création de votre premier site Web dans Dreamweaver 39 Pour ajouter une image à votre document : 1 Enregistrez le document, 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. Si vous optez pour cette méthode, Dreamweaver corrige les URL lorsque vous enregistrez le document, 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 le logo de la société dans la partie supérieure gauche de la page Global Car Rental, double-cliquez sur le petit espace réservé pour l'image appelé « image (100 x 50) ». La boîte de dialogue Sélectionner 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 de Dreamweaver (Aide > Utilisation de Dreamweaver). 4 Recherchez une image dans le dossier Assets (comme logo.jpg). 5 Cliquez sur OK ou Sélectionner (Windows) ou Ouvrir 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 Cliquez sur l'espace réservé pour la grande image créé dans « Ajout d'un espace réservé pour une image », page 32 pour le sélectionner. 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 Affichez le panneau Site et l'inspecteur de propriétés (choisissez Fenêtre > Site et Fenêtre > Propriétés si ces fenêtres ne sont pas visibles). 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 Site. 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. Maintenez le bouton de la souris enfoncé tout en désignant le dossier Assets (si le dossier est fermé) ; celui-ci doit s'ouvrir. Maintenez le bouton de la souris enfoncé tout en désignant le dossier des images ; ce dernier doit s'ouvrir également. Maintenez le bouton de la souris enfoncé jusqu'à ce que le pointeur se trouve sur le fichier vintage.jpg. Relâchez le bouton de la souris pour sélectionner vintage.jpg. Dans la fenêtre de document, l'image apparaît à la place de l'espace réservé pour l'image. 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é pour les images, en mode Création, cliquez là où vous souhaitez voir apparaître l'image pour y placer le point d'insertion, puis choisissez 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 40 Enregistrez votre document. Chapitre 2 Définition de couleurs d'arrière-plan Dans les pages prédéfinies fournies avec Dreamweaver, les couleurs d'arrière-plan des cellules sont généralement grises ; pour la plupart des sites, vous devrez modifier ces couleurs afin de les harmoniser avec celles la palette de couleurs de votre site. Pour définir la couleur d'arrière-plan d'une cellule : 1 Si l'inspecteur de propriétés n'est pas ouvert, choisissez Fenêtre > Propriétés pour l'ouvrir. 2 Si l'inspecteur de propriétés apparaît sous forme réduite (seule la barre de titre est affichée), cliquez sur la flèche d'agrandissement pour le développer. 3 Si l'inspecteur de propriétés n'affiche pas toutes les propriétés, cliquez sur la flèche d'agrandissement se trouvant dans le coin inférieur droit de l'inspecteur de propriétés pour afficher toutes les propriétés. 4 Tout en appuyant sur Ctrl (Windows) ou Commande (Macintosh), cliquez sur une cellule pour la sélectionner. Par exemple, la page Global Car Rental affiche désormais une cellule qui contient l'image du logo de la société de location de voitures ; tout en appuyant sur Ctrl ou Commande, cliquez sur la cellule qui contient l'image du logo. La partie inférieure de l'inspecteur de propriétés affiche les propriétés de la cellule. Si la partie inférieure de l'inspecteur de propriétés n'est pas visible, cliquez sur la flèche d'agrandissement se trouvant dans le coin inférieur droit de l'inspecteur de propriétés pour afficher toutes les propriétés. 5 Dans l'inspecteur de propriétés, cliquez sur le bouton Couleur d'arrière-plan qui apparaît près de l'étiquette Ar-pl se trouvant au bas de la fenêtre. 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'affichage 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 pour que la couleur d'arrière-plan de la cellule corresponde à la couleur d'arrière-plan de l'image. L'arrière-plan de la cellule prend la couleur que vous avez choisie. Création de votre premier site Web dans Dreamweaver 41 7 Renouvelez la procédure pour chaque cellule dont vous souhaitez modifier la couleur d'arrièreplan. Dans la page Global Car Rental, changez les couleurs d'arrière-plan de toutes les cellules de la barre de navigation, ainsi que celle de la cellule d'en-tête de la seconde colonne de texte (la cellule qui contient le texte « Globe-Trotter Promotions ») pour qu'elles correspondent à la couleur d'arrière-plan du logo Global. 8 Enregistrez votre document. Affichage du code Prenez le temps d'observer comment Dreamweaver réagit lorsque vous ajoutez un contenu à une page. Au fur et à mesure que vous ajoutez du texte, des images ou un autre contenu, Dreamweaver génère du code HTML. Dans Dreamweaver, vous pouvez afficher votre document dans les deux modes suivants : mode Création (affichage du document comme il apparaît dans un navigateur) et mode Code (affichage du code HTML). Vous pouvez également afficher ces deux modes à l'écran. Pour afficher le code HTML de votre document : 1 Si la barre d'outils du document n'apparaît pas, choisissez Affichage > Barres d'outils > Document. 2 Dans la barre d'outils du document, cliquez sur le bouton Afficher les modes Code et Création. La fenêtre se scinde pour afficher le code HTML. Vous pouvez alors modifier le code dans le mode Code. En mode Création, vous devez actualiser l'affichage constater les modifications apportées au code. 42 Chapitre 2 Pour que les modifications apportées au code soient visibles en mode Création, 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. Dreamweaver propose plusieurs fonctions évoluées pour vous aider à créer du code en mode Code ; voir Chapitre 3, « Modification de code dans Dreamweaver », page 51 pour plus d'informations. Vous pouvez travailler dans le mode qui vous convient le mieux. Nous supposerons jusqu'à la fin de ce chapitre que vous travaillez en mode Création. Pour afficher le mode Création uniquement : 1 Si la barre d'outils du document n'apparaît pas, choisissez Affichage > Barres d'outils > Document. 2 Dans la barre d'outils du document, cliquez sur le bouton Afficher le mode Création. Création d'une seconde page Dans cette leçon, vous allez créer une seconde page pour votre site ; dans la leçon suivante, « Ajout de liens texte entre des pages », page 45, vous générerez des liens entre les 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 voulez créer votre propre mise en forme, utilisez les outils de modification de tableau de Dreamweaver ou le mode de Mise en forme. Parmi les autres options de mise en forme, on compte les cadres et les calques. Toutefois, elles ne sont pas traitées dans cette leçon. Si vous souhaitiez générer un site plus complexe, vous pourriez utiliser un modèle pour vous assurer que toutes les pages présentent une mise en forme identique. Pour plus d'informations sur la modification de tableaux, le mode de Mise en forme, les cadres, les calques et les modèles, voir « Documentation connexe », page 50. La seconde page du site Global Car Rental est la page du service clientèle. Vous allez créer cette page en effectuant une copie de la page principale (index.htm), 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 35. Pour créer une copie de votre première page (index.htm) : 1 Dans le panneau Site, cliquez sur le nom de fichier de la première page créée (index.htm ou le nom attribué) avec le bouton droit de la souris (Windows) ou en maintenant la touche Control enfoncée (Macintosh). 2 Dans le menu contextuel, choisissez Dupliquer. 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 Site. 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 comme customerService.htm. Création de votre premier site Web dans Dreamweaver 43 Pour supprimer les éléments indésirables de la nouvelle page : 1 Ouvrez la nouvelle page customerService.htm en double-cliquant dessus dans le panneau Site. Dans la barre de titre de la fenêtre du document, vérifiez qu'il s'agit bien du fichier customerService.htm. La barre de titre doit indiquer « Page d'accueil de Global Car Rental » suivi d'un nom de dossier et de fichier ; le nom de fichier doit être customerService.htm (ou le nom attribué au cours de l'étape précédente). 2 Dans la page customerService.htm, sélectionnez la grande image (celle qui affiche la voiture dans la colonne principale de texte) en cliquant dessus. 3 Dans le sélecteur de balises, cliquez sur la balise <td>. 4 Appuyez sur RET. ARR (Windows) ou Arrière (Macintosh). Le contenu de la cellule est supprimé. 5 Enregistrez votre document. Pour ajouter du texte à la nouvelle page : 1 Dans le panneau Site, recherchez le fichier custServInfo.htm dans le dossier Assets. Double-cliquez sur l'icône du fichier pour l'ouvrir. Vous trouverez dans ce fichier le contenu à insérer dans la page du service clientèle. S'il s'agissait de votre propre site, vous ajouteriez le contenu au cours de cette étape, mais dans le cadre de cette leçon, nous fournissons le contenu. 2 Dans la fenêtre de document custServInfo.htm, choisissez Affichage > Code pour afficher le code HTML. 3 Dans cette fenêtre appuyez sur Ctrl+A (Windows) ou Commande+A (Macintosh) pour sélectionner la totalité du fichier. Si vous n'êtes pas en mode Code lorsque vous effectuez cette opération, il est possible que vous deviez appuyer plusieurs fois sur Ctrl+A ou Commande+A pour tout sélectionner ; si le point d'insertion se trouve dans une cellule, l'option Sélectionner tout ne sélectionne que cette cellule. Il est donc plus facile de passer en mode Code avant de tout sélectionner. 4 Appuyez sur Ctrl+C (Windows) ou Commande+C (Macintosh) pour copier la totalité du fichier. 5 Repassez au document customerService.htm. Cliquez dans la colonne principale de texte qui est vide (la colonne large dans la partie gauche). 6 Choisissez Edition > Coller HTML. Le code HTML du fichier custServInfo.htm est collé dans ce document. Si vous choisissez Edition > Coller au lieu de Edition > Coller HTML, le code HTML est collé en mode Création, comme s'il s'agissait de texte. Si le code HTML apparaît dans le mode Création, choisissez Edition > Annuler et réessayez. La feuille de style text.css est déjà associée à cette page et le texte est automatiquement formaté. 44 Chapitre 2 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 leçons 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. Les deux approches suivantes permettent de 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 du service clientèle vers le fichier index.htm : 1 Activez la page du service clientèle, 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 Site. 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 du service clientèle lors de sa création, saisissez les mots Page d'accueil dans cette colonne et sélectionnez-les. 3 Si l'inspecteur de propriétés n'est pas ouvert, ouvrez-le en choisissant Fenêtre > Propriétés. 4 Cliquez sur l'icône de dossier se trouvant près de la zone de texte Lien dans l'inspecteur de propriétés. Recherchez le fichier index.htm dans le dossier racine local de votre site. Création d'images survolées pour des liens graphiques 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. 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 pointeur de la souris passe au-dessus de l'image initiale. Remarque : lorsque vous créez une image survolée, veillez à utiliser deux images ayant les même dimensions. Pour créer une image survolée : 1 Passez à la page principale (index.htm). Si la page n'est pas ouverte, ouvrez-la en doublecliquant sur l'icône correspondante dans le panneau Site. 2 Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer l'image survolée. Sur la page principale Global Car Rental, double-cliquez dans la cellule de la barre de navigation qui affiche le mot « Lorem » et appuyez sur RET. ARR (Windows) ou Arrière (Macintosh) pour supprimer le texte en gardant le point d'insertion dans la cellule. Création de votre premier site Web dans Dreamweaver 45 3 Choisissez Insertion > Images interactives > Image survolée. 4 Dans la boîte de dialogue Insérer une image survolée, attribuez un nom à l'image, comme image-accueil, dans la zone de texte Nom de l'image. L'image est ainsi affectée d'un nom unique et est facilement identifiable dans le code HTML. 5 Dans la zone de texte Image originale, cliquez sur Parcourir ; recherchez le fichier btnHome.jpg se trouvant dans le dossier des images de votre site (à l'intérieur du dossier Assets). Veillez à ce que l'option du menu déroulant Relatif à ait la valeur Document, puis cliquez sur OK ou sur Sélectionner (Windows) ou Ouvrir ou Choisir (Macintosh). La zone de texte Image originale identifie l'image devant apparaître lorsque la page est ouverte dans le navigateur. 6 Dans la zone de texte Image survolée, cliquez sur Parcourir, puis recherchez le fichier btnHome_on.jpg dans le dossier des images de votre site. Veillez à ce que l'option du menu déroulant Relatif à ait la valeur Document, puis cliquez sur OK ou sur Sélectionner (Windows) ou Ouvrir ou Choisir (Macintosh). La zone de texte Image survolée identifie l'image devant s'afficher lorsque le pointeur survole l'image dans le navigateur. 7 Vérifiez que l'option Précharger l'image survolée 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. 8 Dans la zone de texte Si cliqué, aller à l'URL, cliquez sur le bouton Parcourir et recherchez le fichier index.htm. Il s'agit du fichier que vous êtes en train de modifier. Par conséquent, cette étape permet d'établir un lien entre l'image survolée et la page dans laquelle vous placez l'image survolée. Il peut sembler inutile de créer un lien vers la page qui contient ce même lien, mais vous utiliserez les mêmes images survolées sur d'autres pages et ce lien permettra aux visiteurs d'afficher à nouveau la page index.htm à partir d'autres pages contenant cette barre de navigation. 46 Chapitre 2 9 Cliquez sur OK pour fermer la boîte de dialogue. L'image originale spécifiée apparaît dans le document. 10 Enregistrez votre document. Remarque : les images survolées ne changent pas d'aspect lorsque vous les survolez avec le pointeur dans la fenêtre de document Dreamweaver ; elles ne changent d'aspect que dans un navigateur. Pour vous assurer que vos images survolées ont l'effet souhaité, vous devez afficher un aperçu du document dans un navigateur. Dans le cadre du site Global Car Rental, créez deux autres images survolées dans les deux autres cellules de la barre de navigation (celles affichant les mots « Ipsum » et « Dolor ») : une image survolée utilisera les images btnCustomerService.jpg et btnCustomerService_on.jpg et elle sera liée au fichier customerService.htm, et l'autre image survolée utilisera les images btnLocations.jpg et btnLocations_on.jpg et elle sera liée au fichier locations.htm. Vous n'avez pas encore créé le fichier locations.htm ; tapez le nom de fichier dans la zone de texte Si cliqué, aller à l'URL de la boîte de dialogue Insérer une image survolée. 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 cellules 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 copier la barre de navigation dans une autre page : 1 Dans le fichier index.htm, cliquez dans la cellule qui contient l'image survolée Home. 2 Dans le sélecteur de balises, cliquez sur la balise <tr> à l'extrême droite. La ligne du tableau contenant les trois images survolées de la barre de navigation est sélectionnée. 3 Choisissez Edition > Copier. 4 Passez au fichier customerService.htm. 5 Cliquez dans la cellule de la barre de navigation qui affiche le mot « Lorem ». 6 Dans le sélecteur de balises, cliquez sur la balise <tr> à l'extrême droite. 7 Choisissez Edition > Coller. Les images survolées de la barre de navigation sont collées à la place des cellules existantes. 8 Enregistrez votre document. Création de votre premier site Web dans Dreamweaver 47 Aperçu dans le 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 ; 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.htm, 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 choisissez 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. 3 Placez le pointeur sur les images survolées pour voir comment elles changent d'aspect. Cliquez sur les liens pour vous assurer qu'ils fonctionnent. 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. Avant de poursuivre, vous devez pouvoir accéder à un serveur Web distant (le serveur de votre fournisseur d'accès Internet ou 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. 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 site local », page 19. Pour vous connecter à un site distant : 48 1 Choisissez Site > Modifier les sites. 2 Sélectionnez un site (tel que Global Car Rental) et cliquez sur Edition. 3 Cliquez sur l'onglet Elémentaire dans la partie supérieure de la boîte de dialogue. Chapitre 2 4 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. 5 Dans le menu déroulant Comment vous connectez-vous à votre serveur distant ?, choisissez une méthode de connexion au site distant. La méthode la plus courante de connexion à un serveur sur Internet est FTP ; pour une connexion à un serveur de votre intranet, utilisez la méthode Local/Réseau. Dans l'incertitude, demandez à l'administrateur système du serveur. 6 Si vous choisissez 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 vide. • Saisissez vos nom d'utilisateur et mot de passe dans les zones de texte appropriées et cliquez sur Tester la connexion. • En cas d'échec, consultez votre administrateur système. 7 Si vous choisissez 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. 8 Cliquez sur Suivant. 9 N'activez pas l'option d'archivage et d'extraction pour ce site. Si vous et vos collègues travaillez sur un site plus important, l'option d'archivage et d'extraction empêche l'écrasement de vos fichiers respectifs. Nous n'aurons pas besoin de cette option dans le cadre de ce site. Création de votre premier site Web dans Dreamweaver 49 10 Cliquez sur Suivant. 11 Cliquez sur Terminé pour terminer la configuration du site distant. 12 Cliquez de nouveau sur Terminé pour terminer la modification du site. Pour télécharger vos pages vers un site distant : 1 Dans le panneau Site, sélectionnez le dossier racine local du site. 2 Cliquez sur le bouton Placer les fichiers. Tous les fichiers du site sont téléchargés vers le site distant. 3 Ouvrez le site distant dans un navigateur pour vous assurer que le transfert s'est bien déroulé. Documentation connexe Dreamweaver est une application volumineuse intégrant de nombreuses fonctions performantes. Ce guide n'aborde que les notions élémentaires. Ce chapitre du manuel Bien démarrer avec Dreamweaver MX traite principalement de la création d'un site statique en mode Création. Pour plus d'informations sur le mode Code et le codage manuel dans Dreamweaver, voir Chapitre 3, « Modification de code dans Dreamweaver », page 51. Pour plus d'informations sur les notions élémentaires inhérentes à la création d'une application Web reposant sur une base de données, voir Chapitre 4, « Description des applications Web », page 61 et Chapitre 5, « Création d'applications Web dans Dreamweaver MX », page 73. Pour plus d'informations sur les rubriques traitées dans ce chapitre du manuel Bien démarrer avec Dreamweaver MX, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Outre les informations concernant certaines rubriques spécifiques, l'aide de Dreamweaver propose des informations sur d'autres ressources, telles que le centre de support Macromedia et les forums de discussion en ligne. 50 Chapitre 2 CHAPITRE 3 Modification de code dans Dreamweaver Les développeurs Web bénéficient des puissants outils visuels de Macromedia Dreamweaver MX, mais ils sont nombreux à utiliser également des outils de codage. Dreamweaver propose un grand nombre de nouvelles fonctions qui vous permettent de travailler dans un environnement de codage professionnel adapté à vos besoins. Ce chapitre présente rapidement le nouvel environnement de codage professionnel de Dreamweaver. Pour plus d'informations, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Activation de l'espace de travail de codage Si vous ne l'avez pas déjà fait à l'installation, vous pouvez faire en sorte que votre espace de travail ressemble aux environnements de codage bien connus HomeSite et ColdFusion Studio. Remarque : les utilisateurs Macintosh ne peuvent pas modifier l'espace de travail. 51 Pour adopter le nouvel espace de travail de codage : 1 Choisissez 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. La boîte de dialogue Configuration de l'espace de travail apparaît. 52 Chapitre 3 3 Sélectionnez le bouton radio Espace de travail Dreamweaver MX, puis cochez la case HomeSite/Style Codeur. 4 Double-cliquez sur OK pour fermer la boîte de dialogue Préférences. 5 Fermez Dreamweaver, puis redémarrez-le. Copie d'un dossier dans votre site Avant de commencer les leçons, vous devez configurer un site et copier un dossier dans ce site. Le navigateur de fichiers intégré du panneau Site vous permet d'afficher le disque local et le réseau. Vous pouvez ainsi utiliser des fichiers qui ne se trouvent pas sur le site affiché dans le panneau Site. Pour copier des pages dans votre site : 1 Choisissez Fenêtre > Site pour ouvrir le panneau Site, s'il n'est pas déjà ouvert. 2 Dans le menu déroulant Site du panneau Site, sélectionnez le nom du site défini dans le chapitre précédent. Si vous n'avez pas défini de site, voir « Définition d'un site local », page 19. Vous devez définir un site avant de continuer. Lorsque vous sélectionnez le nom du site dans le menu déroulant, Dreamweaver affiche les fichiers du site. 3 Développez l'icône Bureau (Windows) ou Ordinateur (Macintosh) pour afficher les disques disponibles. 4 Ouvrez les dossiers jusqu'à atteindre le dossier de l'application Dreamweaver, puis développez le dossier Samples. 5 Dans le dossier Samples, développez le dossier GettingStarted, puis sélectionnez le dossier Code et appuyez sur Ctrl+C (Windows) ou Command+C (Macintosh) pour le copier. 6 Remontez en haut du panneau Site et sélectionnez le dossier du site. 7 Appuyez sur Ctrl+V (Windows) ou Commande+V (Macintosh) pour coller le dossier dans votre site. Affichage des pages terminées Avant de commencer, vous pouvez afficher les pages terminées pour obtenir un aperçu de leur présentation. Il n'est pas rare que les pages aient un aspect différent. Pour afficher les pages achevées : 1 Choisissez Fenêtre > Site pour ouvrir le panneau Site, s'il n'est pas déjà ouvert. 2 Développez l'icône Bureau (Windows) ou Ordinateur (Macintosh) pour afficher les disques disponibles. 3 Ouvrez les dossiers jusqu'à atteindre le dossier de l'application Dreamweaver, puis développez le dossier Samples. 4 Dans le dossier Samples, développez le dossier GettingStarted, puis le dossier FinalSite. 5 Dans le dossier FinalSite, double-cliquez sur index.htm pour l'ouvrir, puis double-cliquez sur location_comp.htm. Dreamweaver affiche les pages dans la fenêtre de document. 6 Fermez les pages lorsque vous avez terminé. Modification de code dans Dreamweaver 53 Ouverture de plusieurs pages Utilisez le panneau Site pour ouvrir les pages dont vous aurez besoin au cours de cette leçon. Pour ouvrir des pages : 1 Choisissez Fenêtre > Site pour ouvrir le panneau Site, s'il n'est pas déjà ouvert. 2 Dans votre site, développez le dossier Code. 3 Double-cliquez sur index.htm pour l'ouvrir, puis double-cliquez sur location_start.htm. Vous aurez besoin de ces deux fichiers dans le cadre de cette leçon. 4 Dans la fenêtre de document, cliquez sur le bouton Afficher le mode Code dans la barre d'outils ou choisissez Affichage > Code pour basculer en mode Code et afficher le code source du fichier. 5 Pour passer rapidement d'une page à l'autre, appuyez sur Ctrl+Tab ou cliquez sur l'onglet en bas de la page (Windows uniquement). Remarque : vous devez agrandir la page au maximum pour afficher les onglets. Ajout d'une image en la faisant glisser Vous allez ajouter dans la page d'accueil un bouton Locations qui ressemble aux boutons Home et Customer Service. Vous pouvez taper le code directement dans la page, cliquer sur l'icône Image de la barre Insertion ou utiliser l'éditeur de balises d'image (IMG) (sélectionnez l'image, cliquez dessus avec le bouton droit de la souris sous Windows ou cliquez dessus tout en maintenant la touche Contrôle enfoncée sur un Macintosh, puis choisissez Modifier la balise). Vous pouvez également faire glisser l'image à partir de son dossier. Pour ajouter une image en la faisant glisser : 1 Ouvrez index.htm en mode Code, s'il n'est pas déjà ouvert. 2 Dans le groupe de panneaux Fichiers, ouvrez le panneau Actifs (Fenêtre > Actifs). 3 Sélectionnez le fichier d'image btnLocations.jpg. 4 Faites glisser le fichier d'image vers la page de code, puis déposez-le dans la troisième cellule du premier tableau. Conseil : recherchez le code correspondant aux boutons Home et Customer Service. Déposez l'image Locations avant la balise de fermeture </td> de la cellule de tableau qui suit les deux cellules correspondant à ces boutons. Dreamweaver insère le code au niveau du point d'insertion pour créer l'image. 5 54 Choisissez Fichier > Enregistrer. Chapitre 3 Ajout d'un lien avec le sélecteur de balises Vous allez maintenant établir un lien entre le bouton que vous venez d'ajouter et la page Locations. Vous pouvez saisir manuellement le code d'un lien, utiliser la barre Insertion pour ajouter un lien ou faire appel au sélecteur de balises. Pour rédiger du code à l'aide du sélecteur de balises : 1 Ouvrez index.htm en mode Code, s'il n'est pas déjà ouvert. 2 Dans le code du premier tableau, recherchez le code correspondant au bouton Locations que vous avez inséré à la section précédente, puis sélectionnez-le. Remarque : la totalité de la balise <img> doit être mise en surbrillance. 3 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. 4 Choisissez Balises HTML > Eléments de page > Général, puis sélectionnez A dans le volet droit. Remarque : vous pouvez également choisir Balises HTML puis sélectionner la balise A dans le volet droit, sans sélectionner au préalable Eléments de page > Général. 5 Cliquez sur Insérer. L'éditeur de balises s'ouvre pour la balise d'ancrage (<a>). 6 Dans le champ de texte HREF, tapez location_start.htm ou cliquez sur le bouton Parcourir pour localiser le fichier. Remarque : si vous souhaitez définir un lien vers une page Web, tapez l'URL de la page. 7 Cliquez sur OK pour fermer l'éditeur de balises. 8 Cliquez sur Fermer pour fermer le sélecteur de balises. Dreamweaver insère le code dans votre page pour créer le lien. 9 Dans la fenêtre de document, choisissez Fichier > Enregistrer. Modification de code dans Dreamweaver 55 Modification d'une balise Vous allez maintenant apprendre à utiliser l'inspecteur de balises pour trouver une balise dans la page Locations et la modifier rapidement. Pour modifier une balise à l'aide de l'inspecteur de balises : 1 Ouvrez location_start.htm en mode Code, s'il n'est pas déjà ouvert. 2 Procédez de l'une des manières suivantes pour ouvrir l'inspecteur de balises, si ce n'est pas déjà fait : • Choisissez Fenêtre > Inspecteur de balises. • Dans le groupe de panneaux Code, cliquez sur l'onglet Inspecteur de balises. L'inspecteur de balises affiche une vue structurée de toutes les balises de votre page, ainsi que les attributs de chacune d'elles. 3 56 La fenêtre de document étant affichée en mode Code, recherchez le texte correspondant à l'en-tête « Rental Locations ». Chapitre 3 4 Sélectionnez l'entité d'espace insécable (&nbsp;) entre les balises de paragraphe qui suivent l'en-tête : <p><FONT SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p> <p> &nbsp;</p> 5 Choisissez Insertion > Tableau puis, dans la boîte de dialogue Insérer un tableau, cliquez sur OK pour accepter les valeurs par défaut. Dreamweaver insère le code du tableau. 6 Cliquez sur le bouton Actualiser dans la barre d'outils. Le panneau Inspecteur de balises est mis à jour afin d'activer la balise Table que vous venez d'insérer. Une liste d'attributs apparaît sous la balise. 7 Dans la fenêtre de document, cliquez sur certaines balises pour voir comment l'inspecteur de propriétés met à jour la balise et les attributs qu'il affiche, puis cliquez à nouveau sur la balise Table afin d'afficher ses attributs dans l'inspecteur de propriétés. 8 Dans le panneau Inspecteur de balises, cliquez sur le champ de texte vide en regard de l'attribut align. Une flèche de menu déroulant s'affiche. 9 Cliquez dessus et choisissez center. Dreamweaver modifie le code dans la fenêtre de document. 10 Cliquez sur le bouton Afficher le mode Création dans la barre d'outils ou choisissez Affichage > Création pour afficher la table. 11 Dans la fenêtre de document, choisissez Fichier > Enregistrer. 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 location_start.htm en mode Code, s'il n'est pas déjà ouvert. 2 Dans la fenêtre de document, sélectionnez le texte « bgcolor » dans la balise body. 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 choisissez Référence dans le menu contextuel. Le panneau Référence qui s'ouvre affiche des informations sur l'attribut bgcolor. Remarque : vous pouvez également choisir Fenêtre > Référence pour ouvrir le panneau Référence. Ce panneau est intégré à l'environnement de développement du groupe de panneaux Code. Modification de code dans Dreamweaver 57 4 Pour obtenir des informations sur un attribut de balise spécifique, sélectionnez-le dans le menu déroulant. Ajout d'une image à l'aide des indicateurs de code Dans cette leçon, vous allez ajouter un logo dans la page Locations. Pour ajouter manuellement du code, cliquez dans la fenêtre de document et commencez à taper le code. Vous pouvez également faire appel à la nouvelle fonction Indicateurs de code dans Dreamweaver pour aller plus vite. Pour rédiger du code à l'aide des indicateurs de code : 1 Ouvrez location_start.htm en mode Code, s'il n'est pas déjà ouvert. 2 Recherchez le code correspondant à la ligne du tableau qui contient le texte « The International Car Rental Specialists », sélectionnez l'entité d'espace insécable (&nbsp;) dans le code correspondant à la cellule qui précède ce texte : <td rowspan="2" bgcolor="#424973">&nbsp;</td> 3 Tapez le crochet d'ouverture (<) de la balise d'image. Une liste de balises apparaît au niveau du point d'insertion. Remarque : vous pouvez définir le délai en choisissant Edition > Préférences ou Dreamweaver > Préférences (Mac OS X), puis en sélectionnant la catégorie Indicateurs de code à gauche. Pour ouvrir les indicateurs de code, appuyez sur la barre d'espace, et pour les fermer, appuyez sur la touche Echap. 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, tapez la première lettre de son nom. 5 58 Appuyez sur la barre d'espace pour afficher la liste des attributs de la balise. Chapitre 3 6 Tapez src puis appuyez sur Entrée (Windows) or Retour (Macintosh). Un bouton Parcourir apparaît sous le code que vous venez de taper. 7 Sélectionnez le bouton Parcourir pour naviguer vers le fichier d'image ou entrez le chemin du fichier d'image, Assets/images/logo.jpg. 8 Appuyez sur la barre d'espace, sélectionnez l'attribut alt, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 9 Tapez Logo, puis déplacez le curseur à droite du point d'interrogation qui suit le mot Logo. 10 Appuyez sur la barre d'espace, sélectionnez l'attribut align, puis appuyez sur Entrée (Windows) ou Retour (Macintosh). Une liste de valeurs correspondant à l'attribut align apparaît. 11 Sélectionnez top dans la liste, puis appuyez sur Entrée (Windows) ou Retour (Macintosh). 12 Tapez un crochet de fermeture (>) pour terminer la balise. 13 Dans la fenêtre de document, choisissez Fichier > Enregistrer. Pour ajouter un attribut à une balise, placez le point d'insertion juste avant le crochet de fermeture (>) de la balise et appuyez sur la barre d'espace. Une liste d'attributs s'affiche. 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 dans la barre d'outils ou choisissez Affichage > Création. • Affichez la page dans un navigateur Web en appuyant sur la touche F12. Pour fermer le navigateur et repasser au code, appuyez sur Alt-F4 (Windows uniquement). Ajout d'un lien avec la barre Insertion Vous allez maintenant ajouter un lien à l'image de logo que vous avez insérée pour que la page d'accueil s'ouvre lorsque l'utilisateur clique sur l'image. Vous pouvez placer dans le code une balise d'ancrage (<a>) autour de la balise d'image, puis définir les attributs de la balise d'ancrage avec ou sans l'aide des indicateurs de code. Vous pouvez également utiliser la barre Insertion pour ajouter un lien. Pour rédiger du code à l'aide de la barre Insertion : 1 Ouvrez location_start.htm en mode Code, s'il n'est pas déjà ouvert. 2 Mettez en surbrillance le code correspondant à l'image logo.jpg que vous avez insérée. Remarque : la totalité de la balise <img> doit être mise en surbrillance. Modification de code dans Dreamweaver 59 3 Dans l'onglet Commun de la barre Insertion, cliquez sur le bouton Hyperlien. La balise d'image est indiquée dans la boîte de dialogue Hyperlien qui s'affiche. 4 Dans la zone de texte Lien, tapez index.htm ou cliquez sur l'icône de dossier pour rechercher le fichier. Remarque : pour définir un lien vers une page Web, tapez l'URL de la page. 5 Cliquez sur OK. Dreamweaver insère le code dans votre page pour créer le lien autour de l'image. 6 Choisissez Fichier > Enregistrer. 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 le code : 1 Ouvrez une page en mode Code. 2 Choisissez Fichier > Imprimer le code. Conseil : pour imprimer les numéros de ligne, choisissez Affichage > Options d'affichage de code > Numéros de lignes avant d'imprimer. Documentation connexe Pour plus d'informations sur les fonctions de codage manuel dans Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). Pour plus d'informations sur les possibilités d'accès au code au cours d'une session de travail dans l'environnement de conception visuel de Dreamweaver, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). 60 Chapitre 3 CHAPITRE 4 Description des applications Web Une application Web est un ensemble de pages qui interagissent avec l'utilisateur, 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 : • • • • • • « Définition d'une application Web », page 61 « Fonctionnement d'une application Web », page 63 « Accès à une base de données », page 65 « Création de pages dynamiques », page 67 « Choix d'une technologie de serveur », page 68 « Termes fréquemment utilisés », page 69 Définition d'une application Web Une application Web est un site Web qui contient des pages stockées sur un serveur Web 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ée 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. 61 Utilisations courantes des applications Web Les applications Web peuvent être utilisées de diverses façons par les utilisateurs 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 utilisateurs de rechercher, d'organiser et de parcourir le contenu à leur convenance. Les exemples incluent des réseaux intranet d'entreprises, tels Microsoft MSDN (http://www.msdn.microsoft.com) et Amazon.com (http:// www.amazon.com). • Collecter, enregistrer et analyser des données fournies par les utilisateurs. Auparavant, les données saisies dans des formulaires HTML étaient envoyées sous forme de messages électroniques 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 rapports Web 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, comme par exemple The Economist (http:// www.economist.com) et CNN (http://www.cnn.com). Exemple d'application Web Claude, professionnel de la création Web, utilise Dreamweaver 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 courrier électronique. A la fin du mois, Julie rassemble tous les courriers électroniques 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 courriers électroniques à 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, logiciel doté des outils nécessaires à la création rapide et facile de ce type d'applications. 62 Chapitre 4 Fonctionnement d'une application Web Une application Web est un ensemble de pages ordinaires et dynamiques. Une page ordinaire n'est pas modifiée lorsqu'un utilisateur 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é. Traitement des pages Web ordinaires Un site Web ordinaire 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 et clique sur OK. Le contenu final d'une page Web est déterminée par le créateur de la page et n'est pas modifié lorsqu'un utilisateur la sollicite. Exemple : <html> <head> <title>Call Department</title> </head> <body> <strong>Call Department</strong><br> Talk to someone in Sales. </body> </html> Chaque ligne du code HTML de la page est rédigé 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, par exemple, peuvent animer une page statique. Cependant, ce guide qualifie une page de statique si elle est adressée au navigateur sans modifications. Description des applications Web 63 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 : Navigateur Web Etape 1 - Le navigateur Web sollicite une page statique. Demande Réponse SERVEUR WEB Etape 2 - Le serveur Web localise la page. Etape 3 - Le serveur Web envoie la page au navigateur requérant. <HTML> <p>Hi </HTML> Page statique Dans le cas des applications Web, certaines lignes de code ne sont pas déterminées au moment où l'utilisateur sollicite la page. Ces lignes doivent être déterminées via un mécanisme avant que la page ne soit transmise au navigateur. Ce mécanisme est présenté dans la section suivante. Traitement des pages dynamiques Lorsqu'un serveur Web reçoit une requête de page Web ordinaire, il transmet simplement cette page au navigateur requérant. Le serveur Web réagit différemment lorsqu'il reçoit une requête de page dynamique : 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. 64 Chapitre 4 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 5 - Le serveur Web envoie la page achevée au navigateur ayant émis la demande. 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. 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 « Guide du débutant pour les bases de données » dans l'aide (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. 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 Word ouvert dans Bloc-notes est indéchiffrable. Le serveur d'application peut communiquer uniquement via un pilote de base de données. Un pilote de base de données est un logiciel qui 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 sous-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 dans la page dynamique. Description des applications Web 65 Voici un exemple simple de requête de base de données rédigée en SQL : SELECT lastname, firstname, fitpoints FROM employees Cette instruction crée un jeu d'enregistrements à trois colonnes et le remplit de lignes comportant le nom, le prénom et les points de mise en forme de tous les employés de la base de données. Pour plus d'informations, voir « Initiation à SQL » dans l'aide (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 : Navigateur Web Etape 1 - Le navigateur Web sollicite une page dynamique. Demande Réponse SERVEUR WEB 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. <HTML> <code> </HTML> <HTML> <p>Hi </HTML> Serveur d'application Requête Jeu d'enregistrement Pilote de base de données Base de données 66 Chapitre 4 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. Vous pouvez utiliser pratiquement toutes les bases de données avec votre application Web, si vous possédez les pilotes de base de données requis. Si vous prévoyez de créer de petites applications peu onéreuses, vous pouvez utiliser une base de données fichier, créée par exemple sous Microsoft Access. Si vous prévoyez de créer des applications stratégiques robustes, vous pouvez utiliser une base de données serveur, créée par exemple avec Microsoft SQL Server, Oracle 9i ou MySQL. Si votre base de données réside sur un système autre que votre serveur Web, assurez-vous qu'il existe une connexion rapide entre les deux systèmes pour un fonctionnement efficace et rapide de votre application Web. Création de pages dynamiques La création d'une page dynamique consiste à écrire d'abord le code HTML, puis à ajouter les scripts 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 ci-dessous utilise le code CFML (ColdFusion Markup Language) : <html> <body> <b>Call Department</b><br> <!--- embedded instructions start here ---> <cfset department="Sales"> <cfoutput> Talk to someone in #department#. </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 « Sales » à cette variable. 2 Ecriture de la valeur de la chaîne de la variable, « Sales », dans le code HTML. Le serveur d'application renvoie la page suivante au serveur Web : <html> <body> <b>Call Department</b><br> Talk to someone in Sales. </body> </html> Le serveur Web transmet la page au navigateur requérant, lequel l'affiche de la manière suivante : Call Department Talk to someone in Sales. Description des applications Web 67 Le langage de script ou de balise utilisé dépend de la technologie du serveur. Les langages les plus employés pour les cinq technologies de serveur prises en charge par Dreamweaver MX 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 68. Dreamweaver peut rédiger les scripts ou les balises côté serveur nécessaires au fonctionnement de vos pages, mais vous pouvez aussi les écrire manuellement dans l'environnement de codage Dreamweaver. Choix d'une technologie de serveur Vous pouvez utiliser Dreamweaver MX 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. Votre choix de 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, 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 MX (version Windows uniquement) et sur le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/fr/software/coldfusion/. Pour plus d'informations, voir « Installation d'un serveur d'application » dans l'aide (Aide > Utilisation de Dreamweaver). Pour en savoir plus sur ColdFusion, consultez la documentation ColdFusion dans Dreamweaver (Aide > Utilisation de ColdFusion) ou visitez le site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/fr/software/coldfusion/. Pour en savoir plus sur ASP.NET, visitez le site Web Microsoft à l'adresse suivante : http://asp.net/ (en anglais). 68 Chapitre 4 Pour en savoir plus sur ASP, visitez le site Web Microsoft à l'adresse suivante : http:// msdn.microsoft.com/library/default.asp?URL=/library/psdk/iisref/aspguide.htm (en anglais). Pour en savoir plus sur JSP, visitez le site Web de Sun à l'adresse suivante : http://java.sun.com/ products/jsp/ (en anglais). Pour en savoir plus sur PHP, visitez le site Web de PHP à l'adresse suivante : http://www.php.net/ (en anglais). Termes fréquemment utilisés Cette section répertorie les termes fréquemment employé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 63. 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 de données et chaque colonne correspond à un champ de l'enregistrement, tel qu'illustré ci-dessous. champs (colonnes) Enregistrements (lignes) 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 pilote de base de données Un système de gestion de base de données (SGBD ou système de base de données) est un logiciel utilisé pour créer et manipuler des bases de données. Les systèmes de base de données les plus courants sont Microsoft Access, Oracle 9i et MySQL. 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 requête de base de données Une page dynamique est une page Web qui est personnalisée lors de son exécution 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 63. Description des applications Web 69 Un jeu d'enregistrements est un sous-ensemble de données extraites d'une ou plusieurs tables d'une base de données, tel qu'illustré ci-dessous : Table de base de données Table de jeux d'eregistrements est une base de données contenant plusieurs tables qui partagent des données. La base de données suivante est relationnelle car deux tables partagent la colonne DepartmentID. Une base de données relationnelle est une technologie utilisée par un serveur d'application pour modifier des pages dynamiques lors de l'exécution. Une technologie de serveur L'environnement de développement Dreamweaver MX prend en charge les technologies de serveur suivantes : • • • • • Macromedia ColdFusion Microsoft ASP.NET Pages ASP (Active Server Pages) de Microsoft Pages JSP (JavaServer Pages) de Sun PHP (PHP Hypertext Preprocessor) 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 lors de son exécution par un serveur d'application avant que la page ne soit envoyée à un navigateur. Pour plus d'informations, voir « Traitement des pages Web ordinaires », page 63. 70 Chapitre 4 est un site Web qui contient des pages stockées sur un serveur Web 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ée page dynamique. Une application 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 et clique sur OK. Les serveurs Web les plus courants sont Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server et iPlanet Web Server. Description des applications Web 71 72 Chapitre 4 CHAPITRE 5 Création d'applications Web dans Dreamweaver MX Dans ce chapitre, vous allez apprendre à utiliser Dreamweaver MX pour créer rapidement des applications Web dynamiques reposant sur des bases de données. Le développement d'applications Web dynamiques permet notamment de présenter au format Web des informations stockées dans des bases de données. Lorsque vous aurez terminé cette leçon, vous saurez comment incorporer des informations de base de données à votre site Web. Vous développerez des applications Web pour le site Global Car Rental en utilisant une base de données contenant trois tableaux de données (locations, comments et regions). Vous allez également apprendre à créer une requête SQL simple afin d'extraire des informations de la base de données. Dans cette leçon, vous allez créer les pages dynamiques suivantes : • Une page d'insertion qui autorise les visiteurs du site à envoyer des commentaires à la société ; • Une page détaillée présentant la liste des commentaires des clients et les coordonnées des personnes joignables. Avant de commencer Les guides pratiques de configuration ajoutés à la fin du guide Bien démarrer avec Dreamweaver MX 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. Chapitre 7, « Configuration d'un exemple de site ColdFusion », page 95 Chapitre 8, « Configuration d'un exemple de site ASP.NET », page 105 Chapitre 9, « Configuration d'un site ASP », page 115 Chapitre 10, « Configuration d'un exemple de site JSP », page 127 Chapitre 11, « Configuration d'un exemple de site PHP », page 139 Effectuez 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. Les exemples d'écran fournis dans ce chapitre représentent les boîtes de dialogue Macromedia ColdFusion. Toutefois, vous pouvez suivre les leçons de ce chapitre avec tous les autres modèles de serveur pris en charge par Dreamweaver MX, à savoir ColdFusion, PHP, ASP.NET, ASP, and JSP. 73 Ouverture d'un document de travail Pour commencer, nous vous conseillons de créer une liste des enregistrements stockés dans la base de données. Dans l'application que vous créez dans ce chapitre, vous allez afficher la liste des informations dans le tableau des commentaires des clients de la base de données. Ensuite, vous allez créer une 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 Procédez de l'une des manières suivantes pour ouvrir le panneau Site : • Dans le groupe de panneaux Fichiers, cliquez sur la flèche d'agrandissement pour afficher le panneau Site. • Choisissez Fenêtre > Site. • Appuyez sur la touche F8. Le panneau Site s'ouvre. 2 Dans le menu déroulant Site, choisissez le site Global Car que vous avez défini pour les pages de votre serveur. 3 Dans le panneau Site, double-cliquez sur le fichier customerComment 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 ou Afficher les modes Code et Création 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. Au cours des étapes suivantes, vous modifierez la page partiellement terminée. 74 Chapitre 5 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 sous-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 comprend des critères de recherche qui définissent les informations incluses dans le jeu d'enregistrements. Vous pouvez ensuite utiliser les informations extraites comme source de contenu pour vos pages dynamiques. Dreamweaver MX 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 Global. 1 Dans Dreamweaver, ouvrez la boîte de dialogue Jeu d'enregistrements ou Ensemble de données (ASP.NET) en procédant de l'une des manières suivantes : • Dans l'onglet Application de la barre Insertion, cliquez sur le bouton Jeu d'enregistrements ou Ensemble de données (ASP.NET). • Choisissez Fenêtre > Liaisons pour ouvrir le panneau Liaisons, puis cliquez sur le bouton plus (+) et choisissez Jeu d'enregistrements ou Ensemble de données (ASP.NET). • Cliquez sur la flèche d'agrandissement du groupe de panneaux Application puis, dans le panneau Liaisons, cliquez sur le bouton plus (+) et choisissez Jeu d'enregistrements ou Ensemble de données (ASP.NET). La boîte de dialogue Jeu d'enregistrements ou Ensemble d'enregistrements s'affiche. Si cette boîte de dialogue semble plus complexe que celle de l'illustration ci-après, cliquez sur le bouton Simple. 2 Dans la zone de texte Nom, tapez rsComments. Création d'applications Web dans Dreamweaver MX 75 3 Dans le menu déroulant Source de données (ColdFusion) ou Connexion (autres types de pages de serveur), choisissez connGlobal. 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. 4 Dans le menu déroulant Tableau, COMMENTS est sélectionné. 5 Dans Colonnes, le bouton radio Tout est sélectionné. Acceptez les valeurs par défaut pour effectuer une requête sur l'ensemble du jeu d'enregistrements. 6 Dans le menu déroulant Trier, choisissez LAST_NAME puis, dans le second menu déroulant, choisissez Croissant. Les enregistrements extraits affichent la liste des données en fonction du nom de famille des clients. 76 Chapitre 5 7 Cliquez sur Tester pour tester le jeu ou l'ensemble d'enregistrements. Les enregistrements de la base de données qui correspondent aux critères de sélection du jeu ou de l'ensemble d'enregistrements sont affichés dans la fenêtre Tester l'instruction SQL. 8 Cliquez sur OK pour fermer la fenêtre Tester l'instruction SQL. 9 Cliquez sur OK pour fermer la boîte de dialogue Jeu d'enregistrements ou Ensemble d'enregistrements. Le jeu d'enregistrements s'affiche dans le panneau Liaisons. Conseil : si tous les champs du jeu d'enregistrements ne sont pas affichés, cliquez sur le bouton plus (+) en regard de Jeu d'enregistrements (rsComments) pour développer la vue. Création d'applications Web dans Dreamweaver MX 77 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 customerComment, placez le point d'insertion après « Customer Comments », puis appuyez sur Entrée (Windows) ou Retour (Macintosh) pour définir l'endroit où le tableau doit être inséré. 2 Insérez un tableau en procédant de l'une des manières suivantes : • Dans la barre Insertion, cliquez sur l'onglet Commun, puis cliquez sur le bouton Tableau ou faites-le glisser vers le document. • Dans la barre Insertion, cliquez sur l'onglet M. en forme, 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 Marge intérieure des cellules, tapez 2. Dans le champ Colonnes, tapez 4. Dans le champ Espacement entre les cellules, tapez 2. Dans le champ Largeur, tapez 80. Une fois les champs de la boîte de dialogue renseignés, elle doit ressembler à la suivante : 78 Chapitre 5 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 le document (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 : • Choisissez 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. 3 Reprenez l'étape 2 pour ajouter les champs LAST_NAME, EMAIL et COMMENTS au tableau. Votre page doit ressembler à la suivante : 4 Enregistrez votre document. Création d'applications Web dans Dreamweaver MX 79 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 la ligne du tableau comme région répétée. La page va répéter les enregistrements de date de chaque enregistrement correspondant aux critères de recherche du 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 : • Placez le pointeur dans la première cellule, puis faites glisser la souris vers la droite pour sélectionner toutes les cellules de la ligne. • Cliquez dans l'une des cellules puis, dans le sélecteur de balises, cliquez sur la balise <tr>. • Placez le pointeur à gauche de la ligne du tableau puis, lorsqu'il se transforme en une flèche, cliquez sur la bordure de la ligne du tableau pour sélectionner la ligne. 2 Définissez 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 barre Insertion de l'onglet Application, 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, acceptez les valeurs par défaut, puis cliquez sur OK. La ligne du tableau apparaît sous la forme d'un contour tabulé. 4 80 Enregistrez votre document. Chapitre 5 Affichage des pages Vous allez maintenant enregistrer les pages, puis les afficher pour vous assurer du bon fonctionnement de l'application que vous venez de développer. Pour afficher les pages comme si elles étaient traitées par le serveur, utilisez l'affichage des données dynamiques. 1 Le fichier customerComment étant ouvert, procédez de l'une des manières suivantes pour afficher les données dans vos pages : • Dans la barre d'outils du document, cliquez sur le bouton Affichage des données dynamiques. • Choisissez Affichage > Live Data. La page est mise à jour et affiche une liste des données client extraites de la base de données. Création d'un formulaire d'insertion d'enregistrement Vous allez maintenant créer une page de commentaires client pour le site Web Global. Vous voulez que les clients saisissent des commentaires et les insèrent directement dans la base de données. Vous allez connecter cette page à la table Comments de la base de données Global. 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 sont liés à 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 lié aux champs d'une base de données. L'objet d'application vous permet de sélectionner les champs à inclure dans le formulaire et les champs d'étiquette, ainsi que le type 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. Création d'applications Web dans Dreamweaver MX 81 1 Dans la panneau Site, localisez le fichier customerInsert, 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 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é. 3 Procédez de l'une des manières suivantes pour insérer un objet d'insertion de formulaire : • Dans l'onglet Application de la barre Insertion, cliquez sur le bouton Formulaire d'insertion d'enregistrement. • Choisissez Insertion > Objets d'application > 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 connGlobal. 5 Dans le menu déroulant Tableau, assurez-vous que COMMENTS est sélectionné. 6 Dans la zone Après l'insertion, aller à ou En cas de réussite, aller à : (ASP.NET), cliquez sur Parcourir. 7 Dans la boîte de dialogue qui apparaît, sélectionnez le fichier insertOK, puis cliquez sur OK pour fermer la boîte de dialogue. Vous venez de sélectionner une page qui indiquera aux visiteurs du site que les informations qu'ils ont envoyées ont effectivement été reçues. 82 Chapitre 5 Création du formulaire d'insertion Dans la section Champs du formulaire de la boîte de dialogue Formulaire d'insertion d'enregistrement, définissez le formulaire dans lequel les visiteurs doivent saisir des informations. 1 Dans cette boîte de dialogue, 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 le champ Etiquette, tapez First Name. Cette étiquette apparaîtra dans le formulaire HTML en regard du champ 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 champ 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 d'autres types de pages de serveur, acceptez l'option par défaut Champ de texte du menu déroulant Afficher en tant que, puis dans le menu déroulant Envoyer en tant que, acceptez l'option Texte affichée par défaut. Création d'applications Web dans Dreamweaver MX 83 6 Dans le champ Valeur par défaut, tapez Enter your first name pour indiquer à l'utilisateur le type d'information à fournir. Lorsque vous avez complété tous les champs, l'entrée FIRST_NAME ressemble à la suivante : 7 Reprenez les étapes 3 à 6 pour les champs LAST_NAME et EMAIL du formulaire. Dans la zone de texte Valeur par défaut, saisissez le texte qui doit apparaître dans le champ lorsqu'il s'affiche dans le formulaire. 8 Sélectionnez COMMENTS pour définir des valeurs pour ce champ. 9 Dans le champ Etiquette, saisissez Comments. 10 Définissez des valeurs 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 d'autres types de pages de serveur, 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 Texte affichée par défaut. 84 Chapitre 5 11 Dans la zone de texte Valeur par défaut, saisissez le texte qui doit apparaître dans ce champ du formulaire ou laissez ce champ vide. 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. L'objet d'application Formulaire d'insertion d'enregistrement est inséré dans le document. 13 Enregistrez votre document. Création d'applications Web dans Dreamweaver MX 85 Copie des fichiers sur le serveur Vous allez à présent enregistrer vos modifications et 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 Site, choisissez customerInsert, puis cliquez sur le bouton Placer le(s) fichier(s) (flèche bleue orientée vers le haut) pour copier le fichier local sur le 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 creates a Connections dans votre dossier local. Vous devez également copier ce dossier sur votre serveur distant pour que l'application Web fonctionne. Dans le panneau Site, sélectionnez le dossier Connections, puis cliquez sur le bouton Placer le(s) fichier(s) pour copier le dossier sur votre serveur. 3 Le fichier customerInsert étant sélectionné, choisissez Fichier > Aperçu dans le navigateur ou appuyez sur F12 (Windows) pour afficher votre document. 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 insertOK apparaît. Affichage de la mise à jour Observons les modifications apportées à la base de données. Pour ce faire, ouvrez le document customerComment 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 Site, double-cliquez sur customerComment, 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 connGlobal, 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. 86 Chapitre 5 Documentation connexe Le guide Bien démarrer avec Dreamweaver MX décrit un petit ensemble d'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 dans Dreamweaver, voir « Création de votre premier site Web dans Dreamweaver », page 19. Pour plus d'informations sur l'utilisation des fonctions de codage de Dreamweaver, voir « Modification de code dans Dreamweaver », page 51. Pour plus d'informations sur les rubriques présentées dans cette partie du guide Bien démarrer avec Dreamweaver MX, consultez les rubriques suivantes dans le guide en ligne Utilisation de Dreamweaver MX (Aide > Utilisation de Dreamweaver MX) : • • • • • • Stockage et récupération des données spécifiques à une page Définition de sources de données dynamiques Ajout d'un contenu dynamique à une page Web Création de liens de navigation de jeu d'enregistrements Création rapide d'une page d'insertion Création d'une page d'insertion élément par élément Création d'applications Web dans Dreamweaver MX 87 88 Chapitre 5 CHAPITRE 6 Installation d'un serveur Web sous Windows 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. Les utilisateurs Macintosh peuvent utiliser un serveur Web sur un ordinateur réseau ou un serveur d'hébergement Web. Les utilisateurs de Macintosh OS X 10.1 peuvent utiliser le serveur Web Apache sur leur ordinateur local. Pour plus d'informations sur le serveur Apache, visitez le site Web Apache à l'adresse suivante : http://httpd.apache.org/ (en anglais). Notez cependant que le dossier racine du serveur Apache diffère de celui des serveurs Microsoft traités dans ce guide (Inetpub\wwwroot). Ce chapitre contient les sections suivantes : • • • • • « Prise en main », page 89 « Installation de Personal Web Server », page 90 « Installation d'Internet Information Server », page 91 « Test du serveur Web », page 91 « Fonctions élémentaires du serveur Web », page 92 Remarque : Macromedia ne fournit pas de support technique pour les logiciels tiers tels que Microsoft Personal Web Server. Si vous avez besoin d'aide, contactez le support technique de Microsoft. Prise en main 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. Remarque : Windows Millennium Edition (Me) ne prend en charge aucune version de PWS ou IIS. Pour plus d'informations, reportez-vous au site Web Microsoft à l'adresse suivante : http://support.microsoft.com/ default.aspx?scid=kb;EN-US;q266456 (en anglais). 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. 89 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 90. • Windows NT Workstation : téléchargez NT 4.0 Option Pack depuis le site Web Microsoft à l'adresse suivante : http://www.microsoft.com/ntserver/nts/downloads/recommended/ nt4optpk/default.asp (en anglais). Option Pack inclut le fichier d'installation PWS. Installez ensuite le serveur Web. Pour obtenir des instructions, voir « Installation de Personal Web Server », page 90. Remarque : Service Pack 6 ou supérieur doit être installé sur votre ordinateur pour installer NT 4.0 Option Pack. Téléchargez Service Pack depuis le site Web Microsoft à l'adresse suivante : http://www.microsoft.com/ ntserver/nts/downloads/default.asp (en anglais). • Windows NT Server : IIS devrait être installé et exécuté sur votre système. Dans le cas contraire, installez-le ou demandez à votre administrateur système de le faire. • Windows 2000 : IIS est peut-être installé sur votre système. Sinon, vous devez l'installer. Pour plus d'informations, voir « Installation d'Internet Information Server », page 91. • Windows XP Professionnel : IIS est peut-être installé sur votre système. Sinon, vous devez l'installer. Pour plus d'informations, voir « Installation d'Internet Information Server », page 91. Installation de Personal Web Server Les utilisateurs de Windows 98 et Windows NT Workstation doivent installer PWS. Si vous utilisez Windows NT Server, Windows 2000 ou Windows XP Professionnel, installez IIS à la place. Pour plus d'informations, voir « Installation d'Internet Information Server », page 91. Remarque : Windows Millennium Edition (Me) ne prend en charge aucune version de PWS. Pour plus d'informations, reportez-vous au site Web Microsoft à l'adresse suivante : http://support.microsoft.com/ default.aspx?scid=kb;EN-US;q266456 (en anglais). Vous pouvez installer PWS sur le même système Windows qui exécute Dreamweaver MX. Assurez-vous que le système dispose de Microsoft Internet Explorer 4.01 ou supérieur, sinon PWS ne sera pas installé. Pour installer PWS : 1 Double-cliquez sur le fichier d'installation de PWS du CD-ROM de Windows 98 ou sur le fichier que vous avez téléchargé à partir du site Web de Microsoft. 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é. Voir « Test du serveur Web », page 91. 90 Chapitre 6 Installation d'Internet Information Server Les utilisateurs de Windows NT Server, Windows 2000 et Windows XP Professionnel doivent installer IIS. Si vous utilisez Windows 98 ou NT Workstation, installez PWS à la place. Pour plus d'informations, voir « Installation de Personal Web Server », page 90. Si vous utilisez Windows NT Server, IIS devrait être installé et exécuté sur votre système. Dans le cas contraire, installez-le ou demandez à votre administrateur système de le faire. Si vous utilisez Windows 2000 ou Windows XP Professionnel, assurez-vous qu'IIS est installé et exécuté 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 Sous Windows 2000, choisissez Démarrer > Paramètres > Panneau de configuration > Ajout/ Suppression de programmes ; sous Windows XP, choisissez Démarrer > Panneau de configuration > Ajout/Suppression de programmes. 2 Choisissez Ajouter/Supprimer des composants Windows. 3 Cochez la case IIS et suivez les instructions d'installation. Vous pouvez tester le serveur Web après l'avoir installé. Test du serveur Web Pour tester le serveur Web, créez une page HTML simple dotée d'une extension de fichier .htm ou .html et enregistrez-la dans le dossier Inetpub\wwwroot de votre ordinateur. Cette page HTML peut comporter une seule ligne, par exemple : <p>Mon serveur Web fonctionne.</p> Enregistrez la page sous le nom monFichierTest.htm. 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.htm 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 kojak-pc, entrez l'URL suivante dans votre navigateur : http://kojak-pc/monFichierTest.htm Remarque : pour plus d'informations sur les noms d'ordinateurs, voir « Fonctions élémentaires du serveur Web », page 92. 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. 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. 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. Installation d'un serveur Web sous Windows 91 Fonctions élémentaires du serveur Web Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Un serveur Web est parfois appelé serveur HTTP. Supposons que vous souhaitez utiliser PWS pour développer des applications Web. Si le serveur est lancé, une icône apparaît dans le coin inférieur droit de la barre d'état système de votre bureau, indiquant ainsi que PWS est en cours d'exécution. L'icône ressemble à une main tenant une page Web. Un double-clic sur cette icône permet de lancer Personal Web Manager, que vous pouvez utiliser pour gérer vos pages Web. Voici un aperçu de Personal Web Manager : Le nom par défaut de votre serveur Web est le nom de votre ordinateur (cnadeau_pc1, dans cet exemple). 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 (ou est un alias du) dossier racine du serveur, lequel est généralement : 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://monServeur/monFichier Par exemple, si le nom du serveur est mer_noire et qu'une page Web intitulée soleil.htm 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.htm 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.htm est stocké dans un sous-dossier nommé gamelan, de la façon suivante : C:\Inetput\wwwroot\gamelan\soleil.htm 92 Chapitre 6 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.htm 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.htm http://localhost/gamelan/soleil.htm 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.htm). Installation d'un serveur Web sous Windows 93 94 Chapitre 6 CHAPITRE 7 Configuration d'un exemple de site ColdFusion Macromedia Dreamweaver MX 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 si vous utilisez ColdFusion avec Microsoft Internet Information Server (IIS) ou Personal Web Server (PWS). Pour plus d'informations sur ces serveurs Web, voir « Installation d'un serveur Web sous Windows », page 89. Si vous utilisez ColdFusion MX avec un serveur Web différent, voir « Configuration d'une application Web » dans l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). La configuration d'une application Web s'effectue en trois étapes. Vous devez d'abord configurer votre système. Vous devez ensuite définir un site Dreamweaver. Puis, vous devez connecter l'application à votre base de données. Ce guide de configuration suit l'ordre de ces trois étapes. Ce chapitre contient les sections suivantes : • • • • « Aide-mémoire pour la configuration à l'intention des développeurs ColdFusion », page 95 « Configuration du système », page 96 « Définition d'un site Dreamweaver », page 98 « Connexion à l'exemple de base de données », page 102 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 procédures sont décrites dans le reste du chapitre. Configurez votre système : 1 Vérifiez que vous disposez d'un serveur Web. 2 Installez le serveur d'application ColdFusion. 3 Créez un dossier racine. Définissez un site Dreamweaver : 1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur. 2 Définissez le dossier comme un 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. 95 5 Téléchargez les exemples de fichiers sur le serveur Web. Connectez-vous à la base de données : 1 Si vous disposez d'une configuration de serveur 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 Visualisez la connexion dans Dreamweaver. Configuration du système Cette section fournit des instructions pour les deux configurations de système les plus courantes : lorsque Microsoft IIS ou PWS est installé sur votre disque dur et lorsque IIS ou PWS est installé sur un ordinateur Windows distant. Si vous ne voulez pas utiliser ces configurations, voir « Configuration d'une application Web » dans l'aide (Aide > Utilisation de Dreamweaver). L'illustration suivante présente les deux configurations décrites dans cette section : Configuration locale Configuration du serveur dist (pour les utilisateurs de Windows 2000 (pour les utilisateurs de Mac ou de Windows) uniquement) WINDOW S PC Dreamweaver MX MA C ou WINDOW S PC Dreamweaver MX PWS ou IIS Serveur ColdFusion MX Dossier racine du site Web dans c:\Inetpub \wwwroot\ Accès via le réseau cces ou via FTP SERVEUR WINDOWS PWS ou IIS Serveur ColdFusion MX Dossier racine du site Web dans c:\Inetpub \wwwroot\ 96 Chapitre 7 Pour configurer votre système : 1 Vérifiez que vous disposez d'un serveur Web (voir « Recherche d'un serveur Web », page 97). 2 Installez le serveur d'application ColdFusion (voir « Installation de ColdFusion MX », page 97). 3 Créez un dossier racine (voir « Création d'un dossier racine », page 98). Remarque : l'installation du serveur Web et du serveur d'application sont des tâches uniques (non répétitives). Recherche d'un serveur Web Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Vérifiez que Microsoft IIS ou PWS est installé et exécuté sur votre disque dur ou un ordinateur Windows distant (les utilisateurs de Macintosh doivent installer Microsoft IIS ou PWS sur un ordinateur Windows distant.) Pour savoir rapidement si PWS ou IIS sont installés sur votre système, vérifiez la structure du dossier. Est-ce que votre ordinateur contient un dossier c:\Inetpub ou d:\Inetpub ? PWS et IIS créent ces dossiers lors de l'installation. Si PWS ou IIS ne sont pas installés sur le système, installez-les. Pour obtenir des instructions, voir « Installation d'un serveur Web sous Windows », page 89. Après avoir installé le serveur Web, installez le serveur d'application. Installation de ColdFusion MX Un serveur d'application est nécessaire pour traiter les pages Web dynamiques. Un serveur d'application est un logiciel qui aide un serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Lorsqu'une page 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. Assurez-vous que le serveur d'application ColdFusion MX est installé et fonctionne sur le système exécutant PWS ou IIS. (PWS ou IIS peut résider sur votre disque dur ou un ordinateur Windows distant). Vous pouvez accéder au site Web de Macromedia, à l'adresse http://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). Pour installer ColdFusion MX : 1 Fermez toutes les applications ouvertes. 2 Le cas échéant, connectez-vous au système Windows en utilisant le compte Administrateur. 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. Configuration d'un exemple de site ColdFusion 97 Création d'un dossier racine Une fois le logiciel de serveur installé, créez un dossier racine pour votre application Web, sur le système qui exécute Microsoft PWS ou IIS, et vérifiez que ce dossier jouit des autorisations nécessaires. Pour créer un dossier racine pour votre application Web : 1 Créez un dossier intitulé MySampleApp sur le système qui exécute PWS ou IIS. Utillisez de préférence l'emplacement suivant pour créer le dossier : C:\Inetpub\wwwroot\. Par défaut, votre serveur Web PWS ou IIS est configuré dans le dossier Inetpub\wwwroot. Le serveur Web répondra aux requêtes HTTP des navigateurs Web en renvoyant les pages de ce dossier ou de ses sous-dossiers. 2 Assurez-vous que les autorisations Lire et Scripts sont activées pour le dossier. Si vous utilisez PWS, lancez le Personal Web Manager en double-cliquant sur l'icône du serveur Web, dans la barre d'état système (l'icône ressemble à une main tenant une page Web). Dans le Personal Web Manager, cliquez sur l'icône Advanced. La boîte de dialogue Advanced Options s'affiche. Choisissez Home et cliquez sur Edit Properties. La boîte de dialogue Edit Properties s'affiche. Assurez-vous que les options Read et Scripts sont sélectionnées. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Execute. Si vous utilisez IIS, lancez l'outil administratif IIS (sous Windows XP, choisissez Démarrer > Panneau de configuration > Maintenance des performances > Outils administratifs > Internet Information Services). Sous Sites Web > Site Web par défaut, cliquez avec le bouton droit de la souris sur votre dossier MySampleSite et choisissez Propriétés dans le menu contextuel. Dans la zone Exécuter les autorisations, vérifiez que l'option Scripts est sélectionnée. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Scripts et exécutables. Le serveur Web est maintenant configuré pour fournir les pages Web de votre dossier racine en réponse aux requêtes HTTP des navigateurs Web. Une fois votre système configuré, vous devez définir un site Dreamweaver. Définition d'un site Dreamweaver 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 : 98 1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur (voir « Copie des exemples de fichiers », page 99). 2 Définissez le dossier comme un dossier Dreamweaver local (voir « Définition d'un dossier local », page 99). 3 Définissez votre dossier racine sur le serveur Web comme dossier distant Dreamweaver (voir « Définition d'un dossier distant », page 100). 4 Spécifiez un dossier dans lequel traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 100). 5 Téléchargez les exemples de fichiers sur le serveur Web (voir « Téléchargement des exemples de fichiers », page 101). Chapitre 7 Copie des exemples de fichiers Si vous ne l'avez pas déjà fait, copiez les exemples de fichiers depuis le dossier d'application Dreamweaver dans un dossier qui se trouve sur votre disque dur. Pour copier les exemples de fichiers : 1 Créez un nouveau dossier intitulé Sites sur votre disque dur. Par exemple, créez C:\Sites (Windows) ou Disque dur:Documents:Sites (Macintosh). 2 Localisez le dossier GettingStarted dans le dossier d'application Dreamweaver, sur votre disque dur. Le chemin qui mène au dossier est le suivant : \Macromedia\Dreamweaver MX\Samples\GettingStarted\ 3 Copiez le dossier GettingStarted dans le dossier Sites. Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver local. 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 local dans Dreamweaver. Pour définir le dossier Dreamweaver local : 1 Dans Dreamweaver, choisissez Site > Nouveau site. La boîte de dialogue Définition du site s'ouvre. 2 Si l'assistant apparaît, cliquez sur Avancé. 3 Dans la zone de texte Nom du site, saisissez GlobalCar - ColdFusion. Le nom identifie votre site dans Dreamweaver. 4 Dans la zone de texte Dossier racine local, spécifiez le dossier dans le dossier GettingStarted qui contient les exemples de fichiers ColdFusion. Vous pouvez cliquer sur l'icône représentant un dossier, située à côté du champ, pour trouver et sélectionner le dossier. Sous Windows, le dossier doit se présenter de la manière suivante : C:\Sites\GettingStarted\Develop\coldfusion Sur un Macintosh, le dossier doit se présenter de la manière suivante : Disque dur:Documents:Sites:GettingStarted:Develop:coldfusion Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez maintenant définir un dossier de serveur Web comme dossier Dreamweaver distant. Configuration d'un exemple de site ColdFusion 99 Définition d'un dossier distant Après avoir défini un dossier local, définissez un dossier de serveur Web comme dossier distant dans Dreamweaver. Pour définir le dossier Dreamweaver distant : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Infos distantes. L'écran Infos distantes apparaît. 2 Dans le champ Accès, choisissez la manière dont vous souhaitez placer et déplacer vos fichiers sur le serveur : directement (option Local/Réseau) ou en utilisant le protocole FTP. 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 98. 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 reste le dossier « distant » valide. Voici un exemple si vous choisissez l'accès Local/Réseau : Dossier distant : c:\Inetpub\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 (Aide > Utilisation de Dreamweaver). Laissez la boîte de dialogue Définition du site ouverte. Vous devez ensuite définir un dossier pour le traitement des pages dynamiques. 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, comme indiqué dans cette section. Dreamweaver utilise ce dossier pour afficher les pages dynamiques et se connecter aux bases de données lorsque vous travaillez. Pour spécifier le dossier dans lequel traiter les pages dynamiques : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Serveur d'évaluation. L'écran Serveur d'évaluation apparaît. Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Le type de serveur importe peu, du moment qu'il est capable de traiter des pages ColdFusion. Dans ce cas, vous pouvez utiliser les mêmes paramètres que dans la catégorie Infos distantes (voir « Définition d'un dossier distant », page 100) car ceux-ci pointent vers un serveur capable de traiter les pages ColdFusion. 2 Sélectionnez ColdFusion comme votre technologie de serveur. 3 Dans le champ Accès, choisissez 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. 100 Chapitre 7 4 Dans le champ Préfixe de l'URL, tapez l'URL racine à saisir dans un navigateur Web pour demander une page dans votre application Web. Pour afficher des données dynamiques dans vos pages lorsque vous travaillez, Dreamweaver crée un fichier temporaire, le copie dans le dossier racine du site Web et essaie de le demander en utilisant le préfixe de l'URL. Dreamweaver déduit le préfixe de l'URL en fonction des informations fournies dans la boîte de dialogue Définition du site. Par exemple, si le dossier spécifié dans le champ Dossier distant est c:\Inetpub\wwwroot\MySampleApp, le préfixe de l'URL doit se présenter comme suit : http://localhost/MySampleApp/ Conseil : le préfixe d'URL ne doit jamais indiquer une page particulière du site. Il arrive cependant que le préfixe d'URL proposé soit incorrect. Corrigez-le ou saisissez un nouveau préfixe d'URL si la proposition de Dreamweaver est incorrecte. Pour plus d'informations, voir « A propos du préfixe d'URL » dans l'aide (Aide > Utilisation de Dreamweaver). 5 Cliquez sur OK, puis sur Terminé. Après avoir spécifié un dossier pour le traitement des pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web. Téléchargement des exemples de fichiers Après avoir spécifié un dossier dans lequel traiter les pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web comme indiqué dans cette section. Vous devez « télécharger » les fichiers, même si le serveur Web est exécuté sur votre ordinateur local. Si vous ne téléchargez pas les fichiers, des fonctions telles que l'affichage des données dynamiques et l'aperçu dans le navigateur ne fonctionneront pas avec les pages dynamiques. Par exemple, des liens d'image risquent d'être rompus dans l'affichage des données dynamiques car les fichiers d'image ne se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien vers une page d'informations détaillées tout en affichant l'aperçu d'une page principale dans un navigateur provoquera une erreur si la page d'informations détaillées manque dans le serveur. Pour télécharger les exemples de fichiers dans un serveur Web : 1 Dans le panneau Site (Fenêtre > Site), sélectionnez le dossier racine dans le panneau Fichiers locaux. Le dossier racine doit être le premier dossier de la liste. 2 Cliquez sur la flèche haut bleue de la barre d'outils. Dreamweaver copie tous les fichiers dans le dossier du serveur Web défini dans « Définition d'un dossier distant », page 100. Le site Dreamweaver est défini. Au cours de l'étape suivante, vous devez vous connecter à l'exemple de base de données installé avec Dreamweaver. Configuration d'un exemple de site ColdFusion 101 Connexion à l'exemple de base de données 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 : si vous souhaitez vous connecter à une autre base de données, voir « Connexions à des bases de données pour les développeurs ColdFusion » dans l'aide (Aide > Utilisation de Dreamweaver). Pour créer une connexion à une base de données : 1 Si vous disposez d'une configuration de serveur distant, copiez l'exemple de base de données sur l'ordinateur distant (voir « Configuration de la base de données (configuration de serveur distant) », page 102). 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 102). 3 Visualisez la connexion dans Dreamweaver (voir « Connexion à la base de données », page 103). Configuration de la base de données (configuration de serveur distant) Cette section s'applique uniquement si vous disposez d'une configuration de serveur distant, c'est-à-dire si votre serveur Web s'exécute 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 102. 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. Le fichier de la base de données, global.mdb, réside dans le dossier suivant, sur votre disque dur : \Macromedia\Dreamweaver MX\Samples\Database\global.mdb Vous pouvez placer le fichier dans le dossier de votre choix, sur l'ordinateur distant, ou créer un nouveau dossier. 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 connGlobal 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 l'icône Modifier les sources de données (la deuxième icône à partir de la droite sur la barre d'outils du panneau). ColdFusion Administrator s'ouvre dans un navigateur. 102 Chapitre 7 3 Connectez-vous au programme ColdFusion Administrator et créez une source de données appelée connGlobal qui pointe vers le fichier de base de données global.mdb. Si ColdFusion s'exécute sur votre ordinateur local, 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\Samples\Database\global.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 (configuration de serveur distant) », page 102. 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, vous pouvez vous connecter à la base de données dans Dreamweaver. Connexion à la base de données Une fois la source de données ColdFusion créée , vous pouvez l'utiliser pour vous connecter à la base de données dans Dreamweaver. Ouvrez n'importe quelle page ColdFusion dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). Vos sources de données ColdFusion s'affichent dans le panneau. Si la source de données que vous avez créée ne s'affiche pas dans le panneau, procédez de l'une des manières suivantes : • Vérifiez les paramètres de connexion dans le programme ColdFusion Administrator. • Vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 100). • Consultez « Résolution des problèmes de connexion à des bases de données », page 151. Si la source de données appelée connGlobal s'affiche dans le panneau, l'exemple d'application ColdFusion est configuré pour le guide de prise en main et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels de l'aide Dreamweaver (Aide > Didacticiels). Configuration d'un exemple de site ColdFusion 103 104 Chapitre 7 CHAPITRE 8 Configuration d'un exemple de site ASP.NET Macromedia Dreamweaver MX contient des exemples de pages ASP.NET pour vous permettre de créer une petite application Web. Ce chapitre vous explique comment configurer l'exemple d'application. Ce chapitre concerne les développeurs ASP.NET. Pour plus d'informations sur ASP, voir « Configuration d'un site ASP », page 115. 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 suit l'ordre de ces trois étapes. Ce chapitre contient les sections suivantes : • • • • • « Aide-mémoire pour la configuration à l'intention des développeurs ASP.NET », page 105 « Configuration du système », page 106 « Définition d'un site Dreamweaver », page 108 « Connexion à l'exemple de base de données (configuration locale) », page 112 « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 113 Aide-mémoire pour la configuration à l'intention des développeurs ASP.NET Pour configurer une application Web, vous devez configurer votre système, définir un site Dreamweaver, puis vous connecter à une base de données. Cette section fournit une liste de contrôle pour chaque tâche. Les procédures sont décrites dans le reste du chapitre. Configurez votre système : 1 Vérifiez que vous disposez d'un serveur Web. 2 Installez la plate-forme .NET de Microsoft. 3 Créez un dossier racine. Définissez un site Dreamweaver : 1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur. 2 Définissez le dossier comme un 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. 105 Connectez-vous à la base de données (configuration locale) : Créez la connexion dans Dreamweaver. Connectez-vous à la base de données (configuration de serveur distant) : Copiez la base de données sur l'ordinateur distant et créez la connexion dans Dreamweaver. Configuration du système Cette section fournit des instructions pour deux configurations de système : l'une dans laquelle Windows 2000 ou Windows XP Professionnel est installé sur votre disque dur, et l'autre dans laquelle Windows 2000 ou Windows XP Professionnel est installé sur un ordinateur distant. Si vous ne voulez pas utiliser ces configurations, voir « Configuration d'une application Web » dans l'aide (Aide > Utilisation de Dreamweaver). L'illustration suivante présente les deux configurations décrites dans cette section : Configuration locale Configuration du serveur dist (pour les utilisateurs de Windows 2000 (pour les utilisateurs de Mac uniquement) ou de Windows) WINDOW S PC Dreamweaver MX MA C ou WINDOW S PC Dreamweaver MX PWS ou IIS Dossier racine du site Web dans c:\Inetpub\wwwroot\ Accès via le réseau cces ou via FTP SERVEUR WINDOWS PWS ou IIS Dossier racine du site Web dans c:\Inetpub\wwwroot\ 106 Chapitre 8 Pour configurer votre système : 1 Vérifiez que vous disposez d'un serveur Web (voir « Recherche d'un serveur Web », page 107). 2 Installez la plate-forme .NET (voir « Installation de la plate-forme .NET », page 107). 3 Créez un dossier racine (voir « Création d'un dossier racine », page 108). Remarque : l'installation du serveur Web et de la plate-forme .NET sont des tâches uniques (non répétitives). Recherche d'un serveur Web Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Les pages ASP.NET ne sont compatibles qu'avec un seul serveur Web : Microsoft IIS version 5 ou supérieure. PWS n'est pas pris en charge. En outre, comme IIS 5 est un service des systèmes d'exploitation Windows 2000 et Windows XP Professionnel, vous devez impérativement utiliser l'une des ces deux versions de Windows pour exécuter des applications ASP.NET. Windows 98, ME et NT ne sont pas pris en charge. Assurez-vous que IIS 5 est installé et s'exécute sur un ordinateur Windows 2000 ou Windows XP Professionnel. Vous pouvez installer IIS 5 sur votre disque dur si vous disposez de Windows 2000 ou de Windows XP Professionnel, ou sur un ordinateur distant. Si vous disposez de Windows 98, Windows ME, Windows NT, Windows XP Home Edition ou êtes un utilisateur de Macintosh, vous devez exécuter IIS 5 sur un ordinateur distant Windows 2000 ou Windows XP Professionnel. Pour savoir rapidement si IIS est installé sur votre système, vérifiez la structure du dossier. Est-ce que votre ordinateur contient un dossier c:\Inetpub ou d:\Inetpub ? IIS crée ce dossier pendant l'installation. Si IIS n'est pas installé, installez-le. Pour obtenir des instructions, voir « Installation d'Internet Information Server », page 91. Après avoir installé le serveur Web, installez la plate-forme .NET. Installation de la plate-forme .NET Un serveur d'application est nécessaire pour traiter les pages Web dynamiques. Un serveur d'application est un logiciel qui aide un serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Lorsqu'une page 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. Dans ASP.NET, le serveur d'application est appelé la plate-forme .NET. Assurez-vous que la plateforme .NET est installée et fonctionne sur les systèmes Windows 2000 ou Windows XP Professionnel exécutant IIS 5 ou supérieur. (IIS peut se trouver sur votre disque dur ou sur un ordinateur distant.) Pour installer la plate-forme .NET, téléchargez-la depuis le site Web de Microsoft à l'adresse http:/ /www.asp.net/download.aspx et suivez les instructions d'installation sur le site Web. Si vous disposez de Windows 98, Windows ME, Windows NT, Windows XP Home Edition ou êtes un utilisateur de Macintosh, vous devez installer la plate-forme .NET sur un ordinateur distant Windows 2000 ou Windows XP Professionnel exécutant IIS 5. Après avoir installé la plate-forme .NET, vous devez créer un dossier racine pour votre application Web. Configuration d'un exemple de site ASP.NET 107 Création d'un dossier racine Après avoir installé le logiciel de serveur, créez un dossier racine pour votre application Web sur le système exécutant Microsoft IIS, et assurez-vous que le dossier dispose des autorisations nécessaires. Pour créer un dossier racine pour votre application Web : 1 Créez un dossier appelé MySampleApp sur le système exécutant IIS. Utillisez de préférence l'emplacement suivant pour créer le dossier : C:\Inetpub\wwwroot\. Par défaut, votre serveur Web IIS est configuré dans le dossier Inetpub\wwwroot. Le serveur Web répondra aux requêtes HTTP des navigateurs Web en renvoyant les pages de ce dossier ou de ses sous-dossiers. 2 Assurez-vous que l'autorisation Scripts est activée pour le dossier. Lancez l'outil d'administration IIS (sous Windows XP, sélectionnez Démarrer > Panneau de configuration > Performances et maintenance > Outils d'administration > Services d'informations Internet). Sous Sites Web > Site Web par défaut, cliquez avec le bouton droit de la souris sur votre dossier MySampleSite et choisissez Propriétés dans le menu contextuel. Dans la zone Exécuter les autorisations, vérifiez que l'option Scripts est sélectionnée. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Scripts et exécutables. Le serveur Web est maintenant configuré pour fournir les pages Web de votre dossier racine en réponse aux requêtes HTTP des navigateurs Web. Une fois votre système configuré, vous devez définir un site Dreamweaver. Définition d'un site Dreamweaver 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 109). 2 Définissez le dossier comme un dossier Dreamweaver local (voir « Définition d'un dossier local », page 109). 3 Définissez un dossier de serveur Web comme dossier Dreamweaver distant (voir « Définition d'un dossier distant », page 110). 4 Spécifiez un dossier dans lequel traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 110). 5 Téléchargez les exemples de fichiers sur le serveur Web (voir « Téléchargement des exemples de fichiers », page 111). 108 Chapitre 8 Copie des exemples de fichiers Si vous ne l'avez pas déjà fait, copiez les exemples de fichiers depuis le dossier d'application Dreamweaver dans un dossier qui se trouve sur votre disque dur. Pour copier les exemples de fichiers : 1 Créez un nouveau dossier intitulé Sites sur votre disque dur. Par exemple, créez C:\Sites (Windows) ou Disque dur:Documents:Sites (Macintosh). 2 Localisez le dossier GettingStarted dans le dossier d'application Dreamweaver, sur votre disque dur. Le chemin qui mène au dossier est le suivant : \Macromedia\Dreamweaver MX\Samples\GettingStarted\ 3 Copiez le dossier GettingStarted dans le dossier Sites. Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver local. Définition d'un dossier local Après avoir copié le dossier GettingStarted, définissez le dossier contenant les exemples de fichiers ASP.NET comme dossier local dans Dreamweaver. Pour définir le dossier Dreamweaver local : 1 Dans Dreamweaver, choisissez Site > Nouveau site. La boîte de dialogue Définition du site s'ouvre. 2 Si l'assistant apparaît, cliquez sur Avancé. 3 Dans la zone de texte Nom du site, saisissez GlobalCar - ASP.NET. Le nom identifie votre site dans Dreamweaver. 4 Dans la zone de texte Dossier racine local, spécifiez le dossier dans le dossier GettingStarted qui contient les exemples de fichiers ASP.NET. Vous pouvez cliquer sur l'icône représentant un dossier, située à côté du champ, pour trouver et sélectionner le dossier. Sous Windows, le dossier doit se présenter de la manière suivante : C:\Sites\GettingStarted\Develop\aspnet Sur un Macintosh, le dossier doit se présenter de la manière suivante : Disque dur:Documents:Sites:GettingStarted:Develop:aspnet Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez maintenant définir un dossier de serveur Web comme dossier Dreamweaver distant. Configuration d'un exemple de site ASP.NET 109 Définition d'un dossier distant Après avoir défini un dossier local, définissez un dossier de serveur Web comme dossier distant dans Dreamweaver tel que décrit dans cette section. Pour définir le dossier Dreamweaver distant : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Infos distantes. L'écran Infos distantes apparaît. 2 Dans le champ Accès, choisissez la manière dont vous souhaitez placer et déplacer vos fichiers sur le serveur : directement (option Local/Réseau) ou en utilisant le protocole FTP. 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 108. 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 reste le dossier « distant » valide. Voici un exemple si vous choisissez l'accès Local/Réseau : Dossier distant : c:\Inetpub\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 (Aide > Utilisation de Dreamweaver). Laissez la boîte de dialogue Définition du site ouverte. Vous devez ensuite définir un dossier pour le traitement des pages dynamiques. . 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, comme indiqué dans cette section. Dreamweaver utilise ce dossier pour afficher les pages dynamiques et se connecter aux bases de données lorsque vous travaillez. Pour spécifier le dossier dans lequel traiter les pages dynamiques : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Serveur d'évaluation. L'écran Serveur d'évaluation apparaît. Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Le type de serveur importe peu, du moment qu'il est capable de traiter des pages ASP.NET. Dans ce cas, vous pouvez utiliser les mêmes paramètres que dans la catégorie Infos distantes (voir « Définition d'un dossier distant », page 110) car ceux-ci pointent vers un serveur capable de traiter les pages ASP.NET. 2 Sélectionnez ASP.NET VB ou ASP.NET C# comme votre technologie de serveur. 3 Dans le champ Accès, choisissez 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. 110 Chapitre 8 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 générer et 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 l'appelle en utilisant le préfixe d'URL. Dreamweaver déduit le préfixe de l'URL en fonction des informations fournies dans la boîte de dialogue Définition du site. Par exemple, si le dossier spécifié dans le champ Dossier distant est c:\Inetpub\wwwroot\MySampleApp, le préfixe de l'URL doit se présenter comme suit : http://localhost/MySampleApp/ Conseil : le préfixe d'URL ne doit jamais indiquer une page particulière du site. Il arrive cependant que le préfixe d'URL proposé soit incorrect. Corrigez-le ou saisissez un nouveau préfixe d'URL si la proposition de Dreamweaver est incorrecte. Pour plus d'informations, voir « A propos du préfixe d'URL » dans l'aide (Aide > Utilisation de Dreamweaver). 5 Cliquez sur OK, puis sur Terminé. Après avoir spécifié un dossier pour le traitement des pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web. Téléchargement des exemples de fichiers Après avoir spécifié un dossier dans lequel traiter les pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web comme indiqué dans cette section. Vous devez « télécharger » les fichiers, même si le serveur Web est exécuté sur votre ordinateur local. Si vous ne téléchargez pas les fichiers, des fonctions telles que l'affichage des données dynamiques et l'aperçu dans le navigateur ne fonctionneront pas avec les pages dynamiques. Par exemple, des liens d'image risquent d'être rompus dans l'affichage des données dynamiques car les fichiers d'image ne se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien vers une page d'informations détaillées tout en affichant l'aperçu d'une page principale dans un navigateur provoquera une erreur si la page d'informations détaillées manque dans le serveur. Pour télécharger les exemples de fichiers dans un serveur Web : 1 Dans le panneau Site (Fenêtre > Site), sélectionnez le dossier racine dans le panneau Fichiers locaux. Le dossier racine doit être le premier dossier de la liste. 2 Cliquez sur la flèche haut bleue de la barre d'outils. Dreamweaver copie tous les fichiers dans le dossier du serveur Web défini dans « Définition d'un dossier distant », page 110. Le site Dreamweaver est défini. Au cours de l'étape suivante, vous devez vous connecter à l'exemple de base de données installé avec Dreamweaver. Si votre serveur Web est exécuté sur votre ordinateur local, voir « Connexion à l'exemple de base de données (configuration locale) », page 112. Si votre serveur Web est exécuté sur un ordinateur distant, voir « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 113. Configuration d'un exemple de site ASP.NET 111 Connexion à l'exemple de base de données (configuration locale) 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 à l'exemple de base de données si vous avez une configuration locale, c'est-à-dire si votre serveur Web est exécuté sur le même ordinateur que Dreamweaver. Si votre serveur Web est exécuté sur un ordinateur distant, voir « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 113. Remarque : si vous souhaitez vous connecter à une autre base de données, voir « Connexions à des bases de données pour les développeurs ASP.NET » dans l'aide (Aide > Utilisation de Dreamweaver). Pour créer une connexion avec une configuration locale : 1 Ouvrez n'importe quelle page ASP.NET dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Connexion à la BD OLE dans le menu contextuel. La boîte de dialogue Connexion à la BD OLE s'affiche. 3 Tapez connGlobal comme nom de connexion. 4 Cliquez sur le bouton Modèles. La boîte de dialogue Modèle de chaîne de connexion s'affiche. 5 Dans la liste des modèles, choisissez Microsoft Access 2000 (Fournisseur Microsoft Jet 4.0) et cliquez sur OK. Dreamweaver ajoute un modèle de chaîne de connexion dans la boîte de dialogue Connexion à la BD OLE. Le modèle contient des espaces réservés pour les informations manquantes dans la chaîne de connexion. 6 Pour la valeur Source de données, saisissez le chemin complet vers l'exemple de fichier de base de données sur votre disque dur. Par exemple, pendant l'installation, Dreamweaver place l'exemple de fichier de base de données, global.mdb, dans le dossier suivant sur votre disque dur local : c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb Remarque : le chemin peut varier en fonction de l'endroit où vous avez installé Dreamweaver. Saisissez ce chemin comme la valeur Source de données : Data Source=c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\glo bal.mdb; 7 Supprimez les lignes ID d'utilisateur et Mot de passe. La base de données Access ne requiert pas de numéro d'utilisateur ni de mot de passe. 8 Cliquez sur Tester. Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, procédez de la manière suivante : • Vérifiez le chemin de la base de données. • Vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 110). • Consultez « Résolution des problèmes de connexion à des bases de données », page 151. 112 Chapitre 8 9 Cliquez sur OK. La nouvelle connexion s'affiche dans le panneau Bases de données. L'exemple d'application ASP.NET est configuré pour le guide de prise en main et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels de l'aide Dreamweaver (Aide > Didacticiels). Connexion à l'exemple de base de données (configuration avec un serveur distant) 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 à l'exemple de base de données si vous avez une configuration de serveur distant, c'est-à-dire si votre serveur Web est exécuté sur un ordinateur distant. Si votre serveur Web est exécuté sur le même ordinateur que Dreamweaver, voir « Connexion à l'exemple de base de données (configuration locale) », page 112. Remarque : si vous souhaitez vous connecter à une autre base de données, voir « Connexions à des bases de données pour les développeurs ASP.NET » dans l'aide (Aide > Utilisation de Dreamweaver). Pour créer une connexion avec une configuration de serveur distant : 1 Copiez le fichier de la base de données sur l'ordinateur distant. Le fichier de la base de données, global.mdb, réside dans le dossier suivant, sur votre disque dur : \Macromedia\Dreamweaver MX\Samples\Database\global.mdb Vous pouvez placer le fichier dans le dossier de votre choix, sur l'ordinateur distant, ou créer un nouveau dossier. Dans les deux cas, notez le chemin complet du fichier de base de données sur une feuille de papier. 2 Ouvrez n'importe quelle page ASP.NET dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). 3 Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Connexion à la BD OLE dans le menu contextuel. La boîte de dialogue Connexion à la BD OLE s'affiche. 4 Tapez connGlobal comme nom de connexion. 5 Cliquez sur le bouton Modèles. La boîte de dialogue Modèle de chaîne de connexion s'affiche. 6 Dans la liste des modèles, choisissez Microsoft Access 2000 (Fournisseur Microsoft Jet 4.0) et cliquez sur OK. Dreamweaver ajoute un modèle de chaîne de connexion dans la boîte de dialogue Connexion à la BD OLE. Le modèle contient des espaces réservés pour les informations manquantes dans la chaîne de connexion. 7 Pour la valeur Source de données, saisissez le chemin complet du fichier de base de données sur l'ordinateur distant. Saisissez le chemin que vous avez noté à l'étape 1. Par exemple, le chemin sur l'ordinateur de réseau peut être le suivant : Data Source=c:\users\Denman\Sites\data\global.mdb; Configuration d'un exemple de site ASP.NET 113 8 Supprimez les lignes ID d'utilisateur et Mot de passe. 9 Cliquez sur Tester. Dreamweaver tente d'établir une connexion à la base de données sur l'ordinateur de réseau. Si la connexion échoue, procédez de la manière suivante : • Vérifiez le chemin de la base de données. • Vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 110). • Consultez « Résolution des problèmes de connexion à des bases de données », page 151. 10 Cliquez sur OK. La nouvelle connexion apparaît dans le panneau Base de données. L'exemple d'application ASP.NET est configuré pour le guide de prise en main et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels de l'aide Dreamweaver (Aide > Didacticiels). 114 Chapitre 8 CHAPITRE 9 Configuration d'un site ASP Macromedia Dreamweaver MX est fourni avec des exemples de pages ASP (Active Server Pages) de Microsoft qui vous permettront de créer une petite application Web. Ce chapitre décrit une méthode de configuration de l'application à l'aide de Microsoft Internet Information Server (IIS) ou de Personal Web Server (PWS). Pour plus d'informations sur ces serveurs Web, voir « Installation d'un serveur Web sous Windows », page 89. Si vous utilisez un autre serveur Web, voir « Configuration d'une application » Web dans l'aide (Aide > Utilisation de Dreamweaver). Ce chapitre s'adresse uniquement aux développeurs ASP. Pour explorer ASP.NET, voir « Configuration d'un exemple de site ASP.NET », page 105. 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 suit l'ordre de ces trois étapes. Ce chapitre contient les sections suivantes : • • • • • « Configuration de la liste de contrôle des développeurs ASP », page 116 « Configuration du système », page 117 « Définition d'un site Dreamweaver », page 120 « Connexion à l'exemple de base de données (configuration locale) », page 124 « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 125 115 Configuration de la liste de contrôle des développeurs ASP Pour configurer une application Web, vous devez configurer votre système, définir un site Dreamweaver, puis vous connecter à une base de données. Cette section fournit une liste de contrôle pour chaque tâche. Les procédures sont décrites dans le reste du chapitre. Configurez votre système : 1 Vérifiez que vous disposez d'un serveur Web. 2 Installez un serveur d'application. 3 Testez votre installation. 4 Créez un dossier racine. Définissez un site Dreamweaver : 1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur. 2 Définissez le dossier comme un dossier Dreamweaver local. 3 Définissez un dossier de serveur Web comme dossier Dreamweaver distant. 4 Définissez un dossier dans lequel traiter les pages dynamiques. 5 Téléchargez les exemples de fichiers sur le serveur Web. Connectez-vous à la base de données (configuration locale) : 1 Créez la connexion dans Dreamweaver. Connectez-vous à la base de données (configuration de serveur distant) : 116 1 Configurez l'exemple de base de données sur l'ordinateur sur lequel votre serveur Web est exécuté. 2 Créez la connexion dans Dreamweaver. Chapitre 9 Configuration du système Cette section fournit des instructions pour les deux configurations de système les plus courantes : lorsque Microsoft IIS ou PWS est installé sur votre disque dur et lorsque IIS ou PWS est installé sur un ordinateur Windows distant. Si vous ne voulez pas utiliser ces configurations, voir « Configuration d'une application Web » dans l'aide (Aide > Utilisation de Dreamweaver). L'illustration suivante présente les deux configurations décrites dans cette section : Configuration locale Configuration du serveur dist (pour les utilisateurs de Windows 2000 (pour les utilisateurs de Mac ou de Windows) uniquement) WINDOW S PC MA C ou WINDOW S PC Dreamweaver MX Dreamweaver MX PWS ou IIS Dossier racine du site Web dans c:\Inetpub\wwwroot\ Accès via le réseau ou via FTP cces SERVEUR WINDOWS PWS ou IIS Dossier racine du site Web dans c:\Inetpub\wwwroot\ Pour configurer votre système : 1 Vérifiez que vous disposez d'un serveur Web (voir « Recherche d'un serveur Web », page 118). 2 Si nécessaire, installez un serveur d'application (voir « Installation d'un serveur d'application ASP », page 118). 3 Testez votre installation (voir « Test de l'installation », page 118). 4 Créez un dossier racine (voir « Création d'un dossier racine », page 120). Remarque : l'installation du serveur Web et du serveur d'application sont des tâches que vous n'aurez à exécuter qu'une seule fois. Configuration d'un site ASP 117 Recherche d'un serveur Web Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Vérifiez que Microsoft IIS ou PWS est installé et exécuté sur votre disque dur ou un ordinateur Windows distant (les utilisateurs Macintosh doivent installer Microsoft IIS ou PWS sur un ordinateur Windows distant). Pour savoir si PWS ou IIS est installé sur un ordinateur, vérifiez la structure des dossiers. Est-ce que votre ordinateur contient un dossier c:\Inetpub ou d:\Inetpub ? PWS et IIS créent ces dossiers lors de l'installation. Si PWS ou IIS n'est pas installé, installez-le maintenant. Pour obtenir des instructions, voir « Installation d'un serveur Web sous Windows », page 89. Après avoir installé le serveur Web, vous devez normalement installer un serveur d'application. Installation d'un serveur d'application ASP Un serveur d'application est nécessaire pour traiter les pages Web dynamiques. Un serveur d'application est un logiciel qui aide un serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Lorsqu'une page 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. Si vous avez installé PWS ou IIS sur un ordinateur Windows, vous n'avez pas besoin d'un autre serveur d'application ASP, puisque PWS et IIS remplissent également le rôle de serveurs d'application ASP. Pour plus d'informations sur l'installation et le test de PWS ou IIS, voir « Installation d'un serveur Web sous Windows », page 89. Vous pouvez tester le serveur pour vérifier qu'il fonctionne correctement. Test de l'installation Vous pouvez tester le moteur ASP de PWS ou IIS en exécutant une page de test, comme cela vous est expliqué dans cette section. Pour tester le moteur ASP de PWS ou IIS : 1 Dans Dreamweaver ou n'importe quel éditeur de texte, créez un fichier de texte pur intitulé timetest.asp. 2 Tapez le code suivant dans le fichier : <p>This page was created at <b> <%= Time %> </b> on the computer running ASP.</p> Ce code affiche l'heure à laquelle la page a été traitée sur le serveur. 3 Copiez le fichier dans le dossier Inetpub\wwwroot de l'ordinateur Windows qui exécute PWS ou IIS. 4 Dans votre navigateur Web, tapez l'URL de votre page de test, puis appuyez sur Entrée. Si PWS ou IIS est exécuté sur votre ordinateur local, vous pouvez taper l'URL suivante : http://localhost/timetest.asp 118 Chapitre 9 La page de test doit s'ouvrir et indiquer une heure : L'heure indiquée correspond au contenu dynamique car elle change chaque fois que vous appelez la page. Cliquez sur le bouton Actualiser du navigateur pour générer une nouvelle page avec une heure différente. Remarque : en consultant le code source (Affichage > Source dans Internet Explorer), vous pourrez vérifier que la page n'utilise pas de code JavaScript côté client pour obtenir ce résultat. Si la page ne fonctionne pas correctement, recherchez les erreurs potentielles suivantes : • Le fichier n'a pas d'extension .asp. • Le chemin du fichier de la page (c:\Inetput\wwwroot\timetest.asp), et non son URL (par exemple http://localhost/timetest.asp), a été tapé dans le champ Adresse du navigateur. Si vous tapez un chemin de fichier dans le navigateur (comme vous en avez peut-être l'habitude avec les pages HTML normales), vous contournez le serveur Web et le serveur d'application. Votre page n'est alors jamais traitée par le serveur. • L'URL contient une faute de frappe. Recherchez les erreurs éventuelles et vérifiez que le nom de fichier n'est pas suivi d'une barre oblique, comme dans l'exemple suivant : http://localhost/ timetest.asp/. • Le code de la page contient une faute de frappe. Après avoir installé et testé le logiciel de serveur, créez un dossier racine pour votre application Web. Configuration d'un site ASP 119 Création d'un dossier racine Une fois le logiciel de serveur installé, créez un dossier racine pour votre application Web, sur le système qui exécute Microsoft PWS ou IIS, et vérifiez que ce dossier jouit des autorisations nécessaires. Pour créer un dossier racine pour votre application Web : 1 Créez un dossier intitulé MySampleApp sur le système qui exécute PWS ou IIS. Utillisez de préférence l'emplacement suivant pour créer le dossier : C:\Inetpub\wwwroot\. Par défaut, votre serveur Web PWS ou IIS est configuré dans le dossier Inetpub\wwwroot. Le serveur Web répondra aux requêtes HTTP des navigateurs Web en renvoyant les pages de ce dossier ou de ses sous-dossiers. 2 Assurez-vous que les autorisations Lire et Scripts sont activées pour le dossier. Si vous utilisez PWS, lancez le Personal Web Manager en double-cliquant sur l'icône du serveur Web, dans la barre d'état système (l'icône ressemble à une main tenant une page Web). Dans le Personal Web Manager, cliquez sur l'icône Advanced. La boîte de dialogue Advanced Options s'affiche. Choisissez Home et cliquez sur Edit Properties. La boîte de dialogue Edit Properties s'affiche. Assurez-vous que les options Read et Scripts sont sélectionnées. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Execute. Si vous utilisez IIS, lancez l'outil administratif IIS (sous Windows XP, choisissez Démarrer > Panneau de configuration > Maintenance des performances > Outils administratifs > Internet Information Services). Sous Sites Web > Site Web par défaut, cliquez avec le bouton droit de la souris sur votre dossier MySampleSite et choisissez Propriétés dans le menu contextuel. Dans la zone Exécuter les autorisations, vérifiez que l'option Scripts est sélectionnée. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Scripts et exécutables. Le serveur Web est maintenant configuré pour fournir les pages Web de votre dossier racine en réponse aux requêtes HTTP des navigateurs Web. Une fois votre système configuré, vous devez définir un site Dreamweaver. Définition d'un site Dreamweaver 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 121). 2 Définissez le dossier comme un dossier Dreamweaver local (voir « Définition d'un dossier local », page 121). 3 Définissez un dossier de serveur Web comme dossier Dreamweaver distant (voir « Définition d'un dossier distant », page 122). 4 Spécifiez un dossier dans lequel traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 122). 5 Téléchargez les exemples de fichiers sur le serveur Web (voir « Téléchargement des exemples de fichiers », page 123). 120 Chapitre 9 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 nouveau dossier intitulé Sites sur votre disque dur. Par exemple, créez C:\Sites (Windows) ou Disque dur:Documents:Sites (Macintosh). 2 Localisez le dossier GettingStarted dans le dossier d'application Dreamweaver, sur votre disque dur. Le chemin qui mène au dossier est le suivant : \Macromedia\Dreamweaver MX\Samples\GettingStarted\ 3 Copiez le dossier GettingStarted dans le dossier Sites. Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver local. Définition d'un dossier local Après avoir copié le dossier GettingStarted, définissez le dossier contenant les exemples de fichiers ASP comme un dossier Dreamweaver local. Pour définir le dossier Dreamweaver local : 1 Dans Dreamweaver, choisissez Site > Nouveau site. La boîte de dialogue Définition du site s'ouvre. 2 Si l'assistant apparaît, cliquez sur Avancé. 3 Dans le champ Nom du site, tapez GlobalCar - ASP. Le nom identifie votre site dans Dreamweaver. 4 Dans le champ Dossier racine local, indiquez le dossier du dossier GettingStarted qui contient les exemples de fichiers ASP. Vous pouvez cliquer sur l'icône représentant un dossier, située à côté du champ, pour trouver et sélectionner le dossier. Sous Windows, le dossier doit se présenter de la manière suivante : C:\Sites\GettingStarted\Develop\asp Sur un Macintosh, le dossier doit se présenter de la manière suivante : Disque dur:Documents:Sites:GettingStarted:Develop:asp Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez maintenant définir un dossier de serveur Web comme dossier Dreamweaver distant. Configuration d'un site ASP 121 Définition d'un dossier distant Après avoir défini un dossier local, vous devez définir un dossier de serveur Web comme dossier Dreamweaver distant, comme le décrit cette section. Pour définir le dossier Dreamweaver distant : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Infos distantes. L'écran Infos distantes apparaît. 2 Dans le champ Accès, choisissez la manière dont vous souhaitez placer et déplacer vos fichiers sur le serveur : directement (option Local/Réseau) ou en utilisant le protocole FTP. 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 120. 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 reste le dossier « distant » valide. Voici un exemple si vous choisissez l'accès Local/Réseau : Dossier distant : c:\Inetpub\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 (Aide > Utilisation de Dreamweaver). Laissez la boîte de dialogue Définition du site ouverte. Vous devez ensuite définir un dossier pour le traitement des pages dynamiques. 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, comme indiqué dans cette section. Dreamweaver utilise ce dossier pour afficher les pages dynamiques et se connecter aux bases de données lorsque vous travaillez. Pour spécifier le dossier dans lequel traiter les pages dynamiques : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Serveur d'évaluation. L'écran Serveur d'évaluation apparaît. Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Le choix du serveur importe peu à partir du moment où il est capable de traiter des pages ASP. Dans ce cas, vous pouvez utiliser les mêmes paramètres que la catégorie Infos distantes (voir « Définition d'un dossier distant », page 122), puisqu'ils vous dirigent vers un serveur capable de traiter les pages ASP. 2 Sélectionnez une technologie de serveur ASP JavaScript ou ASP VBScript. 3 Dans le champ Accès, choisissez 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. 122 Chapitre 9 4 Dans le champ Préfixe de l'URL, tapez l'URL racine à saisir dans un navigateur Web pour demander une page dans votre application Web. Pour afficher des données dynamiques dans vos pages lorsque vous travaillez, Dreamweaver crée un fichier temporaire, le copie dans le dossier racine du site Web et essaie de le demander en utilisant le préfixe de l'URL. Dreamweaver déduit le préfixe de l'URL en fonction des informations fournies dans la boîte de dialogue Définition du site. Par exemple, si le dossier spécifié dans le champ Dossier distant est c:\Inetpub\wwwroot\MySampleApp, le préfixe de l'URL doit se présenter comme suit : http://localhost/MySampleApp/ Conseil : le préfixe d'URL ne doit jamais indiquer une page particulière du site. Il arrive cependant que le préfixe d'URL proposé soit incorrect. Corrigez-le ou saisissez un nouveau préfixe d'URL si la proposition de Dreamweaver est incorrecte. Pour plus d'informations, voir « A propos du préfixe d'URL » dans l'aide (Aide > Utilisation de Dreamweaver). 5 Cliquez sur OK, puis sur Terminé. Après avoir spécifié un dossier pour le traitement des pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web. Téléchargement des exemples de fichiers Après avoir spécifié un dossier dans lequel traiter les pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web comme indiqué dans cette section. Vous devez « télécharger » les fichiers, même si le serveur Web est exécuté sur votre ordinateur local. Si vous ne téléchargez pas les fichiers, des fonctions telles que l'affichage des données dynamiques et l'aperçu dans le navigateur ne fonctionneront pas avec les pages dynamiques. Par exemple, des liens d'image risquent d'être rompus dans l'affichage des données dynamiques car les fichiers d'image ne se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien vers une page d'informations détaillées tout en affichant l'aperçu d'une page principale dans un navigateur provoquera une erreur si la page d'informations détaillées manque dans le serveur. Pour télécharger les exemples de fichiers dans un serveur Web : 1 Dans le panneau Site (Fenêtre > Site), sélectionnez le dossier racine dans le panneau Fichiers locaux. Le dossier racine doit être le premier dossier de la liste. 2 Cliquez sur la flèche haut bleue de la barre d'outils. Dreamweaver copie tous les fichiers dans le dossier du serveur Web défini dans « Définition d'un dossier distant », page 122. Le site Dreamweaver est défini. Au cours de l'étape suivante, vous devez vous connecter à l'exemple de base de données installé avec Dreamweaver. Si votre serveur Web est exécuté sur votre ordinateur local, voir « Connexion à l'exemple de base de données (configuration locale) », page 124. Si votre serveur Web est exécuté sur un ordinateur distant, voir « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 125. Configuration d'un site ASP 123 Connexion à l'exemple de base de données (configuration locale) 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 à l'exemple de base de données si vous avez une configuration locale, c'est-à-dire si votre serveur Web est exécuté sur le même ordinateur que Dreamweaver. Si votre serveur Web est exécuté sur un ordinateur distant, voir « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 125. Remarque : si vous souhaitez vous connecter à une autre base de données, voir « Connexions à des bases de données pour les développeurs ASP » dans l'aide (Aide > Utilisation de Dreamweaver). Avec une configuration locale, vous pouvez utiliser le DSN (Data Source Name, nom de source de données) créé par Dreamweaver au cours de l'installation pour vous connecter rapidement à l'exemple de base de données. Pour plus d'informations sur les DSN, voir « Description des DSN » dans l'aide (Aide > Utilisation de Dreamweaver). Pour créer une connexion avec une configuration locale : 1 Ouvrez n'importe quelle page ASP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez sur le bouton plus (+) dans le panneau et sélectionnez Nom de la source de données (DSN) dans le menu contextuel. La boîte de dialogue Nom de la source de données (DSN) s'affiche. 3 Tapez connGlobal comme nom de connexion. 4 Sélectionnez l'option Utilisation du DSN local. 5 Choisissez GlobalCar dans la liste des DSN. Au cours de l'installation, Dreamweaver a créé un DSN intitulé GlobalCar pointant vers la base de données Microsoft Access du dossier Samples\Database du dossier d'application de Dreamweaver MX. 6 Cliquez sur Tester. Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, procédez de la manière suivante : • Vérifiez le DSN. • Vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 122). • Consultez « Résolution des problèmes de connexion à des bases de données », page 151. 7 Cliquez sur OK. La nouvelle connexion s'affiche dans le panneau Bases de données. L'exemple d'application ASP est configuré pour le guide Bien démarrer avec Dreamweaver MX et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels dans l'aide (Aide > Didacticiels). 124 Chapitre 9 Connexion à l'exemple de base de données (configuration avec un serveur distant) 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 à l'exemple de base de données si vous avez une configuration de serveur distant, c'est-à-dire si votre serveur Web est exécuté sur un ordinateur distant. Si votre serveur Web est exécuté sur le même ordinateur que Dreamweaver, voir « Connexion à l'exemple de base de données (configuration locale) », page 124. Remarque : si vous souhaitez vous connecter à une autre base de données, voir « Connexions à des bases de données pour les développeurs ASP » dans l'aide (Aide > Utilisation de Dreamweaver). Pour créer une connexion à une base de données avec une configuration de serveur distant : 1 Configurez la base de données sur l'ordinateur sur lequel votre serveur Web est exécuté (voir « Configuration de la base de données sur l'ordinateur distant », page 125). 2 Créez la connexion dans Dreamweaver (voir « Création d'une connexion à une base de données », page 126). Configuration de la base de données sur l'ordinateur distant Avant de créer une connexion à l'exemple de base de données, exécutez les tâches suivantes sur l'ordinateur distant sur lequel votre serveur Web est exécuté : copiez l'exemple de base de données sur le disque dur de l'ordinateur et créez un DSN sur l'ordinateur pointant vers la base de données. Pour configurer l'exemple de base de données sur l'ordinateur distant : 1 Copiez le fichier de la base de données sur l'ordinateur distant. Le fichier de la base de données, global.mdb, réside dans le dossier suivant, sur votre disque dur : \Macromedia\Dreamweaver MX\Samples\Database\global.mdb Vous pouvez placer le fichier dans le dossier de votre choix, sur l'ordinateur distant, ou créer un nouveau dossier. 2 Vérifiez que Microsoft Access Driver, version 4.0 ou ultérieure, est installé sur l'ordinateur distant. Pour savoir si le pilote est déjà installé, voir « Affichage des pilotes ODBC installés sur un système Windows » dans l'aide (Aide > Utilisation de Dreamweaver). Si le pilote n'est pas installé, téléchargez et installez Microsoft Data Access Components (MDAC) 2.5 et 2.6 sur l'ordinateur distant. Vous pouvez télécharger gratuitement MDAC à partir du site Web de Microsoft à l'adresse suivante : http://www.microsoft.com/data/ download.htm. Ces progiciels contiennent les pilotes Microsoft les plus récents, y compris le pilote Microsoft Access. Remarque : installez MDAC 2.5 avant d'installer MDAC 2.6. 3 Configurez un DSN intitulé GlobalCar pointant vers l'exemple de base de données sur l'ordinateur distant. Pour obtenir des instructions, voir « Définition d'un DSN sous Windows » dans l'aide (Aide > Utilisation de Dreamweaver). Une fois que la base de données, le pilote de la base de données et le DSN sont en place, vous devez créer une connexion à une base de données dans Dreamweaver. Configuration d'un site ASP 125 Création d'une connexion à une base de données Après avoir configuré l'exemple de base de données sur l'ordinateur distant, créez une connexion à la base de données dans Dreamweaver. Pour créer une connexion à une base de données dans Dreamweaver : 1 Ouvrez n'importe quelle page ASP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez sur le bouton plus (+) dans le panneau et choisissez Nom de la source de données (DSN) dans le menu contextuel. La boîte de dialogue Nom de la source de données (DSN) s'affiche. 3 Tapez connGlobal comme nom de connexion. 4 Sélectionnez l'option Utilisation de la DSN sur le serveur d'évaluation. Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions à des bases de données utilisent des DSN sur le serveur d'évaluation. 5 Cliquez sur le bouton DSN et sélectionnez le DSN configuré sur l'ordinateur distant. 6 Cliquez sur Tester. Dreamweaver essaie de se connecter à la base de données. Si la connexion échoue, procédez de la manière suivante : • Vérifiez le DSN. • Vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 122). • Consultez « Résolution des problèmes de connexion à des bases de données », page 151. 7 Cliquez sur OK. La nouvelle connexion apparaît dans le panneau Base de données. L'exemple d'application ASP est configuré pour le guide Bien démarrer avec Dreamweaver MX et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels de l'aide Dreamweaver (Aide > Didacticiels). 126 Chapitre 9 CHAPITRE 10 Configuration d'un exemple de site JSP Macromedia Dreamweaver MX est fourni avec des exemples de pages JavaServer (JSP) qui vous permettront de créer une petite application Web. Ce chapitre décrit une méthode de configuration de l'application à l'aide de Microsoft Internet Information Server (IIS) ou de Personal Web Server (PWS). Pour plus d'informations sur ces serveurs Web, voir « Installation d'un serveur Web sous Windows », page 89. Si vous utilisez un autre serveur Web, voir « Configuration d'une application Web » dans l'aide (Aide > Utilisation de Dreamweaver). La configuration d'une application Web s'effectue en trois étapes. Vous devez d'abord configurer votre système. Vous devez ensuite définir un site Dreamweaver. Puis, vous devez connecter l'application à votre base de données. Ce guide de configuration suit l'ordre de ces trois étapes. Ce chapitre contient les sections suivantes : • • • • • « Configuration de la liste de contrôle pour les développeurs JSP », page 128 « Configuration du système », page 129 « Définition d'un site Dreamweaver », page 131 « Connexion à l'exemple de base de données (configuration locale) », page 135 « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 137 127 Configuration de la liste de contrôle pour les développeurs JSP Pour configurer une application Web, vous devez configurer votre système, définir un site Dreamweaver, puis vous connecter à une base de données. Cette section fournit une liste de contrôle pour chaque tâche. Les procédures sont décrites dans le reste du chapitre. Configurez votre système : 1 Vérifiez que vous disposez d'un serveur Web. 2 Installez le serveur d'application JSP. 3 Créez un dossier racine. Définissez un site Dreamweaver : 1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur. 2 Définissez le dossier comme un dossier Dreamweaver local. 3 Définissez un dossier de serveur Web comme dossier Dreamweaver distant. 4 Définissez un dossier dans lequel traiter les pages dynamiques. 5 Téléchargez les exemples de fichiers sur le serveur Web. Connectez-vous à la base de données (configuration locale) : 1 Installez un pilote de pont JDBC-ODBC. 2 Créez la connexion dans Dreamweaver. Connectez-vous à la base de données (configuration de serveur distant) : 1 Configurez l'exemple de base de données sur l'ordinateur sur lequel votre serveur Web est exécuté. 2 Créez la connexion dans Dreamweaver. 128 Chapitre 10 Configuration du système Cette section fournit des instructions pour les deux configurations de système les plus courantes : lorsque Microsoft IIS ou PWS est installé sur votre disque dur et lorsque IIS ou PWS est installé sur un ordinateur Windows distant. Si vous ne voulez pas utiliser ces configurations, voir « Configuration d'une application Web » dans l'aide (Aide > Utilisation de Dreamweaver). L'illustration suivante présente les deux configurations décrites dans cette section : Configuration locale (pour les utilisateurs de Windows uniquement) WINDOW S PC Dreamweaver MX Configuration du serveur dist (pour les utilisateurs de Mac ou de Windows) MA C ou WINDOW S PC Dreamweaver MX PWS ou IIS Serveur d'application JSP Dossier racine du site Web dans c:\Inetpub \wwwroot\ Accès via le réseau cces ou via FTP SERVEUR WINDOWS PWS ou IIS Serveur d'application JSP Dossier racine du site Web dans c:\Inetpub \wwwroot\ Pour configurer votre système : 1 Vérifiez que vous disposez d'un serveur Web (voir « Recherche d'un serveur Web », page 130). 2 Installez le serveur d'application JSP (voir « Installation du serveur d'application JSP », page 130). 3 Créez un dossier racine (voir « Création d'un dossier racine », page 131). Remarque : l'installation du serveur Web et du serveur d'application sont des tâches que vous n'aurez à exécuter qu'une seule fois. Configuration d'un exemple de site JSP 129 Recherche d'un serveur Web Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Vérifiez que Microsoft IIS ou PWS est installé et exécuté sur votre disque dur ou un ordinateur Windows distant (les utilisateurs Macintosh doivent installer Microsoft IIS ou PWS sur un ordinateur Windows distant). Pour savoir si PWS ou IIS est installé sur un ordinateur, vérifiez la structure des dossiers. Est-ce que votre ordinateur contient un dossier c:\Inetpub ou d:\Inetpub ? PWS et IIS créent ces dossiers lors de l'installation. Si PWS ou IIS n'est pas installé, installez-le maintenant. Pour obtenir des instructions, voir « Installation d'un serveur Web sous Windows », page 89. Après avoir installé le serveur Web, installez le serveur d'application. Installation du serveur d'application JSP Un serveur d'application est nécessaire pour traiter les pages Web dynamiques. Un serveur d'application est un logiciel qui aide un serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Lorsqu'une page 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. Vérifiez que le serveur d'application JSP est installé et exécuté sur le système exécutant PWS ou IIS (PWS ou IIS peut être installé sur votre disque dur ou sur un ordinateur distant). Si vous n'avez pas de serveur d'application JSP, vous pouvez télécharger et installer une version d'essai de Macromedia JRun, serveur d'application JSP complet, à partir du site Web de Macromedia à l'adresse suivante : http://www.macromedia.com/fr/software/jrun/. Pour installer JRun : 1 Fermez toutes les applications ouvertes. 2 Le cas échéant, connectez-vous à votre système Windows en utilisant le compte Administrateur. 3 Double-cliquez sur le fichier d'installation de la version d'essai de JRun. L'écran d'accueil apparaît. 4 Si vous ne disposez pas d'un Java Runtime Environment (JRE) sur votre système, sélectionnez l'option qui permet de l'installer à l'écran d'accueil. L'application JRun se base sur Java, ce qui signifie qu'un JRE doit d'abord être installé sur le système sur lequel sera exécuté votre serveur d'application. Une fois le JRE installé, vous pouvez installer le serveur d'application JRun. 5 Sélectionnez l'option qui permet d'installer JRun à l'écran d'accueil. 6 Suivez les instructions à l'écran pour finir d'installer et de tester le programme. 7 Créez un connecteur JRun à votre serveur Web IIS ou PWS. Pour obtenir des instructions, voir la documentation relative à JRun. Après avoir installé et lancé l'exécution de JRun, créez un dossier racine pour votre application Web. 130 Chapitre 10 Création d'un dossier racine Une fois le logiciel de serveur installé, créez un dossier racine pour votre application Web, sur le système qui exécute Microsoft PWS ou IIS, et vérifiez que ce dossier jouit des autorisations nécessaires. Pour créer un dossier racine pour votre application Web : 1 Créez un dossier intitulé MySampleApp sur le système qui exécute PWS ou IIS. Utillisez de préférence l'emplacement suivant pour créer le dossier : C:\Inetpub\wwwroot\. Par défaut, votre serveur Web PWS ou IIS est configuré dans le dossier Inetpub\wwwroot. Le serveur Web répondra aux requêtes HTTP des navigateurs Web en renvoyant les pages de ce dossier ou de ses sous-dossiers. 2 Assurez-vous que les autorisations Lire et Scripts sont activées pour le dossier. Si vous utilisez PWS, lancez le Personal Web Manager en double-cliquant sur l'icône du serveur Web, dans la barre d'état système (l'icône ressemble à une main tenant une page Web). Dans le Personal Web Manager, cliquez sur l'icône Advanced. La boîte de dialogue Advanced Options s'affiche. Choisissez Home et cliquez sur Edit Properties. La boîte de dialogue Edit Properties s'affiche. Assurez-vous que les options Read et Scripts sont sélectionnées. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Execute. Si vous utilisez IIS, lancez l'outil administratif IIS (sous Windows XP, choisissez Démarrer > Panneau de configuration > Maintenance des performances > Outils administratifs > Internet Information Services). Sous Sites Web > Site Web par défaut, cliquez avec le bouton droit de la souris sur votre dossier MySampleSite et choisissez Propriétés dans le menu contextuel. Dans la zone Exécuter les autorisations, vérifiez que l'option Scripts est sélectionnée. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Scripts et exécutables. Le serveur Web est maintenant configuré pour fournir les pages Web de votre dossier racine en réponse aux requêtes HTTP des navigateurs Web. Une fois votre système configuré, vous devez définir un site Dreamweaver. Définition d'un site Dreamweaver 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 132). 2 Définissez le dossier comme un dossier Dreamweaver local (voir « Définition d'un dossier local », page 132). 3 Définissez un dossier de serveur Web comme dossier Dreamweaver distant (voir « Définition d'un dossier distant », page 133). 4 Spécifiez un dossier dans lequel traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 133). 5 Téléchargez les exemples de fichiers sur le serveur Web (voir « Téléchargement des exemples de fichiers », page 134). Configuration d'un exemple de site JSP 131 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 nouveau dossier intitulé Sites sur votre disque dur. Par exemple, créez C:\Sites (Windows) ou Disque dur:Documents:Sites (Macintosh). 2 Localisez le dossier GettingStarted dans le dossier d'application Dreamweaver, sur votre disque dur. Le chemin qui mène au dossier est le suivant : \Macromedia\Dreamweaver MX\Samples\GettingStarted\ 3 Copiez le dossier GettingStarted dans le dossier Sites. Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver local. Définition d'un dossier local Après avoir copié le dossier GettingStarted, définissez le dossier contenant les exemples de fichiers JSP comme un dossier Dreamweaver local. Pour définir le dossier Dreamweaver local : 1 Dans Dreamweaver, choisissez Site > Nouveau site. La boîte de dialogue Définition du site s'ouvre. 2 Si l'assistant apparaît, cliquez sur Avancé. 3 Dans le champ Nom du site, tapez GlobalCar - JSP. Le nom identifie votre site dans Dreamweaver. 4 Dans le champ Dossier racine local, indiquez le dossier du dossier GettingStarted qui contient les exemples de fichiers JSP. Vous pouvez cliquer sur l'icône représentant un dossier, située à côté du champ, pour trouver et sélectionner le dossier. Sous Windows, le dossier doit se présenter de la manière suivante : C:\Sites\GettingStarted\Develop\jsp Sur un Macintosh, le dossier doit se présenter de la manière suivante : Disque dur:Documents:Sites:GettingStarted:Develop:jsp Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez maintenant définir un dossier de serveur Web comme dossier Dreamweaver distant. 132 Chapitre 10 Définition d'un dossier distant Après avoir défini un dossier local, vous devez définir un dossier de serveur Web comme dossier Dreamweaver distant, comme le décrit cette section. Pour définir le dossier Dreamweaver distant : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Infos distantes. L'écran Infos distantes apparaît. 2 Dans le champ Accès, choisissez la manière dont vous souhaitez placer et déplacer vos fichiers sur le serveur : directement (option Local/Réseau) ou en utilisant le protocole FTP. 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 131. 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 reste le dossier « distant » valide. Voici un exemple si vous choisissez l'accès Local/Réseau : Dossier distant : c:\Inetpub\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 (Aide > Utilisation de Dreamweaver). Laissez la boîte de dialogue Définition du site ouverte. Vous devez ensuite définir un dossier pour le traitement des pages dynamiques. Définition du dossier de traitement des pages dynamiques Après avoir défini le dossier Dreamweaver distant, spécifiez un dossier dans lequel traiter les pages dynamiques. Dreamweaver utilise ce dossier pour afficher les pages dynamiques et se connecter aux bases de données lorsque vous travaillez. Pour spécifier le dossier dans lequel traiter les pages dynamiques : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Serveur d'évaluation. L'écran Serveur d'évaluation apparaît. Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Le choix du serveur importe à partir du moment où il est capable de traiter des pages JSP. Dans ce cas, vous pouvez utiliser les mêmes paramètres que la catégorie Infos distantes (voir « Définition d'un dossier distant », page 133), puisqu'ils vous dirigent vers un serveur capable de traiter les pages JSP. 2 Sélectionnez la technologie de serveur JSP. 3 Dans le champ Accès, choisissez 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. Configuration d'un exemple de site JSP 133 4 Dans le champ Préfixe de l'URL, tapez l'URL racine à saisir dans un navigateur Web pour demander une page dans votre application Web. Pour afficher des données dynamiques dans vos pages lorsque vous travaillez, Dreamweaver crée un fichier temporaire, le copie dans le dossier racine du site Web et essaie de le demander en utilisant le préfixe de l'URL. Dreamweaver déduit le préfixe de l'URL en fonction des informations fournies dans la boîte de dialogue Définition du site. Par exemple, si le dossier spécifié dans le champ Dossier distant est c:\Inetpub\wwwroot\MySampleApp, le préfixe de l'URL doit se présenter comme suit : http://localhost/MySampleApp/ Conseil : le préfixe d'URL ne doit jamais indiquer une page particulière du site. Il arrive cependant que le préfixe d'URL proposé soit incorrect. Corrigez-le ou saisissez un nouveau préfixe d'URL si la proposition de Dreamweaver est incorrecte. Pour plus d'informations, voir « A propos du préfixe d'URL » dans l'aide (Aide > Utilisation de Dreamweaver). 5 Cliquez sur OK, puis sur Terminé. Après avoir spécifié un dossier pour le traitement des pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web. Téléchargement des exemples de fichiers Après avoir spécifié un dossier dans lequel traiter les pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web comme indiqué dans cette section. Vous devez « télécharger » les fichiers, même si le serveur Web est exécuté sur votre ordinateur local. Si vous ne téléchargez pas les fichiers, des fonctions telles que l'affichage des données dynamiques et l'aperçu dans le navigateur ne fonctionneront pas avec les pages dynamiques. Par exemple, des liens d'image risquent d'être rompus dans l'affichage des données dynamiques car les fichiers d'image ne se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien vers une page d'informations détaillées tout en affichant l'aperçu d'une page principale dans un navigateur provoquera une erreur si la page d'informations détaillées manque dans le serveur. Pour télécharger les exemples de fichiers dans un serveur Web : 1 Dans le panneau Site (Fenêtre > Site), sélectionnez le dossier racine dans le panneau Fichiers locaux. Le dossier racine doit être le premier dossier de la liste. 2 Cliquez sur la flèche haut bleue de la barre d'outils. Dreamweaver copie tous les fichiers dans le dossier du serveur Web défini dans « Définition d'un dossier distant », page 133. Le site Dreamweaver est défini. Au cours de l'étape suivante, vous devez vous connecter à l'exemple de base de données installé avec Dreamweaver. Si votre serveur Web est exécuté sur votre ordinateur local, voir « Connexion à l'exemple de base de données (configuration locale) », page 135. Si votre serveur Web est exécuté sur un ordinateur distant, voir « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 137. 134 Chapitre 10 Connexion à l'exemple de base de données (configuration locale) 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 à l'exemple de base de données si vous avez une configuration locale, c'est-à-dire si votre serveur Web est exécuté sur le même ordinateur que Dreamweaver. Si votre serveur Web est exécuté sur un ordinateur distant, voir « Connexion à l'exemple de base de données (configuration avec un serveur distant) », page 137. Remarque : si vous souhaitez vous connecter à une autre base de données, voir « Connexions à des bases de données pour les développeurs JSP » dans l'aide (Aide > Utilisation de Dreamweaver). Pour créer une connexion à une base de données avec une configuration locale : 1 Installez le pilote JDBC-ODBC Bridge de Sun (voir « Installation du pilote de pont », page 135). 2 Créez la connexion dans Dreamweaver (voir « Création d'une connexion à une base de données », page 136). Installation du pilote de pont Avant de créer une connexion à un exemple de base de données, installez le pilote JDBC-ODBC Bridge de Sun sur l'ordinateur exécutant votre serveur Web. Le pilote de pont vous permet d'utiliser des noms de source de données (DSN) Windows pour créer des connexions. Ce pilote est fourni avec Java 2 SDK de Sun, Standard Edition, pour Windows. Pour savoir si vous avez déjà Java 2 SDK avec le pilote, recherchez l'un de ces deux répertoires sur votre disque dur : c:\jdk1.2.x c:\jdk1.3.x Remarque : Java 1.2.2 et 1.3 sont les mêmes que Java 2. Si vous ne disposez pas de SDK, vous pouvez le télécharger à partir du site Web de Sun à l'adresse suivante : http://java.sun.com/j2se/. Après avoir téléchargé le fichier d'installation, double-cliquez dessus pour exécuter le programme d'installation. Suivez les instructions à l'écran et vérifiez que le composant Java 2 Runtime Environment est sélectionné dans la boîte de dialogue Sélectionner un composant. Il doit être sélectionné par défaut. Le pilote est installé automatiquement lorsque vous installez le SDK. Bien qu'il soit parfaitement adapté au développement avec des systèmes de bases de données bas de gamme tels que Microsoft Access, le pilote JDBC-ODBC Bridge de Sun n'est pas conçu pour la production. Par exemple, il ne permet la connexion à la base de données que d'une seule page JSP à la fois (en d'autres termes, il ne prend pas en charge l'utilisation simultanée par plusieurs threads). Pour plus d'informations sur les limites du pilote, voir l'article 12409 sur le centre de support Macromedia à l'adresse suivante : http://www.macromedia.com/go/jdbc-odbc_problems. Après avoir installé le pilote de pont, créez une connexion à une base de données dans Dreamweaver. Configuration d'un exemple de site JSP 135 Création d'une connexion à une base de données Après avoir installé le pilote de pont JDBC-ODBC de Sun sur l'ordinateur qui exécute le serveur Web , créez une connexion à une base de données dans Dreamweaver. Pour créer une connexion à une base de données dans Dreamweaver : 1 Ouvrez n'importe quelle page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez sur le bouton plus (+) dans le panneau et choisissez Pilote JDBC-ODBC Sun (Base de données ODBC) dans le menu contextuel. La boîte de dialogue Base de données ODBC (Pilote JDBC-ODBC Sun) s'affiche. 3 Tapez connGlobal comme nom de connexion. 4 Sélectionnez l'option Utilisation du pilote sur cet ordinateur. 5 Dans la zone URL, remplacez l'espace réservé [odbc dsn] par GlobalCar. Au cours de l'installation, Dreamweaver a créé un DSN intitulé GlobalCar pointant vers la base de données Microsoft Access du dossier Samples\Database du dossier d'application de Dreamweaver MX. Dans le champ URL, vous devez pouvoir lire ce qui suit : jdbc:odbc:GlobalCar 6 Cliquez sur Tester. Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, procédez de la manière suivante : • Revérifiez le DSN et les autres paramètres de la connexion. • Vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 133). • Consultez « Résolution des problèmes de connexion à des bases de données », page 151. 7 Cliquez sur OK. La nouvelle connexion s'affiche dans le panneau Bases de données. L'exemple d'application JSP est configuré pour le guide Bien démarrer avec Dreamweaver MX et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels dans l'aide (Aide > Didacticiels). 136 Chapitre 10 Connexion à l'exemple de base de données (configuration avec un serveur distant) 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 à l'exemple de base de données si vous avez une configuration de serveur distant, c'est-à-dire si votre serveur Web est exécuté sur un ordinateur distant. Si votre serveur Web est exécuté sur le même ordinateur que Dreamweaver, voir « Connexion à l'exemple de base de données (configuration locale) », page 135. Remarque : si vous souhaitez vous connecter à une autre base de données, voir « Connexions à des bases de données pour les développeurs JSP » dans l'aide (Aide > Utilisation de Dreamweaver). Pour créer une connexion à une base de données avec une configuration de serveur distant : 1 Configurez la base de données sur l'ordinateur sur lequel votre serveur Web est exécuté (voir « Configuration de la base de données sur l'ordinateur distant », page 137). 2 Créez la connexion dans Dreamweaver (voir « Création d'une connexion à une base de données », page 138). Configuration de la base de données sur l'ordinateur distant Avant de créer une connexion à l'exemple de base de données, exécutez les tâches suivantes sur l'ordinateur distant qui exécute votre serveur Web : copiez l'exemple de base de données sur le disque dur de votre ordinateur, créez un DSN sur l'ordinateur pointant vers la base de données et installez le pilote de pont JDBC-ODBC de Sun sur l'ordinateur. Pour configurer l'exemple de base de données sur l'ordinateur distant : 1 Copiez le fichier de la base de données sur l'ordinateur distant. Le fichier de la base de données, global.mdb, réside dans le dossier suivant, sur votre disque dur : \Macromedia\Dreamweaver MX\Samples\Database\global.mdb Vous pouvez placer le fichier dans le dossier de votre choix, sur l'ordinateur distant, ou créer un nouveau dossier. 2 Vérifiez que Microsoft Access Driver, version 4.0 ou ultérieure, est installé sur l'ordinateur distant. Pour savoir si le pilote est déjà installé, voir « Affichage des pilotes ODBC installés sur un système Windows » dans l'aide (Aide > Utilisation de Dreamweaver). Si le pilote n'est pas installé, téléchargez et installez Microsoft Data Access Components (MDAC) 2.5 et 2.6 sur l'ordinateur distant. Vous pouvez télécharger gratuitement MDAC à partir du site Web de Microsoft à l'adresse suivante : http://www.microsoft.com/data/download.htm. Ces progiciels contiennent les pilotes Microsoft les plus récents, y compris le pilote Microsoft Access. Remarque : installez MDAC 2.5 avant d'installer MDAC 2.6. 3 Configurez un DSN pour l'exemple de base de données sur l'ordinateur distant. Pour obtenir des instructions, voir « Définition d'un DSN sous Windows » dans l'aide (Aide > Utilisation de Dreamweaver). 4 Vérifiez que le pilote de pont JDBC-ODBC de Sun est installé sur l'ordinateur distant. Vous utiliserez ce pilote et le DSN pour créer une connexion à la base de données. Pour obtenir des instructions, voir « Installation du pilote de pont », page 135. Une fois que la base de données, le DSN et le pilote de pont sont en place, créez une connexion à une base de données dans Dreamweaver. Configuration d'un exemple de site JSP 137 Création d'une connexion à une base de données Après avoir configuré l'exemple de base de données sur l'ordinateur distant, créez une connexion à la base de données dans Dreamweaver. Pour créer une connexion à une base de données dans Dreamweaver : 1 Ouvrez n'importe quelle page JSP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez sur le bouton plus (+) dans le panneau et choisissez Pilote JDBC-ODBC Sun (Base de données ODBC) dans le menu contextuel. La boîte de dialogue Base de données ODBC (Pilote JDBC-ODBC Sun) s'affiche. 3 Tapez connGlobal comme nom de connexion. 4 Sélectionnez l'option Utilisation du pilote sur le serveur d'évaluation. Les utilisateurs Macintosh peuvent ignorer cette étape car toutes les connexions à des bases de données utilisent des pilotes sur le serveur d'évaluation. 5 Dans la zone URL, remplacez l'espace réservé [odbc dsn] par le DSN défini sur l'ordinateur distant. Dans le champ URL, vous devez pouvoir lire ce qui suit : jdbc:odbc:myDSN 6 Cliquez sur Tester. Dreamweaver essaie de se connecter à la base de données. Si la connexion échoue, procédez de la manière suivante : • Vérifiez le DSN et les autres paramètres de la connexion. • Vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 133). • Consultez « Résolution des problèmes de connexion à des bases de données », page 151. 7 Cliquez sur OK. La nouvelle connexion apparaît dans le panneau Base de données. L'exemple d'application JSP est configuré pour le guide Bien démarrer avec Dreamweaver MX et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels de l'aide Dreamweaver (Aide > Didacticiels). 138 Chapitre 10 CHAPITRE 11 Configuration d'un exemple de site PHP Macromedia Dreamweaver MX est fourni avec des exemples de pages PHP qui vous permettront de créer une petite application Web. Ce chapitre décrit une méthode de configuration de l'application à l'aide de Microsoft Internet Information Server (IIS) ou de Personal Web Server (PWS). Pour plus d'informations sur ces serveurs Web, voir « Installation d'un serveur Web sous Windows », page 89. Si vous utilisez un autre serveur Web, voir « Configuration d'une application Web » dans l'aide (Aide > Utilisation de Dreamweaver). Si vous utiliser un Mac OS X, vous pouvez développer des sites PHP localement en utilisant le serveur Web Apache et le serveur d'application PHP installé avec votre système d'exploitation. Pour plus d'informations sur la configuration, consultez les sites Web suivants : • http://developer.apple.com/internet/macosx/php.html • http://www.entropy.ch/software/macosx/ • http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html 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 suit l'ordre de ces trois étapes. Ce chapitre contient les sections suivantes : • • • • « Configuration de la liste de contrôle des développeurs PHP », page 140 « Configuration du système », page 141 « Définition d'un site Dreamweaver », page 145 « Connexion à l'exemple de base de données », page 148 139 Configuration de la liste de contrôle des développeurs PHP Pour configurer une application Web, vous devez configurer votre système, définir un site Dreamweaver, puis vous connecter à une base de données. Cette section fournit une liste de contrôle pour chaque tâche. Les procédures sont décrites dans le reste du chapitre. Configurez votre système : 1 Vérifiez que vous disposez d'un serveur Web. 2 Installez le serveur d'application PHP. 3 Testez votre installation. 4 Créez un dossier racine. Définissez un site Dreamweaver : 1 Copiez les exemples de fichiers dans un dossier, sur votre disque dur. 2 Définissez le dossier comme un dossier Dreamweaver local. 3 Définissez un dossier de serveur Web comme dossier Dreamweaver distant. 4 Définissez un dossier dans lequel traiter les pages dynamiques. 5 Téléchargez les exemples de fichiers sur le serveur Web. Connectez-vous à la base de données : 1 Créez l'exemple de base de données MySQL. 2 Créez une connexion à la base de données dans Dreamweaver. 140 Chapitre 11 Configuration du système Cette section fournit des instructions pour les deux configurations de système les plus courantes : lorsque Microsoft IIS ou PWS est installé sur votre disque dur et lorsque IIS ou PWS est installé sur un ordinateur Windows distant. Si vous ne voulez pas utiliser ces configurations, voir « Configuration d'une application Web » dans l'aide (Aide > Utilisation de Dreamweaver). Remarque : si vous utilisez un Mac OS X, vous pouvez utiliser le serveur Web Apache et le serveur d'application PHP installé avec votre système d'exploitation. Pour plus d'informations, consultez le site Web Apple à l'adresse suivante : http://developer.apple.com/internet/macosx/php.html. Parmi les autres sites Web utiles, nous retiendrons les adresses suivantes : http://www.entropy.ch/software/macosx/ et http://www.stepwise.com/Articles/Workbench/ 2001-10-11.01.html. L'illustration suivante présente les deux configurations décrites dans cette section : Configuration locale (pour les utilisateurs de Windows uniquement) WINDOW S PC Dreamweaver MX Configuration du serveur dist (pour les utilisateurs de Mac ou de Windows) MA C ou WINDOWS PC Dreamweaver MX PWS ou IIS Serveur d'application PHP Dossier racine du site Web dans c:\Inetpub\ wwwroot\ Accès via le réseau ou via FTP cces SERVEUR WINDOWS PWS ou IIS Serveur d'application PHP Dossier racine du site Web dans c:\Inetpub\ wwwroot\ Configuration d'un exemple de site PHP 141 Pour configurer votre système : 1 Vérifiez que vous disposez d'un serveur Web (voir « Recherche d'un serveur Web », page 142). 2 Installez le serveur d'application PHP (voir « Installation d'un serveur d'application PHP », page 142). 3 Testez votre installation (voir « Test de l'installation », page 143). 4 Créez un dossier racine (voir « Création d'un dossier racine », page 144). Remarque : l'installation du serveur Web et du serveur d'application sont des tâches que vous n'aurez à exécuter qu'une seule fois. Recherche d'un serveur Web Pour développer et tester des pages Web dynamiques, vous avez besoin d'un serveur Web opérationnel. Un serveur Web est un logiciel qui fournit des pages Web en réponse à des requêtes de navigateurs Web. Vérifiez que Microsoft IIS ou PWS est installé et exécuté sur votre disque dur ou un ordinateur Windows distant (les utilisateurs Macintosh doivent installer Microsoft IIS ou PWS sur un ordinateur distant). Pour savoir si PWS ou IIS est installé sur un ordinateur, vérifiez la structure des dossiers. Est-ce que votre ordinateur contient un dossier c:\Inetpub ou d:\Inetpub ? PWS et IIS créent ces dossiers lors de l'installation. Si PWS ou IIS n'est pas installé, installez-le maintenant. Pour obtenir des instructions, voir « Installation d'un serveur Web sous Windows », page 89. Après avoir installé le serveur Web, installez le serveur d'application. Installation d'un serveur d'application PHP Un serveur d'application est nécessaire pour traiter les pages Web dynamiques. Un serveur d'application est un logiciel qui aide un serveur Web à traiter des pages Web contenant des scripts ou des balises côté serveur. Lorsqu'une page 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. Vérifiez que le serveur d'application PHP est installé et exécuté sur le système sur lequel PWS ou IIS est exécuté (PPWS ou IIS peut résider sur votre disque dur ou un ordinateur Windows distant). Si vous ne disposez pas de PHP, vous pouvez le télécharger et l'installer à partir du site Web PHP à l'adresse suivante : http://www.php.net/downloads.php. Sélectionnez le fichier d'installation Windows, qui utilise InstallShield pour installer PHP et configurer IIS ou PWS. Pour installer PHP sur un système Windows : 1 Fermez toutes les applications ouvertes. 2 Le cas échéant, connectez-vous à votre système Windows en utilisant le compte Administrateur. 3 Double-cliquez sur le fichier d'installation téléchargé à partir du site Web PHP. 4 Suivez les instructions à l'écran pour installer le programme. Une fois l'installation terminée, le programme d'installation vous demande de redémarrer votre système, le serveur ou simplement de commencer à utiliser PHP. Pour plus d'informations sur la configuration du serveur, reportez-vous à la documentation PHP, que vous pouvez télécharger à partir du site Web PHP à l'adresse suivante : http://www.php.net/ download-docs.php. Après avoir installé PHP, vous pouvez tester le serveur pour vous assurer qu'il fonctionne correctement. 142 Chapitre 11 Test de l'installation Vous pouvez tester le serveur d'application PHP en exécutant une page de test, tel que cela est décrit dans cette section. Pour tester le serveur d'application PHP : 1 Dans Dreamweaver ou n'importe quel éditeur de texte, créez un fichier de texte pur intitulé timetest.php. 2 Tapez le code suivant dans le fichier : <p>This page was created at <b> <?php echo date("h:i:s a", time()); ?> </b> on the computer running PHP.</p> Le code affiche l'heure à laquelle la page a été traitée sur le serveur. 3 Copiez la page dans le dossier Inetpub\wwwroot sur le disque dur ou l'ordinateur Windows qui exécute PWS ou IIS. 4 Dans votre navigateur Web, tapez l'URL de la page de test et appuyez sur Entrée. Si vous avez installé PHP sur votre ordinateur local, vous pouvez taper l'URL suivante : http://localhost/timetest.php La page de test doit s'ouvrir et indiquer une heure : L'heure indiquée correspond au contenu dynamique car elle change chaque fois que vous appelez la page. Cliquez sur le bouton Actualiser du navigateur pour générer une nouvelle page avec une heure différente. Remarque : en consultant le code source (Affichage > Source dans Internet Explorer), vous pourrez vérifier que la page n'utilise pas de code JavaScript côté client pour obtenir ce résultat. Configuration d'un exemple de site PHP 143 Si la page ne fonctionne pas correctement, recherchez les erreurs potentielles suivantes : • Le fichier n'a pas d'extension .php. • Le chemin du fichier de la page (c:\Inetput\wwwroot\timetest.php), et non son URL (par exemple, http://localhost/timetest.php), a été tapé dans le champ Adresse du navigateur. Si vous tapez un chemin de fichier dans le navigateur (comme vous en avez peut-être l'habitude avec les pages HTML normales), vous contournez le serveur Web et le serveur d'application. Votre page n'est alors jamais traitée par le serveur. • L'URL contient une faute de frappe. Recherchez les erreurs éventuelles et vérifiez que le nom de fichier n'est pas suivi d'une barre oblique, tel que dans l'adresse suivante : http://localhost/ timetest.php/. Après avoir installé et testé le logiciel de serveur, créez un dossier racine pour votre application Web. Création d'un dossier racine Une fois le logiciel de serveur installé, créez un dossier racine pour votre application Web, sur le système qui exécute Microsoft PWS ou IIS, et vérifiez que ce dossier jouit des autorisations nécessaires. Pour créer un dossier racine pour votre application Web : 1 Créez un dossier intitulé MySampleApp sur le système qui exécute PWS ou IIS. Utillisez de préférence l'emplacement suivant pour créer le dossier : C:\Inetpub\wwwroot\. Par défaut, votre serveur Web PWS ou IIS est configuré dans le dossier Inetpub\wwwroot. Le serveur Web répondra aux requêtes HTTP des navigateurs Web en renvoyant les pages de ce dossier ou de ses sous-dossiers. 2 Assurez-vous que les autorisations Lire et Scripts sont activées pour le dossier. Si vous utilisez PWS, lancez le Personal Web Manager en double-cliquant sur l'icône du serveur Web, dans la barre d'état système (l'icône ressemble à une main tenant une page Web). Dans le Personal Web Manager, cliquez sur l'icône Advanced. La boîte de dialogue Advanced Options s'affiche. Choisissez Home et cliquez sur Edit Properties. La boîte de dialogue Edit Properties s'affiche. Assurez-vous que les options Read et Scripts sont sélectionnées. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Execute. Si vous utilisez IIS, lancez l'outil administratif IIS (sous Windows XP, choisissez Démarrer > Panneau de configuration > Maintenance des performances > Outils administratifs > Internet Information Services). Sous Sites Web > Site Web par défaut, cliquez avec le bouton droit de la souris sur votre dossier MySampleSite et choisissez Propriétés dans le menu contextuel. Dans la zone Exécuter les autorisations, vérifiez que l'option Scripts est sélectionnée. Pour des raisons de sécurité, nous vous recommandons de ne pas sélectionner l'option Scripts et exécutables. Le serveur Web est maintenant configuré pour fournir les pages Web de votre dossier racine en réponse aux requêtes HTTP des navigateurs Web. Une fois votre système configuré, vous devez définir un site Dreamweaver. 144 Chapitre 11 Définition d'un site Dreamweaver 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 145). 2 Définissez le dossier comme un dossier Dreamweaver local (voir « Définition d'un dossier local », page 145). 3 Définissez un dossier de serveur Web comme dossier Dreamweaver distant (voir « Définition d'un dossier distant », page 146). 4 Spécifiez un dossier dans lequel traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 147). 5 Téléchargez les exemples de fichiers sur le serveur Web (voir « Téléchargement des exemples de fichiers », page 148). 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 nouveau dossier intitulé Sites sur votre disque dur. Par exemple, créez C:\Sites (Windows) ou Disque dur:Documents:Sites (Macintosh). 2 Localisez le dossier GettingStarted dans le dossier d'application Dreamweaver, sur votre disque dur. Le chemin qui mène au dossier est le suivant : \Macromedia\Dreamweaver MX\Samples\GettingStarted\ 3 Copiez le dossier GettingStarted dans le dossier Sites. Après avoir copié le dossier GettingStarted, définissez le dossier comme dossier Dreamweaver local. Définition d'un dossier local Après avoir copié le dossier GettingStarted, définissez le dossier contenant les exemples de fichiers PHP comme dossier Dreamweaver local. Pour définir le dossier Dreamweaver local : 1 Dans Dreamweaver, choisissez Site > Nouveau site. La boîte de dialogue Définition du site s'ouvre. 2 Si l'assistant apparaît, cliquez sur Avancé. 3 Dans le champ Nom du site, tapez GlobalCar - PHP. Le nom identifie votre site dans Dreamweaver. Configuration d'un exemple de site PHP 145 4 Dans le champ Dossier racine local, indiquez le dossier du dossier GettingStarted qui contient les exemples de fichiers PHP. Vous pouvez cliquer sur l'icône représentant un dossier, située à côté du champ, pour trouver et sélectionner le dossier. Sous Windows, le dossier doit se présenter de la manière suivante : C:\Sites\GettingStarted\Develop\php Sur un Macintosh, le dossier doit se présenter de la manière suivante : Disque dur:Documents:Sites:GettingStarted:Develop:php 5 Pour le moment, laissez ouverte la boîte de dialogue Définition du site. Vous devez maintenant définir un dossier de serveur Web comme dossier Dreamweaver distant. Définition d'un dossier distant Après avoir défini un dossier local, vous devez définir un dossier de serveur Web comme dossier Dreamweaver distant, comme le décrit cette section. Pour définir le dossier Dreamweaver distant : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Infos distantes. L'écran Infos distantes apparaît. 2 Dans le champ Accès, choisissez la manière dont vous souhaitez placer et déplacer vos fichiers sur le serveur : directement (option Local/Réseau) ou en utilisant le protocole FTP. 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 144. 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 reste le dossier « distant » valide. Voici un exemple si vous choisissez l'accès Local/Réseau : Dossier distant : c:\Inetpub\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 (Aide > Utilisation de Dreamweaver). Laissez la boîte de dialogue Définition du site ouverte. Vous devez ensuite définir un dossier pour le traitement des pages dynamiques. 146 Chapitre 11 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, comme indiqué dans cette section. Dreamweaver utilise ce dossier pour afficher les pages dynamiques et se connecter aux bases de données lorsque vous travaillez. Pour spécifier le dossier dans lequel traiter les pages dynamiques : 1 Dans l'onglet Avancé de la boîte dialogue Définition du site, sélectionnez la catégorie Serveur d'évaluation. L'écran Serveur d'évaluation apparaît. Dreamweaver doit pouvoir recourir aux services d'un serveur d'évaluation pour générer et afficher du contenu dynamique pendant que vous procédez à la création du site. Ce serveur peut se trouver sur votre ordinateur local, un serveur de développement, un serveur intermédiaire ou un serveur de production. Le choix du serveur importe peu à partir du moment où il est capable de traiter des pages PHP. Dans ce cas, vous pouvez utiliser les mêmes paramètres que la catégorie Infos distantes (voir « Définition d'un dossier distant », page 146), puisqu'ils vous dirigent vers un serveur capable de traiter les pages PHP. 2 Sélectionnez PHP MySQL comme technologie de serveur. 3 Dans le champ Accès, choisissez la méthode (Local/Réseau ou FTP) que vous avez spécifiée pour accéder à votre dossier distant. Dreamweaver entre les paramètres spécifiés dans la catégorie Infos distantes. Laissez les paramètres tels qu'ils sont. 4 Dans le champ Préfixe de l'URL, tapez l'URL racine à saisir dans un navigateur Web pour demander une page dans votre application Web. Pour afficher des données dynamiques dans vos pages lorsque vous travaillez, Dreamweaver crée un fichier temporaire, le copie dans le dossier racine du site Web et essaie de le demander en utilisant le préfixe de l'URL. Dreamweaver déduit le préfixe de l'URL en fonction des informations fournies dans la boîte de dialogue Définition du site. Il arrive cependant que le préfixe d'URL proposé soit incorrect. Par exemple, si le dossier spécifié dans le champ Dossier distant est c:\Inetpub\wwwroot\MySampleApp, le préfixe de l'URL doit se présenter comme suit : http://localhost/MySampleApp/ Conseil : le préfixe d'URL ne doit jamais indiquer une page particulière du site. Il arrive cependant que le préfixe d'URL proposé soit incorrect. Corrigez-le ou saisissez un nouveau préfixe d'URL si la proposition de Dreamweaver est incorrecte. Pour plus d'informations, voir « A propos du préfixe d'URL » dans l'aide (Aide > Utilisation de Dreamweaver). 5 Cliquez sur OK, puis 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. Configuration d'un exemple de site PHP 147 Téléchargement des exemples de fichiers Après avoir spécifié un dossier dans lequel traiter les pages dynamiques, téléchargez les exemples de fichiers dans le serveur Web comme indiqué dans cette section. Vous devez « télécharger » les fichiers, même si le serveur Web est exécuté sur votre ordinateur local. Si vous ne téléchargez pas les fichiers, des fonctions telles que l'affichage des données dynamiques et l'aperçu dans le navigateur ne fonctionneront pas avec les pages dynamiques. Par exemple, des liens d'image risquent d'être rompus dans l'affichage des données dynamiques car les fichiers d'image ne se trouvent pas encore sur le serveur. De même, le fait de cliquer sur un lien vers une page d'informations détaillées tout en affichant l'aperçu d'une page principale dans un navigateur provoquera une erreur si la page d'informations détaillées manque dans le serveur. Pour télécharger les exemples de fichiers dans un serveur Web : 1 Dans le panneau Site (Fenêtre > Site), sélectionnez le dossier racine dans le panneau Fichiers locaux. Le dossier racine doit être le premier dossier de la liste. 2 Cliquez sur la flèche haut bleue de la barre d'outils. Dreamweaver copie tous les fichiers dans le dossier du serveur Web défini dans « Définition d'un dossier distant », page 146. Le site Dreamweaver est défini. Au cours de l'étape suivante, vous devez vous connecter à l'exemple de base de données installé avec Dreamweaver. Connexion à l'exemple de base de données Au cours de l'installation, Dreamweaver copie un script SQL sur votre disque dur. Vous pouvez utiliser ce script pour créer automatiquement un exemple de base de données MySQL. Cette section explique comment créer une connexion à un exemple de base de données. Vous devez avoir préalablement installé et configuré MySQL sur votre ordinateur local ou distant. Pour télécharger et installer le système de base de données, visitez le site Web MySQL à l'adresse suivante : www.mysql.com. Vous devez commencer par créer un exemple de base de données MySQL en utilisant le script SQL (voir « Création de la base de données MySQL », page 148). Une fois la base de données créée, vous devez créer une connexion à la base de données dans Dreamweaver (voir « Création d'une connexion à une base de données », page 150). Création de la base de données MySQL Au cours de l'installation, Dreamweaver MX copie un script SQL capable de créer et de compléter un exemple de base de données MySQL. Avant de commencer, vérifiez que MySQL est installé et configuré sur votre ordinateur local ou distant. Vous pouvez télécharger la dernière version à partir du site Web MySQL à l'adresse suivante : www.mysql.com. 148 Chapitre 11 Pour créer l'exemple de base de données MySQL : 1 Copiez le fichier de script SQL, insert.sql, dans le dossier MySql\Bin, sur l'ordinateur sur lequel MySQL est exécuté. Le fichier du script réside dans le dossier suivant, sur votre disque dur : \Macromedia\Dreamweaver MX\Samples\Database\insert.sql 2 Sur l'ordinateur qui exécute MySQL, ouvrez la fenêtre d'invite de la commande. Sous Windows, vous pouvez ouvrir l'invite de la commande en choisissant Démarrer > Programmes > Invite de commande. Remarque : sur certains systèmes, l'invite de commande peut résider sous Accessoires dans le menu Démarrer > Programmes. 3 Passez au répertoire mysql\bin en tapant les commandes suivantes à l'invite : > cd\ > cd mysql\bin 4 Lancez le client MySQL en tapant la commande suivante à l'invite mysql\bin\ : > mysql -uUser -pPassword Par exemple, si votre nom d'utilisateur MySQL (également appelé nom de compte) et votre mot de passe sont Tara et Telly3, tapez la commande suivante : > mysql -uTara -pTelly3 Si vous n'avez pas de mot de passe, laissez de côté l'argument -p : > mysql -uTara Si vous n'avez pas défini un nom d'utilisateur en configurant votre installation MySQL, tapez la racine comme nom d'utilisateur : > mysql -uroot L'invite de commande du client MySQL apparaît : mysql> 5 Créez une nouvelle base de données en tapant la commande suivante à l'invite MySQL : mysql>CREATE DATABASE GlobalCar; MySQL crée une nouvelle base de données, mais elle ne contient aucun tableau ou enregistrement pour le moment. 6 Déconnectez-vous du client MySQL en tapant la commande suivante à l'invite : mysql>quit 7 A l'invite de commande du système, complétez la nouvelle base de données GlobalCar dans MySQL en tapant la commande suivante : > mysql -uUser -pPassword GlobalCar < insert.sql Cette commande utilise le fichier insert.sql pour ajouter des tableaux et enregistrements dans la base de données GlobalCar créée à l'étape 5. Après avoir créé la base de données MySQL, créez une connexion à cette base de données dans Dreamweaver. Configuration d'un exemple de site PHP 149 Création d'une connexion à une base de données Après avoir configuré l'exemple de base de données , vous pouvez créer une connexion à la base de données dans Dreamweaver. Pour créer une connexion à une base de données dans Dreamweaver : 1 Ouvrez n'importe quelle page PHP dans Dreamweaver, puis allez dans le panneau Bases de données (Fenêtre > Bases de données). 2 Cliquez sur le bouton plus (+) du panneau et choisissez Connexion MySQL dans le menu contextuel. La boîte de dialogue Connexion WebDAV s'ouvre. 3 Tapez connGlobal comme nom de connexion. 4 Dans la zone Serveur MySQL, indiquez l'ordinateur qui héberge MySQL. Entrez une adresse IP ou un nom de serveur. Si MySQL est exécuté sur le même ordinateur que PHP, tapez localhost. 5 Entrez votre nom d'utilisateur et mot de passe MySQL. Si vous n'avez pas défini de nom d'utilisateur lors de la configuration de l'installation de MySQL sur un ordinateur Windows, tapez le mot « root » dans la zone Nom d'utilisateur. Si vous n'avez pas de mot de passe, laissez la zone Mot de passe vierge. 6 Dans la zone Base de données, tapez GlobalCar ou cliquez sur Sélectionner et choisissez GlobalCar dans la liste des bases de données MySQL. GlobalCar est le nom de l'exemple de base de données MySQL créée (voir « Création de la base de données MySQL », page 148). 7 Cliquez sur Tester. Dreamweaver tente d'établir la connexion à la base de données. Si la connexion échoue, revérifiez le nom du serveur, le nom d'utilisateur et le mot de passe. Si la connexion n'aboutit toujours pas, vérifiez les paramètres du dossier utilisé par Dreamweaver pour traiter les pages dynamiques (voir « Définition du dossier de traitement des pages dynamiques », page 147). 8 Cliquez sur OK. La nouvelle connexion s'affiche dans le panneau Bases de données. L'exemple d'application PHP est configuré pour le guide Bien démarrer avec Dreamweaver MX et les didacticiels. Voir « Création d'applications Web dans Dreamweaver MX », page 73 et les didacticiels de l'aide Dreamweaver (Aide > Didacticiels). 150 Chapitre 11 CHAPITRE 12 Résolution des problèmes de connexion à des bases de données Ce chapitre aborde les problèmes les plus fréquents rencontrés après la création d'une connexion à une base de données et propose des solutions pour y remédier. Il comprend les sections suivantes : • « Résolution des messages d'erreur Microsoft », page 151 • « Résolution des messages d'erreur ColdFusion », page 156 • « Résolution des problèmes d'autorisation », page 157 Résolution des messages d'erreur Microsoft Cette section décrit les messages d'erreur Microsoft courants et les solutions pour y remédier. Ces erreurs peuvent se produire si vous utilisez Internet Information Server (IIS) avec un système de base de données Microsoft tel que SQL Server ou Access. Ces erreurs se produisent généralement lorsque vous sollicitez une page dynamique auprès du serveur. Remarque : Macromedia n'offre pas de support technique pour les logiciels tiers tels que Microsoft Windows et IIS. Si cette section ne vous permet pas de résoudre votre problème, contactez le support technique de Microsoft ou visitez le site Web de support technique Microsoft à l'adresse suivante : http://support.microsoft.com/ (en anglais). Les erreurs suivantes sont abordées dans cette section : • « 80004005 - Data source name not found and no default driver specified (Le nom de la source de données est introuvable et aucun pilote par défaut n'est spécifié) », page 152 (d'autres variantes de ce message incluent « 80004005 - Driver's SQLSetConnectAttr failed » (Le paramètre SQLSetConnectAttr du pilote a échoué) et « 80004005 - General error Unable to open registry key ‘DriverId’ » (Erreur générale. Impossible d'ouvrir la clé du registre DriverId)) • « 80004005 - Couldn’t use ‘(unknown)’; file already in use (Impossible d'utiliser « (inconnu) » ; fichier en cours d'utilisation) », page 153 (d'autres variantes de ce message incluent « 80004005 - Microsoft Jet database engine cannot open the file (unknown) » (Le moteur de base de données Microsoft Jet ne peut pas ouvrir le fichier (inconnu)) • « 80004005 - Logon Failed() (Echec de la connexion) », page 153 • « 80004005 - Operation must use an updateable query (L'opération doit utiliser une requête pouvant être mise à jour) », page 154 • « 80040e07 - Data type mismatch in criteria expression (Types de données non concordants dans l'expression des critères) », page 154 • « 80040e10 - Too few parameters (Nombre de paramètres insuffisant) », page 154 151 • « 80040e10 - COUNT field incorrect (Champ COUNT incorrect) », page 155 • « 80040e14 - Syntax error in INSERT INTO statement (Erreur de syntaxe dans l'instruction INSERT INTO) », page 155 • « 80040e21 - ODBC error on Insert or Update (Erreur OBDC au moment d'insérer ou de mettre à jour) », page 156 • « 800a0bcd - Either BOF or EOF is true (BOF ou EOF est égal à True) », page 156 Pour plus d'informations sur les erreurs de type 80004005, reportez-vous à la section « INFO : guide de dépannage pour les erreurs de type 80004005 au niveau des composants Active Server Pages et Microsoft Data Access (Q306518) » sur le site Web de Microsoft à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;en-us;Q306518 (en anglais). 80004005 - Data source name not found and no default driver specified (Le nom de la source de données est introuvable et aucun pilote par défaut n'est spécifié) Cette erreur survient lorsque vous essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live Data. Le message d'erreur varie en fonction de votre base de données et de votre serveur Web. D'autres variantes de ce message d'erreur incluent : • 80004005—Driver's SQLSetConnectAttr failed (Le paramètre SQLSetConnectAttr du pilote a échoué) • 80004005 - General error Unable to open registry key 'DriverId' (Erreur générale. Impossible d'ouvrir la clé du registre DriverId) Les causes et les solutions possibles sont les suivantes : • Le page ne parvient pas à trouver le DSN. Assurez-vous qu'un DSN a été créé sur le serveur Web et sur l'ordinateur local. Pour plus d'informations, voir « Définition d'un DSN sous Windows » dans l'aide (Aide > Utilisation de Dreamweaver MX). • Le DSN peut avoir été défini en tant que DSN utilisateur, et non en tant que DSN système. Supprimez le DSN utilisateur et créez un DSN système pour le remplacer. Remarque : si vous ne supprimez pas le DSN utilisateur, les noms DSN en double engendrent de nouvelles erreurs ODBC. • Si vous utilisez Microsoft Access, le fichier de base de données (.mdb) peut être verrouillé. Ce verrouillage peut être la conséquence d'un DSN avec un nom différent accédant à la base de données. Dans l'Explorateur Windows, recherchez le fichier de verrouillage (.ldb) dans le dossier contenant le fichier de base de données (.mdb) et supprimez-le. Si un autre DSN pointe vers le même fichier de base de données, vous pouvez supprimer ce DSN pour empêcher tout risque d'erreur à l'avenir. Assurez-vous de redémarrer votre ordinateur une fois les modifications effectuées. 152 Chapitre 12 80004005 - Couldn’t use ‘(unknown)’; file already in use (Impossible d'utiliser « (inconnu) » ; fichier en cours d'utilisation) Cette erreur survient lorsque vous utilisez une base de données Microsoft Access et essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live Data. Une variante de ce message d'erreur est « 80004005 - Microsoft Jet database engine cannot open the file (unknown) » (Le moteur de base de données Jet ne peut pas ouvrir le fichier (inconnu)). Ceci est probablement dû à un problème d'autorisations. Pour plus d'informations, voir « Résolution des problèmes d'autorisation », page 157. Voici quelques causes et solutions spécifiques : • Le compte utilisé par Internet Information Server (généralement IUSR) peut ne pas disposer des autorisations Windows NT adéquates pour une base de données basée sur fichier ou pour le dossier contenant le fichier. Vérifiez les autorisations du compte IIS (IUSR) dans le gestionnaire utilisateur NT. • Il est possible que vous ne soyez pas autorisé à créer ou à supprimer des fichiers temporaires. Vérifiez les autorisations attribuées au fichier et au dossier. Assurez-vous que vous êtes autorisé à créer ou à supprimer des fichiers temporaires. Les fichiers temporaires sont généralement créés dans le même dossier que la base de données, mais ils peuvent également être créés dans d'autres dossiers tels que /Winnt. • Sous Windows 2000, il est possible que vous deviez modifier le délai d'expiration pour le DSN de la base de données Access. Pour modifier ce délai, choisissez Démarrer > Paramètres > Panneau de configuration > Outils d'administration > Sources de données (ODBC). Cliquez sur l'onglet Système, sélectionnez le DSN approprié, puis cliquez sur le bouton Configurer. Cliquez sur le bouton Options et définissez la valeur de délai d'expiration de la page sur 5000. Si les problèmes persistent, consultez les points suivants dans la base de connaissances Microsoft : • PRB: 80004005 Impossible d'utiliser « (inconnu) » ; fichier en cours d'utilisation à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;en-us;Q174943 (en anglais). • PRB: La connectivité de la base de données Access échoue dans Active Server Pages à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;en-us;Q253604 (en anglais). • PRB: Erreur « Impossible d'ouvrir le fichier inconnu » lors de l'utilisation d'Access à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;en-us;Q166029 (en anglais). 80004005 - Logon Failed() (Echec de la connexion) Cette erreur survient lorsque vous utilisez Microsoft SQL Server et essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live Data. Cette erreur est générée par SQL Server s'il refuse ou ne reconnaît pas le compte ou le mot de passe de connexion soumis (si vous utilisez une sécurité standard), ou si un compte Windows NT n'est pas associé à un compte SQL (si vous utilisez une sécurité intégrée). Les solutions possibles sont les suivantes : • Si vous utilisez une sécurité standard, le nom de compte et le mot de passe peuvent être incorrects. Essayez le compte et le mot de passe de l'administrateur système (ID utilisateur : « sa » et aucun mot de passe), qui doivent être définis dans la ligne de chaîne de connexion. Les DSN ne conservent pas les noms d'utilisateurs et les mots de passe. • Si vous utilisez une sécurité intégrée, vérifiez le compte Windows NT appelant la page et localisez son compte SQL associé (s'il existe). Résolution des problèmes de connexion à des bases de données 153 • SQL Server n'autorise pas le trait de soulignement dans les noms de compte SQL. Si un utilisateur connecte manuellement le compte Windows NT IUSR_nommachine à un compte SQL portant le même nom, il y a échec. Connectez un compte quelconque qui utilise un trait de soulignement à un nom de compte SQL qui n'en comporte aucun. 80004005 - Operation must use an updateable query (L'opération doit utiliser une requête pouvant être mise à jour) Cette erreur survient lorsqu'un événement met à jour un jeu d'enregistrements ou y insère des données. Les causes et les solutions possibles sont les suivantes : • Les autorisations définies pour le dossier contenant la base de données sont trop restrictives. Les droits d'accès IUSR doivent être définis sur lecture/écriture. Voir « Résolution des problèmes d'autorisation », page 157. • Le fichier de base de données lui-même ne dispose pas de droits d'accès en lecture/écriture complets. Voir « Résolution des problèmes d'autorisation », page 157. • La base de données est peut-être hors du répertoire Inetpub/wwwroot. Bien que vous puissiez visualiser et parcourir les données, vous risquez de ne pas pouvoir les mettre à jour, à moins que la base de données ne soit placée dans le répertoire wwwroot. • Le jeu d'enregistrements repose sur une requête ne pouvant pas être mise à jour. Les relations sont de bons exemples de requêtes ne pouvant être mises à jour dans une base de données. Restructurez vos requêtes de façon à ce qu'elles puissent être mises à jour. Pour plus d'informations sur cette erreur, reportez-vous à la section « Erreur ASP ‘La requête ne peut pas être mise à jour’ lorsque vous mettez l'enregistrement de la table à jour » dans la base de connaissances Microsoft à l'adresse suivante : http://support.microsoft.com/ default.aspx?scid=kb;en-us;Q174640 (en anglais). 80040e07 - Data type mismatch in criteria expression (Types de données non concordants dans l'expression des critères) Cette erreur survient lorsque le serveur essaie de traiter une page contenant un comportement de serveur Insérer l'enregistrement ou Mettre à jour l'enregistrement et que le comportement du serveur tente de définir la valeur d'une colonne Date/Heure d'une base de données Microsoft Access sur une chaîne vide (""). Microsoft Access utilise une saisie des caractères rigoureuse ; le logiciel impose un jeu de règles strictes pour les valeurs de certaines colonnes. La valeur d'une chaîne vide d'une requête SQL ne peut pas être stockée dans une colonne Date/Heure Access. Actuellement, la seule solution connue consiste à éviter d'insérer ou de mettre à jour les colonnes Date/Heure Access avec des chaînes vides ("") ou avec toute autre valeur ne correspondant pas à la gamme de valeurs spécifiées pour le type de données. 80040e10 - Too few parameters (Nombre de paramètres insuffisant) Cette erreur survient lorsqu'une colonne spécifiée dans votre requête SQL n'existe pas dans la table de la base de données. Vérifiez les noms des colonnes de votre base de données par rapport à votre requête SQL. Cette erreur est souvent due à une typographie erronée. 154 Chapitre 12 80040e10 - COUNT field incorrect (Champ COUNT incorrect) Cette erreur survient lorsque vous prévisualisez une page contenant un comportement de serveur Insérer l'enregistrement dans un navigateur Web et que vous essayez de l'utiliser pour insérer un enregistrement dans une base de données Microsoft Access 2000. Vous tentez peut-être d'insérer un enregistrement dans un champ de base de données qui comporte un point d'interrogation (?) dans le nom de champ. Le point d'interrogation est un caractère spécial pour certains moteurs de bases de données, notamment Microsoft Access, et il ne doit pas être utilisé pour les noms de tables de bases de données ou de champs. Ouvrez votre système de base de données, supprimez le point d'interrogation (?) des noms de champs et mettez à jour les comportements de serveur sur la page qui se rapporte à ce champ. 80040e14 - Syntax error in INSERT INTO statement (Erreur de syntaxe dans l'instruction INSERT INTO) Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Insérer l'enregistrement. Cette erreur résulte généralement d'un ou de plusieurs problèmes, cités ci-dessous, relatifs au nom d'un champ, d'un objet ou d'une variable de la base de données : • Utilisation d'un mot réservé en tant que nom. La majorité des bases de données disposent d'un jeu de mots réservés. Par exemple, « date » est un mot réservé et ne peut pas être utilisé pour les noms de colonnes d'une base de données. • Utilisation de caractères spéciaux dans le nom, tels que ceux mentionnés ci-dessous : ./*:!#&-? • Utilisation d'un espace dans le nom. L'erreur peut également survenir lorsqu'un masque d'entrée est défini pour un objet de la base de données et que les données insérées ne sont pas conformes au masque. Pour résoudre le problème, évitez d'utiliser des mots réservés tels que « date », « name », « select », « where » et « level » lorsque vous spécifiez des noms de colonnes dans votre base de données. Eliminez également les espaces et les caractères spéciaux. Reportez-vous aux pages Web suivantes pour des listes détaillées de mots réservés dans les systèmes de bases de données courants. • Microsoft Access à l'adresse suivante : http://support.microsoft.com/default.aspx?scid=kb;enus;Q209187 (en anglais) • Microsoft SQL Server à l'adresse suivante : http://support.microsoft.com/support/sql/content/ inprodhlp/_reserved_keywords.asp?GSSNB=1 (en anglais) • Oracle à l'adresse suivante : http://technet.oracle.com/doc/server.804/a58234/ vol2_wor.htm#421705 (en anglais) • MySQL à l'adresse suivante http://www.mysql.com/doc/R/e/Reserved_words.html (en anglais) Résolution des problèmes de connexion à des bases de données 155 80040e21 - ODBC error on Insert or Update (Erreur OBDC au moment d'insérer ou de mettre à jour) Cette erreur survient lorsque le serveur tente de traiter une page contenant un comportement de serveur Mettre à jour l'enregistrement ou Insérer l'enregistrement. La base de données ne peut pas gérer la mise à jour ou l'insertion que le comportement de serveur tente de réaliser. Les causes et les solutions possibles sont les suivantes : • Le comportement de serveur tente de mettre à jour un champ de numérotation automatique d'une table de base de données ou d'insérer un enregistrement dans un champ de numérotation automatique. Les champs de numérotation automatique sont automatiquement complétés par le système de la base de données ; toute tentative de les renseigner avec une valeur échoue. • Le type de données que le comportement de serveur met à jour ou insère ne correspond pas à celui du champ de la base de données : insertion d'une date dans un champ booléen (oui/non), insertion d'une chaîne dans un champ numérique ou insertion d'une chaîne à la mise en forme incorrecte dans un champ Date/Heure. 800a0bcd - Either BOF or EOF is true (BOF ou EOF est égal à True) Cette erreur survient lorsque vous essayez de visualiser une page dynamique dans un navigateur Web ou en mode Live Data. Ce problème survient lorsque la page tente d'afficher des données à partir d'un jeu d'enregistrements vide. Pour le résoudre, appliquez le comportement de serveur Afficher la région au contenu dynamique à afficher sur la page, de la manière suivante : 1 Sélectionnez le contenu dynamique de la page. 2 Dans le panneau Comportements de serveur, cliquez sur le bouton plus (+) et choisissez Afficher la région > Afficher la région si le jeu d'enregistrements n'est pas vide. 3 Sélectionnez le jeu d'enregistrements dans lequel se trouve le contenu dynamique et cliquez sur OK. 4 Répétez les étapes 1 à 3 pour chaque élément de contenu dynamique sur la page. Résolution des messages d'erreur ColdFusion Cette section décrit les messages d'erreur courants générés par ColdFusion et propose des solutions. ColdFusion - Access Denied (Accès refusé) Cette erreur survient avec ColdFusion 4 ou 5 lors de l'écriture dans une base de données basée sur fichier (telle que Microsoft Access ou Foxpro) à laquelle ColdFusion accède via une source de données. L'erreur survient généralement lorsque vous tentez d'écraser le fichier via FTP ou en copiant un autre fichier par-dessus. Une solution consiste à redémarrer les services ColdFusion ou à désactiver l'option « Maintenir la connexion de la base de données » à partir de la section Source de données de ColdFusion Administrator. 156 Chapitre 12 ColdFusion - Operation must use an updateable query error (Erreur « L'opération doit utiliser une requête pouvant être mise à jour ») Cette erreur survient avec ColdFusion 4 ou 5 lorsque vous tentez d'exécuter une page ColdFusion qui procède à une mise à jour ou à une suppression à partir d'une base de données Microsoft Access (ou une autre base de données basée sur fichier). Cette erreur survient généralement en raison de l'absence d'autorisations adéquates pour ColdFusion au niveau du système d'exploitation du réseau pour écrire dans la base de données. Pour résoudre ce problème sous Windows NT, cliquez sur Démarrer > Paramètres > Panneau de configuration > Services. Double-cliquez sur le service Serveur d'application ColdFusion et notez le compte de démarrage. Par défaut, il doit s'agir du compte Système. Cliquez ensuite dans le dossier contenant le fichier de base de données et attribuez clairement les droits d'accès complets du compte à ce dossier. Ajoutez le compte de démarrage ColdFusion, même si le dossier indique que « Tout le monde » dispose des droits d'accès complets. Résolution des problèmes d'autorisation Si votre base de données est installée sur un ordinateur équipé de Windows NT, Windows 2000 ou Windows XP et si vous recevez des messages d'erreur lorsque vous tentez d'afficher une page dynamique dans un navigateur Web ou en mode Live Data, l'erreur peut provenir d'un problème d'autorisation. Voici quelques messages d'erreur issus d'un problème d'autorisation : • Fournisseur de bases de données OLE Microsoft pour pilotes ODBC, erreur 80004005 [Microsoft][Pilote ODBC Microsoft Access 97] Couldn't use '(unknown)'; file already in use (Impossible d'utiliser « (inconnu) » ; fichier en cours d'utilisation). • Fournisseur de bases de données OLE Microsoft pour pilotes ODBC, (0x80004005) [Microsoft][Pilote ODBC Microsoft Access] The Microsoft Jet database engine cannot open the file '(unknown)' (Le moteur de base de données Microsoft Jet ne peut pas ouvrir le fichier « (inconnu) »). It is already opened exclusively by another user, or you need permission to view its data (Il est déjà ouvert par un autre utilisateur exclusif ou vous avez besoin d'une autorisation pour afficher les données). • Fournisseur de bases de données OLE Microsoft pour pilotes ODBC, erreur 80004005 [Microsoft][Pilote ODBC Microsoft Access 97] Couldn't lock file (Impossible de verrouiller le fichier). Le compte Windows qui tente d'accéder à la base de données ne dispose pas des droits suffisants. Le compte peut être le compte anonyme Windows (par défaut, IUSR_computername) ou un compte utilisateur spécifique si la page a été sécurisée pour un accès authentifié. Vous devez modifier les autorisations afin d'attribuer les droits d'accès appropriés au compte IUSR_computername pour que le serveur Web puisse accéder au fichier de base de données. En outre, le dossier contenant le fichier de base de données doit également disposer de certaines autorisations pour écrire dans cette base de données. Si la page doit être accédée de manière anonyme, attribuez le contrôle complet au compte IUSR_computername pour le dossier et le fichier de base de données, tel qu'indiqué dans la procédure ci-dessous. Résolution des problèmes de connexion à des bases de données 157 En outre, si le chemin d'accès à la base de données est référencé au moyen de la convention UNC (\\Serveur\Share), assurez-vous que les autorisations de partage attribuent les droits d'accès complets au compte IUSR_computername. Cette étape s'applique même si le partage est situé au niveau du serveur Web local. Si vous copiez la base de données depuis un autre emplacement, celle-ci peut ne pas hériter des autorisations attribuées au dossier de destination. Vous devrez peut-être modifier les autorisations pour la base de données. Pour vérifier ou modifier les autorisations de la base de données : 1 Dans l'Explorateur Windows, localisez le fichier de la base de données ou le dossier contenant la base de données, cliquez sur ce fichier ou ce dossier avec le bouton droit de la souris, puis sélectionnez Propriétés. 2 Sous Windows 2000, sélectionnez l'onglet Sécurité ; sous Windows NT, sélectionnez l'onglet Sécurité, puis cliquez sur le bouton Autorisations. Remarque : cette étape s'applique uniquement si vous utilisez un système de fichiers NTFS. Si vous disposez d'un système de fichiers FAT, la boîte de dialogue n'a pas d'onglet Sécurité. 3 Si le compte IUSR_computername n'est pas répertorié parmi les comptes Windows dans la boîte de dialogue Autorisations - Fichier, cliquez sur le bouton Ajouter pour l'ajouter. 4 Dans la boîte de dialogue Ajouter des utilisateurs et des groupes, choisissez le nom de l'ordinateur dans le menu déroulant Lister les noms à partir de. Remarque : sous Windows 2000, la boîte de dialogue s'appelle « Sélectionner les utilisateurs, les ordinateurs ou les groupes » et le menu contextuel « Regarder dans : ». Une liste des noms de comptes associés à l'ordinateur s'affiche. Si le compte IUSR n'apparaît pas dans la liste Noms, cliquez sur le bouton Montrer les utilisateurs. Remarque : Windows 2000 ne dispose pas d'un bouton Montrer les utilisateurs. 5 Sélectionnez le compte IUSR_computername, puis cliquez sur Ajouter. 6 Attribuez les droits d'accès complets au compte IUSR en choisissant Contrôle total dans le menu déroulant Type d'accès, puis cliquez sur OK. Pour une sécurité accrue, les autorisations peuvent être définies de façon à ce que le droit d'accès en lecture soit désactivé pour le dossier Web contenant la base de données. Il ne sera pas permis de parcourir ce dossier, mais les pages Web continueront à accéder à la base de données. Pour plus d'informations sur les autorisations du compte IUSR et du serveur Web, reportez-vous aux notes techniques du centre de support technique Macromedia : • Description de l'authentification anonyme et du compte IUSR à l'adresse http:// www.macromedia.com/go/authentication (en anglais) • Définition des autorisations d'un serveur Web IIS à l'adresse http://www.macromedia.com/go/ server_permissions (en anglais) 158 Chapitre 12 Apprenez à effectuer certaines tâches courantes dans Dreamweaver. Cette partie du manuel contient les chapitres suivants : • Chapitre 13, « Didacticiels de Dreamweaver MX » • Chapitre 14, « Didacticiel sur l'utilisation de tableaux pour mettre en forme une page » • Chapitre 15, « Didacticiel sur l'alignement des images et les cartes graphiques » • Chapitre 16, « Didacticiel sur l'utilisation des fichiers de conception Dreamweaver » • Chapitre 17, « Didacticiel sur la conception à l'aide de feuilles de style en cascade » • Chapitre 18, « Didacticiel sur la création d'un ensemble de pages Principale-Détails » • Chapitre 19, « Didacticiel sur la création d'une page d'insertion d'enregistrements » Partie II Partie II Didacticiels CHAPITRE 13 Didacticiels de Dreamweaver MX Les didacticiels de Dreamweaver MX sont des leçons pas à pas conçues pour vous enseigner les principes de Dreamweaver MX. Nous vous recommandons de suivre les didacticiels en utilisant les exemples de fichiers installés dans le dossier GettingStarted du dossier de l'application Dreamweaver. Ces didacticiels pratiques vous permettront d'apprendre comment utiliser l'environnement visuel de Dreamweaver pour ajouter des éléments de conception lors de la création de pages et applications Web. Ils sont destinés à des créateurs de sites Web de niveau débutant à intermédiaire, qui cherchent à maîtriser rapidement des processus qu'ils connaissent peut-être déjà pour le développement de pages et applications Web. Chaque didacticiel porte sur une fonction ou un point particulier de la conception Web. Il est recommandé de suivre les didacticiels dans l'ordre, mais vous pouvez aussi choisir de ne consulter que certaines sections qui vous intéressent tout particulièrement. D'autres didacticiels sont disponibles sur le site Web de Macromedia (http:// www.macromedia.com/go/dreamweaver_tutorials). Contenu des leçons Les didacticiels durent entre 30 et 45 minutes, en fonction de vos connaissances personnelles. Ils abordent les tâches et rubriques suivantes : « Didacticiel sur l'utilisation de tableaux pour mettre en forme une page », page 163, dure environ 45 minutes et traite des tâches suivantes : • • • • • « Création et modification d'un tableau en mode Standard », page 164 « Ajout de couleurs à un tableau », page 169 « Définition d'un tableau à largeur relative en mode Standard », page 171 « Conception d'une page en mode de Mise en forme », page 173 « Dessin d'une cellule de Mise en forme », page 173 « Didacticiel sur l'alignement des images et les cartes graphiques », page 181, dure environ 20-30 minutes et traite des tâches suivantes : • • • • • « Définition de l'alignement d'une image », page 182 « Définition de l'espacement d'une image », page 184 « Définition des options d'espacement et d'alignement », page 184 « Création d'une carte graphique », page 185 « Définition des zones d'une carte graphique », page 186 161 • « Ouverture d'un fichier lié dans une nouvelle fenêtre », page 187 « Didacticiel sur l'utilisation des fichiers de conception Dreamweaver », page 189, dure environ 20-30 minutes et traite des tâches suivantes : • • • • « Manipulation des fragments de code », page 190 « Insertion d'un fragment de code », page 190 « Modification du contenu d'un fragment de code », page 194 « Enregistrement d'un code en tant que fragment de code », page 195 « Didacticiel sur la conception à l'aide de feuilles de style en cascade », page 197, dure environ 30 minutes et traite des tâches suivantes : • • • • « Ouverture du panneau Styles CSS », page 198 « Ouverture d'un document de travail », page 198 « Définition d'un style pour les liens », page 203 « Exportation de styles pour la création d'une feuille de style externe », page 204 « Didacticiel sur la création d'un ensemble de pages Principale-Détails », page 207, dure environ 30 minutes et traite des tâches suivantes : • • • • « Création d'un ensemble de pages Principale-Détails », page 208 « Création d'un jeu d'enregistrements de base de données », page 209 « Insertion d'un objet d'application Ensemble de pages Principale-Détails », page 212 « Affichage des pages », page 215 « Didacticiel sur la création d'une page d'insertion d'enregistrements », page 217, dure environ 40 minutes et traite des tâches suivantes : • • • • « Création d'une page d'insertion », page 218 « Ajout d'objets de formulaire », page 219 « Définition d'un comportement de serveur Insérer un enregistrement », page 223 « Test de la page », page 225 162 Chapitre 13 CHAPITRE 14 Didacticiel sur l'utilisation de tableaux pour mettre en forme une page Si vous connaissez le codage HTML, vous savez déjà que le texte ou tout autre élément de contenu ajouté à une page Web s'étend d'une marge à l'autre, sauf si vous l'insérez dans un « contenant » tel qu'un calque ou un tableau. Les tableaux HTML constituent une excellente solution pour mettre en forme des pages Web, car ils sont faciles à modifier et compatibles avec la majorité des navigateurs. Vous pouvez les utiliser pour définir la mise en forme de données tabulaires ou l'affichage d'éléments visuels (tels que des images, des paragraphes de texte ou des boutons Flash). Dreamweaver vous permet de concevoir des tableaux dans deux modes d'affichage différents : le mode Standard et le mode de Mise en forme. Ce didacticiel va vous apprendre à mettre en forme des pages dans les deux modes. La première partie va vous montrer comment travailler en mode Standard pour créer un tableau dans une page. La deuxième partie vous apprendra à utiliser le mode de Mise en forme et les options correspondantes pour dessiner un tableau et ses cellules afin d'obtenir la mise en forme voulue. Ce didacticiel porte sur l'utilisation des tableaux comme éléments de mise en forme d'une page. En suivant les étapes décrites, vous apprendrez à effectuer les opérations suivantes : • • • • • • • • • « Création et modification d'un tableau en mode Standard », page 164 « Ajout de couleurs à un tableau », page 169 « Définition d'un tableau à largeur relative en mode Standard », page 171 « Conception d'une page en mode de Mise en forme », page 173 « Dessin d'une cellule de Mise en forme », page 173 « Ajout de plusieurs cellules de Mise en forme », page 175 « Déplacement ou redimensionnement d'une cellule de Mise en forme », page 176 « Définition d'un tableau à largeur relative en mode de Mise en forme », page 178 « Conception d'une page en mode de Mise en forme », page 173 163 Avant de commencer Si cela n'est pas déjà fait, créez un dossier dans lequel transférer les fichiers d'exemple GettingStarted. 1 A la racine de votre disque local, créez un dossier appelé Sites (C:\Sites (Windows) ou Disque dur:Sites (Macintosh), par exemple). Si vous travaillez sous Windows XP ou Macintosh OS X, créez le dossier Sites dans votre dossier utilisateur. 2 Recherchez le dossier Tutorials dans le dossier de l'application Dreamweaver sur votre disque dur. Le chemin du dossier est : \Macromedia\Dreamweaver MX\Samples\GettingStarted\Tutorials 3 Copiez le dossier Tutorials dans le dossier Sites. 4 Dans Dreamweaver, définissez en tant que site local le dossier Tutorials que vous venez de copier. Si vous ne savez pas comment définir un site local dans Dreamweaver, suivez les indications fournies dans le Chapitre 2, « Création de votre premier site Web dans Dreamweaver », page 19. Vous pouvez également utiliser l'Assistant de définition d'un site de Dreamweaver qui vous guidera tout au long de la procédure de configuration du site. Dans Dreamweaver, choisissez Site > Nouveau site, puis cliquez sur l'onglet Elémentaire afin de commencer à configurer le site. Création et modification d'un tableau en mode Standard Le mode Standard est le mode de création typique dans Dreamweaver. Pour créer un tableau en mode Standard, vous devez utiliser la commande Insérer un tableau. Dreamweaver crée un tableau en fonction des options que vous sélectionnez dans la boîte de dialogue Insérer un tableau. Vous pouvez aisément modifier la structure initiale du tableau pour créer un objet plus complexe en fusionnant et en fractionnant des cellules ou en insérant des lignes et des colonnes. Les cellules d'un tableau (c'est-à-dire les cases créées par l'intersection de chaque colonne et ligne dans le tableau) vous permettent de contrôler l'emplacement du texte et des images dans une page Web. Comme vous rendez les bordures des tableaux invisibles, les utilisateurs ne peuvent pas voir la structure sous-jacente de la page lorsqu'ils l'affichent dans leur navigateur. 1 Dans Dreamweaver, choisissez Fichier > Nouveau. La boîte de dialogue Nouveau document s'affiche. 2 Dans la liste Page de base, sélectionnez HTML, puis cliquez sur Créer pour obtenir un nouveau document HTML. 3 Dans le champ de texte Titre de la barre d'outils du document, tapez Table Design pour attribuer un titre au document. 4 Choisissez Fichier > Enregistrer, puis enregistrez le document dans le dossier de votre site local. Appelez-le tableModify.htm. 164 Chapitre 14 Insertion d'un tableau Vous êtes prêt maintenant à insérer un tableau dans le document. 1 Dans la fenêtre de document, placez le point d'insertion à l'endroit voulu, puis procédez de l'une des manières suivantes : • Choisissez Insertion > Tableau. • Dans la catégorie Commun de la barre Insertion, cliquez sur l'icône Tableau. La boîte de dialogue Insérer un tableau s'affiche. 2 Dans la boîte de dialogue, définissez les options suivantes : • Dans la zone de texte Lignes, tapez 2. • Dans la zone de texte Colonnes, tapez 2. • Dans la zone de texte Largeur, tapez 600, puis sélectionnez Pixels dans le menu déroulant sur la droite. L'utilisation d'une largeur de 600 pixels crée un tableau à largeur fixe. La question de la largeur des tableaux est abordée plus en détail plus loin dans ce didacticiel. • Dans la zone de texte Bordure, tapez 1 pour définir une bordure de 1 pixel autour du tableau et de ses cellules. Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 165 3 Cliquez sur OK. Dreamweaver insère le tableau dans le document. 4 Enregistrez le document en procédant de l'une des manières suivantes : • Choisissez Fichier > Enregistrer. • Appuyez sur Ctrl+S (Windows) ou sur Commande+S (Macintosh). Modification du tableau Vous allez maintenant modifier la mise en forme du tableau. Vous allez y ajouter des lignes et des colonnes et apprendre à fusionner et à fractionner des cellules afin d'obtenir la mise en forme de page souhaitée. 1 Cliquez dans la cellule supérieure gauche, puis faites glisser le pointeur jusqu'à la dernière ligne du bas pour sélectionner la colonne gauche. 2 Choisissez Modifier > Tableau > Insérer une colonne. Le tableau contient à présent trois colonnes. 166 Chapitre 14 3 Cliquez dans la cellule inférieure gauche, puis choisissez Modifier > Tableau > Insérer des lignes ou des colonnes. La boîte de dialogue Insérer des lignes ou des colonnes s'affiche. Conseil : cliquez sur l'option d'insertion Lignes ou Colonnes pour ajouter un nombre défini de lignes ou de colonnes ou pour sélectionner l'endroit où insérer une ligne ou une colonne dans un tableau. 4 Dans la boîte de dialogue, définissez les options suivantes : Dans Insérer, cliquez sur Lignes. Dans Nombre de lignes, tapez 2. Dans Où, cliquez sur Au-dessus de la sélection. 5 Cliquez sur OK. Le tableau est mis à jour. Vous disposez à présent d'un tableau composé de quatre lignes sur trois colonnes. 6 Enregistrez les modifications (Fichier > Enregistrer). Fusion et fractionnement de cellules La fusion et le fractionnement de cellules vous permet de personnaliser un tableau afin qu'il réponde à vos besoins de mise en forme. Vous allez maintenant apprendre à utiliser des options de menu ou l'inspecteur de propriétés pour fusionner ou fractionner les cellules d'un tableau. Fractionnement de cellules Fusion de cellules Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 167 1 Dans le document, sélectionnez les deux premières cellules de la colonne gauche du tableau en faisant glisser le pointeur depuis la cellule supérieure gauche jusqu'à la cellule située juste en dessous. 2 Choisissez Modifier > Tableau > Fusionner les cellules. Les deux cellules sont fusionnées. 3 Cliquez dans la troisième ligne de la deuxième colonne, puis faites glisser le pointeur vers le bas à droite afin de sélectionner les deux dernières lignes de cellules dans les deuxième et troisième colonnes. 4 Dans l'inspecteur de propriétés, cliquez sur le bouton Fusionner pour unir les cellules. Les cellules sélectionnées sont fusionnées. Vous pouvez fractionner une cellule ou une colonne donnée. 5 Cliquez dans la cellule supérieure gauche. 6 Dans l'inspecteur de propriétés, cliquez sur le bouton Fractionner la cellule. La boîte de dialogue Fractionner la cellule s'affiche. 7 Dans la boîte de dialogue, définissez les options suivantes : • Dans Fractionner la cellule en, cliquez sur Colonnes. • Dans Nombre de lignes, tapez 2. 8 Cliquez sur OK. Le tableau est modifié. 168 Chapitre 14 Modification de la hauteur des lignes et de la largeur des colonnes Vous allez maintenant redimensionner le tableau. Vous allez augmenter l'espace entre les lignes du tableau et ajuster l'espace entre les colonnes. 1 Faites bouger le pointeur sur la bordure inférieure du tableau jusqu'à ce qu'il prenne la forme d'un sélecteur de bordure, puis faites-le glisser vers le bas pour redimensionner le tableau. Vous pouvez, si vous le souhaitez, utiliser cette même méthode pour redimensionner la hauteur des autres lignes du tableau. 2 Faites bouger le pointeur sur la bordure d'une colonne jusqu'à ce qu'il prenne la forme d'un sélecteur de bordure, puis faites-le glisser vers la gauche ou la droite pour changer la largeur de la colonne. 3 Une fois le tableau redimensionné, enregistrez le document. Ajout de couleurs à un tableau Vous pouvez ajouter de la couleur à n'importe quelle partie d'un tableau. Vous allez, dans le cadre de ce didacticiel, commencer par ajouter une couleur d'arrière-plan au tableau entier, puis modifier cette couleur pour certaines cellules. Vous finirez cette étape en changeant la couleur de la bordure. 1 Dans le document, cliquez dans une cellule quelconque du tableau puis, dans le sélecteur de balises situé dans la partie inférieure gauche de la fenêtre de document, cliquez sur la balise <table> pour sélectionner tout le tableau. 2 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), si nécessaire. Les propriétés du tableau sélectionné apparaissent dans l'inspecteur de propriétés. 3 Dans la zone de texte Couleur ar-pl de l'inspecteur de propriétés, sélectionnez une couleur en procédant de l'une des manières suivantes : • Cliquez sur le sélecteur de couleur, puis choisissez une couleur. • Saisissez la valeur hexadécimale d'une couleur, telle que #CC9933. Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 169 • Saisissez le nom d'une couleur sécurisée pour le Web, telle que goldenrod. Une couleur d'arrière-plan est appliquée au tableau. 4 Vous pouvez appliquer une couleur d'arrière-plan à chaque cellule du tableau en procédant de la même manière. Cliquez dans la cellule supérieure gauche puis, dans la zone de texte Couleur ar-pl de l'inspecteur de propriétés, sélectionnez une couleur différente. 5 Procédez ainsi pour modifier la couleur des cellules de votre choix. Ajout d'une couleur de bordure Vous allez maintenant définir la couleur de la bordure du tableau. Cette couleur s'applique tant à la bordure extérieure qu'à la bordure intérieure du tableau. 1 Dans la fenêtre de document, sélectionnez le tableau. 2 Dans la zone de texte Couleur ar-pl de l'inspecteur de propriétés, utilisez le sélecteur de couleur pour choisir la couleur de la bordure du tableau. 3 Une fois les modifications effectuées, enregistrez votre document. 4 Appuyez sur la touche F12 (Windows uniquement) ou choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans lequel afficher le document. 170 Chapitre 14 Définition d'un tableau à largeur relative en mode Standard Un tableau dont la largeur est définie en pourcentage s'agrandit et se rétrécit en fonction de la largeur de la fenêtre du navigateur. Ainsi, si vous définissez une largeur de 75 % pour un tableau, celui-ci s'étend de façon à occuper 75 % de l'espace horizontal de la fenêtre du navigateur, indépendamment de la taille de cette fenêtre. Cela est utile dans certaines situations, notamment pour s'assurer qu'un menu de navigation reste affiché même après redimensionnement de la fenêtre. Si vous souhaitez définir la taille d'un tableau sans tenir compte de la façon dont un utilisateur peut redimensionner la fenêtre de son navigateur, utilisez un tableau à largeur exprimée en pixels. Si vous souhaitez que le tableau s'étende conformément à la taille de la fenêtre du navigateur de l'utilisateur, utilisez plutôt des tableaux à largeur exprimée en pourcentage. Pour voir la différence entre ces deux types de tableau, vous allez en créer un de chaque type dans une page, puis l'afficher dans un navigateur. 1 Dans Dreamweaver, choisissez Fichier > Nouveau. 2 La catégorie Page de base est sélectionnée par défaut dans la boîte de dialogue Nouveau document. Dans la liste des pages de base, double-cliquez sur HTML pour créer un document HTML. Le document s'ouvre dans la fenêtre de document. 3 Enregistrez ce fichier dans le dossier de votre site local. Appelez-le tableWidth. 4 Placez le point d'insertion dans le document. 5 Dans l'onglet Commun de la barre Insertion, cliquez sur le bouton Tableau. 6 Dans la boîte de dialogue qui s'affiche, définissez les options suivantes : Dans la zone de texte Lignes, tapez 2. Dans la zone de texte Colonnes, tapez 3. Dans la zone de texte Largeur, tapez 90, puis sélectionnez Pourcentage dans le menu déroulant sur la droite. Dans la zone de texte Bordure, tapez 1 pour définir une bordure de 1 pixel autour du tableau et de ses cellules. 7 Cliquez sur OK. Le tableau apparaît dans le document. 8 Cliquez dans la cellule supérieure du milieu, puis faites glisser le pointeur jusqu'à la dernière ligne du bas pour sélectionner la colonne du milieu. 9 Dans l'inspecteur de propriétés, utilisez le sélecteur de couleur pour appliquer une couleur d'arrière-plan à la colonne. Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 171 Création d'un tableau à largeur exprimée en pixels Vous allez maintenant ajouter un autre tableau au document. Un tableau à largeur exprimée en pixels est défini de façon à utiliser une largeur précise et à ne pas s'adapter à la taille de la fenêtre du navigateur. 1 Insérez un retour chariot après le tableau que vous venez de créer. 2 Dans l'onglet Commun de la barre Insertion, cliquez sur le bouton Tableau. 3 Dans la boîte de dialogue qui s'affiche, définissez les options suivantes : Dans la zone de texte Lignes, tapez 2. Dans la zone de texte Colonnes, tapez 3. Dans la zone de texte Largeur, tapez 600, puis sélectionnez Pixels dans le menu déroulant sur la droite. Dans la zone de texte Bordure, tapez 1 pour définir une bordure de 1 pixel autour du tableau et de ses cellules. 4 Cliquez sur OK. Le tableau apparaît dans le document. 5 Sélectionnez la colonne du milieu en cliquant sur la cellule supérieure du milieu, puis en faisant glisser le pointeur jusqu'à la dernière cellule du bas. 6 Dans l'inspecteur de propriétés, utilisez le sélecteur de couleur pour appliquer une couleur d'arrière-plan à la colonne. 7 Appuyez sur la touche F12 (Windows uniquement) ou choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans lequel afficher le document. Redimensionnez la fenêtre du navigateur pour voir comment les deux tableaux se présentent lorsque la taille de la fenêtre change. Le tableau à largeur exprimée en pixels conserve sa taille, tandis que celui dont la largeur est exprimée en pourcentage s'adapte à la taille du navigateur. 8 Lorsque vous avez fini de visualiser le document, fermez la fenêtre du navigateur. 9 Enregistrez votre document. 172 Chapitre 14 Conception d'une page en mode de Mise en forme Maintenant que vous savez utiliser la commande Insérer un tableau, vous allez apprendre à créer des tableaux d'une autre façon — en dessinant leur mise en forme. Pour ce faire, vous allez travailler en mode de Mise en forme, qui vous permet de dessiner des cellules ou des tableaux de Mise en forme dans lesquels vous pouvez insérer un contenu, tel que des images, du texte ou tout autre élément. En mode Mise en forme, la définition des zones de conception d'un document passe par le dessin de cellules et de tableaux de Mise en forme. Vous pouvez commencer par insérer une cellule de tableau ou de Mise en forme. Lorsque vous commencez par insérer une cellule de Mise en forme, Dreamweaver crée automatiquement un tableau autour de cette cellule. Création et enregistrement d'un document 1 Dans Dreamweaver, choisissez Fichier > Nouveau. 2 La catégorie Page de base est sélectionnée par défaut dans la boîte de dialogue Nouveau document. Dans la liste des pages de base, sélectionnez HTML, puis cliquez sur Créer pour obtenir un nouveau document HTML. Le document s'ouvre dans la fenêtre de document. 3 Enregistrez le document dans le dossier de votre site local en lui attribuant le nom tableLayout.htm. Dessin d'une cellule de Mise en forme 1 Dans la barre Insertion, cliquez sur l'onglet M. en forme, puis sur le bouton Mode de Mise en forme pour activer ce mode. La boîte de dialogue Démarrage en mode de Mise en Forme s'affiche et présente les options du mode Mise en forme. 2 Vérifiez les options, puis cliquez sur OK pour fermer la boîte de dialogue. 3 Deux options de mise en forme sont disponibles dans la barre Insertion : Dessiner la cellule de Mise en forme et Dessiner le tableau de Mise en forme. Ces options ne sont pas accessibles en mode Standard. 4 Si l'inspecteur de propriétés n'est pas ouvert, choisissez Fenêtre > Propriétés pour l'afficher. 5 Dans la barre Insertion, cliquez sur le bouton Dessiner la cellule de Mise en forme. Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 173 6 Placez le pointeur de la souris sur la fenêtre de document ; il se transforme en outil de dessin (il prend la forme d'une petite croix). Cliquez dans le coin supérieur gauche du document, puis faites glisser le pointeur pour dessiner une cellule de Mise en forme. Lorsque vous relâchez le bouton de la souris, une cellule s'affiche dans le tableau de Mise en forme. Tableau de Mise en forme Cellule de Mise en forme Le tableau se développe de façon à remplir la fenêtre de document ; il définit la zone de mise en forme de la page. Le rectangle blanc correspond à la cellule de Mise en forme que vous avez dessinée. Vous pouvez placer d'autres cellules de Mise en forme dans la zone vide du tableau. 7 Dessinez une autre cellule pour créer une zone de texte au-dessus des boutons de navigation. 174 Chapitre 14 Ajout de plusieurs cellules de Mise en forme Vous allez apprendre maintenant à ajouter une série de cellules de Mise en forme. Vous allez ajouter trois cellules de Mise en forme en regard de celle que vous venez d'insérer afin de créer une mise en forme pour les boutons de navigation de la page. 1 Dans la barre Insertion, cliquez sur le bouton Dessiner la cellule de Mise en forme, puis maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée afin de dessiner plusieurs cellules dans le tableau. 2 Dans la fenêtre de document, placez le pointeur en dessous de la dernière cellule que vous avez dessinée, puis faites-le glisser pour dessiner une cellule de Mise en forme. Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée et dessinez deux autres cellules de Mise en forme. Votre écran doit maintenant ressembler à ceci : 3 Cliquez sur une zone vide de la barre Insertion pour désélectionner l'outil Dessiner la cellule de Mise en forme (l'outil prend la forme d'une flèche de sélection). Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 175 Déplacement ou redimensionnement d'une cellule de Mise en forme Vous pouvez redimensionner et déplacer les cellules de Mise en forme afin de les aligner les unes par rapport aux autres en fonction de vos besoins. Pour modifier la taille d'une cellule, utilisez les poignées de redimensionnement. Dans la mesure où la taille du tableau de Mise en forme le permet, vous pouvez déplacer une cellule de Mise en forme à un nouvel endroit dans le document. Il vous faudra parfois redimensionner les cellules voisines pour pouvoir obtenir le résultat voulu. Si vous souhaitez déplacer et repositionner une cellule de Mise en forme dans un document, suivez les étapes ci-dessous : 1 Sélectionnez une cellule de Mise en forme en cliquant sur sa bordure. Des poignées apparaissent autour de la cellule sélectionnée. 2 Procédez de l'une des manières suivantes : • Faites glisser la cellule de Mise en forme afin de la placer à une nouvelle position. • S'il y a suffisamment d'espace autour de la cellule de Mise en forme, utilisez la flèche appropriée (gauche, droite ou haut) pour la déplacer. 176 Chapitre 14 Redimensionnement d'une cellule de Mise en forme Pour concevoir une page avec précision, vous pouvez déterminer la taille des cellules ajoutées à un document et repositionner les cellules dans la page. 1 Sélectionnez la cellule de Mise en forme en cliquant sur sa bordure. 2 Pour redimensionner une cellule de Mise en forme : Dans l'inspecteur de propriétés de la cellule de Mise en forme, tapez le nombre voulu pour la largeur ou la hauteur de la cellule. Par exemple, tapez 200 dans la zone de texte Hauteur afin de définir la hauteur de la cellule sur 200 pixels, puis cliquez dans le document pour voir comment la largeur de la cellule change. Remarque : si la largeur ou la hauteur en pixels spécifiée est supérieure à la largeur ou à la hauteur du tableau de Mise en forme ou provoque le chevauchement de deux cellules dans le tableau, Dreamweaver vous informe du problème et corrige les dimensions de la cellule. Ajout de couleurs à un tableau Vous pouvez ajouter de la couleur à n'importe quelle partie d'un tableau. Vous allez, dans le cadre de ce didacticiel, commencer par ajouter une couleur d'arrière-plan au tableau entier, puis modifier cette couleur pour certaines cellules. Vous finirez cette étape en changeant la couleur de la bordure. 1 Dans le document, cliquez dans une cellule quelconque du tableau puis, dans le sélecteur de balises situé dans la partie inférieure gauche de la fenêtre de document, cliquez sur la balise <table> pour sélectionner tout le tableau. 2 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), le cas échéant. Les propriétés du tableau sélectionné apparaissent dans l'inspecteur de propriétés. Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 177 3 Dans la zone de texte Couleur ar-pl de l'inspecteur de propriétés, sélectionnez une couleur en procédant de l'une des manières suivantes : • Cliquez sur le sélecteur de couleur, puis choisissez une couleur. • Saisissez la valeur hexadécimale d'une couleur, telle que #CC9933. • Saisissez le nom d'une couleur sécurisée pour le Web, telle que goldenrod. Une couleur d'arrière-plan est appliquée au tableau. 4 Cliquez sur la bordure d'une cellule pour la sélectionner, puis choisissez la couleur à lui appliquer dans l'inspecteur de propriétés. 5 Si vous le souhaitez, ajoutez une couleur d'arrière-plan aux autres cellules du tableau. 6 Enregistrez votre document. Définition d'un tableau à largeur relative en mode de Mise en forme Lorsque vous dessinez un tableau ou une cellule en mode de Mise en forme, Dreamweaver crée par défaut le tableau avec des colonnes à largeur fixe. L'option Extension automatique vous permet toutefois de remplacer la largeur fixe d'un tableau ou d'une cellule par une largeur relative. L'option Extension automatique applique une mise en forme souple à la colonne définie comme étant extensible, ce qui permet au tableau de s'étendre automatiquement pour occuper toute la fenêtre d'un navigateur. Les informations relatives à la largeur des colonnes apparaissent dans la zone d'en-tête en haut de chaque colonne. Les informations relatives à la largeur du tableau apparaissent dans l'en-tête de colonne du tableau. Une colonne à largeur fixe est dotée d'une largeur numérique spécifique, telle que 200 pixels, alors que l'en-tête d'une colonne à extension automatique affiche une ligne ondulée. L'option Extension automatique ne peut être activée que pour une seule colonne à la fois, mais il est très facile de l'appliquer à une nouvelle colonne. 178 Chapitre 14 Vous allez à présent activer l'option Extension automatique pour l'une des colonnes du tableau afin que celui-ci occupe automatiquement toute la fenêtre du navigateur lorsque vous l'affichez. 1 Dans le document, cliquez sur l'en-tête de la colonne du tableau à laquelle appliquer l'extension automatique. 2 Dans le menu contextuel qui s'affiche, choisissez Extension automatique de la colonne. La boîte de dialogue Choisissez l'image d'espacement s'ouvre. 3 Choisissez Créer un fichier image d'espacement. 4 La boîte de dialogue Enregistrer le fichier image d'espacement sous s'affiche. Acceptez les valeurs par défaut pour enregistrer l'image dans le fichier spacer.gif, à un emplacement relatif à la racine du site. Conseil : si vous disposez déjà d'une image d'espacement, vous pouvez la sélectionner afin de ne pas créer des images d'espacement différentes pour chaque nouveau tableau. La valeur numérique de l'en-tête de la colonne est remplacée par une ligne ondulée. L'inspecteur de propriétés est également mis à jour et indique que l'option Extension automatique est appliquée au tableau. 5 Enregistrez votre fichier. 6 Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez le navigateur dans lequel vous souhaitez afficher la page. La colonne s'étend et se rétrécit automatiquement selon la taille de la fenêtre du navigateur. Didacticiel sur l'utilisation de tableaux pour mettre en forme une page 179 Etape suivante Ce didacticiel vous a appris à créer des tableaux dans Dreamweaver. Il vous a également montré comment modifier les lignes et les colonnes d'un tableau, définir la couleur d'arrière-plan de ses cellules et créer une mise en forme de tableau « souple » en mode Standard et en mode de Mise en forme. Pour plus d'informations sur les rubriques abordées dans ce didacticiel, voir les rubriques suivantes dans la documentation Utilisation de Dreamweaver MX ou l'aide de Dreamweaver : • Conception de la mise en page • Présentation de contenu à l'aide de tableaux 180 Chapitre 14 CHAPITRE 15 Didacticiel sur l'alignement des images et les cartes graphiques Il est extrêmement facile d'utiliser des images dans Macromedia Dreamweaver MX. Il existe, par exemple, de nombreux outils visuels qui vous permettent d'insérer une image dans une page. Ce didacticiel présente les options que vous pouvez utiliser après avoir ajouté une image à une page. Vous allez apprendre à aligner des images et du texte ainsi qu'à définir l'espace entourant une image. Vous découvrirez également comment relier une même image à plusieurs pages Web. Ce didacticiel s'adresse aux nouveaux utilisateurs de Dreamweaver. Il décrit certaines des fonctions élémentaires de Dreamweaver et vous aidera à aligner des images et à créer des cartes graphiques. Vous effectuerez les opérations suivantes au cours de ce didacticiel : • • • • • • « Définition de l'alignement d'une image », page 182 « Définition de l'espacement d'une image », page 184 « Définition des options d'espacement et d'alignement », page 184 « Création d'une carte graphique », page 185 « Définition des zones d'une carte graphique », page 186 « Ouverture d'un fichier lié dans une nouvelle fenêtre », page 187 Avant de commencer Si cela n'est pas déjà fait, créez un dossier dans lequel transférer les fichiers d'exemple GettingStarted. 1 A la racine de votre disque local, créez un dossier appelé Sites (C:\Sites (Windows) ou Disque dur:Sites (Macintosh), par exemple). Si vous travaillez sous Windows XP ou Macintosh OS X, créez le dossier Sites dans votre dossier utilisateur. 2 Recherchez le dossier Tutorials dans le dossier de l'application Dreamweaver sur votre disque dur. Le chemin du dossier est : \Macromedia\Dreamweaver MX\Samples\GettingStarted\Tutorials 3 Copiez le dossier Tutorials dans le dossier Sites. 181 4 Dans Dreamweaver, définissez en tant que site local le dossier Tutorials que vous venez de copier. Si vous ne savez pas comment définir un site local dans Dreamweaver, suivez les indications fournies dans le « Création de votre premier site Web dans Dreamweaver », page 19. Vous pouvez également utiliser l'Assistant de définition d'un site de Dreamweaver qui vous guidera tout au long de la procédure de configuration du site. Dans Dreamweaver, choisissez Site > Nouveau site, puis cliquez sur l'onglet Elémentaire afin de commencer à configurer le site. Définition de l'alignement d'une image Une image, comme un texte, apparaît dans le code HTML normal d'une page et peut se présenter sous la forme d'un paragraphe à part entière ou en tant que composant d'un paragraphe de texte. L'inspecteur de propriétés vous permet d'aligner une image de deux façons différentes, selon que vous choisissez la commande d'alignement du texte ou celle d'alignement de l'image. Alignement du texte Alignement de l'image L'alignement du texte définit la position du paragraphe dans lequel l'image est insérée et permet de centrer l'image ou de l'aligner sur la marge gauche ou droite. L'alignement de l'image vous permet de définir la relation de l'image avec d'autres éléments de contenu dans le même paragraphe (y compris une autre image). Le menu déroulant Aligner de Dreamweaver vous permet de spécifier la façon dont l'image doit être alignée par rapport au texte. Remarque : certaines options d'alignement des images ne fonctionnent pas dans certains navigateurs. Ce didacticiel décrit des options d'alignement qui fonctionnent dans Microsoft Internet Explorer et Netscape Navigator. Affichage du document terminé Avant de commencer, examinez le fichier terminé pour voir ce que vous allez effectuer au cours de ce didacticiel. 1 Choisissez Fichier > Ouvrir. Dans la boîte de dialogue qui s'affiche, recherchez le dossier GettingStarted que vous avez créé, puis allez dans le sous-dossier Tutorials/Completed et ouvrez le fichier imageAlign_comp.htm. Le fichier s'ouvre dans la fenêtre de document. 2 Appuyez sur la touche F12 (Windows uniquement) ou choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans lequel afficher le document. Le fichier contient trois exemples d'alignement et d'espacement des images permettant d'utiliser conjointement des images et du texte. 3 Lorsque vous avez fini de consulter le fichier, fermez la fenêtre du navigateur. 182 Chapitre 15 Ouverture d'un fichier de travail Vous allez travailler dans une version incomplète du document, composée d'un tableau contenant trois images et du texte. Le tableau renferme tous les éléments de mise en forme du document, ce qui vous permet d'observer aisément l'effet des différents paramètres sur l'alignement. 1 Choisissez Fichier > Ouvrir, puis recherchez le fichier imageAlign.htm qui se trouve dans le dossier Tutorials. Ce document contient les mêmes images et texte que ceux du fichier terminé que vous venez de consulter. Dans la fenêtre de document, cliquez sur la première image (celle en regard de la cellule qui contient le texte « Alignment »). L'image se trouve dans le même paragraphe que le texte. 2 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), si nécessaire. Vous remarquerez que la zone de texte Aligner indique que l'image utilise l'alignement par défaut. Cet alignement place l'image sur la ligne de base du texte. 3 Tout en gardant l'image sélectionnée, dans le menu déroulant Aligner, choisissez Milieu pour constater l'effet de ce paramètre. La première ligne de texte s'aligne sur le centre de l'image. 4 Tout en gardant l'image sélectionnée, dans le menu déroulant Aligner, choisissez Gauche. L'image figure à présent sur la gauche, avec répartition automatique du texte sur son côté droit. Conseil : tout texte se trouvant dans le même paragraphe qu'une image habille l'image puis s'enchaîne sous l'image. Si vous insérez un retour chariot dans le paragraphe de texte qui s'enchaîne, celui-ci cesse d'être aligné sur l'image et apparaît dans un nouveau paragraphe sous l'image. Si vous souhaitez augmenter l'espace entre le texte et l'image sans modifier la répartition automatique du texte, insérez un saut de paragraphe en appuyant sur Ctrl+Entrée (Windows) ou sur Commande+Retour (Macintosh). 5 Choisissez Fichier > Enregistrer pour enregistrer les modifications. Didacticiel sur l'alignement des images et les cartes graphiques 183 6 Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans lequel afficher le document ou appuyez sur la touche F12 (Windows uniquement). L'image et le texte sont alignés. 7 Lorsque vous avez fini de visualiser le fichier, fermez la fenêtre du navigateur. Définition de l'espacement d'une image Comme vous avez pu le constater, lorsque vous insérez une image dans un paragraphe, le texte apparaît sur le bord même de l'image. Vous allez maintenant ajouter un espace entre l'image et le texte. Vous pouvez utiliser les propriétés d'espacement horizontal et vertical de l'inspecteur de propriétés pour créer un espace autour d'une image. La propriété d'espacement horizontal augmente l'espace à gauche et à droite de l'image, tandis que celle d'espacement vertical augmente l'espace au-dessus et en dessous de l'image. 1 Dans le document image_align.htm, cliquez sur la deuxième image de la page (celle en regard de la cellule qui contient le texte « Spacing »). 2 Dans la zone de texte Espace V de l'inspecteur de propriétés, tapez 10 pour définir l'espacement vertical. 3 Placez le pointeur dans la zone de texte Espace H, tapez 30, puis appuyez sur la touche Entrée ou Retour pour activer l'espacement horizontal. Un espace de la taille spécifiée est inséré entre le texte et l'image. L'espace ajouté a également une incidence sur la distance entre l'image et la bordure du tableau. Définition des options d'espacement et d'alignement Au cours de la dernière étape de cette partie du didacticiel, vous allez définir les propriétés d'alignement et d'espacement de l'image. 1 Dans le document imageAlign.htm, cliquez sur la troisième image de la page (celle en regard de la cellule qui contient le texte « Alignment and Spacing »). 2 Dans le menu déroulant Aligner de l'inspecteur de propriétés, choisissez Droite. L'image se déplace vers la droite. 3 Dans la zone de texte Espace H, tapez 30, puis cliquez à un autre endroit dans l'inspecteur de propriétés ou dans la fenêtre de document pour que la valeur soit reportée dans le document. Un espace de la taille spécifiée est ajouté entre l'image et le texte. 184 Chapitre 15 Création d'une carte graphique Une carte graphique est une image qui sert de moyen de navigation. Ce type de carte vous permet de créer plusieurs zones réactives (des zones « cliquables ») dans une même image et de faire en sorte que chacune de ces zones mène à une URL ou à un fichier différent. Vous pouvez définir l'endroit où le document lié à une zone réactive doit s'ouvrir (dans un cadre précis d'un document de jeu de cadres ou dans une nouvelle fenêtre de navigateur, par exemple). Affichage du fichier terminé Examinez le fichier terminé pour voir ce que vous allez créer. La carte graphique terminée inclut des liens vers d'autres documents. Pour voir comment les liens fonctionnent, vous allez ouvrir le document dans une fenêtre de navigateur. 1 Choisissez Fichier > Ouvrir. Dans la boîte de dialogue qui s'affiche, recherchez le dossier GettingStarted que vous avez créé, puis allez dans le sous-dossier Tutorials/Completed pour ouvrir le fichier imagemap_comp.htm. Le document s'ouvre dans la fenêtre de document. 2 Appuyez sur la touche F12 (Windows uniquement) ou choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans lequel afficher le document. 3 Faites passer le pointeur de la souris sur les zones de couleur violet clair. Le pointeur prend la forme d'une main pour vous informer que les zones mènent à un autre document. 4 Cliquez sur l'Amérique du Nord. Une nouvelle page s'ouvre. 5 Cliquez sur le bouton Précédente du navigateur pour revenir à la page de la carte mondiale. 6 Cliquez sur l'autre zone réactive. Le document lié s'ouvre dans une nouvelle fenêtre de navigateur. 7 Lorsque vous avez fini de visualiser les pages, fermez le navigateur. Didacticiel sur l'alignement des images et les cartes graphiques 185 Définition des zones d'une carte graphique Vous allez créer une carte graphique contenant une seule image qui mène à plusieurs pages. 1 Dans Dreamweaver, choisissez Fichier > Ouvrir, puis recherchez le fichier imagemap_start.htm et ouvrez-le. 2 Dans le document, sélectionnez l'image de la carte mondiale en cliquant dessus. 3 Ouvrez l'inspecteur de propriétés s'il est fermé, puis cliquez sur la flèche d'agrandissement située dans la partie inférieure droite de l'inspecteur pour voir toutes les propriétés de l'image, le cas échéant. Options de carte graphique Les options de la carte graphique apparaissent dans l'inspecteur de propriétés développé. 4 Dans la zone de texte Nom de la carte, tapez Locations. Conseil : si vous créez plusieurs cartes graphiques au sein d'un même document, attribuez à chacune d'entre elles un nom unique. Par ailleurs, notez que chaque carte graphique peut comporter plusieurs zones réactives. 5 Cliquez sur Outil Zone réactive rectangulaire pour sélectionner cet outil. 6 Dans la fenêtre de document, cliquez dans la zone au-dessus et à gauche de l'Amérique du Nord, puis faites glisser le pointeur vers le bas et à droite au-dessus de l'image afin de créer une zone réactive. Un calque bleu apparaît sur l'image et l'inspecteur de propriétés de la zone réactive s'affiche. 186 Chapitre 15 7 Cliquez sur l'icône de dossier en regard de la zone de texte Lien. Dans la boîte de dialogue qui apparaît, recherchez le fichier location1.htm pour créer un lien avec ce fichier. 8 Dans la zone de texte Sec., tapez North America. Remarque : il est fortement conseillé de définir un texte secondaire pour toutes les images insérées dans des documents, y compris les cartes graphiques, car cela permet aux utilisateurs disposant de navigateurs en mode texte seulement d'obtenir des informations descriptives à leur sujet. Vous avez défini la première zone réactive. Passons à la deuxième maintenant. Ouverture d'un fichier lié dans une nouvelle fenêtre Afin de pouvoir voir la différence entre les divers outils de zone réactive, vous allez utiliser cette fois l'outil de création d'une zone réactive polygone. Cet outil vous permet de définir une zone réactive au sein de points de connexion. Vous allez également apprendre à ouvrir le document lié dans une nouvelle fenêtre. 1 Dans l'inspecteur de propriétés, cliquez sur Outil Zone réactive polygone pour sélectionner cet outil. 2 Dans la fenêtre de document, cliquez sur l'image où la zone réactive doit commencer, puis déplacez le pointeur à la position suivante. Une ligne apparaît entre les deux points. 3 Continuez à cliquer autour de la forme pour définir l'Europe comme zone réactive. Remarque : chaque fois que vous cliquez, la zone de la carte graphique s'ajuste et se remplit. Continuez à cliquer autour de la forme jusqu'à ce qu'elle englobe la zone voulue. 4 Une fois la carte de l'image définie, cliquez sur le bouton en forme de flèche dans l'inspecteur de propriétés pour remplacer l'outil de dessin par le pointeur standard. 5 Cliquez sur l'icône de dossier en regard de la zone de texte Lien, puis recherchez le fichier location3.htm qui doit s'ouvrir lorsqu'un utilisateur clique sur cette zone réactive. Didacticiel sur l'alignement des images et les cartes graphiques 187 6 Dans le menu déroulant Cible, sélectionnez _blank. Lorsqu'un utilisateur cliquera sur cette zone réactive, la page Locations3 s'ouvrira dans une nouvelle fenêtre. 7 Dans la zone de texte Sec., tapez Europe. 8 Appuyez sur la touche F12 (Windows uniquement) ou choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans lequel afficher le document et tester les liens. 9 Enregistrez et fermez le fichier. Etapes suivantes Ce didacticiel vous a appris à travailler avec différents aspects des images. Il vous a montré comment utiliser l'inspecteur de propriétés pour définir l'alignement et l'espace autour d'une image ainsi que pour créer une carte graphique. Pour plus d'informations sur les rubriques abordées dans ce didacticiel, voir les chapitres Insertion d'images et Liens et navigation dans la documentation Utilisation de Dreamweaver MX et l'aide de Dreamweaver. Autres rubriques susceptibles de vous intéresser : • Feuilles de style en cascade (positionnement) • Alignement des tableaux • Association de comportements 188 Chapitre 15 CHAPITRE 16 Didacticiel sur l'utilisation des fichiers de conception Dreamweaver Macromedia Dreamweaver MX est fourni avec un ensemble complet d'éléments de conception extrêmement pointus, notamment des documents de mise en forme des pages, des feuilles de style en cascade (CSS, Cascading Style Sheets) et des fragments de code. Ces éléments vous permettent de créer rapidement des pages Web hautement professionnelles. Dans ce didacticiel, vous allez créer un document, puis insérer et modifier des fragments de code spécifiques à certains éléments de conception. Vous apprendrez également à créer un fragment de code. Ce didacticiel porte sur les opérations suivantes : • • • • « Manipulation des fragments de code », page 190 « Insertion d'un fragment de code », page 190 « Modification du contenu d'un fragment de code », page 194 « Enregistrement d'un code en tant que fragment de code », page 195 Avant de commencer Si cela n'est pas déjà fait, créez un dossier dans lequel transférer les fichiers d'exemple GettingStarted. 1 A la racine de votre disque local, créez un dossier appelé Sites (C:\Sites (Windows) ou Disque dur:Sites (Macintosh), par exemple). Si vous travaillez sous Windows XP ou Macintosh OS X, créez le dossier Sites dans votre dossier utilisateur. 2 Recherchez le dossier Tutorials dans le dossier de l'application Dreamweaver sur votre disque dur. Le chemin du dossier est : \Macromedia\Dreamweaver MX\Samples\GettingStarted\Tutorials 3 Copiez le dossier Tutorials dans le dossier Sites. 4 Dans Dreamweaver, définissez en tant que site local le dossier Tutorials que vous venez de copier. Si vous ne savez pas comment définir un site local dans Dreamweaver, suivez les indications fournies dans le Chapitre 2, « Création de votre premier site Web dans Dreamweaver », page 19. Vous pouvez également utiliser l'Assistant de définition d'un site de Dreamweaver qui vous guidera tout au long de la procédure de configuration du site. Dans Dreamweaver, choisissez Site > Nouveau site, puis cliquez sur l'onglet Elémentaire afin de commencer à configurer le site. 189 Manipulation des fragments de code Les fragments de code peuvent vous faire gagner un temps précieux lors de la création d'une mise en forme d'aspect véritablement professionnel, car il s'agit de morceaux de code réutilisables. Vous pouvez appliquer les fragments de code fournis avec Dreamweaver ou créer les vôtres en vue de les réutiliser dans les pages d'un site. Il peut s'agir de fragments de code HTML, JavaScript, CFML, ASP, JSP et bien plus encore. Dans le cadre de ce didacticiel, vous allez commencer par utiliser certains des fragments de code fournis avec Dreamweaver. Utilisez la boîte de dialogue Nouveau document pour créer un document à partir d'un document de conception de page. 1 Choisissez Fichier > Nouveau. La boîte de dialogue Nouveau document s'affiche. 2 La catégorie Page de base est sélectionnée par défaut dans l'onglet Général. 3 Dans la liste de documents Page de base, sélectionnez HTML, puis cliquez sur Créer. Le document s'ouvre dans la fenêtre de document. 4 Enregistrez le document sous le nom de myCodeSnippets dans votre site (Fichier > Enregistrer). Insertion d'un fragment de code Dreamweaver comprend de nombreux fragments de code que vous pouvez sélectionner à partir du panneau Code. Vous allez, au cours de ce didacticiel, insérer un fragment de code de navigation, un autre de contenu et un dernier de pied de page. 1 Placez le point d'insertion à l'endroit du document où vous souhaitez insérer le fragment de code. 2 Ouvrez le panneau Fragments de code en procédant de l'une des manières suivantes : • Choisissez Fenêtre > Fragments de code. • Dans le panneau Code, cliquez, le cas échéant, sur la flèche d'agrandissement, puis choisissez Fragments de code. Le panneau Fragments de code s'affiche. 190 Chapitre 16 3 Cliquez sur le bouton plus (+) en regard du dossier Navigation pour afficher son contenu. Des dossiers supplémentaires apparaissent. 4 Cliquez sur le bouton plus (+) en regard du dossier Tab pour afficher le contenu de ce dossier, puis cliquez sur Onglets élémentaires pour sélectionner ce fragment de code. Le fragment de code apparaît dans le volet d'aperçu. Didacticiel sur l'utilisation des fichiers de conception Dreamweaver 191 5 Dans la partie inférieure du panneau Fragments de code, cliquez sur le bouton Insérer pour ajouter ce fragment de code au document. Le fragment de code apparaît dans le document. 6 Enregistrez le document (Fichier > Enregistrer). Ajout d'un fragment de code de contenu Vous allez maintenant créer un tableau destiné à accueillir un contenu. Pour ce faire, vous allez insérer le nouveau fragment de code directement sous le fragment de code du tableau de navigation que vous venez d'ajouter. 1 Appuyez sur la touche Entrée ou Retour pour déplacer le point d'insertion à la ligne suivante. 2 Dans le panneau Fragments de code, cliquez sur le bouton plus (+) en regard du dossier Table des matières, puis cliquez sur le bouton plus (+) en regard du dossier Bordure d'un pixel pour afficher son contenu. 192 Chapitre 16 3 Cliquez sur Texte B pour sélectionner ce fragment de code, puis sur Insérer pour l'ajouter au document. Le fragment de code apparaît dans le document. 4 Enregistrez votre document (Fichier > Enregistrer). Ajout d'un fragment de code de pied de page Vous allez à présent ajouter un dernier fragment de code pour un pied de page. 1 Appuyez sur la touche Entrée ou Retour pour déplacer le point d'insertion à la ligne suivante. 2 Dans le panneau Fragments de code, cliquez sur le bouton plus (+) en regard du dossier Footers pour afficher son contenu. Didacticiel sur l'utilisation des fichiers de conception Dreamweaver 193 3 Cliquez sur Elémentaire : texte concis pour sélectionner ce fragment de code, puis sur Insérer pour l'ajouter au document. Le fragment de code apparaît dans le document. Modification du contenu d'un fragment de code Vous allez maintenant modifier le texte et la couleur des espaces réservés. Vous allez appliquer une couleur d'arrière-plan aux cellules et définir ainsi votre propre modèle de couleur. 1 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), si nécessaire. 2 Placez le pointeur dans la première cellule du tableau de navigation que vous avez inséré. Il s'agit de la cellule qui contient le texte « Lorem ». 3 Dans la zone de texte Ar-pl. de l'inspecteur de propriétés, cliquez sur la flèche du sélecteur de couleur, puis choisissez la couleur à appliquer à l'arrière-plan de la cellule. La couleur utilisée dans l'exemple est le violet, #9966FF. 4 Placez le pointeur dans la cellule qui contient le texte « Ipsum ». 5 Dans la zone de texte Ar-pl. de l'inspecteur de propriétés, cliquez sur la flèche du sélecteur de couleur, puis choisissez une autre couleur à appliquer à l'arrière-plan de la cellule. La couleur utilisée dans l'exemple est un violet plus clair, #9999FF. 6 Répétez l'étape 5, en appliquant la même couleur aux cellules qui contiennent le texte « Dolor » et « Amit ». 7 Cliquez dans la cellule du tableau qui contient le paragraphe de texte, puis sélectionnez la couleur que vous souhaitez lui appliquer. 194 Chapitre 16 8 Continuez à modifier les couleurs de votre choix. 9 Une fois les modifications effectuées, enregistrez votre document. 10 Appuyez sur la touche F12 (Windows uniquement) ou choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur dans lequel afficher le document. Enregistrement d'un code en tant que fragment de code Il est très facile d'utiliser des fragments de code existants, mais vous pouvez tout aussi facilement créer vos propres fragments de code. Supposons, par exemple, que vous souhaitiez réutiliser les fragments de code mis à jour dans le document que vous venez de créer. Vous allez enregistrer les fragments de code de navigation dans un nouveau fragment de code. 1 Dans le panneau Fragments de code, recherchez le dossier Navigation, puis le dossier Tab dans lequel vous allez enregistrer le fragment de code. 2 Dans la fenêtre de document, cliquez dans la cellule de navigation qui contient le texte « Lorem ». 3 Dans le sélecteur de balises, situé dans la partie inférieure gauche de la fenêtre de document, cliquez sur la balise <table>. Le tableau est à présent sélectionné dans la fenêtre de document. Didacticiel sur l'utilisation des fichiers de conception Dreamweaver 195 4 Enregistrez le tableau sélectionné en tant que fragment de code en procédant de l'une des manières suivantes : • Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur le tableau sélectionné, puis choisissez Créer un fragment de code. • Dans la partie inférieure du panneau Fragments de code, cliquez sur le bouton plus (+). La boîte de dialogue Fragment de code s'affiche. 5 Dans la zone de texte Nom, saisissez un nom décrivant le fragment de code créé. Dans l'exemple, le fragment de code a été appelé purple navigation. 6 Dans la zone Description, saisissez la description du fragment de code. 7 Ce type de description apparaît à droite du nom du fragment de code associé, dans le panneau Fragments de code. 8 Dans Type de fragment de code, cliquez sur Insérer le bloc. Le fragment de code est alors inséré en tant que bloc de code complet, plutôt qu'en tant que fragment de code habillant la sélection de texte à laquelle il est appliqué. 9 Cliquez sur OK. 10 Le nouveau fragment de code est ajouté au dossier Tab du panneau Fragments de code. Etapes suivantes Ce didacticiel vous a appris à localiser, afficher et insérer les fragments de code fournis avec Dreamweaver. Vous avez également découvert qu'il était très facile de créer vos propres fragments de code. Pour plus d'informations sur les rubriques abordées dans ce didacticiel, voir l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). 196 Chapitre 16 CHAPITRE 17 Didacticiel sur la conception à l'aide de feuilles de style en cascade Vous pouvez utiliser des feuilles de style en cascade (CSS) dans Macromedia Dreamweaver MX afin d'harmoniser les éléments de style des différentes pages d'un site. Les styles CSS offrent une grande souplesse puisqu'ils ne se cantonnent pas à des objets de texte. Il est possible de définir les styles de positionnement et de mise en forme d'un texte, d'images, de tableaux, de calques, etc. Au cours de ce didacticiel, vous allez utiliser plusieurs styles et découvrir quelques-unes des nombreuses options de style offertes par les CSS. Vous effectuerez les opérations suivantes au cours de ce didacticiel : « Ouverture du panneau Styles CSS », page 198 « Redéfinition d'une balise HTML », page 199 « Définition d'un style pour les liens », page 203 « Exportation de styles pour la création d'une feuille de style externe », page 204 Avant de commencer Si cela n'est pas déjà fait, créez un dossier dans lequel transférer les fichiers d'exemple GettingStarted. 1 A la racine de votre disque local, créez un dossier appelé Sites (C:\Sites (Windows) ou Disque dur:Sites (Macintosh), par exemple). Si vous travaillez sous Windows XP ou Macintosh OS X, créez le dossier Sites dans votre dossier utilisateur. 2 Recherchez le dossier Tutorials dans le dossier de l'application Dreamweaver sur votre disque dur. Le chemin du dossier est : \Macromedia\Dreamweaver MX\Samples\GettingStarted\Tutorials 3 Copiez le dossier Tutorials dans le dossier Sites. 4 Dans Dreamweaver, définissez en tant que site local le dossier Tutorials que vous venez de copier. Si vous ne savez pas comment définir un site local dans Dreamweaver, suivez les indications fournies dans le Chapitre 2, « Création de votre premier site Web dans Dreamweaver », page 19. Vous pouvez également utiliser l'assistant de définition d'un site de Dreamweaver qui vous guidera tout au long de la procédure de configuration du site. Dans Dreamweaver, choisissez Site > Nouveau site, puis cliquez sur l'onglet Elémentaire afin de commencer à configurer le site. 197 Ouverture d'un document de travail Commencez par ouvrir un document dans lequel vous pourrez travailler. 1 Dans Dreamweaver, choisissez Fichier > Ouvrir. 2 Dans la boîte de dialogue qui apparaît, recherchez le dossier Tutorial sur le site local préalablement défini, puis double-cliquez sur le fichier intitulé css_start.htm pour le sélectionner. Le document s'ouvre dans la fenêtre de document. Ce document inclut plusieurs éléments : texte, tableaux et liens. La page comporte très peu d'éléments auxquels un style a déjà été appliqué. En redéfinissant la balise body, vous définirez les styles qui permettront d'appliquer un changement global au document. Ouverture du panneau Styles CSS Le panneau Styles CSS est utilisé pour créer, afficher ou modifier les attributs de style. Il comporte deux affichages ou modes. Utilisez l'affichage Appliquer les styles pour appliquer des styles CSS de classe ou personnalisés et utilisez l'affichage Modifier les styles pour effectuer des modifications sur les styles appliqués à votre document. Vous pouvez créer un nouveau style dans les deux affichages. 1 Ouvrez le panneau Styles CSS (Fenêtre > Styles CSS), si ce n'est pas déjà fait. 198 Chapitre 17 2 Dans le panneau Styles CSS, cliquez sur le bouton Nouveau style CSS (+) situé dans le bas du panneau. La boîte de dialogue Nouveau style CSS apparaît. Redéfinition d'une balise HTML Vous pouvez appliquer des styles CSS à n'importe quelle balise dans un document. Le premier style créé redéfinit les attributs de style de la balise body. 1 Dans la boîte de dialogue Nouveau style CSS, sous Type, sélectionnez Redéfinir la balise HTML. 2 Dans le menu déroulant Balise, sélectionnez body. 3 Sous Définir dans, sélectionnez Seulement ce document. Pour le moment, nous allons appliquer le style à ce document. Vous verrez plus tard comment exporter le style de manière à l'utiliser dans d'autres pages du site. Votre boîte de dialogue doit avoir l'aspect suivant : Didacticiel sur la conception à l'aide de feuilles de style en cascade 199 4 Cliquez sur OK. La boîte de dialogue Définition du style CSS s'affiche. 5 Définissez les paramètres suivants sous Type : Dans le menu déroulant Police, sélectionnez Arial, Helvetica, sans serif. 6 Dans le menu déroulant Taille, sélectionnez 12 et pixels. 7 Dans le menu Couleur, cliquez sur le sélecteur de couleurs, puis utilisez la pipette pour sélectionner le blanc. 200 Chapitre 17 Définition de la couleur d'arrière-plan de la page Utilisez la catégorie Arrière-plan de la boîte de dialogue Définition du style CSS pour définir les options d'arrière-plan. 1 Sous Catégorie, sélectionnez Arrière-plan. Les attributs d'arrière-plan CSS apparaissent. 2 Dans le menu Couleur d'arrière-plan, procédez de l'une des manières suivantes pour définir la couleur de l'arrière-plan : • Cliquez sur le sélecteur de couleurs, puis utilisez la pipette pour sélectionner un bleu foncé ou déplacez la pipette vers la fenêtre de document et sélectionnez le bleu dans l'image du logo Global. • Dans la zone Couleur d'arrière-plan, tapez #333366 Didacticiel sur la conception à l'aide de feuilles de style en cascade 201 3 Cliquez sur OK. La boîte de dialogue se ferme et le style est immédiatement appliqué au document. 4 Dans le panneau Styles CSS, sélectionnez Modifier les styles. Le nouveau style et une description des attributs de style apparaissent dans la liste. 202 Chapitre 17 Définition d'un style pour les liens Une fois le nouveau style appliqué, il est difficile de distinguer les liens hypertextes dans le document. Créons un style pour les liens. 1 Dans le panneau Styles CSS, cliquez sur le bouton Nouveau style CSS (+) situé dans le bas du panneau. La boîte de dialogue Nouveau style CSS apparaît. 2 Dans Type, sélectionnez Utiliser le sélecteur CSS. 3 Dans le menu déroulant Sélecteur, sélectionnez a:link. 4 Sous Définir dans, sélectionnez Seulement ce document. 5 Cliquez sur OK. La boîte de dialogue Définition du style CSS s'affiche. 6 Définissez les attributs suivants de Type pour le lien : Dans Décoration, sélectionnez Ligne supérieure. Dans Couleur, tapez #FFCC9 dans la zone de texte. 7 Cliquez sur OK. 8 Pour visualiser le style appliqué aux liens, vous devez afficher la page dans un navigateur ; appuyez sur F12 pour prévisualiser votre page. Didacticiel sur la conception à l'aide de feuilles de style en cascade 203 Exportation de styles pour la création d'une feuille de style externe Les styles CSS créés jusqu'ici ont été appliqués uniquement à ce document. Les feuilles de styles internes sont uniquement appliquées dans le document où elles ont été créées. Vous allez maintenant apprendre à créer une feuille de style externe contenant les styles définis dans ce document. 1 Choisissez Fichier > Exporter > Styles CSS. La boîte de dialogue Exporter les styles sous fichier CSS apparaît. 2 Dans la boîte de dialogue, recherchez le dossier de votre site local dans le menu déroulant Enregistrer dans (Windows) ou Où (Macintosh). 3 Dans la zone de texte Nom de fichier (Windows) ou Enregistrer sous (Macintosh), intitulez le fichier mystyle.css. Remarque : vous pouvez donner le nom de votre choix à une feuille de style CSS, mais il doit être tapé en minuscules et ne contenir aucun espace. 4 Cliquez sur Enregistrer. Attacher une feuille de style externe Vous pouvez associer la feuille de style CSS que vous venez de créer à un autre document de votre site. Le document sur lequel vous allez travailler est le même que le fichier css_start.htm d'origine, avant l'ajout de style. 1 Dans Dreamweaver, ouvrez le panneau Site (Fenêtre > Site), si ce n'est pas déjà fait. 2 Dans le panneau Site, localisez le fichier css_start2.htm, puis double-cliquez dessus pour l'ouvrir dans la fenêtre de document. 3 Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de style, situé dans le bas du panneau. La boîte de dialogue Ajouter une feuille de style externe apparaît. 4 Dans le champ Fichier/URL, tapez le chemin menant à mystyle.css ou cliquez sur Parcourir et recherchez le fichier mystyle.css dans la boîte de dialogue qui apparaît, puis cliquez sur OK pour le sélectionner. 5 Dans la boîte de dialogue Ajouter une feuille de style externe, sélectionnez Lien pour Ajouter sous. 6 Cliquez sur OK. La feuille de style sélectionnée est associée au document en cours et les attributs de style sont immédiatement appliqués. 204 Chapitre 17 Etapes suivantes Dans ce didacticiel, vous avez appris à créer des styles CSS élémentaires. Vous avez également appris à exporter des styles appliqués dans un document pour créer une feuille de style CSS externe. Pour plus d'informations sur les sujets abordés dans ce didacticiel, consultez les rubriques suivantes dans l'aide de Dreamweaver (Aide > Utilisation de Dreamweaver). A propos des feuilles de style en cascade Création d'un style CSS Création ou liaison avec une feuille de style CSS externe Création d'un document basé sur un fichier de conception Dreamweaver Didacticiel sur la conception à l'aide de feuilles de style en cascade 205 206 Chapitre 17 CHAPITRE 18 Didacticiel sur la création d'un ensemble de pages Principale-Détails Un ensemble de pages Principale-Détails est une application Web qui présente dans deux formats les informations extraites d'une base de données. La page d'informations principales affiche la liste de tous les enregistrements récupérés à la suite d'une recherche dans une base de données. Une page d'informations détaillées s'affiche après activation du lien d'un élément sur la page d'informations principales et contient généralement des informations plus précises sur cet élément. Vous pouvez suivre les étapes de ce didacticiel en utilisant l'un des modèles de serveur suivants : ColdFusion, ASP ou JSP. Dans ce didacticiel, vous allez créer un ensemble de pages d'informations principales et détaillées. Au terme du didacticiel, qui dure quelque 20 minutes selon l'expérience de l'utilisateur, vous saurez effectuer les opérations suivantes : • • • • « Création d'un ensemble de pages Principale-Détails », page 208 « Création d'un jeu d'enregistrements de base de données », page 209 « Insertion d'un objet d'application Ensemble de pages Principale-Détails », page 212 « Affichage des pages », page 215 Avant de commencer Si vous avez suivi les étapes décrites dans le Chapitre 5, « Création d'applications Web dans Dreamweaver MX », page 73 de la section Bien démarrer avec Dreamweaver MX du présent guide, les fichiers nécessaires à ce didacticiel se trouvent déjà dans vos sites local et distant. Dans le cas contraire, vous devez transférer les fichiers d'exemple depuis votre lecteur local jusqu'à votre serveur d'application. Reportez-vous au chapitre de configuration spécifique à votre serveur d'application Web pour obtenir des instructions sur la façon de configurer ces fichiers. Chapitre 7, « Configuration d'un exemple de site ColdFusion », page 95 Chapitre 9, « Configuration d'un site ASP », page 115 Chapitre 10, « Configuration d'un exemple de site JSP », page 127 Avant de commencer ce didacticiel, vous devez avoir : • configuré votre système ; • configuré Dreamweaver afin qu'il fonctionne avec votre serveur d'application ; • défini une connexion à la base de données. 207 Création d'un ensemble de pages Principale-Détails Il est utile de commencer par afficher la liste des enregistrements stockés dans la base de données pour développer une application de base de données. L'ensemble des pages d'informations principales-détaillées que vous allez créer répertoriera les points de location de voitures de la société Global et contiendra des informations détaillées sur chaque point de location, telles que son numéro de téléphone et son adresse. Toutes les informations sur les points de location de la société sont stockées dans un fichier de base de données Microsoft Access, appelé « global.mdb ». Si vous avez suivi les instructions du chapitre de configuration approprié dans ce guide, vous devez disposer d'une connexion à cette base de données. Aucune mise à jour des pages de l'application Web ne pourra avoir lieu sans cette connexion. Vous allez commencer par sélectionner une page de travail. 1 Procédez de l'une des manières suivantes pour ouvrir le panneau Site : • Dans le groupe de panneaux Fichiers, cliquez sur la flèche d'agrandissement, puis cliquez sur l'onglet Site, s'il n'est pas déjà sélectionné. • Choisissez Fenêtre > Site. • Appuyez sur la touche F8. Le panneau Site s'ouvre. 2 Dans le menu déroulant Sites, sélectionnez le site GlobalCar que vous avez défini. 208 Chapitre 18 3 Dans le panneau Site, double-cliquez sur le fichier locationMaster pour l'ouvrir. Le document s'ouvre dans la fenêtre de document. Au cours des étapes suivantes, vous modifierez la page partiellement terminée. Création d'un jeu d'enregistrements de base de données Vous allez créer maintenant un jeu d'enregistrements pour afficher les informations stockées dans la base de données. Un jeu d'enregistrements est un sous-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 appelé ensemble de données.) Une requête de base de données se compose de critères de recherche qui définissent les informations incluses dans le jeu d'enregistrements. Les informations extraites sont ensuite utilisées comme source de données des pages dynamiques. Dreamweaver MX 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). Vous allez créer un jeu d'enregistrements qui sélectionne toutes les valeurs de la table Locations. Didacticiel sur la création d'un ensemble de pages Principale-Détails 209 1 Dans Dreamweaver, ouvrez la boîte de dialogue Jeu d'enregistrements ou Ensemble de données (ASP.NET) en procédant de l'une des manières suivantes : • Dans l'onglet Application de la barre Insertion, cliquez sur le bouton Jeu d'enregistrements ou Ensemble de données (ASP.NET). • Choisissez Fenêtre > Liaisons pour ouvrir le panneau correspondant, puis cliquez sur le bouton plus (+) et choisissez Jeu d'enregistrements ou Ensemble de données. • Dans le groupe de panneaux Application, cliquez sur l'onglet Liaisons, puis sur le bouton plus (+) et choisissez Jeu d'enregistrements ou Ensemble de données. La boîte de dialogue Jeu d'enregistrements ou Ensemble de données apparaît. L'exemple cidessous illustre la boîte de dialogue Jeu d'enregistrements spécifique à ColdFusion. (Dans ASP.NET, cette boîte de dialogue a pour titre Ensemble de données, mais la plupart des options relatives aux jeux d'enregistrements sont identiques pour tous les modèles de serveur.) 2 Dans la zone de texte Nom, tapez rsLocations. Il s'agit du nom du jeu d'enregistrements que vous êtes en train de définir. 3 Dans le menu déroulant Source de données (ColdFusion) ou Connexion (autres types de pages de serveur), choisissez connGlobal. La boîte de dialogue Jeu d'enregistrements ou Ensemble de données est mise à jour et affiche les données de la première table de la base de données Global. Remarque : si la connexion connGlobal ne figure pas dans le menu, cliquez sur le bouton Définir pour la créer. 210 Chapitre 18 4 Dans le menu déroulant Table, sélectionnez LOCATIONS. Le jeu d'enregistrements est mis à jour à l'aide des enregistrements de la table LOCATIONS. 5 Dans Colonnes, acceptez Toutes, qui est le paramètre par défaut. Conseil : pour limiter le nombre d'informations incluses dans le jeu d'enregistrements, cliquez sur Sélectionnées, puis sélectionnez les colonnes souhaitées. 6 Cliquez sur Tester pour tester le jeu d'enregistrements. Les enregistrements de la base de données qui correspondent à votre requête de jeu d'enregistrements apparaissent dans la fenêtre Tester l'instruction SQL. Didacticiel sur la création d'un ensemble de pages Principale-Détails 211 7 Cliquez sur OK pour fermer la fenêtre Tester l'instruction SQL. 8 Cliquez sur OK pour fermer la boîte de dialogue Jeu d'enregistrements ou Ensemble de données et ajouter le code du jeu d'enregistrements à la page. Dreamweaver vous confirme l'ajout du jeu d'enregistrements, qui apparaît alors dans le panneau Liaisons. Conseil : si vous ne voyez pas tous les champs du jeu d'enregistrements, cliquez sur le bouton plus (+) pour développer la branche du jeu d'enregistrements. Insertion d'un objet d'application Ensemble de pages PrincipaleDétails Dreamweaver comprend plusieurs objets d'application qui facilitent et accélèrent la création de pages d'application Web. Vous allez maintenant utiliser un objet d'application pour créer un ensemble de pages PrincipaleDétails. Les objets d'application créent la mise en page et les scripts côté serveur de nombreuses applications Web courantes. Une fois que vous avez sélectionné des options, l'objet d'application Ensemble de pages Principale-Détails génère les formulaires et les scripts de la liste d'informations principales et de la page des informations détaillées. L'objet d'application crée également une barre de navigation entre enregistrements et un compteur d'enregistrements dans la page des informations principales. 1 Enregistrez le document (Fichier > Enregistrer). 2 Dans le fichier locationMaster qui doit encore être affiché dans la fenêtre de document, placez le point d'insertion après le texte « Rental Locations », puis appuyez sur la touche Entrée ou Retour pour définir l'endroit où insérer l'objet dynamique. 212 Chapitre 18 3 Pour insérer les données souhaitées, procédez de l'une des manières suivantes : • Dans l'onglet Application de la barre Insertion, cliquez sur le bouton Ensemble de pages Principale-Détails ou faites-le glisser jusqu'au document. • Choisissez Insertion > Objets d'application > Ensemble de pages Principale-Détails. La boîte de dialogue Insérer l'ensemble de pages Principale-détails s'affiche. 4 Dans le menu déroulant Jeu d'enregistrements de la boîte de dialogue, sélectionnez rsLocations. 5 Dans la liste Champs de la page principale, sélectionnez CODE, puis cliquez sur le bouton moins (-) afin de supprimer cet élément de la liste des données qui sont répertoriées dans la page d'informations principales. 6 Supprimez tous les champs de la liste Champs de la page principale, sauf LOCATION_NAME, CITY et STATE_COUNTRY. 7 Dans le menu déroulant Lier à la page d'informations détaillées depuis, sélectionnez LOCATION_NAME. Pour pouvoir afficher la page d'informations détaillées d'un point de location, vous devez créer un lien pour chaque point répertorié dans la liste des informations principales. Ainsi, lorsqu'un visiteur cliquera sur le nom d'un point de location dans la page d'informations principales, cela ouvrira la page d'informations détaillées appropriée. 8 Dans le menu déroulant Passer la clé unique, acceptez Code, la valeur par défaut, et vérifiez que la case à cocher Numérique n'est pas activée. Le champ CODE est la clé unique ou « primaire » de la table Locations. Ce champ contient un code unique composé de 3 lettres pour chaque enregistrement. Didacticiel sur la création d'un ensemble de pages Principale-Détails 213 9 Dans Afficher, acceptez le paramètre par défaut pour pouvoir afficher 10 enregistrements à la fois. 10 Dans Nom de la page d'informations détaillées, cliquez sur Parcourir puis, dans la boîte de dialogue Sélectionner un fichier, recherchez le fichier locationDetail enregistré dans le dossier de votre site. 11 Cliquez sur OK. 12 Dans Champs de la page d'informations détaillées, sélectionnez les champs qui doivent figurer dans la page d'informations détaillées en procédant comme suit : Dans la liste Champs de la page d'informations détaillées, sélectionnez CODE, puis cliquez sur le bouton moins (-). Sélectionnez REGION_ID, puis cliquez sur le bouton moins (-). 13 Cliquez sur OK. Dreamweaver met à jour les pages d'informations principales et détaillées, puis ajoute les requêtes et les scripts serveur nécessaires à ces deux types de page. La page de la liste des informations principales est mise à jour. Elle comprend un tableau pour les informations de la base de données, un tableau pour la navigation sur la page du jeu d'enregistrements et un compteur pour le jeu d'enregistrements. La page d'informations détaillées est également mise à jour. Elle comprend un tableau qui répertorie les informations détaillées de chaque enregistrement figurant dans la page d'informations principales. 214 Chapitre 18 Affichage des pages Vous allez maintenant enregistrer les pages, puis les afficher pour voir comment l'application créée fonctionne. Pour voir les pages telles qu'elles apparaîtraient après avoir été traitées par un serveur, affichez-les dans un navigateur. 1 Dans la fenêtre de document, sélectionnez le document locationDetail, puis choisissez Fichier > Enregistrer pour enregistrer votre travail. 2 Dans le panneau Site, sélectionnez le document locationDetail, puis cliquez sur le bouton Placer le(s) fichier(s) (flèche bleue dirigée vers le haut) pour copier la version locale de ce document sur le serveur. 3 Dans la fenêtre de document, sélectionnez le document locationMaster, puis choisissez Fichier > Enregistrer pour l'enregistrer. 4 Dans le panneau Site, sélectionnez le document locationMaster, puis cliquez sur le bouton Placer le(s) fichier(s) (flèche bleue dirigée vers le haut) pour copier la version locale de ce document sur le serveur. 5 Gardez le document locationMaster sélectionné, puis appuyez sur la touche F12 pour afficher la page dans un navigateur. Testez les liens qui mènent de la page des informations principales à celle des informations détaillées. 6 Cliquez sur le bouton Suivant sous le tableau de données afin d'afficher le prochain ensemble de 10 enregistrements. Le tableau de données, la barre de navigation et le compteur d'enregistrements sont mis à jour. 7 Cliquez sur le nom de l'un des points de location pour afficher la page d'informations détaillées correspondante. La page d'informations principales transmet la clé unique au serveur, qui traite la requête et vous renvoie la page d'informations détaillées contenant les données du point de location sélectionné. 8 Cliquez sur le bouton Locations dans la partie supérieure de la page pour revenir à la liste des points de location. 9 Fermez la fenêtre du navigateur après avoir visualisé les pages de votre choix. 10 Fermez les pages dans Dreamweaver. Didacticiel sur la création d'un ensemble de pages Principale-Détails 215 Etapes suivantes Ce didacticiel vous a appris à créer un ensemble de pages Principale-Détails dans Dreamweaver. Pour plus d'informations sur les rubriques abordées dans ce didacticiel, voir les rubriques suivantes dans la documentation Utilisation de Dreamweaver MX ou l'aide de Dreamweaver : • Création rapide d'un ensemble de pages Principale-Détails • Création d'un ensemble de pages Principale-Détails par élément • Modification d'un ensemble de pages Principale-Détails 216 Chapitre 18 CHAPITRE 19 Didacticiel sur la création d'une page d'insertion d'enregistrements Ce didacticiel décrit chacune des étapes à suivre pour créer un formulaire qui insère des informations dans une base de données. Vous apprendrez à insérer et à définir des champs de formulaire. Vous découvrirez également comment créer un champ de formulaire qui permet aux utilisateurs d'insérer des informations à partir d'un menu généré dynamiquement. Vous pouvez suivre les étapes de ce didacticiel en utilisant l'un des modèles de serveur pris en charge par Dreamweaver MX, à savoir ColdFusion, ASP, ASP.NET, JSP ou PHP. Vous effectuerez les opérations suivantes au cours de ce didacticiel : • • • • « Création d'une page d'insertion », page 218 « Ajout d'objets de formulaire », page 219 « Définition d'un comportement de serveur Insérer un enregistrement », page 223 « Test de la page », page 225 Avant de commencer Si vous avez suivi les étapes décrites dans le Chapitre 5, « Création d'applications Web dans Dreamweaver MX », page 73 de la section Bien démarrer avec Dreamweaver MX du présent guide, les fichiers nécessaires à ce didacticiel se trouvent déjà dans vos sites local et distant. Dans le cas contraire, vous devez transférer les fichiers d'exemple depuis votre lecteur local jusqu'à votre serveur d'application. Reportez-vous au chapitre de configuration spécifique à votre serveur d'application Web pour obtenir des instructions sur la façon de configurer ces fichiers. Chapitre 7, « Configuration d'un exemple de site ColdFusion », page 95 Chapitre 8, « Configuration d'un exemple de site ASP.NET », page 105 Chapitre 9, « Configuration d'un site ASP », page 115 Chapitre 10, « Configuration d'un exemple de site JSP », page 127 Chapitre 11, « Configuration d'un exemple de site PHP », page 139 Avant de commencer ce didacticiel, vous devez avoir : • configuré votre système ; • configuré Dreamweaver afin qu'il fonctionne avec votre serveur d'application ; • défini une connexion à la base de données. 217 Création d'une page d'insertion La page que vous allez créer permettra à l'administrateur du site de mettre à jour la base de données de la société Global Car Rentals en y insérant des informations sur les nouveaux points de location de voitures. Vous commencerez à travailler dans une page partiellement terminée. Vous apprendrez à ajouter à une page des objets de formulaire ainsi que des éléments de contenu dynamiques. Vous allez commencer par sélectionner une page de travail. 1 Procédez de l'une des manières suivantes pour ouvrir le panneau Site : • Dans le groupe de panneaux Fichiers, cliquez sur la flèche d'agrandissement, puis cliquez sur l'onglet Site, s'il n'est pas déjà sélectionné. • Choisissez Fenêtre > Site. • Appuyez sur la touche F8. Le panneau Site s'ouvre. 2 Dans le menu déroulant Site, sélectionnez le site Global Car que vous avez défini pour votre type de serveur d'application. 218 Chapitre 19 3 Dans le panneau Site, double-cliquez sur le document insertLocation pour l'ouvrir. Le document s'ouvre dans la fenêtre de document. Ajout d'objets de formulaire Cette page comporte déjà un tableau et quelques champs de formulaire. Un rectangle en pointillé rouge apparaît dans le document ; il s'agit des limites du formulaire. Lorsque vous insérez un objet de formulaire dans un document, Dreamweaver crée automatiquement des limites autour de cet objet. Vous allez maintenant ajouter d'autres champs de formulaire à la page d'insertion, à savoir trois champs de texte, un champ de liste ou de menu, un bouton d'envoi et un bouton de rétablissement des valeurs du formulaire. Vous attribuerez des noms aux champs du formulaire. Cela vous permettra d'identifier plus facilement ces champs lorsque vous les connecterez aux champs de la base de données. Vous allez commencer par examiner l'un des champs de formulaire existants. 1 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés), si nécessaire. 2 Placez le pointeur sur la cellule supérieure droite, puis cliquez sur le champ de formulaire pour le sélectionner. L'inspecteur de propriétés est mis à jour et affiche les propriétés du champ de formulaire. Le champ Nom contient le nom de l'objet de formulaire et le champ Larg. de caract. indique que la largeur du champ est définie sur 30 caractères. Vous allez mettre à jour ces deux mêmes champs dans de nouveaux champs de texte ajoutés au formulaire. Didacticiel sur la création d'une page d'insertion d'enregistrements 219 3 Dans le document, placez le point d'insertion dans la cellule du tableau située à droite de l'intitulé « State » ou « Country », puis insérez un champ de texte de l'une des manières suivantes : • Dans la barre Insertion, cliquez sur l'onglet Formulaires, puis cliquez sur le bouton Champ de texte (deuxième bouton en partant de la gauche) ou faites-le glisser depuis la barre Insertion jusqu'à la cellule du tableau. • Choisissez Insertion > Objets de formulaire > Champ de texte. Le champ de texte vient s'insérer dans le document. 4 Gardez le champ de texte sélectionné, puis reportez-vous à l'inspecteur de propriétés et saisissez state_country dans la zone de texte Nom et 30 dans la zone de texte Larg. de caract. 5 Dans le document, placez le point d'insertion dans la cellule du tableau située à droite du libellé « Region », puis insérez un objet de type liste ou menu de l'une des manières suivantes : • Dans la catégorie Formulaires de la barre Insertion, cliquez sur le bouton Liste/Menu ou faitesle glisser depuis la barre Insertion jusqu'à la cellule du tableau. • Choisissez Insertion > Objets de formulaire > Liste/Menu. L'objet de formulaire de type liste ou menu vient s'insérer dans le document. 6 Dans la zone de texte Nom de l'inspecteur de propriétés, saisissez region_id. Un objet de type liste ou menu définit automatiquement sa largeur de caractères par rapport à la longueur de son élément le plus long. Nous définirons les éléments de menu et les valeurs de ce champ un peu plus tard. 7 Insérez un champ de texte destiné à accueillir des numéros de téléphone puis, dans l'inspecteur de propriétés, attribuez-lui le nom Telephone et saisissez 30 dans la zone de texte Larg. de caract. 8 Insérez un champ de texte destiné à accueillir des numéros de fax puis, dans l'inspecteur de propriétés, attribuez-lui le nom Fax et saisissez 30 dans la zone de texte Larg. de caract. 220 Chapitre 19 9 Dans le document, placez le point d'insertion dans la dernière cellule du tableau. 10 Ajoutez un bouton d'envoi du formulaire en procédant de l'une des manières suivantes : • Dans la catégorie Formulaires de la barre Insertion, cliquez sur le bouton Bouton ou faites-le glisser depuis la barre Insertion jusqu'à la cellule du tableau. • Choisissez Insertion > Objets de formulaire > Bouton. Un bouton Envoyer vient s'insérer dans le document. Une étiquette est déjà attribuée au bouton et la zone Action est définie sur Envoyer le formulaire dans l'inspecteur de propriétés. 11 Répétez l'étape 10 pour ajouter un autre bouton au formulaire. Vous allez ajouter un bouton de réinitialisation pour permettre à l'utilisateur de rétablir les valeurs initiales du formulaire si nécessaire. 12 Dans la zone Action de l'inspecteur de propriétés, cliquez sur Rétablir le formulaire. Didacticiel sur la création d'une page d'insertion d'enregistrements 221 13 Dans la zone de texte Bouton, tapez Reset. Le formulaire est complet et doit ressembler à ceci : 14 Enregistrez votre document. Définition du champ de liste ou de menu Vous allez maintenant mettre à jour le champ de liste ou de menu en ajoutant les informations qui permettront à l'utilisateur de sélectionner le nom d'une région et de mettre à jour la base de données avec sa valeur numérique. Ceci évite à l'utilisateur d'avoir à vérifier le nombre correspondant au nom. 1 Dans le document, cliquez sur le champ de liste ou de menu region_id pour le sélectionner. L'inspecteur de propriétés est mis à jour à l'aide des informations sur l'objet. 2 Dans l'inspecteur de propriétés, cliquez sur le bouton Valeurs de la liste. La boîte de dialogue Liste/Menu s'affiche. 3 Dans la boîte de dialogue Valeurs de la liste, ajoutez des étiquettes d'éléments et des valeurs conformément aux données de la table REGIONS de la base de données. 4 Dans Etiquette de l'élément, tapez North America, appuyez sur Tab, et dans Valeur, tapez 1. 5 Cliquez sur le bouton plus (+) pour ajouter une autre entrée, puis tapez South/Central America, appuyez sur Tab, puis tapez 2. 222 Chapitre 19 6 Répétez les étapes 4 et 5 jusqu'à ce que vous ayez entré toutes les régions de la boîte de dialogue ci-dessous. 7 Cliquez sur OK pour fermer la boîte de dialogue. Définition d'un comportement de serveur Insérer un enregistrement Vous allez utiliser un comportement de serveur pour créer les scripts de serveur requis par l'application. Vous allez créer une connexion entre les données des champs de formulaire et celles de la base de données afin d'insérer dans la base de données les informations d'un formulaire rempli et validé à l'aide du bouton Envoyer. 1 Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton plus (+) et choisissez Insérer un enregistrement dans le menu contextuel. La boîte de dialogue Formulaire d'insertion d'enregistrement s'affiche. 2 Dans le menu déroulant Source de données (ColdFusion) ou Connexion (autres types de pages de serveur), choisissez connGlobal. Didacticiel sur la création d'une page d'insertion d'enregistrements 223 3 Dans le menu déroulant Insérer dans la table, sélectionnez LOCATIONS. La liste Colonnes est mise à jour à l'aide d'informations qui indiquent comment les champs de formulaire sont connectés aux champs de la base de données. 4 Veillez à ce que la valeur REGION_ID soit définie sur Numérique ou Entier (ASP.NET), cette valeur étant plutôt numérique que textuelle. 5 Dans le menu déroulant Après l'insertion, Aller à ou En cas de réussite, aller à (ASP.NET), cliquez sur Parcourir, puis sélectionnez le fichier LocationOK dans la boîte de dialogue qui apparaît et cliquez sur OK pour fermer la boîte de dialogue. 6 Cliquez sur OK pour fermer la boîte de dialogue Insérer un enregistrement. Le formulaire est mis à jour dans la fenêtre de document et le comportement Insérer un enregistrement figure à présent dans le panneau Comportements de serveur. 7 Enregistrez votre document. 224 Chapitre 19 Test de la page Vous allez à présent copier la page terminée sur le serveur, puis l'ouvrir dans un navigateur et y insérer des informations. 1 Dans le panneau Site, sélectionnez le document insertLocation, puis cliquez sur le bouton Placer le(s) fichier(s) (flèche bleue dirigée vers le haut) pour copier la version locale de ce document sur le serveur. Cliquez sur Oui lorsque le programme vous demande si vous souhaitez copier les fichiers dépendants. 2 Gardez le document insertLocation sélectionné dans la fenêtre de document, puis choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12 (Windows) afin de visualiser le document. 3 Saisissez des données de test dans le formulaire, puis cliquez sur le bouton Envoyer. La page locationOK s'affiche, indiquant que l'insertion des informations dans la base de données Global a réussi. 4 Pour visualiser l'entrée ajoutée à la base de données, procédez de la manière suivante : Dans le groupe de panneaux Application, sélectionnez le panneau Bases de données. Localisez la base de données connGlobal, puis cliquez sur le signe plus (+) pour la développer. Cliquez sur le signe plus (+) en regard de Tables pour afficher les tables de base de données. Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh), puis sélectionnez la table LOCATIONS et choisissez Afficher les données. Les enregistrements de base de données apparaissent ; le nouvel enregistrement correspond à la dernière entrée de la base de données. Etapes suivantes Ce didacticiel vous a appris à créer un formulaire d'insertion d'enregistrements dynamiques dans Dreamweaver. Pour plus d'informations sur les rubriques abordées dans ce didacticiel, voir les rubriques suivantes dans la documentation Utilisation de Dreamweaver MX ou l'aide de Dreamweaver : • • • • Création de formulaires interactifs Ajout d'un contenu dynamique à une page Web Création d'une page d'insertion d'enregistrements Définition des options de la boîte de dialogue Formulaire d'insertion d'enregistrement Didacticiel sur la création d'une page d'insertion d'enregistrements 225 226 Chapitre 19 INDEX Symboles ? dans les noms de champ 155 A Message d'erreur "access denied" 156 Access. Voir Microsoft Access Actifs, ajout à un site 25 Actualiser, bouton 43 Adresses IP 93 Adresses numériques 93 Affichage barre d'outils du document 35 images survolées 47 Affichage des données dynamiques dépannage 101, 111, 123, 134, 148 Agrandissement groupes de panneaux 16 inspecteur de propriétés 41 Aide de Dreamweaver 10 Aide-mémoire configuration ASP 116 configuration ASP.NET 105 configuration JSP 128 configuration PHP 140 définition ColdFusion 95 Ajout actifs à un site 25 styles au texte 37 texte à une page 35 Ajouter une feuille de style externe, boîte de dialogue 38 Ajustement de la mise en page 29 Ancrage et annulation d'ancrage des groupes de panneaux 16 Animation et pages « statiques » 63 Aperçu images survolées 47 présentation 48 Aperçu dans le navigateur dépannage de pages dynamiques 101, 111, 123, 134, 148 Apple. Voir Mac OS X Application, groupe de panneaux 75 Application, onglet de la barre Insertion 80, 82 Applications Web ASP, configuration 115 ASP.NET, configuration 105 ColdFusion, configuration 95 définition du terme 71 développement 73 JSP, configuration 127 PHP, configuration 139 présentation 61 utilisations courantes 62 Applications, Web. Voir Applications Web Appliquer l'extension automatique à certaines colonnes 34 ASP applications Web, configuration 115 dépannage 119 heure, affichage 118 serveurs d'application, installation 118 ASP.NET applications Web, configuration 105 ensemble de données 75 langages utilisés avec 68 plate-forme .NET 107 serveurs, pris en charge 107 Assistant de définition du site 20 Assistant, définition de site 20 Association de feuilles de style CSS 38 Attribution de nom aux fichiers 43 Attributs dans les indicateurs de code 58 informations de référence 57 Autorisations création et destruction de fichiers temporaires 153 227 dépannage 157 dossier contenant une base de données 154 sécurité 158 Autres ressources 50 B Balises côté serveur 65 indicateurs 58 modification 56 recherche d'informations de référence 57 sélecteur de balises 55 Barre d'outils du document affichage 35 affichage des données dynamiques 81 présentation 15 Barre Insertion 15 Application, onglet 80, 82 insertion de liens 59 Barres d'outils document 81 document, affichage 35 Barres de navigation copie 47 Base de connaissances Microsoft, articles 153 Bases de données à propos 69 affichage de données 65, 78 autorisations, modification 158 choix 67 connexion à (ASP) 124 connexion à (ASP.NET) 112 connexion à (ColdFusion) 102 connexion à (JSP) 135 connexion à (PHP) 148 emplacement des fichiers 154 enregistrements 65 noms de colonnes 155 pilotes, définition 69 pilotes, présentation 65 relationnelles 70 requêtes 65, 69 serveur 67 sur fichier 67 tables 65 utilisation avec des applications Web 62 verrouillés 152 Bases de données relationnelles, à propos 70 Boîtes de dialogue Ajouter une feuille de style externe 38 définition du style CSS 39 228 Index Nouveau document 26 Boutons sur les pages Web (survolées) 45 C C# (language) 68 Caractères incorrects dans les noms de comptes 154 Caractères spéciaux dans les noms de comptes SQL 154 noms de colonnes 155 point d'interrogation dans les noms de champ 155 Caractères, valides dans les noms de comptes 154 Cellules 34 couleurs d'arrière-plan 41 sélection 41 suppression 29 CFML (ColdFusion Markup Language) 68 Champs dynamiques 79 Champs de numérotation automatique, dépannage 156 Changement de nom des fichiers 43 Changer d'espace de travail, bouton 52 Choix balises 55 couleurs 41 fichiers source des images 40 technologies serveur 68 Choix d'une présentation de l'espace de travail 13 Codage manuel 14 Code création avec le sélecteur de balises 55 impression 60 Code et Création, modes 42 Code, mode affichage de fichiers texte 36 afficher les changements en mode Création 43 basculement 54 ColdFusion applications Web, configuration 95 installation 97 langages utilisés avec 68 messages d'erreur 156 ColdFusion Administrator 102 ColdFusion Markup Language (CFML) 67 ColdFusion Studio 14, 51 Collage texte 36 Colonnes colonnes à extension automatique dans les tableaux 34 noms de colonnes dans les bases de données 155 tableau, modification de la largeur 33 Comportements de serveur, panneau 80 Comptes IIS, autorisations 153 noms de comptes, dépannage 153 Comptes IUSR 153 Conception de pages prédéfinies 26 Conceptions de pages, prédéfinies 26 Configuration 11 ASP 115 ASP, aide-mémoire 116 ASP.NET 105 ASP.NET, aide-mémoire 105 ColdFusion 95 Dreamweaver 12 JSP 127 JSP, aide-mémoire 128 PHP 139 PHP, aide-mémoire 140 sites 19 systèmes avec ColdFusion MX 96 systèmes avec plate-forme .NET 106 systèmes avec serveur d'application ASP 117 systèmes avec serveur d'application JSP 129 systèmes avec serveur d'application PHP 141 Configuration requise 11 Connexion aux bases de données (ASP) 124 aux bases de données (ASP.NET) 112 aux bases de données (ColdFusion) 102 aux bases de données (JSP) 135 aux bases de données (PHP) 148 sites distants 49 Connexions de réseau local 49 Contenu, Voir texte, images, pages dynamiques Conventions typographiques 11 Conventions, typographiques 11 Copie barres de navigation 47 fichiers 43 fichiers et dossiers dans le panneau Site 53 texte 36 Couleurs d'arrière-plan, définition 41 Création dossiers racine (ASP) 120 dossiers racine (ASP.NET) 108 dossiers racine (ColdFusion) 98 dossiers racine (JSP) 131 dossiers racine (PHP) 144 feuilles de style CSS 37 fichiers temporaires 153 jeux d'enregistrements 75 pages 26 régions répétées 80 Création, mode 42 D Dates, dépannage 154 Définition ColdFusion, aide-mémoire 95 dossiers distants 100, 110, 122, 133, 146 styles CSS 39 Définition des couleurs d'arrière-plan 41 Dépannage accès refusé 156 affichage des données dynamiques 101, 111, 123, 134, 148 affichage des pages 144 ASP 119 autorisations 157 BOF 156 champ COUNT incorrect 155 ColdFusion 156 DSN 152 échec de la connexion 153 EOF 156 erreur de correspondance entre les types de données 154 erreurs d'ODBC 156 erreurs de syntaxe 155 fichier en cours d’utilisation 153 messages d’erreur Microsoft 151 ouverture des pages 91, 119 pages dynamiques, Aperçu dans le navigateur 101, 111, 123, 134, 148 paramètres, insuffisants 154 PHP 144 requêtes pouvant être mises à jour 154, 157 serveurs 89, 91 Déroulement du travail pour créer des sites statiques 19 Désinstallation de Dreamweaver 12 Destruction des fichiers temporaires, autorisations 153 Didacticiels 10 Disque, affichage dans le panneau Site 53 Documentation 10 Documentation PDF 10 Documents basculement entre 54 changement de nom 43 Index 229 duplication 43 enregistrement 28 fermeture 36 non enregistrés 40 Documents non enregistrés, insertion d'images 40 Données dynamiques, affichage 81 Données, dynamiques, insertion 79 Dossiers copie dans le panneau Site 53 racine 89 Dossiers distants définition 100, 110, 122, 133, 146 Dossiers locaux définition 99, 109, 121, 132, 145 Dossiers racine 89 création 98, 108, 120, 131, 144 définition 99, 109, 121, 132, 145 Voir aussi dossiers locaux Dreamweaver enregistrement 13 fonctionnalités 50 installation 12 menus 16 personnalisation 12 DSN (nom de la source de données), dépannage 152 DSN système 152 DSN utilisateur 152 Duplication de fichiers 43 E Echecs de la connexion 153 Editeurs de balises 55 Enregistrement dans Dreamweaver 13 Enregistrements 65 affichage 78 insertion 81 Ensembles de données (jeux d'enregistrements ASP.NET) 75 Erreurs d'ODBC 156 Erreurs de syntaxe dans les instructions d'insertion 155 Espace de travail, codage 51 Espace réservé pour l'image, insérer un élément de menu 32 Espaces dans les noms de colonnes 155 Espaces réservés images 32 images, remplacement 40 texte 28 Exemple de base de données connexion à 102, 103, 112, 113, 124, 125, 135, 148 230 Index Exemple de site, affichage 17 Exemples d'applications Web 62 Extension automatique, colonnes 34 Extraction de données des bases de données 65 F Fenêtre de bienvenue 15 Fenêtre de document 16 Fenêtres. Voir panneaux Fermeture de documents 36 Fichiers copie dans le panneau Site 53 téléchargement 86, 101, 111, 123, 134, 148 Fichiers de base de données verrouillés 152 Fichiers texte en mode Code 36 Fichiers, groupe de panneaux 74 Fonctionnalités de Dreamweaver 50 Formulaire d'insertion d'enregistrement, boîte de dialogue 82 Formulaires d'insertion d'enregistrement création 81 FTP (File Transfer Protocol) 49 G Glossaire de termes courants relatifs aux applications Web 69 Groupes de panneaux 16 Application 75 Fichiers 74 H Heure, affichage dans ASP 118 dans PHP 143 HomeSite 14, 51 HTML importation 36 langages de programmation intégrés 67 Voir aussi code HTML Microsoft Word, importation 36 Hyperliens. Voir liens I IIS 48, 68, 89 autorisations 153 installation 91 outils d'administration, démarrage 108 prise en charge ASP.NET 107 Images à l'extérieur d'un site 40 ajout 25 espacement 34 espaces réservés 32 fichier source, sélection 40 insertion 40 survolées 45 Images d'espacement 34 Importer HTML Word, commande 36 Impression, code 60 Indicateurs de code 58 Informations de référence 57 Insérer l'enregistrement, objet 81 Insertion images survolées 45 tableaux 78 texte dynamique 79 Inspecteur de balises 56 Inspecteur de propriétés 16 agrandissement 41 ouverture 41 Inspecteurs. Voir panneaux Installation ColdFusion MX 97 Dreamweaver 12 IIS 91 plate-forme .NET 107 serveurs d'application, ASP 118 serveurs d'application, JSP 130 serveurs d'application, PHP 142 serveurs Web 90 Interface utilisateur 13 Intranets 49 IPlanet Web Server 71 J Java 68 JavaScript 68 Jeux d'enregistrements création 75 définition 70 test 77 vide, dépannage 156 Voir aussi bases de données JRun 68 JSP applications Web, configuration 127 serveurs d'application, installation 130 L Langages de script côté serveur 68 Langages, côté serveur 67, 68 Largeur des colonnes, modification 33 Largeur, uniformisation 34 Liaisons, panneau 75 Liens création 45 graphiques 45 insertion 59 relatifs aux documents et à la racine 40 Liens graphiques 45 Liens relatifs à la racine 40 Liens relatifs aux documents 40 Localhost 92 M Macintosh configuration requise 11 environnement multiutilisateur Mac OS X 12 Mac OS X exécutant Apache et PHP 141 serveurs 89 Macromedia ColdFusion Studio 14 Macromedia HomeSite 14 Macromedia JRun 68 installation 130 MDI (Multiple Document Interface) 14 Menu Affichage 16 Menu Aide 16 Menu Commandes 16 Menu Fenêtre 16 Menu Fichier 16 Menu Insertion 16 Menu Modifier 16 Menu Site 16 Menu Texte 16 Menus 16 Menus contextuels 17 Messages d'erreur ColdFusion 156 Voir aussi Dépannage Messages d’erreur fichiers en course d’utilisation 153 Microsoft, dépannage 151 Microsoft Access 67 dépannage 151 fichiers de base de données verrouillés 152 Microsoft Internet Information Server (IIS). Voir IIS Microsoft Personal Web Server (PWS) 71, 89 Microsoft SQL Server 67 Mise en forme de texte 37 Mise en forme des pages 29 Mise en forme, mode, basculement 33 Mise en page Index 231 ajustement 29 Mises en page ajustement 29 mode Standard 34 Modèles 43 Modes Données dynamiques 81 Mise en forme 33 mode Code 42 mode Standard 34 Modification balises 56 couleurs d'arrière-plan 41 mises en page 29 propriétés de la page 35 styles 38 Mots de passe, incorrects 153 Mots réservés 155 Multiple Document Interface (MDI) 14 MySQL 67 téléchargement 148 N Navigateur de fichiers dans le panneau Site 53 Navigateurs différences entre 48 Netscape Enterprise Server 71 Noms de colonnes 155 Nouveau document, boîte de dialogue 26 feuille de style CSS, création 37 NT. Voir Windows NT Numéro IP 127.0.0.1 93 O Option Pack, Windows NT 4.0 90 Oracle 9i 67 Outils 50 Ouverture de l'inspecteur de propriétés 41 P Pages affichage de données des bases de données 65 création 26 dynamiques 61 dynamiques, création 67 dynamiques, traitement 64 insertion d'enregistrement 81 mise en page 26 mises en page 29 prédéfinies 26 232 Index propriétés, paramétrage 35 statiques 63 Pages ASP (Active Server Pages). Voir A Pages dynamiques à propos 69 création 67 traitement 64, 100, 110, 122, 133, 147 Pages JavaServer (JSP) 68 Pages statiques 63 Pages statiques, à propos 70 Panneau Site copie de fichiers et de dossiers 53 navigateur de fichiers 53 Panneaux Comportements de serveur, panneau 80 descriptions 15 inspecteur de propriétés 41 liaisons, panneau 75 Site, panneau 74 Styles CSS, panneau 38 Paramétrage propriétés de la page 35 Paramètres, insuffisants 154 Personal Web Manager 92 démarrage 98, 120, 131, 144 Personnalisation Dreamweaver 12 PHP 68 applications Web, configuration 139 dépannage 144 heure, affichage 143 Mac OS X 141 serveurs d'application, installation 142 Pilotes bases de données 65, 69 non spécifiés 152 Placer les fichiers, bouton 50, 86 Plate-forme .NET installation 107 Plate-forme.NET 68 Poignée d'ancrage, utilisation pour faire glisser un groupe de panneaux 16 Pointer vers un fichier, icône 40 Pointeur pipette 41 Pointeurs, pipette 41 Points d'interrogation 155 Préférences générales 52 Préférences, boîte de dialogue Général, catégorie 52 indicateurs de code, catégorie 58 Préfixe d'URL, option 101, 111, 123, 134, 147 Présentation des menus 16 Présentation de l'espace de travail Dreamweaver 4 14 Présentation de l'espace de travail flottant 14 Présentation de l'espace de travail intégré 14 Présentations de l'espace de travail choix 13 codage 51 Projets (terme HomeSite et ColdFusion Studio). Voir Sites Propriétés de la page paramétrage 35 Publication 48 PWS 71, 89 installation 90 prise en charge ASP.NET 107 R Référence, panneau 57 Régions répétées 80 Régions répétées, création 80 Requêtes 69 base de données 65 dépannage 154 pouvant être mises à jour 157 relations 154 test 77 Ressources apprentissage de Dreamweaver 10 pour l'apprentissage de Dreamweaver 50 S Scripts côté serveur 65 Sécurité et autorisations 158 Sélecteur de balises 30, 55 Sélecteur de couleur 41 Sélection fichier source des images 40 Sélection d'une présentation de l'espace de travail 13 Sélection de cellules 41 Sélection de couleurs 41 Sélection de texte 36 Serveur ColdFusion MX Developer Edition 97 Serveur d'application Apache Tomcat 69 Serveur d'application Tomcat 69 Serveur d'application WebSphere d'IBM 69 Serveur HTTP. Voir Serveurs Serveur Web Apache sur Mac OS X 89 Serveur, modèles Voir Serveur, technologies Serveur, technologies définition 70 Serveurs adresses IP 93 choix 90 configuration 89 dépannage 91 dossiers racine 100, 110, 122, 133, 146 évaluation 91 HTTP 92 installation 90 notions de base 92 prise en charge ASP.NET 107 serveurs d'application 64 serveurs Web, définis 63 téléchargement de fichiers 101, 111, 123, 134, 148 Windows Me 89 Voir aussi Serveur Web, serveurs d'application Serveurs d'application à propos 69 ColdFusion MX, installation 97 PHP, installation 142 pour ASP, installation 118 pour JSP, installation 130 présentation 64 plate-forme .NET (ASP.NET), installation 107 Serveurs d'évaluation 91 spécification 100, 110, 122, 133, 147 Serveurs Web 48 définis 63 définition 71 vérification 97, 107, 118, 130, 142 Voir aussi serveurs, serveurs d'application Serveurs Web distants 48 SGBD (système de gestion de bases de données) 69 Site, panneau 16, 74 Sites à propos 20 actifs, ajout 25 configuration 19 définition 98, 108, 120, 131, 145 définitions 20 distants 48 fichiers à l'extérieur de 53 sélection dans le panneau Site 53 statiques, création 19 Sites distants 48 à propos 20 Index 233 connexion 49 Sites locaux à propos 20 configuration 19 Sites statiques, création 19 Source de données, nom. Voir DSN Sources de données ColdFusion 102 Spécification serveurs d'évaluation 100, 110, 122, 133, 147 SQL 65 SQL (Structured Query Language) 65 SQL Server dépannage 151 pages dynamiques, dépannage 153 Standard, mode 34 Structured Query Language (SQL) 65 Styles CSS, panneau 38 Styles, CSS 38 Support technique 151 serveurs 89 Suppression cellules de tableaux 29 Survolées, images affichage et aperçu 47 création 45 Système d'aide 10 Systèmes configuration 96, 106, 117, 129, 141 Systèmes d'exploitation multiutilisateurs 12 Systèmes d'exploitation multiutilisateurs 12 Systèmes d'exploitation, configuration 11 Systèmes de fichiers FAT 158 Systèmes de fichiers NTFS 158 Systèmes de gestion de bases de données 69 choix 68 Téléchargement 48, 86 Téléchargement de fichiers 101, 111, 123, 134, 148 Termes courants, définitions 69 Terminologie 69 Tester la connexion, bouton 49 Texte ajout 35 dynamique 79 espace réservé 35 formatage 37 sélection 36 styles, application 38 texte de l'espace réservé 28 Texte de l'espace réservé 28 Texte dynamique, insertion 79 Titres,paramétrage de la page 35 Traduction des données de bases de données 65 Traits de soulignement dans les noms de comptes SQL 154 Types de données, erreur de correspondance 154, 156 T W Tableaux cellules, couleurs d'arrière-plan 41 cellules, suppression 29 colonnes, extension automatique 34 colonnes, modification de la largeur 33 insertion 78 Mise en forme, mode 33 mode Standard 34 Tableaux de Mise en forme 33 Tables base de données 65 Technologies serveur 68 WebSphere 69 Windows 11, 12 Windows Me, serveurs 89 Windows NT 4.0 Option Pack 90 Windows 2000, valeurs du délai d'attente 153 234 Index U UNC 158 Uniformiser les largeurs de cellule, commande 34 URL, relatives aux documents et à la racine 40 Utilisation de Dreamweaver guide de l'utilisateur 10 V Valeurs du délai d'attente, Windows 2000 153 Variables en langage CFML 67 VBScript 68 Vérification fonctionnement du serveur Web 97, 107, 118, 130, 142 Visual Basic 68 ">
公開リンクが更新されました
あなたのチャットの公開リンクが更新されました。