How it Works
ADOBE
Loading...
A
B
C
Loading...
Loading...
Bien démarrer avec Dreamweaver MX
User Manual [fr]
234 pgs4.64 Mb0
Table of contents
Loading...

ADOBE Bien démarrer avec Dreamweaver MX User Manual [fr]

™
Bien démarrer avec
Dreamweaver MX
macromedia
®
Marques commerciales
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 INFORMA­TIQUE 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 SPECI­FIQUES. 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
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
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
Table des matières4
CHAPITRE 9
Configuration d'un site ASP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Configuration de la liste de contrôle des développeurs ASP . . . . . . . . . . . . . . . . . . . . . 116
Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Connexion à l'exemple de base de données (configuration locale) . . . . . . . . . . . . . . . . 124
Connexion à l'exemple de base de données (configuration avec un serveur distant) . . . 125
CHAPITRE 10
Configuration d'un exemple de site JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Configuration de la liste de contrôle pour les développeurs JSP. . . . . . . . . . . . . . . . . . 128
Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Connexion à l'exemple de base de données (configuration locale) . . . . . . . . . . . . . . . . 135
Connexion à l'exemple de base de données (configuration avec un serveur distant) . . . 137
CHAPITRE 11
Configuration d'un exemple de site PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Configuration de la liste de contrôle des développeurs PHP . . . . . . . . . . . . . . . . . . . . 140
Configuration du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Définition d'un site Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Connexion à l'exemple de base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
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
. 163
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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Table des matières6

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 »
Partie I
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.
Chapitre 110
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.
Chapitre 112
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.
Chapitre 114
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
Groupes de panneaux
Inspecteur de propriétés
Sélecteur de balises
La fenêtre Bienvenue fournit des conseils de configuration de l'espace de travail selon les besoins,
Panneau Site
ainsi que des informations sur les nouvelles fonctionnalités de Dreamweaver à l'attention des utilisateurs des versions précédentes du logiciel.
La barre Insertion 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 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
L'inspecteur de propriétés permet de visualiser et de modifier diverses propriétés de l'objet ou du
affiche le document que vous créez et modifiez.
texte sélectionné. Chaque objet contient des propriétés différentes.
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.
Chapitre 116
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
Chapitre 118
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.
Chapitre 220
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.
Chapitre 222
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).
Chapitre 224
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.
Chapitre 226
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 ».
Chapitre 228

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
3 Appuyez sur RET. ARR (Windows) ou Arrière (Macintosh) pour supprimer la table contenant
<body> dans l'espace de travail flottant, élargissez la fenêtre de document.
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 gauche.
<table> la plus à
Pour supprimer la boîte superflue de l'en-tête de l'encadré :
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 230
Loading...
+ 204 hidden pages
Buy Points How it Works FAQ Contact Us Questions and Suggestions Privacy Policy Cookie Policy Terms of Use