Manuel du propriétaire | MACROMEDIA DREAMWEAVER 2-UTILISATION DE DREAMWEAVER Manuel utilisateur

macromedia
®
™
DREAMWEAVER 2
Utilisation de Dreamweaver
Marques
Macromedia, le logoMacromedia logo, le logo Made With Macromedia, Authorware, Backstage, Director, Extreme 3D et Fontographer
sont des marques déposées, et Afterburner, AppletAce, Authorware Interactive Studio, Backstage, Backstage Designer, Backstage Desktop
Studio, Backstage Enterprise Studio, Backstage Internet Studio, DECK II, Director Multimedia Studio, Doc Around the Clock, Extreme
3D, Flash, FreeHand, FreeHand Graphics Studio, Lingo, Macromedia xRes, MAGIC, Power Applets, Priority Access, SoundEdit,
Shockwave, Showcase, Tools to Power Your Ideas et Xtra sont des marques commerciales de Macromedia, Inc. D’autres noms de produit,
logos, dessins, 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 éventuellement enregistrés dans certaines juridictions.
Exonération de responsabilité d'Apple
APPLE COMPUTER, INC. N'OFFRE AUCUNE GARANTIE, EXPRESSE OU TACITE, CONCERNANT LE LOT DE
LOGICIELS INFORMATIQUES CI-JOINT, SA COMMERCIALITÉ NI SON ADÉQUATION À UNE TÂCHE PARTICULIÈRE. L'EXCLUSION DE GARANTIES IMPLICITES ÉTANT ILLICITE DANS CERTAINS ÉTATS, IL SE PEUT QUE LA
CLAUSE D'EXCLUSION CI-DESSUS NE VOUS SOIT PAS APPLICABLE. CETTE GARANTIE VOUS CONFÈRE CERTAINS
DROITS JURIDIQUES. IL SE PEUT ÉGALEMENT QUE VOUS DISPOSIEZ D'AUTRES DROITS EN FONCTION DE
L'ÉTAT OÙ VOUS RÉSIDEZ.
Copyright © 1998 Macromedia, Inc. Tous droits réservés. Les pages de ce manuel ne peuvent pas être copiées, photocopiées,
reproduites, traduites ni publiées, fût-ce partiellement, sous quelque forme électronique ou informatique que ce soit, sans le
consentement écrit préalable de Macromedia, Inc. Part Number ZDW20M100F
Remerciements
Gestion du projet et architecture du contenu : Sheila McGinn
Rédaction : Lori Hylan, Corinne Chandel, Denise Lee, Erica Edmonds et Sheila McGinn
Conception multimédia : James Khazar
Production multimédia : John “Zippy” Lehnus et Pat Knoff
Ingénierie de l’aide : Lori Hylan
Conception du site didacticiel : Akimbo Design
Ingénierie Java : Eric Harshbarger
Édition : Judy Walthers von Alten et Judy Ziajka
Gestion de production : Gemma Londono
Conception de l’impression et de aide : Noah Zilberberg
Production : Noah Zilberberg et Paul Benkman
Directeur de localisation : Kristin Conradi
Nous remercions en particulier Margaret Dumas, Paul Madar, Heidi Bauer, nj, Mike Sundermeyer, Jean Fitzgerald, David George,
Karen Olsen-Dunn, Peter Fenczik, Karen Catlin, Victor Grigorieff, Scott Richards, Peter von dem Hagen, Keiko Higuchi, Hisami Scott,
David Lenoe, Sophie Rollins, Arati Rajesh, Harald Mehlem, Bastian Stein, Sabine Rusam-Hathaway, Gwenhaël Jacq, Richard Verdoni et
Rubric, Inc.
Première édition : décember 1998
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
2
SOMMAIRE
CHAPITRE 1
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Nouveautés de Dreamweaver 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Configuration système requise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Installation de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Guide pour les médias d'instructions. . . . . . . . . . . . . . . . . . . . . . . . . . .13
CHAPITRE 2
Didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Didacticiel – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Définition d'un site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Modification de la page d'accueil d'Olivebranch . . . . . . . . . . . . . . . . . .23
Création d'une mise en page complexe . . . . . . . . . . . . . . . . . . . . . . . . .33
Edition d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Mise en forme de texte avec des styles personnalisés . . . . . . . . . . . . . . .49
Application d'un modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51
Association de comportements à des éléments de page. . . . . . . . . . . . . .61
Ajout d'une séquence vidéo flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
Vérification du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66
CHAPITRE 3
Prise en main . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Prise en main – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67
Paramétrage des préférences. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
Utilisation de Dreamweaver avec d'autres applications . . . . . . . . . . . . .75
3
CHAPITRE 4
Création de documents . . . . . . . . . . . . . . . . . . . . . . . . . 77
Création de documents – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . .77
Création de nouveaux documents HTML. . . . . . . . . . . . . . . . . . . . . . .78
Utilisation de guides visuels pour la conception. . . . . . . . . . . . . . . . . . .79
Ajout de texte et insertion d'objets . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Sélection d'éléments dans la fenêtre Document . . . . . . . . . . . . . . . . . . .84
Configuration de documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86
Choix de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Affichage et édition du contenu de l'EN-TÊTE . . . . . . . . . . . . . . . . . .90
CHAPITRE 5
Utilisation des modèles . . . . . . . . . . . . . . . . . . . . . . . . . 91
Modèles – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Création des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Importation et exportation de contenu XML . . . . . . . . . . . . . . . . . . .102
CHAPITRE 6
Planification du site. . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Planification du site – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . .105
Création d'un site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106
Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Affichage de fichier dans une fenêtre Site. . . . . . . . . . . . . . . . . . . . . . .115
Travail avec les fichiers du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117
Création de cartes de site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
CHAPITRE 7
Gestion de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Gestion de site – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . . . . . .127
Définition d'un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128
Options de la fenêtre Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Utilisation du système d'archivage et d'extraction de fichiers . . . . . . . .133
Recherche et remplacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137
Gestion des liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145
Test du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147
4
Sommaire
CHAPITRE 8
Utilisation de Roundtrip HTML. . . . . . . . . . . . . . . . . 153
Roundtrip – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Utilisation de l'inspecteur HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . .154
Définition de contrôles de format source HTML . . . . . . . . . . . . . . . .155
Nettoyage de documents HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . .159
Correction du code non valide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
Utilisation d'autres éditeurs HTML . . . . . . . . . . . . . . . . . . . . . . . . . .161
Insertion de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164
Insertion de commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165
CHAPITRE 9
Formatage du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Formatage du texte – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . . .167
Formatage du texte avec les balises HTML . . . . . . . . . . . . . . . . . . . . .168
Création de listes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173
Formatage du texte avec des feuilles de style . . . . . . . . . . . . . . . . . . . .174
Conversion des styles CSS en code HTML . . . . . . . . . . . . . . . . . . . . .182
Vérification de l'orthographe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184
CHAPITRE 10
Insertion d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Insertion d'images – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . . . . .185
Insertion d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Création d'un effet de survol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187
Configuration des propriétés d’image . . . . . . . . . . . . . . . . . . . . . . . . .188
Utilisation d'un éditeur d'image externe . . . . . . . . . . . . . . . . . . . . . . .192
Création de cartes graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
CHAPITRE 11
Création de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Création de tableaux – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . .195
Création de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196
Formatage de tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200
Tri de tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205
Redimensionnement des tableaux et cellules . . . . . . . . . . . . . . . . . . . .206
Ajout et retrait de lignes et de colonnes . . . . . . . . . . . . . . . . . . . . . . . .207
Copie et collage de cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210
Sommaire
5
CHAPITRE 12
Utilisation des calques . . . . . . . . . . . . . . . . . . . . . . . . . 213
Utilisation des calques – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . . .213
Création de calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
Utilisation de la palette de calques. . . . . . . . . . . . . . . . . . . . . . . . . . . .220
Manipulation des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220
Déplacement des calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223
Modification de l'ordre de superposition des calques . . . . . . . . . . . . . .225
Modification de la visibilité des calques . . . . . . . . . . . . . . . . . . . . . . . .225
Utilisation des calques pour concevoir des tableaux . . . . . . . . . . . . . . .226
Conversion des navigateurs de 3.0 à 4.0 . . . . . . . . . . . . . . . . . . . . . . .229
CHAPITRE 13
Utilisation de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Utilisation de cadres – Vue d’ensemble . . . . . . . . . . . . . . . . . . . . . . . .231
Création de cadres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232
Sélection d’un cadre ou jeu de cadres. . . . . . . . . . . . . . . . . . . . . . . . . .233
À propos des propriétés de cadre et jeu de cadre . . . . . . . . . . . . . . . . .235
Contrôle du contenu d'un cadre au moyen de liens. . . . . . . . . . . . . . .239
Création de contenu sans cadre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240
CHAPITRE 14
Création de formulaires . . . . . . . . . . . . . . . . . . . . . . . . 241
Création de formulaires – Vue d’ensemble. . . . . . . . . . . . . . . . . . . . . .241
Création d'un formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242
Ajout d'un objet à un formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . .243
Traitement des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244
CHAPITRE 15
Réutilisation des éléments d’une page . . . . . . . . . 247
Réutilisation des éléments d'une page – Vue d’ensemble . . . . . . . . . . .247
Utilisation des éléments de la bibliothèque . . . . . . . . . . . . . . . . . . . . .248
Utilisation des insertions côté serveur . . . . . . . . . . . . . . . . . . . . . . . . .253
6
Sommaire
CHAPITRE 16
Ajout d’interactivité et d’animation. . . . . . . . . . . . . 257
Ajout d’interactivité et d’animation – Vue d'ensemble. . . . . . . . . . . . .257
Présentation des comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258
Utilisation des comportements livrés avec Dreamweaver . . . . . . . . . . .263
Animation avec HTML dynamique . . . . . . . . . . . . . . . . . . . . . . . . . .286
Ajout d'animations, d'appliquettes et d'autres éléments multimédia . .296
CHAPITRE 17
Personnalisation de Dreamweaver . . . . . . . . . . . . 307
Personnalisation de Dreamweaver – Vue d’ensemble . . . . . . . . . . . . . .307
Modifier la palette d’objets et le menu Insertion . . . . . . . . . . . . . . . . .308
Modifier le profil du formatage de la source HTML . . . . . . . . . . . . . .310
Créer et modifier les profils de navigateur . . . . . . . . . . . . . . . . . . . . . .311
ANNEXE A
Raccourcis clavier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Menu Fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315
Menu Édition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316
Éditer du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316
Formater du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317
Rechercher et remplacer du texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Travailler avec des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Travailler avec des cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319
Travailler avec des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319
Travailler avec des scénarios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320
Travailler avec des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320
Gérer les hyperliens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321
Cibler et visualiser dans les navigateurs . . . . . . . . . . . . . . . . . . . . . . . .321
Gestion de site et FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322
Carte du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Lecture des plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Affichage des éléments de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Travailler avec des modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324
Insérer des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324
Ouvrir et fermer des palettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324
Obtenir de l'aide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Sommaire
7
8
Sommaire
1
CHAPITRE 1
Introduction
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de
pages web. Avec Dreamweaver, il est facile de créer des pages s’affichant
correctement sur différents types de plates-formes et de navigateurs. La
technologie Roundtrip HTML™ de Macromedia importe des documents
HTML sans reformater le code.
Dreamweaver rend également possible l'utilisation des fonctions HTML
dynamique, telles que les calques animés et les comportements, sans avoir à écrire
de ligne de code. La vérification ciblée sur le navigateur est là pour assurer que
votre travail s’affiche sans problème sur toutes les plates-formes et tous les
navigateurs.
9
Nouveautés de Dreamweaver 2
Dreamweaver 2 offre plusieurs fonctions qui améliorent votre productivité au
cours du développement d'un site web.
Édition de contenu dynamique Facilite et accélère la mise en place et l'accès à votre
contenu sur le web.
Utilisez les modèles pour séparer le contenu de la création graphique,
permettant ainsi une diffusion plus rapide sur le web. Voir Modèles – Vue
d’ensemble, page 91.
Affichez les insertions côté serveur directement dans la fenêtre de document.
Voir Utilisation des insertions côté serveur, page 253.
Éditon au niveau du site
Vous aide à gérer des sites importants.
Créez une carte visuelle et hiérarchique du site ; utile pour présenter
visuellement vos idées à vos clients, ainsi que pour gérer la structure du site.
Voir Création de cartes de site, page 118.
Pour créer des liens, faites glisser les fichiers, ou pointez simplement vers les
fichiers. Voir Création de liens, page 107.
Utilisez les outils de gestion de liens pour les mettre à jour au fur et à mesure
que vous déplacez, renommez et supprimez les fichiers. Voir Gestion des liens,
page 145.
Rechercher plusieurs fichiers au niveau du site et effectuez un remplacement
global sur votre site.
Profitez des avantages de la fonction de recherche-remplacement compatible
HTML pour localiser des balises et des attributs HTML. Vous pouvez
également utiliser des expressions standard pour rendre vos recherches encore
plus puissantes. Voir Recherche et remplacement, page 137.
Vous permet de faire participer vos
concepteurs graphiques au processus de développement du site.
Outils pour les concepteurs graphiques
10
Chapitre 1
Utilisez les calques pour la conception de pages complexes et précises en
nombre de pixels, puis convertissez-les en tableaux pour créer des pages
fonctionnant dans tous les navigateurs. Voir Utilisation des calques pour
concevoir des tableaux, page 226.
Choisissez une couleur n'importe où sur le bureau, et grâce à la palette adaptée
au web, placez-la sur la couleur adaptée au web la plus rapprochée. Voir Choix
de couleurs, page 88.
Utilisez un tracé d'image pour concevoir rapidement des pages à partir de la
maquette d'un concepteur. Voir Utilisation du tracé de l'image, page 81.
Édition de tableau améliorée
Facilite la création de tableaux HTML élégants.
Coupez, copiez et collez des cellules, des lignes et des colonnes multiples
aisément. Voir Copie et collage de cellules, page 210.
Sélectionnez plusieurs cellules d'un tableau et modifiez leurs propriétés
facilement. Voir Sélection d'éléments de tableau, page 198.
Fractionnez n'importe quelle cellule de tableau en plusieurs cellules. Voir
Fractionnement et fusion de cellules, page 208.
Formatez rapidement les tableaux avec des conceptions graphiques prédéfinies.
Voir Formatage d'un tableau à l'aide d'une mise en forme prédéfinie, page 204.
Triez les tableaux par ordre numérique et alphabétique, par colonne ou par
ligne. Voir Tri de tableaux, page 205.
Fonctions de productivité améliorées
Vous permet de travailler plus
intelligemment et plus rapidement.
Personnalisez votre espace de travail en combinant les palettes et les
inspecteurs en une unique palette à onglets. Voir Utilisation des palettes
flottantes ancrables, page 72.
Redimensionnez la fenêtre de document instantanément, pour prédéfinir ou
personnaliser les dimensions. Voir Redimensionnement de la fenêtre Document,
page 80.
Utilisez les menus de raccourci pour accéder rapidement aux commandes que
vous utilisez le plus souvent. Voir Utilisation des menus contextuels, page 71.
Affichez et manipulez le contenu de la section HEAD dans la fenêtre de
document. Voir Affichage et édition du contenu de l'EN-TÊTE, page 90.
Exécutez les plug-ins directement dans la fenêtre de document de
Dreamweaver. Voir Lecture du plug-in dans la fenêtre du document, page 301.
Vous permet de personnaliser et d'étendre
Dreamweaver pour qu'il corresponde à votre façon de travailler. Voir Extending
Dreamweaver overview.
Un environnement extensible
Utilisez les commandes pour modifier le document courant, par exemple pour
trier un tableau ou nettoyer votre code source HTML.
Écrivez vos propres commandes comme s'il s'agissait d'objets ou d'actions.
Donnez une représentation visuelle aux balises personnalisées dans la fenêtre
de document et créez des inspecteurs de propriétés pour définir rapidement
leurs propriétés.
Écrivez vos propres traducteurs de données pour afficher les résultats de
traitement du serveur dans la fenêtre de document.
Introduction
11
Configuration système requise
Le matériel et les logiciels suivants sont requis pour l'exécution de Dreamweaver :
Pour Microsoft Windows™ :
Processeur Intel Pentium® 90 ou équivalent tournant sous Windows 95,
Windows 98 ou Windows NT version 4.0 ou plus récente.
16 Mo de mémoire vive (RAM) plus 20 Mo d'espace disque disponible.
Moniteur couleur capable d'une résolution de 800 x 600 pixels.
Lecteur CD-ROM.
Pour Macintosh® :
Power Macintosh sous MacOS 7.5.5 ou supérieur.
24 Mo de RAM plus 20 Mo d'espace disque disponible.
Moniteur couleur capable d'une résolution de 800 x 600 pixels.
Lecteur CD-ROM.
Installation de Dreamweaver
Suivez les étapes suivantes pour installer Dreamweaver sur un ordinateur
Windows ou Macintosh.
Pour installer Dreamweaver :
12
Chapitre 1
1
Insérez le CD de Dreamweaver dans le lecteur de CD-ROM.
2
Choisissez une des options suivantes :
Sous Windows, choisissez Démarrer > Exécuter. Cliquez ensuite sur Parcourir
et choisissez le fichier Setup.exe sur le CD de Dreamweaver. Cliquez sur OK
dans la boîte de dialogue Exécuter pour commencer l'installation.
Sur le Macintosh, double-cliquez sur l'icône Installation de Dreamweaver.
3
Suivez les instructions affichées à l'écran.
4
Redémarrez votre ordinateur si nécessaire.
Guide pour les médias d'instructions
Le kit Dreamweaver contient toutes sortes de médias pour vous aider à apprendre
le programme rapidement et à devenir compétent dans la création de pages Web :
pages d'aide HTML en ligne qui apparaissent dans votre navigateur, animations
Montrez-moi, un didacticiel, un manuel imprimé et un site web régulièrement
mis à jour.
Didacticiel de Dreamweaver
Le didacticiel de Dreamweaver est idéal pour commencer, si votre expérience en
matière de création de sites web est minimale. Ce didacticiel vous montre
comment éditer un modèle de site web à l'aide de quelques-unes des fonctions les
plus utiles et les plus puissantes de Dreamweaver. Vous le trouverez à la fois dans
l'Aide de Dreamweaver et dans le manuel Utilisation de Dreamweaver.
Visite guidée et animations Montrez-moi
La visite guidée et les animations Montrez-moi dans les pages d’aide HTML sont
une introduction animée des fonctions-clés. La visite guidée inclut toutes les
animations Montrez-moi en séquence. Vous pouvez également voir les animations
Montrez-moi individuellement dans leur section de présentation respective.
Cette icône indique qu'une rubrique contient une animation Montrez-moi.
Les animations Montrez-moi nécessitent le plug-in Shockwave Director, qui est
inclus sur le CD de Dreamweaver. Si vous avez acheté votre copie de
Dreamweaver électroniquement, vous pouvez télécharger plug-in de Shockwave le
plus récent à partir du site web de Macromedia à
http://www.macromedia.com/shockwave/download/.
Dreamweaver HTML Help Pages™
Dreamweaver HTML Help Pages™ fournit des informations détaillées sur toutes
les fonctions de Dreamweaver. Pour enrichir votre expérience, nous vous
recommandons vivement d'utiliser l'un de ces navigateurs :
Sous Windows, nous vous recommandons Netscape Navigator 4.0 ou plus
récent ou Microsoft Internet Explorer 4.0 ou plus récent.
Sur Macintosh, nous vous recommandons Netscape Navigator 4.0 et plus
récent (Internet Explorer pour Macintosh n'est pas recommandé car il ne peut
pas jouer les animations Montrez-moi).
Si vous utilisez un navigateur 3.0, tout le contenu sera disponible, mais certaines
fonctions, (telles que Rechercher) ne fonctionneront pas.
Introduction
13
Les pages d'aide HTML de Dreamweaver utilisent JavaScript à outrance. Assurezvous que JavaScript est activé dans votre navigateur. Si vous prévoyez d'utiliser la
fonction Rechercher, assurez-vous aussi que Java est activé.
Utilisez la table des matières pour consulter toutes les
informations organisées par sujet. Cliquez sur les entrées principales pour afficher
les sous-rubriques.
Table des matières
Index Utilisez l'index comme un index imprimé, pour trouver des termes
importants et vous rendre aux rubriques associées.
Utilisez Rechercher pour trouver une chaîne de caractères dans tout le
texte de la rubrique. La fonction de recherche nécessite un navigateur 4.0 avec
Java activé.
Rechercher
Pour rechercher une phrase, il vous suffit de la taper dans la zone de texte.
Pour rechercher des fichiers contenant deux mots-clés, (par exemple, calques et
styles), séparez les termes de la recherche par un signe plus (+).
Cliquez sur le bouton d'aide de n'importe quelle boîte de
dialogue ou sur le point d'interrogation des inspecteurs, des fenêtres et des palettes
pour ouvrir la rubrique d'aide correspondante.
Liens contextuels
Cliquez ici pour ouvrir l'Aide
14
Chapitre 1
Barre de navigation Utilisez les boutons de la barre de navigation pour vous
déplacer dans les rubriques.
Retour et Avance fonctionnent comme les boutons Précédente et Suivante du
navigateur, vous ramenant ainsi à des rubriques que vous venez de consulter.
Précédente et Suivante appellent la rubrique précédente ou suivante d'une
section (suivant l'ordre des rubriques listées dans la tables des matières).
Nouveautés lie au centre de développement de Dreamweaver sur le site web de
Macromedia.
Centre de développement de Dreamweaver
Le site web du centre de développement de Dreamweaver est régulièrement mis à
jour avec les dernières informations sur Dreamweaver, et contient également des
conseils d'experts, des informations sur les rubriques de pointe, des exemples, des
conseils et des mises à niveau. Vérifiez souvent ce site pour obtenir les dernières
nouvelles sur Dreamweaver et pour apprendre comment mieux utiliser ce
programme à l'adresse
http://www.macromedia.com/support/dreamweaver/.
Utilisation de Dreamweaver
Le manuel Utilisation de Dreamweaver vous présente le programme de
Dreamweaver et contient une version condensée de l'Aide de Dreamweaver, sans
certaines informations de référence sur les options du programme.
Introduction
15
16
Chapitre 1
2
CHAPITRE 2
Didacticiel
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Didacticiel – Vue d’ensemble
Ce didacticiel explique comment utiliser Dreamweaver pour modifier et mettre à
jour un site web.
Dans le cadre de ce didacticiel, vous allez modifier le site web d'une société fictive,
Olivebranch Gourmet Foods, exploitation agricole qui commercialise des produits
alimentaires pour gourmets.
Lorsqu'ils visitent le site web d'Olivebranch, les clients peuvent lire une
présentation des spécialités du jour et parcourir le catalogue en ligne des vins,
fromages, huiles et autres condiments. Ils ont également la possibilité de
s'informer sur Olivebranch et les événements que cette société parraine.
17
Vous allez apprendre à accomplir les tâches suivantes :
Affichage des pages dans un navigateur
Définition d'un site local
Définition des propriétés d'une page telles que l'arrière-plan et les couleurs des
liens
Création d'une carte du site
Création de liens
Création d'une mise en forme à l'aide de calques, et conversion de ceux-ci en
tableaux
Utilisation d'un nouveau tracé de l'image
Edition d'un tableau
Mise en forme du texte à l'aide de styles
Application d'un modèle
Liaison de comportements
Insertion d'une séquence vidéo flash
Remarque: Ce didacticiel montre certaines fonctions prises en charge uniquement par les
navigateurs de version 4.0 ou ultérieure.
Visite guidée de Dreamweaver
Avant de commencer, regardez les séquences vidéo de la visite guidée figurant dans
les pages d'aide afin de vous familiariser avec les fonctions de Dreamweaver.
Pour afficher les séquences vidéo :
18
Chapitre 2
1
Dans Dreamweaver, choisissez Aide > Rubriques d'aide de Dreamweaver.
2
Dans le cadre de gauche de la liste du sommaire, cliquez sur Introduction, puis
sur Visite guidée de Dreamweaver.
3
Cliquez sur Afficher pour assister à la visite guidée.
4
Fermez le navigateur lorsque vous avez terminé.
Affichage du site web achevé
Consultez ensuite le site web achevé pour vous faire une idée de ce vers quoi vous
allez.
Pour afficher le site Olivebranch achevé :
1
Dans Dreamweaver, choisissez Fichier > Ouvrir. Naviguez jusqu'au répertoire
de l'application Dreamweaver, puis ouvrez successivement les répertoires
Tutorial et Olivebranch_site.
2
Dans Olivebranch_site, cliquez sur le fichier index.htm pour ouvrir la page
d'accueil d'Olivebranch dans la fenêtre Document.
Ne modifiez pas cette page car elle est déjà terminée. Vous allez en modifier
une autre version.
3
Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur
pour afficher la page d'accueil d'Olivebranch (choisissez un navigateur version
4.0 pour afficher ce site).
Remarque: L'application Flash Player doit être installée dans votre navigateur par défaut
pour pouvoir afficher les communiqués spéciaux de la semaine figurant sur la page
d'accueil d'Olivebranch. Si vous ne disposez pas de cette application, repérez son logiciel
d'installation dans le répertoire Flash du CD de Dreamweaver, ou téléchargez-le sur le
site http://www.macromedia.com/shockwave/download/.
Didacticiel
19
4
Faites glisser le curseur de la souris successivement sur les quatre éléments
situés dans la partie gauche de la page (about, events, etc.) ; notez que ces
éléments s'affichent en surbrillance pour indiquer qu'il s'agit de liens actifs.
Cliquez sur n'importe lequel de ces éléments pour explorer les pages
correspondantes.
Remarque: La section gift
5
basket de ce site n'est pas utilisée.
Fermez le navigateur lorsque vous avez fini d'examiner le site.
Organisation des fichiers du didacticiel
Les fichiers HTML, tant achevés qu'inachevés, utilisés dans ce didacticiel se
trouvent dans le sous-répertoire Olivebranch_site du répertoire Tutorial. Les
images et autres fichiers associés pour le site se trouvent dans les sous-répertoires
du répertoire Olivebranch_site (le chemin d'accès complet du répertoire
Olivebranch_site varie en fonction de l'emplacement où Dreamweaver 2.0 a été
installé).
Chaque fichier porte un nom significatif (en anglais) – par exemple, le fichier
HTML correspondant à la page où sont présentés les événements parrainés par
Olivebranch s'appelle events_main.htm. Les fichiers inachevés sur lesquels vous
allez travailler portent des noms identiques à ceux qui leur sont attribués dans le
site achevé, à l'exception du préfixe DW2_. Par exemple, la version inachevée de la
page events_main.htm, s'appelle DW2_events_main.htm.
Définition d'un site local
Pour travailler avec Dreamweaver, vous devez commencer par créer un site local.
Ce dernier définit la structure des pages que vous allez créer.
Un site est un emplacement où vous allez stocker l'ensemble des documents et des
fichiers appartenant à un site web. Un site local requiert un nom et un répertoire
racine local indiquant à Dreamweaver l'emplacement où vous souhaitez conserver
les fichiers du site. Vous devez créer un site local pour chaque site web sur lequel
vous travaillez.
Dans le cadre de ce didacticiel, vous allez spécifier le répertoire Olivebranch_site
comme répertoire du site local.
20
Chapitre 2
Pour créer un site local :
1
Dans Dreamweaver, ouvrez la boîte de dialogue Définition du site en
procédant comme suit :
Sur Macintosh, choisissez Site > Nouveau site.
Sous Windows, choisissez Fichier > Nouveau Site.
2
Dans la boîte de dialogue Définition du site, vérifiez si l'option Infos locales
est sélectionnée dans la liste Catégorie.
3
Nommez le site My_Tutorial en tapant ce nom dans le champ Nom du site.
Le nom du site local est un surnom qui renvoie directement au répertoire
défini comme site local.
4
Cliquez sur l'icône de répertoire à droite du champ Dossier racine local et
naviguez jusqu'au répertoire Olivebranch_site, puis cliquez sur Enregistrer.
Remarque: Le chemin d'accès complet du répertoire Olivebranch_site varie en fonction
de l'emplacement où Dreamweaver 2.0 a été installé.
Didacticiel
21
5
Cliquez sur OK, puis sur Créer lorsque Dreamweaver vous demande si vous
voulez créer un fichier cache pour le site.
L'option de création d'un fichier cache dans le répertoire Olivebranch_site
permet de créer un enregistrement des fichiers existants de manière à ce que
Dreamweaver puisse rapidement mettre les liens à jour lorsque vous déplacez,
renommez ou supprimez un fichier.
La fenêtre du site affiche une liste de tous les répertoires et fichiers contenus
dans le site local My_Tutorial. La liste fait également office de gestionnaire de
fichiers, en vous permettant de copier, coller, supprimer, déplacer et ouvrir des
fichiers exactement comme dans le sélecteur de fichier ou l'explorateur de
l'ordinateur.
6
22
Chapitre 2
Fermez la fenêtre Document contenant le fichier index.htm, mais laissez la
fenêtre du site ouverte.
Modification de la page d'accueil d'Olivebranch
Vous avez à présent défini une structure pour le site Olivebranch que vous êtes en
train de créer. Ouvrez la version inachevée de la page d'accueil. Vous allez créer des
liens et choisir une couleur d'arrière-plan, une image d'arrière-plan et un titre
pour la page de manière à ce qu'elle présente le même aspect que la page d'accueil
d'Olivebranch terminée.
Pour ouvrir la page d'accueil inachevée dans Dreamweaver :
1
Dans la fenêtre du site, double-cliquez sur DW2_index.htm.
2
Fermez la fenêtre du site.
Didacticiel
23
Définissez la couleur et l'image d'arrière-plan
Si vous utilisez une image et une couleur d'arrière-plan, la couleur s'affiche
pendant le téléchargement de l'image, ce qui confère à la page un aspect plus
attrayant pour les utilisateurs attendant le téléchargement de l'image. Si l'image
d'arrière-plan comprend des pixels transparents, la couleur d'arrière-plan filtre.
Pour définir une couleur d'arrière-plan pour la page :
1
Choisissez Modifier > Propriétés de la page pour ouvrir la boîte de dialogue
Propriétés de la page.
2
Changez la couleur d'arrière-plan par défaut en tapant #FFFFCC dans le
champ Couleur d'arrière-plan.
Dans ce cas, vous savez précisément la couleur que vous voulez. Vous pouvez
également choisir une couleur dans la palette ou utiliser le compte-gouttes
pour sélectionner une couleur d'un objet de la page.
3
Cliquez sur Appliquer pour appliquer la couleur à l'arrière-plan.
Dès que vous avez cliqué sur Appliquer dans la boîte de dialogue Propriétés de
la page, la page est mise à jour dans la fenêtre Document.
24
Chapitre 2
Spécifiez ensuite une image d'arrière-plan pour la page.
Pour définir une image d'arrière-plan pour la page :
1
Cliquez sur Parcourir (Windows) ou Choisir (Macintosh) à côté du champ
Image d'arrière-plan.
2
Sélectionnez home_bg.jpg dans le sous-répertoire Assets du répertoire
Olivebranch_site.
3
Cliquez sur Appliquer pour ajouter l'image d'arrière-plan à la page.
4
Laissez provisoirement la boîte de dialogue Propriétés de la page ouverte.
Une fois la couleur et l'image d'arrière-plan en place, la page d'accueil sur
laquelle vous travaillez devrait avoir l'aspect suivant :
Didacticiel
25
Définissez le titre de la page
Le titre d'une page HTML aide les utilisateurs à conserver la trace de ce qui
s'affiche en cours de navigation ; il identifie aussi la page dans les listes de
l'historique et des signets. Si vous n'attribuez pas de titre à la page, elle apparaîtra
dans la fenêtre du navigateur et dans les listes de signet et de l'historique comme
Document sans titre.
Pour définir le titre d'une page :
1
Dans le champ Titre de la boîte de dialogue Propriétés de la page, tapez
Olivebranch Gourmet Foods pour nommer la page d'accueil, puis cliquez sur
OK.
La barre de titre actualisée affiche le nom que vous avez donné au fichier.
2
26
Chapitre 2
Choisissez Fichier > Enregistrer pour enregistrer les changements apportés.
Création d'une carte du site
Une carte du site est une représentation visuelle précise de la structure d'un site. Vous
pouvez également utilisez la carte du site pour ajouter de nouveaux fichiers, ajouter,
supprimer ou modifier des liens, et pour créer une image BMP ou PICT du site que
vous pourrez exporter vers une application d'édition d'où vous l'imprimerez.
La page d'accueil d'un site apparaît toujours en haut de la carte du site. Sous la page
d'accueil, s'affichent les fichiers auxquels ses liens renvoient. Si le répertoire que vous
définissez comme racine du site contient un fichier nommé index.htm,
Dreamweaver utilise automatiquement ce dernier comme page d'accueil à la base de
la carte du site. Du fait que la page d'accueil du site My_Tutorial s'appelle en réalité
DW2_index.htm, vous la redéfinirez en personnalisant l'aspect de la carte du site.
Pour créer une carte du site :
Dans la fenêtre du site, appuyez et maintenez enfoncée l'icône Carte du site
dans le coin supérieur gauche, puis sélectionnez Carte et fichiers dans le menu
déroulant.
La fenêtre du site affiche à présent deux vues du site local : à gauche, apparaît
la structure arborescente de la carte du site Olivebranch achevé (avec la page
d'accueil index.htm) et, à droite, la liste de fichiers utilisée précédemment.
Didacticiel
27
Redéfinissez à présent la page d'accueil de manière à ce que le site utilise la version
du didacticiel au lieu de la version achevée.
Pour redéfinir la page d'accueil et personnaliser l'aspect de la carte du site :
28
Chapitre 2
1
Ouvrez la boîte de dialogue Définition du site en procédant comme suit :
Sous Windows, choisissez Affichage > Mise en page dans la barre de menus de
la fenêtre du site.
Sur Macintosh, choisissez Site > Affichage de carte de site > Mise en page.
2
Sélectionnez Mise en forme de la carte du site dans la liste Catégorie de la
boîte de dialogue Définition du site.
3
Spécifiez la nouvelle page d'accueil du site en cliquant sur le répertoire du
fichier à côté du champ Page d'accueil, puis en navigant vers le fichier
DW2_index.htm se trouvant dans le sous-répertoire Olivebranch_site du
répertoire Tutorial.
4
Fixez la valeur du champ Nombre de colonnes à 3.
5
Cliquez sur OK pour fermer la boîte de dialogue Définition du site et revenir à
la fenêtre du site.
La carte du site est actualisée de manière à refléter le changement apporté, la
page d'accueil du didacticiel étant à présent à la racine de la structure
arborescente de la carte du site.
En ce moment précis, la page d'accueil du didacticiel ne contient qu'un seul
lien. Vous allez bientôt y ajouter d'autres liens.
6
Laissez provisoirement la fenêtre du site ouverte afin de pouvoir constater la
manière dont le site s'actualise à mesure que vous ajoutez des liens à la page
d'accueil.
Didacticiel
29
Création de liens
Les images s'affichant dans la colonne de gauche de la page d'accueil guident les
visiteurs à travers le site d'Olivebranch. L'image du haut, intitulée about, établit
déjà un lien vers la page appropriée du site. Vous allez ajouter des liens à deux
autres éléments graphiques, events et catalog, de manière à ce qu'ils renvoient
également à d'autres pages du site (vous ne toucherez pas à l'image gift basket).
Commencez par ajouter un lien du graphique events vers la page Events à l'aide de
l'inspecteur de propriétés.
Pour créer un lien à l'aide de l'inspecteur de propriétés :
1
Cliquez sur la barre de titre de la fenêtre Document contenant le fichier
DW2_index.htm pour l'activer ou sélectionnez le nom du fichier dans le
menu Fenêtre.
2
Dans la fenêtre Document, cliquez sur l'image events pour la sélectionner.
Remarque: Si vous double-cliquez sur l'image, Dreamweaver vous invitera à
sélectionner un autre fichier pour remplacer l'image.
3
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
L'inspecteur de propriétés affiche des informations sur l'image sélectionnée.
4
Dans l'inspecteur de propriétés, cliquez sur l'icône de répertoire située à côté
du champ Lien vide.
5
Dans la boîte de dialogue Sélectionner fichier HTML, naviguez vers le
répertoire Olivebranch_site, sélectionnez DW2_events_main.htm, puis
cliquez sur Sélectionner.
Le nom du fichier avec lequel vous établissez un lien s'inscrit dans le champ
Lien de l'inspecteur de propriétés.
30
Chapitre 2
Vous allez à présent ajouter un lien à l'élément graphique catalog en utilisant
l'inspecteur de propriétés et la fenêtre du site.
Pour créer un lien à l'aide de l'inspecteur de propriétés et de la fenêtre du site :
1
Cliquez sur la barre de titre de la fenêtre du site pour la rendre active, ou
choisissez Fenêtre > Fichiers du site.
2
Le cas échéant, redimensionnez la fenêtre du document de manière à pouvoir
afficher la partie gauche de la fenêtre du document et la fenêtre du site côté à
côte.
3
Cliquez sur l'image catalog pour la sélectionner dans la fenêtre du document.
Didacticiel
31
4
Dans l'inspecteur de propriétés, faites glisser l'icône Pointer vers un fichier
(située à côté du champ Lien) vers la fenêtre du site en pointant sur le fichier
DW2_cat_main_index.htm.
Le chemin d'accès complet du fichier s'inscrit dans le champ Lien de
l'inspecteur de propriétés pour l'image catalog.
Dès que vous relâchez le bouton de la souris, la carte du site actualisée reflète le
lien que vous venez d'ajouter.
Un signe plus (Windows) ou une flèche d’agrandissement (Macintosh) à côté d'un
élément de la carte du site indique que d'autres éléments y sont associés. Cliquez
sur le signe plus ou la flèche d’agrandissement pour développer la structure
arborescente afin d'afficher les éléments associés ; cliquez sur le signe moins (-) ou
sur la flèche d’agrandissement pour réduire l’affichage de la carte du site.
32
Chapitre 2
5
Fermez l'inspecteur de propriétés, mais laissez provisoirement la fenêtre du site
ouverte.
6
Choisissez Fichier > Enregistrer pour enregistrer les changements apportés à la
page d'accueil.
7
Choisissez Fichier > Fermer pour fermer la page.
Création d'une mise en page complexe
Tout comme pour la page d'accueil d'Olivebranch, il existe un fichier didacticiel
concernant la page About Us déjà entamé. Vous allez achever de compléter la page
de didacticiel About Us, de façon à ce que sa mise en forme corresponde à celle de
la version achevée.
Vous allez commencer par ouvrir la version achevée de la page About Us dans un
navigateur, de manière à pouvoir vous y référer en cours de travail.
Pour afficher la page About Us achevée dans un navigateur :
1
Choisissez Fichier > Ouvrir, puis sélectionnez about_main.htm dans le sousrépertoire Olivebranch_site du répertoire Tutorial.
Ne modifiez pas cette page car elle est déjà terminée.
2
Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur
version 4.0.
Laissez la fenêtre du navigateur ouverte à l'arrière-plan de manière à pouvoir
vous y référer ultérieurement.
3
Dans Dreamweaver, choisissez Fichier > Fermer pour fermer la fenêtre du
document contenant la page About Us achevée.
Didacticiel
33
Ouvrez à présent le fichier didacticiel About Us inachevé pour le modifier dans
Dreamweaver.
Pour ouvrir le fichier About Us inachevé dans Dreamweaver :
Dans la fenêtre du site de Dreamweaver, double-cliquez sur le fichier
DW2_about_main.htm.
Conversion d'un tableau en calques
Les tableaux sont très utiles pour créer des mises en page complexes. Ils sont pris
en charge par les navigateurs de versions 3.0 et 4.0. Les calques sont encore plus
utiles pour créer des mises en page complexes du fait qu'ils permettent de déplacer
aisément les divers éléments d'une page en faisant simplement glisser les calques
sur lesquels ils se trouvent. Les calques ne sont en revanche par pris en charge par
les navigateurs de la version 3.0.
Dreamweaver vous permet de tirer parti des meilleures fonctions de tableaux et de
calques en passant rapidement d'un mode à l'autre jusqu'à ce que la page ait
l'aspect voulu. Le résultat, en format tableau, aura le même aspect dans les
navigateurs de version 3.0 et 4.0.
34
Chapitre 2
La page About Us a été entamée avec un tableau pour la mise en forme.
Commencez par convertir les cellules du tableau existantes en calques.
Pour convertir les cellules du tableau en calques:
1
Choisissez Modifier > Mise en forme > Repositionner le contenu à l'aide des
calques.
2
Dans la boîte de dialogue qui s'affiche, désactivez les options Afficher la grille
et Aligner sur la grille, en laissant les autres options activées.
L'option Aligner sur la grille oblige les calques à s'aligner sur l'emplacement de
grille le plus proche lorsque vous les créez ou les modifiez. Bien que cela
facilite l'alignement des calques, cela vous empêche aussi de les déplacer
librement sur la page comme vous allez devoir le faire.
3
Cliquez sur OK pour fermer la boîte de dialogue et convertir les cellules du
tableau en calques.
Les cellules du tableau deviennent des calques et la palette de calques s'affiche
pour vous aider à retrouver tous les calques de la page en cours.
Didacticiel
35
Ajout d'un tracé d’image pour guider la mise en forme
Vous pouvez utiliser comme guide pour créer une page web un tracé d'image JPG,
GIF ou PNG que vous aurez préalablement dessiné dans une application
graphique. Ce tracé de l'image sert de guide en arrière-plan pour la mise en forme
d’une page dans la fenêtre Document. Vous utiliserez le tracé de l'image pour
positionner les calques dans le document About Us de manière à ce que le dessin
de la page corresponde au tracé de l'image situé en-dessous.
Pour charger un tracé d'image :
1
Choisissez Affichage > Tracé de l'image > Charger.
2
Sélectionnez about_us_comp.gif dans le répertoire Assets, puis cliquez sur
Sélectionner.
3
Dans la boîte de dialogue Propriétés de la page, utilisez le curseur Transparence
de l'image pour régler l'opacité du tracé d'image sur 50 %.
Le réglage du niveau de transparence sur 50 % fait que le tracé d'image
apparaît décoloré dans la fenêtre Document, ce qui vous aide à faire la
distinction entre le tracé de l'image et les éléments modifiables de la page.
36
Chapitre 2
4
Cliquez sur OK pour ajouter le tracé de l'image et fermer la boîte de dialogue.
Un tracé de l'image s'affiche dans l'espace de travail, avec les calques existants
posés dessus, bien que non alignés sur le tracé (si le tracé de l'image n'apparaît
pas, assurez-vous que l'option Afficher est activée lorsque vous choisissez
Affichage > Tracé de l'image > Afficher).
Lorsque vous chargez un tracé d'image, l'image et la couleur d'arrière-plan ne sont
pas visibles dans la fenêtre Document mais elles apparaîtront lorsque vous
afficherez la page dans un navigateur.
Le tracé de l'image n'est lui-même visible que lorsque vous modifiez la page dans
la fenêtre Document ; il n'apparaît jamais dans un navigateur.
Didacticiel
37
Positionnement des calques
Déplacez les calques créés hors du tableau de manière à ce qu'ils soient alignés sur
les éléments du tracé de l'image et en reproduisent l'aspect.
Pour positionner les calques sur la page :
1
Cliquez sur le bord du calque contenant le texte sur Olivebranch pour le
sélectionner.
Voici ce à quoi ressemble un calque sélectionné :
2
Saisissez la poignée du calque et faites-le glisser (ou utilisez les touches
fléchées) au-dessus du texte générique du tracé de l'image. Redimensionnez
éventuellement le calque de manière à ce que sa taille corresponde à celle du
bloc de texte du tracé de l'image.
Du fait que les deux blocs contiennent un texte différent, les mots du calque
ne sont pas parfaitement alignés sur ceux du tracé de l'image dans l'espace de
travail. Toutefois, étant donné que le tracé de l'image ne s'affiche que dans
l'espace de travail, le texte du calque du document s'affiche normalement dans
un navigateur.
38
Chapitre 2
3
Procédez de même pour placer le calque contenant la lettre O au-dessus de la
lettre O du tracé de l'image.
Ajout de nouveaux calques
Ajoutez à présent des calques correspondant aux parties du tracé de l'image non
encore affichées sur la page.
Pour ajouter de nouveaux calques à une page :
1
Cliquez sur une zone vierge de la fenêtre Document.
Assurez-vous que le curseur ne pointe pas sur un calque existant afin d'éviter
de créer des calques imbriqués impossibles à convertir en tableaux.
2
Choisissez Insertion > Calque pour ajouter un nouveau calque à la page.
3
Positionnez le calque sur la zone carrée du tracé de l'image libellée "Diana
close-up photo".
L'option Empêcher le chevauchement étant sélectionnée dans la palette de
calques, il est impossible de superposer les calques. Il se peut que vous deviez
redimensionner le calque pour le faire glisser dans une position où il ne
chevauche pas un autre calque.
Didacticiel
39
4
Sélectionnez le calque et redimensionnez-le, en fonction de vos besoins, pour
qu'il corresponde à la zone du tracé de l'image.
5
Répétez ces étapes pour ajouter d'autres calques à la page, au-dessus des zones
du tracé de l'image libellées "Farm photo (with daughter)" et "Tree photo".
Ajout d'images
Insérez à présent des éléments graphiques dans chaque calque, puis alignez-les sur
le tracé de l'image.
Pour insérer des éléments graphiques dans les calques et les aligner sur le tracé de
l'image :
1
Cliquez une fois dans le calque "Diana close-up photo" pour y placer le
curseur sans le sélectionner.
Voici à quoi ressemble un calque actif dans lequel un curseur est positionné :
2
40
Chapitre 2
Choisissez Insertion > Image, puis sélectionnez about_diana.jpg dans le
répertoire Assets pour ajouter l'image au calque.
3
Une fois que l'image apparaît dans le calque, cliquez sur la bordure du calque
pour le sélectionner, puis utilisez les touches fléchées pour aligner l'élément
graphique sur le tracé de l'image (si nécessaire, redimensionnez de nouveau le
calque pour qu'il corresponde plus précisément au tracé de l'image).
Avant
Après
Didacticiel
41
42
Chapitre 2
4
Répétez ces étapes en ajoutant l'image about_daughter.jpg du répertoire Assets
au calque "Farm photo (with daughter)" et l'image about_tree.jpg du
répertoire Assets au calque "Tree photo".
5
Fermez la palette de calques.
Conversion des calques en tableau
A présent que vous avez mis la page en forme exactement comme vous le vouliez,
convertissez les calques en tableau de manière à ce que la page s'affiche
parfaitement dans les navigateurs de version 3.0 aussi bien que de version 4.0.
Pour convertir tous les calques en un simple tableau :
1
Choisissez Modifier > Mise en forme > Convertir les calques en tableau.
2
Cliquez sur OK pour accepter les options par défaut dans la boîte de dialogue
Convertir les calques en tableau.
Dreamweaver ne peut pas créer un tableau à partir de calques se chevauchant ;
c'est pour cela que vous avez utilisé l'option Empêcher le chevauchement pour
contraindre le positionnement des calques lors de leur création à partir du
tableau original.
Didacticiel
43
Affichage de la page dans un navigateur
Affichez à présent la page About Us que vous venez d'éditer.
Pour afficher la page dans un navigateur :
1
Appuyez sur F12 pour afficher le document dans le navigateur web par défaut.
Vous ne devez pas enregistrer un document avant de l'avoir prévisualisé.
Toutes les fonctions de navigation sont opérationnelles lorsque vous
prévisualisez un document.
44
Chapitre 2
2
Comparez le fichier sur lequel vous venez de travailler à la page About Us
achevée que vous avez chargée préalablement dans le navigateur.
3
Lorsque vous avez fini de prévisualiser le fichier, fermez les deux fenêtres du
navigateur.
4
Revenez dans Dreamweaver et choisissez Fichier > Enregistrer pour enregistrer
les changements apportés à la page About Us.
5
Choisissez Fichier > Fermer pour fermer la page.
Edition d'un tableau
La page Olivebranch Events affiche une liste de concerts, expositions et festivals
parrainés par Olivebranch. Les événements apparaissent dans un tableau décrivant
l'emplacement, la date et la nature de chacun d'eux.
Le fichier didacticiel de la page Events contient un tableau complet des
événements. Vous allez modifier ce tableau en déplaçant des colonnes et en triant
les informations contenues dans les cellules.
Pour ouvrir la page Events du didacticiel :
1
Dans la fenêtre du site, double-cliquez sur DW2_events_main.htm.
Si vous ne voyez pas la fenêtre du site, choisissez Fenêtre > Fichiers de site pour
l'ouvrir ou l'activer.
Voici l'aspect du tableau de la page :
2
Laissez la fenêtre du site ouverte mais faites-la passer à l'arrière-plan.
Didacticiel
45
Mise en forme du tableau
Déplacez la colonne Where dans la partie droite du tableau vers la gauche afin
d'en faire la première colonne.
Pour déplacer des colonnes dans un tableau :
1
Cliquez sur la cellule Where en haut de la colonne, puis faites glisser le
pointeur de la souris vers la dernière cellule de la colonne pour la sélectionner
entièrement.
Vous pouvez également sélectionner une colonne en positionnant le pointeur
de la souris précisément sur la bordure supérieure de la colonne, sans cliquer,
jusqu'à ce qu'une flèche de sélection s'affiche ; cliquez ensuite une fois pour
sélectionner toute la colonne (si vous positionnez le pointeur sur la bordure du
tableau, vous sélectionnerez tout le tableau).
2
Choisissez Édition > Couper.
3
Cliquez à l'intérieur de la cellule When (ne la sélectionnez pas).
4
Choisissez Édition > Coller.
La colonne Where est à présent la première colonne du tableau.
46
Chapitre 2
Tri d'un tableau
Triez ensuite les cellules du tableau par ordre alphabétique, par emplacement.
Pour trier les cellules d'un tableau :
1
Cliquez n'importe où dans le tableau, puis choisissez Commandes > Trier le
tableau.
2
Dans la boîte de dialogue Trier le tableau, spécifiez les options suivantes :
Trier par : colonne 1
Ordre : Alphabétique croissant
Puis par : colonne 2
Ordre: Numérique croissant
Le premier tri (Trier par) trie le tableau par ordre alphabétique, en prenant en
considération le contenu de la première colonne. Le second tri (Puis par) trie
le tableau par ordre numérique, en prenant en considération le contenu de la
deuxième colonne.
3
Cliquez sur OK pour trier le tableau.
Didacticiel
47
Vous allez à présent formater le tableau en centrant le contenu des cellules dans la
colonne When.
Pour centrer le contenu des cellules du tableau :
1
Cliquez sur la première cellule sous le titre de la colonne When, puis faites
glisser le curseur jusqu'au bas du tableau de manière à sélectionner toutes les
cellules de la colonne.
2
Choisissez Modifier > Propriétés de la sélection pour ouvrir l'inspecteur de
propriétés.
3
Si vous ne voyez pas de menu Horz dans l'inspecteur de propriétés, cliquez sur
la flèche d’agrandissement dans le coin inférieur droit pour afficher une liste de
propriétés complète.
4
Choisissez Centrer dans le menu Horz.
Le contenu de toutes les cellules de la colonne When est centré.
48
Chapitre 2
Mise en forme de texte avec des styles
personnalisés
Un style est un groupe d'attributs de mise en forme contrôlant l'apparence d'un
bloc ou d'une page de texte. Une feuille de style inclut tous les styles d'un
document.
Créez un style personnalisé pour mettre en forme les titres de tableau de la page
Events.
Pour créer un style personnalisé :
1
Choisissez Fenêtre > Styles pour ouvrir la palette des styles.
2
Cliquez sur Éditer pour ouvrir la boîte de dialogue Éditer Feuille de style.
3
Cliquez sur Nouveau dans la boîte de dialogue Éditer Feuille de style.
4
Assurez-vous que la sélection pour Type est Créer un style personnalisé
(classe).
5
Tapez .tablehead pour nommer le nouveau style, puis cliquez sur OK.
Didacticiel
49
50
Chapitre 2
6
Une fois le type sélectionné dans la liste à gauche de la boîte de dialogue,
sélectionnez les paramètres de mise en forme suivants pour le nouveau style :
Police : Arial, Helvetica, sans-serif
Taille : 18 points
Style : normal
7
Cliquez sur OK pour fermer la boîte de dialogue Définition du style.
8
Cliquez sur Terminé pour fermer la boîte de dialogue Éditer Feuille de style
qui affiche à présent le style .tablehead.
Vous allez à présent utiliser la palette de styles pour appliquer le style .tablehead
aux titres de tableau de la page Events.
Pour appliquer un style personnalisé :
1
Dans la fenêtre Document, sélectionnez les trois cellules de titre du tableau en
appuyant sur la touche Contrôle (Windows) ou Commande (Macintosh),
puis en cliquant une fois sur chaque cellule.
2
Cliquez sur .tablehead dans palette de styles.
Les cellules affichent le nouveau style dans le document.
3
Fermez la palette de styles.
4
Enregistrez les changements apportés à la page Events en cliquant sur Fichier >
Enregistrer.
5
Choisissez Fichier > Fermer pour fermer la page.
Application d'un modèle
Vous pouvez également utiliser des modèles pour créer des documents pour le site
qui aient une structure et une apparence communes. Les modèles sont utiles si
vous voulez vous assurer que toutes les pages d'un site partagent certaines
caractéristiques.
Lorsque vous appliquez un même style à un groupe de pages, vous pouvez
modifier les informations relatives à toutes ces pages en éditant le modèle, puis en
l'appliquant de nouveau aux pages en question. Tandis que les éléments propres à
chaque page (tels que du texte décrivant un article en vente) restent inchangés, les
éléments du modèle commun (tels que les barres de navigation) sont mises à jour
dans toutes les pages utilisant ce modèle.
Didacticiel
51
La page Olivebranch Catalog contient des liens vers plusieurs pages de produit
décrivant individuellement certains produits individuels proposés à la vente. Du
fait que chaque page de produit utilise une mise en forme et un format identiques,
elles ont été créées à l'aide d'un seul modèle.
Dans le cadre de cette section, vous allez éditer un modèle existant afin de modifier
les pages de produit auxquelles il a été appliqué. Vous allez ensuite appliquer un
autre modèle à ces pages afin d’en modifier le format sans en altérer le contenu.
Affichage des pages de produit
Commencez par afficher la page de catalogue achevée dans un navigateur.
Pour ouvrir la page Olivebranch Catalog :
1
Choisissez Fichier > Ouvrir, puis sélectionnez cat_main_index.htm.
2
Choisissez Fichier > Aperçu dans le navigateur pour ouvrir la page dans une
fenêtre de navigateur.
3
Cliquez sur les liens renvoyant aux vins, aux fromages, aux condiments et aux
huiles pour afficher les échantillons de page de produit.
Notez que toutes les pages de produit partagent la même barre de navigation
située en haut de la page. En plus des liens avec les pages de produit, la barre
de navigation contient un lien avec la page de catalogue principale et (dans les
graphiques à l'extrême droite de la barre) un lien permettant de revenir à la
page d'accueil d'Olivebranch.
52
Chapitre 2
4
Fermez le navigateur lorsque vous avez fini de consulter la page de catalogue
principale et les pages de produits qui y sont liées.
5
Revenez dans Dreamweaver et choisissez Fichier > Fermer pour fermer la page
de catalogue achevée.
Ouvrez à présent les pages de catalogue inachevées dans un navigateur.
Pour ouvrir la version didacticielle de la page Catalog :
1
Déplacez la fenêtre du Site située à l'arrière-plan vers l'avant-plan en cliquant
sur Fenêtre > Fichiers de site.
2
Recherchez DW2_cat_main_index.htm dans la liste, puis double-cliquez
dessus pour l'ouvrir dans la fenêtre Document.
3
Appuyez sur F12 pour prévisualiser la page de catalogue du didacticiel dans un
navigateur.
4
Cliquez sur les liens renvoyant aux vins, aux fromages, aux condiments et aux
huiles pour afficher les pages de produit sur lesquelles vous allez travailler.
Tout comme avec le site achevé, les pages de produit utilisent toutes le même
modèle, de sorte qu'elles se ressemblent beaucoup. Dans ce cas, cependant, il
manque, dans chacune d'elles, le lien renvoyant à la page de catalogue
principale et le graphique en haut à droite qui renvoie à la page d'accueil
Olivebranch.
5
Après avoir exploré les liens avec les pages de produit, fermez la fenêtre du
navigateur.
6
Revenez dans Dreamweaver et choisissez Fichier > Fermer pour fermer la page
de catalogue principale.
Didacticiel
53
Modification du modèle
Vous allez à présent modifier le modèle des pages de produit afin de réparer la
barre de navigation. Cela fait, vous allez de nouveau appliquer le modèle aux pages
en question de manière à ce que la barre de navigation soit mise à jour pour toutes
les pages utilisant ce modèle.
Pour ouvrir le fichier du modèle dans la fenêtre Document :
Dans la fenêtre du site, double-cliquez sur DW2_cat_product.dwt dans le
sous-répertoire Templates du répertoire Olivebranch_site.
Chaque modèle contient des régions verrouillées et modifiables. Les régions
verrouillées ne peuvent être modifiées qu'à l'intérieur du modèle lui-même ;
elles apparaissent en surbrillance sur toutes les pages auxquelles le modèle est
appliqué. Les régions modifiables sont des espaces réservées au contenu propre
à chacune des pages auxquelles le modèle est appliqué. Dans un modèle, les
régions modifiables apparaissent en surbrillance.
Dans le présent modèle, la barre de navigation se trouve dans une région
verrouillée, tandis que les zones destinées à accueillir les photos de produit et le texte
sont modifiables pour chaque page de produit.
54
Chapitre 2
Éditez à présent le fichier du modèle. Commencez par ajouter un lien à l'élément
graphique du catalogue.
Pour ajouter à l'élément graphique un lien avec la page de catalogue principale :
1
Cliquez une fois sur l'élément graphique du catalogue.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
3
Dans l'inspecteur de propriétés, cliquez sur l'icône de répertoire située à côté
du champ Lien vide, puis sélectionnez le fichier DW2_cat_main_index.htm
dans le répertoire Olivebranch_site.
4
Laissez l'inspecteur de propriétés ouvert.
Ajoutez ensuite un graphique dans le coin supérieur droit de la page et liez-le à la
page d'accueil Olivebranch.
Pour ajouter un graphique renvoyant à la page d'accueil Olivebranch :
1
Cliquez à l'intérieur de la cellule vide à droite de l'image du catalogue.
2
Choisissez Insertion > Image, puis sélectionnez cat_nav_photos.jpg dans le
répertoire Assets.
L'élément graphique s'affiche dans la cellule.
3
Assurez-vous que l'élément graphique que vous venez d’ajouter à la cellule est
toujours sélectionné (si ce n'est pas le cas, cliquez une fois dessus pour le
sélectionner).
4
Dans l'inspecteur de propriétés, cliquez sur l'icône de répertoire située à côté
du champ Lien vide, puis sélectionnez le fichier DW2_index.htm dans le
répertoire Olivebranch_site.
5
Fermez l'inspecteur de propriétés.
Didacticiel
55
À présent que vous avez modifié le modèle, appliquez-le de nouveau aux pages de
produit.
Pour appliquer le modèle de nouveau aux pages de produit du catalogue :
1
Choisissez Fichier > Enregistrer pour enregistrer les changements.
2
Lorsque le programme vous demande si vous voulez mettre à jour tous les
documents du site local utilisant ce modèle, cliquez sur Oui.
Une boîte de dialogue Mettre à jour les pages affiche l'état des pages du site à
mesure que le modèle est appliqué.
3
56
Chapitre 2
Une fois tous les fichiers du site mis à jour, fermez la boîte de dialogue Mettre
à jour les pages.
Du fait que la page de catalogue principale contient des liens vers toutes les pages
de produit du site, vous pouvez l'utiliser pour prévisualiser rapidement toutes les
pages de produit auxquelles vous avez appliqué le modèle. Ouvrez la page de
catalogue principale dans un navigateur, puis cliquez sur les liens avec les pages de
produit.
Pour afficher les pages de produit mises à jour :
1
Double-cliquez sur le fichier DW2_cat_main_index.htm dans la fenêtre Site
pour le rouvrir dans la fenêtre Document.
2
Appuyez sur F12 pour prévisualiser cette page dans votre navigateur par défaut
ou choisissez Fichier > Aperçu dans le navigateur pour sélectionner un autre
navigateur.
3
Cliquez sur les liens renvoyant aux vins, aux fromages, aux condiments et aux
huiles pour accéder à chacune de ces pages de produit.
4
Dans chaque page de produit, cliquez sur le catalogue et sur les liens vers la
page d'accueil Olivebranch que vous avez ajoutés à la barre de navigation pour
voir de quelle manière les changements apportés au modèle ont été appliqués
aux pages.
5
Fermez le navigateur lorsque vous avez fini de tester les liens de la barre de
navigation des pages de produit.
6
Revenez dans Dreamweaver et choisissez Fichier > Fermer.
Application d'un autre modèle à une page
Vous pouvez appliquer un nouveau modèle à une page, même si celle-ci utilise
déjà un modèle. Le contenu d'une page reste inchangé tant que le nouveau
modèle contient les mêmes noms de région modifiable que le modèle
précédemment attaché au document.
Cette technique est utile si vous voulez changer l'apparence d'un groupe de pages
sans en altérer le contenu. Par exemple, il peut arriver qu'un catalogue ait une
version d'hiver et une version d'été. Vous pouvez créer une présentation tout à fait
nouvelle sans toucher au contenu en utilisant un autre modèle pour changer les
images et couleurs d'arrière-plan de la page, ou en réorganisant les positions des
régions modifiables.
Didacticiel
57
Vous allez appliquer ici un modèle d'hiver à une page de produit de manière à
mettre à jour son aspect en vue d'une nouvelle saison.
Pour appliquer un nouveau modèle à une page existante :
1
Dans la fenêtre du site, double-cliquez sur DW2_cat_wines.flc.htm pour
ouvrir la page de produit consacrée aux vins dans la fenêtre Document.
Les sections de cette page qui apparaissent en surbrillance dans une couleur
différente identifient des régions verrouillées qu'il n'est possible d’éditer que
dans le modèle utilisé pour cette page.
(Si vous ne voyez pas de différence de couleur entre les zones de la page,
choisissez Édition > Préférences, sélectionnez Surbrillance dans la liste
Catégorie, puis l'option Afficher à côté de Régions verrouillées. Si vous ne
voyez toujours pas la couleur de surbrillance, choisissez Affichage > Éléments
invisibles).
2
Choisissez Fenêtre > Modèles pour ouvrir la palette de modèles.
La palette de modèles contient une liste de tous les fichiers de modèle (dwt) du
site local, situés dans le répertoire Templates du répertoire Olivebranch_site.
58
Chapitre 2
3
Dans la palette des modèles, cliquez sur le fichier cat_product_winter.dwt
pour le mettre en surbrillance dans la liste.
4
Redimensionnez la palette de modèles pour prévisualiser le modèle de l'hiver à
l'intérieur de la palette.
Le modèle de l'hiver est différent de celui actuellement appliqué aux pages de
produit. Toutefois, du fait qu'il contient les mêmes régions modifiables que le
modèle courant, vous pouvez l'appliquer à la page sans altérer quoi que ce soit.
Didacticiel
59
60
Chapitre 2
5
Cliquez sur Appliquer à la page pour appliquer le modèle d'hiver à la page de
produit pour les vins.
6
Fermez la palette de modèles.
7
Appuyez sur F12 pour prévisualiser la nouvelle page de produit pour les vins
dans une fenêtre de navigateur.
8
Lorsque vous avez fini de prévisualiser, fermez la fenêtre du navigateur et
revenez à Dreamweaver.
9
Si vous voulez, vous pouvez cliquer sur Fichier > Enregistrer pour enregistrer
les modifications que vous venez de faire à la page des vins ; les liens du site
fonctionneront quel que soit le modèle appliqué à la page.
10
Choisissez Fichier > Fermer pour fermer la page.
Association de comportements à des éléments
de page
Un comportement est une combinaison d'événements et d'actions. Les
événements sont des situations qui déclenchent des actions. Par exemple, un
événement appelé onClick peut se produire lorsque l'utilisateur clique sur un
bouton, ou un événement appelé onMouseOver peut se produire lorsque le
pointeur de la souris passe sur un objet. Les actions sont des bouts de code
JavaScript préécrit qui exécutent des tâches spécifiques telles que l'ouverture d'une
fenêtre de navigateur, la diffusion d'un son ou l'arrêt d'une séquence vidéo
Shockwave.
Lorsque vous associez un comportement à un élément de page, vous spécifiez tant
une action que l'événement qui la déclenche. Dreamweaver offre plusieurs actions
prédéfinies que vous pouvez associer à certains éléments de page.
Vous allez appliquer ici des actions d’échange d'image aux éléments graphiques
about, events, et catalog de manière à ce que les images s'éclairent lorsque la souris
passe dessus (c'est-à-dire lorsque l'événement onMouseOver se produit). Par
exemple, lorsque l'image about s'affiche normalement sur la page, elle a l'aspect
suivant :
Lorsque vous avez défini un comportement incluant l'action de changement
d'image en cas d'événement onMouseOver, l'image about aura cet aspect-ci
(version mise en surbrillance de l'image d'origine) lorsque la souris passera dessus :
Commencez par rouvrir le fichier de page d'accueil que vous avez édité auparavant
dans le cadre du didacticiel, puis associez des comportements à certains éléments
graphiques de cette page.
Pour rouvrir la page dans Dreamweaver :
1
Déplacez la fenêtre du Site située à l'arrière-plan vers l'avant-plan en cliquant
sur Fenêtre > Fichiers de site.
2
Double-cliquez dans la liste sur le fichier de la page d'accueil DW2_index.htm
afin de le rouvrir dans la fenêtre Document.
Didacticiel
61
Pour associer un comportement à un élément graphique de la page :
1
Cliquez sur l'image about dans la fenêtre Document pour la sélectionner.
2
Choisissez Fenêtre > Comportements pour ouvrir l'inspecteur de
comportement qui affiche la liste de tous les comportements définis pour
l'élément sélectionné (il ne devrait pas encore y en avoir).
3
Ajoutez une action à la liste en cliquant sur le bouton plus (+), puis, dans le
menu déroulant sur Changer image.
La boîte de dialogue Intervertir l’image affiche la liste de toutes les images de la
page.
4
Dans la boîte de dialogue Intervertir l'image, sélectionnez l'image about dans
la liste Images.
Il s'agit de l'image originale qui sera remplacée par une image en surbrillance
lorsque le pointeur passera dessus.
5
Cliquez sur Parcourir, à côté du champ Définir la source à et naviguez jusqu'à
l'image nav_about_roll.gif dans le répertoire Assets.
Cette image remplace l'image originale en cas d'événement onMouseOver.
62
Chapitre 2
6
Acceptez les options par défaut sous le champ Définir la source à.
L'option Précharger les images charge l'image à intervertir dans le cache du
navigateur lors du chargement de la page, de sorte qu'il n'y a pas de pause
perceptible avant l'affichage de l'image en surbrillance lorsque l'utilisateur
déplace pour la première fois le pointeur de la souris sur l'image about.
L'option Restaurer les images onMouseOut attribue automatiquement
l'action de restauration d'image intervertie à l'événement onMouseOut pour
cette image. Cette action restitue au bouton son état d'origine lorsque
l'utilisateur écarte le pointeur du bouton.
7
Cliquez sur OK pour fermer la boîte de dialogue Intervertir l'image en
appliquant les changements apportés.
L'inspecteur de comportement inclut à présent les événements et actions que
vous venez de définir pour l'image. L'événement onMouseOver s'affiche avec
l'action Intervertir l'image ; ci-dessus figure l'événement onMouseOut avec
l'action Restauration d'image intervertie qui a été définie lorsque vous avez
accepté les options par défaut au moment de définir l'action Intervertir l'image.
8
Répétez ces étapes pour associer des actions d’interversion d'image et des
événements onMouseOver aux images events et catalog :
Remplacez l'image events par l'image à intervertir nav_events_roll.gif.
Remplacez l'image catalog par l'image nav_catalog_roll.gif.
9
Fermez l'inspecteur de comportement.
Voyez à présent comment les comportements agissent en prévisualisant la page
dans un navigateur.
Pour prévisualiser la page dans un navigateur :
1
Cliquez sur F12.
2
Déplacez le pointeur de la souris sur les images about, events, et catalog afin de
voir comment elles changent.
Fermez le navigateur lorsque vous avez fini de prévisualiser la page.
3
Revenez à Dreamweaver et enregistrez les changements en cliquant sur
Fichier > Enregistrer.
Didacticiel
63
Ajout d'une séquence vidéo flash
La page d'accueil Olivebranch achevée comprend une section consacrée aux
spécialités de la semaine dans laquelle divers articles en vente se fondent
graduellement les uns dans les autres dans la partie droite de la page.
La section "specials" se compose en réalité de deux calques : le premier contient
l'image statique this week's specials, et le second (superposé au premier) contient
une séquence vidéo flash dans laquelle les articles en vente se fondent les uns dans
les autres. Jusqu'ici, votre version de la page d'accueil ne comprend que le calque
avec l'image statique. Vous allez ajouter ici la séquence vidéo flash dans un calque
superposé au calque de l'image afin de recréer la section "specials" telle qu'elle
apparaît dans la page d'accueil achevée.
Du fait que la séquence vidéo flash sera sur un calque directement placé sur le
calque de l'image this week's special, vous devez désactiver l'option Empêcher le
chevauchement.
Pour permettre aux calques de se chevaucher :
1
Choisissez Fenêtre > Calques pour rouvrir la palette de calques.
2
Désactivez l'option Empêcher le chevauchement.
Vous allez à présent devoir créer un nouveau calque pour accueillir la séquence
vidéo flash.
Pour ajouter un nouveau calque contenant une séquence vidéo flash :
1
Choisissez Insertion > Calque.
2
Cliquez une fois pour placer le curseur à l'intérieur du nouveau calque.
3
Choisissez Insertion > Flash, puis sélectionnez home_ticker.swf dans le
répertoire Assets.
Le calque s'adapte à la taille de la séquence vidéo flash représentée par un
rectangle de couleur grise.
64
Chapitre 2
Ensuite, jouez la séquence vidéo flash dans la fenêtre Document et alignez-la sur le
calque this week's specials.
Pour jouer la séquence vidéo flash dans la fenêtre Document :
Cliquez Affichage > Plug-ins > Lire tout.
Pour aligner le calque de la séquence vidéo flash sur le calque des spécialités de la
semaine :
1
Cliquez sur la bordure du calque pour le sélectionner tout entier, puis faites-le
glisser en le tirant par sa poignée jusqu'à ce qu'il soit superposé au calque this
week's specials.
La séquence vidéo flash contient des blocs de couleur de même qu'une ligne
horizontale correspondant à l'élément graphique statique this week's special.
Utilisez-les pour vous guider lorsque vous placez le calque de la séquence vidéo
flash au-dessus du calque de l'image.
Remarque: Il se peut que la séquence vidéo varie en fonction des résolutions d'écran. Si
le calque de la séquence vidéo flash ne semble pas s'aligner sur le calque this week's
specials, choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés et
réinitialiser les dimensions de la séquence vidéo flash sur W 329, H 94.
Les deux calques superposés devraient avoir l'aspect suivant :
2
Choisissez Fichier > Enregistrer pour enregistrer les changements apportés.
Didacticiel
65
Vérification du site
À présent que vous avez apporté toutes les modifications nécessaires aux fichiers
inachevés, consultez le site tout entier dans un navigateur pour voir à quoi il
ressemble.
Pour prévisualiser le site dans un navigateur :
66
Chapitre 2
1
Tant que la page d'accueil est ouverte, appuyez sur F12 pour l'ouvrir dans un
navigateur.
2
Regardez la séquence vidéo flash, puis cliquez sur les images about, events, et
catalog pour afficher les autres pages modifiées pour le site.
3
Lorsque vous avez fini d'examiner le site que vous venez de créer, fermez la
fenêtre du navigateur, puis revenez à Dreamweaver et choisissez Fichier >
Fermer pour fermer la page d'accueil.
3
CHAPITRE 3
Prise en main
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Prise en main – Vue d’ensemble
Commencer à utiliser Dreamweaver est aussi simple que d'ouvrir un document
HTML ou d'en créer un nouveau. Toutefois, pour que vous puissiez profiter au
mieux de votre expérience Dreamweaver, il est utile de comprendre les concepts de
base régissant l'espace de travail Dreamweaver et la manière de choisir les options
les plus adaptées à votre type de travail.
Espace de travail de Dreamweaver
L'espace de travail de Dreamweaver est très flexible, de sorte qu'il s'adapte à
différents types de travail et de niveaux d'expertise. Rares sont les composants de
l'espace de travail de Dreamweaver que vous utilisez en permanence :
La fenêtre Document affiche une image approximative du document en cours
tel qu'il s'affichera dans un navigateur web.
Le lanceur offre des boutons pour l'ouverture et la fermeture des inspecteurs et
palettes les plus fréquemment utilisés. Les icônes du lanceur sont reproduites
sur le mini-lanceur au bas de la fenêtre du document afin de faciliter l'accès
lorsque le lanceur est fermé.
La palette d'objets contient des boutons permettant de créer divers types
d'objets tels que images, tableaux, calques etc.
L'inspecteur de propriétés affiche les propriétés de l'objet sélectionné.
Les menus contextuels vous permettent d'accéder rapidement à des
commandes utiles en rapport avec la sélection ou la zone en cours.
Les éléments mobiles ancrables vous permettent de combiner les fenêtres
flottantes, les inspecteurs et autres palettes en une ou plusieurs fenêtre(s) à onglets.
67
Fenêtre Document
La fenêtre Document affiche une image approximative du document en cours tel
qu'il s'affichera dans un navigateur web. La barre de titre de la fenêtre Document
affiche le titre de la page et, entre parenthèses, le nom de fichier et une astérisque si
le fichier contient des modifications non enregistrées.
Les balises contrôlant le texte ou l'objet sélectionné apparaissent dans le sélecteur
de balise en bas à gauche de la fenêtre Document. Cliquez sur ces balises pour
sélectionner précisément une balise HTML et son contenu. Cliquez sur <body>
pour sélectionner le corps du document.
La taille estimée du document et le temps de téléchargement de la page, y compris
de tous les éléments liés tels que les images et les séquences vidéo Shockwave,
s'affichent à gauche du mini-lanceur. Voir Vérification du temps et de la taille de
téléchargement, page 152.
La série de boutons en bas à droite de la fenêtre Document est appelée minilanceur ; il s'agit d'une version miniature du lanceur. Les boutons du mini-lanceur
permettent d’ouvrir la fenêtre Site, la palette de la bibliothèque, la palette de
styles, l'inspecteur de comportement, l'inspecteur de scénarios et l'inspecteur
HTML.
Le menu déroulant Taille de fenêtre vous permet de redimensionner la fenêtre du
document sur des dimensions prédéterminées ou personnalisées. Voir
Redimensionnement de la fenêtre Document, page 80.
Taille document
et temps de
chargement
Balises
68
Chapitre 3
Menu contextuel
Taille de fenêtre
Mini-lanceur
Utilisation de l'inspecteur de propriétés
L'inspecteur de propriétés affiche les propriétés de l'objet sélectionné.
Tout changement apporté à une propriété est immédiatement répercuté dans la
fenêtre Document.
Les propriétés qui s'affichent dépendent de l'objet sélectionné. Pour obtenir des
informations sur des options particulières, sélectionnez un objet, puis cliquez sur
l'icône Aide dans le coin supérieur droit de l'inspecteur de propriétés.
L'inspecteur de propriétés affiche initialement les propriétés les plus couramment
utilisées. Cliquez sur la flèche d’agrandissement dans le coin inférieur droit pour
afficher toutes les propriétés.
Utilisation du lanceur
Le lanceur comprend des boutons permettant d'ouvrir et de fermer les palettes,
fenêtres et inspecteurs.
Voir Options de la fenêtre Site, page 130, Utilisation des éléments de la bibliothèque,
page 248, Utilisation de la palette de styles, page 181, Inspecteur de comportements,
page 261, Utilisation de l’inspecteur de scénarios, page 286 ou Utilisation de
l'inspecteur HTML, page 154.
Prise en main
69
Utilisation de la palette d'objets
La palette d'objets contient des boutons permettant d'insérer des objets tels que
tableaux, calques et images. Cliquez sur n'importe quel bouton ou faites glisser
l'objet vers la fenêtre Document pour créer l'objet spécifié.
Dreamweaver comprend quatre volets dans la palette d'objets : Commun,
Formulaires, Titre et Invisibles. Utilisez le menu déroulant pour basculer d'un
volet à l'autre. Vous pouvez modifier n'importe quel objet de la palette ou créer
vos propres nouveaux objets. Voir Modifier la palette d’objets et le menu Insertion,
page 308. Pour plus d'informations sur les options de chaque volet, affichez les
rubriques correspondantes dans l'aide de Dreamweaver.
Le volet Commun contient les objets les plus couramment utilisés tels que les
images, tableaux et calques.
Le volet Formulaires contient des boutons pour créer des formulaires et des
éléments.
Le volet Titre contient des objets pour l'ajout de divers éléments HEAD tels que
des balises META, TITLE et BASE.
Le volet Invisibles contient des boutons permettant de créer des objets
invisibles dans la fenêtre Document, tels que des ancres nommées. Choisissez
Affichage > Eléments invisibles pour afficher des icônes marquant les
emplacements de ces objets. Cliquez sur les icônes pour sélectionner les objets
et modifier leurs propriétés. Voir À propos des éléments invisibles, page 85.
Quelques paramètres des Préférences générales affectent la palette d'objets.
Pour modifier ces préférences, choisissez Édition > Préférences, puis
sélectionnez Général.
70
Chapitre 3
Lors de l'inspection d'objets tels que tableaux, scripts, et éléments HEAD, une
boîte de dialogue vous demande des informations supplémentaires. Vous
pouvez supprimer l'affichage de cette boîte de dialogue en désactivant l'option
Afficher la boîte de dialogue lors de l'insertion d'objets. Utilisez l'inspecteur de
propriétés pour modifier les propriétés de l'objet après l'avoir inséré.
La préférence de la palette d'objets vous permet d'afficher le contenu de la
palette sous la forme de texte, d'icônes ou d'une combinaison de texte et
d'icônes.
Utilisation des menus contextuels
Dreamweaver fait un large usage des menus contextuels qui permettent d'accéder
rapidement aux commandes et propriétés les plus utiles relatives à l'objet ou à la
fenêtre sur lequel/laquelle vous travaillez. Les menus contextuels n'affichent que
les commandes associées à la sélection en cours.
Pour utiliser les menus contextuels :
1
Ouvrez le menu contextuel.
Dans Windows, cliquez sur l'objet ou la fenêtre avec le bouton droit de la
souris.
Sur Macintosh, cliquez en maintenant la touche Contrôle enfoncée sur l'objet
ou la fenêtre.
2
Sélectionnez la commande dans le menu contextuel, puis relâchez le bouton
de la souris.
Prise en main
71
Utilisation des palettes flottantes ancrables
La plupart des palettes et des inspecteurs de Dreamweaver peuvent être combinés
en une seule palette à onglets. Cela permet d'accéder aisément aux informations
nécessaires sans encombrer l'espace de travail (le lanceur, l'inspecteur de
propriétés, la fenêtre Site, et l'inspecteur HTML ne peuvent pas être rangés de
cette façon).
Pour combiner deux ou plusieurs palettes afin de créer une palette à onglets :
1
Faites glisser une palette flottante sur une autre. Lorsque la bordure en
surbrillance apparaît sur la palette cible, relâchez le bouton.
2
Cliquez sur n'importe quel onglet de la fenêtre pour l'afficher à l'avant-plan.
Pour empêcher une palette de rejoindre la palette à onglets :
Appuyez sur la touche MAJ tout en faisant glisser la palette.
Pour retirer une fenêtre d'une palette à onglets :
Faites glisser son onglet hors de la fenêtre.
Paramétrage des préférences
Dreamweaver intègre des paramètres de préférence qui contrôlent l'aspect général
de l'interface utilisateur de Dreamweaver de même que des options liées à des
fonctions spécifiques tels que les calques, les feuilles de style, le langage HTML, les
éditeurs externes et la prévisualisation de pages dans les navigateurs. Les
informations relatives à certaines options de préférence spécifiques sont fournies
dans ce guide de l'utilisateur et la rubrique sur la fonction associée.
Les préférences suivantes affectent l'aspect général de l'espace de travail. Pour plus
d'informations sur une option de préférence spécifique, consultez la rubrique
correspondante dans l'aide de Dreamweaver.
Paramétrage des préférences pour Général
Les préférences générales permettent d'entrer des paramètres contrôlant l'aspect
général de l'interface utilisateur de Dreamweaver.
Pour modifier ces préférences, choisissez Édition > Préférences, puis Général.
72
Chapitre 3
Paramétrage des préférences pour Polices / Encodages
Utilisez ces préférences pour définir les polices par défaut et l'encodage des polices
pour Dreamweaver. Ces paramètres, tels que les préférences pour les polices du
navigateur, vous permettent de travailler avec un texte affiché avec la police et la
taille de police de votre choix, sans que cela n'affecte la manière dont les autres
utilisateurs voient le document dans un navigateur.
Pour modifier les préférences de Polices / Encodages, choisissez Édition >
Préférences, puis Polices / Encodages, et choisissez les options désirées.
Paramètres de la police Détermine le jeu de polices utilisé pour les documents
encodés dans chacun des encodages de paramètres de police. Les divers jeux de
polices doivent être installés sur la machine pour que les polices s'affichent comme
des choix lorsque vous sélectionnez des polices proportionnelles, fixes ou de type
inspecteur HTML.
Inspecteur HTML Il s'agit de la police utilisée pour tous les textes s'affichant dans
l'inspecteur HTML. Le paramétrage par défaut dépend des polices installées sur le
système.
Paramétrage des préférences pour la Barre d'état
Utilisez ces préférences pour définir les options applicables à la barre d'état qui
s'affiche au bas de la fenêtre Document.
Taille de la fenêtre Permet de personnaliser les tailles de fenêtre qui s'affichent
dans le menu déroulant de la barre d'état. Voir Redimensionnement de la fenêtre
Document, page 80.
Vitesse de connexion Détermine la vitesse de connexion (exprimée en kilobits par
seconde) utilisée pour calculer l'importance du téléchargement. La taille du
téléchargement pour la page s'inscrit dans la barre d'état. La taille du
téléchargement pour les images s'inscrit dans l'inspecteur de propriétés lorsqu'une
image est sélectionnée.
Afficher le mini-lanceur dans la barre d’état Fait en sorte que Dreamweaver affiche
le mini-lanceur au bas de la fenêtre Document. Les boutons du mini-lanceur
permettent de lancer des fenêtres, des palettes et des inspecteurs.
Prise en main
73
Paramétrage des préférences pour les palettes flottantes
Utilisez les préférences pour Palettes flottantes pour déterminer quels inspecteurs,
fenêtres et palettes s'affichent toujours en haut de la fenêtre Document.
Pour spécifier les préférences pour Palettes flottantes :
Choisissez Édition > Préférences, puis sélectionnez Palettes flottantes.
Par défaut, tous les inspecteurs, fenêtres et palettes sont paramétrés pour
s'afficher toujours dans le haut de la fenêtre Document. Si vous voulez, par
exemple, que l'inspecteur HTML passe derrière la fenêtre Document lorsqu'il
n'est pas utilisé, désactivez l'option HTML. L'inspecteur HTML ne s'affichera
dans le haut de la fenêtre Document que s'il est actif.
Paramétrages des préférences pour la surbrillance
Les préférences pour Surbrillance vous permettent de personnaliser les couleurs
utilisées pour identifier des régions du modèle et des éléments de bibliothèque
dans la fenêtre Document. Pour plus d'informations, cliquez sur l'un des éléments
suivants :
74
Chapitre 3
Pour personnaliser les couleurs de surbrillance, voir Configuration des
préférences pour les modèles, page 94.
Pour spécifier la couleur de surbrillance des éléments de bibliothèque, voir
Configuration des préférences de la bibliothèque, page 249.
Vous pouvez également spécifier une couleur pour les balises de tiers afin de
faciliter leur différenciation par rapport aux balises de Dreamweaver.
Utilisation de Dreamweaver avec d'autres
applications
Dreamweaver s'adapte à la conception de votre site web et au processus de
développement en vous permettant de travailler aisément avec d'autres
applications. Pour toute information sur le travail avec d'autres applications telles
que les navigateurs, éditeurs HTML, éditeurs d'image et autres outils
d'animation, voir les rubriques suivantes :
Pour plus d’informations sur l'utilisation de Dreamweaver avec d'autres
éditeurs HTML, tels que HomeSite ou BBEdit, voir Utilisation d'autres
éditeurs HTML, page 161.
Vous pouvez spécifier des navigateurs favoris pour la prévisualisation de votre
site. Voir Aperçu dans des navigateurs, page 151.
Vous pouvez lancer un éditeur d'image externe tel que Macromedia Fireworks,
depuis Dreamweaver. Voir Utilisation d'un éditeur d'image externe, page 192.
Pour toute information sur l'ajout d'animations à votre site avec des séquences
de l'application Flash Player, voir Insertion d'animations Flash Player, page 298.
Pour savoir comment rendre votre site interactif à l'aide de séquences vidéo
Shockwave, voir Insertion d'animations Shockwave, page 296.
Prise en main
75
76
Chapitre 3
4
CHAPITRE 4
Création de documents
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de documents – Vue d’ensemble
Les documents sont les pages que voient les utilisateurs lorsqu'ils visitent un
site web. Ils peuvent contenir du texte et des images, ou des éléments au contenu
plus sophistiqué tels que des sons, des animations et des liens vers d'autres
documents. Au fur et à mesure que vous travaillez avec des documents,
Dreamweaver génère automatiquement le code HTML sous-jacent. Utilisez
l’inspecteur HTML pour examiner ou modifier ce code.
Les documents sont créés dans Dreamweaver à l'aide de pages HTML vierges ou
de modèles. Vous pouvez également ouvrir et modifier des documents HTML
créés dans d'autres applications. Voir Création de nouveaux documents HTML,
page 78. Lorsque vous éditez un document, vous pouvez disposer son contenu sur
une page en utilisant des repères visuels tels que des grilles, des règles ou la
fonction d'alignement. Les tracés d'image vous permettent de dupliquer des
dessins de page. Voir Utilisation de guides visuels pour la conception, page 79.
Pour ajouter du texte aux documents, vous pouvez soit le taper dans la fenêtre
Document, soit coller du texte en provenance d'autres sources. Les images, barres
horizontales et autres objets sont ajoutés à l'aide de la palette d'objets ou des
commandes du menu Insertion. Voir Ajout de texte et insertion d'objets, page 82. À
mesure que vous ajoutez du contenu, vous pouvez sélectionner et modifier des
objets directement dans la fenêtre de document. Dans certains cas, vous aurez
peut être à sélectionner des marqueurs représentant des éléments de la page
invisibles dans la fenêtre de document. Voir Sélection d'éléments dans la fenêtre
Document, page 84.
77
Utilisez la boîte de dialogue Propriétés de la page pour configurer un document et
définir des éléments de base de la page. Le titre de la page identifie le document
pour l'utilisateur. Les images d'arrière-plan, les couleurs d'arrière-plan de même
que les couleurs de texte et de lien personnalisent la page et permettent de
distinguer le texte ordinaire des liens hypertexte. Voir Configuration de documents,
page 86.
Pour le choix des couleurs, vous pouvez sélectionner vos couleurs sur le bureau ou
dans la palette des couleurs en précisant que vous ne voulez exactement la même
couleur ou une couleur compatible avec le web. Voir Choix de couleurs, page 88.
Dreamweaver offre une méthode facile d’afficher et de modifier le contenu de l’entête (HEAD) sans avoir à toucher au code HTML. Voir Affichage et édition du
contenu de l'EN-TÊTE, page 90.
Création de nouveaux documents HTML
Vous pouvez créer de nouveaux documents HTML vierges dans Dreamweaver ou
baser votre nouveau document sur un modèle. Vous pouvez également ouvrir un
document HTML existant, quelle que soit la manière dont il a été créé.
Ordinairement, vous créez des documents HTML pour un site web spécifique.
Pour savoir comment créer ou éditer un site, voir Création d'un site local,
page 106.
Pour ouvrir des fichiers HTML existants :
Choisissez Fichier > Ouvrir.
Pour créer un document HTML vierge :
Choisissez Fichier > Nouveau.
Si vous ouvrez l'inspecteur HTML (choisissez Fenêtre > HTML), vous verrez
qu'il ne s'agit pas réellement d'un document vierge ; il contient des balises
HTML HEAD et BODY pour vous aider à démarrer. Lorsque vous tapez dans la
fenêtre Document ou insérez des objets tels que des tableaux et des images,
vous pouvez laisser l'inspecteur HTML s'ouvrir et surveiller la manière dont
vous créez le code source HTML.
Remarque: Lorsque vous enregistrez un nouveau fichier, n'utilisez pas de caractères ASCII
complexes (par exemple é, ç, ¥) dans le nom de fichier si vous avez l'intention de placer le
fichier sur un serveur distant. Bon nombre de serveurs coderont ces caractères lors du
téléchargement, ce qui risque de supprimer les liens avec le fichier.
78
Chapitre 4
Pour créer un nouveau document basé sur un modèle :
1
Choisissez Fichier > Nouveau à partir d'un modèle.
Une boîte de dialogue affiche la liste des modèles disponibles pour le site en
cours.
Lorsque vous utilisez un modèle, certaines parties du document sont
verrouillées de sorte qu'il est impossible de les changer. Ceci garantit une
certaine cohérence lorsque vous utilisez un modèle pour plusieurs documents
d'un site.
2
Sélectionnez un modèle, puis cliquez sur Sélectionner.
Pour changer les parties modifiables du modèle, sélectionnez le contenu de
l'espace réservé et tapez quelque chose pour le remplacer. Les parties non
modifiables du module sont signalées par une couleur de surbrillance. Pour
personnaliser les couleurs de surbrillance, voir Configuration des préférences
pour les modèles, page 94.
Pour en savoir plus sur le dessin et le travail avec des modèles, voir Modèles – Vue
d’ensemble, page 91.
Utilisation de guides visuels pour la conception
Dreamweaver offre un grand nombre de fonctions qui vous aident à concevoir des
documents et à déterminer l'aspect qu'ils auront dans un navigateur. Voici ce qu'il
vous permet de faire :
adapter instantanément la taille de la fenêtre Document à celle de la fenêtre
souhaitée afin de contrôler la disposition des éléments sur la page ;
afficher des règles afin de disposer d'un repère visuel pour le positionnement et
le redimensionnement des calques ou des tableaux ;
utiliser un tracé d'image en arrière-plan de manière à pouvoir reproduire plus
aisément un dessin créé dans une application d'édition d'illustration ou
d'image ;
utiliser la grille pour obtenir un positionnement précis des calques. Les
marques de la grille sur la page vous aident à aligner les calques et, lorsque la
fonction d'alignement sur la grille est activée, les calques sont
automatiquement alignés lorsque vous les créez ou les déplacez (d'autres objets
tels que des tableaux, des images et des paragraphes ne s'alignent pas sur la
grille).
Création de documents
79
Redimensionnement de la fenêtre Document
Les dimensions actuelles (en pixels) de la fenêtre Document, de même que plusieurs
formats de moniteur ordinaires, s'affichent dans le menu déroulant Taille de fenêtre
dans la barre d'état de la fenêtre. Pour vous aider à dessiner une page agréable
d'aspect dans une (ou diverses) résolution(s) spécifique(s), vous pouvez adapter la
fenêtre Document à l'un des formats figurant dans la liste du menu déroulant.
Pour modifier les valeurs figurant dans le menu déroulant Taille de fenêtre :
1
Choisissez Édition > Préférences, puis Barre d'état.
2
Cliquez sur n'importe quelle valeur de largeur ou de hauteur dans la liste Taille
de la fenêtre, puis tapez une nouvelle valeur.
Pour faire en sorte que la fenêtre Document s'aligne uniquement sur une
largeur spécifique (sans que sa hauteur change), sélectionnez une valeur de
hauteur et supprimez-la.
3
Cliquez sur le champ Description pour entrer un texte descriptif sur une taille
spécifique.
Par exemple, vous pourriez taper “SVGA” ou “PC moyen” à côté de l'entrée
correspondant à un moniteur d'une résolution de 800 x 600 pixels, et
“Mac 17 po.” à côté de l'entrée correspondant à un moniteur d'une résolution
de 832 x 624 pixels.
Pour ajouter une valeur au menu déroulant Taille de la fenêtre :
1
Choisissez Édition > Préférences > Barre d'état.
2
Cliquez sur la dernière valeur de la liste, puis appuyez trois fois sur la touche
tabulation pour ajouter une ligne.
3
Entrez des valeurs pour Largeur, Hauteur et Description.
Affichage de règles
Vous pouvez afficher les règles sur les bords gauche et supérieur de la page en
pixels, en pouces ou en centimètres.
Pour changer les paramètres de la règle, sélectionnez l'une des options suivantes :
80
Chapitre 4
Pour activer et désactiver les règles, choisissez Affichage > Règles > Afficher.
Pour changer l'origine, faites glisser le point zéro sur la page. Pour rétablir la
position de l'origine par défaut, choisissez Affichage > Règles > Rétablir
origine.
Pour changer l'unité de mesure, choisissez Affichage > Règles, puis
sélectionnez Pixels, Pouces ou Centimètres.
Utilisation du tracé de l'image
Utilisez un tracé de l'image comme guide pour recréer le dessin d'une page
maquettée dans une application graphique. Un tracé est une image JPG, GIF ou
PNG placé à l'arrière-plan de la fenêtre Document. Vous pouvez masquer l'image,
définir son opacité et modifier sa position.
Le tracé de l'image n'est visible que dans Dreamweaver. Il est toujours invisible
lorsque vous affichez la page dans un navigateur. Lorsque le tracé de l'image est
visible, l'image et la couleur d'arrière-plan ne sont pas visibles dans la fenêtre
Document ; en revanche, elles le sont lorsque la page est affichée dans un
navigateur.
Pour placer un tracé de l'image dans la fenêtre Document :
1
Choisissez Affichage > Tracé de l'image > Charger.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez une image, puis cliquez
sur OK.
3
La boîte de dialogue Propriétés de la page s'affiche. Spécifiez la transparence de
l'image en faisant coulisser le curseur de Transparence de l'image.
Vous pouvez également sélectionner un tracé de l'image ou modifier la
transparence du tracé de l'image actuel à tout moment dans la boîte de
dialogue Propriétés de la page en cliquant sur Modifier > Propriétés de la page.
Pour commuter l'affichage du tracé de l'image :
Choisissez Affichage > Tracé de l'image > Afficher.
Lorsque le tracé de l'image est visible, l'image et la couleur d'arrière-plan ne le
sont pas.
Pour modifier la position d'un tracé de l'image, procédez de l'une des manières
suivantes :
Pour spécifier la position du tracé de l'image, choisissez Affichage > Tracé de
l'image > Ajuster la position, puis tapez des valeurs de coordonnées X et Y.
Pour déplacer l'image par incréments d'1 pixel à la fois, utilisez les touches
fléchées
Pour déplacer l'image par incrément de 5 pixels à la fois, appuyez
simultanément sur la touche Maj et sur l'une des touches fléchées
Pour déplacer à nouveau le tracé de l'image vers le coin supérieur gauche de la
fenêtre du document (0,0), choisissez Affichage > Tracé de l'image >
Réinitialiser la position.
Création de documents
81
Pour aligner le tracé de l'image sur un objet sélectionné :
1
Sélectionnez un objet dans la fenêtre Document.
2
Choisissez Affichage > Tracé de l'image > Aligner l'image avec la sélection.
Le coin supérieur gauche du tracé de l'image est aligné sur le coin, supérieur
gauche de l'objet sélectionné.
Utilisation de la grille
Utilisez la grille comme guide visuel pour le positionnement ou le
redimensionnement des calques. Si la fonction d'alignement automatique est
activée, les calques s'alignent automatiquement sur le point de la grille le plus
proche lorsqu'ils sont déplacés ou redimensionnés. La fonction d'alignement
automatique détermine si la grille est visible ou non. Voir Alignement des calques
sur la grille, page 223.
Ajout de texte et insertion d'objets
Pour ajouter du contenu aux pages, tapez ou en collez du texte et insérez des objets
tels que des images, des tableaux et des calques.
Pour ajouter du texte au document, procédez de l'une des manières suivantes :
Tapez le texte directement dans la fenêtre Document.
Copiez du texte d'une autre application, puis positionnez le curseur dans la
fenêtre Document et choisissez Édition > Coller comme texte. La mise en
forme du texte appliquée dans l'autre application n'est pas préservée, mais les
sauts de ligne sont préservés.
Pour plus d'informations sur la mise en forme du texte, voir Formatage du texte
– Vue d’ensemble, page 167.
Pour insérer des tableaux, images et autres objets dans le document, procédez de
l'une des manières suivantes :
Utilisez les commandes du menu Insertion pour insérer les objets spécifiques
dans le document à l'emplacement du curseur.
Choisissez Fenêtre > Objets pour ouvrir la palette d'objets. Recherchez le type
d'objet de votre choix, puis cliquez dessus ou faites-le glisser pour l'insérer
dans la fenêtre Document.
Pour la plupart des objets, une boîte de dialogue s'affiche, vous invitant à
sélectionner des options ou le fichier souhaité. Pour masquer la boîte de
dialogue, choisissez Édition > Préférences, sélectionnez Général, puis
désélectionnez l'option Afficher la boîte de dialogue lors de l'insertion
d'objets.
82
Chapitre 4
Utilisation de barres horizontales
Les barres horizontales sont utiles pour organiser les informations. Sur une page, le
texte et les objets peuvent être visuellement séparés par une ou plusieurs barres.
Les barres horizontales peuvent également être utilisées pour souligner ou mettre
en valeur des titres et d'autres éléments.
Pour créer une barre horizontale :
1
Dans la fenêtre Document, placez le curseur là où vous voulez insérer une
barre horizontale.
2
Procédez de l'une des manières suivantes :
Choisissez Insertion > Barre horizontale.
Choisissez Fenêtre > Objets pour ouvrir la palette d'objets, puis cliquez sur le
bouton Barre horizontale.
Pour modifier une barre horizontale :
1
Dans la fenêtre Document, sélectionnez la barre horizontale.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
3
Modifiez la barre horizontale en changeant l'une des propriétés suivantes :
et H spécifient la largeur et la hauteur de la barre en pixels ou comme
pourcentage du format de page.
L
Aligner spécifie l'alignement de la barre (Par défaut, Gauche, Centre, Droite).
Ce paramétrage ne s'applique que si la largeur de la barre est inférieure à celle
de la fenêtre du navigateur.
spécifie si la barre est dessinée avec un ombrage. Désactivez cette
option pour dessiner la barre en couleur pleine.
Ombrage
Création de documents
83
Sélection d'éléments dans la fenêtre Document
Ordinairement, vous cliquez sur un élément pour le sélectionner. Si un élément
est invisible, vous devrez peut-être le rendre visible avant de le sélectionner.
Pour sélectionner des éléments, utilisez les techniques suivantes :
Pour sélectionner un élément dans la fenêtre Document, faites-le glisser et
cliquez dessus.
Pour sélectionner un élément invisible, choisissez Affichage > Éléments
invisibles, puis cliquez sur le marqueur de l'élément. Voir À propos des éléments
invisibles, page 85.
Certains objets apparaissent sur la page à un endroit différent de celui dans
lequel leur code est inséré. Par exemple, un calque peut se trouver n'importe
où sur la page, mais le code le définissant se trouve dans un endroit fixe.
Dreamweaver affiche des marqueurs pour montrer l'emplacement du code
pour les éléments invisibles.
Pour afficher le code HTML associé au texte ou à l'objet sélectionné,
choisissez Fenêtre > HTML pour ouvrir l'inspecteur HTML.
Pour sélectionner le code HTML sans ouvrir l'inspecteur HTML, cliquez sur
une balise dans le sélecteur de balise en bas à gauche de la fenêtre Document.
Le sélecteur de balise affiche toujours les balises contrôlant la sélection en
cours ou l'emplacement du curseur.
Par exemple, si vous avez défini un lien pour une image, le code HTML
ressemble à ceci :
<a href=”http://www.macromedia.com”><img src=”agraphic.gif” ></a>
Le fait de cliquer sur l'image dans la fenêtre Document sélectionne
<img src=”agraphic.gif”>.
Pour sélectionner le lien, cliquez sur l'image dans la fenêtre Document, puis
cliquez sur le <a> qui apparaît dans le sélecteur de balise.
84
Chapitre 4
À propos des éléments invisibles
Choisissez Affichage > Éléments invisibles pour afficher ou masquer les marqueurs
de la fenêtre Document qui représentent des éléments invisibles tels que des
formes, des ancres nommées, des commentaires et des scripts. Le fait d'afficher des
éléments invisibles vous permet de les sélectionner, de les afficher et de changer
leurs propriétés dans l'inspecteur de propriétés.
Les marqueurs d'élément qui s'affichent lorsque vous choisissez Affichage >
Éléments invisibles dépendent des paramètres du panneau Éléments invisibles de
la boîte de dialogue Préférences. Par exemple, vous pouvez spécifier que les ancres
nommées soient visibles, mais qu'il n'y ait pas de saut de ligne. Voir Paramétrage
des préférences pour les éléments invisibles, page 85.
Il est possible de créer certains éléments invisibles (commentaires, ancres
nommées, et scripts) à l'aide des boutons du panneau Invisibles de la palette
d'objets, puis de les modifier à l'aide de l'inspecteur de propriétés. Voir Utilisation
de la palette d'objets, page 70.
Paramétrage des préférences pour les éléments invisibles
Utilisez Éléments invisibles pour afficher ou masquer des marqueurs représentant
des éléments tels que des scripts, commentaires et ancres nommées non visibles
dans la fenêtre Document. L'affichage d'éléments invisibles vous permet de les
sélectionner, de les afficher et de modifier leurs propriétés dans l'inspecteur de
propriétés.
Pour modifier ces préférences, choisissez Édition > Préférences, Éléments
invisibles, puis choisissez des éléments à rendre visibles ou invisibles. Une coche
s'inscrivant à côté du nom de l’élément dans la boîte de dialogue signifie qu'il est
visible. Il faut sélectionner Affichage > Éléments invisibles pour que les marqueurs
représentant des éléments invisibles s'affichent dans la fenêtre Document.
Pour obtenir une explication sur les préférences de Éléments invisibles, voir l'aide
de Dreamweaver.
Création de documents
85
Configuration de documents
Les titres de page, les images et couleurs d'arrière-plan, de même que les couleurs
de texte et de lien sont des propriétés de base des documents HTML. Les titres de
page identifient et nomment les documents. Les images ou couleurs d'arrière-plan
définissent l'aspect global du document. Les couleurs de texte aident les
utilisateurs à distinguer le texte ordinaire des liens hypertexte, et à différencier les
liens visités de ceux qui ne l'ont pas été.
Modification du titre d'une page
Le titre d'une page HTML est un élément très important. Il aide les utilisateurs à
conserver la trace de ce qui s'affiche en cours de navigation ; il identifie aussi la
page dans les listes de l'historique et des signets. Si vous n'attribuez pas de titre à la
page, elle apparaîtra dans la fenêtre du navigateur et dans les listes de signet et de
l'historique comme Document sans titre.
Pour changer le titre d'une page :
1
Procédez de l'une des manières suivantes :
Choisissez Modifier > Propriétés de la page.
Cliquez sur Propriétés de la page dans le menu contextuel qui s'affiche lorsque
vous cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche
Contrôle enfoncée (Macintosh) dans la fenêtre Document.
Choisissez Affichage > Contenu de l'en-tête, puis cliquez sur le bouton Titre.
2
Tapez le titre de la page dans le champ Titre, puis cliquez sur OK.
Le titre s'affiche dans la barre de titre de la fenêtre Document. Le nom de
fichier de la page et du répertoire dans lequel le fichier est enregistré
s'inscrivent entre parenthèses à côté du titre.
86
Chapitre 4
Définition d'une image d'arrière-plan ou d'une couleur de page
Utilisez la boîte de dialogue Propriétés de la page pour définir une image ou une
couleur pour l'arrière-plan de la page. Si vous utilisez une image et une couleur
d'arrière-plan, la couleur s'affiche pendant le téléchargement de l'image. Si l'image
d'arrière-plan comprend des pixels transparents, la couleur d'arrière-plan filtre.
Pour définir une image ou une couleur d'arrière-plan :
1
Choisissez Modifier > Propriétés de la page, ou sélectionnez Propriétés de la
page dans le menu contextuel.
2
Entrez le chemin d'accès de l'image d'arrière-plan dans le champ Image
d'arrière-plan, ou cliquez sur l'icône de répertoire pour naviguer jusqu'à
l'image et la sélectionner.
Dreamweaver génère une mosaïque (réplique) de l'image d'arrière-plan si elle
ne remplit pas entièrement la fenêtre du navigateur.
3
Sélectionnez une couleur d'arrière-plan dans la palette Couleur d'arrière-plan.
Voir Choix de couleurs, page 88.
Paramétrage des couleurs de texte par défaut
Définissez des couleurs par défaut pour le texte ordinaire, les liens, les liens visités
et les liens actifs dans la boîte de dialogue Propriétés de la page, ou choisissez une
palette de couleurs prédéfinie pour déterminer les couleurs de l'arrière-plan et du
texte. Voir Choix de couleurs, page 88.
Pour définir les couleurs de texte par défaut, procédez de l'une des manières
suivantes :
Choisissez Modifier > Propriétés de la page, puis paramétrez la couleur des
options Couleur du texte, Couleur du lien, Liens visités et Liens actifs.
Choisissez Commandes > Définir palette de couleurs, puis choisissez une
couleur d'arrière-plan et une combinaison de couleurs pour le texte et les liens.
La zone d'échantillonnage affiche l'aspect que donnera la palette de couleurs
dans le navigateur.
Création de documents
87
Choix de couleurs
Bon nombre de boîtes de dialogue et d'inspecteurs de propriétés de Dreamweaver
offrent une case couleur permettant d'accéder à une palette de couleurs. Utilisez la
palette de couleurs pour choisir la couleur d'un élément.
Pour choisir une couleur dans Dreamweaver :
1
Cliquez sur la case couleur de n'importe quelle boîte de dialogue ou inspecteur
de propriétés.
Case couleur
88
Chapitre 4
2
Pour choisir une couleur, procédez de l'une des manières suivantes :
Utilisez le compte-gouttes pour sélectionner un échantillon de couleur dans la
palette. Toutes les couleurs de la palette sont adaptées pour le web.
Utilisez le compte-gouttes pour sélectionner n'importe quelle couleur du
bureau.
Cliquez sur le bouton du compte-gouttes adapté pour le web pour limiter la
sélection aux couleurs adaptées pour le web. Lorsque cette option est activée,
la couleur sélectionnée s'aligne sur la couleur adaptée pour le web la plus
proche.
Cliquez sur le bouton de l'effaceur pour effacer la couleur actuelle sans la
remplacer par une autre.
Cliquez sur le bouton Palette pour ouvrir le sélectionneur de couleur du
système. Ces couleurs ne sont pas limités aux couleurs adaptées pour le web.
À propos des couleurs adaptées pour le web
Dans les documents HTML, les couleurs sont exprimées soit par des valeurs
hexadécimales (par exemple, #FF0000) soit par des noms (rouge). Les couleurs
communes à Netscape Navigator et Microsoft Internet Explorer tant sous
Windows que sur Macintosh en mode 256 couleurs sont des couleurs adaptées
pour le web. Par convention, il y a 216 couleurs communes, et toute valeur
hexadécimale combinant les codes 00, 33, 66, 99, CC ou FF (correspondant
respectivement aux valeurs RVB 0, 51, 102, 153, 204 et 255) représente une
couleur adaptée pour le web.
Des tests ont cependant révélé qu'il n'y a en réalité que 212 couleurs qualifiables
d'adaptées pour le web. Internet Explorer sous Windows ne rend pas correctement
les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et
#33FF00 (51,255,0).
Tous les sélecteurs de couleur de Dreamweaver utilisent la palette de 212 couleurs
adaptées pour le web. Lorsque vous sélectionnez une couleur dans la palette, le
programme en affiche la valeur hexadécimale. Bien que les quatre couleurs
précitées ne figurent pas dans la palette de Dreamweaver, vous pouvez modifier
manuellement la valeur hexadécimale de n'importe quel champ de manière à lui
attribuer la couleur de votre choix.
Pour choisir une couleur ne figurant pas dans la gamme des couleurs adaptées
pour le web, cliquez sur le bouton Palette dans le coin inférieur droit pour ouvrir
le sélectionneur de couleur du système.
Les versions UNIX de Navigator utilisent une palette de couleurs différentes de
celle des versions Windows et Macintosh. Si vous développez exclusivement pour
des plates-formes UNIX (ou si votre public cible est constitué d'utilisateur de
Windows ou Macintosh équipés de moniteurs 24 bits et d'utilisateurs d'UNIX
équipés de moniteurs 8 bits), songez à utiliser des valeurs hexadécimales
combinant les paires 00, 40, 80, BF ou FF, qui produisent des couleurs adaptées
pour le web sur les machines tournant sous SunOS.
Détermine le code HTML des caractères et des polices utilisés pour afficher le
document.
Création de documents
89
Affichage et édition du contenu de l'EN-TÊTE
Les fichiers HTML comprennent deux sections principales : l'EN-TÊTE et le CORPS.
Le CORPS est la partie du document que l'utilisateur peut voir dans la fenêtre d'un
navigateur (et dans la fenêtre Document de Dreamweaver). L'EN-TÊTE est
généralement invisible, à l'exception du TITRE, qui s'inscrit dans la barre de titre
tant dans le navigateur que dans la fenêtre Document et est utilisé comme libellé
pour les signets du document.
L'EN-TÊTE contient des informations importantes en plus de celle du TITRE,
notamment le type de document, le langage d'encodage, les fonctions et variables
JavaScript et VBScript, et autres mots clés et indicateurs de contenu pour
permettre la détection par les moteurs de recherche. Vous pouvez afficher les
éléments de l'EN-TÊTE à l'aide du menu Affichage ou de l'inspecteur HTML.
Pour afficher les éléments de l'EN-TÊTE d'un document :
Choisissez Affichage > Contenu de l'en-tête. Pour chaque élément de l'ENTÊTE, une icône s'affiche dans le haut de la fenêtre Document.
Pour insérer des éléments dans l'EN-TÊTE d'un document :
1
Choisissez En-tête dans le menu contextuel en haut de la palette d'objets.
2
Cliquez sur l'un des boutons de la palette d'objets.
3
Entrez les options applicables à l’élément dans la boîte de dialogue qui s'affiche
ou dans l'inspecteur de propriétés.
Pour modifier des éléments de l'EN-TÊTE d'un document :
1
Cliquez sur l'une des icônes de la zone de l'en-tête pour la sélectionner.
2
Définissez ou modifiez les propriétés de l’élément dans l'inspecteur de
propriétés.
Pour plus d'informations sur les propriétés de certains éléments d'EN-TÊTE
spécifiques, consultez les rubriques suivantes dans les pages d'aide de Dreamweaver :
90
Chapitre 4
Propriétés META
Propriétés du titre
Propriétés des mots clés
Propriété s de la description
Propriétés d'actualisation
Paramétrage des propriétés de script
Propriétés de la base
Propriétés du lien
5
CHAPITRE 5
Utilisation des modèles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modèles – Vue d’ensemble
Les modèles vous permettent de créer, pour votre site, des documents ayant une
structure et une apparence communes. Les modèles sont utiles si vous voulez que
toutes les pages d'un site partagent certaines caractéristiques, qu'il s'agisse de la
création d'un nouveau site ou de la mise à jour d'un site existant. Plutôt que de
définir les propriétés correctes pour chaque nouvelle page ou d'apporter des
modifications séparément à chaque page, les modèles vous permettent d'apporter
des modifications à plusieurs pages à la fois.
Lorsque vous créez un modèle, vous pouvez indiquer les éléments de la page qui
doivent rester constants (non modifiables) et ceux qui peuvent changer. Par
exemple, si vous publiez un magazine en ligne, il est probable que l'ours ne
changera pas. En revanche le titre et le contenu de l'éditorial changeront à chaque
édition. Pour indiquer le style et l'emplacement de l'éditorial, vous pouvez utiliser
un espace de texte réservé et le définir comme région modifiable. Pour ajouter un
nouvel éditorial, le rédacteur sélectionne simplement l'espace réservé et y tape son
article.
Vous pouvez modifier un modèle, même après l'avoir utilisé pour créer des
documents. Lorsque vous mettez des documents à jour en utilisant leur modèle,
les sections non modifiables de ceux-ci sont mises à jour en fonction des
modifications apportées au module.
91
Création des modèles
Vous pouvez créer un modèle à partir d'un document HTML existant, puis le
modifier pour qu'il réponde à vos besoins, ou créer un modèle à partir de rien, en
commençant par un document HTML vierge.
Les modèles sont automatiquement stockés dans le sous-répertoire Templates du
répertoire racine local du site. Le cas échéant, lorsque vous créez un nouveau
modèle, le répertoire Templates est créé s'il n'existe pas encore.
Pour enregistrer un document existant comme modèle :
1
Choisissez Fichier > Ouvrir, puis sélectionnez un document existant.
2
Choisissez Fichier > Enregistrer comme modèle.
3
Dans la boîte de dialogue qui s'affiche, sélectionnez un site et tapez un nom
pour le modèle dans le champ Enregistrer sous.
4
Cliquez sur Enregistrer.
Pour créer un nouveau modèle vide :
1
Choisissez Fenêtre > Modèles.
2
Dans la palette des modèles, cliquez sur Nouveau.
Un nouveau modèle, sans titre, est ajouté à la liste de modèles de la palette.
3
Tandis que le modèle est encore sélectionné, tapez un nom.
Pour modifier un modèle, procédez de l'une des manières suivantes :
1
Choisissez Fenêtre > Modèles.
2
Dans la palette des modèles, double-cliquez sur le nom du modèle.
Paramétrage des propriétés de page du modèle
Les propriétés de page du modèle contrôlent toutes les options du document à
l'exception du titre de la page. Pour tout document utilisant un modèle, les
changements à ses propriétés de page (à l'exception du titre) sont ignorés. Pour
charger les propriétés d'une page après qu'un modèle lui a été appliqué, modifiez
les propriétés de page du modèle, puis mettez à jour les pages auxquelles il est
appliqué. Voir Modification des modèles et mise à jour du site, page 101.
Pour définir les propriétés de page du modèle :
1
Ouvrez le modèle et choisissez Modifier > Propriétés de la page.
2
Spécifiez les options souhaitées pour la page, puis cliquez sur OK.
Pour en savoir plus sur les propriétés de page, consultez les pages d'aide de
Dreamweaver.
92
Chapitre 5
Définition des régions modifiables d'un modèle
Un modèle comprend deux types de régions : modifiables et verrouillées (non
modifiables). Les régions modifiables sont les sections du modèle dont le contenu
est changeant, telles qu'un article de bulletin d'informations. Les régions
verrouillées sont les sections du modèle dont le contenu est statique, non
changeant, telles qu'un logo ou des éléments standard de navigation sur le site.
Par défaut, les modèles sont verrouillés. Vous pouvez y ajouter du contenu mais,
lorsque vous l'enregistrez, tout le contenu est marqué comme non modifiable. Si
vous créez un document à partir d'un tel modèle, Dreamweaver vous avertit que le
document ne contiendra pas de régions modifiables. Pour qu'un modèle soit utile,
vous devez créer des régions modifiables, marquer le contenu existant comme
modifiable, ou ajouter du contenu et le marquer comme modifiable.
Pendant que vous éditez le modèle lui-même, vous pouvez apporter des
modifications aux régions tant modifiables que verrouillées. En revanche, une fois
le modèle appliqué à un document, vous ne pouvez plus modifier que les régions
modifiables du document ; les régions verrouillées ne sont plus modifiables.
Pour définir un contenu existant comme région modifiable :
1
Sélectionnez le texte ou le contenu que vous voulez rendre modifiable.
2
Choisissez Modifier > Modèles > Marquer la sélection comme modifiable.
3
Dans la boîte de dialogue Nouvelle région modifiable, tapez un nom pour la
région.
Le texte ou le contenu apparaît en surbrillance dans le modèle.
Vous pouvez marquer comme modifiable un tableau tout entier aussi bien
qu'une seule cellule de tableau. En revanche, vous ne pouvez pas marquer
plusieurs cellules comme modifiables en une fois. Les calques et leur contenu
sont des éléments séparés pouvant tous deux être marqués comme modifiables.
Le fait de marquer un calque comme modifiable vous permet d'en modifier la
position ; le fait de marquer son contenu comme modifiable vous permet d'en
modifier le contenu.
Utilisation des modèles
93
Pour définir une nouvelle région modifiable :
1
Placez le curseur à l'endroit où vous voulez insérer une région modifiable.
2
Choisissez Modifier > Modèles > Nouvelle région modifiable.
3
Dans la boîte de dialogue Nouvelle région modifiable, tapez un nom pour la
région.
Le nom de la région, entouré d'accolades comme dans {nom de la région}, est
inséré dans le modèle sous la forme d’un espace réservé en surbrillance.
Lorsque le modèle est appliqué à un document, vos pouvez remplacer l'espace
réservé par du texte, des images ou tout autre contenu.
Remarque: Les caractères suivants ne sont pas valides pour les noms de région :
apostrophes ('), guillemets ("), crochets pointus (< >) et perluètes (&).
Configuration des préférences pour les modèles
Vous pouvez personnaliser les couleurs de surbrillance des régions modifiables et
verrouillées d'un modèle dans les préférences pour la surbrillance. La couleur de la
région modifiable apparaît dans le modèle lui-même. La couleur de la région
verrouillée apparaît dans les documents utilisant le modèle.
Pour modifier les couleurs de surbrillance d'un modèle :
1
Choisissez Édition > Préférences, puis sélectionnez Surbrillance.
2
Cliquez sur la case couleur Régions modifiables, puis sélectionnez une couleur
de surbrillance. Procédez de même pour les régions verrouillées.
3
Activez l'option Afficher pour afficher ces couleurs dans la fenêtre Document.
4
Cliquez sur OK.
Pour afficher les couleurs de surbrillance dans la fenêtre du document :
Choisissez Affichage > Éléments invisibles.
Les couleurs de surbrillance ne s'affichent dans la fenêtre du document que
lorsque l'option Affichage > Éléments invisibles est activée.
94
Chapitre 5
Affichage de régions modifiables et verrouillées
Les régions modifiables et verrouillées apparaissent dans la fenêtre Document
comme du texte et des objets en surbrillance. Pour plus d'informations sur le
paramétrage des préférences pour la surbrillance, voir Configuration des préférences
pour les modèles, page 94.
Dans les modèles, les régions modifiables sont en surbrillance. Vous pouvez
cependant apporter des modifications aux éléments de contenu tant modifiables
que verrouillés.
Les régions
verrouillées et
modifiables
peuvent être
éditées
Régions modifiables
en surbrillance
Utilisation des modèles
95
Dans les documents utilisant des modèles, les régions verrouillées sont en
surbrillance. Vous ne pouvez apporter des modifications qu'au contenu modifiable
(non en surbrillance).
Régions verrouillées en
surbrillance
Seules les
régions
modifiables
peuvent être
éditées
Affichage de codes HTML modifiables et verrouillés
Le contenu modifiable est délimité dans le code HTML par des commentaires de
Dreamweaver #BeginEditable et #EndEditable. Le code HTML pour un espace
réservé modifiable nommé région modifiable présenterait l'aspect suivant :
<!-- #BeginEditable "Edit-Region" -->
{région modifiable}
<!-- #EndEditable -->
Le code HTML d’un tableau modifiable nommé Edit-Table présenterait l’aspect suivant :
<!-- #BeginEditable "Edit-Table" -->
<table width="77%" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<!-- #EndEditable -->
96
Chapitre 5
Pour les modèles, les régions modifiables sont en surbrillance dans la fenêtre
HTML. Vous pouvez cependant apporter des modifications au code source
HTML tant modifiable que verrouillé.
Le code HTML
modifiable
apparaît en
surbrillance
Possible éditer
régions
modifiables et
verrouillées
Utilisation des modèles
97
Pour les documents utilisant des modèles, les régions verrouillées apparaissent en
surbrillance dans la fenêtre HTML. Vous ne pouvez apporter de modifications
qu'au code source HTML modifiable (non en surbrillance).
HTML
verrouillé en
surbrillance
Possible éditer
HTML
modifiable
seul
Annulation du marquage d'une région
Si vous marquez une région comme modifiable et souhaitez ensuite la rendre non
modifiable (la verrouiller), utilisez la commande Rendre la région non modifiable.
Pour ne plus marquer une région (la rendre non modifiable) :
1
Choisissez Modifier > Modèles > Rendre la région non modifiable.
2
Sélectionnez le nom de la région dans la liste, puis cliquez sur OK.
La région est verrouillée.
98
Chapitre 5
Utilisation de styles, de scénarios et de comportements dans des
modèles
Les styles, scénarios et comportements personnalisés sont totalement pris en
charge par les modèles. Cependant, tout document utilisant un modèle ne peut
pas avoir sa propre feuille de style, ni ses propres scénarios ou comportements ; il
doit utiliser une feuille de style, des scénarios et des comportements définis pour le
modèle. Ceci est dû au fait que les styles, les scénarios et les comportements
comprennent tous des composants dans la section HEAD du document, qui n'est
pas modifiable dans les documents basés sur des modèles.
Les styles, scénarios et comportements ne peuvent être appliqués qu'aux régions
modifiables d'un document basé sur un modèle. Pour plus d'informations sur
l'utilisation des styles, voir Formatage du texte avec des feuilles de style, page 174.
Pour plus d'informations sur les scénarios et les comportements, voir Ajout
d’interactivité et d’animation – Vue d'ensemble dans les pages d’aide HTML de
Dreamweaver.
Utilisation de la palette de modèles
Utilisez la palette des modèles pour créer de nouveaux modèles et gérer les
modèles existants.
Pour ouvrir la palette des modèles :
Choisissez Fenêtre > Modèles.
Le volet supérieur de la palette des modèles affiche la liste de tous les modèles
disponibles pour le site. Le volet inférieur affiche le contenu du modèle
sélectionné.
Pour modifier un modèle :
Sélectionnez un modèle dans la liste et cliquez sur Ouvrir, ou double-cliquez
sur le nom du modèle dans la liste.
Pour renommer un modèle :
Cliquez une fois sur le nom du modèle sélectionné. Lorsque le nom devient un
champ modifiable, entrez un nouveau nom.
Lorsque vous renommez un modèle, les références à celui-ci ne sont pas
automatiquement mises à jour. Pour mettre à jour la référence, vous devez
appliquer le modèle renommé à un document. Voir Création de documents basés
sur des modèles, page 100.
Utilisation des modèles
99
Création de documents basés sur des modèles
Vous pouvez utiliser un modèle comme point de départ pour un nouveau
document ou l'appliquer à un document existant.
Pour créer un nouveau document basé sur un modèle, procédez de l'une des
manières suivantes :
Choisissez Fichier > Nouveau à partir d'un modèle. Dans la boîte de dialogue
qui s'affiche, sélectionnez un modèle, puis cliquez sur Sélectionner.
Créez un nouveau document, puis appliquez-lui un modèle de la palette des
modèles en le faisant glisser.
Pour appliquer un modèle à un document existant, procédez de l'une des
manières suivantes :
Choisissez Modifier > Modèles > Appliquer le modèle à la page. Sélectionnez
un modèle dans la liste, puis cliquez sur Sélectionner.
Faites glisser le modèle de la palette vers la fenêtre Document.
Sélectionnez le modèle dans la palette, puis cliquez sur Appliquer à la page.
Lorsque vous appliquez un modèle à un document existant, le contenu du
modèle est ajouté au document.
Si le document est déjà basé sur un modèle, Dreamweaver essaie d'établir une
correspondance entre les régions modifiables portant le même nom dans les
deux modèles, et d'insérer le contenu des régions modifiables du modèle
précédent dans les régions modifiables du nouveau.
Si certaines régions modifiables ne correspondent pas ou si une région
modifiable du modèle précédent n'a pas d'équivalent dans le nouveau modèle,
une boîte de dialogue vous invite à supprimer les régions superflues ou à les
transférer dans le nouveau modèle. S'il y a d'autres régions modifiables dans le
nouveau modèle, elles apparaîtront dans les documents comme des espaces
réservés.
100
Chapitre 5
Recherche des régions modifiables d'un document
Toutes les régions modifiables du corps d'un modèle sont répertoriées dans la liste
figurant au bas du menu Modifier > Modèles. Utilisez cette liste pour sélectionner
et modifier les régions.
Pour rechercher une région modifiable et la sélectionner dans le document :
Choisissez Modifier > Modèles, puis sélectionnez le nom de la région dans la
liste.
La région est sélectionnée dans le document. Commencez à taper pour
remplacer le contenu de la région.
Détachement d'un document d'un modèle
Pour apporter des modifications aux régions tant modifiables que verrouillées
d'une page utilisant un modèle, vous devez commencer par détacher la page du
modèle. Cela fait, vous pouvez modifier la page comme si aucun modèle ne lui
avait été appliqué. En revanche, la page ne sera plus mise à jour en cas de
modification du modèle.
Pour détacher un document d'un modèle :
Choisissez Modifier > Modèles > Détacher de NomDuModèle.dwt.
La page est détachée du modèle et toutes les régions deviennent modifiables.
Modification des modèles et mise à jour du site
Lorsque vous apportez des modifications à un modèle que vous utilisez dans le site
en cours, Dreamweaver vous invite à mettre à jour les pages utilisant ce modèle.
Vous pouvez également utiliser les commandes de mise à jour pour mettre
manuellement à jour la page courante ou le site tout entier. L'application des
commandes de mise à jour a le même effet que la réapplication du modèle.
Pour ouvrir le modèle utilisé pour créer le document en cours :
Choisissez Modifier > Modèles > Ouvrir NomDuModèle.dwt.
Pour mettre à jour le document en cours sur la base de la version la plus récente
d'un modèle :
Choisissez Modifier > Modèles > Mettre à jour la page en cours.
Utilisation des modèles
101
Pour mettre à jour le site entier ou tous les documents utilisant un module
particulier :
1
Choisissez Modifier > Modèles > Mettre à jour les pages.
La boîte de dialogue Mettre à jour les pages s'affiche.
2
Dans l'option Regarder dans, procédez de l'une des manières suivantes :
Sélectionnez Site entier, puis sélectionnez le nom du site. Cette opération met
à jour toutes les pages du site sélectionné en se basant sur leur modèle.
Sélectionnez Fichiers utilisant, puis sélectionnez le nom du modèle. Cette
opération met à jour toutes les pages du site en cours qui se basent sur le
modèle sélectionné.
Remarque : Si vous avez renommé un modèle, vous devez commencer par le
réappliquer à tous les documents y faisant référence avant de mettre à jour le site tout
entier. Voir Utilisation de la palette de modèles, page 99.
3
Dans la rubrique Mettre à jour, assurez-vous que l'option Modèles est activée.
4
Cliquez sur Démarrer.
Importation et exportation de contenu XML
Utilisez les fonctions d'importation et d'exportation XML pour séparer les régions
modifiables des régions verrouillées dans les documents utilisant des modèles, ou
pour fusionner les régions modifiables d'un document avec un modèle existant.
Ceci permet d'exporter du contenu modifiable et de le modifier, ou de développer
du contenu en dehors de Dreamweaver.
Pour exporter les régions modifiables d'un document sous XML :
1
Choisissez Fichier > Ouvrir, puis ouvrez un document basé sur un modèle (et
contenant des régions modifiables).
2
Choisissez Fichier > Exporter > Exporter les régions modifiables sous XML.
3
Dans la boîte de dialogue XML qui s'affiche, choisissez une notation de balise,
puis cliquez sur OK.
Pour plus d'informations sur les notations de balise, voir À propos des notations
de balises XML, page 103.
4
Dans la boîte de dialogue qui s'affiche, tapez un nom pour le fichier XML,
puis cliquez sur Enregistrer.
Lorsque vous exportez un document, le fichier XML ainsi généré contient le
nom du modèle sur lequel le document est basé, de même que les noms de
toutes les régions modifiables.
102
Chapitre 5
Pour importer du contenu XML :
1
Choisissez Fichier > Importer XML dans le modèle.
2
Sélectionnez le fichier XML, puis cliquez sur Ouvrir.
Une fois le fichier XML importé, Dreamweaver en fusionne le contenu XML
avec le modèle spécifié dans le fichier XML et affiche le résultat dans la
nouvelle fenêtre Document. S'il ne trouve pas le modèle spécifié,
Dreamweaver vous invite à sélectionner le modèle à utiliser.
À propos des notations de balises XML
Dreamweaver vous permet d'exporter du contenu à l'aide de l'une des deux
notations de balises : les balises de nom de région modifiable ou les balises XML
standard. Le choix du type de notation dépend de la manière dont le contenu
XML est incorporé dans le site Web.
Le code XML suivant a été exporté d'un document sur la base d'un modèle
nommé newstemplate. Le document présente une seule région modifiable,
nommée Edit-Region.
Les balises de nom de région modifiable utilisent les noms de région. Dans cet
exemple, la balise doctitle identifie le titre du modèle et la balise Edit-Region
identifie la région modifiable.
<doctitle>
<![CDATA[<titre>modèleInfos</title>]]>
</doctitle>
<Edit-Region>
<![CDATA[{Edit-Region}]]>
</Edit-Region>
Les balises XML standard de Dreamweaver utilisent la balise item name. Dans
cet exemple,
item name="doctitle" et item name="Edit-Region" sont utilisés pour identifier le
titre du modèle et la région modifiable.
<item name="doctitle">
<![CDATA[ <title>modèleInfos</title>]]>
</item>
<item name="Edit-Region">
<![CDATA[{Edit-Region}]]></item>
</item>
Utilisation des modèles
103
104
Chapitre 5
6
CHAPITRE 6
Planification du site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Planification du site – Vue d’ensemble
Un site est un emplacement de stockage des documents appartenant à un site
Web. Les sites peuvent résider sur serveur local ou distant. Pour prendre
Dreamweaver en main, vous devez commencer par créer un site local. Voir
Création d'un site local, page 106.
Une fois le site local créé, utilisez des liens pour relier les documents du site entre
eux, à des documents figurant sur des sites distants, ou à des adresses ou scripts email. Voir Création de liens, page 107
Pour vous aider à gérer le site, Dreamweaver affiche son contenu, soit comme une
liste de fichiers, soit comme une carte. Vous pouvez utiliser cette carte du site pour
créer rapidement et afficher des prototypes de vos sites. Voir Travail avec les fichiers
du site, page 117 et Création de cartes de site, page 118.
105
Création d'un site local
Un site local requiert un nom et un répertoire racine local indiquant à
Dreamweaver l'emplacement où vous souhaitez conserver les fichiers du site. Vous
devez créer un site local pour chaque site Web sur lequel vous travaillez.
Plus tard, lorsque vous serez prêt à publier et tester le site sur un serveur distant,
vous pourrez ajouter des informations sur le site. Pour plus d'informations sur les
sites distants, voir Définition d'un site, page 128.
Pour créer un site local :
1
Choisissez Site > Nouveau site.
2
Dans la boîte de dialogue Définition du site, sélectionnez l'option Infos locales
dans la liste Catégorie.
3
Entrez les options suivantes :
Nom du site identifie le site. Le nom du site apparaît dans la fenêtre Site et
dans le sous-menu Site > Ouvrir site.
spécifie le dossier du disque dur où seront stockés les
fichiers, modèles et éléments de bibliothèque du site. Lorsque Dreamweaver
résout des liens relatifs à la racine, c'est par rapport à ce dossier qu'il le fait.
Tapez un chemin d'accès ou cliquez sur l'icône de répertoire pour naviguer
vers un fichier et le sélectionner.
Dossier racine local
Adresse HTTP identifie l'URL du site de sorte que les liens au sein du site qui
utilisent des URL absolues peuvent être vérifiés. Voir Vérification des liens entre
documents, page 149.
crée un cache local pour améliorer la vitesse des tâches de gestion des
liens et du site. Si vous ne sélectionnez pas cette option, Dreamweaver vous
demandera de nouveau de créer un cache avant de créer le site.
Cache
4
106
Chapitre 6
Cliquez sur OK.
Création de liens
Les liens sont des connexions avec des documents de votre site ou d'autres sites
Web. Vous pouvez créer des liens dans la fenêtre Document à l'aide de l'inspecteur
de propriétés ou du menu Modifier.
Dreamweaver permet de créer des liens de plusieurs façons :
Utilisez l'icône Pointer vers un fichier pour pointer vers le fichier avec lequel
vous voulez établir le lien. Voir Création de liens avec l'icône Pointer vers un
fichier, page 108.
Utilisez l'inspecteur de propriétés pour créer des liens de façon plus
traditionnelle en tapant un chemin d'accès vers un fichier ou en naviguant vers
le fichier sur le disque. Voir Établissement d'un lien vers un document, page 110.
Utilisez des ancres nommées pour sauter vers certains endroits d'un document.
Voir Établissement d'un lien vers une ancre nommée, page 111.
Utilisez des liens e-mail, nowhere et script pour ouvrir des programmes de
messagerie électronique et avoir accès à des événements JavaScript ou pour
exécuter un code JavaScript. Voir Création de liens e-mail, nowhere et script,
page 112.
Vous pouvez également utiliser la carte du site pour créer des liens. Voir
Création et modification de liens dans un affichage de carte de site, page 123.
Utilisez la fenêtre Document ou un navigateur pour tester tous les liens. Voir
Test des liens, page 113.
Avant de créer des liens, soyez certain de comprendre la différence entre un
chemin d'accès relatif et un chemin d'accès absolu et la manière de désigner
chaque type de chemin. Voir À propos des chemins relatifs et absolus, page 114.
Planification du site
107
Création de liens avec l'icône Pointer vers un fichier
Créez des liens à l'aide de l'icône Pointer vers un fichier afin de pointer vers un
autre document ouvert, un fichier figurant dans la fenêtre Site ou une ancre visible
dans un document ouvert. L'icône Pointer vers un fichier s'affiche dans
l'inspecteur de propriétés et dans la carte du site lorsque vous sélectionnez un
fichier. Elle s'affiche également lorsque vous faites glisser une sélection tout en
tenant la touche Maj enfoncée.
Pour établir un lien vers un document à l'aide de l'icône Pointer vers un fichier
dans l'inspecteur de propriétés :
1
Sélectionnez du texte ou une image dans la fenêtre Document.
2
Faites glisser l'icône Pointer vers un fichier de l'inspecteur de propriétés et
pointez vers un autre document ouvert, une ancre visible dans un document
ouvert ou un fichier dans la fenêtre Site.
Le champ Lien est mis à jour pour indiquer le lien.
3
Relâchez le bouton de la souris pour créer le lien.
Glissement de l'icône Pointer vers un fichier de l'inspecteur de propriétés vers un
fichier de la fenêtre Site.
Pour créer un lien à partir d'une sélection dans un document ouvert :
1
Sélectionnez du texte dans la fenêtre Document.
2
Faites glisser la souris à partir de la sélection, en tenant la touche Maj
enfoncée.
L'icône Pointer vers un fichier s'affiche lorsque vous commencez à faire glisser
la souris.
3
108
Chapitre 6
Pointez vers un autre document ouvert, une ancre visible dans un document
ouvert ou un fichier dans la fenêtre Site.
4
Relâchez le bouton de la souris pour créer le lien.
Glissement de l'icône Pointer vers un fichier d'une sélection dans un document (en
maintenant la touche Maj enfoncée) vers un fichier dans la fenêtre Site.
Pour créer un lien depuis un fichier dans la carte du site :
1
Sélectionnez une page HTML dans la carte du site.
L'icône Pointer vers un fichier s'affiche à côté du fichier.
2
Faites glisser l'icône Pointer vers un fichier et pointez vers un autre document
ouvert, une ancre visible dans un document ouvert ou un fichier dans la
fenêtre Site.
Glissement de l'icône Pointer vers un fichier depuis un fichier sélectionné dans la
carte du site vers un fichier de la vue des fichiers du site de la fenêtre Site.
Pour plus d'informations sur la création d'une carte du site, voir Création de cartes
de site, page 118.
Planification du site
109
Établissement d'un lien vers un document
Utilisez l'inspecteur de propriétés pour lier une image ou une partie du texte du
document en cours à un autre document.
Pour créer des liens entre documents :
1
Sélectionnez du texte ou une image dans la fenêtre Document.
2
Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et exécutez l'une des
opérations suivantes :
Tapez un chemin dans le champ Lien.
Pour créer un lien vers un document de votre site, entrez un chemin relatif au
document ou à la racine. Pour créer un lien vers un document situé en dehors
du site, entrez un chemin absolu.
Cliquez sur l'icône de répertoire pour naviguer jusqu'à un fichier et le
sélectionner.
Le chemin d'accès du fichier s'affiche dans le champ URL. Utilisez l'option
Relatif à pour faire en sorte que le chemin soit relatif au document ou à la
racine du site. Cliquez sur Sélectionner.
Faites glisser un fichier de la fenêtre Site dans le champ Lien de l'inspecteur de
propriétés.
3
Pour faire en sorte que le document lié s'affiche ailleurs que dans la fenêtre ou
le cadre en cours, sélectionnez un nom de cadre dans le menu déroulant Cible
ou choisissez l'une des cibles réservées suivantes :
_blank
Charge le document lié dans une nouvelle fenêtre de navigateur sans
nom.
110
Chapitre 6
Charge le document liée dans le jeu de cadres parent ou la fenêtre du
cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le
document lié se charge dans toute la fenêtre du navigateur.
_parent
_self
_top
Charge le document lié dans le même cadre ou la même fenêtre que le
lien. Il s'agit de la cible par défaut, de sorte qu'il est le plus souvent inutile de
la spécifier.
Charge le document lié dans toute la fenêtre du navigateur, en effaçant
tous les cadres.
Établissement d'un lien vers une ancre nommée
Les ancres nommées marquent des positions spécifiques dans un document.
Utilisez des ancres nommées pour sauter à une position marquée dans le
document en cours ou pour créer un lien vers une position marquée dans un autre
document.
Pour créer une ancre nommée :
1
Dans la fenêtre Document, placez le curseur là où vous voulez insérer l'ancre
nommée.
2
Procédez de l'une des manières suivantes :
Choisissez Insertion > Ancre nommée.
Choisissez Fenêtre > Objets, sélectionnez Invisibles dans le menu déroulant en
haut de la palette d'objets, puis cliquez sur le bouton Ancre.
3
Dans la boîte de dialogue qui s'affiche, tapez un nom pour l'ancre.
Si le marqueur d'ancre ne s'affiche pas à l'emplacement du curseur, choisissez
Affichage > Éléments invisibles.
Pour créer un lien vers une ancre nommée :
1
Sélectionnez du texte ou une image dans la fenêtre Document.
2
Dans l'inspecteur de propriétés, tapez le signe dièse (#) et le nom de l'ancre
dans le champ Lien. Par exemple :
Pour créer un lien vers une ancre nommée "deux" du fichier en cours, tapez
#deux.
Pour créer un lien vers une ancre nommée "deux" dans un autre fichier
figurant dans le même répertoire, tapez NomDuFichier.html#deux.
Planification du site
111
Pour créer un lien vers une ancre nommée à l'aide de la méthode Pointer vers un
fichier :
1
Choisissez Affichage > Éléments invisibles pour rendre l'ancre visible.
2
Sélectionnez du texte ou une image dans la fenêtre Document.
3
Procédez de l'une des manières suivantes :
Cliquez sur l'icône Pointer vers un fichier dans l'inspecteur de propriétés et
faites-la glisser vers l'ancre avec laquelle vous voulez créer un lien ; il peut s'agir
d'une ancre située soit à l'intérieur du même document, soit dans un autre
document ouvert.
Cliquez sur la fenêtre Document en tenant la touche Maj enfoncée et faites-la
glisser vers l'ancre avec laquelle vous voulez créer un lien ; il peut s'agir d'une
ancre située soit à l'intérieur du même document, soit dans un autre
document ouvert.
Création de liens e-mail, nowhere et script
Les types de lien les plus courants sont ceux qui renvoient à des documents et des
ancres nommées (décrits respectivement dans Établissement d'un lien vers un
document, page 110 et Établissement d'un lien vers une ancre nommée, page 111),
mais il en existe d'autres.
Les liens de messagerie ouvrent de nouvelles fenêtres de message (à l'aide du
programme de messagerie associé au navigateur de l'utilisateur) chaque fois que
l'utilisateur clique dessus. Le champ A: de la fenêtre du message est
automatiquement complété par l'adresse spécifiée dans le lien.
Pour créer un lien de courrier électronique :
1
Sélectionnez du texte ou une image dans la fenêtre Document.
2
Dans l'inspecteur de propriétés, tapez mailto:, suivi par une adresse e-mail dans
le champ Lien.
3
Appuyez sur Entrée.
Les liens Nowhere font exactement ce que leur nom laisse entendre : ils ne vont
nulle part. De tels liens sont utiles pour accéder à des événements JavaScript
disponibles pour des liens mais non pour du texte ou des images, sans écarter
l'utilisateur de la page en cours. Par exemple, dans la plupart des navigateurs, les
images ne reconnaissent par l'événement onMouseOver. C'est pourquoi vous devez
entourer les images de liens nowhere pour implémenter les mises en surbrillance
de défilement (dans Dreamweaver, le comportement Permutation d'image le fait
automatiquement).
112
Chapitre 6
Pour créer un lien nowhere :
1
Sélectionnez du texte ou une image dans la fenêtre Document.
2
Dans l'inspecteur de propriétés, tapez un signe dièse (#) dans le champ Lien.
3
Appuyez sur Entrée
Les liens script exécutent un code JavaScript ou appellent une fonction JavaScript
et sont utiles pour fournir aux utilisateurs des informations supplémentaires sur
un élément sans quitter la page en cours. Les liens script peuvent également être
utilisés pour exécuter des calculs, valider des formulaires et exécuter d'autres tâches
de traitement lorsqu'un utilisateur clique sur un élément spécifique.
Pour créer un lien script :
1
Sélectionnez du texte ou une image dans la fenêtre Document.
2
Dans le champ Lien de l'inspecteur de propriétés, tapez javascript:, suivi par un
code JavaScript ou un appel de fonction JavaScript.
Par exemple, le fait de taper javascript:alert('Cette fonction n'est pas implémentée')
dans le champ Lien crée un lien qui affiche une fenêtre d'alerte JavaScript avec
contenant le message Cette fonction n'est pas implémentée.
Remarque: Du fait que le code JavaScript s'affiche entre guillemets (comme valeur de
l'attribut HREF), vous devez utiliser des apostrophes dans le code du script ou échapper
les guillemets en les faisant précéder de barres obliques inversées (par exemple, \"Cette
fonction n'est pas implémentée\").
Test des liens
Certains liens ne sont pas actifs dans la fenêtre Document (c'est-à-dire que le fait
de cliquer dessus ne fait pas accéder au document lié) parce que vous devez être en
mesure de cliquer sur un lien pour modifier le texte ou les images qui y sont
associés. Vous pouvez ouvrir le fichier associé à un lien dans Dreamweaver si vous
voulez le modifier mais vous devez tester les liens dans un navigateur. Voir Test du
site, page 147.
Pour tester les liens dans un navigateur :
Choisissez Fichier > Aperçu dans le navigateur.
Pour ouvrir des documents liés dans Dreamweaver, procédez de l'une des
manières suivantes :
Sélectionnez le lien et choisissez Modifier > Hyperlien > Ouvrir la page liée.
Appuyez sur CTRL (Windows) ou Commande (Macintosh), puis doublecliquez sur le lien.
Remarque: Le document lié doit résider sur le disque local.
Planification du site
113
À propos des chemins relatifs et absolus
Il y a trois types de chemins d'accès : chemins absolus, chemins relatifs à la racine
et chemins relatifs au document. Les chemins sont entrés dans le champ Lien de
l'inspecteur de propriétés ou dans le champ URL de la boîte de dialogue
Sélectionner fichier HTML (accessible depuis l'inspecteur de propriétés). Voir
Établissement d'un lien vers un document, page 110.
Chemins absolus Il s'agit de chemins complets comprenant le protocole du serveur
(ordinairement http:// pour les pages Web). Par exemple,
http://www.macromedia.com/dreamweaver/. Les chemins absolus restent précis,
quel que soit l'emplacement du document source. En revanche, ils ne lient pas
correctement le document cible en cas de déplacement de ce dernier. Vous devez
utiliser un chemin absolu lorsque vous créez un lien vers un fichier situé en dehors
du site courant.
Chemins relatifs à la racine Commencent toujours à la racine du site courant. Tous
les fichiers du site visibles pour le public sont contenus dans la racine du site. Les
chemins relatifs à la racine commencent par une barre oblique, indiquant au
serveur de commencer à partir de la racine. Par exemple, le chemin /dreamweaver/
intro.htm crée un lien avec un document nommé intro.htm dans le répertoire de
Dreamweaver, qui se trouve au niveau de la racine du site.
Un chemin relatif à la racine est ordinairement la meilleure manière de lier des
fichiers dans un environnement dont le contenu doit être fréquemment déplacé.
Lorsque vous utilisez des chemins relatifs à la racine, les liens continuent à
fonctionner même si le document à partir duquel vous établissez le lien est déplacé
à l'intérieur du site. Les chemins relatifs à la racine ne conviennent pas pour les
sites à consulter localement (tels que les présentations). À leur place, utilisez des
chemins relatifs au document.
Lorsque vous travaillez avec Dreamweaver sur un disque local, vous définissez un
site local en sélectionnant un répertoire qui serve d'équivalent à la racine du
document sur un serveur. Dreamweaver utilise ce répertoire pour localiser tous les
liens renvoyant à des fichiers locaux spécifiés comme URL relatives à la racine. Les
liens relatifs à la racine ne fonctionnent pas tant que vous n'avez pas enregistré le
document dans un site local. Pour définir un site local, choisissez Site > Définir les
sites. Voir Création d'un site local, page 106.
Remarque: Le contenu lié avec un chemin d'accès relatif à la racine n'apparaît pas lorsque
vous prévisualisez des documents sur un navigateur local. Cela est dû au fait que les
navigateurs ne reconnaissent pas les racines de site (contrairement aux serveurs). Pour
afficher l'aperçu d'un contenu lié par un chemin d'accès relatif à la racine, placez le fichier sur
un serveur distant, puis affichez-le à partir de là.
114
Chapitre 6
Chemins relatifs au document Ils sont relatifs au répertoire contenant le document en
cours. Par exemple, document.htm désigne un document du répertoire courant ; ../
document.htm désigne un document du répertoire au-dessus du répertoire courant ;
et docshtml/document.htm désigne un document situé dans un répertoire nommé
docshtml à l'intérieur du répertoire courant. Les chemins relatifs au document sont
souvent les plus simples à utiliser pour créer des liens vers des fichiers qui seront
toujours placés dans le même répertoire que le document courant.
Remarque: Il est conseillé de toujours enregistrer un nouveau fichier avant de créer un
chemin relatif au document car ce dernier n'est pas valide sans un point de départ bien
défini. Si vous créez un chemin relatif au document avant d'enregistrer le fichier,
Dreamweaver utilise un chemin absolu commençant par file:// jusqu'à ce que le fichier soit
enregistré.
Affichage de fichier dans une fenêtre Site
Utilisez la fenêtre Site pour afficher des sites locaux et distants, en ajoutant ou en
supprimant des documents du site, ou pour scénariser.
La fenêtre Site se compose de deux volets, d'une barre de séparation et d'une série
de boutons de menu. Lorsque vous définissez les options de la fenêtre Site,
Dreamweaver les conserve en mémoire et les utilisera la prochaine que vous
ouvrirez la fenêtre Site. Pour plus d'informations, voir Options de la fenêtre Site,
page 130.
Affichage de sites locaux et distants
La fenêtre Site peut afficher le contenu des sites locaux et distants. Les sites locaux
s'affichent comme une liste de fichiers, une carte visuelle ou les deux. Les sites
distants s'affichent uniquement comme une liste de fichiers.
Pour afficher des fichiers de site, procédez de l'une des manières suivantes :
Choisissez Fenêtre > Fichiers du site.
Dans la fenêtre Site, cliquez sur le bouton Fichiers du site.
Le volet affichant les fichiers du site local est libellé "Répertoire local", tandis
que le volet affichant les fichiers du site distant est libellé "Site distant".
Remarque: si vous consultez un site local auquel ne correspond aucun site distant, le
volet "Site distant" est vide.
Planification du site
115
Pour afficher la carte du site, procédez de l'une des manières suivantes :
Choisissez Fenêtre > Carte du site.
Dans la fenêtre Site, cliquez sur le bouton Carte du site, ou sur la flèche du
bouton Carte du site pour sélectionner Carte et Fichiers.
Le volet affichant les fichiers du site local est libellé "Répertoire local", tandis
que le volet affichant les fichiers du site distant est libellé "Navigation dans le
site".
Pour afficher uniquement la carte du site :
Cliquez sur la flèche du bouton de la carte du site, puis sélectionnez Carte
seulement.
Changement de l'affichage du site
Par défaut, le site distant (ou carte du site local) apparaît dans le volet de gauche et
le site local dans le volet de droite. Vous pouvez inverser cet affichage.
Pour déterminer dans quels volets les sites local et distant s'affichent :
1
Choisissez Édition > Préférences pour ouvrir la boîte de dialogue Préférences
et sélectionnez la catégorie Site FTP.
2
Procédez de l'une des manières suivantes :
Sélectionnez Fichiers locaux dans le menu Toujours afficher, puis choisissez si
vous voulez afficher les fichiers locaux dans le volet de gauche ou de droite de
la fenêtre Site.
Le site local s'affiche ensuite dans le volet que vous avez sélectionné, et le site
distant (ou la carte du site) dans l'autre.
Sélectionnez Fichiers distants dans le menu Toujours afficher, puis choisissez si
vous voulez afficher les fichiers distants dans le volet de gauche ou de droite de
la fenêtre Site.
Le site distant s'affiche ensuite dans le volet que vous avez sélectionné, et le site
local (ou la carte du site) dans l'autre.
116
Chapitre 6
Pour changer la zone d'affichage :
Faites glisser la barre de séparation pour augmenter la zone d'affichage du volet
de gauche ou de droite.
Utilisez les barres de défilement dans le bas des volets pour en faire défiler le
contenu.
Dans la carte du site, cliquez et faites glisser la flèche au dessus d'un fichier
pour changer la largeur de colonne.
Pour plus d'informations sur les préférences du site, voir Paramétrage des
préférences pour les sites FTP, page 132.
Travail avec les fichiers du site
Utilisez l'affichage Fichiers du site pour afficher les sites local et distant comme des
listes de fichiers, pour ajouter de nouveaux dossier ou fichiers à un site, ou pour
actualiser les affichages d'un site après que des modifications aient été apportées.
Pour afficher les fichiers du site, procédez de l'une des manières suivantes :
Choisissez Fenêtre > Fichiers du site pour ouvrir la fenêtre Site dans l'affichage
Fichiers du site.
Dans la fenêtre Site, cliquez sur le bouton Fichiers du site.
Pour ajouter un nouveau dossier à un site :
1
Choisissez Fichier > Nouveau dossier (Windows) ou Site > Affichage des
fichiers de site > Nouveau dossier (Macintosh).
2
Sélectionnez et nommez le nouveau dossier.
Pour ajouter un nouveau fichier à un site :
1
Choisissez Fichier > Nouveau fichier (Windows) ou Site > Affichage des
fichiers de site > Nouveau fichier (Macintosh).
2
Sélectionnez et nommez le nouveau fichier.
Pour mettre à jour l'affichage Fichiers du site après avoir apporté des
modifications :
Choisissez Affichage > Actualiser Local (Windows) ou Site > Affichage des
fichiers de site > Actualiser Local (Macintosh).
Choisissez Affichage > Actualiser Distant (Windows) ou Site > Affichage des
fichiers de site > Actualiser distant (Macintosh).
Planification du site
117
Lorsque vous travaillez avec des sites local et distant, vous pouvez déterminer quels
fichiers ont été mis à jour. Ceci est utile lorsque vous voulez télécharger tous les
fichiers plus récents du site local vers le site distant, ou télécharger tous les fichiers
plus récents du site distant vers le site local.
Pour sélectionner des fichiers locaux plus récents :
Choisissez Affichage > Sélectionner Local plus récent (Windows) ou Site >
Affichage des fichiers de site > Sélectionner Local plus récent (Macintosh).
Pour sélectionner des fichiers distants plus récents :
Choisissez Affichage > Sélectionner Distant plus récent (Windows) ou Site >
Affichage des fichiers de site > Sélectionner Distant plus récent (Macintosh).
Pour plus d'informations sur le travail avec des sites locaux et distants, voir
Utilisation du système d'archivage et d'extraction de fichiers, page 133.
Création de cartes de site
Utilisez l'affichage de carte de site pour afficher les sites locaux comme une carte
visuelle d'icônes liées, pour ajouter des fichiers à un site ou pour ajouter, modifier
ou supprimer des liens. L'affichage de carte de site est idéal pour la scénarisation.
Vous pouvez à présent créer un prototype de la structure du site, puis créer une
image imprimée de la carte du site.
Remarque: L'affichage de carte de site s'applique uniquement aux sites locaux. Si vous
voulez créer la carte d'un site distant, copiez tout son contenu sur votre lecteur local
Pour afficher une carte du site, procédez de l'une des manières suivantes :
Choisissez Fenêtre > Carte du site pour ouvrir la fenêtre Site.
Dans la fenêtre Site, cliquez sur le bouton Carte du site.
La page d'accueil du site est le point de départ de la carte. Si Dreamweaver ne peut
pas déterminer quelle page du site courant est la page d'accueil, la boîte de
dialogue Définition du site s'ouvre sur le panneau Mise en forme de la carte du
site, et vous invite à sélectionner la page appropriée.
118
Chapitre 6
La carte du site affiche les fichiers HTML et autres pages sous la forme d'icône.
Les liens sont affichés dans l'ordre dans lequel on les rencontre dans le code source
HTML.
Le texte affiché en rouge indique un lien brisé.
Le texte affiché en bleu et marqué d'une icône en forme de globe indique un
fichier sur un autre site ou un lien spécial (tel un lien d'adresse électronique ou
de script).
Une coche de couleur verte indique un fichier extrait par vous.
Une coche de couleur rouge indique un fichier extrait par quelqu'un d'autre.
Un cadenas indique qu'un fichier est en lecture seule (Windows) ou verrouillé
(Macintosh).
Par défaut, la carte du site affiche la structure du site, avec une profondeur de deux
niveaux, en commençant par la page d'accueil. Cliquez sur les signes plus et moins
(Windows) ou sur la flèche d’agrandissement (Macintosh) à côté d'une page pour
afficher ou cacher les pages liées au-delà du second niveau.
Par défaut, les fichiers cachés et les fichiers dépendants ne sont pas affichés dans la
carte du site. Les fichiers marqués sont des fichiers HTML marqués comme tels.
Les fichiers dépendants sont des éléments de contenu non HTML tels que des
images, modèles, fichiers Shockwave ou Flash. Voir Modification de la mise en
forme de la carte du site, page 120 et Affichage et masquage des fichiers de la carte du
site, page 124.
Planification du site
119
Modification de la mise en forme de la carte du site
Utilisez les options de mise en forme de la carte du site pour personnaliser son
aspect. Vous pouvez spécifier la page d'accueil, le nombre de colonnes affichées et
s'il convient d'afficher les fichiers cachés et dépendants.
Pour modifier la mise en forme de la carte du site :
1
Ouvrez la boîte de dialogue Définition du site à l'aide d'une des méthodes
suivantes :
Choisissez Site > Définir les sites, puis Modifier. Sélectionnez Mise en forme
de la carte du site dans la liste Catégorie à gauche.
Choisissez Affichage > Mise en forme (Windows) ou Site > Affichage de carte
de site > Mise en forme (Macintosh).
2
Sélectionnez l'une des options suivantes :
désigne la page d'accueil de la carte du site. Si vous ne spécifiez
pas de page d'accueil (Dreamweaver ne pourra pas trouver de fichier nommé
index.html ou index.htm dans la racine), Dreamweaver vous invite à
sélectionner une page d'accueil lorsque vous ouvrez la carte du site.
Page d'accueil
Nombre de colonnes
définit le nombre de pages affichées par rangée dans la
carte du site.
Largeur de colonne
définit la largeur de colonne, exprimée en pixels, de la
carte du site.
détermine si les noms de fichier ou les titres de page
s'affichent sous les icônes dans la carte du site. Vous pouvez changer les noms
de fichier et les titres de page à partir de la carte du site.
Étiquettes des icônes
affiche les fichiers HTML
marqués comme cachés dans la carte du site. Si une page est cachée, son nom
et ses liens s'affichent en italique.
Afficher les fichiers marqués comme masqués
affiche tous les fichiers dépendants dans la
hiérarchie du site. Un fichier dépendant est une image ou un autre élément de
contenu non HTML chargé par le navigateur en même temps que la page
principale.
Afficher les fichiers dépendants
120
Chapitre 6
Travail avec des pages dans la carte du site
Lorsque vous travaillez dans la carte du site, vous pouvez sélectionner des pages,
ouvrir une page pour l'éditer, ajouter de nouvelles pages au site, créer des liens
entre fichiers et modifier le titre de la page.
Pour sélectionner plusieurs pages, procédez de l'une des manières suivantes :
Cliquez en tenant la touche Maj enfoncée pour sélectionner plusieurs pages.
En partant d'une partie vierge de l'affichage, faites glisser le curseur autour
d'un groupe de fichiers pour les sélectionner.
Appuyez sur MAJ+CTRL (Windows) ou Maj-Commande (Macintosh), puis
cliquez pour sélectionner des pages non contiguës.
Pour ouvrir une page afin de l'éditer, procédez de l'une des manières suivantes :
Double-cliquez sur le fichier.
Sélectionnez le fichier et choisissez Fichier > Ouvrir la sélection (Windows) ou
Site > Ouvrir (Macintosh).
Pour ajouter un fichier existant au site, procédez de l'une des manières suivantes :
Faites glisser un fichier depuis Windows Explorer ou du Sélecteur Macintosh
et déposez-le sur un fichier de la carte du site. La page est ajoutée au site et un
lien est créé entre elle et le fichier que vous avez déposé dessus.
Choisissez Site > Lier au fichier existant (Windows) ou Site > Affichage de
carte de site > Lier au fichier existant (Macintosh).
Cliquez sur un fichier dans la carte du site. L'icône Pointer vers un fichier
s'affiche. Cliquez sur l'icône et faites-la glisser vers le fichier que vous voulez
ajouter.
Pour créer un nouveau fichier et ajouter un lien :
1
Sélectionnez un fichier HTML dans la carte du site.
2
Choisissez Site > Lier au nouveau fichier (Windows) ou Site > Affichage de
carte de site > Lier au nouveau fichier (Macintosh), ou bien choisissez Lier au
nouveau fichier dans le menu contextuel.
3
Dans la boîte de dialogue qui s'affiche, entrez les informations suivantes :
Nom du fichier
Titre
indique le nom du fichier.
indique le titre de la page.
indique le texte du lien qui connecte le fichier sélectionné au
nouveau fichier. Le lien apparaît dans le fichier sélectionné.
Texte du lien
Planification du site
121
4
Cliquez sur OK.
Le fichier est enregistré dans le même répertoire que le fichier sélectionné. Si
un nouveau fichier est ajouté à une branche cachée, le nouveau fichier est
également caché. Voir Affichage et masquage des fichiers de la carte du site,
page 124.
Pour changer le titre d'une page :
1
Assurez-vous que l'option Afficher les titres de page est activée.
Choisissez Affichage > Afficher les titres de page (Windows) ou Site >
Affichage de carte de site > Afficher les titres de page (Macintosh).
2
Procédez de l'une des manières suivantes :
Sélectionnez une page, puis cliquez sur le titre. Lorsque le titre devient un
champ modifiable, entrez un nouveau titre de document.
Sélectionnez une page, puis choisissez Fichier > Renommer (Windows) ou
Site > Renommer (Macintosh).
Pour modifier la page d'accueil, procédez de l'une des manières suivantes :
Choisissez Site > Affichage de carte de site (Windows) ou Site > Affichage de
carte de site > Nouvelle page d'accueil (Macintosh) pour créer une nouvelle
page d'accueil.
Choisissez Site > Sélectionner la page d'accueil (Windows) ou Site > Affichage
de carte de site > Sélectionner la page d'accueil (Macintosh) pour faire d'une
page existante la page d'accueil.
Pour mettre à jour l'affichage de la carte du site après avoir apporté des
changements :
122
Chapitre 6
Choisissez Affichage > Actualiser (Windows) ou Site > Affichage de carte de
site > Actualiser Local (Macintosh).
Création et modification de liens dans un affichage de carte de site
Vous pouvez modifier la structure du site dans la carte du site en ajoutant,
modifiant ou supprimant des liens. La carte du site est automatiquement mise à
jour pour afficher les modifications apportées au site.
Pour ajouter un lien, procédez de l'une des manières suivantes :
Faites glisser une page de l'Explorateur Windows ou du Sélecteur Macintosh
vers la carte du site.
Sélectionnez une page HTML, puis choisissez Site > Lier au fichier existant
(Windows) ou Site > Affichage de carte de site > Lier au fichier existant
(Macintosh), ou bien choisissez Lier au fichier existant dans le menu
contextuel.
Sélectionnez une page HTML dans la carte du site. L'icône Pointer vers un
fichier s'affiche. Cliquez sur l'icône et faites-la glisser vers l'objet vers lequel
vous voulez créer un lien. Il peut s'agir d'un fichier, d'un document placé sur
le bureau ou d'une ancre nommée dans un document ouvert sur le bureau.
Voir Création de liens avec l'icône Pointer vers un fichier, page 108.
Pour changer un lien :
Sélectionnez la page et choisissez Site > Modifier le lien (Windows) ou Site >
Affichage de carte de site > Modifier le lien (Macintosh). Naviguez jusqu'au
fichier ou tapez une URL.
Pour supprimer un lien, procédez de l'une des manières suivantes :
Sélectionnez la page dans la carte du site, puis choisissez Site > Supprimer le
lien (Windows) ou Site > Affichage de carte de site > Supprimer le lien
(Macintosh).
Sélectionnez la page dans la carte du site, puis, dans le menu contextuel,
choisissez Supprimer le lien.
Pour ouvrir la source d'un lien :
1
Sélectionnez un fichier dans la Carte du site.
2
Choisissez Site > Ouvrir la source du lien (Windows) ou Site > Affichage de
carte de site > Ouvrir la source du lien (Macintosh).
L'inspecteur de propriétés et le fichier source contenant le lien sont ouverts. Le
lien est mis en surbrillance.
Planification du site
123
Affichage et masquage des fichiers de la carte du site
Vous pouvez modifier la mise en forme de la carte du site de manière à afficher ou
cacher les fichiers cachés et dépendants. Ceci est utile lorsque vous voulez mettre
l'accent sur des rubriques ou des éléments de contenu clés et ne pas mettre l'accent
sur du matériel de moindre importance.
Avant de cacher ou d'afficher un fichier HTML, vous devez commencer par le
marquer comme "caché". Lorsque vous masquez un fichier marqué comme caché,
ses liens sont également cachés. Lorsque vous affichez un fichier marqué comme
caché, l'icône et ses liens sont visibles dans l'affichage de la carte du site, mais les
noms s'affichent en italiques.
Pour marquer des fichiers comme masqués :
1
Cliquez sur un ou plusieurs fichiers.
2
Choisissez Affichage > Afficher/Masquer le lien (Windows) ou Site > Affichage
de carte de site > Afficher/Masquer le lien (Macintosh).
Pour afficher ou cacher des fichiers marqués comme cachés, procédez de l'une des
manières suivantes :
Choisissez Affichage > Afficher les fichiers marqués comme masqués
(Windows) ou Site > Affichage de carte de site > Afficher les fichiers marqués
comme masqués (Macintosh).
Choisissez Affichage > Mise en forme (Windows) ou Site > Affichage de carte
de site > Mise en forme (Macintosh) pour ouvrir la boîte de dialogue
Définition du site et activer l'option Afficher les fichiers marqués comme
cachés.
Par défaut, les fichiers dépendants sont déjà cachés. Vous pouvez choisir de les
afficher dans la carte du site.
Pour afficher des fichiers dépendants, procédez de l'une des manières suivantes :
124
Chapitre 6
Choisissez Affichage > Afficher les fichiers dépendants (Windows) ou Site >
Affichage de carte de site > Afficher les fichiers dépendants (Macintosh).
Choisissez Affichage > Mise en forme (Windows) ou Site > Affichage de carte
de site > Mise en forme (Macintosh) pour ouvrir la boîte de dialogue
Définition du site et sélectionner l'option Cliquez sur Affichage.
Affichage du site à partir d'une branche
Vous pouvez afficher les détails d'une section spécifique d'un site en faisant d'une
branche le centre de la carte du site.
Pour afficher une autre branche :
Sélectionnez la page que vous voulez afficher et choisissez Affichage > Afficher
comme racine (Windows) ou Site > Voir comme racine > Afficher comme
racine (Macintosh).
La carte du site est redessinée dans la fenêtre comme si la page spécifiée était à
la racine du site. Le champ Navigation dans le site au-dessus de la carte du site
affiche le chemin de la page spécifiée par rapport à la page d'accueil.
Sélectionnez un élément du chemin pour afficher la carte du site depuis ce
niveau en cliquant une fois dessus.
Pour étendre et contraster des branches :
Cliquez sur les signes plus et moins (Windows) ou sur les flèches
d’agrandissement (Macintosh) pour étendre ou contraster la branche.
Enregistrement de la carte du site
Vous pouvez enregistrer la carte du site comme une image, puis afficher l'image
(ou l'imprimer) dans un éditeur d'image.
Pour créer un fichier d'image de la carte du site courante :
1
Dans la carte du site, choisissez Fichier > Enregistrer la carte du site sous
(Windows) ou Site > Affichage de carte de site > Enregistrer la carte du site
sous (Macintosh).
2
Entrez un nom pour l'image dans la boîte de dialogue qui s'affiche.
Planification du site
125
126
Chapitre 6
7
CHAPITRE 7
Gestion de site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestion de site – Vue d’ensemble
Pour vous aider à organiser les fichiers sur votre système, Dreamweaver reproduit
la structure du site web distant sur votre système local. Les liens que vous créez au
niveau du site local continuent à fonctionner sur le site distant du fait que la
structure des deux sites est rigoureusement identique.
Vous commencez par créer un site local dans Dreamweaver en sélectionnant un
répertoire racine local à l'aide de la commande Définir les sites. Voir Création d'un
site local, page 106. Vous associez ensuite le site local à un serveur distant en
sélectionnant des options supplémentaires dans la boîte de dialogue Définir les
sites. Voir Définition d'un site, page 128.
Lors du transfert de fichiers entre le site local et le site distant, Dreamweaver
maintient des structures de répertoires identiques pour veiller à ce que les liens et
les références ne soient pas accidentellement altérés. Si certains répertoires
n'existent pas sur le site vers lequel les fichiers sont transférés, Dreamweaver les
crée automatiquement.
Dreamweaver intègre une série de fonctions pour la structuration du site, la
navigation à l'intérieur et entre des documents, et le transfert de fichiers vers un
serveur distant. Pour faciliter le travail en groupe sur un site web, vous pouvez
archiver et extraire des fichiers sur le serveur distant afin d'éviter que plusieurs
personnes ne travaillent sur les mêmes fichiers en même temps. Dreamweaver
n'effectue pas de contrôle de version, pas plus qu'il ne retire du serveur distant les
fichiers ou répertoires n'existant plus dans le répertoire racine local.
127
Définition d'un site
Utilisez la commande Définir les sites pour ajouter ou modifier les informations
du serveur distant, le répertoire racine local et les préférences d'archivage/
extraction pour le site existant ou pour créer un nouveau site.
Pour définir un site :
1
Cliquez sur Définir les sites dans le menu contextuel des sites actuels de la
fenêtre Site, ou choisissez Fichier > Nouveau site (Windows) ou Site > Définir
les sites (Macintosh).
2
Dans la boîte de dialogue qui s'affiche, cliquez sur Nouveau ou sélectionnez
un site existant, puis cliquez sur Édition.
3
Dans le panneau Infos locales de la boîte de dialogue Définition du site, tapez
un nom de site, puis cliquez sur l'icône de répertoire pour naviguer vers un
répertoire racine local et le sélectionner (répertoire qui représentera le niveau
supérieur du site) si ce n'est déjà fait.
4
Activez l'option Cache pour accélérer la vitesse des tâches de gestion des liens
et du site. Voir Gestion des liens, page 145.
5
Tapez l'URL de votre site dans le champ Adresse HTTP.
Par exemple, l'adresse HTTP pour le site web dreamcentral est
http://www.dreamcentral.com. Cette valeur est utilisée par le Vérificateur de
lien pour déterminer si les liens de chemin d'accès absolu renvoient à des
fichiers du site ou de sites externes. Voir Vérification des liens entre documents,
page 149.
6
128
Chapitre 7
Dans la liste Catégorie de gauche, cliquez sur Infos du serveur web.
7
Choisissez l'une des options Infos du serveur web suivantes :
Choisissez Aucun si vous voulez seulement travailler avec votre site localement
et ne prévoyez pas de le télécharger sur un serveur, puis passez à l'étape 13.
Choisissez Local/Réseau si le serveur web est monté comme lecteur de réseau
local ou serveur NFS (Macintosh), ou si vous faites tourner un serveur web sur
votre machine locale. Cliquez sur l'icône de répertoire pour repérer et
sélectionner le répertoire dans lequel sont stockés les fichiers du site sur le
serveur, puis passez à l'étape 13.
Choisissez FTP si vous vous connectez à votre serveur web par FTP.
8
Entrez le nom de l'hôte FTP vers lequel vous téléchargez les fichiers de votre
site web.
N'utilisez pas ftp:// devant l'adresse. Par exemple, l'hôte FTP du site web
dreamcentral est shell16.ba.best.com.
9
Tapez le nom du répertoire hôte au niveau du site distant où sont stockés les
documents accessibles au public (également appelé racine du site).
Par exemple, le répertoire hôte du site dreamcentral est public_html/. Pour
d'autres sites, le répertoire se situe plusieurs niveaux plus bas (par exemple,
www/public/docs/ ou public_html/htdoc/), ou bien coïncide avec le répertoire
de connexion (auquel cas le champ doit être laissé vierge).
10
Tapez vos nom d'utilisateur et mot de passe.
Le mot de passe est automatiquement enregistré. Désactivez Enregistrer si
vous voulez que le système vous demande le mot de passe chaque fois que vous
vous connectez au serveur distant.
11
Activez l'option Utiliser le pare-feu si vous vous connectez au serveur distant
alors que vous vous trouvez derrière un pare-feu. Voir Paramétrage des
préférences pour les sites FTP, page 132.
Gestion de site
129
12
Dans la liste Catégorie, à gauche, cliquez sur Archiver/Extraire.
Activez l'option Activer l'archivage et l'extraction de fichier si vous travaillez
au sein d'une équipe (ou si vous travaillez seul mais depuis plusieurs
machines).
Cette option est utile pour informer les autres que vous avez extrait un fichier
pour l'éditer, ou pour vous rappeler qu'une version plus récente d'un fichier
est peut-être ouverte sur une autre machine. Voir Utilisation du système
d'archivage et d'extraction de fichiers, page 133.
Activez l'option Extraire les fichiers à l'ouverture si vous voulez que les fichiers
soient automatiquement extraits lorsque vous double-cliquez dessus pour les
extraire dans la fenêtre Site.
Tapez un nom d'extraction.
Il s'agit du nom qui s'affichera dans la fenêtre du site à côté de tous les fichiers
extraits, permettant à d'autres membres de l'équipe de vous localiser si vous
avez extrait un fichier dont ils ont besoin. Si vous travaillez seul sur plusieurs
machines, utilisez un nom d'extraction différent pour chaque machine (par
exemple, PierreR-MacDomicile et PierreR-PCBureau), de manière à savoir où
se trouve la dernière version du fichier si vous oubliez de le réarchiver.
13
Cliquez sur OK.
Options de la fenêtre Site
Utilisez la fenêtre Site pour les opérations de maintenance de fichier standard
(création de nouveaux documents HTML, déplacement de fichiers, création de
répertoires et suppression d'élément) pour la création de scénarios avec la carte du
site (voir Création de cartes de site, page 118) et pour le transfert de fichiers entre le
site local et le site distant. Par défaut, le site distant (ou carte du site) apparaît dans
le volet de gauche et le site local dans le volet de droite. Vous pouvez modifier ce
paramétrage au niveau des préférences pour le Site FTP. Voir Paramétrage des
préférences pour les sites FTP, page 132.
Pour ouvrir la fenêtre Site, choisissez Fenêtre > Fichiers de site, puis sélectionnez
l'une des options suivantes :
Connecter (uniquement disponible avec le paramètre FTP) Se connecte ou se
déconnecte du site distant. Par défaut, Dreamweaver se déconnecte du site distant
après 30 minutes d’inactivité. Choisissez Édition > Préférences, puis sélectionnez
FTP du site pour changer la durée d'inactivité.
Actualiser (uniquement disponible avec le paramétrage Local/Réseau) Actualise la
liste de répertoires distante. Utilisez ce bouton pour afficher la liste de répertoires
distants si vous avez monté le lecteur contenant le site distant après ouverture de la
fenêtre Site.
130
Chapitre 7
Copie les fichiers sélectionnés sur le site distant vers le site local. Si
l'option Activer l'archivage et l'extraction de fichier est activée, les copies locales
sont en lecture seule ; les fichiers restent accessibles, sur le site distant, à d'autres
membres de l'équipe qui peuvent les extraire. Voir Acquisition de fichiers au départ
d'un serveur distant, page 135. Si l'option d'archivage et d'extraction de fichier est
désactivée, l'obtention d'un fichier transfère une copie assortie des privilèges de
lecture et d'écriture. Voir Acquisition de fichiers au départ d'un serveur distant,
page 135.
Acquérir
Placer Copie les fichiers sélectionnés sur site local vers le site distant sans en
changer le statut d'archivage/extraction. Voir Placement de fichiers sur un serveur
distant, page 136.
Transfère une copie du fichier du serveur distant vers le site local et
verrouille le fichier sur le serveur. Cette option n'est pas disponible si l'option
d'archivage et extraction de fichier est désactivée pour le site en cours. Voir
Archivage et extraction de fichiers sur un serveur distant, page 134.
Extraire
Archiver Transfère une copie du fichier local vers le serveur distant, de manière à ce
qu'il puisse être édité par d'autres membres de l'équipe. Le fichier local est alors en
lecture seule. Cette option n'est pas disponible si l'option d'archivage et extraction
de fichier est désactivée pour le site en cours. Voir Archivage et extraction de fichiers
sur un serveur distant, page 134.
Listes des sites courants Assiste la liste des sites distants que vous avez définis. Pour
changer de site, sélectionnez-en un autre dans la liste. Pour ajouter un site ou
éditer les informations relatives à un site existant, cliquez sur Définir les sites au
bas de la liste (voir Définition d'un site, page 128).
Modifie le volet du site distant de manière à ce qu'il
affiche la structure de fichiers. Il s'agit de l'affichage par défaut de la fenêtre Site.
Affichage des fichiers de site
Modifie le volet du site distant de manière à ce qu'il
affiche une carte visuelle de votre site, basée sur la manière dont les documents
sont reliés entre eux. Maintenez le bouton enfoncé pour sélectionner Carte
seulement ou Carte et fichiers dans le menu déroulant.
Affichage de carte de site
Arrêter la tâche en cours Arrête toute activité en cours, notamment l'acquisition et
le placement de fichiers. Le bouton s'affiche sous la forme d'une croix rouge dans
le coin inférieur droit.
Gestion de site
131
Paramétrage des préférences pour les sites FTP
Choisissez Édition > Préférences, sélectionnez FTP du site, puis choisissez parmi
les préférences suivantes pour contrôler les fonctions de transfert de fichier
disponibles dans la fenêtre Site :
Spécifie que soit les fichiers locaux, soit les fichiers distants,
s'afficheront toujours dans le volet gauche ou dans le volet droit de la fenêtre Site.
Par défaut, le répertoire local s'affiche à droite.
Toujours afficher
Fichiers dépendants Affiche une invite proposant de transférer les fichiers
dépendants (images et autres fichiers tels que des feuilles de style externes, chargés
par le navigateur en même temps que le fichier HTML). Les options Invite lors de
Acquérir/Extraire et Invite lors de Placer/Archiver sont toutes deux sélectionnées
par défaut. Sélectionnez Ne plus afficher ce message lorsque l'invite Acquérir/
Extraire s'affiche afin de désactiver la première option, et sélectionnez-le lorsque
l'invite Placer/Archiver s'affiche afin de désactiver la seconde option.
Remarque: Pour forcer l'affichage de l'invite Inclure fichiers dépendants ? lorsque ces
options sont désactivées, appuyez sur Alt (Windows) ou sur Option (Macintosh) tout en
cliquant sur Acquérir, Placer, Extraire ou Archiver.
Détermine si la connexion avec le site distant est terminée après
que le délai d'inactivité spécifié s'est écoulé.
Connexion FTP
Spécifie le temps, exprimé en secondes, pendant lequel
Dreamweaver tentera d'établir la connexion avec le serveur distant. À défaut de
réponse à l'issue du délai spécifié, Dreamweaver affiche une boîte de dialogue vous
avertissant de ce fait.
Déconnecter après
Spécifie l'adresse du serveur proxy auquel vous vous connectez si
vous vous trouvez derrière un pare-feu. Dans le cas contraire, laissez ce champ à
blanc.
Hôte du firewall
Port du firewall Spécifie le port par l'intermédiaire duquel vous vous connectez au
serveur FTP. Si vous vous connectez par l'intermédiaire d'un port autre que 21
(port par défaut pour FTP), tapez le numéro ici.
Définir les sites Ce bouton ouvre la boîte de dialogue Définir les sites dans laquelle
vous pouvez créer un site ou modifier un site existant. Voir Définition d'un site,
page 128.
132
Chapitre 7
Utilisation du système d'archivage et
d'extraction de fichiers
Lorsque vous travaillez au sein d'un groupe, vous pouvez extraire et archiver des
fichiers lors de leur transfert entre le serveur distant et l'ordinateur local. Voir
Archivage et extraction de fichiers sur un serveur distant, page 134.
L'extraction d'un fichier équivaut à déclarer : "Je suis en train de travailler sur ce
fichier ; n'y touchez pas." Lorsqu'un fichier est extrait, Dreamweaver affiche une
coche à côté de son icône dans la fenêtre Site. Une coche de couleur verte indique
que le fichier a été extrait par vous et une coche de couleur rouge indique qu'il a
été extrait par un autre membre de l'équipe. Le nom de cette personne apparaît
dans la fenêtre Site.
L'archivage d'un fichier équivaut à le mettre à la disposition des autres membres
de l'équipe, qui peuvent l'extraire et l'éditer. En cas d'extraction, la version locale
du fichier est en lecture seule afin d'éviter qu'une autre personne n'apporte des
modifications au fichier extrait.
Dreamweaver suit la trace des fichiers extraits en plaçant un fichier texte portant
l'extension .lck (et contenant le nom de l'utilisateur ayant extrait le fichier) tant
sur le serveur distant que sur le site local. Les fichiers .lck ne sont pas visibles dans
la fenêtre Site.
Dreamweaver ne convertit pas les fichiers extraits en fichiers en lecture seule sur le
serveur distant. Si vous transférez des fichiers à l'aide d'une application autre que
Dreamweaver, vous risquez d'écraser les fichiers extraits. Toutefois, dans les
applications autres que Dreamweaver, le fichier .lck est visible à côté du fichier
extrait dans la hiérarchie de fichiers, ce qui devrait permettre d'éviter de tels
accidents.
Vous pouvez activez les fonctions d'archivage/extraction pour certains sites et les
désactiver pour d'autres. Voir Définition d'un site, page 128. Pour plus
d'informations sur le transfert de fichiers entre les sites locaux et distants sans
archivage ni extraction, voir Acquisition de fichiers au départ d'un serveur distant,
page 135 et Placement de fichiers sur un serveur distant, page 136.
Gestion de site
133
Archivage et extraction de fichiers sur un serveur distant
Utilisez la fenêtre Site pour archiver et extraire des fichiers sur un serveur distant.
Vous pouvez également annuler une extraction sans transférer le fichier de manière
à ce qu'il soit disponible pour que d'autres membres de l'équipe puissent l'extraire.
Pour extraire des fichiers à partir d'un serveur distant :
1
Dans le menu déroulant des sites courants dans le haut de la fenêtre Site,
cliquez sur le site de votre choix.
2
Sélectionnez un ou plusieurs fichier(s), cliquez avec le bouton droit
(Windows) ou cliquez en tenant la touche Contrôle enfoncée (Macintosh),
puis cliquez sur Extraire dans le menu contextuel ou sur le bouton Extraire
dans le haut de la fenêtre Site.
3
Cliquez sur Oui à l'invite pour télécharger n'importe quel fichier dépendant.
Pour archiver des fichiers sur un serveur distant :
1
Dans le menu déroulant des sites courants dans le haut de la fenêtre Site,
cliquez sur le site de votre choix.
2
Sélectionnez un ou plusieurs fichiers extraits ou nouveaux dans le volet du site
local, cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche
Contrôle enfoncée (Macintosh), puis cliquez sur Archiver dans le menu
contextuel, ou sur le bouton Archiver dans le haut de la fenêtre Site.
Les fichiers extraits sont signalés par une coche verte. Les nouveaux fichiers ne
sont associés à aucune coche ni aucun symbole de verrouillage.
3
Cliquez sur Oui à l'invite pour télécharger n'importe quel fichier dépendant.
Il est toujours conseillé de télécharger des fichiers dépendants en extrayant un
nouveau fichier.
Pour annuler l'extraction d'un fichier :
134
Chapitre 7
Sélectionnez le fichier désiré, cliquez avec le bouton droit (Windows) ou
cliquez en tenant la touche Contrôle enfoncée (Macintosh), puis cliquez sur
Annuler l'extraction dans le menu contextuel. La copie locale du fichier est
alors en lecture seule et toutes les modifications que vous y avez apportées sont
perdues.
Acquisition de fichiers au départ d'un serveur distant
L'opération d'acquisition de fichiers consiste à les copier du site distant vers le site
local où ils seront accessibles en lecture seule. Si vous ne travaillez pas au sein d'un
groupe et voulez acquérir des fichiers qui soient également accessibles en écriture,
désactivez l'option Activer l'archivage et l'extraction de fichier pour le site. Voir
Définition d'un site, page 128. Voir aussi Utilisation du système d'archivage et
d'extraction de fichiers, page 133.
Dreamweaver enregistre toute l'activité de transfert de fichier. Si une erreur se
produit lors du transfert d'un fichier, le journal du site FTP peut vous aider à
déterminer le problème. Pour afficher le journal, choisissez Fenêtre > Journal FTP
du site dans la fenêtre du site (Windows) ou Site > Journal FTP du site
(Macintosh).
Pour acquérir des fichiers sur un serveur distant :
1
Choisissez Fenêtre > Fichiers du site pour ouvrir la fenêtre Site.
2
Dans le haut de la fenêtre Site, cliquez sur le site de votre choix dans le menu
déroulant de la liste des sites.
3
Cliquez sur Connecter pour établir une connexion avec le serveur distant.
Si une connexion est déjà établie (le bouton Connecter devient Déconnecter),
sautez cette étape.
4
Sélectionnez les fichiers de votre choix dans le volet du site distant.
5
Cliquez sur Acquérir ou cliquez avec le bouton droit (Windows) ou cliquez en
tenant la touche Contrôle enfoncée (Macintosh), puis cliquez sur l'option
Acquérir du menu contextuel.
6
Cliquez sur OK à l'invite pour télécharger tout fichier dépendant.
Remarque: Cliquez sur Arrêter la tâche en cours (le signe X rouge dans le coin inférieur
droit) ou appuyez sur Echap (Windows) ou Commande-. (point) (Macintosh) pour
abandonner le transfert de fichier.
Gestion de site
135
Placement de fichiers sur un serveur distant
L'opération de placement de fichiers consiste à les copier du site local vers le site
distant sans changer l'état d'extraction du fichier. Si vous voulez placer un fichier
sur un serveur distant et l'archiver, utilisez la commande Archiver. Voir Archivage
et extraction de fichiers sur un serveur distant, page 134.
Dreamweaver enregistre toute l'activité de transfert de fichier. Si une erreur se
produit lors du transfert d'un fichier, le journal du site FTP peut vous aider à
déterminer le problème. Pour afficher le journal, choisissez Fenêtre > Journal FTP
du site dans la fenêtre du site (Windows) ou Site > Journal FTP du site
(Macintosh).
Remarque: N'utilisez pas de caractères ASCII complexes (par exemple, é, ç, ¥) dans le nom
des fichiers que vous avez l'intention de placer sur un serveur distant. Bon nombre de
serveurs coderont ces caractères lors du téléchargement, ce qui risque de supprimer les liens
avec le fichier.
Pour placer des fichiers sur un serveur distant :
1
Choisissez Fenêtre > Fichiers du site pour ouvrir la fenêtre Site.
2
Dans le haut de la fenêtre Site, cliquez sur le site de votre choix dans le menu
déroulant de la liste des sites.
3
Cliquez sur Connecter pour établir une connexion avec le serveur distant.
Si une connexion est déjà établie (le bouton Connecter devient Déconnecter),
sautez cette étape.
4
Sélectionnez les fichiers de votre choix dans le volet du site local.
5
Cliquez sur Placer ou cliquez avec le bouton droit (Windows) ou cliquez en
tenant la touche Contrôle enfoncée (Macintosh), puis choisissez l'option
Placer du menu contextuel.
6
Cliquez sur OK à l'invite pour télécharger tout fichier dépendant.
Remarque: Cliquez sur Arrêter la tâche en cours (le signe X rouge dans le coin inférieur
droit) ou appuyez sur Echap (Windows) ou Commande-. (point) (Macintosh) pour
abandonner le transfert de fichier.
136
Chapitre 7
Recherche et remplacement
Vous pouvez rechercher du texte, du texte entouré de balises spécifiques, des
balises HTML et des attributs dans le document en cours, dans des fichiers
sélectionnés, dans un répertoire ou dans un site tout entier.
Pour lancer une recherche :
1
Sélectionnez l'une des options suivantes :
Dans la fenêtre Document ou Site, choisissez Édition > Rechercher ou
Édition > Remplacer.
Dans l'inspecteur HTML, cliquez avec le bouton droit (Windows) ou cliquez
en tenant la touche Contrôle enfoncée (Macintosh), puis choisissez
Rechercher ou Remplacer dans le menu contextuel.
2
Dans la boîte de dialogue Rechercher ou Remplacer, utilisez l'option
Rechercher dans pour spécifier les fichiers sur lesquels la recherche doit
porter :
L'option Document courant limite la recherche au document actif. Cette
option n'est disponible que lorsque vous choisissez la commande Rechercher
ou Remplacer dans la fenêtre Document ou dans le menu contextuel de
l'inspecteur HTML.
L'option Fichiers sélectionnés limite la recherche aux fichiers et répertoires
actuellement sélectionnés dans la fenêtre Site. Cette option n'est disponible
que lorsque vous choisissez la commande Rechercher ou Remplacer dans la
fenêtre Site.
L'option Site courant étend la recherche à l'ensemble des documents HTML,
fichiers de bibliothèque et documents texte du site courant. Le nom du site
s'affiche à droite du menu déroulant. S'il ne s'agit pas du site dans lequel vous
voulez rechercher, choisissez un site différent dans le menu déroulant des sites
actuels de la fenêtre Site.
L'option Répertoire limite la recherche à un groupe de fichiers spécifique.
Cliquez sur l'icône de répertoire pour naviguer jusqu'au répertoire dans lequel
vous voulez rechercher et sélectionnez-le.
Gestion de site
137
3
Utilisez l'option Rechercher pour spécifier le type de recherche à effectuer.
vous permet de rechercher des chaînes de texte spécifiques dans
la fenêtre Document. Une recherche de type texte ignore tout code HTML
présent. Voir Recherche de texte dans la fenêtre Document, page 139.
L'option Texte
L'option Source HTML vous permet de rechercher des chaînes de texte
spécifiques dans le code source HTML. Voir Recherche de texte dans la source
HTML, page 139.
permet de rechercher des chaînes de texte spécifiques se
trouvant ou non à l'intérieur d'une ou plusieurs balises. Prenons, par exemple,
un document contenant le code HTML Jean <i>essaie</i> de terminer son
L'option Texte avancé
travail à temps, mais n’y arrive pas toujours. Il essaie cependant farouchement.
Rechercher essaie pas de balise interne i ne permet de trouver que la seconde
instance du mot essaie. Voir Recherche de texte entouré de balises spécifiques,
page 141.
vous permet de rechercher des balises, attributs et valeurs
d'attribut spécifiques telles que toutes les balises TD avec VALIGN paramétré sur
TOP. Voir Recherche de balises et attributs HTML, page 139.
L'option balise
4
Utilisez l'une des options suivantes pour élargir ou rétrécir la recherche :
limite la recherche au texte dont la casse
(combinaison de caractères majuscules et minuscules) correspond au texte que
vous voulez trouver. Par exemple, si vous recherchez les Français, vous ne
trouverez pas le site français.
L'option Tenir compte de la casse
L'option Ignorer les différences entre les espaces blancs traite tout espace
blanc comme un simple espace pour ce qui a trait à la correspondance. Par
exemple, lorsque cette option est sélectionnée, une recherche sur ce texte
trouvera ce texte mais non cetexte. Cette option n'est pas disponible lorsque
l'option Utiliser les expressions régulières est sélectionnée ; vous devez écrire
explicitement l'expression régulière pour ignorer les espaces blancs.
L'option Utiliser les expressions régulières fait que certains caractères (tels que
?, *, \w et \b) de la chaîne recherchée sont interprétés comme des opérateurs
d'expression réguliers. Par exemple, si vous cherchez le c\w*\b noir, vous
trouverez aussi bien le chien noir que le chapeau noir. Voir À propos des expressions
régulières, page 143.
138
Chapitre 7
Recherche de texte dans la fenêtre Document
Utilisez l'option texte de la boîte de dialogue Rechercher ou Remplacer pour
rechercher des chaînes de texte spécifiques en ignorant les codes HTML. Par
exemple, si vous cherchez le chien noir, vous trouverez aussi bien le chien noir que le
chien <i>noir</i>. Voir Recherche et remplacement, page 137 pour obtenir des
instructions pas à pas sur le lancement d'une recherche.
Recherche de texte dans la source HTML
Utilisez l'option source HTML de la boîte de dialogue Rechercher ou Remplacer
pour rechercher des chaînes de texte spécifiques dans le code source HTML. Par
exemple, si vous cherchez chien noir dans le code suivant, vous trouverez deux
correspondances (dans l'attribut ALT et dans la première phrase) :
<IMG SRC="rex.gif" WIDTH="100" HEIGHT="100"
ALT="Rex, un chien noir."><BR>
Nous avons vu plusieurs chiens dans le parc.
Le <A HREF="rex.html">chien</A> noir le plus sympa s’appelle Rex.
Les mots chien noir apparaissent également dans la deuxième phrase mais ils ne
sont pas trouvés parce qu'ils sont coupés par un lien.
Voir Recherche et remplacement, page 137 pour obtenir des instructions pas à pas
sur le lancement d'une recherche.
Recherche de balises et attributs HTML
Utilisez l'option Balise de la boîte de dialogue Rechercher ou Remplacer pour
rechercher des balises, attributs et valeurs d'attributs spécifiques. Par exemple,
vous pouvez rechercher toutes les balises IMG avec l'attribut ALT. Voir Recherche et
remplacement, page 137 pour plus d'informations sur les différents types de
recherche.
Pour effectuer une recherche de balise :
1
Commencez la recherche en suivant les étapes décrites dans Recherche et
remplacement, page 137.
2
Cliquez sur un marqueur spécifique dans le menu déroulant adjacent au menu
déroulant Rechercher, ou cliquez sur [toute balise].
Si vous voulez seulement rechercher toutes les occurrences de la balise spécifiée,
appuyez sur le bouton (-) et passez à l'étape 5. Sinon, passez à l'étape 3.
Gestion de site
139
3
Limitez la recherche à l'aide de l'un des modificateurs de balise suivants :
vous permet d'opérer un choix dans une liste d'attributs
devant figurer dans la balise pour que la correspondance soit trouvée. Vous
pouvez spécifier une valeur particulière pour cet attribut ou sélectionner [toute
valeur].
L'option Avec attribut
L'option Sans attribut vous permet d'opérer un choix dans une liste d'attributs
ne devant pas figurer dans la balise pour que la correspondance soit trouvée.
C'est l'option qu'il convient de choisir si vous recherchez tous les marqueurs
IMG sans attribut ALT.
vous permet de spécifier un texte, un texte et un code ou
une balise devant figurer dans la balise pour que celle-ci soit trouvée. Par
exemple, dans le code <B><FONT FACE=”Arial”>Heading 1</FONT></B> , la
balise FONT se trouve à l’intérieur de la balise B.
L'option Contenant
L'option Ne contenant pas vous permet de spécifier un texte, un texte et un
code ou une balise ne pouvant pas figurer dans la balise pour que celle-ci soit
trouvée.
L'option Balise interne vous permet de spécifier une balise à l'intérieur de
laquelle la balise cible doit se trouver pour être détectée.
vous permet de spécifier une balise à l'intérieur
de laquelle la balise cible ne peut pas se trouver pour être détectée.
L'option Pas de balise interne
140
Chapitre 7
4
Cliquez sur le bouton (+) et répétez l'étape 3 pour rétrécir davantage la
recherche.
5
Cliquez sur Rechercher suivant pour mettre en surbrillance l'occurrence
suivante du texte recherché dans le document en cours, ou sur Rechercher tout
pour générer une liste de toutes les occurrences du texte recherché dans le
document en cours. Si vous recherchez un répertoire ou un site, la fonction
Rechercher suivant met en surbrillance l'occurrence suivante du texte
recherché dans le document en cours ou, à défaut, ouvre le document suivant
contenant le texte recherché, tandis que Rechercher tout génère la liste des
documents contenant le texte recherché.
Recherche de texte entouré de balises spécifiques
Utilisez l'option Texte (avancé) de la boîte de dialogue Rechercher ou Remplacer
pour rechercher des chaînes de texte spécifiques se trouvant à l'intérieur ou à
l'extérieur d'un jeu de balises. Par exemple, vous pouvez rechercher le mot
Document sans-titre entre les balises TITLE pour trouver toutes les pages sans titre
du site. Voir Recherche et remplacement, page 137 pour plus d'informations sur les
différents types de recherche.
Pour effectuer une recherche de texte avancée :
1
Commencez la recherche en suivant les étapes décrites dans Recherche et
remplacement, page 137.
2
Tapez le texte que vous voulez rechercher dans la zone de texte adjacente au
menu contextuel Rechercher.
Par exemple, tapez le mot Document sans-titre.
3
Sélectionnez l'option Contenant ou ne Contenant pas, puis choisissez une
balise dans le menu déroulant adjacent.
Par exemple, cliquez sur Contenant, puis sur TITLE.
4
Cliquez sur le bouton plus (+) pour limiter la recherche aux balises ayant un
ou plusieurs attribut(s) spécifique(s).
Du fait que la balise TITLE est dépourvue d'attributs, il est inutile d'utiliser cette
option pour rechercher toutes les pages sans titre du site.
5
Cliquez sur Rechercher suivant pour ouvrir le document suivant contenant le
texte recherché, ou sur Rechercher tout pour générer une liste des documents
contenant ce texte.
Enregistrement de modèles
Vous pouvez enregistrer des modèles de recherche en vue d'un usage ultérieur en
cliquant sur le bouton Enregistrer la requête dans la boîte de dialogue Rechercher
ou Remplacer. Il est utile d'enregistrer une requête si vous effectuez régulièrement
la même recherche (par exemple, pour extraire des balises non standard de
documents créés avec un autre éditeur HTML, ou pour confirmer que toutes les
images d'un fichier ont des attributs HEIGHT, WIDTH et ALT avant de publier le
document sur le web) et souhaitez ne pas devoir réintroduire chaque fois les
critères de recherche.
Gestion de site
141
Pour enregistrer un modèle de recherche :
1
Définissez les paramètres de recherche en procédant de la manière décrite dans
Recherche et remplacement, page 137.
Si vous exécutez une recherche de balise ou de texte (avancé), voir Recherche de
balises et attributs HTML, page 139 ou Recherche de texte entouré de balises
spécifiques, page 141 pour plus d'informations sur la définition de paramètres
de recherche supplémentaires.
2
Cliquez sur le bouton Enregistrer la requête (identifié par l'icône représentant
une disquette).
L'emplacement par défaut pour l'enregistrement des requêtes est le sousrépertoire Configuration/Queries se trouvant dans le répertoire de
l'application Dreamweaver.
3
Dans la boîte de dialogue qui s'affiche, attribuez au fichier un nom identifiant
la requête, puis cliquez sur Enregistrer.
Par exemple, si le modèle de recherche inclut la recherche de balises IMG sans
l'attribut ALT, vous pourriez nommer la requête img_sans_alt.dwr. Les requêtes
de recherche se terminent par l'extension dwq ; les requêtes de remplacement,
par l'extension dwr.
Pour rappeler un modèle de recherche :
1
Choisissez Édition > Rechercher ou Édition > Remplacer.
2
Cliquez sur le bouton Charger la requête (identifié par une icône de
répertoire).
La boîte de dialogue Charger la requête s'ouvre automatiquement dans le
répertoire Configuration/Queries. Vous pouvez naviguer vers un autre
répertoire si vous avez enregistré des requêtes ailleurs.
3
Sélectionnez une fichier de requête, puis cliquez sur Ouvrir.
Si vous vous trouvez dans la boîte de dialogue Rechercher, seules les requêtes
de recherche (fichiers .dwq) sont disponibles. Si vous vous trouvez dans la
boîte de dialogue Remplacer, seules les requêtes de remplacement (fichiers
.dwr files) sont disponibles.
4
142
Chapitre 7
Cliquez sur Rechercher suivant, Rechercher tout, Remplacer ou Remplacer
tout pour lancer la recherche.
À propos des expressions régulières
Les expressions régulières sont des modèles décrivant les combinaisons de
caractères dans le texte. Utilisez-les dans vos recherches pour décrire des concepts
tels que "phrases contenant le mot 'untel'" et "valeurs d'attribut contenant un
nombre". Le tableau ci-après présente les caractères spéciaux des expressions
régulières, leur signification et des exemples d'utilisation.
Pour rechercher du texte contenant un des caractères spéciaux présentés dans le
tableau, indiquez le caractère spécial à l'aide d'une barre oblique inversée. Par
exemple, pour rechercher l'astérisque dans la phrase "conditions spéciales*", vous
pouvez utiliser un modèle de recherche tel que : spéciales\*. Si vous n'échappez pas
l'astérisque, vous trouverez toutes les occurrences de "spéciales" (de même que
"spéciale", "spécialess" et "spécialesss"), et pas seulement celles suivies d'un
astérisque.
Caractère
Indique
Exemple
^
Début d'entrée ou de ligne.
^T correspond à "T" dans
"Tonerre de Brest" mais pas dans
"Mon oncle Thomas"
$
Fin d'entrée ou de ligne.
n$ correspond à "h" dans "malin"
mais pas dans "noir"
*
Le caractère précédent, 0 ou
plusieurs fois.
um* correspond à "um" dans
"rhum", à "umm" dans "yummy" et
à "u" dans "bouge"
+
Le caractère précédent, une ou
plusieurs fois.
um+ correspond à "um" dans
"rhum", à "umm" dans "yummy",
mais à rien dans "bouge"
?
Le caractère précédent, 0 ou une st?on correspond à "son" dans
fois.
"Johnson" et "ston" dans
"Johnston", mais à rien dans
"Appleton" ou "tension"
.
Tout caractère sauf une nouvelle
ligne (retour à la ligne).
.an correspond à "ran", "tan" et à
"lan" dans la phrase "rantanplan"
x|y
Soit x, soit y.
FF0000|0000FF correspond à
"FF0000" dans
BGCOLOR="#FF0000" et à
"0000FF'" dans FONT
COLOR="#0000FF"
{n}
Exactement n occurrences du
caractères précédent.
l{2} correspond à "ll" dans "elle" et
aux deux premiers l de "ellllle",
mais ne correspond à rien dans
"léger"
{n,m}
Au moins n et au plus m
occurrences du caractère
précédent.
F{2,4} correspond à "FF" dans
"#FF0000" et aux quatre premiers
F dans #FFFFFF
Gestion de site
143
144
Chapitre 7
Caractère
Indique
Exemple
[abc]
Tout caractère entouré de
crochets. Spécifiez une plage de
caractères à l'aide d'un traitd'union (par exemple, [a-f]
équivaut à [abcdef]).
[e-g] correspond à "e" dans "oeil",
à "f" dans "fil" e à "g" dans "garde"
[^abc]
Tout caractère non entouré de
crochets. Spécifiez une plage de
caractères à l'aide d'un traitd'union (par exemple, [^a-f]
équivaut à [^abcdef]).
[^aeiou] correspond initialement
à "r" dans "orange", à "b" dans
"balle" et à "k" dans "eek!"
\b
Limite de mot (telle un espace ou \bb correspond à "b" dans "balle"
un retour de chariot).
mais à rien dans "gober" ou "snob"
\B
Non limite de mot.
\Bb correspond à "b" dans "gober"
mais à rien dans "balle"
\d
Tout chiffre. Équivalent de [0-9].
\d correspond à "3" dans "C3PO" et
à "2" dans "appartement 2G"
\D
Tout caractère sauf un chiffre.
Équivalent de [^0-9].
\D correspond à "S" dans "900S" et
à "Q" dans "Q45"
\f
Saut de page.
\n
Saut de ligne.
\r
Retour de chariot.
\s
Tout caractère d’espace :
espacement, tabulation, saut de
page ou saut de ligne.
\sval correspond à "balle" dans "le
val André" mais à rien dans "aval"
\S
Tout caractère autre qu’un
espace.
\Sval correspond à "val" dans "aval"
mais à rien dans "le val André"
\t
Tabulation.
\w
Tout caractère alphanumérique,
notamment le caractère de
soulignement. Équivaut à
[A-Za-z0-9_].
c\w* correspond à "chien" dans "le
chien noir", de même qu'à "col" et
"chien" dans "le col du chien noir"
\W
Tout caractère sauf
alphanumérique. Équivaut à
[^A-Za-z0-9_].
\W correspond à "&" dans "Tintin
& Milou" et à "%" dans "100 %"
Gestion des liens
Dreamweaver peut mettre à jour les liens vers et à partir d'un document chaque
fois que vous le déplacez ou le renommez à l'intérieur d'un site local. Cette
fonction opère de façon optimale lorsqu'un site tout entier (ou une section entière
de celui-ci) est stocké sur votre lecteur local. Aucune modification n'est apportée
aux fichiers du site distant tant que vous n'avez pas placé ou archivé les fichiers
locaux sur le serveur distant.
Pour activer la gestion des liens dans Dreamweaver :
1
Choisissez Édition > Préférences, puis sélectionnez Général.
2
Dans le menu déroulant Mettre à jour les liens, choisissez Toujours ou Invite,
puis cliquez sur OK.
Si vous choisissez Toujours, Dreamweaver met automatiquement à jour les
liens vers et à partir d'un document chaque fois que vous le déplacez ou le
renommez (pour obtenir des instructions spécifiques sur ce qu'il convient de
faire lorsque vous supprimez un fichier, voir Modification d'un lien au niveau
du site, page 146). Si vous choisissez Invite, Dreamweaver commence par
afficher une boîte de dialogue dans laquelle figure la liste de tous les fichiers
affectés par le changement. Cliquez sur Mettre à jour pour mettre à jour les
liens de ces fichiers, ou sur Ne pas mettre à jour pour laisser les fichiers intacts.
Si l'option d'archivage et d'extraction est activée, Dreamweaver essaie
automatiquement d'extraire le fichier avant d'apporter des modifications.
Pour accélérer le processus de mise à jour, Dreamweaver peut créer un fichier
cache dans lequel stocker des informations sur tous les liens du site local. Ce
fichier cache est créé lorsque vous sélectionnez l'option Cache dans la boîte de
dialogue Définition du site, et il est imperceptiblement mis à jour lorsque vous
utilisez Dreamweaver pour ajouter, modifier ou supprimer des liens vers des
fichiers du site local.
Pour créer un fichier cache pour votre site :
1
Choisissez Fichier > Ouvrir site > Définir les sites (Windows) ou Site > Définir
les sites (Macintosh).
2
Sélectionnez le site dans la boîte de dialogue Définir les sites, cliquez sur
Modifier, puis activez l'option Cache dans la boîte de dialogue Infos locales.
Pour recréer un cache pour votre site :
Choisissez Site > Recréer le cache du site.
Gestion de site
145
La première fois que vous ajoutez, changez ou supprimez des liens sur votre site
local après avoir lancé Dreamweaver, le programme vous invite à charger le cache.
Si vous cliquez sur Oui, le cache se charge et tous les liens avec le fichier que vous
avez changé sont automatiquement mis à jour. Si vous cliquez sur Non, le
changement est consigné dans le cache, mais celui-ci ne se charge pas et les liens ne
sont pas mis à jour.
Sur les sites de grande taille, le chargement du cache peut prendre quelques
minutes ; l'essentiel de ce temps est utilisé pour comparer l’heure et la date des
fichiers se trouvant sur le site local à celles enregistrées dans le cache afin de voir si
le cache est périmé. Si vous n'avez pas changé de fichiers hors de Dreamweaver,
vous pouvez cliquer sur Stop en toute sécurité lorsque le bouton s'affiche.
Modification d'un lien au niveau du site
Outre la mise à jour automatique des liens par Dreamweaver chaque fois que vous
déplacez ou renommez un fichier, vous pouvez changer manuellement tous les
liens (notamment mailto, ftp, nowhere et script) pour qu'ils pointent ailleurs.
Vous pouvez utiliser cette option à tout moment (par exemple, il se peut que les
mots "au menu cette semaine" soient liés à /menus/32.html dans tout le site et
que, la semaine suivante, vous deviez changer ces liens pour qu'ils pointent sur /
menus/33.html) ; mais elle est particulièrement utile lorsque vous voulez
supprimer un fichier vers lequel pointent des liens d'autres fichiers.
Pour changer un lien de fichier au niveau du site :
1
Sélectionnez un fichier dans le volet du site local de la fenêtre Site.
2
Choisissez Site > Modifier le lien au niveau du site.
3
Dans la boîte de dialogue qui s'affiche, tapez un chemin relatif à la racine du
site vers un autre fichier dans la zone En lien à, ou cliquez sur l'icône de
répertoire pour naviguer jusqu'à un fichier et le sélectionner.
4
Cliquez sur OK.
Dreamweaver met à jour tous les liens pointant vers le fichier sélectionné en
faisant en sorte qu'ils pointent vers un autre fichier, en utilisant le format de
chemin d'accès existant (par exemple, si l'ancien chemin d'accès était relatif au
document, le nouveau l'est également).
Lorsqu'un lien a été changé au niveau du site, le fichier sélectionné devient
orphelin (plus aucun fichier du site local ne pointe vers lui). Vous pouvez le
supprimer en toute sécurité sans risque d'altérer des liens du site local.
Remarque: Tous les changements intervenant localement, songez que vous allez devoir
supprimer manuellement le fichier correspondant sur le site distant, et placer ou archiver
tous les fichiers dans lesquels des liens ont changé pour que les visiteurs de votre site
puissent percevoir les changements.
146
Chapitre 7
Pour changer des liens e-mail, ftp, nowhere ou script au niveau du site :
1
Choisissez Site > Modifier le lien au niveau du site.
2
Dans la boîte de dialogue qui s'affiche, tapez le lien que vous voulez modifier
dans le champ Modifier tous les liens à.
3
Entrez le nouveau lien dans le champ En liens à.
4
Cliquez sur OK.
Par exemple, pour mettre à jour tous les liens e-mail pointant vers votre ancienne
adresse, vous pouvez taper mailto:[email protected] dans le champ Modifier tous
les liens à, et mailto:[email protected] dans le champ En liens à.
Test du site
Avant de télécharger le site sur un serveur, et de le déclarer prêt à être diffusé, il
convient de le tester localement. Vous pourrez ainsi vous assurer que les pages
présentent l'aspect voulu et opèrent de la manière prévue dans les navigateurs
visés, qu'elles ne comportent pas de liens brisés et que leur téléchargement ne
prend pas trop de temps.
Les instructions suivantes vous aideront à garantir aux visiteurs de votre site une
expérience positive :
Assurez-vous que les pages fonctionnent comme prévu dans les navigateurs
visés et qu'elles échouent "élégamment" dans les autres. Les pages doivent être
lisibles et fonctionnelles dans les navigateurs ne prenant pas en charge les
styles, les calques ou les éléments JavaScript. Voir Vérification de la
compatibilité d'une page avec les navigateurs cibles, page 148. Pour les pages qui
ne s'affichent pas dans des navigateurs plus anciens, songez à utiliser le
comportement Vérifier le navigateur pour rediriger automatiquement les
visiteurs vers une autre page. Voir Vérification du navigateur, page 266.
Vérifiez si le site contient des liens brisés (et réparez-les). Dreamweaver génère
également une liste de liens vers des sites externes lorsque vous vérifiez les
liens. Périodiquement, suivez ces liens pour vous assurer qu'ils sont toujours
valides. Les autres sites étant parfois modifiés et réorganisés, il peut arriver que
certaines pages vers lesquelles vos liens pointent soient déplacées ou
supprimées. Voir Vérification des liens entre documents, page 149 et Réparation
de liens brisés, page 150.
Affichez les pages dans le plus grand nombre de navigateurs et sur le plus
grand nombre de plates-formes possible. Ceci vous donne la possibilité de voir
les différences de présentation, de couleur, de taille de police et de format de
fenêtre par défaut qu'il est impossible de prévoir lors de la vérification dans le
navigateur cible. Voir Aperçu dans des navigateurs, page 151.
Gestion de site
147
Surveillez la taille des pages et le temps nécessaire à leur téléchargement.
Songez que, pour les pages contenant un grand tableau, les visiteurs ne voient
rien tant que le tableau n'est pas entièrement chargé. Envisagez de fragmenter
les grands tableaux ; si c'est impossible, envisagez de placer du contenu, tel
qu’un message de bienvenue ou une bannière publicitaire, en dehors du
tableau, en haut de la page, de manière à ce que les utilisateurs puissent voir ce
contenu pendant le téléchargement du tableau. Voir Vérification du temps et de
la taille de téléchargement, page 152.
Vérification de la compatibilité d'une page avec les navigateurs
cibles
Dreamweaver vous permet de construire des pages web avec des éléments pris en
charge par tous les navigateurs (par exemple des images et un paragraphe de texte),
de même que des éléments qui ne sont pris en charge que par des navigateurs
récents (par exemple, les styles et les calques).
La fonction Vérifier navigateurs cibles teste le code HTML de vos documents
pour voir s'il ne contient pas de balises et d’attributs non pris en charge par vos
navigateurs cibles. Cette vérification n'altère en rien le document.
La fonction Vérifier navigateurs cibles utilise des fichiers texte appelés profils de
navigateur pour déterminer les balises prises en charge par tel ou tel autre
navigateur. Dreamweaver comprend des profils prédéfinis pour Netscape
Navigator, versions 2.0, 3.0 et 4.0, et Internet Explorer, versions 2.0, 3.0 et 4.0.
Pour modifier les profils existants ou en créer de nouveaux, voir Créer et modifier
les profils de navigateur, page 311.
Vous pouvez exécuter une vérification du navigateur cible sur un document, un
répertoire ou tout un site.
Pour exécuter une vérification du navigateur cible :
148
Chapitre 7
1
Sélectionnez l'une des options suivantes :
Pour appliquer la vérification sur le document en cours, enregistrez le fichier.
La vérification est appliquée à la dernière version enregistrée du fichier. Elle ne
porte donc pas sur les changements non enregistrés.
Pour appliquer la vérification à un répertoire ou un site, choisissez Fenêtre >
Fichiers du site pour ouvrir la fenêtre Site, puis sélectionnez un sous-répertoire
du répertoire local. La vérification du navigateur cible est appliquée à tous les
fichiers HTML de ce répertoire et de ses sous-répertoires. Les vérifications de
navigateurs ne peuvent être appliquées qu'aux fichiers locaux.
2
Choisissez Fichier > Vérifier navigateurs cibles.
Si vous n'avez pas encore sélectionné de navigateur principal, le programme
vous invite à le faire.
3
Dans la liste des navigateurs, cliquez sur celui qui doit faire l’objet de la
vérification.
4
Cliquez sur Vérifier.
Le rapport de vérification du navigateur s'ouvre dans votre navigateur
principal (le cas échéant, celui-ci démarre).
5
Pour enregistrer le rapport en vue d'une consultation ultérieure, dans le
navigateur, choisissez Fichier > Enregistrer.
Le rapport de vérification du navigateur cible est un fichier temporaire qui sera
stocké dans le dossier Temp de Windows et dans la racine du document sur
Macintosh. Ce fichier sera perdu si vous ne l'enregistrez pas avant de naviguer
vers un autre site.
Vérification des liens entre documents
Utilisez la fonction Vérifier liens pour rechercher les liens brisés et les fichiers non
référencés dans un fichier ouvert du site local, ou dans le site local tout entier.
Dreamweaver vérifie uniquement les liens et les références relatifs aux documents
du site. Dreamweaver dresse une liste des liens externes apparaissant dans le(s)
document(s) sélectionné(s), mais ne les vérifie pas.
Pour vérifier les liens dans le document en cours :
1
Enregistrez le fichier dans un emplacement du site local.
2
Choisissez Fichier > Vérifier liens > Ce document.
Pour vérifier les liens à l'intérieur d'une portion du site local :
1
Choisissez Fenêtre > Fichiers du site pour ouvrir la fenêtre Site.
2
Choisissez un site dans le menu déroulant de la liste des sites.
3
Dans le volet du site local, sélectionnez les fichiers ou répertoires à vérifier.
4
Cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche
Contrôle enfoncée (Macintosh), puis choisissez Vérifier les liens > Fichiers/
Dossiers sélectionnés dans le menu contextuel.
Gestion de site
149
Pour vérifier les liens dans le site tout entier :
Choisissez Fichier > Vérifier liens > Site entier.
Lorsque Dreamweaver a fini de vérifier les liens dans les fichiers spécifiés, il ouvre
la boîte de dialogue Vérificateur de lien. Cette boîte de dialogue affiche la liste des
liens brisés, des liens externes (ceux que Dreamweaver ne peut pas vérifier parce
qu'ils renvoient à des pages ne faisant pas partie du site) et des fichiers orphelins
(fichiers auxquels aucun autre document ne renvoie).
Pour basculer entre Liens brisés, Liens externes et Fichiers orphelins, sélectionnez
la rubrique appropriée dans le menu déroulant Afficher.
Pour enregistrer tout le rapport comme fichier texte délimité par des tabulations,
cliquez sur Enregistrer. Voir aussi Réparation de liens brisés, page 150.
Réparation de liens brisés
Lorsque vous vérifiez des liens dans Dreamweaver, le Vérificateur de lien affiche
un rapport des liens brisés, liens externes et, si vous avez choisi de vérifier le site
tout entier, des fichiers orphelins.
Vous pouvez réparer les liens brisés et les références d'image directement dans la
boîte de dialogue Vérificateur de lien ou ouvrir des fichiers de la liste et réparer les
liens dans l'inspecteur de propriétés.
Pour réparer des liens dans la boîte de dialogue Vérificateur de lien.
1
Dans la boîte de dialogue Vérificateur de lien, sélectionnez le lien brisé.
2
Tapez le chemin d'accès et le nom de fichier corrects, ou cliquez sur l'icône de
répertoire pour naviguer vers le fichier.
3
Appuyez sur Tab ou sur Entrée.
S'il y a d'autres liens brisés vers le même fichier, une boîte de dialogue
s'affiche, vous invitant à réparer également les références dans les autres
fichiers. Cliquez sur Oui pour faire en sorte que Dreamweaver mette à jour
tous les documents de la liste faisant référence à ce fichier. Cliquez sur Non
pour faire en sorte que Dreamweaver mette uniquement à jour la référence
actuelle.
Remarque: Si l'option d'archivage et d'extraction de fichier est activée pour le site,
Dreamweaver essaie de vérifier les fichiers nécessitant des changements. S'il ne peut pas
extraire un fichier, Dreamweaver affiche une boîte de dialogue d'avertissement et laisse les
références brisées inchangées. Voir Utilisation du système d'archivage et d'extraction
de fichiers, page 133.
150
Chapitre 7
Pour réparer des liens dans l'inspecteur de propriétés :
1
Dans la boîte de dialogue Vérificateur de lien, double-cliquez sur une entrée
de la colonne Fichier.
Dreamweaver ouvre le document, sélectionnez l'image ou le lien
problématique, et met en surbrillance le chemin d'accès et le nom de fichier
dans l'inspecteur de propriétés (si ce dernier n'est pas visible, choisissez
Fenêtre > Propriétés pour l'ouvrir).
2
Tapez sur le texte en surbrillance pour définir un nouveau chemin d'accès et
nom de fichier, ou cliquez sur l'icône de répertoire pour naviguer vers le
fichier.
Si vous mettez à jour une référence d'image et si la nouvelle image s'affiche à
un mauvais endroit, cliquez sur L et H dans l'inspecteur de propriétés, ou sur
le bouton Actualiser pour réinitialiser les valeurs de hauteur et de largeur. Les
mentions L et H passent de caractère gras à caractère normal.
3
Enregistrez le fichier.
À mesure que les liens sont réparés, leur entrée disparaît de la liste Liens brisés. Si
une entrée figure toujours dans la liste après avoir entré un nouveau chemin
d'accès ou nom de fichier dans le vérificateur de lien (ou après avoir enregistré des
changements apportés à l'inspecteur de propriétés), cela signifie que Dreamweaver
ne peut pas trouver le nouveau fichier. Le lien est encore considéré comme brisé.
Aperçu dans des navigateurs
Vous pouvez afficher un aperçu des documents dans des navigateurs cibles à tout
moment en cliquant sur Fichier > Aperçu dans le navigateur. Vous pouvez
également appuyer sur F12 pour afficher le document en cours dans le navigateur
principal ou Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher
le document en cours dans le navigateur secondaire. Il est inutile d'enregistrer
préalablement le document. Toutes les fonctions liées au navigateur opèrent, y
compris les comportements JavaScript, les liens relatifs et absolus avec le
document, les contrôles ActiveX, les plug-ins Netscape, etc., pour autant que vous
ayez installé les plug-ins ou contrôles ActiveX requis.
Choisissez Fichier > Aperçu dans le navigateur > Éditer la liste des navigateurs
pour changer de navigateur principal ou définir un navigateur secondaire. Vous
pouvez définir jusqu'à 20 navigateurs pour consulter des aperçus. Tous les
navigateurs que vous définissez apparaissent dans le menu Aperçu du navigateur.
Le contenu lié à un chemin d'accès relatif à la racine n'apparaît pas lorsque vous
prévisualisez des documents sur un navigateur local. Cela est dû au fait que les
navigateurs ne reconnaissent pas les racines de site (contrairement aux serveurs).
Pour afficher l'aperçu d'un contenu lié par un chemin d'accès relatif à la racine,
placez le fichier sur un serveur distant, puis affichez-le à partir de là. Voir aussi À
propos des chemins relatifs et absolus, page 114.
Gestion de site
151
Paramétrage des préférences pour Aperçu dans le navigateur
Les préférences pour Aperçu dans le navigateur affichent les navigateurs
actuellement définis comme principal et secondaire. Pour ouvrir les préférences
d'aperçu dans le navigateur, choisissez Édition > Préférences, Aperçu dans le
navigateur ou Fichiers > Aperçu dans le navigateur > Éditer la liste des navigateurs.
Voir Aperçu dans des navigateurs, page 151.
Ajouter
Définit un nouveau navigateur.
Modifier
Change les paramètres du navigateur sélectionné.
Supprimer
Supprime le navigateur sélectionné de la liste.
et navigateur secondaire Spécifie si le navigateur sélectionné
est le navigateur principal ou le navigateur secondaire. La touche F12 ouvre le
navigateur principal et la touche Ctrl+F12 (Windows) ou Commande+F12
(Macintosh) ouvre le navigateur secondaire.
Navigateur principal
(uniquement pour Windows) Fournit la page courante pour un
aperçu sur un serveur local comme URL commençant par
http://hôteLocal/. Avec cette option désactivée, Dreamweaver ouvre le document
dans un navigateur, avec un chemin d'accès de fichier commençant par file://.
Quelquefois, les liens spécifiés comme chemins d'accès relatifs à la racine ne
fonctionnement pas correctement lorsqu'on les ouvre dans un navigateur avec un
chemin d'accès file://.
Aperçu en ligne
Vérification du temps et de la taille de téléchargement
Le temps et la taille de téléchargement estimés de la page en cours apparaissent au
bas de la fenêtre Document. Dreamweaver calcule la taille sur la base du contenu
de toute la page, y compris de tous les objets liés tels que les images et les plug-ins.
Dreamweaver estime le temps de téléchargement sur la base de la vitesse de
connexion entrée dans le volet de la barre d'état de la boîte de dialogue
Préférences. Le temps de téléchargement réel dépend des conditions de trafic
Internet générales.
Pour définir les préférences en matière de taille et de temps de téléchargement:
1
Choisissez Édition > Préférences, puis cliquez sur Barre d'État.
2
Choisissez une vitesse de connexion avec laquelle calculer le temps de
téléchargement.
La vitesse de connexion moyenne est de 28,8. Si vous concevez un site pour
intranet, vous pouvez sélectionner 1500 (vitesse T1).
152
Chapitre 7
8
CHAPITRE 8
Utilisation de Roundtrip HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Roundtrip – Vue d’ensemble
Roundtrip HTML est une fonction unique à Dreamweaver qui permet
d'échanger des documents entre Dreamweaver et un éditeur HTML moyennant
un impact nul ou infime sur le contenu et la structure du code source HTML du
document. Dreamweaver conserve et affiche même certains codes HTML
techniquement non valides (par exemple, une balise FONT entourant plusieurs
balises P) s'ils sont pris en charge par les navigateurs. Le code source HTML
généré par Dreamweaver lorsque vous éditez est cependant toujours valide.
Voici les fonctions clés de Roundtrip HTML :
Par défaut, Dreamweaver réécrit les balises qui se chevauchent, ferme les
balises qui ne peuvent pas rester ouvertes et supprime les balises de fermeture
superflues lorsque vous revenez dans Dreamweaver à partir d'un éditeur
externe ou lorsque vous ouvrez un document HTML existant. Si vous ne
voulez pas que Dreamweaver écrase du code source HTML, choisissez
Édition > Préférences, puis sélectionnez HTML pour désactiver toute
réécriture. Voir Paramétrage des préférences de réécriture HTML, page 156.
Dreamweaver affiche des marqueurs dans la fenêtre du document pour les
codes HTML non valides qu'il ne prend pas en charge. Les balises non valides
sont mises en surbrillance en jaune et le texte à l'intérieur de ces balises
s'affiche comme du texte ordinaire. Lorsque vous sélectionnez la balise non
valide, Dreamweaver décrit l'erreur et la manière de la corriger dans
l'inspecteur de propriétés. Si vous désactivez la réécriture HTML,
Dreamweaver affiche comme non valide tout code HTML qu'il aurait réécrit.
153
Dreamweaver ne modifie pas les balises qu'il ne reconnaît pas (notamment les
balises XML) parce qu'il ne dispose d'aucun critère lui permettant de juger de
leur validité ou de leur non validité. Toutefois, si ces balises en chevauchent
d'autres, il se peut que Dreamweaver les considère comme non valides et les
marque comme erronées. Par exemple, la balise personnalisée dans l'exemple
suivant serait marquée comme erronée :
<maNouvelleBalise><B>texte</maNouvelleBalise></B> .
Dreamweaver ne modifie pas les balises CFML (Cold Fusion Markup
Language) ou les balises ASP (Active Server Page), et affiche des icônes pour
identifier les blocs de code CFML ou ASP dans la fenêtre Document chaque
fois que possible. Voir Édition de fichiers Cold Fusion (CFML) et Active Server
(ASP) dans Dreamweaver, page 162. Nous vous recommandons de désactiver
la réécriture de balises non valides avant d'ouvrir des documents ASP ou
CFML dans Dreamweaver. Voir Paramétrage des préférences de réécriture
HTML, page 156.
Dreamweaver vous permet de lancer un éditeur HTML pour modifier le
document en cours. Dreamweaver est intégré avec HomeSite (Windows) et
BBEdit (Macintosh). Voir Utilisation d'autres éditeurs HTML, page 161.
Utilisation de l'inspecteur HTML
L'inspecteur HTML affiche le code source du document en cours. Les balises
répondent à des codes couleurs conformément aux paramètres définis dans les
préférences concernant les couleurs HTML. À mesure que vous ajoutez ou
modifier le contenu d'une fenêtre Document, Dreamweaver affiche
immédiatement les modifications dans l'inspecteur HTML. Cela fait de
l'inspecteur HTML un outil commode pour l'apprentissage du langage HTML si
vous ne le connaissez pas encore, ou pour vous rappeler la syntaxe ou les valeurs
appropriées pour un certain nombre de balises et d'attributs spécifiques.
Les modifications que vous apportez dans l'inspecteur HTML n'apparaissent dans
la fenêtre Document que lorsque vous cliquez à l'écart de l'inspecteur HTML.
Dreamweaver ne réécrit jamais le code HTML que vous tapez directement dans
l'inspecteur HTML. Si vous entrez un code non valide, Dreamweaver met les
balises en surbrillance comme éléments non valides lorsque vous activez la fenêtre
Document.
154
Chapitre 8
Pour ouvrir l'inspecteur HTML, procédez de l'une des manières suivantes :
Choisissez Fenêtre > HTML.
Cliquez sur l'icône de l'inspecteur HTML dans le lanceur ou le mini-lanceur
(situé dans le coin inférieur droit de la fenêtre Document).
Appuyez sur F10.
Pour basculer entre la fenêtre du document et l'inspecteur HTML :
Appuyez sur CTRL+TAB (Windows) ou sur Commande+Tab (Macintosh).
Définition de contrôles de format source HTML
Dreamweaver dispose des contrôles suivants pour le formatage du code source
HTML :
Contrôlent les changements que Dreamweaver
apporte éventuellement à votre code source HTML lorsque vous ouvrez un
document HTML. Voir Paramétrage des préférences de réécriture HTML, page 156.
Préférences de réécriture HTML
Préférences pour le format HTML Contrôlent des options de formatage HTML
ordinaires telles que la longueur de ligne et l'indentation. Voir Paramétrage des
préférences de format HTML, page 156.
SourceFormat.profile vous offre un contrôle maximum sur la manière exacte dont
Dreamweaver écrit le langage HTML. Voir Modifier le profil du formatage de la
source HTML, page 310.
Préférences pour les couleurs HTML Contrôlent le codage couleur des balises
HTML (et le texte qu'elles entourent) dans l'inspecteur HTML. Voir Paramétrage
des préférences pour les couleurs HTML, page 158.
Préférences pour les polices/encodages Permettent de spécifier la police dans
laquelle le code source HTML s'affiche dans l'inspecteur HTML. Voir
Paramétrage des préférences, page 72.
Utilisation de Roundtrip HTML
155
Paramétrage des préférences de réécriture HTML
Les préférences suivantes ont une incidence sur les documents HTML importés.
Elles sont sans effet si vous éditez du code HTML dans l'inspecteur HTML. Si
vous désactivez ces options de réécriture, Dreamweaver affiche des éléments non
valides dans la fenêtre Document pour les codes HTML qu'il aurait normalement
réécrits.
Corriger lorsque possible les balises incorrectement imbriquées et non fermées
Réécrit les balises incorrectement imbriquées ou se chevauchant. Par exemple,
<B><I>texte</B></I> est réécrit comme <B><I>texte</I></B>. Cette option
insère également des marques de guillemets de fermeture et des crochets de
fermetures s'ils sont absents.
Supprimer balises de fermeture superflues Supprime les balises de fermeture
auxquelles ne correspond pas de balise d'ouverture.
Affiche un
récapitulatif des codes HTML techniquement non valides que Dreamweaver a
tenté de corriger. Ce récapitulatif indique l'emplacement du problème (à l'aide des
numéros de ligne et de colonne) de manière à ce que vous puissiez trouver la
correction et veiller à ce qu'elle produise l'effet voulu.
M'avertir lors de la correction ou de la suppression de balises
Paramétrage des préférences de format HTML
Utilisez les préférences de format HTML suivantes pour contrôler des formatages
HTML tels que l'importance du retrait, la longueur de ligne et la hauteur de casse
des noms d'élément et d'attributs lorsque vous créez des documents. Voir Modifier
le profil du formatage de la source HTML, page 310 pour plus d'informations sur
les contrôles de formatage HTML supplémentaires. Pour appliquer les paramètres
de formatage HTML aux documents HTML existants, utilisez la commande
Appliquer le formatage source. Voir Formatage du code source HTML dans des
documents existants, page 160.
Active la mise en retrait de toutes les balises marquées INDENT dans
SourceFormat.profile. Voir Modifier le profil du formatage de la source HTML,
page 310.
Retrait
Utiliser
Spécifie si les retraits doivent être composés d'espaces ou de tabulations.
Met automatiquement en retrait les balises TR et TD
de manière à faciliter la lecture du code du tableau. L'option Retrait doit être
activée pour que cette fonction opère.
Lignes et colonnes de tableau
Cadres et jeux de cadres Met automatiquement en retrait les balises FRAME et les
balises imbriquées FRAMESET pour faciliter la lecture des fichiers de jeu de cadres.
L'option Retrait doit être activée pour que cette fonction opère.
156
Chapitre 8
Détermine la taille des retraits (en espaces ou en tabulations, en
fonction du paramétrage du champ Utiliser). Par exemple, si Utiliser est paramétré
sur tabulations et Taille du retrait sur 4, les balises seront mises en retrait de quatre
tabulations.
Taille du retrait
Taille de tabulation
Détermine la taille des tabulations (exprimées en espaces de
caractères).
Remarque: Si Taille du retrait n'est pas un multiple de Taille de tabulation et si Utiliser est
paramétré sur tabulations, les balises sont mises en retrait à l'aide d'une combinaison de
tabulations et d'espaces de caractères.
Retour à la ligne auto Revient à la ligne (avec un retour de chariot) une fois que la
largeur de colonne spécifiée est atteinte. Par contraste, la case à cocher Retour à la
ligne auto de l'inspecteur HTML ajoute un retour pour les lignes dont la longueur
dépasse la largeur de la fenêtre.
Option utile pour spécifier le type de serveur distant (Windows,
Macintosh ou Unix) auquel vous envoyez les fichiers. Le choix du type de
caractères de saut de ligne approprié garantit que votre code source HTML
s'affiche correctement sur le serveur distant. Ce paramètre est également utile
lorsque vous travaillez avec un éditeur de texte externe ne reconnaissant que
certains types de saut de ligne. Par exemple, utilisez CR LF (Windows) si l'éditeur
de texte est Bloc-Notes, et CR (Macintosh) s'il s'agit de SimpleText.
Sauts de ligne
Casse des balises et Casse des attributs Contrôle l'usage de majuscules ou de
minuscules pour les noms d'éléments et d'attributs.
Remplacer la casse Spécifie s'il faut convertir les noms d'élément et d'attribut dans
la casse spécifiée dans les options précédentes lors de l'ouverture d'un document
HTML existant. Par exemple, si vous voulez toujours afficher les noms de certains
éléments en caractères minuscules, spécifiez les noms d'éléments en minuscules et
activez cette option. Lorsque vous importez un document contenant des noms
d'éléments en majuscules, Dreamweaver les convertit tous en minuscules.
Centrer Spécifie si des éléments doivent être centrés à l'aide de DIV ALIGN="center"
ou de CENTER. Tous deux font partie de la spécification HTML 4.0 Transitional,
mais CENTER est pris en charge par un éventail de navigateurs plus vaste.
Utilisation de Roundtrip HTML
157
Paramétrage des préférences pour les couleurs HTML
Utilisez les préférences de couleurs HTML pour contrôler les couleurs de l'arrièreplan, du texte et des balises dans l'inspecteur HTML.
Couleur d'arrière-plan Spécifie la couleur d'arrière-plan de l'inspecteur HTML.
Cette couleur n'apparaît que lorsque vous cliquez ou tapez dans l'inspecteur ;
lorsqu'il n'y a pas de focalisation sur l'inspecteur HTML, la couleur d'arrière-plan
est gris moyen.
Texte Spécifie la couleur du texte qui s'inscrit entre les balises (par exemple, dans le
code <B>texte</B>, le mot "texte" s'affiche dans la couleur du texte, pas les
balises). Pour passer outre la couleur de Texte pour une balise donnée, sélectionnez
l'option Inclure contenu.
Commentaires
Spécifie la couleur des balises de commentaire (<!-- -->) et de leur
contenu.
Spécifie la couleur pour toutes les balises à l'exception des
commentaires. Pour outrepasser la couleur Valeur par défaut, définissez la couleur
de balises spécifiques.
Valeur par défaut
Vous pouvez passer outre les paramètres de couleur Valeur par
défaut et Texte en spécifiant une couleur de contenu pour des balises spécifiques.
Balise spécifique
Pour définir la couleur d'une balise spécifique :
1
Sélectionnez une balise dans la zone Balise spécifique.
Cliquez en tenant la touche Maj enfoncée pour sélectionner plusieurs balises
adjacentes ou cliquez en tenant la touche CTRL (Windows) ou la touche
Commande (Macintosh) enfoncée afin de sélectionner plusieurs balises
adjacentes.
158
Chapitre 8
2
Cliquez sur la case d'option à côté de l'échantillon de couleur au bas du
panneau et utiliser l'une de ces méthodes pour sélectionner une nouvelle
valeur de couleur.
Dans la zone de texte à côté de l'échantillon, tapez une valeur hexadécimale.
Maintenez le bouton de la souris enfoncé tandis que le pointeur est positionné
sur l'échantillon de couleur, puis sélectionnez une nouvelle couleur dans la
palette de couleurs compatibles avec tous les navigateurs ou avec le sélecteur de
couleur du système.
3
Pour colorier le texte entre les balises d'ouverture et de fermeture, cliquez sur
Inclure contenu.
Nettoyage de documents HTML
Utilisez la commande Nettoyer HTML pour supprimer des balises vides,
combiner des balises FONT imbriquées et apporter d’autres améliorations aux codes
HTML désordonnés ou illisibles.
Pour nettoyer un code HTML :
1
Ouvrez un document existant et choisissez Commandes > Nettoyer HTML.
Par exemple, <B></B> et <FONT COLOR=”FF0000”></FONT> seraient
considérées comme des balises vides, tandis que les balises B dans <B>texte</
B> ne le seraient pas.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez l'une des options
suivantes :
Supprimer les balises vides Supprime toute paire de balises sans contenu. Par
exemple, les balises <B></B> et <FONT COLOR=”FF0000”></FONT> seraient
considérées comme des balises vides, tandis que les balises B dans <B>texte</
B> ne le seraient pas.
Supprimer les balises imbriquées redondantes Supprime toutes les occurrences
redondantes d'une balise. Par exemple, dans le code <B>C’est ce que je voulais
<B>vraiment</B> dire</B>, les balises B entourant le mot "vraiment" sont
redondantes et seraient supprimées.
Supprimer les commentaires HTML ne faisant pas partie de Dreamweaver
Supprime tous les commentaires qui n'ont pas été insérés par Dreamweaver.
Par exemple, <!--début du corps du texte--> serait supprimé, mais <!-#BeginEditable "doctitle" --> ne le serait pas (car il s'agit d'un commentaire
Dreamweaver qui marque le début d'une région modifiable dans un modèle).
Supprime tous les
commentaires insérés par Dreamweaver. Par exemple, <!--#BeginEditable
"doctitle" --> serait supprimé, mais <!--début du corps du texte--> ne le serait
pas (car ce n'est pas un commentaire de Dreamweaver). La suppression des
commentaires de Dreamweaver transforme les documents basés sur un
module en documents HTML ordinaires et les éléments de la bibliothèque en
codes HTML normaux (c'est-à-dire qu'ils ne pourront pas être mis à jour
chaque fois que le module original ou l'élément de bibliothèque change).
Supprimer les commentaires HTML de Dreamweaver
Supprimer balise(s) spécifique(s) Supprime les balises spécifiées dans la zone de
texte adjacente. Utilisez cette option pour supprimer des balises personnalisées
insérées par d'autres éditeurs visuels et d'autres balises que vous ne voulez pas
voir apparaître sur le site (par exemple, BLINK). Séparez les balises multiples par
des virgules (par exemple, FONT, BLINK).
Utilisation de Roundtrip HTML
159
Consolide deux
balises FONT ou davantage lorsqu'elles contrôlent la même plage de texte. Par
exemple, <FONT SIZE=”7”><FONT COLOR=”#FF0000”>rouge</FONT></FONT>
serait changé en <FONT SIZE=”7” COLOR=”#FF0000”>rouge</FONT> .
Combiner les balises <font> imbriquées lorsque possible
Afficher le journal à la fin Affiche un message d'avertissement détaillant les
changements apportés au document dès que le nettoyage est terminé.
3
Cliquez sur OK.
En fonction de la taille du document et du nombre d'options sélectionnées,
l'opération de nettoyage peut durer plusieurs secondes.
Formatage du code source HTML dans des documents existants
Les options de formatage de source HTML que vous spécifiez dans les préférences
pour le format HTML et SourceFormat.profile s'appliquent uniquement aux
documents que vous créerez ensuite avec Dreamweaver. Pour appliquer ces
options de mise en forme, aux documents HTML existants, utilisez la commande
Appliquer le formatage source.
Pour appliquer des options de formatage de la source HTML à un document
existant :
1
Choisissez Fichier > Ouvrir pour ouvrir un fichier HTML existant dans la
fenêtre Document.
2
Choisissez Commandes > Appliquer le formatage source.
Correction du code non valide
Si vous voyez des codes HTML en surbrillance en jaune vif dans la fenêtre
Document ou dans l'inspecteur HTML, c'est que Dreamweaver a trouvé des
codes HTML non valides qu'il ne peut pas afficher. Ces codes HTML non valides
apparaissent souvent lorsque vous commencez à taper une balise dans l'inspecteur
HTML, puis basculez vers la fenêtre Document sans compléter la balise.
Pour résoudre le problème, cliquez sur le code HTML non valide de couleur jaune
et suivez les suggestions de l'inspecteur de propriétés. Voir aussi Roundtrip – Vue
d’ensemble, page 153.
160
Chapitre 8
Utilisation d'autres éditeurs HTML
Il peut arriver que vous vouliez utiliser un éditeur de texte pour coder
manuellement des quantités importantes de code HTML, JavaScript ou VBScript.
Dans ce cas, vous pouvez utiliser n'importe quel éditeur de texte externe avec
Dreamweaver, notamment Bloc-Notes (intégré à Windows 95 et NT) ou
SimpleText (intégré au Macintosh), BBEdit, HomeSite, vi, emacs et TextPad.
Les versions commerciales anglaise, française et allemande complètes de
Dreamweaver sont livrées avec l'éditeur de texte le plus répandu pour Windows,
HomeSite et l'éditeur de texte le plus populaire pour Macintosh, BBEdit. Voir
Utilisation d'un éditeur de texte externe avec Dreamweaver, page 161 et Utilisation
de BBEdit avec Dreamweaver (uniquement Macintosh), page 162.
Si vous avez acheté Dreamweaver en le téléchargeant, vous pouvez obtenir une
copie de HomeSite ou de BBEdit en commandant le CD et le manuel sur le site
web de Dreamweaver (http://www.dreamweaver.com/).
Utilisation d'un éditeur de texte externe avec Dreamweaver
Vous pouvez lancer votre éditeur de texte externe depuis Dreamweaver pour éditer
la source HTML pour le document en cours, puis revenir à Dreamweaver pour
continuer à éditer en bénéficiant de l'interface graphique. Dreamweaver détecte
toute modification enregistrée dans le document par l'éditeur externe et vous
invite à recharger le document.
Pour choisir un éditeur externe :
1
Choisissez Édition > Préférences.
2
Sélectionnez Éditeurs externes dans la liste Catégorie de gauche.
3
Cliquez sur le bouton Parcourir à côté du champ HTML pour sélectionner un
éditeur de texte.
4
Dans l'option Synchroniser les fichiers externes, spécifiez ce que vous voulez
que Dreamweaver fasse lorsqu'il détecte que des changements ont été apportés
de l'extérieur à un document ouvert dans Dreamweaver.
5
Dans Au démarrage, spécifiez la manière dont Dreamweaver doit traiter les
documents avant de lancer l'éditeur.
Pour lancer l'éditeur externe :
Choisissez Édition > Lancer éditeur externe ou cliquez sur Éditeur externe
dans la barre de titre de la fenêtre HTML.
Utilisation de Roundtrip HTML
161
Utilisation de BBEdit avec Dreamweaver (uniquement Macintosh)
Lorsqu'un document est ouvert à la fois dans BBEdit et dans Dreamweaver, le fait
de basculer d'une application à l'autre met le document à jour. En outre, les deux
programmes suivent la sélection en cours. Par exemple, vous pouvez opérer une
sélection dans Dreamweaver puis basculer vers BBEdit où le même élément sera
sélectionné.
Vous pouvez désactiver l'intégration BBEdit si vous préférez travailler avec une
version antérieure de BBEdit ou un autre éditeur de texte HTML. Voir Utilisation
d'un éditeur de texte externe avec Dreamweaver, page 161. Les sélections ne sont pas
suivies si l'intégration BBEdit est désactivée.
Pour utiliser BBEdit avec Dreamweaver :
1
Procédez de l'une des manières suivantes :
Choisissez Édition > Lancer BBEdit.
Cliquez sur BBEdit dans le coin supérieur droit de l'inspecteur HTML.
2
Apportez les modification souhaitées dans BBEdit.
3
Cliquez sur le bouton Dreamweaver de la palette d'outils HTML dans
BBEdit.
Pour désactiver l'intégration BBEdit :
1
Choisissez Édition > Préférences.
2
Sélectionnez Éditeurs externes dans la liste Catégorie de gauche.
3
Désactivez Activer l'intégration de BBEdit, puis cliquez sur OK.
Édition de fichiers Cold Fusion (CFML) et Active Server (ASP) dans
Dreamweaver
Avant d'ouvrir un fichier CFML ou ASP dans Dreamweaver, choisissez Édition >
Préférences, puis sélectionnez HTML et désactivez les options Corriger lorsque
possible les balises incorrectement imbriquées et non fermées et Supprimer balises
de fermeture superflues.
Dreamweaver affiche des icônes pour identifier des blocs de code CFML ou ASP
dans la fenêtre Document chaque fois que possible.
Pour modifier un bloc de code ASP dans la fenêtre Document :
162
Chapitre 8
1
Cliquez sur le marqueur jaune ASP pour le sélectionner.
2
Dans l'inspecteur de propriétés, cliquez sur le bouton Édition.
3
Dans la boîte de dialogue qui s'affiche, éditez le code ASP, puis cliquez sur
OK.
Pour modifier un bloc de code CFML dans la fenêtre Document :
1
Cliquez sur le marqueur FML pour le sélectionner.
2
Dans l'inspecteur de propriétés, procédez de l'une des manières suivantes :
Cliquez sur le bouton Attributs pour modifier les attributs existants des balises
et leurs valeurs, ou pour en ajouter de nouveaux.
Cliquez sur le bouton Contenu pour modifier le contenu inséré entre les
balises CFML d'ouverture et de fermeture. Si la balise sélectionnée est vide
(c'est-à-dire s'il n'y a pas de balise de fermeture), le bouton Contenu est
désactivé.
Si vous ne voyez pas de marqueurs là où vous savez qu'il y a des codes ASP ou
CFML, commencez par vous assurer que l'option Affichage > Éléments invisibles
est activée. Si c'est le cas et si les icônes ne sont toujours pas visibles, Dreamweaver
ne reconnaît pas le code comme CFML ou ASP. Ceci peut se produire lorsque des
conditions sont insérées dans les balises HTML, comme dans le code ASP
suivant :
<input type="checkbox" name="mois" value="octobre"
<% if mois="octobre" then %>coché<% end if %>
>
Pour éditer un code CFML ou ASP lorsqu'aucun marqueur n'apparaît :
1
Dans la fenêtre Document, positionnez le curseur près de l'endroit où vous
savez qu'il existe un code CFML ou ASP.
2
Choisissez Fenêtre > HTML pour ouvrir l'inspecteur HTML.
3
Cliquez sur la barre de titre ou la barre d'état de l'inspecteur HTML.
Ne cliquez pas au milieu de l'inspecteur, sans quoi vous écarteriez le curseur du
code CFML ou ASP que vous voulez éditer.
4
Editez le code directement dans l'inspecteur HTML.
5
Appuyez sur F10 pour fermer l'inspecteur HTML et revenir à la fenêtre
Document.
Pour plus d’informations sur le traitement des codes CFML ou ASP et l'affichage
des résultats dans la fenêtre Document, voir Extending Dreamweaver overview dans
les pages d’aide HTML de Dreamweaver.
Utilisation de Roundtrip HTML
163
Insertion de scripts
Vous pouvez entrer des éléments JavaScript et VBScript dans la fenêtre Document
sans devoir utiliser l'inspecteur HTML.
Pour afficher les marqueurs de script dans la fenêtre du document, choisissez
Affichage > Éléments invisibles. Voir aussi Paramétrage des préférences pour les
éléments invisibles, page 85.
Pour insérer un script :
1
Placez le curseur là où vous voulez insérer le script.
2
Cliquez sur le bouton Script de la palette d'objets ou sur Insertion > Script.
3
Dans la boîte de dialogue qui s'affiche, choisissez le langage de script dans le
menu déroulant.
Si vous utilisez JavaScript sans être certain de la version, choisissez JavaScript
plutôt que JavaScript1.1 ou JavaScript1.2.
4
Entrez le code qui doit s'afficher entre les balises du script.
Pour créer un lien vers un fichier de script externe, cliquez sur OK sans rien
taper, puis ajoutez la référence au fichier source dans l'inspecteur de propriétés
(tapez le nom du fichier dans le champ Source ou cliquez sur l'icône de
répertoire pour naviguer vers le fichier et le sélectionner).
Pour éditer le script :
1
Cliquez sur l'icône Script.
2
Dans l'inspecteur de propriétés, cliquez sur Édition.
Paramétrage des propriétés de script
Voici les propriétés qui apparaissent dans l'inspecteur de propriétés lorsqu'un
marqueur de script est sélectionné :
Langage
Spécifie soit JavaScript soit VBScript comme langage pour le script.
Spécifie un fichier de script lié à l'extérieur. Tapez le chemin d'accès ou
cliquez sur le répertoire pour sélectionner le fichier.
Source
Modifier
164
Chapitre 8
Ouvre la fenêtre Script, qui permet de modifier le script.
Insertion de commentaires
Un commentaire est un texte descriptif que vous insérez dans le document HTML
pour expliquer le code ou fournir d'autres informations. Un commentaire
n'affecte en rien l'aspect du document dans le navigateur.
Voir aussi Paramétrage des préférences pour les éléments invisibles, page 85.
Pour insérer un commentaire :
1
Placez le curseur là où vous voulez insérer le commentaire.
2
Cliquez sur le bouton Commentaire de la palette d'objets ou sur Insertion >
Commentaire.
Pour afficher les marqueurs de commentaire dans la fenêtre Document, choisissez
Affichage > Éléments invisibles.
Pour entrer un texte de commentaire :
1
Cliquez sur l'icône Commentaires.
2
Entrez un texte dans l'inspecteur de propriétés.
Le fait de créer un commentaire génère le code HTML suivant :
<!-- Texte de commentaire-->
Utilisation de Roundtrip HTML
165
166
Chapitre 8
9
CHAPITRE 9
Formatage du texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Formatage du texte – Vue d’ensemble
Le formatage dans Dreamweaver ressemble à celui d'un logiciel de traitement de
texte standard. Utilisez le menu Texte > Format ou le menu contextuel Format
dans l'inspecteur des propriétés pour définir le style par défaut (paragraphe,
préformaté, En-tête 1, En-tête 2, et ainsi de suite) d'un bloc de texte.
Pour modifier la police, la taille, la couleur et l'alignement d'un texte sélectionné,
utilisez le menu Texte ou l'inspecteur des propriétés, ou utilisez les styles pour
définir l'apparence de tout le texte appartenant à une catégorie particulière.
Les commandes du menu Texte et de l'inspecteur des propriétés formatent le texte
à l'aide de balises HTML standard, (telles que B, FONT et CODE), compatibles avec
les navigateurs les plus courants. Les styles personnalisés utilisent des feuilles de
style en cascade (CSS) pour définir l'affichage de tout le texte d'une classe
particulière ou pour redéfinir le formatage d'une balise spécifique (telle que H1,
H2, P ou LI), et ils sont pris en charge par Netscape Navigator 4.0 ou supérieur, et
par Microsoft Internet Explorer 3.0 ou supérieur. Vous pouvez utiliser les deux
styles et le formatage HTML dans la même page, mais comme avec les logiciels de
traitement de texte, le formatage appliqué à l'aide du menu Texte ou de
l'inspecteur des propriétés remplace le formatage de la feuille de style pour le texte
sélectionné.
Pour plus d'informations sur l'utilisation des styles pour le formatage, voir
Formatage du texte avec des feuilles de style, page 174.
167
Formatage du texte avec les balises HTML
La spécification d'HTML 4.0 annoncée par le Consortium du World Wide Web
(W3C) début 1998, décourage l'utilisation des balises de formatage HTML,
(telles que B, I, FONT et CENTER) et approuve les feuilles de style en cascade.
Toutefois, si les balises de formatage HTML offrent un contrôle plus limité de
l'affichage du texte que les feuilles de style, en revanche, elles sont prises en charge
par un plus grand nombre de navigateurs. Pour cette raison, il est probable que les
balises de formatage HTML continuent à faire partie de l'arsenal du développeur
de site web, tant que les navigateurs 3.0 et plus anciens représenteront une
proportion non négligeable du trafic sur le web.
Pour obtenir des informations spécifiques sur le formatage avec les balises HTML,
voir l'une des rubriques suivantes :
Modification des caractéristiques de la police, page 169
Modification de la couleur du texte, page 171
Alignement du texte et des éléments, page 172
Les balises HTML qui définissent la structure du document plutôt que la façon dont il
s'affiche – par exemple, les en-têtes, les paragraphes et les listes – font encore
pleinement partie de la spécification HTML. En fait, si vous envisagez d'utiliser des
feuilles de style pour définir les caractéristiques de police de votre page, il est important
que vous utilisiez des balises d'en-tête standard, car elles aident à préserver la structure
de votre page dans les navigateurs qui ne prennent pas en charge les feuilles de style
(pour voir un exemple, consultez les pages HTML de l'aide de Dreamweaver dans un
navigateur 3.0).Voir Application des balises de paragraphe et d'en-tête, page 168.
Application des balises de paragraphe et d'en-tête
Utilisez le menu contextuel Format dans l'inspecteur des propriétés ou le menu
Texte > Format pour appliquer les balises standard de paragraphe et d'en-tête.
Pour redéfinir la façon dont les balises de paragraphe et d'en-tête apparaissent,
utilisez les feuilles de style. Voir Formatage du texte avec des feuilles de style,
page 174.
Pour appliquer une balise de paragraphe ou d'en-tête :
1
Placez le curseur dans le paragraphe ou sélectionnez tout ou partie du texte
dans le paragraphe.
2
Choisissez un style de paragraphe à partir du menu contextuel Format dans
l'inspecteur des propriétés ou à partir du menu Texte > Format. Choisissez
Aucun pour supprimer un style de paragraphe.
La balise associée au style sélectionné, (par exemple, P pour paragraphe, H1
pour En-tête 1, PRE pour Préformaté et ainsi de suite) est appliquée à tout le
paragraphe.
168
Chapitre 9
Modification des caractéristiques de la police
Utilisez l'inspecteur des propriétés ou le menu Texte pour modifier les
caractéristique de la police du texte sélectionné.
Pour modifier les caractéristiques de police :
1
Sélectionnez le texte. Si aucun texte n'est sélectionné, la modification
s'applique au texte suivant que vous entrez.
2
Choisissez une des options suivantes :
Pour modifier la police, choisissez une combinaison de polices à partir de
l'inspecteur des propriétés ou à partir du menu Texte > Police.
Les navigateurs affichent le texte dans la première police de la combinaison
installée sur votre système. Si aucune des polices listées n'est installée, le
navigateur affiche le texte selon les préférences du navigateur. Voir
Modification des combinaisons de polices, page 170. L'option Par défaut utilise
la police par défaut pour le texte sélectionné (soit la police par défaut du
navigateur, soit la police attribuée à cette balise dans une feuille de style).
Utilisez cette option pour supprimer les types de police précédemment
appliqués.
Pour modifier le style de police, cliquez sur Gras ou Italique dans l'inspecteur
des propriétés ou choisissez-en un, (Gras, Italique ou Souligné) à partir du
menu Texte > Style.
Pour modifier la taille de la police, choisissez une taille (de 1 à 7) à partir de
l'inspecteur des propriétés ou à partir du menu Texte > Taille.
Les tailles de police HTML sont relatives ; ce ne sont pas des tailles de points
spécifiques. Les utilisateurs définissent le corps de la police par défaut pour
leur navigateur ; il s'agit du corps affiché lorsque Par défaut ou 3 est
sélectionné dans l'inspecteur des propriétés ou à partir du menu Texte > Taille.
Les tailles 1 ou 2 apparaîtront plus petites que celle de la police par défaut ; les
tailles de 4 à 7 apparaîtront plus grandes. Pour que le texte s'affiche
constamment dans une taille de point particulière, utilisez les feuilles de style.
Pour augmenter ou réduire la taille du texte sélectionné, choisissez une taille
relative (de +/-1 à +/-7) à partir de l'inspecteur des propriétés ou à partir du
menu Texte > Augmenter taille/Réduire taille.
Les chiffres indiquent une différence relative par rapport à la taille de la balise
BASEFONT. La valeur par défaut de BASEFONT est 3. Ainsi, une valeur +4 résulte
en une taille de police 7. Dreamweaver n'affiche pas la balise BASEFONT (qui va
dans HEAD), mais la taille de police devrait s'afficher correctement dans un
navigateur.
Formatage du texte
169
Modification des combinaisons de polices
Utilisez la commande Modifier la liste des polices pour définir les combinaisons de
polices qui apparaissent dans l'inspecteur des propriétés et dans le menu Texte >
Police.
Pour modifier les combinaisons de polices :
1
Choisissez Texte > Police > Modifier la liste des polices.
2
Sélectionnez la combinaison de polices à partir de la liste de menu de police en
haut de la boîte de dialogue.
Les polices dans la combinaison sélectionnée sont listées dans la liste Police
choisies dans le coin inférieur gauche de la boîte de dialogue. À sa droite se
trouve une liste de toutes les polices installées sur votre système.
3
Choisissez une des options suivantes :
Pour ajouter ou supprimer des polices dans une combinaison, cliquez sur les
boutons directionnels entre les listes Polices choisies et Polices disponibles.
Pour ajouter ou supprimer une combinaison de polices, cliquez sur les bouton
plus (+) et moins (-) respectivement, en haut de la boîte de dialogue.
Pour ajouter une police qui n'est pas encore installée sur votre système,
saisissez son nom dans la zone de texte en-dessous de la liste Polices
disponibles et cliquez sur la flèche directionnelle pour l'ajouter à la
combinaison. Ajouter une police non installée à votre système peut s'avérer
utile, par exemple, pour spécifier une police Windows lorsque vous travaillez
sur un Macintosh.
Pour déplacer la combinaison de polices vers le haut ou vers le bas de la liste,
cliquez sur les flèches directionnelles au sommet de la boîte de dialogue.
Pour ajouter une nouvelle combinaison à la liste des polices :
1
Choisissez Texte > Police > Modifier la liste des polices.
2
Sélectionnez une police à partir de la liste Polices disponibles et cliquez sur le
bouton << pour déplacer la police vers la liste Polices choisies.
3
Répétez l'étape 2 pour chaque police suivante de la combinaison.
Pour ajouter une police qui n'est pas encore installée sur votre système,
saisissez son nom dans la zone de texte en-dessous de la liste Polices
disponibles et cliquez sur le bouton << pour l'ajouter à la combinaison.
Ajouter une police non installée à votre système peut s'avérer utile, par
exemple, pour spécifier une police Windows lorsque vous travaillez sur un
Macintosh.
170
Chapitre 9
4
Lorsque vous avez fini la sélection des polices spécifiques, choisissez une
famille de police générique à partir du menu Polices disponibles et cliquez sur
le bouton << pour la déplacer vers la liste Polices choisies.
Les familles de police génériques comprennent cursive, fantaisie, espacement
fixe, sans-sérif et sérif. Si aucune des polices de la liste Polices choisies n'est
disponible sur le système de l'utilisateur, le texte s'affiche dans la police par
défaut associée à la famille de police générique. Par exemple, la police
d'espacement fixe par défaut est Courier sur la plupart des systèmes.
Modification de la couleur du texte
Vous pouvez modifier la couleur d'un texte sélectionné de façon à ce que la
nouvelle couleur remplace la couleur définie dans les propriétés de la page.
Pour modifiez la couleur du texte :
1
Sélectionnez le texte.
2
Choisissez une des options suivantes :
Choisissez une couleur à partir de la palette des couleurs garanties pour les
navigateurs, en cliquant sur la boîte de couleur dans l'inspecteur des
propriétés.
Choisissez Texte > Couleur. Le sélecteur de couleurs système s'affiche.
Sélectionnez une couleur et cliquez sur OK.
Pour définir la couleur du texte par défaut, utilisez la commande Modifier >
Propriétés de la page. Voir Paramétrage des couleurs de texte par défaut, page 87.
Pour restaurer la couleur par défaut du texte :
1
Dans l'inspecteur des propriétés, cliquez sur la boîte de couleur pour ouvrir la
palette des couleurs garanties pour les navigateurs.
2
Cliquez sur le bouton Par défaut (le bouton du milieu dans le coin inférieur
droit).
Formatage du texte
171
Alignement du texte et des éléments
Alignez le texte sur la page à l'aide de l'inspecteur des propriétés ou du menu
Texte > Alignement. Centrez un élément sur la page à l'aide de la commande
Texte > Alignement > Centrer.
Pour aligner du texte :
1
Sélectionnez le texte que vous voulez aligner.
2
Cliquez sur une option d'alignement (à gauche, à droite, ou centré) dans
l'inspecteur des propriétés, ou choisissez Texte > Alignement et choisissez une
option.
Pour centrer un élément :
1
Sélectionnez l'élément désiré (image, plug-in, tableau, ou un autre élément de
page).
2
Choisissez Texte > Alignement > Centrer.
Pour mettre du texte en retrait ou pour supprimer un retrait :
1
Sélectionnez le texte désiré.
2
Cliquez sur le bouton Retrait ou Retrait négatif dans l'inspecteur des
propriétés, choisissez Texte > Retrait ou Retrait négatif, ou Liste > Retrait ou
Retrait négatif à partir du menu contextuel.
Cela applique ou supprime la balise BLOCKQUOTE lorsque le texte sélectionné
est un paragraphe ou un en-tête ; cela ajoute ou supprime une balise UL ou OL
lorsque le texte sélectionné est une liste.
172
Chapitre 9
Création de listes
Vous pouvez créer des listes numérotées, à puces et de définition à partir d'un
nouveau texte que vous tapez dans la fenêtre Document ou à partir d'un texte
existant. Les listes peuvent également être imbriquées.
Pour créer une nouvelle liste :
1
Positionnez le curseur sur la ligne où vous souhaitez ajouter une liste de
nouveaux éléments.
2
Cliquez sur les boutons de la liste à puces ou de la liste numérotée dans
l'inspecteur des propriétés, ou choisissez Texte > Liste et sélectionnez le type de
liste souhaité – liste à puces, numérotée ou de définition.
3
Commencez à entrer la liste, appuyez sur Entrée pour passer à un autre
élément de la liste.
4
Pour terminer la liste, appuyez deux fois sur Entrée.
Pour créer une liste à l'aide d'un texte existant :
1
Sélectionnez une série de paragraphes à partir desquels vous voulez constituer
une liste.
2
Cliquez sur le bouton de la liste à puces ou de la liste numérotée dans
l'inspecteur des propriétés, ou choisissez Texte > Liste et sélectionnez le type de
liste souhaité – liste à puces, numérotée ou de définition.
Pour créer une liste imbriquée :
1
Sélectionnez les éléments de la liste que vous voulez imbriquer.
2
Cliquez sur le bouton Retrait dans l'inspecteur des propriétés ou choisissez
Texte > Retrait.
Formatage du texte
173
Formatage du texte avec des feuilles de style
Un style est un groupe d'attributs de formatage qui contrôlent l'affichage d'un
bloc ou d'une plage de texte. Utilisez les styles pour définir le format d'un seul
document, ou utilisez une feuille de style externe (stockée à l'extérieur et liée au
document courant) pour contrôler plusieurs documents à la fois. Une feuille de
style inclut tous les styles d'un document.
Les styles sont identifiés par un nom ou par une balise HTML, ce qui vous permet
de modifier l'attribut d'un style et de voir instantanément les résultats sur tout le
texte auquel ce style est appliqué. Les styles des documents HTML peuvent
contrôler la plupart des attributs de formatage de texte traditionnels, tels que la
police, la taille et l'alignement. Ils peuvent également spécifier des attributs
HTML uniques, tels que le positionnement, les effets spéciaux ou les
déplacements de souris sur des zones sensibles.
Les feuilles de style sont dans la partie HEAD d'un document et définissent une
série de styles. Les styles peuvent définir les attributs de formatage pour les balises
HTML, les parties de texte identifiées par un attribut de classe ou le texte
correspondant à un critère conforme à la spécification des feuilles de style en
cascade (CSS). Dreamweaver reconnaît les styles définis dans les documents tant
qu'ils sont conformes aux directives de CSS.
Les feuilles de style fonctionnent avec les navigateurs 4.0 et plus récents. Internet
Explorer 3.0 reconnaît certains attributs de style, ce qui n'est pas le cas pour la
plupart des navigateurs plus anciens.
Il y a trois types de style dans Dreamweaver :
174
Chapitre 9
Les styles des balises HTML redéfinissent le formatage pour une balise
particulière, telle que H1. Lorsque vous créez un style pour la balise H1,tout le
texte avec la balise H1 est modifié instantanément.
Les styles personnalisés sont similaires aux styles que vous utilisez dans un
logiciel de traitement de texte, mis à part le fait qu'il n'y a pas de distinction
entre le style des caractères et celui des paragraphes. Vous pouvez appliquer des
styles personnalisés à n'importe quel bloc ou n'importe quelle plage texte. Si le
style est appliqué à un bloc de texte, (tel que tout un paragraphe ou une liste à
puces), un attribut CLASS est ajouté à la balise du bloc, (par exemple, P
CLASS=”monStyle” ou UL CLASS=”monStyle”). Si le style est appliqué à une plage
de texte, les balises SPAN contenant l'attribut CLASS sont insérées autour du
texte sélectionné. Voir Application d'un style personnalisé, page 179.
Les styles du sélecteur CSS redéfinissent le formatage d'une combinaison de
balises spécifique, (par exemple, TD H2 est appliquée chaque fois que l'en-tête
H2 apparaît dans une cellule de tableau), ou de toutes les balises qui
contiennent un attribut ID spécifique, (par exemple, #monStyle s'applique à
toutes les balises contenant la valeur d'attribut paire ID=”monStyle”).
Le formatage du texte qui est appliqué manuellement à différentes parties du texte
est prioritaire sur les autres styles. Pour que les styles contrôlent le formatage du
texte d'un paragraphe, supprimez tous les autres paramètres de formatage.
Vous pouvez paramétrer tous les attributs de style définis par la spécification CSS1
dans Dreamweaver, mais tous les attributs n'apparaissent pas dans la fenêtre
Document. Les attributs qui n'apparaissent pas sont marqués d'un astérisque (*)
dans la boîte de dialogue Définition du style. Il faut aussi noter que certains des
attributs de style CSS que vous pouvez définir avec Dreamweaver apparaissent
différemment dans Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0,
alors que d'autres ne sont pris en charge par aucun navigateur.
À propos des feuilles de style
Le Consortium du World Wide Web est responsable de la spécification des feuilles
de style en cascade (CSS1), qui définit les propriétés du style (par exemple, la
police, la couleur, le remplissage, la marge, l'espacement entre les mots), afin de
contrôler comment les éléments apparaissent. Dreamweaver vous permet de
définir toutes les propriétés de CSS1. Voir Formatage du texte avec des feuilles de
style, page 174.
Dans Microsoft Internet Explorer 4.0, vous pouvez utiliser un langage de script tel
que JavaScript ou VBScript pour modifier les propriétés du positionnement et du
style des éléments une fois que la page est chargée. Avec Netscape Navigator 4.0,
vous ne pouvez pas modifier les propriétés du style une fois que la page est
chargée, mais vous pouvez modifier les propriétés du positionnement.
Création ou lien à une feuille de style externe
Une feuille de style externe est un fichier texte contenant seulement des
spécifications de style. L'édition d'une feuille de style externe affecte tous les
documents qui y sont liés.
Les pages d'aide HTML de Dreamweaver utilisent une feuille de style liée appelée
help.css. Ouvrez ce fichier (situé à l'intérieur du dossier Help/html) dans un
éditeur de texte pour voir à quoi ressemble le code d'une définition de style.
Ouvrez l'un des fichiers de rubrique (ceux commençant par un numéro) pour voir
comment la feuille de style est liée au document au moyen d'une balise LINK, et
comment les styles spécifiques sont appliqués.
Formatage du texte
175
Pour créer ou lier une feuille de style externe :
1
Choisissez Fenêtre > Styles ou cliquez sur Styles dans le lanceur.
2
Dans la palette Styles, cliquez sur Feuille de style.
3
Dans la boîte de dialogue Éditer Feuille de style, cliquez sur Lien.
4
Effectuez l'une des opérations suivantes :
Entrez le chemin d'accès à la feuille de style externe dans le champ Fichier/
URL.
Créez une nouvelle feuille de style externe en entrant un nom de fichier qui
n'existe pas à l'emplacement spécifié.
Les feuilles de style externes doivent se terminer par l'extension .css.
5
Choisissez Link ou Import pour spécifier la balise utilisée pour lier la feuille de
style externe puis cliquez sur OK.
Alors que IMPORT et LINK créent toutes deux tous les styles dans la feuille de
style distante disponible pour le document en cours, LINK est la balise qui offre
le plus de fonctions, et qui fonctionne avec le plus de navigateurs.
La feuille de style externe apparaît avec le mot "lien" à la suite du nom, dans la
liste des styles de la boîte de dialogue Éditer Feuille de style. Ne suivez la
procédure suivante que si vous voulez créer ou éditer des styles dans la feuille
de style externe.
6
Double-cliquez sur le nom de la feuille de style.
Une seconde boîte de dialogue Éditer Feuille de style apparaît.
176
Chapitre 9
7
Cliquez sur Nouvelle pour définir les styles dans la feuille de style externe.
8
Cliquez sur Enregistrer lorsque vous avez fini de définir les styles.
Modification d’une feuilles de style externe
L'édition d'une feuille de style externe affecte tous les documents qui y sont liés.
Pour modifier une feuille de style externe :
1
Ouvrez n'importe quel document lié à la feuille de style externe que vous
voulez modifier.
2
Choisissez Fenêtre > Styles ou cliquez sur le bouton Styles dans le lanceur.
3
Cliquez sur le bouton Feuille de style dans la palette Styles.
4
Dans la boîte de dialogue Éditer Feuille de style, double-cliquez sur le nom de
la feuille de style externe.
Une seconde boîte de dialogue Éditer Feuille de style apparaît, elle affiche les
styles de la feuille de style externe.
5
Éditez les styles de la feuille de style externe, puis cliquez sur Enregistrer
lorsque vous avez fini.
Ceci affecte tous les documents liés à la feuille de style externe.
Création d'un style
Créez un style pour automatiser le formatage des balises HTML ou des blocs et
des plages de texte identifiés par un attribut CLASS.
Pour créer un style :
1
Choisissez Fenêtre > Styles et cliquez sur le bouton Feuille de style dans la
palette de styles.
2
Dans la boîte de dialogue Éditer Feuille de style, cliquez sur Nouvelle.
3
Effectuez votre choix à partir des types de style suivants :
Créer un style personnalisé (classe) crée un style pouvant être appliqué comme
un attribut CLASS à une plage ou un bloc de texte.
Redéfinir la balise HTML
redéfinit le formatage par défaut d'une balise HTML
spécifiée.
Utiliser le sélecteur CSS définit le formatage d'une combinaison de balises
particulière ou de toutes les balises contenant un attribut ID spécifique.
Formatage du texte
177
4
Entrer un nom, une balise ou un sélecteur pour le nouveau style, en respectant
les conventions suivantes :
Les noms de style personnalisé doivent commencer par un point. Si vous
n'entrez pas le point, Dreamweaver le fera pour vous.
Pour les styles de balise HTML, entrez une balise HTML ou choisissez-en une
à partir du menu contextuel.
Pour un sélecteur CSS, entrez tout critère de sélecteur valide (par exemple,
TD H2 ou #monStyle), ou choisissez un sélecteur à partir du menu contextuel.
5
Cliquez sur un nom du panneau de gauche de la boîte de dialogue, puis
choisissez les paramètres de formatage du nouveau style dans l'écran
correspondant. Laissez les attributs vides, s'ils ne sont pas importants pour le
style.
Les attributs qui n'apparaissent pas dans la fenêtre Document sont marqués d'un
astérisque (*) dans la boîte de dialogue Définition du style. Certains des attributs
de style CSS que vous pouvez définir avec Dreamweaver apparaissent
différemment dans Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0,
alors que d'autres ne sont pris en charge par aucun navigateur.
Pour obtenir des informations sur des configurations particulières, voir les
rubriques suivantes des pages d’aides de Dreamweaver :
Panneau Définition du style de type
Panneau Définition du style de l'arrière-plan
Panneau Définition du style du bloc
Panneau Définition du style de la boîte
Panneau Définition du style de la bordure
Panneau Définition du style de la liste
Panneau Définition du style du du positionnement
Panneau Définition du style des extensions
Lorsque vous créez un style personnalisé (classe), il apparaît dans la palette de
styles et dans le menu Texte > Style personnalisé. Les styles de balise HTML et de
sélecteur CSS n'apparaissent pas dans la palette de styles car ils ne peuvent pas être
appliqués. Ces styles sont automatiquement reflétés dans la fenêtre Document,
partout où la balise ou le sélecteur figure.
178
Chapitre 9
Application d'un style personnalisé
Les styles personnalisés (classe) sont les seuls types de style pouvant être appliqués
au bloc de texte d'un document, quelles que soient les balises qui contrôlent le
texte. La palette de style affiche les noms de tous les styles de classe disponibles.
Ne confondez pas les styles personnalisés avec les options, telles que Gras ou
Variable dans le menu Texte > Style ; ces options sont des attributs de formatage
prédéfinis qui correspondent à des balises HTML spécifiques.
Lorsque vous appliquez plus d'un style au même texte, il se peut que les styles
soient incompatibles et que cela produise un résultat inattendu. Voir À propos des
styles incompatibles, page 180.
Pour appliquer un style personnalisé :
1
Choisissez Fenêtre > Styles.
2
Sélectionnez le texte auquel vous voulez appliquer un style.
Placez le curseur dans un paragraphe pour appliquer le style à tout le
paragraphe.
Pour spécifier la balise exacte à laquelle le style devrait être appliqué,
sélectionnez la balise avec le sélecteur de balise dans la partie inférieure gauche
de la fenêtre Document. Vous pouvez aussi modifier la sélection de la balise
avec le menu contextuel Appliquer à, dans la palette de style.
Si vous sélectionnez seulement une partie d'un paragraphe, le style affectera
seulement cette partie.
3
Cliquez sur un nom de style dans la palette de style.
Vous pouvez aussi appliquer un style personnalisé en choisissant un nom de style à
partir du menu Texte > Style personnalisé, ou cliquez avec le bouton droit de la
souris (Windows) ou Contrôle-cliquez (Macintosh), puis choisissez le nom du
style à partir du menu Style personnalisé dans le menu contextuel. La balise de la
sélection courante apparaît à côté de la commande Style personnalisé.
Formatage du texte
179
À propos des styles incompatibles
Lorsque vous appliquez plus d'un style au même texte, il se peut que les styles
soient incompatibles et que cela produise un résultat inattendu. Les navigateurs
appliquent les attributs de style en fonction des règles suivantes :
Si deux styles sont appliqués au même texte, le navigateur affiche les attributs
des deux styles, à moins que certains attributs soient incompatibles. Par
exemple, un style pourrait spécifier bleu pour la couleur du texte, alors que
l'autre style spécifierait rouge.
Si les attributs de deux styles appliqués au même texte sont incompatibles, le
navigateur affiche l'attribut du style le plus à l'intérieur (le style le plus proche
du texte lui-même).
S'il s'agit d'une incompatibilité directe, les attributs des styles personnalisés
(style appliqué avec l'attribut CLASS) remplacent les attributs des styles de
balise HTML.
Dans l'exemple suivant, le style défini pour H1 pourrait spécifier la police, la taille
et la couleur de tous les paragraphes H1, mais le style personnalisé .Bleu appliqué à
ce paragraphe remplace la couleur configurée dans le style de H1. Le second style
personnalisé .Rouge remplace .Bleu, car il se trouve à l'intérieur du style .Bleu.
<H1><SPAN CLASS="Blue">Ce paragraphe est contrôlé par le style personnalisé .Bleu et
par le style de balise HTML H1.
style de balise HTML.<SPAN CLASS="Red">Cette phrase est une exception, elle est contrôlée
par le style .Rouge.</SPAN>
Nous voici revenu au style .Bleu.</SPAN></H1>
Modification d'un style
Lorsque vous éditez un style qui contrôle le texte de votre document, vous
reformatez instantanément tout le texte contrôlé par ce style.
Pour éditer un style :
180
Chapitre 9
1
Choisissez Texte > Style personnalisé > Éditer Feuille de style, ou cliquez sur le
bouton Feuille de style dans la palette de styles.
2
Choisissez un style dans la boîte de dialogue d'édition, puis cliquez sur Éditer.
3
Cliquez sur un nom dans la liste de gauche de la boîte de dialogue, puis
choisissez les nouveaux paramètres de formatage du style dans l'écran de droite
correspondant. Laissez les attributs vides, s'ils ne sont pas importants pour le
style.
Utilisation de la palette de styles
Utilisez la palette de styles pour appliquer des styles personnalisés à la sélection
courante. La palette de styles affiche seulement des styles personnalisés (classe) ; les
styles de balise HTML et du sélecteur CSS n'apparaissent pas dans la palette de
styles car ils sont appliqués automatiquement au texte contrôlé par la balise ou le
sélecteur spécifié.
Choisissez Fenêtre > Styles pour afficher la palette de style.
Appliquer à Affiche la balise de la sélection courante. Choisissez une balise à partir
du menu contextuel, afin d'en sélectionner une différente.
Ouvre la boîte de dialogue Éditer feuille de style. Vous pouvez
éditer tous les styles dans le document courant ou dans une feuille de style
distante.
Feuille de style
Voir aussi Formatage du texte avec des feuilles de style, page 174.
Remarque: Cliquez avec le bouton droit de la souris (Windows) ou cliquez sur la palette
Style tout en appuyant sur la touche Ctrl (Macintosh), afin d'ouvrir un menu contextuel
incluant les commandes Édition, Dupliquer, Supprimer, et Appliquer.
Configuration des préférences du format des feuilles de style
Les préférences du format des feuilles de style contrôlent la façon dont
Dreamweaver écrit le code qui définit les styles. Les styles peuvent être écrits sous
forme de sténographie, pour en faciliter l'utilisation pour certaines personnes.
Certains navigateurs plus anciens n'interprètent pas la sténographie correctement.
À moins que vous ne vouliez que Dreamweaver écrive les styles en sténographie, il
n'y a aucune raison de modifier les préférences des feuilles de style.
Choisissez Édition > Préférences, puis cliquez sur Feuilles de style pour afficher les
préférences du format des feuilles de style. Voir aussi Formatage du texte avec des
feuilles de style, page 174.
A la création de nouveaux styles, Utiliser sténographie pour
Détermine les
attributs de style que Dreamweaver écrit en sténographie.
Contrôle si Dreamweaver
réécrit les styles existants en sténographie. Choisissez Si l'original utilise
Sténographie pour que Dreamweaver laisse tous les styles tels qu'ils sont.
Choisissez En fonction des paramètres ci-dessus, pour que Dreamweaver réécrive
les styles en sténographie, selon les attributs spécifiés dans les cases à cocher
Utiliser Sténographie pour.
A l'édition de styles existants, Utiliser sténographie
Formatage du texte
181
Conversion des styles CSS en code HTML
Si vous avez utilisé des styles CSS pour spécifier le formatage du texte, (tel que la
famille, la taille, la couleur et la décoration des polices) et que plus tard vous
décidez de rendre le formatage visible dans un navigateur 3.0, vous pouvez utiliser
Fichier > Convertir > Compatible navigateur 3.0 pour convertir autant
d'informations de style que possible en balises HTML.
Pour convertir un fichier qui utilise des styles en fichier compatible pour les
navigateurs 3.0 :
1
Choisissez Fichier > Convertir > Compatible navigateur 3.0.
2
Dans la boîte de dialogue qui apparaît, choisissez Styles CSS en balises
HTML.
Lorsque vous choisissez l'option Calques en tableaux, Dreamweaver remplace
tous les calques par un unique tableau qui conserve le positionnement
original.
Les styles CSS sont remplacés lorsque cela est possible par des balises HTML,
telles que B et FONT. Tout code CSS qui ne peut pas être converti en HTML est
supprimé. Voir Tableau de conversion de code CSS en HTML, page 183 pour
obtenir des informations sur les styles qui sont convertis et ceux qui sont
supprimés.
3
Cliquez sur OK. Dreamweaver ouvre le fichier converti dans une nouvelle
fenêtre sans titre.
Remarque: Vous devez exécuter cette procédure de conversion en fichier compatible avec
un navigateur 3.0 chaque fois que vous modifiez le fichier original, afin de mettre à jour le
fichier compatible 3.0. C'est la raison pour laquelle nous vous recommandons de n'utiliser
cette procédure que lorsque vous êtes tout à fait satisfait de votre fichier original.
182
Chapitre 9
Tableau de conversion de code CSS en HTML
Les attributs CSS listés dans le tableau suivant sont convertis en code HTML avec
l'option Compatible navigateur 3.0. Les attributs qui ne sont pas listés dans le
tableau sont supprimés. Voir Conversion des styles CSS en code HTML, page 182.
Attribut CSS
Converti en
couleur
FONT COLOR
famille de police
FONT FACE
taille de police
FONT SIZE=”[1-7]”
Style de police : oblique
I
Style de police : italique
I
épaisseur de la police
B
type de style de liste : carré
UL TYPE=”carré”
type de style de liste : cercle
UL TYPE=”cercle”
type de style de liste : disque
UL TYPE=”disque”
type de style de liste : roman supérieur
UL TYPE=”I”
type de style de liste : roman inférieur
OL TYPE=”i”
type de style de liste : alpha supérieur
OL TYPE=”A”
type de style de liste : alpha inférieur
OL TYPE=”a”
style de liste
UL ou OL avec TYPE approprié
alignement du texte
P ALIGN ou DIV ALIGN selon le cas
décoration du texte : souligné
U
décoration du texte : barré
STRIKE
Formatage du texte
183
Vérification de l'orthographe
Utilisez la commande Orthographe du menu Texte pour vérifier l'orthographe
dans le document courant. La commande Orthographe ignore les balises et les
valeurs d'attribut HTML.
Par défaut, le vérificateur d'orthographe utilise le dictionnaire de l'anglais US.
Pour changer de dictionnaire, choisissez Édition > Préférences > Général et
sélectionnez un autre dictionnaire à partir du menu contextuel. Les dictionnaires
des autres langues peuvent être téléchargés à partir du Centre de développement
de Dreamweaver.
Boîte de dialogue Orthographe
Utilisez les commandes Texte > Orthographe suivantes, pour vérifier l'orthographe
de votre document :
Ajoute le mot non reconnu à votre dictionnaire personnel.
Pour supprimer des mots de ce dictionnaire, modifiez le fichier Personal.dat dans
un éditeur de texte.
Ajouter à Personnel
Ignorer
Ignore cette occurrence du mot non reconnu.
Ignorer tout
Ignore toutes les occurrences du mot non reconnu.
Remplace cette occurrence du mot non reconnu par le texte que vous
entrez dans la zone Remplacer par ou par la sélection que vous effectuez dans la
liste de suggestions.
Remplacer
Remplacer tout
184
Chapitre 9
Remplacer toutes les occurrences du mot non reconnu.
10
CHAPITRE 10
Insertion d’images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Insertion d'images – Vue d’ensemble
Dreamweaver, comme la plupart des navigateurs, peut afficher les images JPEG et
GIF. Dreamweaver, Microsoft Internet Explorer 4.0 et plus récent, ainsi que
Netscape Navigator 4.04 et plus récent prennent également en charge les images
PNG.
En général, JPEG est le format optimum pour les images photographiques ou à
tons continus, et GIF est préférable pour les images en demi-tons, ou celles qui
ont une surface importante de couleurs en aplat. Le format PNG constitue un
remplacement non breveté de GIF, incluant la prise en charge des images en
niveaux de gris, de couleurs indexées ou de couleur réelle. Ce format prend
également en charge le canal alpha pour la transparence. PNG est le format de
fichier natif de Macromedia Fireworks.
Pour utiliser une image comme arrière-plan d'une page, spécifiez-la comme une
propriété de page. Voir Définition d'une image d'arrière-plan ou d'une couleur de
page, page 87. Pour que les images se superposent, insérez-les dans des calques.
Voir Utilisation des calques – Vue d’ensemble, page 213.
185
Insertion d'une image
Pour que les images apparaissent dans un document de Dreamweaver, les fichiers
d'images doivent se trouver à l'intérieur d'un site local défini. Si vous choisissez un
fichier externe, Dreamweaver vous demandera si vous voulez que le fichier soit
copié dans un dossier à l'intérieur du site local. Voir Création d'un site local,
page 106.
Si vous spécifiez un chemin d'accès à un fichier source extérieur au dossier racine
local, Dreamweaver affichera un espace réservé pour l'image.
Pour insérer une image :
1
Effectuez l'une des opérations suivantes :
Placez le curseur là où vous voulez que l'image apparaisse sur la page, puis
choisissez Insertion > Image, ou cliquez sur le bouton Insérer une image dans
le volet Commun de la palette Objet.
Faites glisser le bouton Image de la palette d'objets vers l'emplacement désiré
sur la page.
Faites glisser une image à partir du bureau vers l'emplacement désiré sur la
page, puis passez à l'étape n˚ 3.
2
Dans la boîte de dialogue qui apparaît, tapez le chemin d'accès au fichier
source, ou cliquez sur Parcourir pour choisir un fichier.
Voir À propos des chemins relatifs et absolus, page 114 pour plus de détails sur la
spécification des noms de chemin.
Pour que cette boîte de dialogue n'apparaisse pas, désactivez l'option Afficher
la boîte de dialogue lors de l'insertion d'objets dans les préférences générales.
Remarque: Un contenu lié à un chemin relatif à la racine du site n'apparaît pas lorsque
vous affichez les fichiers locaux dans un navigateur, car les navigateurs ne sont pas
chargés de reconnaître les racines du site – c'est la responsabilité des serveurs. Si un
contenu lié a des chemins relatifs à la racine, placez le fichier sur un serveur distant pour
afficher la page dans un navigateur. Voir aussi À propos des chemins relatifs et absolus,
page 114.
3
Définissez les propriétés des images dans l'inspecteur des propriétés.
Voir Configuration des propriétés d’image, page 188.
186
Chapitre 10
Création d'un effet de survol
Un effet de survol est une image qui change lorsque le curseur se déplace au-dessus
d’elle. Un effet de survol est constitué de deux images : l'image principale (celle
affichée lorsque la page se charge) et l'image de survol (celle qui apparaît lorsque le
curseur se déplace au-dessus de l'image principale).
Pour plus de détails sur le changement d'une image en réponse à un événement
différent (par exemple, un clic de souris) ou sur l'apparition d'une image
différente lorsque le curseur se déplace au-dessus de l'image, voir Interversion d'une
image, page 281.
Pour créer un effet de survol:
1
Placez le curseur dans la fenêtre Document, là où vous souhaitez que l’effet de
survol apparaisse.
2
Effectuez l'une des opérations suivantes :
Choisissez Fenêtre > Objets pour ouvrir la palette Objet et cliquez sur le
bouton Survol.
Choisissez Insertion > Survol.
3
Dans la boîte de dialogue qui apparaît, entrez les informations suivantes :
Tapez le chemin et le nom de fichier de l'image originale dans le champ Image
originale, ou recherchez et sélectionnez une image.
Tapez le chemin et le nom de fichier de l'image de zone sensible dans le champ
Image de survol, ou recherchez et sélectionnez une image.
Pour créer un lien, remplacez le signe # du champ Lien par un chemin et un
nom de fichier, ou recherchez et sélectionnez un fichier.
Pour que Dreamweaver effectue le préchargement des images dans la mémoire
cache du navigateur, sélectionnez l'option Précharger les images.
4
Cliquez sur OK.
Pour tester un effet de survol :
1
Choisissez Fichier > Aperçu dans le navigateur.
2
Dans le navigateur, déplacez le curseur au-dessus de l'image principale.
L'image principale devrait être remplacée par l'image de survol.
Insertion d’images
187
Configuration des propriétés d’image
Lorsqu'une image est sélectionnée, faites votre choix à partir des propriétés
suivantes, dans l'inspecteur des propriétés.
Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche
d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
Vous permet de nommer l'image de façon à pouvoir y faire référence avec
un langage de script, tel que JavaScript ou VBScript.
Image
réservent l'espace de l'image sur la page, pendant le chargement de la page.
Dreamweaver entre automatiquement la taille originale de l'image. Les valeurs par
défaut et sans précision d'unité sont en pixels. Vous pouvez également entrer un
nombre et “in” pour pouces, “pc” pour picas, “pt” pour points, “mm” pour
millimètres, “cm” pour centimètres et des combinaisons, telles que 2in+5mm.
Dreamweaver convertit les valeurs en pixels dans le code HTML source. Changer
les valeurs redimensionne la taille d'affichage de l'image selon le cas. Les valeurs
modifiées apparaissent en gras. Pour rétablir les valeurs originales, cliquez sur les
étiquettes des champs. Modifier la largeur et la hauteur ne réduit pas le temps du
téléchargement, car le navigateur télécharge toutes les données d'image avant de
mettre l'image à l'échelle. Pour réduire le temps de téléchargement et pour
s'assurer qu'une image apparaît dans tous les cas à la même taille, utilisez une
application de retouche d'image afin de mettre les images à l'échelle.
L et H
Src Spécifie
le fichier source de l'image. Tapez le chemin d'accès ou cliquez sur
l'icône du dossier pour trouver le fichier source et le sélectionner. Voir À propos des
chemins relatifs et absolus, page 114 pour plus de détails sur la saisie des noms de
chemin.
Lien Spécifie
un hyperlien pour l'image. Tapez l'URL, faites glisser l'icône
pointeuse de fichier vers un fichier de la fenêtre du site, ou cliquez sur l'icône de
dossier pour rechercher et sélectionner un document de votre site.
Aligne l'image et le texte sur la même ligne. Voir Alignement des éléments,
page 190.
Aligner
Spécifie du texte secondaire apparaissant à la place de l'image pour les
navigateurs de type texte seulement ou pour les navigateurs qui sont définis de
façon à télécharger les images manuellement. Pour les utilisateurs ayant un
problème de vue et qui ont recours à un synthétiseur vocal avec les navigateurs
basés-texte uniquement, le texte est prononcé. Dans certains navigateurs, ce texte
apparaît également lorsque le pointeur se trouve sur l'image.
Sec.
Ajoutent de l'espace en pixels, respectivement en haut et en
bas, et à gauche et à droite de l'image.
Espace V et Espace H
188
Chapitre 10
Spécifie la fenêtre ou le cadre dans lequel la page liée devrait être chargée.
(Cette option n'est pas disponible s'il n'y a pas de lien sur l'image). Tous les noms
de cadres du document courant apparaissent dans la liste. Si le cadre spécifié
n'existe pas lorsque le document courant est ouvert dans un navigateur, la page
liée se charge dans une nouvelle fenêtre portant le nom que vous avez spécifié. Une
fois que cette fenêtre existe, d'autres fichiers peuvent être dirigés vers elle. Vous
pouvez également choisir à partir des noms de cible réservés suivants :
Cible
_blank charge le fichier lié dans une nouvelle fenêtre de navigateur qui n'est pas
nommée.
charge le fichier lié dans le jeu de cadres parent ou dans la fenêtre
parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas
imbriqué, le fichier lié sera chargé dans la fenêtre navigateur en plein écran.
_parent
_self
_top
charge le fichier lié dans le même cadre ou la même fenêtre que le lien.
Cette cible étant implicite, il n'est généralement pas nécessaire de la spécifier.
charge le fichier lié dans la fenêtre navigateur en plein écran, supprimant
ainsi tous les cadres.
Spécifie l'image qui doit être chargée avant l'image principale. De
nombreux concepteurs utilisent la version 2 bits (noir et blanc) de l'image
principale car elle est chargée rapidement et donne aux visiteurs une idée de ce qui
va leur être présenté ; vous pouvez toutefois utiliser n'importe quelle image avec
les mêmes dimensions que l'image principale.
Src faible
Définit la largeur en pixels de la bordure qui encadre l'image. Entrez 0
pour aucune bordure.
Bordure
Vous permet de créer des cartes graphiques côté client. Voir Création de
cartes graphiques, page 193.
Carte
Actualiser
Réinitialise les valeurs L et H à la taille originale de l'image.
Lance l'éditeur d'image que vous avez spécifié dans les préférences
d'éditeurs externes, et ouvre l'image sélectionnée. Lorsque vous enregistrez votre
fichier d'image et que vous retournez dans Dreamweaver, ce dernier actualise la
fenêtre Document avec l'image éditée. Voir Utilisation d'un éditeur d'image
externe, page 192.
Éditer
Insertion d’images
189
Alignement des éléments
Les options d'alignement suivantes de l'inspecteur de propriétés sont associées
avec certains éléments sélectionnés, tels que des images ou des plug-ins.
Elle dépend du navigateur, mais généralement elle spécifie un
alignement sur la ligne de base.
Valeur par défaut
Ligne de base
et Bas Aligne la ligne de base du texte avec le bas de l'objet.
Bas absolu Aligne le bas absolu du texte, y compris les descendantes (comme dans
la lettre “g“), avec le bas de l'objet.
Haut Aligne
le haut du caractère le plus haut de la ligne de texte avec le haut de
l'objet.
Haut du texte
Aligne le caractère le plus haut de la ligne de texte avec le haut de
l'objet.
Milieu
Aligne la ligne de base du texte avec le milieu de l'objet.
Milieu absolu
Aligne le milieu du texte avec le milieu de l'objet.
Aligne l'objet sur la marge de gauche et place le texte qui
l'entoure à sa droite. Si le texte justifié à gauche précède l'objet sur la ligne, les
objets alignés à gauche sont généralement placés automatiquement sur une
nouvelle ligne. Tout texte à la suite de l'objet sur la ligne revient automatiquement
à la ligne précédente, apparaissant ainsi au-dessus de l'objet.
Aligner à gauche
Aligne l'objet sur la marge de droite et place le texte qui l'entoure
à sa gauche. Si le texte justifié à droite précède l'objet sur la ligne, les objets alignés
à droite sont généralement placés automatiquement sur une nouvelle ligne. Tout
texte à la suite de l'objet sur la ligne revient automatiquement à la ligne
précédente, apparaissant ainsi au-dessus de l'objet.
Aligner à droite
Redimensionnement des images et d'autres éléments
Dans la fenêtre Document de Dreamweaver, vous pouvez redimensionner
visuellement les éléments, tels que les images, les plug-ins, les animations
Shockwave ou Flash, les appliquettes et les contrôles d'ActiveX. Redimensionner
visuellement vous aide à déterminer dans quelle mesure un élément affecte la mise
en page selon sa taille.
Le fait de redimensionner affecte les attributs WIDTH et HEIGHT de l'élément. La
taille du fichier de l'élément ne change pas.
Les animations Flash et les autres éléments basés vecteur peuvent être
redimensionnés, ce qui n'affecte en rien leur qualité.
190
Chapitre 10
Les éléments Bitmap tels que les images GIF, JPEG et PNG peuvent prendre un
aspect grossier ou être déformés si vous réinitialisez leurs attributs WIDTH et HEIGHT.
Il est recommandé de ne redimensionner ces éléments visuellement dans
Dreamweaver que pour déterminer la mise en page. Lorsque vous avez déterminé
la taille idéale de votre image, éditez le fichier dans une application d'édition
d'image. L'édition de l'image pourrait aussi diminuer sa taille de fichier et par
conséquent, réduire son temps de téléchargement.
Pour redimensionner un élément :
1
Sélectionnez l'élément (par exemple, une image ou une animation Shockwave)
dans la fenêtre Document.
Des poignées de redimensionnement apparaissent à droite et en bas de
l'élément, et dans le coin inférieur droit. Si aucune poignée n'apparaît,
d'autres éléments sont sélectionnés en plus de l'élément que vous voulez
redimensionner. Cliquez en dehors de l'élément et sélectionnez-le à nouveau,
ou utilisez le sélecteur de balise en bas de la fenêtre Document pour
sélectionner l'élément.
2
Redimensionner l'élément :
Faites glisser la poignée à droite de la sélection pour ajuster la largeur de
l'élément.
Faites glisser la poignée au bas de la sélection pour ajuster la hauteur de
l'élément.
Faites glisser la poignée au coin de la sélection pour ajuster en même temps la
largeur et la hauteur de l'élément.
Faites glisser la poignée au coin de la sélection tout en appuyant sur Maj, afin
de préserver les proportions de l'élément (rapport largeur:hauteur) alors que
vous ajustez ses dimensions.
Les éléments peuvent être redimensionnés visuellement à une taille minimum de 6
pixels par 6 pixels. Pour ajuster la largeur et la hauteur d'un élément à une taille
inférieure, (par exemple, 1 pixel par 1 pixel), utilisez l'inspecteur des propriétés.
Pour ramener l'élément à ses dimensions originales, cliquez sur les mentions L et
H dans l'inspecteur des propriétés.
Insertion d’images
191
Utilisation d'un éditeur d'image externe
Vous pouvez ouvrir une image sélectionnée dans un éditeur d'image externe
directement à partir de Dreamweaver. Lorsque vous revenez dans Dreamweaver
après avoir enregistré le fichier de l'image, toutes les modifications de l'image sont
visibles dans la fenêtre Document.
Pour choisir un éditeur d'image externe :
1
Choisissez Édition > Préférences.
2
Sélectionnez Éditeurs externes à partir de la liste des catégories qui se trouve à
gauche.
3
Cliquez sur Parcourir à côté de la zone Images et sélectionnez votre éditeur
d'image préféré.
Si vous choisissez Macromedia Fireworks comme éditeur d'image externe et
que vous le lancez à partir de Dreamweaver, Fireworks recherche
automatiquement dans le dossier contenant le fichier sélectionné, un fichier
PNG du même nom. Par exemple, si vous sélectionnez une image dont le
fichier source est images/maPhoto.gif et que images/ contient également un
fichier nommé maPhoto.png, Fireworks ouvre le fichier PNG. Les fichiers
PNG étant le format initial de Fireworks, ils conservent toutes les
informations sur les calques, les vecteurs, les couleurs et les effets, et tous les
éléments peuvent à tout moment être entièrement modifiés. Les fichiers
doivent avoir l'extension .png pour être reconnus comme fichiers PNG par
Dreamweaver.
Si vous choisissez une autre application comme éditeur d'image externe et que
vous la lancez à partir de Dreamweaver, l'application ouvre l'image
sélectionnée (par exemple, images/maPhoto.gif ). Si vous préférez, vous pouvez
ouvrir manuellement le fichier original à partir duquel le GIF a été généré,
(par exemple, maPhoto.psd pourrait être le fichier Photoshop original),
effectuer les modifications et générer à nouveau l'image GIF. Lorsque vous
retournez dans Dreamweaver l'image est actualisée dans la fenêtre Document.
Pour lancer l'éditeur d'image externe, effectuez l'une des procédures suivantes :
192
Chapitre 10
Tout en maintenant le bouton Contrôle (Windows) ou Commande
(Macintosh) appuyé, double-cliquez sur l'image que vous voulez éditer.
Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur Contrôle
tout en cliquant (Macintosh) sur l'image que vous voulez éditer et choisissez
Éditer image à partir du menu de raccourci.
Sélectionnez l'image que vous voulez éditer et cliquez sur Éditer image dans
l'inspecteur des propriétés.
Création de cartes graphiques
Une carte graphique est une image unique à laquelle sont affectés différents
hyperliens, pour définir les régions de l'image. Utilisez l'éditeur de carte graphique
pour créer et éditer graphiquement des cartes graphiques côté client.
Les cartes graphiques côté client conservent les informations d'hyperlien dans le
document HTML, mais pas dans un fichier carte séparé, contrairement aux cartes
graphiques côté serveur. Lorsque l’utilisateur clique sur la zone sensible d'une
image, l'URL associée est envoyée directement sur le serveur. Ceci rend les cartes
graphiques côté client plus rapides que celles côté serveur, car le serveur n'a pas
besoin d'interpréter où l’utilisateur a cliqué. Les cartes graphiques côté client sont
prises en charge par Netscape Navigator 2.0 et plus récent, NCSA Mosaic 2.1 et
3.0, ainsi que toutes les versions de Microsoft Internet Explorer.
Dreamweaver ne modifie pas les références aux cartes graphiques côté serveur dans
les documents existants. Vous pouvez utiliser dans un même document, les cartes
graphiques côté client et celles côté serveur. Les navigateurs qui prennent en
charge les deux types de cartes graphiques donnent la priorité à celles côté client.
Pour qu'une carte graphique côté serveur soit incluse dans un document, vous
devez écrire le code HTML correspondant.
Pour créer une carte graphique:
1
Sélectionnez l'image et cliquez sur le bouton Carte dans l'inspecteur de
propriétés.
Pour voir le bouton Carte, vous devrez peut-être cliquer sur la flèche
d'agrandissement dans le coin inférieur droit de l'inspecteur de propriétés.
2
Tapez le nom de la carte dans le champ approprié.
Ce nom apparaît comme l'attribut NAME de la balise MAP et comme l'attribut
USEMAP de la balise IMG.
3
Sélectionnez l'outil cercle ou carré et faites-le glisser au-dessus de l'image pour
créer une zone sensible de la forme d'un cercle ou d'un carré, ou sélectionnez
l'outil de polygone et définissez une zone sensible de forme irrégulière en
cliquant une fois pour chaque coin et deux fois pour fermer la forme.
4
Tapez le chemin de l'URL de la zone sensible dans la boîte Lien, ou cliquez sur
l'icône de dossier pour rechercher et sélectionner un fichier.
5
Afin de faire apparaître le document lié ailleurs que dans la fenêtre ou le cadre
actif, entrez un nom de fenêtre dans la boîte Cible, ou choisissez un nom de
cadre à partir du menu contextuel.
Voir Création de liens, page 107.
Insertion d’images
193
6
Dans le champ secondaire, tapez le texte de remplacement qui est affiché pour
la zone sensible dans les navigateurs ne traitant que du texte.
Certains navigateurs affichent ce texte comme une info-bulle lorsque
l’utilisateur place la souris au-dessus de la zone sensible.
7
194
Chapitre 10
Répétez les étapes 3 à 6 jusqu'à ce que vous ayez défini toutes les zones
sensibles, puis cliquez sur OK.
11
CHAPITRE 11
Création de tableaux
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de tableaux – Vue d’ensemble
Les tableaux sont utilisés pour présenter des données. Ils peuvent également être
utilisés pour contrôler l'endroit où le texte et les éléments graphiques apparaissent
sur la page. Lorsque vous créez un tableau, vous pouvez ajouter du contenu,
modifier des cellules et des propriétés de lignes, de même que copier et coller
plusieurs cellules.
Vous pouvez également opérer des conversions entre tableaux et calques. Les
tableaux et les calques vous permettent de disposer des éléments de page.
Toutefois, les calques ne sont pas pris en charge par les navigateurs de version 3.0
ou antérieure. Si le processus de conception requiert un repositionnement rapide
du contenu, vous pouvez utiliser des calques pour accomplir cette tâche, puis
convertir les calques en tableaux affichables dans des navigateurs plus anciens. Voir
Utilisation des calques pour concevoir des tableaux, page 226.
195
Création de tableaux
Utilisez la palette d'objets ou le menu Insertion pour créer un nouveau tableau.
Pour insérer un tableau :
1
Procédez de l'une des manières suivantes :
Pointez le curseur là où vous voulez que le tableau s'affiche sur la page, puis
cliquez sur le bouton Tableau du volet Commun de la palette d'objets ou sur
Insertion > Tableau.
Faites glisser le bouton Tableau de la palette d'objets vers l'emplacement de la
page souhaité.
2
Dans la boîte de dialogue qui s'affiche, entrez les informations suivantes :
Lignes et colonnes déterminent le nombre de lignes et de colonnes du tableau.
Remplissage de cellule détermine l'espace qu'il doit y avoir entre le contenu
d'une cellule et son contour.
détermine l'espacement qu'il doit y avoir entre
chaque cellule d'un tableau, sans compter la bordure.
Espacement des cellules
Largeur détermine la largeur du tableau exprimée en pixels ou comme
pourcentage de la fenêtre du navigateur. La définition des tableaux en pixels
favorise une disposition précise du texte et des images, tandis que la définition
en pourcentage est une option valable lorsque les proportions des colonnes
entre elles sont plus importantes que leur largeur réelle.
Bordure
détermine la largeur de bordure du tableau.
Remarque: Si vous voulez insérer un tableau sans avoir à paramétrer ces options,
désactivez l'option Afficher la boîte de dialogue lors de l'insertion d'objets dans les
préférences générales. Voir Paramétrage des préférences, page 72.
196
Chapitre 11
Imbrication de tableaux
Un tableau imbriqué est un tableau inséré dans une cellule d'un autre tableau.
Vous pouvez configurer un tableau imbriqué comme n'importe quel autre tableau.
Toutefois, sa largeur est limitée par la largeur de la cellule dans laquelle il se trouve.
Pour imbriquer un tableau à l'intérieur d'une cellule de tableau :
1
Procédez de l'une des manières suivantes :
Cliquez sur la cellule où vous voulez que le second tableau apparaisse, puis
choisissez Insertion > Tableau.
Cliquez sur la cellule où vous voulez que le second tableau apparaisse, puis
cliquez sur le bouton Tableau du volet Commun de la palette d'objets.
Faites glisser le bouton Tableau du volet Commun de la palette d'objets vers la
cellule dans laquelle le second tableau doit être inséré.
2
Dans la boîte de dialogue qui s'affiche, spécifiez les propriétés du tableau, puis
cliquez sur OK.
Remplissage d'un tableau
Tapez directement dans les cellules du tableau ou collez-y du texte. Vous pouvez
contrôler les propriétés des éléments graphiques insérés dans un tableau
exactement comme celles de n'importe quel autre élément graphique. Voir
Configuration des propriétés d’image, page 188.
Pour ajouter du texte à un tableau :
1
Cliquez sur n'importe quelle cellule, puis procédez de l'une des manières
suivantes :
Commencez à taper pour entrer du texte dans le tableau. Les cellules du
tableau s'étirent à mesure que vous tapez.
Collez du texte copié de Dreamweaver ou de n'importe quel autre éditeur de
texte. Utilisez la commande Coller comme texte pour préserver les
paragraphes. Voir Ajout de texte et insertion d'objets, page 82.
2
Appuyez sur la touche de tabulation pour passer à la cellule suivante ou
appuyez sur MAJ+TAB pour passer à la cellule précédente. Le fait d'appuyer
sur TAB lorsque le curseur se trouve dans la dernière cellule d'un tableau
ajoute automatiquement une ligne.
Vous pouvez également utiliser les touches fléchées pour passer d'une cellule à
l'autre.
Création de tableaux
197
Pour ajouter un graphique à un tableau :
1
Cliquez sur la cellule où vous voulez que le graphique apparaisse.
2
Cliquez sur le bouton Insertion d'image du volet Commun de la palette
d'objets ou choisissez Insertion > Image.
3
Dans la boîte de dialogue qui s'affiche, choisissez un fichier d'image.
Sélection d'éléments de tableau
D'un simple geste, vous pouvez sélectionner un tableau tout entier, une ligne ou
une colonne, voir une plage de cellules contiguës à l'intérieur du tableau. Une fois
le tableau sélectionné, en tout ou partie, vous pouvez :
modifier l'aspect des cellules sélectionnées ou du texte qu'elles contiennent.
Voir Formatage de tableaux, page 200 ;
copier et coller des plages de cellules contiguës. Voir Copie et collage de cellules,
page 210.
Vous pouvez également sélectionner plusieurs cellules non contiguës dans un
tableau et en modifier les propriétés. Il est en revanche impossible de copier et
coller des sélections de cellules non contiguës.
Pour sélectionner le tableau tout entier, procédez de l'une des manières
suivantes :
Cliquez sur le coin supérieur gauche du tableau ou n'importe où sur le bord
droit ou inférieur.
Cliquez une fois dans le tableau, puis choisissez Modifier > Tableau >
Sélectionner le tableau.
Cliquez une fois dans le tableau, puis choisissez Édition > Sélectionner tout.
Positionnez le curseur n'importe où dans le tableau, puis sélectionnez la balise
<table> dans le coin inférieur gauche de la fenêtre Document.
Des poignées de sélection apparaissent autour du tableau lorsqu'il est
sélectionné.
198
Chapitre 11
Pour sélectionner des lignes ou des colonnes, procédez de l'une des manières
suivantes :
Positionnez le curseur sur la marge gauche d'une ligne ou en haut d'une
colonne. Cliquez lorsque la flèche de sélection s'affiche.
Cliquez sur une cellule et faites glisser le curseur de la souris, verticalement ou
horizontalement, sans relâcher le bouton, de manière à sélectionner plusieurs
lignes ou colonnes.
Pour sélectionner une ou plusieurs cellules, procédez de l'une des manières
suivantes :
Cliquez sur une cellule et faites glisser le curseur de la souris, verticalement ou
horizontalement, sans relâcher le bouton, vers une autre cellule.
Cliquez sur une cellule, puis en tenant la touche MAJ enfoncée, cliquez sur
une autre cellule. Toutes les cellules se trouvant à l'intérieur de la zone
rectangulaire ainsi délimitée sont sélectionnées.
Pour sélectionner plusieurs cellules non contiguës, procédez de l'une des manières
suivantes :
Enfoncez la touche CTRL (Windows) ou sur Commande (Macintosh), puis
cliquez dans le tableau pour ajouter des cellules, des lignes ou des colonnes à la
sélection.
Sélectionnez plusieurs cellules dans le tableau, puis, en tenant enfoncée la
touche CTRL (Windows) ou Commande (Macintosh), cliquez sur les cellules,
lignes ou colonnes que vous voulez désélectionner.
Création de tableaux
199
Formatage de tableaux
Vous pouvez modifier l'aspect des tableaux en définissant des propriétés pour
l'ensemble ou une partie de leurs cellules ou en leur appliquant une mise en forme
prédéfinie. Voir Paramétrage des propriétés de tableaux, page 201, Paramétrage des
propriétés de ligne et de cellule, page 202 et Formatage d'un tableau à l'aide d'une
mise en forme prédéfinie, page 204.
Pour formater du texte dans des tableaux, vous pouvez appliquer une mise en
forme à du texte sélectionné ou utiliser des styles. Voir Formatage du texte – Vue
d’ensemble, page 167.
A propos des balises de tableaux
Lorsque vous formatez des tableaux dans la fenêtre du document, vous pouvez
définir des propriétés s'appliquant au tableau tout entier ou à une série de lignes,
de colonne ou de cellules sélectionnées dans le tableau. Lorsqu'une propriété telle
qu'une couleur d'arrière-plan ou un alignement, est définie d'une certaine manière
pour l'ensemble du tableau et d'une autre pour certaines cellules individuelles, il
est utile de comprendre comment le langage HTML est interprété.
Lorsque la même propriété est définie plus d'une fois dans un tableau, elle est
interprétée comme suit : le formatage de cellule, qui fait partie de la balise TD, a
priorité sur le formatage de ligne de tableau (balise TR) qui, à son tour, a priorité
sur le formatage du tableau (balise TABLE). C'est pourquoi, si vous définissez la
couleur bleue pour l'arrière-plan d'une cellule, puis définissez la couleur jaune
pour l'arrière-plan du tableau, la couleur de la cellule bleu ne change pas du fait
que la balise TD a priorité sur la balise TABLE.
Dans l'exemple ci-dessous, la balise TABLE définit la couleur d'arrière-plan jaune
(#FFFF99) pour tout le tableau. La première balise TR change la couleur des
cellules en vert (#33FF66), et la seconde balise TD change la cellule centrale du
haut en bleu (#333399). Les balises TR et TD dans la ligne du bas n'ont pas été
modifiées de sorte que ces cellules adoptent la couleur du tableau, à savoir le
jaune.
<TABLE BORDER="1" WIDTH="75%" BGCOLOR="#FFFF99">
<TR BGCOLOR="#33FF66">
<TD> </TD>
<TD BGCOLOR="#333399"> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
200
Chapitre 11
Paramétrage des propriétés de tableaux
L'inspecteur de propriétés affiche les propriétés d'un tableau lorsqu'il est
sélectionné.
Vous pouvez également utiliser la commande Format tableau pour appliquer
rapidement une mise en forme prédéfinie à un tableau sélectionné. Voir Formatage
d'un tableau à l'aide d'une mise en forme prédéfinie, page 204.
Pour spécifier les propriétés d'un tableau :
1
Sélectionnez le tableau.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés. Cliquez
sur la flèche d’agrandissement dans le coin inférieur droit pour afficher toutes
les propriétés.
3
Pour nommer le tableau, tapez son nom dans le champ Nom du tableau.
4
Opérez une sélection parmi les options de mise en forme du tableau suivantes :
Les champs Lignes et Cols
définissent le nombre de lignes et de colonnes du
tableau.
L et H définissent la largeur et la hauteur du tableau, exprimées en pourcentage
de la fenêtre du navigateur, ou par une valeur absolue en pixels. Il est rare que
l'on fixe la hauteur d'un tableau.
Aligner aligne le tableau sur la gauche (paramétrage par défaut), la droite ou le
centre de la fenêtre des navigateurs de version 4.0 ou ultérieurs. Pour centrer
un tableau dans les navigateurs version 3.0, sélectionnez-le, puis choisissez
Texte > Alignement > Centrer.
Espace V et Espace H spécifient l'espace (exprimé en pixels) qu'il faut réserver
en haut, en bas, à gauche et à droite du tableau.
Les boutons Effacer hauteurs de ligne et Effacer largeurs de colonne
suppriment toutes les valeurs de hauteur de ligne et de largeur de colonne du
tableau.
convertit la largeur du
tableau exprimée en pourcentage de la fenêtre du navigateur en sa valeur
absolue actuelle exprimée en pixels. Cliquez sur le bouton Convertir largeurs
de tableau en pourcentage pour obtenir l'effet inverse, à savoir pour convertir
la valeur absolue exprimée en pixels en pourcentage de la fenêtre du
navigateur.
Le bouton Convertir largeur de tableau en pixels
Création de tableaux
201
5
Opérez une sélection parmi les options de mise en forme de cellule suivantes :
Espac. de cellule
définit l'espace devant séparer les cellules du tableau.
définit l'espace qu'il doit y avoir entre le contenu d'une cellule et
son contour. Si aucune valeur spécifique n'est attribuée aux paramètres
d'espacement et de remplissage des cellules, Netscape Navigator, Microsoft
Internet Explorer et Dreamweaver affichent tous trois le tableau comme si la
valeur d'espacement était définie sur 2 et la valeur de remplissage sur 1.
Remplissage
6
Définissez les options suivantes pour la mise en forme des bordures :
permet de définir la largeur de la bordure entourant le tableau,
exprimée en pixels. La plupart des navigateurs affichent la bordure sous la
forme d'une ligne en relief. Si vous utilisez le tableau pour la mise en page,
spécifiez une valeur de bordure égale à 0. Pour afficher les contours de cellule
et de tableau lorsque la valeur de bordure est fixée à 0, choisissez Affichage >
Bordures de tableau.
Bordure
Les deux champs libellés Brdre permettent de définir les couleurs des bordures
auxquelles est appliqué un effet de surbrillance et d'ombre pour obtenir un
aspect tridimensionnel (pour revenir aux nuances de gris par défaut,
supprimez les valeurs de couleur et laissez les champs à blanc).
Le champ Brdr en bas à droite
permet de définir la couleur de bordure pour
tout le tableau.
7
Les options Ar-pl permettent de définir respectivement l'image et la couleur
d'arrière-plan pour le tableau.
Paramétrage des propriétés de ligne et de cellule
Sélectionnez n'importe quelle combinaison de cellules, puis utilisez l'inspecteur de
propriétés pour modifier individuellement l'aspect des cellules, des lignes et des
colonnes. Pour sélectionner des cellules, des lignes et des colonnes, voir Sélection
d'éléments de tableau, page 198. Pour appliquer un formatage au tableau tout
entier, voir Paramétrage des propriétés de tableaux, page 201.
Pour formater une ligne, une colonne ou une cellule :
202
Chapitre 11
1
Sélectionnez une combinaison quelconque de cellules dans le tableau.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés, puis
cliquez sur la flèche d'extension dans le coin inférieur droit pour afficher
toutes les propriétés.
3
Sélectionnez l'une des options d'aspect suivantes :
Horz définit l'alignement horizontal du contenu de la cellule sur le
paramétrage par défaut du navigateur (habituellement à gauche pour les
cellules ordinaires et centré pour les cellules de titre), à gauche, à droite ou
centré.
Vert définit l'alignement vertical du contenu de la cellule sur le paramétrage
par défaut du navigateur (habituellement au milieu), en haut, au milieu, en
bas ou sur la ligne du bas.
L et H définissent la largeur et la hauteur des cellules sélectionnées, exprimées
en pixels. Pour utiliser des pourcentages, suivez la valeur associée au signe (%).
Le champ Ar-pl du haut définit l'image d'arrière-plan pour les cellules.
Le champ Ar-pl du bas définit la couleur d'arrière-plan pour les cellules. La
couleur d'arrière-plan apparaît uniquement à l'intérieur des cellules, c'est-àdire qu'elle n'affecte pas les espacements entre les cellules ni les bordures du
tableau. Cela signifie que si l'espacement et le remplissage des cellules ne sont
pas paramétrés sur 0, il y aura des trous entre les zones colorées, même si la
bordure est paramétrée sur 0.
Brdre définit la couleur de bordure des cellules.
4
Opérez une sélection parmi les options de mise en forme suivantes :
Fusionner ou Fractionner combine ou divise des cellules. Voir Fractionnement
et fusion de cellules, page 208.
Pas de retour à la ligne auto empêche le retour à la ligne des mots de sorte que
les cellules s'étirent en largeur pour pouvoir accueillir toutes les données.
Normalement, les cellules s'élargissent horizontalement pour pouvoir
accueillir le mot le plus long, puis s'étirent verticalement.
Titre formate chaque cellule comme un titre de tableau. Par défaut, le contenu
des cellules de titre de tableau (TH) est en caractères gras et centré.
Création de tableaux
203
Formatage d'un tableau à l'aide d'une mise en forme prédéfinie
Utilisez la commande Formater le tableau pour appliquer rapidement une mise en
forme prédéfinie à un tableau, puis sélectionnez des options pour personnaliser
davantage la mise en forme.
Pour utiliser une mise en forme prédéfinie :
1
Sélectionnez le tableau et choisissez Commandes > Formater le tableau.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez un modèle de mise en
forme dans la liste à gauche. Le tableau est mis à jour, illustrant l'aspect de la
mise en forme.
3
Pour personnaliser davantage la mise en forme, modifiez les options Couleurs
de ligne, Ligne supérieure et Col. gauche.
4
Pour modifier la largeur de bordure, tapez une valeur dans le champ Bordure.
Tapez 0 si vous ne voulez pas de bordure.
5
Pour appliquer la mise en forme aux cellules du tableau (balises TD) plutôt
qu'aux lignes (balises TR), activez l'option Appliquer tous les attributs aux
balises TD plutôt que TR.
Le formatage appliqué aux cellules du tableau a priorité sur celui appliqué aux
lignes du tableau. En revanche, le formatage appliqué aux lignes produit un
code source HTML plus propre et concis. Voir Formatage de tableaux,
page 200.
6
204
Chapitre 11
Cliquez sur Appliquer ou sur OK pour formater le tableau avec la mise en
forme sélectionnée.
Tri de tableaux
Vous pouvez effectuer un simple tri de tableau en vous basant sur le contenu d'une
seule colonne. Vous pouvez également exécuter un tri de tableau plus compliqué
en triant le contenu des deux colonnes.
Vous ne pouvez pas trier des tableaux contenant des attributs COLSPAN ou
ROWSPAN, c'est-à-dire des tableaux contenant des cellules fusionnées.
Pour trier un tableau :
1
Sélectionnez le tableau et choisissez Commandes > Trier le tableau.
2
Dans la boîte de dialogue qui s'affiche, opérez un choix parmi les options
suivantes :
Sélectionnez la colonne à trier à l'aide de l'option Trier par.
Sélectionnez le type de tri, alphabétique ou numérique, que vous voulez
effectuer à l'aide de l'option Ordre.
Cette option est importante lorsque le contenu d'une colonne est numérique.
Un tri alphabétique appliqué à une liste de nombres d'un ou deux chiffres
produit un tri alphanumérique (tel que 1, 10, 2, 20, 3, 30) au lieu de
numérique (tel que 1, 2, 3, 10, 20, 30).
Sélectionnez Croissant (de A à Z ou de bas en haut) ou Décroissant pour
l'ordre de tri.
3
Pour appliquer un tri secondaire à une autre colonne, spécifiez les options de
tri à l'aide du champ Puis par.
4
Activez l'option Inclure la première ligne pour inclure la première ligne dans le
tri. Si la première ligne est un titre qui ne doit pas être déplacé, laissez cette
option désactivée.
5
Cliquez sur Appliquer ou sur OK pour trier le tableau.
Création de tableaux
205
Redimensionnement des tableaux et cellules
Vous pouvez redimensionner tout le tableau ou uniquement des cellules ou des
colonnes individuelles. Lorsque vous redimensionnez tout le tableau, toutes les
cellules changent en proportion.
Pour redimensionner le tableau :
1
Sélectionnez le tableau.
2
Faites glisser l'une des poignées de sélection pour redimensionner le tableau
dans cette dimension. La poignée d'angle permet de redimensionner les deux
dimensions.
Pour modifier la taille d'une ligne ou d'une colonne, procédez de l'une des
manières suivantes :
Pour modifier la hauteur de ligne, faites glisser la bordure inférieure de la ligne.
Pour modifier la largeur de colonne, faites glisser la bordure droite de la
colonne.
Modification des largeurs de colonne
L'inspecteur de propriétés vous permet de spécifier la largeur d'une colonne de
trois manières.
Pour définir la largeur de colonne :
206
Chapitre 11
1
Cliquez sur une cellule de la colonne ou sélectionnez-la toute entière.
2
Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés.
3
Dans le champ L, procédez de l'une des manières suivantes :
Tapez un nombre exprimant, en pixels, la largeur de colonne voulue.
Tapez un nombre suivi du signe de pourcentage (%) pour que la largeur de la
colonne corresponde à un pourcentage de la largeur du tableau (les menus
déroulants pixels/% ne s'affichent pas pour les cellules, les lignes et les
colonnes ; uniquement pour les tableaux entiers).
Laissez le champ à blanc (paramétrage par défaut) pour laisser au navigateur et
à Dreamweaver le soin de déterminer la largeur appropriée en fonction du
contenu de la cellule et des largeurs des autres colonnes. Généralement,
l'espace attribué se base sur la ligne la plus longue et l'image la plus large. C'est
pourquoi il arrive qu'une colonne de tableau devienne beaucoup plus large
que les autres lorsque vous y ajoutez du contenu.
Effacement des largeurs de colonne et des hauteurs de ligne
La manière la plus simple de définir les largeurs de colonne et les hauteurs de ligne
consiste à faire glisser les bordures du tableau. Le fait de faire glisser une bordure
de colonne ou de ligne modifie automatiquement les valeurs spécifiques de toutes
les colonnes et les lignes, exprimées soit en pixels, soit en pourcentage des
dimensions actuelles du tableau, selon la manière dont la largeur du tableau est
spécifiée.
Si vous n'obtenez pas le résultat souhaité en tirant sur les bordures du tableau,
vous pouvez effacer les valeurs de largeur de colonne et recommencer.
Pour modifier les largeurs et hauteurs de cellule, procédez de l'une des manières
suivantes :
Sélectionnez le tableau, choisissez Modifier > Tableau, puis Effacer les hauteurs
de cellule ou Effacer les largeurs de cellule.
Choisissez Fenêtre > HTML, puis modifiez les largeurs et hauteurs
directement dans l'inspecteur HTML.
Dans l'inspecteur de propriétés, tapez des valeurs de largeur et de hauteur
spécifiques dans les champs L et H.
Ajout et retrait de lignes et de colonnes
Utilisez les commandes du menu Modifier > Tableau ou celle du menu contextuel
pour ajouter ou retirer des lignes et des colonnes de tableau.
Pour ajouter des lignes ou des colonnes :
1
Cliquez sur la cellule où vous voulez que la nouvelle ligne ou la nouvelle
colonne apparaisse.
2
Procédez de l'une des manières suivantes :
Pour ajouter une ligne, choisissez Modifier > Tableau > Insérer une ligne ou,
dans le menu contextuel, Tableau > Insérer une ligne.
Pour ajouter une colonne, choisissez Modifier > Tableau > Insérer une colonne
ou, dans le menu contextuel, Tableau > Insérer une colonne.
Pour ajouter des lignes et des colonnes, choisissez Modifier > Tableau > Insérer
des lignes ou des colonnes ou, dans le menu contextuel, Tableau > Insérer des
lignes ou des colonnes.
Dans la boîte de dialogue qui s'affiche, tapez le nombre de lignes ou de
colonnes que vous voulez ajouter. Spécifiez si les nouvelles lignes ou colonnes
doivent s'afficher devant ou derrière la colonne ou la ligne sélectionnée.
Cliquez sur OK.
Création de tableaux
207
Pour supprimer une ligne ou une colonne :
1
Cliquez sur une cellule de la ligne ou de la colonne que vous voulez supprimer.
2
Sélectionnez l'une des options suivantes :
Pour supprimer une ligne, choisissez Modifier > Tableau > Supprimer la ligne
ou, dans le menu contextuel, Tableau > Supprimer la ligne.
Pour supprimer une colonne, choisissez Modifier > Tableau > Supprimer la
colonne ou, dans le menu contextuel, Tableau > Supprimer la colonne.
Pour ajouter ou supprimer des lignes ou des colonnes au bas et à droite d'un
tableau :
1
Sélectionnez tout le tableau (cliquez sur le coin supérieur gauche du tableau ou
cliquez une fois dans le tableau, puis Modifier > Tableau > Sélectionner le
tableau).
2
Dans l'inspecteur de propriétés :
Augmentez la valeur indiquant le nombre de lignes ou de colonnes pour en
ajouter.
Réduisez la valeur indiquant le nombre de lignes ou de colonnes pour en
supprimer.
Dreamweaver ajoute et supprime les lignes au bas du tableau, et ajoute et
supprime les colonnes à droite du tableau. Dreamweaver ne vous avertit pas si
vous supprimez des lignes et des colonnes contenant des données.
Fractionnement et fusion de cellules
Utilisez l'inspecteur de propriétés ou les commandes du menu Modifier > Tableau
pour fractionner ou fusionner des cellules. Vous pouvez fusionner n'importe quel
nombre de cellules adjacentes (du moment que la sélection présente une forme
rectangulaire) pour produire une cellule unique s'étendant sur plusieurs colonnes
ou lignes. Vous pouvez fractionner une cellule en un nombre quelconque de lignes
et de colonnes, qu'elle ait été précédemment fusionnée ou non. Dreamweaver
réorganise automatiquement le tableau (en ajoutant les COLSPAN ou ROWSPAN
nécessaires) afin de créer l'arrangement spécifié.
Dans l'illustration ci-dessous, les cellules du milieu des deux premières lignes ont
été fusionnées de sorte qu'elles s'étendent sur deux lignes.
208
Chapitre 11
Pour fusionner deux ou plusieurs cellules d'un tableau :
1
Sélectionnez les cellules à fusionner.
Les cellules sélectionnées doivent être contiguës et présenter une forme
rectangulaire.
La sélection opérée dans ce tableau n'étant pas de forme rectangulaire, il est
impossible de fusionner les cellules.
La sélection opérée dans ce tableau a une forme rectangulaire de sorte qu'il est
possible de fusionner les cellules.
2
Choisissez Modifier > Tableau > Fusionner les cellules ou, dans l'inspecteur de
propriétés, cliquez sur le bouton Fusionner les cellules.
Le contenu des cellules individuelles est placé dans les cellules produites par la
fusion. Les propriétés de la première cellule sélectionnée sont appliquées à la
cellule fusionnée.
Pour fractionner une cellule fusionnée :
1
Cliquez dans la cellule ou sélectionnez une cellule.
2
Choisissez Modifier > Tableau > Fractionner la cellule ou, dans l'inspecteur de
propriétés, cliquez sur le bouton Fractionner la cellule.
3
Dans la boîte de dialogue Fractionner la cellule, indiquez si vous voulez
fractionner les cellules en lignes ou en colonnes, puis entrez le nombre de
lignes ou de colonnes.
Création de tableaux
209
Copie et collage de cellules
Vous pouvez copier et coller plusieurs cellules de tableau à la fois, en préservant
leur formatage, ou ne copier et coller que leur contenu.
Vous pouvez coller les cellules à un point d'insertion ou à la place d'une sélection
dans un tableau existant. Pour coller plusieurs cellules de tableau, il faut que le
contenu du Presse-papiers soit compatible avec la structure du tableau ou de la
sélection du tableau dans laquelle les cellules seront collées.
Pour couper ou copier des cellules dans un tableau :
1
Sélectionnez une combinaison quelconque de cellules dans le tableau.
Pour pouvoir être coupé ou copié, le groupe de cellules doit présenter une
forme rectangulaire. Voir Sélection d'éléments de tableau, page 198.
Sélection incorrecte : il est impossible de couper ou de copier ces cellules.
Sélection correcte : il est possible de couper ou coller ces cellules.
2
Coupez ou copiez les cellules à l'aide des commandes du menu Édition.
Si vous sélectionnez la ligne ou la colonne tout entière, elle disparaît du
tableau lorsque vous choisissez Édition > Couper.
210
Chapitre 11
Pour coller ces cellules de tableau :
1
Choisissez l'endroit où vous voulez coller les cellules.
Pour ajouter les cellules devant ou au-dessus de la cellule en cours, cliquez sur
l'une des cellules du tableau.
Pour créer un nouveau tableau avec les cellules, positionnez le curseur en
dehors de tout tableau.
2
Choisissez Édition > Coller.
Si vous collez des lignes ou des colonnes entières, celles-ci s'ajoutent au
tableau. Si vous collez une cellule isolée, le contenu de la cellule sélectionnée
est remplacé, pour autant que le contenu du Presse-papiers soit compatible
avec la cellule sélectionnée. Si vous effectuez un collage en dehors d’un
tableau, les lignes, colonnes ou cellules que vous collez sont utilisées pour
définir un nouveau tableau.
Pour supprimer le contenu d'une cellule en conservant les cellules intactes :
1
Sélectionnez une ou plusieurs cellules.
2
Choisissez Édition > Effacer ou appuyez sur la touche Suppr.
Remarque: Si vous sélectionnez la ligne ou la colonne tout entière, elle disparaît avec son
contenu.
Pour copier et coller le contenu de cellules :
1
Sélectionnez le texte, puis choisissez Édition > Copier comme texte.
Seul le texte des cellules sélectionnées est copié dans le Presse-papiers.
2
Cliquez sur une cellule ou à un endroit quelconque de la fenêtre Document,
puis choisissez Édition > Coller comme texte.
Il est impossible de recoller les cellules copiées dans une sélection de plusieurs
cellules.
Création de tableaux
211
212
Chapitre 11
12
CHAPITRE 12
Utilisation des calques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation des calques – Vue d’ensemble
Les calques sont utilisés pour positionner les éléments avec précision dans la
fenêtre du navigateur. Les calques peuvent contenir du texte, des images, des plugins et même d'autres calques – tout ce que vous pouvez mettre dans le corps d'un
document HTML peut être mis dans un calque. Les calques sont particulièrement
utiles pour la superposition de certaines parties de votre page.
Vous pouvez afficher et masquer des calques avec des comportements afin de créer
des pages au chargement rapide, qui sont modifiées sans devoir charger le contenu
supplémentaire à partir des fichiers source. Grâce au scénario, vous pouvez
déplacer ou changer les calques selon une ligne de temps.
À propos des calques
Il y a deux formats de calque pour le positionnement du contenu sur une page :
Calques CSS et Netscape.
Les calques CSS (également connus sous l'appellation éléments CSS-P)
positionnent le contenu sur la page à l'aide des balises DIV et SPAN. Les
propriétés des calques CSS sont définies par le Consortium du World
Wide Web.
Les calques Netscape positionnent le contenu sur la page à l'aide des balises
Netscape LAYER et ILAYER. Les propriétés des calques Netscape sont définies par
le format de calque propre à Netscape.
213
Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0 acceptent tous les deux
les calques créés à l'aide des balises DIV et SPAN. Seul Navigator accepte les calques
créés avec les balises LAYER et ILAYER. Les versions précédentes de Microsoft
Internet Explorer 4.0 et Netscape Navigator 4.0 afficheront le contenu des
calques, mais ils ne seront pas positionnés.
Dans Dreamweaver, le terme "calque" correspond à tout élément qui peut être
positionné à des coordonnées précises sur la page. Les propriétés de
positionnement incluent les coordonnées X et Y (respectivement haut et gauche),
l'index Z (également appelé ordre de superposition), et la visibilité. Les éléments
positionnés peuvent être définis avec les balises DIV, SPAN, LAYER et ILAYER dans
Dreamweaver. Voir Configuration des préférences de calques, page 216.
Création de calques
Créez des calques en utilisant les techniques d'insertion, de glisser-déplacer ou de
dessin. Une fois le calque créé, utilisez la palette des calques pour le sélectionner,
imbriquez-le dans un autre calque ou modifiez son ordre de superposition. Voir
Utilisation de la palette de calques, page 220.
Les propriétés par défaut des calques, (balise, visibilité, hauteur et largeur, etc.)
sont spécifiées dans les préférences des calques. Pour modifier les paramètres par
défaut, choisissez Édition > Préférences et sélectionnez Calques. Voir
Configuration des préférences de calques, page 216.
Par défaut, Dreamweaver crée les calques avec les balises DIV et insère le code du
calque à la position du curseur, ou lorsque vous dessinez des calques, en haut de la
page, juste après la balise BODY. Si vous créez un calque imbriqué, Dreamweaver
insère le code dans la balise qui définit le calque parent.
Lorsque vous créez des calques, pour empêcher qu'ils se chevauchent, activez
l'option Empêcher le chevauchement dans la palette des calques, ou choisissez
Affichage > Empêcher le chevauchement des calques. Voir Empêcher le
chevauchement des calques, page 228.
214
Chapitre 12
Pour créer un calque, effectuez l'une des procédures suivantes :
Pour insérer un calque, placez le curseur dans la fenêtre du document, là où
vous voulez positionner le calque, puis choisissez Insertion > Calque.
Pour glisser-déplacer un calque, cliquez sur le bouton Calque de la palette
d'objets et faites glisser le calque vers la fenêtre de document. Le calque est
placé à l'endroit où la souris est relâchée.
Pour dessiner un calque dans la fenêtre de document, cliquez sur le bouton
Calque dans la palette d'objets, relâchez la souris et utilisez le curseur pour
dessiner.
Un indicateur de calque apparaît en haut et à gauche de la page dans la fenêtre
de document. Si l'indicateur du calque n'est pas visible, choisissez Affichage >
Éléments invisibles. Voir Paramétrage des préférences pour les éléments invisibles,
page 85.
Dans la palette de calque, le nom du calque apparaît dans la colonne Nom. Au
fur et à mesure que vous créez des calques, ils sont affichés dans une liste de
superposition – le plus récent se trouvant en haut de la liste. Voir Modification
de l'ordre de superposition des calques, page 225.
Imbrication des calques
Un calque imbriqué est un calque créé à l'intérieur d'un autre calque. Utilisez la
palette des calques ou les techniques d'insertion, de glisser-déplacer ou de dessin
pour créer des calques imbriqués.
Vous pouvez utiliser l'imbrication pour regrouper les calques. Un calque imbriqué
se déplace avec son calque parent et hérite de sa visibilité. Les calques Netscape
créés avec les balises LAYER et ILAYER se développent pour contenir la hauteur et la
largeur de leur enfant.
Voici un exemple de code HTML d'un calque imbriqué :
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px;
z-index:1;">
Contenu interne au calque parent.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px;
z-index:1;">
Contenu interne au calque imbriqué.
</div>
</div>
Lorsque vous dessinez des calques, utilisez Préférences des calques pour forcer
l'imbrication d'un calque créé à l'intérieur d'un autre calque. Choisissez Édition >
Préférences, sélectionnez Calques, puis cliquez dans la case à cocher Imbrication.
Voir Configuration des préférences de calques, page 216.
Utilisation des calques
215
Pour créer un calque imbriqué, effectuez l'une des procédures suivantes :
Pour insérer un calque imbriqué, placez le curseur à l'intérieur d'un calque
existant et choisissez Insertion > Calque.
Pour glisser-déplacer un calque imbriqué, cliquez sur le bouton Calque de la
palette d'objets, puis, sans relâcher le bouton de la souris, glissez-déplacez le
calque à l'intérieur d'un calque existant.
Pour dessiner un calque imbriqué, cliquez sur le bouton Calque de la palette
d'objets, relâchez le bouton de la souris, puis utilisez le curseur pour dessiner
un calque à l'intérieur d'un calque existant (si la case Imbrication est cochée
dans Préférences des calques) ; autrement, appuyez sur Contrôle (Windows)
ou Commande (Macintosh) tout en faisant glisser le calque.
Pour créer un calque imbriqué à l'aide de la palette des calques :
1
Choisissez Fenêtre > Calques pour ouvrir la palette des calques.
2
Appuyez sur la touche Contrôle (Windows) ou la touche Commande
(Macintosh), puis sélectionnez un calque dans la palette des calques et faites le
glisser vers le calque cible.
3
Relâchez le bouton de la souris lorsqu'une boîte apparaît autour du nom du
calque cible.
Configuration des préférences de calques
Utilisez Préférences des calques pour définir les paramètres par défaut des
nouveaux calques. Choisissez Édition > Préférences, puis cliquez sur Calques pour
modifier les préférences des calques.
Balise Détermine la balise par défaut utilisée pour définir le calque. SPAN et DIV
créent des calques CSS ; LAYER et ILAYER créent des calques Netscape.
Visibilité
Détermine si les calques sont visibles par défaut.
Largeur et Hauteur Définissent la largeur et la hauteur par défaut des calques créés
à l'aide de Insertion > Calque.
Couleur d'arrière-plan
Image d'arrière-plan
Détermine la couleur d'arrière-plan par défaut.
Spécifie une image d'arrière-plan par défaut.
Force l'imbrication d'un calque dessiné à l'intérieur des limites d'un
calque existant. Alors que vous dessinez un calque, appuyez sur Contrôle
(Windows) ou sur Commande (Macintosh) pour modifier cette configuration de
façon temporaire.
Imbrication
216
Chapitre 12
Configuration des propriétés de calques
Utilisez l'inspecteur des propriétés pour spécifier le nom et l'emplacement d'un
calque ainsi que pour définir d'autres options de calque. Afin de voir toutes les
propriétés suivantes, cliquez sur la flèche d'agrandissement, dans le coin inférieur
droit de l'inspecteur des propriétés.
Spécifie un nom pour identifier le calque dans la palette des
calques et pour le script. Entrez un nom dans la boîte sans titre à gauche de
l'inspecteur des propriétés. N'utilisez que des caractères alphanumériques standard
pour les noms de calque. N'utilisez pas de caractères spéciaux tels que les espaces,
les tirets, les barres obliques ou les points.
Nom de calque
G et S Spécifient la position du calque par rapport au coin supérieur gauche de la
page ou du calque parent.
L et H Spécifient la largeur et la hauteur du calque. Ces valeurs sont remplacées si le
contenu du calque dépasse la taille spécifiée.
En ce qui concerne les calques CSS, les valeurs par défaut pour l'emplacement et
la taille sont en pixels (px). Vous pouvez aussi spécifier les unités suivantes : pc
(picas), pt (points), in (pouces), mm (millimètres), cm (centimètres), ou %
(pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans
espace : par exemple, 3mm. Le paramètre Débordement détermine comment les
calques CSS réagissent lorsque le contenu dépasse leur taille.
Index Z Détermine l'index Z ou l'ordre de superposition du calque. Plus le
numéro de calque est élevé, plus le calque se trouve au-dessus des autres calques.
Les valeurs peuvent être positives ou négatives. Nous vous conseillons d'utiliser la
palette des calques pour modifier l'ordre de superposition des calques plutôt que
de saisir des valeurs d'index Z spécifiques. Voir Modification de l'ordre de
superposition des calques, page 225.
Les calques Netscape (celles avec la balise LAYER ou ILAYER) peuvent également être
superposés de manière relative à d'autres calques de la page. Lorsque vous
sélectionnez un calque Netscape, deux options supplémentaires s'affichent dans le
coin inférieur droit de l'inspecteur des propriétés. Utilisez l'option A/B afin de
sélectionner une position relative, puis choisissez le nom d'un autre calque dans le
menu local juste à droite. (A spécifie un calque au-dessus du calque courant ; B
spécifie un calque au-dessous du calque courant).
Visib. Détermine la condition de l'affichage initial pour le calque. Utilisez un langage
de script tel que JavaScript, pour contrôler la propriété de visibilité et afficher le
contenu des calques de façon dynamique. Choisissez une des options suivantes :
La valeur par défaut ne spécifie pas de propriété de visibilité, mais la plupart
des navigateurs l'interprètent comme Hériter.
Hériter prend la propriété de visibilité du parent du calque.
Visible affiche le contenu du calque, quelle que soit la valeur du parent.
Masqué dissimule le contenu du calque, quelle que soit la valeur du parent.
Remarquez que les calques masqués créés avec LAYER et ILAYER prennent le
même espace que si ils étaient visibles.
Utilisation des calques
217
Spécifie une image d'arrière-plan pour le calque. Tapez le chemin de
l'image dans la zone de texte ou cliquez sur l'icône de dossier pour rechercher et
sélectionner un fichier d'image.
Image ar-pl
Spécifie une couleur d'arrière-plan pour le calque. Laissez cette
option vide pour spécifier un arrière-plan transparent.
Couleur ar-pl
Détermine si le calque est un calque CSS ou Netscape. SPAN et DIV créent
des calques CSS ; LAYER et ILAYER créent des calques Netscape.
Balise
(calques CSS seulement) Détermine ce qui se passe lorsque le contenu
d'un calque dépasse sa taille. Choisissez une des options suivantes :
Débord.
Visible augmente la taille du calque de façon à ce que tout son contenu soit
visible. Le calque s'agrandit vers le bas et vers la droite.
Masqué conserve la taille du calque et découpe tout contenu supérieur à la
taille. Aucune barre de défilement n'est présentée.
Défiler ajoute des barres de défilement au calque, même si le contenu
correspond à la taille du calque. Intégrer des barres de défilement évite la
confusion causée par l'apparition et la disparition des barres de défilement
dans un environnement dynamique. Seuls les navigateurs qui prennent en
charge les barres de défilement accepteront cette option.
Auto ne fait apparaître les barres de défilement que lorsque le contenu du
calque excède les limites de ce dernier.
Définit la partie du calque qui est visible. Entrez les valeurs représentant la
distance en pixels par rapport aux limites du calque. Les paramètres S (sommet) et
G (gauche) sont relatifs au calque, pas à la page.
Dét.
(calques Netscape seulement) Vous permet de
positionner un calque par rapport à son parent. L'option G, H place le calque par
rapport au coin supérieur gauche de son parent. L'option PageX, PageY place le
calque à l'emplacement absolu relatif au coin supérieur gauche de la page, quelle
que soit la position de son parent.
Utilisez G, H ou PageX, PageY
Src (calques
Netscape seulement) vous permet d'afficher un autre document
HTML à l'intérieur du calque. Tapez le chemin du document ou cliquez sur
l'icône dossier pour parcourir et sélectionner le document. Remarquez que
Dreamweaver n'affiche pas cette propriété dans la fenêtre Document.
A/B (calques
Netscape seulement) spécifie le calque au-dessus (A) ou au-dessous
(B) du calque courant, selon l'ordre de superposition (index Z). Seuls les calques
précédemment définis dans le document apparaîtront dans la liste des noms de
calque, à droite du menu A/B.
218
Chapitre 12
Configuration des propriétés pour plusieurs calques
Lorsque vous sélectionnez deux calques ou plus, l'inspecteur des propriétés de
calques affiche les propriétés du texte et un ensemble de propriétés vous
permettant de modifier plusieurs calques à la fois. Pour sélectionner plusieurs
calques, appuyez sur Maj tout en sélectionnant les calques. Voir Manipulation des
calques, page 220.
Pour plus de détails sur le formatage du texte des calques, voir Propriétés du texte
dans les pages d’aide de Dreamweaver.
Spécifient la position du calque par rapport au coin supérieur gauche de la
page ou du calque parent.
G et S
Spécifient la largeur et la hauteur du calque. Ces valeurs sont remplacées si
le contenu du calque dépasse la taille spécifiée.
L et H
En ce qui concerne les calques CSS, les valeurs par défaut pour l'emplacement et
la taille sont en pixels (px). Vous pouvez aussi spécifier les unités suivantes : pc
(picas), pt (points), in (pouces), mm (millimètres), cm (centimètres), ou %
(pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans
espace : par exemple, 3mm.
Détermine la condition de l'affichage initial pour le calque. Utilisez un
langage de script tel que JavaScript, pour contrôler la propriété de visibilité et
afficher le contenu des calques de façon dynamique. Choisissez une des options
suivantes :
Visib.
La valeur par défaut ne spécifie pas de propriété de visibilité, mais la plupart
des navigateurs l'interprètent comme Hériter.
Hériter prend la propriété de visibilité du parent du calque.
Visible affiche le contenu du calque, quelle que soit la valeur du parent.
Masqué affiche le contenu du calque comme transparent, quelle que soit la
valeur du parent. Remarquez que les calques masqués créés avec LAYER et
ILAYER prennent le même espace que si ils étaient visibles.
Détermine si le calque est un calque CSS ou Netscape. SPAN et DIV créent
des calques CSS ; LAYER et ILAYER créent des calques Netscape.
Balise
Spécifie une image d'arrière-plan pour le calque. Tapez le chemin de
l'image dans la zone de texte ou cliquez sur l'icône de dossier pour rechercher et
sélectionner un fichier d'image.
Image ar-pl
Spécifie une couleur d'arrière-plan pour le calque. Laissez cette
option vide pour spécifier un arrière-plan transparent.
Couleur ar-pl
Utilisation des calques
219
Utilisation de la palette de calques
La palette Calque est une carte graphique des calques de votre document.
Choisissez Fenêtre > Calques pour ouvrir la palette de calque. Les calques sont
affichés comme une liste de noms superposés ; le premier calque créé se trouve au
bas de la liste, le plus récent au sommet. Les calques imbriqués sont affichés
comme des noms connectés à des calques parents. Cliquez sur la flèche
d'agrandissement pour afficher ou masquer les calques imbriqués.
Utilisez la palette Calque pour empêcher les calques de se chevaucher, pour en
modifier la visibilité, pour les imbriquer ou les superposer, et pour en sélectionner
au moins un.
Pour imbriquer un calque dans un autre calque, voir Imbrication des calques,
page 215.
Pour sélectionner un ou plusieurs calques, voir Manipulation des calques,
page 220.
Pour modifier l'ordre de superposition d'un calque, voir Modification de l'ordre
de superposition des calques, page 225.
Pour modifier la visibilité d'un calque, voir Modification de la visibilité des
calques, page 225.
Pour empêcher les calques de se chevaucher, voir Empêcher le chevauchement
des calques, page 228.
Manipulation des calques
Alors que vous travaillez sur la mise en forme, les calques peuvent être activés,
sélectionnés ou redimensionnés. Mettre les calques en mode actif vous permet de
placer un contenu dans ces calques. Sélectionner les calques vous permet de les
aligner, de les repositionner ou de les redimensionner. Redimensionner les calques
vous permet de modifier les dimensions d'un seul calque ou de mettre deux ou
plusieurs calques à la même taille (hauteur et largeur).
Différents inspecteurs de propriétés apparaissent lorsque vous travaillez avec un
seul ou plusieurs calques. Voir Configuration des propriétés de calques, page 217 et
Configuration des propriétés pour plusieurs calques, page 219. De même, les options
de menu de modification des calques ne sont activées que lorsque plusieurs
calques sont sélectionnés.
Pour empêcher les calques de se chevaucher, utilisez l'option Empêcher le
chevauchement. Voir Empêcher le chevauchement des calques, page 228.
220
Chapitre 12
Activation des calques
On active un calque pour pouvoir y placer des objets. Activer un calque place le
curseur dans le calque, met en surbrillance la bordure du calque et affiche la
poignée de sélection, mais cela ne sélectionne pas le calque.
Pour activer un calque :
Cliquez n'importe où dans le calque.
Sélection des calques
Sélectionnez un ou plusieurs calques pour les aligner, donnez-leur tous la même
longueur et la même hauteur, repositionnez-les et ainsi de suite. Pour une liste
d'options complète, voir Configuration des propriétés de calques, page 217.
Pour sélectionner un calque, effectuez l'une des procédures suivantes :
Cliquez sur l'indicateur du calque dans la fenêtre Document qui représente
son emplacement dans le code HTML. Si cet indicateur n'est pas visible,
choisissez Affichage > Éléments invisibles.
Cliquez sur la poignée de sélection d'un calque. Si la poignée n'est pas visible,
cliquez n'importe où dans le calque pour la faire apparaître.
Cliquez sur la bordure d'un calque.
Si aucun calque n'est actif ou sélectionné, cliquez dans un calque tout en
appuyant sur Maj.
Si plusieurs calques sont sélectionnés, cliquez dans un calque tout en appuyant
sur Contrôle-Maj (Windows) ou Commande-Maj (Macintosh). Cette
procédure annulera la sélection des autres calques.
Cliquez sur le nom du calque dans la palette Calque.
Utilisation des calques
221
Pour sélectionner plusieurs calques, effectuez l'une des procédures suivantes :
Appuyez sur Maj tout en cliquant à l'intérieur ou sur la bordure de plusieurs
calques.
Appuyez sur Maj tout en cliquant sur plusieurs noms de calque dans la palette
Calque.
Lorsque plusieurs calques sont sélectionnés, la bordure et les poignées du
dernier calque sélectionné apparaissent en surbrillance noire.
Redimensionnement des calques
Redimensionnez un calque ou plusieurs calques à la fois pour qu'ils aient tous la
même largeur et la même hauteur.
Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas
redimensionner un calque s'il doit en chevaucher un autre. Voir Empêcher le
chevauchement des calques, page 228.
Pour redimensionner un calque, effectuez l'une des procédures suivantes :
Pour redimensionner en faisant glisser, sélectionnez le calque et faites glisser les
poignées de redimensionnement.
Pour redimensionner d'un pixel à la fois, sélectionnez le calque et appuyez sur
Ctrl-flèche (Windows) ou Option-flèche (Macintosh).
Pour redimensionner en alignant sur la grille, Appuyez sur Maj-Ctrl-flèche
(Windows) ou Maj-Option-flèche (Macintosh).
Le redimensionnement d'un calque en modifie la largeur et la hauteur. Cela ne
définit pas la partie visible du contenu du calque. Pour définir la région visible
d'un calque, voir Configuration des propriétés de calques, page 217.
Pour redimensionner plusieurs calques :
1
Dans la fenêtre Document, sélectionnez au moins deux calques.
2
Effectuez l'une des opérations suivantes :
Choisissez Modifier > Calques > Même largeur ou Même hauteur.
Les premiers calques sélectionnés prendront la largeur ou la hauteur du dernier
sélectionné (en surbrillance noire).
222
Chapitre 12
Dans l'inspecteur des propriétés, sous Calques multiples, entrez les valeurs
pour la largeur et la hauteur. Les valeurs sont appliquées à tous les calques
sélectionnés.
Déplacement des calques
Déplacer les calques dans la fenêtre Document paraîtra une opération familière
pour tous ceux qui ont déjà travaillé avec des applications graphiques de base.
Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas déplacer
un calque s'il doit en chevaucher un autre. Voir Empêcher le chevauchement des
calques, page 228.
Pour déplacer un ou plusieurs calques, effectuez l'une des procédures suivantes :
Pour déplacer en faisant glisser, sélectionner les calques et faites glisser la
poignée de sélection du dernier calque sélectionné (en surbrillance noire).
Pour déplacer d'un pixel à la fois, sélectionnez les calques et utilisez les touches
fléchées. Utilisez Maj-Flèche pour déplacer le calque en fonction de
l'alignement courant sur la grille.
Alignement des calques
Utilisez les commandes d'alignement pour aligner un ou plusieurs calques avec la
bordure spécifiée du dernier calque sélectionné.
Lors de l'alignement, il est possible que les calques enfants qui ne sont pas
sélectionnés soient déplacés en même que leur parent. Pour éviter ceci, n'utilisez
pas les calques imbriqués.
Pour aligner au moins deux calques :
1
Sélectionnez les calques.
2
Choisissez Modifier > Calques et sélectionnez une option d'alignement.
Par exemple, si vous sélectionnez Aligner en haut, tous les calques se déplacent
pour que leurs bordures supérieures soient toutes au même niveau que celle du
dernier calque sélectionné (en surbrillance noire).
Alignement des calques sur la grille
Utilisez la grille comme un guide visuel pour le positionnement ou le
redimensionnement des calques dans la fenêtre Document. Si l'alignement est
activé, les calques sont automatiquement positionnés à la position d'alignement la
plus proche lorsqu'ils sont déplacés ou redimensionnés. L'alignement fonctionne
que la grille soit visible ou pas.
Pour afficher la grille, effectuez l'une des procédures suivantes :
Choisissez Affichage > Grille > Afficher.
Choisissez Affichage > Grille > Paramètres et sélectionnez l'option Grille
visible.
Utilisation des calques
223
Pour aligner un calque :
1
Choisissez Affichage > Grille > Aligner sur pour activer l'alignement (ou le
désactiver).
2
Sélectionnez le calque et faites-le glisser. Lorsque vous le relâchez, le calque se
déplace vers la position d'alignement la plus proche.
Pour modifier les paramètres de la grille et de l'alignement :
1
Choisissez Affichage > Grille > Paramètres pour ouvrir la boîte de dialogue.
2
Sélectionnez les options désirées.
Grille visible – rend la grille visible. Cette option fonctionne de pair avec la
commande Afficher (Affichage > Grille > Afficher).
Espacement – définit la distance entre les indicateurs de grille. Saisissez un
nombre d'unités, puis choisissez pixels, pouces ou centimètres dans le menu
contextuel des unités.
Couleur – spécifie la couleur des marqueurs de la grille. La couleur par défaut
est bleu clair.
Affichage – spécifie un affichage de grille sous forme de lignes ou de points.
Alignement – active ou désactive l'alignement. Cette option fonctionne de
pair avec la commande Aligner sur (Affichage > Grille > Aligner sur).
Aligner tous les – spécifie une unité d'alignement. Saisissez un nombre
d'unités dans la zone Aligner tous les et choisissez pixels, pouces ou
centimètres dans le menu déroulant des unités. La valeur par défaut est
5 pixels.
Pour que les calques soient alignés sur la grille, les unités de pixels de la grille et
de l'alignement doivent être les mêmes. Par exemple, si l'espacement est défini
à 50 pixels, configurez "Aligner tous les" à 50 pixels.
3
224
Chapitre 12
Cliquez sur OK.
Modification de l'ordre de superposition des
calques
Utilisez l'inspecteur des propriétés ou la palette Calque pour modifier l'ordre de
superposition des calques. Le premier calque de la liste est celui qui est au premier
plan.
En code HTML, l'index Z détermine l'ordre dans lequel les calques se dessinent
dans un navigateur. Vous pouvez modifier l'index Z de chaque calque à l'aide de
l'inspecteur des propriétés ou de la palette Calque, mais la procédure suivante est
beaucoup plus simple.
Pour modifier l'ordre de superposition des calques :
1
Choisissez Fenêtre > Calques pour ouvrir la palette de calques.
2
Sélectionnez un calque dans la palette et faites-le glisser vers le haut ou vers le
bas.
3
Relâchez le bouton de la souris lorsqu'une ligne apparaît entre les calques.
Modification de la visibilité des calques
Alors que vous travaillez sur votre document, vous pouvez afficher ou masquer les
calques pour voir comment la page apparaîtra sous différentes conditions. Utilisez
la palette de calques pour modifier la visibilité des calques. Utilisez le volet
Préférences des calques pour définir la visibilité par défaut des nouveaux calques.
Voir Configuration des préférences de calques, page 216.
Pour modifier la visibilité d'un calque :
1
Choisissez Fenêtre > Calques pour ouvrir la palette de calques.
2
Cliquez sur la colonne de l'icône en forme d'œil pour modifier la visibilité.
Un œil ouvert signifie que le calque est visible. Un œil fermé signifie que le
calque est invisible. S'il n'y a pas d'icône en forme d'œil, le calque hérite de la
visibilité de son parent. Pour les calques non imbriqués, le parent est le corps
du document, lequel est toujours visible.
Pour modifier la visibilité de tous les calques à la fois, cliquez sur l'en-tête
d'icône en forme d'œil qui se trouve en haut de la colonne.
Utilisation des calques
225
Utilisation des calques pour concevoir des
tableaux
Les calques sont utilisés pour positionner le contenu d'une page et il est plus facile
de manipuler et de travailler avec des calques qu'avec des cellules de tableau. Vous
pouvez utiliser les calques pour créer rapidement des pages complexes, puis les
convertir en tableau pour qu'ils soient utilisables dans les navigateurs 3.0. Vous
pouvez aussi passer des calques au tableau et vice versa, pour peaufiner la mise en
forme et optimiser la présentation de la page.
Si vous ne visez que les navigateurs 4.0 et plus récents, vous pouvez utiliser une
combinaison de tableaux et de calques et même animer vos calques. Voir
Animation avec HTML dynamique, page 286.
Remarque: Si vous voulez générer des fichiers compatibles avec 3.0 ou 4.0 à partir de votre
fichier courant, utilisez les options de conversion du menu Fichier. Voir Conversion des
navigateurs de 3.0 à 4.0, page 229.
Pour passer en mode d'édition de calque :
1
Choisissez Modifier > Mise en forme > Repositionner le contenu à l'aide des
calques.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez les options désirées.
Afficher la grille et Aligner sur la grille – vous permettent d'utiliser une grille
pour vous aider à positionner les calques. Voir Alignement des calques sur la
grille, page 223.
– limite la position des calques
lorsqu'ils sont créés, déplacés et redimensionnés afin d'éviter tout
chevauchement. Voir Empêcher le chevauchement des calques, page 228.
Empêcher le chevauchement des calques
Afficher la palette Calque – affiche la palette des calques. Voir Utilisation de la
palette de calques, page 220.
226
Chapitre 12
3
Cliquez sur OK.
Les tableaux sont convertis en calques à l'intérieur du fichier. Les cellules vides
ne sont pas converties en calques. Le contenu extérieur aux tableaux est
également placé dans des calques.
Pour passer en mode d'édition de tableau :
1
Choisissez Modifier > Mise en forme > Convertir Calques vers tableau.
2
Dans la boîte de dialogue qui s'affiche, sélectionnez les options désirées pour la
mise en forme du tableau.
Le plus exact – crée une cellule de tableau pour chaque calque, et ajoute les
cellules nécessaires pour préserver l'espace entre les calques.
Le plus petit : Réduire les cellules vides – indique que les calques doivent avoir
leurs bords alignés s'il sont positionnés à l'intérieur du nombre de pixels
défini. Si cette option est sélectionnée, le tableau qui en résulte contiendra
moins de lignes et moins de colonnes vides.
Utiliser des GIF transparents – remplit la dernière ligne du tableau avec des
GIF transparents. Cela garantit que l'affichage du tableau sera le même dans
tous les navigateurs.
Si cette option est activée, il est impossible d'éditer le tableau qui en résulte en
faisant glisser ses colonnes. Si cette option est désactivée, le tableau ne
contiendra pas de GIF transparent, mais il peut s'afficher légèrement
différemment selon les navigateurs.
Centrer sur la page
– centre le tableau dans la page.
Si cette option est désactivée, le tableau est justifié à gauche.
3
Sélectionnez les options de grille et les outils pour la mise en forme, puis
cliquez sur OK.
Utilisation des calques
227
Empêcher le chevauchement des calques
Étant donné que les cellules d'un tableau ne peuvent pas se chevaucher,
Dreamweaver ne peut pas créer de tableau à partir de calques qui se chevauchent.
Si vous prévoyez de convertir les calques d'un document en tableaux pour qu'il y
ait compatibilité avec les navigateurs 3.0, utilisez l'option Empêcher le
chevauchement afin que le déplacement et le positionnement des calques soient
restreints et qu'ainsi les calques ne se chevauchent pas.
Pour empêcher les calques de se chevaucher :
Choisissez Affichage > Empêcher le chevauchement des calques, ou activez
l'option Empêcher le chevauchement dans la palette des calques.
Si cette option est activée, aucun calque ne peut être créé, déplacé ou
redimensionné au-dessus d'un calque existant, ni y être imbriqué. Si cette
option est activée après que des calques se chevauchant aient été créés, faites
glisser le calque du dessus pour supprimer le chevauchement.
Si cette option et celle d'alignement sont activées, aucun calque ne sera aligné
sur la grille si cela doit causer un chevauchement de calques. Par contre, le
calque sera aligné avec le bord du calque le plus proche.
Remarque: Certaines actions ne vous empêchent pas de faire chevaucher les calques, même
lorsque l'option Empêcher le chevauchement est activée. Si vous insérez un calque à partir du
menu, que vous entrez des nombres dans l'inspecteur de propriétés ou que vous
repositionnez des calques en éditant le code source HTML dans l'inspecteur HTML, vous
pouvez provoquer le chevauchement ou l'imbrication des calques alors que l'option est
activée. Si cela se produit, faites glisser les calques qui se chevauchent dans la fenêtre
Document afin de les séparer.
228
Chapitre 12
Conversion des navigateurs de 3.0 à 4.0
Utilisez les options de conversion du menu Fichier pour créer une version
compatible avec un navigateur 3.0 d'une page qui utilise des calques, ou pour
convertir un document qui utilise des tableaux en un document qui utilise des
calques. Dans chaque cas, Dreamweaver crée un fichier converti séparé et conserve
l'original.
En général, vous ne devriez accomplir ces conversions que lorsque vous êtes
totalement satisfait de votre fichier original, car vous devrez répéter l'opération de
conversion chaque fois que vous changerez le fichier original.
Remarque: Si vous voulez utiliser des calques pour la mise en forme d'une page destinée
aux navigateurs 3.0, utilisez les commandes Mise en forme du menu Modifier, afin de
convertir les tableaux en calques sans créer de fichier séparé. Voir Utilisation des calques
pour concevoir des tableaux, page 226.
Pour convertir un fichier destiné aux navigateurs 3.0 :
1
Choisissez Fichier > Convertir > Navigateur compatible avec 3.0.
2
Dans la boîte de dialogue qui s'affiche, choisissez la conversion des calques en
tableau, des styles CSS en indicateurs HTML (styles des caractères) ou les
deux.
3
Cliquez sur OK.
Dreamweaver ouvre le fichier converti dans une nouvelle fenêtre sans titre.
Tous les calques sont remplacés par un seul tableau qui préserve le
positionnement d'origine.
Remarque: Ni les calques qui se chevauchent, ni ceux qui se trouvent en dehors de la
page (à gauche ou en haut) ne peuvent être convertis.
L'indicateur CSS est remplacé quand cela est possible par des styles de
caractère HTML. Tout indicateur CSS qui ne peut pas être converti en
HTML est supprimé. Voir Tableau de conversion de code CSS en HTML,
page 183 pour plus de détails sur les styles qui sont convertis et ceux qui sont
supprimés.
Le code du scénario qui anime les calques est supprimé. Le code du scénario
qui n'est pas relatif aux calques, (par exemple, les comportements ou les
modifications de la source de l'image) sera exécuté comme prévu. Le scénario
est automatiquement réinitialisé au cadre 1.
Utilisation des calques
229
Pour convertir des tableaux en calques :
Choisissez Fichier > Convertir > Tableaux en calques.
Dreamweaver ouvre le fichier converti dans une nouvelle fenêtre sans titre.
Chaque cellule de tableau est convertie en un calque séparé et les cellules vides
ne sont pas converties. Le contenu extérieur aux tableaux est placé dans un
seul calque. Utilisez les comportements, les scénarios et CSS pour que votre
page 3.0 auparavant statique soit plus dynamique et plus intéressante.
230
Chapitre 12
13
CHAPITRE 13
Utilisation de cadres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilisation de cadres – Vue d’ensemble
Les cadres divisent une page web de façon à ce que différents fichiers puissent être
chargés à plusieurs endroits sur une même page. De manière générale, les cadres
définissent une zone de navigation et de contenu pour une page.
Lorsque vous divisez un document en cadres, Dreamweaver crée un fichier de
définition des cadres et des documents sans titre pour chacun des nouveaux
cadres. Ce que l'utilisateur voit comme une page web unique comportant deux
cadres, est en fait constitué de trois fichiers séparés : le fichier de définition des
cadres, et deux fichiers constituant le contenu de chaque cadre.
Un jeu de cadres et un fichier qui définit une page web selon des cadres. Le jeu de
cadres stocke les informations sur la taille et l'emplacement des cadres de la page,
ainsi que les noms des fichiers qui devraient être chargés comme contenu de
chacun des cadres.
Vous pouvez modifier les propriétés des cadres et des jeux de cadres,
redimensionner les cadres et utiliser des liens pour contrôler leur contenu.
Lorsque Affichage > Bordures de cadre est désactivée, le jeu de cadres apparaît
exactement comme dans un navigateur. Lorsque les bordures de cadres sont
affichées, Dreamweaver ajoute de l'espace autour du document pour la bordure et
élargit les petites bordures pour qu'elles soient plus faciles à sélectionner et à faire
glisser.
231
Création de cadres
Créez un cadre en faisant glisser une bordure de cadre, ou en choisissant les
commandes dans le menu Modifier.
Pour créer de nouveau cadres, procéder d'une des façons suivantes :
Choisissez Modifier > Jeu de cadres > Fractionner le cadre à gauche, à droite,
vers le haut ou vers le bas.
Choisissez Affichage > Bordures de cadre et faites glisser la bordure d'un cadre
dans la fenêtre Document, tout en appuyant sur Alt (Windows) ou sur Option
(Macintosh), afin de scinder le cadre verticalement ou horizontalement. Faites
glisser l'un des coins pour fractionner le cadre courant en quatre nouveaux
cadres.
Pour supprimer un cadre :
Faites glisser la bordure de ce cadre à l'extérieur de la page ou vers la bordure
du cadre parent.
Création d'un jeu de cadres imbriqués
Scinder un cadre existant entraîne la création d'un nouveau jeu de cadres à
l'intérieur du fichier du jeu de cadres courant. Un jeu de cadres à l'intérieur d'un
autre jeu de cadres est appelé un jeu de cadres imbriqué.
Pour créer un jeu de cadres imbriqué :
1
Placez le curseur à l'intérieur d'un cadre existant.
2
Choisissez Modifier > Jeu de cadres > Fractionner le cadre vers le haut, vers le
bas, à gauche, ou à droite.
Il est également possible, tout en appuyant sur Alt (Windows) ou sur Option
(Macintosh), de faire glisser la bordure d'un cadre dans la fenêtre Document, afin
de fractionner le cadre verticalement ou horizontalement.
232
Chapitre 13
Pour voir le code HTML, sélectionnez le jeu de cadres parent en cliquant sur sa
bordure, puis ouvrez l'inspecteur HTML. Le code ressemble à ceci :
<frameset cols="207,397">
<frame src="file:///C|/RACINE/UntitledFrame-2" name="Left">
<frameset rows="270,268">
<frame src="file:///C|/RACINE/UntitledFrame-3" name="TopRight">
<frame src="/temp.htm" name="BottomRight">
</frameset>
</frameset>
Vous pouvez voir comment le nouveau jeu de cadres est mis en retrait à l'intérieur
du jeu parent.
Enregistrement des fichiers dans les cadres et les jeux de cadres
Une page avec des cadres inclut plusieurs fichiers. Choisissez l'option appropriée
pour enregistrer un fichier à l'intérieur d'un cadre, le fichier de jeu de cadre, ou
tous les fichiers d'un coup.
Pour enregistrer des fichiers dans un jeu de cadres, choisissez l'une des options
suivantes :
Pour enregistrer un document à l'intérieur d'un cadre, placez le curseur dans le
cadre et choisissez Fichier > Enregistrer.
Pour enregistrer un fichier de jeu de cadres, choisissez Fichier > Enregistrer jeu
de cadres, ou Fichier > Enregistrer jeu de cadres sous.
Pour enregistrer tous les fichiers ouverts en une seule opération, choisissez
Fichier > Enregistrer tout.
Sélection d’un cadre ou jeu de cadres
Sélectionnez des cadres ou des jeux de cadres pour modifier leurs propriétés.
L'inspecteur de propriétés affiche les propriétés du cadre ou du jeu de cadres
sélectionné. Voir À propos des propriétés de cadre et jeu de cadre, page 235.
Pour sélectionner un cadre, procéder d'une des façons suivantes :
Alt-cliquez (Windows) ou Maj-Option-cliquez (Macintosh) dans un cadre.
Choisissez Fenêtre > Cadres, puis cliquez sur un cadre dans l'inspecteur de
cadres.
Utilisation de cadres
233
Pour sélectionner un jeu de cadres, procéder d'une des façons suivantes :
Cliquez sur une bordure de cadre dans la fenêtre Document.
Cliquez sur la bordure encadrant les cadres dans l'inspecteur de cadres.
Lorsqu'un jeu de cadres est sélectionné, toutes les bordures de ses cadres sont
soulignées par une ligne pointillée dans la fenêtre Document.
Pour déplacer la sélection vers le cadre suivant, procédez d'une des façons
suivantes :
Appuyez en même temps sur une touche de direction et sur Alt (Windows),
ou Commande (Macintosh), pour déplacer la sélection vers le cadre suivant.
Appuyez en même temps sur la touche de direction Haut et sur Alt
(Windows), ou Commande (Macintosh), pour déplacer la sélection vers le jeu
de cadres parent.
Appuyez en même temps sur la touche de direction Bas et sur Alt (Windows),
ou Commande (Macintosh), pour déplacer la sélection vers le cadre enfant.
Si l'inspecteur HTML est ouvert, il suit la sélection de la fenêtre Document
courante dans le code HTML.
Utilisation de l’inspecteur de cadres
L'inspecteur de cadres affiche les jeux de cadres dans le document courant et vous
permet de sélectionner les cadres ou jeux de cadres, pour en modifier les
propriétés.
L'inspecteur de cadres affiche également la hiérarchie de la structure du jeu de
cadres, de façon non apparente dans la fenêtre Document. Les jeux de cadres ont
des bordures tridimensionnelles épaisses. Les cadres ont de fines lignes grises et
leur nom est affiché.
Pour afficher l'inspecteur de cadres :
Choisissez Fenêtre > Cadres.
Pour sélectionner un cadre dans l'inspecteur de cadres :
Cliquez sur un cadre dans l'inspecteur de cadres.
Pour sélectionner un jeu de cadres dans l'inspecteur de cadres :
Cliquez sur la bordure encadrant les cadres dans l'inspecteur de cadres.
Lorsqu'un jeu de cadres est sélectionné, toutes les bordures de ses cadres sont
soulignées par une ligne pointillée dans la fenêtre Document.
234
Chapitre 13
À propos des propriétés de cadre et jeu de
cadre
Deux jeux de propriétés contrôlent l'apparence et les propriétés des documents
avec cadres.
Les propriétés des cadres déterminent le nom du cadre, le fichier source, les
marges, le défilement, et le redimensionnement des cadres individuellement.
Les propriétés des jeux de cadres contrôlent les dimensions des cadres, ainsi
que la couleur et la largeur des bordures entre les cadres.
(Choisissez Fenêtre > Propriétés pour afficher l'inspecteur de propriété s'il n'est
pas déjà ouvert). Voir Utilisation de cadres – Vue d’ensemble, page 231 pour plus de
détails sur les cadres.
Pour afficher les propriétés de cadre, procéder d'une des façons suivantes :
Alt-cliquez (Windows) ou Maj-Option-cliquez (Macintosh) un cadre.
Cliquez sur un cadre dans l'inspecteur de cadres.
Voir Configuration des propriétés de cadres, page 235.
Pour afficher les propriétés de jeu de cadres, procéder d'une des façons suivantes :
Cliquez sur une bordure de cadre dans la fenêtre Document.
Cliquez sur la bordure encadrant les cadres dans l'inspecteur de cadres.
Voir Configuration des propriétés de jeu de cadres, page 236.
Configuration des propriétés de cadres
Pour afficher les propriétés des cadres, cliquez sur un cadre tout en appuyant sur
Alt (Windows) ou sur Option (Macintosh). Afin de voir toutes les propriétés des
cadres suivantes, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit
de l'inspecteur des propriétés :
Cadre Détermine le nom du cadre courant à utiliser pour les références du script et
de la cible d'hyperlien. Le nom du cadre doit être en un seul mot. Les caractères de
soulignement (_) sont autorisés, mais pas les traits d'union (-), les points (.), ou les
espaces.
Src Détermine
le document source du cadre. Entrez un nom de fichier ou cliquez
sur l'icône du dossier pour trouver le fichier source et le sélectionner. Vous pouvez
aussi ouvrir un fichier dans un cadre, en plaçant le curseur dans le cadre, et en
choisissant Fichier > Ouvrir dans un cadre.
Détermine si la barre de défilement apparaît lorsqu'il n'y a pas assez de
place pour afficher le contenu du cadre courant. La valeur par défaut de la plupart
des navigateurs est Auto.
Défiler
Utilisation de cadres
235
Ne pas redimens. Empêche l'utilisateur de faire glisser la bordure du cadre courant
et de le redimensionner. Vous pouvez toujours redimensionner les cadres dans la
fenêtre Document, mais pas dans un navigateur lorsque cette option est activée.
Bordures Contrôle la bordure du cadre courant. Les options sont Oui, Non et Par
défaut. Ce choix annule la configuration de bordure définie pour le jeu de cadres
(consultez Propriétés des jeux de cadres). La valeur par défaut de la plupart des
navigateurs est Oui. Pour désactiver une bordure, tous les cadres adjacents doivent
être paramétrés à Non (ou paramétrés à Par défaut, avec le jeu de cadres parent
paramétré à Non).
Couleur de bordure Définit une couleur de bordure pour toutes les bordures
adjacentes au cadre courant. Cette configuration annule la couleur de bordure
définie pour le jeu de cadres (voir Configuration des propriétés de jeux de cadres).
Définit la largeur des marges de droite et de gauche en pixels
(l'espace entre la bordure du cadre et le contenu).
Largeur de marge
Définit la hauteur des marges en haut et en bas du cadre en
pixels (l'espace entre la bordure du cadre et le contenu).
Hauteur de marge
Configuration des propriétés de jeu de cadres
Pour afficher les propriétés d'un jeu de cadre, cliquez sur sa bordure. Pour voir
toutes les propriétés des jeux de cadres, cliquez sur la flèche d'agrandissement,
dans le coin inférieur droit de l'inspecteur des propriétés.
Bordures Contrôle la bordure des cadres compris dans le jeu de cadres courant.
Choisissez Oui pour afficher les bordures en 3D et en gris, choisissez Non pour les
afficher en 2D et grises, ou choisissez Par défaut pour laisser le navigateur
déterminer leur affichage. La valeur par défaut de la plupart des navigateurs
est Oui.
Larg. de bordure
Spécifie la largeur des bordures du jeu de cadres courant.
Couleur de bordure Définit une couleur de bordure pour toutes les bordures dans
le jeu de cadres courant. Ce paramètre peut être remplacé par une couleur de
bordure spécifiée pour un cadre particulier.
Valeur Spécifie la taille de la colonne ou de la ligne sélectionnée. Voir Spécification
des tailles des cadres, page 237.
Spécifie si la ligne ou la colonne sélectionnée est représentée par une taille
fixe (en pixels), un pourcentage de la fenêtre du navigateur, ou doit être élargie/
rétrécie afin de remplir l'espace de la fenêtre inutilisé (relatif ). Voir Spécification
des tailles des cadres, page 237.
Unités
Identifie la ligne ou la colonne sélectionnée. Cliquez sur les
onglets de gauche pour sélectionner un ligne, et sur les onglets du haut pour
sélectionner une colonne. Voir Spécification des tailles des cadres, page 237.
Sélection lig./col.
236
Chapitre 13
Spécification des tailles des cadres
Déplacez la bordure d'un cadre dans la fenêtre de documents pour déterminer les
tailles approximatives des cadres, puis utilisez l'inspecteur de propriétés pour
spécifier comment les navigateurs doivent allouer l'espace aux cadres lorsque
l'espace disponible est insuffisant pour afficher tous les cadres à leur taille
maximum.
Pour spécifier les tailles de cadre :
1
Cliquez sur la bordure d'un cadre pour sélectionner le jeu de cadres.
Choisissez Affichage > Bordures de cadre si les bordures ne sont pas visibles.
2
Dans l'inspecteur de propriétés, cliquez sur la flèche d'agrandissement pour
voir toutes les propriétés.
3
Cliquez sur l'onglet en haut d'une colonne, ou à gauche d'une ligne, afin de
sélectionner ce que vous voulez modifier.
4
Pour spécifier comment l'espace est alloué lorsque la fenêtre du navigateur est
redimensionnée, entrez un nombre dans la boîte Valeur, et faites votre choix à
partir des options Unités suivantes :
Pixels définit la taille de la colonne ou de la lignée sélectionnée à une valeur
absolue. Cette option constitue le choix idéal pour un cadre qui devrait
toujours être de la même taille, tel que la barre de navigation. Si vous
définissez une option d'unité différente pour les autres cadres, l'espace leur sera
alloué seulement lorsque les cadres spécifiés en pixels seront en pleine taille.
spécifie que le cadre courant doit correspondre à un pourcentage
par rapport à son jeu de cadres. Les cadres spécifiés avec des unités définies en
Pourcentage se voient leur espace alloué après les unités définies en Pixels, mais
avant les cadres dont les unités sont Relative.
Pourcentage
spécifie que l'espace alloué au cadre courant est proportionnel aux
autres cadres. L'espace des cadres dont les unités sont définies en tant que
relatives, est alloué après celui dont les unités sont en pixels et en pourcentage ;
cet espace constitue tout l'espace restant dans la fenêtre du navigateur.
Relative
Utilisation de cadres
237
Configuration des bordures de cadres et de jeu de cadre
Vous pouvez spécifier comment les bordures de cadre et de jeu de cadres
apparaissent sur la page. Lorsque vous spécifiez des options de bordure pour un
cadre, l'option de jeu de cadre correspondante est ignorée.
Pour définir des bordures de cadre :
1
Sélectionnez le cadre en cliquant tout en maintenant la touche Alt (Windows)
enfoncée ou Maj-Option-cliquez (Macintosh) ou cliquez sur un cadre dans
l'inspecteur de cadres.
2
Définissez les options suivantes :
Bordures contrôle la bordure des cadres courants. Les options sont Oui, Non
et Par défaut. La valeur par défaut de la plupart des navigateurs est Oui. Pour
désactiver une bordure, tous les cadres adjacents doivent être paramétrés à
Non (ou paramétrés à Par défaut, avec le jeu de cadres parent paramétré à
Non).
Couleur de bordure définit une couleur de bordure pour toutes les bordures
adjacentes au cadre courant.
Pour définir des bordures de jeu de cadres :
1
Sélectionnez le jeu de cadres en cliquant sur la bordure d'un cadre dans la
fenêtre de document, ou cliquez sur la bordure qui entoure les cadres dans
l'inspecteur de cadres.
2
Définissez les options suivantes :
Bordures contrôle la bordure des cadres compris dans le jeu de cadres courant.
Choisissez Oui pour afficher les bordures en 3D et en couleur, choisissez Non
pour les afficher en 2D et grises, ou choisissez Par défaut pour laisser le
navigateur déterminer leur affichage. La valeur par défaut de la plupart des
navigateurs est Oui.
Couleur de bordure définit une couleur de bordure pour toutes les bordures
dans le jeu de cadres courant. Ce paramètre peut être remplacé par une
couleur de bordure spécifiée pour un cadre particulier.
spécifie la largeur des bordures du jeu de cadres courant.
Entrez 0 pour spécifier aucune bordure.
Larg. de bordure
238
Chapitre 13
Modification de la couleur d'arrière-plan d'un cadre
Vous modifiez la couleur d'arrière-plan d'un cadre en définissant la couleur
d'arrière-plan du document dans le cadre.
Pour changer la couleur d'arrière-plan d'un document dans un cadre :
1
Effectuez l'une des opérations suivantes :
Placez le curseur dans le cadre et choisissez Modifier > Propriétés de la page.
Cliquez dans le cadre avec le bouton droit de la souris (Windows), ou en
maintenant la touche Contrôle enfoncée (Macintosh), puis choisissez
Propriétés de la page à partir du menu contextuel.
2
Cliquez dans la zone de couleurs d'arrière-plan pour sélectionner une couleur.
Contrôle du contenu d'un cadre au moyen de
liens
Utilisez un lien dans un cadre pour modifier le contenu d'un autre cadre.
Pour créer un lien qui modifie le contenu d'un autre cadre :
1
Cliquez sur un cadre tout en appuyant sur Alt (Windows) ou sur Option
(Macintosh) pour le sélectionner.
2
Nommez le cadre en entrant un nom dans le champ Cadre de l'inspecteur de
propriétés.
3
Répétez les étapes 1 et 2 pour chaque cadre dans le jeu de cadres.
4
Sélectionnez du texte ou un objet, puis entrez le fichier auquel vous voulez le
lier, dans la boîte Lien de l'inspecteur de propriétés.
Pour spécifier un ancre dans l'autre fichier, entrez un signe dièse (#) avant le
nom de l'ancre. Voir Établissement d'un lien vers une ancre nommée, page 111.
5
Cliquez sur la flèche d'agrandissement dans le coin inférieur droit de
l'inspecteur de propriétés, puis choisissez le nom du cadre cible à partir du
menu contextuel Cible.
Utilisation de cadres
239
Création de contenu sans cadre
Dreamweaver vous permet de spécifier le contenu à afficher dans les anciens
navigateurs et ceux basés-texte qui ne prennent pas en charge les cadres.
Dreamweaver insère le contenu que vous spécifiez dans le fichier de jeu de cadre
au moyen d'une instruction similaire à ceci :
<noframes><body bgcolor="#FFFFFF">
Ceci est le contenu sans cadre.
</body></noframes>
Lorsqu'un navigateur ne supportant pas les cadres charge le fichier de jeu de
cadres, il n'affiche que le contenu sans cadre NOFRAMES.
Pour définir un contenu NOFRAMES :
1
Choisissez Modifier > Jeu de cadres > Éditer le contenu sans cadres.
Dreamweaver efface la fenêtre de document, et les mots "Contenu sans cadre"
apparaissent en haut du corps.
240
Chapitre 13
2
Créer le contenu sans cadre dans la fenêtre de document.
3
Choisissez Modifier > Jeu de cadres > Éditer le contenu sans cadres de nouveau
pour revenir à l'affichage normal du document de jeu de cadres.
14
CHAPITRE 14
Création de formulaires
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Création de formulaires – Vue d’ensemble
Les formulaires vous permettent de recueillir des informations sur les utilisateurs.
Les utilisations courantes comprennent les enquêtes, les bons de commande et les
interfaces de recherche.
Pour le fonctionnement des formulaires, deux éléments sont requis : le code
HTML décrivant le formulaire et, soit une application côté serveur, soit un script
côté client pour traiter les informations que l'utilisateur entre dans les champs du
formulaire.
Vous pouvez utiliser Dreamweaver pour créer des formulaires, leur ajouter des
objets et pour valider (à l'aide des comportements) les informations entrées par
l'utilisateur. Vous devez utiliser un éditeur de texte pour écrire un script, ou une
application pour traiter les données du formulaire, (Perl est le langage de script le
plus commun pour le traitement des formulaires ; C, Java et même JavaScript sont
aussi des options).
Vos formulaires Dreamweaver peuvent inclure des objets standard, tels que des
champs de texte, des boutons, des champs d'image, des cases à cocher, des boutons
radio, des listes ou des menus, des champs de fichier et des champs masqués.
Dreamweaver prend également en charge les types d'entrée qu'il ne reconnaît pas,
en affichant les propriétés des champs génériques dans l'inspecteur de propriétés.
Voir Propriétés des champs génériques dans les pages d’aide de Dreamweaver.
241
Création d'un formulaire
Utilisez soit la commande Insertion > Formulaire, soit le volet Formulaire de la
palette d'objets pour créer un formulaire.
Pour créer un formulaire
1
Effectuez l'une des opérations suivantes :
Placez le curseur à l'endroit où vous souhaitez que le formulaire apparaisse et
choisissez Insertion > Formulaire.
Placez le curseur à l'endroit où vous souhaitez que le formulaire apparaisse et
cliquez sur le bouton Insérer un formulaire dans le volet Formulaire de la
palette d'objets.
Faites glisser le bouton d'insertion de formulaire vers l'emplacement désiré sur
la page.
S'il n'y a aucun résultat visible, vérifiez bien que l'option Affichage > Éléments
invisibles est activée.
2
Sélectionnez le formulaire et définissez ses propriétés dans l'Inspecteur.
Choisissez une des options suivantes :
Le champ Formulaire attribue un nom au formulaire. Ceci permet de le
contrôler à l'aide d'un langage de script, tel JavaScript ou VBScript.
Le champ Action identifie l'application côté serveur qui traite les informations
du formulaire, spécifiée en tant qu'URL. Entrez le chemin de l'application ou
cliquez sur l'icône de dossier pour trouver le fichier.
Le menu Méthode
3
définit la façon dont les données sont traitées.
Dans l'inspecteur des propriétés, choisissez l'une des méthodes suivantes pour
définir la façon dont les données sont traitées :
La méthode GET (acquérir) ajoute des valeurs de formulaire à l'URL et envoie
une instruction GET au serveur. Les URL étant limitées à 8192 caractères,
n'utilisez pas cette méthode pour les longs formulaires.
envoie les valeurs du formulaire dans le corps du
message, puis envoie une instruction POST au serveur.
La méthode POST (poster)
La valeur par défaut est la méthode de valeur par défaut du navigateur
(généralement GET).
242
Chapitre 14
Ajout d'un objet à un formulaire
Une fois que vous avez ajouté un objet à un formulaire, vous pouvez définir ses
propriétés à l'aide de l'Inspecteur des propriétés.
Pour ajouter un objet à un formulaire :
1
Effectuez l'une des opérations suivantes :
Placez le curseur à l'intérieur de la limite du formulaire et choisissez un objet à
partir du menu Insertion > Objet de formulaire.
Placez le curseur à l'intérieur du formulaire et cliquez sur un bouton d'objet
dans le volet Formulaires de la palette Objets.
Faites glisser un bouton d'objet vers l'emplacement désiré à l'intérieur du
formulaire.
2
Spécifiez les propriétés de l'objet dans l'inspecteur des propriétés, (choisissez
Fenêtre > Propriétés pour afficher l'inspecteur des propriétés s'il n'est pas déjà
ouvert).
acceptent tout type de texte, alphabétique ou numérique.
Le texte saisi peut être affiché comme une ou plusieurs lignes, ou sous la forme
d'astérisques ou de puces (pour la protection des mots de passe). Voir
Propriétés du champ de texte dans les pages d’aide de Dreamweaver.
Les champs de texte
des tâches standard, telles que l'envoi ou la
réinitialisation des formulaires, ou des fonctions personnalisées. Vous pouvez
saisir une étiquette personnalisée pour un bouton ou utiliser l'une des
étiquettes prédéfinies. Voir Propriétés de bouton dans les pages d’aide de
Dreamweaver.
Les boutons exécutent
peuvent être utilisés à la place des boutons d'envoi. Voir
Propriétés du champ d'image dans les pages d’aide de Dreamweaver.
Les champs d'image
Les cases à cocher acceptent plusieurs réponses au sein d'un seul groupe
d'options. Voir Propriétés de case à cocher dans les pages d’aide de
Dreamweaver.
représentent des choix exclusifs. La sélection d'un bouton à
l'intérieur d'un groupe entraîne la désélection de tous les autres. Voir Propriétés
des boutons radio dans les pages d’aide de Dreamweaver.
Les boutons radio
Les menus de liste contiennent une liste des valeurs parmi lesquelles les
utilisateurs peuvent choisir. L'objet peut se présenter sous la forme d'un menu
contextuel, dans lequel les valeurs de la liste apparaissent uniquement lorsque
vous cliquez dessus (pour une réponse unique), ou sous la forme d'une zone de
liste affichant toujours les valeurs dans une liste déroulante (pour plusieurs
réponses). Voir Propriétés de liste/menu dans les pages d’aide de Dreamweaver.
Création de formulaires
243
permettent aux utilisateurs de parcourir les fichiers sur
leurs disques durs et de les télécharger comme des données de formulaire. Voir
Propriétés du champ Fichier dans les pages d’aide de Dreamweaver.
Les champs de fichier
Les champs masqués vous permettent de stocker des informations, (telles que
le destinataire des données du formulaire ou le sujet du formulaire) qui ne sont
pas destinées à l'utilisateur, mais qui seront utilisées par l'application qui traite
le formulaire. Voir Propriétés du champ masqué dans les pages d’aide de
Dreamweaver.
3
Entrez une étiquette ou un texte descriptif, si désiré, à côté de l'objet.
Vous pouvez mettre en forme le texte des étiquettes d'objets de formulaire. Pour
plus de détails, voir Modification des caractéristiques de la police dans les pages
d’aide de Dreamweaver.
Traitement des formulaires
Les formulaires sont traités par le script ou par l'application spécifiée dans
l'attribut ACTION de la balise FORM. Sélectionnez un formulaire et observez
l'inspecteur de propriétés pour voir quelle est l'action associée.
Les formulaires les plus simples utilisent JavaScript ou VBScript pour traiter les
données du formulaire côté client (par opposition à l'envoi des données du
formulaire au serveur pour qu'elles soient traitées). Par exemple, un petit
formulaire en bas de la page pourrait contenir deux boutons radio intitulés Oui et
Non, plus un bouton Envoyer. L'action du formulaire pourrait être une fonction
JavaScript définie dans la partie HEAD du document, qui passerait à tel ou tel
document selon que l'utilisateur sélectionne Oui ou Non :
function processForm(){
if (document.forms[0].elements[0].checked){
window.location.href = “réponseOui.html”;
}else{
window.location.href = “réponseNon.html”;
}
}
244
Chapitre 14
Pour utiliser une fonction JavaScript côté client comme action du formulaire :
1
Sélectionnez un formulaire.
2
Dans l'inspecteur de propriétés, tapez javascript: suivi du nom de la fonction
dans le champ Action: par exemple, javascript:processForm(). Ne placez pas
d'espace entre les deux points et le nom de la fonction.
Vous pouvez exécuter de nombreuses tâches de traitement de formulaire à l'aide
du script côté client, mais vous ne pouvez pas enregistrer les données entrées par
l'utilisateur ni les envoyer à quelqu'un d'autre. Pour les envoyer, vous avez besoin
d'une application côté client telle que le script Common Gateway Interface
(CGI). Les scripts CGI peuvent être écrits avec le langage Perl, C, Java ou un autre
langage de programmation. Plusieurs sites du web offrent des scripts CGI que
vous pouvez utiliser tels quels ou modifier selon vos besoins. Voir Ressources
HTML des pages d’aide de Dreamweaver. Vous pouvez aussi demander à votre
fournisseur d'accès à Internet ou à votre équipe web si des scripts CGI sont déjà
configurés pour être exécutés sur le serveur que vous utilisez.
Création de formulaires
245
246
Chapitre 14
15
CHAPITRE 15
Réutilisation des éléments d’une page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Réutilisation des éléments d'une page – Vue
d’ensemble
Pour la plupart des sites web, le contenu apparaît sur chaque page du site, (tel
qu'un en-tête ou un bas de page) ou seulement sur quelques pages devant être
souvent mises à jour (telles que les gros titres ou les soldes).
Dreamweaver propose deux façons de procéder avec le contenu répétitif afin que
vous n'ayez pas à le modifier sur chaque page du site :
Les éléments de la bibliothèque sont garantis sur tous les sites et devraient
toujours être utilisés pour les sites qui seront consultés localement. Voir
Utilisation des éléments de la bibliothèque, page 248.
Les instructions d'insertion côté serveur ne peuvent être utilisées que pour les
sites affichés à partir d'un serveur, et seulement pour les serveurs configurés
pour traiter ces instructions (demandez à l'administrateur de votre système ou
à votre webmaster si vous n'êtes pas sûr que votre serveur web accepte les
instructions d'insertion côté serveur). Voir Utilisation des insertions côté serveur,
page 253.
247
Utilisation des éléments de la bibliothèque
Utilisez les éléments de la bibliothèque pour le contenu qui apparaît sur plusieurs
pages de votre site et pour le contenu qui doit souvent être mis à jour.
Le placement d'un élément de la bibliothèque dans un document produit
l'insertion d'une copie du code HTML dans le fichier et la création d'une
référence à l'élément original externe. La référence à l'élément de bibliothèque
externe rend possible la mise à jour du contenu d'un site entier en une seule fois,
en modifiant l'élément de la bibliothèque et en utilisant les commandes de mise à
jour du menu Modifier > Bibliothèque.
Dreamweaver stocke les éléments de la bibliothèque dans un dossier Bibliothèque,
à l'intérieur du dossier racine local de chaque site. Vous pouvez définir une
bibliothèque différente pour chaque site (pour plus de détails sur le dossier racine
local de chaque site, voir Création d'un site local, page 106).
Création d'un élément de bibliothèque
Vous pouvez créer un élément de la bibliothèque à partir de n'importe quelle
partie du corps d'un document. La partie que vous sélectionnez est convertie par
Dreamweaver en élément de la bibliothèque.
Les éléments de la bibliothèque peuvent inclure n'importe quel élément BODY, y
compris du texte, des tableaux, des formulaires, des images, des appliquettes Java,
des plug-ins et des éléments ActiveX. Dreamweaver stocke seulement la référence
aux éléments liés, tels que les images. Le fichier d'origine doit rester à
l'emplacement spécifié pour que l'élément de la bibliothèque fonctionne
correctement.
Les éléments de la bibliothèque peuvent aussi contenir des comportements, mais
l'édition de ces comportements doit respecter certaines conditions. Voir Édition
d'un comportement dans un élément de la bibliothèque, page 251. Les éléments de la
bibliothèque ne peuvent pas contenir de scénario ni de feuilles de style, car le code
de ces éléments fait partie de HEAD.
Pour créer un élément de bibliothèque :
248
Chapitre 15
1
Sélectionnez une partie d'un document que vous souhaitez enregistrer comme
élément de la bibliothèque.
2
Effectuez l'une des opérations suivantes :
Choisissez Fenêtre > Bibliothèque et faites glisser la sélection vers la palette
Bibliothèque, ou cliquez sur le bouton Créer de la même palette. Maintenez la
touche Ctrl (Windows) ou Commande (Macintosh) enfoncée pour éviter que
la sélection soit remplacée par le nouvel élément de la bibliothèque.
Choisissez Modifier > Ajouter objet à une bibliothèque.
3
Entrez un nom pour le nouvel élément de la bibliothèque.
Configuration des préférences de la bibliothèque
Vous pouvez personnaliser la couleur de surbrillance pour les éléments de la
bibliothèque et afficher ou masquer cette couleur dans les préférences de
surbrillance.
Pour modifier la couleur de surbrillance de la bibliothèque :
1
Choisissez Édition > Préférences, puis sélectionnez Surbrillance.
2
Cliquez sur la case de couleur pour sélectionner une couleur pour les éléments
de la bibliothèque.
3
Sélectionnez Afficher pour faire basculer l'affichage de la couleur de
surbrillance de la bibliothèque.
Affichage > Éléments invisibles – cette option doit également être activée pour
que la couleur de surbrillance de la bibliothèque soit visible dans la fenêtre
Document.
4
Cliquez sur OK pour fermer la boîte de dialogue Préférences.
Ajout d'un élément de la bibliothèque à une page
Lorsque vous ajoutez un élément de la bibliothèque à une page, le contenu réel est
inséré dans le document avec une référence à l'élément d'origine. Une fois le
contenu inséré, l'élément original n'a pas besoin d'être présent pour que le
contenu soit affiché.
Pour ajouter un élément de bibliothèque :
1
Placez le curseur dans la fenêtre Document.
2
Choisissez Fenêtre > Bibliothèque ou cliquez sur le bouton Bibliothèque à
partir du lanceur.
3
Faites glisser un élément de la palette de bibliothèque vers la fenêtre
Document ou sélectionnez un élément et cliquez sur Ajouter à la page.
Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée
pendant que vous faites glisser l'élément de la palette de bibliothèque afin
d'insérer son contenu sans en créer une autre instance dans la palette.
Réutilisation des éléments d’une page
249
Modification d'un élément de la bibliothèque
La modification d'un élément de la bibliothèque modifie son fichier d'origine.
Dreamweaver vous laisse le choix d'actualiser l'élément modifié dans tous les
documents du site en cours.
Remarque: La palette de styles et l'inspecteur de scénario ne sont pas disponibles lorsque
vous éditez les éléments de la bibliothèque car ceux-ci ne peuvent contenir que des éléments
BODY. Le code du scénario et de la feuille de style fait partie de HEAD. De même, l'inspecteur
de comportement n'est pas disponible car il insère du code dans HEAD comme dans BODY.
Pour obtenir des instructions sur la façon d'éditer les comportements dans les éléments de la
bibliothèque, voir Édition d'un comportement dans un élément de la bibliothèque,
page 251.
Pour modifier un élément de la bibliothèque :
1
Choisissez Fenêtre > Bibliothèque ou cliquez sur le bouton Bibliothèque à
partir du lanceur.
2
Sélectionnez un élément de la bibliothèque et cliquez sur Ouvrir ou doublecliquez sur l'élément.
Dreamweaver ouvre une nouvelle fenêtre pour la modification de l'élément de
la bibliothèque.
3
Modifiez l'élément de la bibliothèque, puis enregistrez les modifications.
4
Dans la boîte de dialogue affichée, choisissez si vous souhaitez mettre à jour les
documents du site local avec l'élément modifié ou non. Choisissez Oui pour
une mise à jour de tous les documents dans le site local avec l'élément modifié.
Choisissez Non si vous ne souhaitez modifier aucun document jusqu'à ce que
vous utilisiez Modifier > Bibliothèque > Mettre à jour page en cours ou Mettre
à jour les pages.
La mise à jour d'un élément produit le remplacement de son contenu dans les
documents où il est inclus.
Pour mettre à jour un élément de la bibliothèque :
1
Choisissez Modifier > Bibliothèque > Mettre à jour page en cours.
2
Dans la boîte de dialogue qui apparaît, choisissez les fichiers que vous voulez
mettre à jour.
Choisissez Site entier pour mettre à jour tous les documents du site spécifié.
Choisissez Fichiers qui utilisent pour mettre à jour tous les documents qui
utilisent le modèle spécifié.
3
Cliquez sur Démarrer.
Le renommage d'un élément de la bibliothèque produit une coupure de la
connexion entre les éléments créés sous l'ancien nom et l'élément renommé.
250
Chapitre 15
Pour renommer un élément de la bibliothèque :
1
Sélectionnez un élément de bibliothèque sur la palette de la bibliothèque.
2
Cliquez à l'intérieur du nom de l'élément.
3
Tapez un nouveau nom.
La suppression d'un élément le supprime de la bibliothèque, mais ne modifie pas
le contenu des documents.
Pour supprimer un élément de bibliothèque :
1
Choisissez Fenêtre > Bibliothèque ou cliquez sur le bouton Bibliothèque à
partir du lanceur.
2
Sélectionnez un élément sur la palette de la bibliothèque.
3
Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr.
Rendre les éléments de la bibliothèque modifiables
Pour rendre un élément de la bibliothèque modifiable dans le document courant,
vous devez briser le lien entre l'élément du document et la bibliothèque. Une fois
l'élément de la bibliothèque rendu modifiable, il ne peut pas être mis à jour à
partir de la bibliothèque.
Pour rendre un élément de la bibliothèque modifiable:
1
Sélectionnez un élément de la bibliothèque dans le document courant.
2
Cliquez sur Rendre modifiable dans l'inspecteur des propriétés.
Édition d'un comportement dans un élément de la bibliothèque
Lorsque vous créez des éléments de bibliothèque auxquels sont attachés des
comportements, Dreamweaver copie l'élément et son gestionnaire d'événement
(l'attribut qui spécifie l'événement à rechercher et l'action à appeler lorsque cet
événement se produit) dans le fichier de l'élément de la bibliothèque.
Dreamweaver ne copie pas les fonctions JavaScript associées dans l'élément de la
bibliothèque. Au lieu de cela, Dreamweaver insère automatiquement les fonctions
dans HEAD du document courant (si elles n'y sont pas déjà) lorsque vous ajoutez
l'élément de la bibliothèque au document.
Les fonctions JavaScript ne sont pas stockées avec l'élément de la bibliothèque car
ce sont des éléments HEAD, alors que les éléments de la bibliothèque ne peuvent
contenir que des éléments BODY. L'inspecteur de comportement n'est par
conséquent pas disponible lorsque vous éditez un élément de la bibliothèque, car
seule la moitié du code de comportement est disponible pour l'inspection. Pour
éditer un comportement dans un élément de la bibliothèque, vous devez rendre
l'élément modifiable, puis le recréer après avoir effectué les modifications.
Réutilisation des éléments d’une page
251
Pour éditer un comportement dans un élément de la bibliothèque :
1
Ouvrez un document contenant l'élément de la bibliothèque.
Notez le nom de l'élément de la bibliothèque, ainsi que les balises exactes qu'il
contient. Ces informations vous seront nécessaires dans les étapes 8 et 9.
2
Sélectionnez l'élément de la bibliothèque et cliquez sur Rendre modifiable
dans l'inspecteur de propriétés.
3
Sélectionnez l'élément auquel est attaché le comportement.
4
Choisissez Fenêtre > Comportements pour ouvrir l'inspecteur de
comportement, puis double-cliquez sur l'action que vous voulez modifier.
Pour supprimer entièrement une action, sélectionnez-la et appuyez sur
Supprimer.
5
Dans la boîte de dialogue des paramètres qui s'affiche, effectuez les
modifications nécessaires et cliquez sur OK.
6
Choisissez Fenêtre > Bibliothèque pour ouvrir la palette de bibliothèque.
7
Supprimez l'élément original de la bibliothèque.
8
Dans la fenêtre Document, sélectionnez les éléments qui constituent l'élément
de la bibliothèque.
Veillez à sélectionner exactement les mêmes éléments que ceux qui se
trouvaient dans l'élément original de la bibliothèque.
9
Dans la palette de bibliothèque, cliquez sur le bouton Créer, puis donnez au
nouvel élément le même nom que celui que vous avez supprimé dans l'étape 7.
Veillez à respecter la même orthographe et la même hauteur de casse.
10
Choisissez Modifier > Bibliothèque > Actualiser les pages.
11
Choisissez Fichiers qui utilisent à partir du menu contextuel Rechercher dans.
Le nom de l'élément de bibliothèque que vous venez de créer devrait
apparaître dans le menu contextuel adjacent.
12
252
Chapitre 15
Sélectionnez l'option Mettre à jour les éléments de la bibliothèque et cliquez
sur Démarrer.
Configuration des propriétés des éléments de la bibliothèque
Utilisez cette rubrique pour spécifier le fichier source d'un élément, pour le rendre
modifiable ou pour le créer à nouveau après l'avoir modifié. Double-cliquez sur un
élément pour ouvrir l'inspecteur des propriétés.
Voir aussi Réutilisation des éléments d'une page – Vue d’ensemble, page 247.
Src affiche
le nom de fichier et l'emplacement du fichier source de l'élément de la
bibliothèque.
Ouvrir
Ouvre le fichier source de l'élément de la bibliothèque.
brise le lien entre l'élément de bibliothèque sélectionné et son
fichier source. Le contenu de l'élément de la bibliothèque devient modifiable,
mais cette instance de l'élément ne pourra plus être actualisée par les fonctions de
mise à jour de la bibliothèque.
Rendre modifiable
remplace l'élément d'origine par la sélection en cours. Utilisez
cette option pour créer à nouveau des éléments de bibliothèque en l'absence du
fichier bibliothèque et après la modification de l'élément ou de son nom.
Créer à nouveau
Utilisation de la palette de bibliothèques
Cette palette affiche tous les éléments qui se trouvent dans la bibliothèque
courante, ainsi que les contrôles de bibliothèque listés ici. Pour ajouter des
éléments à la page courante, faites-les glisser à partir de la liste directement vers la
page, ou sélectionnez-les et cliquez sur Ajouter à la page. Cliquez sur Ouvrir pour
modifier l'élément.
Voir aussi Réutilisation des éléments d'une page – Vue d’ensemble, page 247.
Créer Ajoute la sélection en cours dans la fenêtre Document à la bibliothèque en
tant que nouvel élément.
Supprimer
Ouvrir
Supprime l'élément sélectionné de la bibliothèque.
Ouvre l'élément sélectionné dans une nouvelle fenêtre pour l'édition.
Place l'élément de bibliothèque sélectionné dans la page, à
l'emplacement du curseur.
Ajouter à la page
Utilisation des insertions côté serveur
Les instructions d'insertion côté serveur, comme leur nom l'indique, sont des
instructions données au serveur pour insérer le fichier spécifié dans le document
courant. Étant donné que le traitement de l'insertion à lieu sur le serveur, le
contenu inclus n'apparaît pas lorsque vous ouvrez un document localement dans
un navigateur. il est toutefois visible si vous choisissez Fichier > Aperçu dans le
navigateur à partir de Dreamweaver ; ceci est dû au fait que Dreamweaver traite
les instructions d'insertion comme le ferait le serveur.
Réutilisation des éléments d’une page
253
Placer une instruction d'insertion côté serveur dans un document insère
seulement une référence à un fichier externe. Dreamweaver affiche le contenu du
fichier externe dans la fenêtre Document, facilitant ainsi la conception des pages,
mais vous ne pouvez pas éditer ce contenu directement dans un document. Toute
modification apportée au fichier externe est automatiquement reflétée dans
chaque document où il est inclus.
Pour procéder à une insertion côté serveur :
1
Choisissez Insertion > Insertion côté serveur ou cliquez sur le bouton Procéder
à une insertion côté serveur du panneau Invisibles de la palette d'objets.
2
Dans la boîte de dialogue qui s'affiche, entrez le chemin du fichier que vous
voulez inclure, ou cliquez sur l'icône de dossier pour rechercher et sélectionner
le fichier, puis cliquez sur OK.
Affichage des insertions côté serveur dans Dreamweaver
Par défaut, Dreamweaver traite toutes les insertions côté serveur non
conditionnelles et les affiche dans la fenêtre Document.
Pour modifier les fichiers qui sont traités ou pour désactiver le traitement des
insertions côté serveur :
1
Choisissez Édition > Préférences > Traduction.
2
Sélectionnez Insertions côté serveur à partir de la liste des traducteurs.
3
Sélectionnez l'une des options suivantes pour la traduction des instructions
d'insertion côté serveur :
La configuration par défaut est Dans tous les fichiers ; il n'y a aucune raison de
modifier cette configuration, sauf si vous préférez ne pas voir le contenu des
fichiers inclus affiché dans la fenêtre Document.
Dans aucun fichier – désactive le traitement des instructions d'insertion côté
serveur dans Dreamweaver.
Dans les fichiers avec extension – traite les instructions d'insertion côté serveur
seulement dans les fichiers qui finissent par .stm, .html, .htm, .shtml ou .shtm.
– recherche dans le
document les correspondances aux expressions listées, et s'il y en a, les
instructions d'insertion côté serveur sont traitées dans le document.
Dans les fichiers correspondant à l'une de ces expressions
254
Chapitre 15
Édition d'une insertion côté serveur
De même que les éléments de la bibliothèque, les insertions côté serveur sont
sélectionnées comme une entité dans la fenêtre Document. À la différence des
éléments de la bibliothèque, l'HTML contenu dans une insertion n'apparaît pas
dans l'inspecteur d'HTML. L'instruction de serveur ressemble à ceci :
<!--#include virtual=”/uber/html/footer.html” -->
Pour modifier le contenu associé au fichier inclus, vous devez ouvrir le fichier.
Pour modifier une insertion côté serveur :
1
Sélectionnez l'insertion côté serveur dans la fenêtre Document ou dans
l'inspecteur HTML, puis cliquez sur Édition dans l'inspecteur de propriétés.
Le fichier inclus s'ouvre dans une nouvelle fenêtre Document.
2
Modifiez, si nécessaire, le fichier et enregistrez.
Les modifications sont immédiatement reflétées dans le document courant et
dans tous les documents suivants que vous ouvrez et qui incluent le fichier.
Réutilisation des éléments d’une page
255
256
Chapitre 15
16
CHAPITRE 16
Ajout d’interactivité et d’animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajout d’interactivité et d’animation – Vue
d'ensemble
Utilisez l'interactivité et l'animation dans vos pages web pour donner un retour
d'informations aux visiteurs lorsqu'ils se déplacent et cliquent, pour captiver leur
curiosité, pour présenter des concepts, pour valider des données de formulaire sans
contacter le serveur – bref, pour que les visiteurs voient et essaient plus de choses
sans quitter la page.
Il existe plusieurs façons d’ajouter l'interactivité et l'animation à vos pages à l'aide
de Dreamweaver :
Utilisez les comportements pour exécuter des tâches en réponse à des
événements spécifiques, tels la mise en surbrillance d'un bouton lorsque
l'utilisateur passe dessus avec la souris, la validation d'un formulaire lorsque
l'utilisateur clique sur le bouton Soumettre, ou l'ouverture d'une deuxième
fenêtre de navigation une fois la page principale chargée. Voir Présentation des
comportements, page 258.
Utilisez les scénarios pour la création d'animations qui ne nécessitent pas de
plug-in, de contrôle ActiveX, ou Java. Les scénarios utilisent le code HTML
dynamique pour modifier la position d'un calque ou la source d'une image
dans le temps ou pour entraîner des actions automatiques du comportement
une fois la page chargée. Voir Animation avec HTML dynamique, page 286.
Utilisez les appliquettes Java, les animations Shockwave, Flash Player, ou tout
autre contrôle ActiveX ou plug-in Netscape pour ajouter des animations
autonomes, des modèles de navigation et d'autres éléments multimédia à votre
page. Voir Ajout d'animations, d'appliquettes et d'autres éléments multimédia,
page 296.
257
Présentation des comportements
Un comportement est la combinaison d'un événement et d'une action. Les actions
sont des JavaScripts préécrits exécutant des tâches spécifiques, telles l'ouverture
d'une fenêtre de navigateur, la lecture d'un son, ou encore l'arrêt d'une animation
Shockwave. Les événements sont définis par le navigateur pour chaque élément de
page ; par exemple, onMouseOver, onMouseOut et onClick sont des événements
associés à des liens dans la plupart des navigateurs, tandis que onLoad est un
événement associé à des images et au corps du document.
Lorsque vous attribuez un comportement à un élément de page, vous spécifiez une
action, ainsi que l'événement qui la déclenche. Plusieurs actions peuvent être
déclenchées par un seul événement et vous pouvez déterminer l'ordre dans lequel
les actions surviennent.
Dreamweaver contient plusieurs actions de comportement ; vous pouvez en
trouver d'autres sur dans la section Extensibility Exchange du Centre de
développement de Dreamweaver ainsi que sur d'autres sites de développeurs. Voir
Téléchargement et installation de comportements de tierce partie, page 262. Vous
pouvez également écrire les vôtres si vous maîtrisez le langage JavaScript. Pour plus
de détails sur l'écriture d’actions de comportement, consultez Extension de
Dreamweaver - Vue d'ensemble dans les pages d’aide de Dreamweaver.
Association d'un comportement
Vous pouvez associer les comportements au document entier (BODY) ou à des
liens, des images, des éléments de formulaire, ou à tout autre élément HTML.
L'acceptation du comportement par les éléments dépend du navigateur. Internet
Explorer 4.0, par exemple, dispose d'une collection d'événements pour chaque
élément beaucoup plus importante que Netscape Navigator 4.0 ou tout
navigateur 3.0.
Vous pouvez attribuer plusieurs actions à un seul événement. Les actions
surviennent dans l'ordre listé. Pour plus de détails sur la modification de l'ordre
des actions, voir Modification d'un comportement, page 260.
Pour associer un comportement :
1
Sélectionnez un objet.
Pour associer un comportement à l'ensemble de la page, cliquez sur la balise
<body> dans le sélecteur de balises situé au coin inférieur gauche de la fenêtre
du document.
2
Choisissez Fenêtre > Comportements pour ouvrir l'inspecteur de
comportements, ou cliquez sur le bouton Comportement du Lanceur.
La balise HTML de l'objet sélectionné apparaît dans la barre de titre.
258
Chapitre 16
3
Cliquez sur le bouton + (signe plus) et effectuez un choix parmi les actions du
menu contextuel.
Les actions qui ne fonctionnent pas dans le document actuel ne sont pas
disponibles dans le menu. Par exemple, l'action Lecture du scénario n'est pas
disponible si le document ne contient pas de scénarios.
Selon l'action choisie, une boîte de dialogue apparaît affichant les paramètres
et les instructions pour l'action.
4
Saisissez les paramètres de l'action et choisissez OK.
Toutes les actions proposées fonctionnent dans les navigateurs 4.0 ou plus
récents. Certaines actions sont refusées pas les navigateurs moins récents. Voir
Utilisation des comportements livrés avec Dreamweaver, page 263.
5
L'événement par défaut de l'action apparaît dans la colonne Événements.
Sélectionnez-en un autre à partir du menu contextuel Événements s'il ne s'agit
pas de l'événement voulu.
Différents événements apparaissent dans le menu contextuel Événements
pour, selon l'objet sélectionné et le navigateur spécifié. Si les événements
attendus ne s'affichent pas, vérifiez que vous avez sélectionné l'objet correct,
ou modifiez les navigateurs cibles dans le menu contextuel précité.
Si vous associez un comportement à une image, les événements tels que
onMouseOver et onMouseDown apparaissent entre parenthèses. Ces événements
sont seulement disponibles pour les liens. Lorsque vous en sélectionnez un,
Dreamweaver entoure l'image d'une balise A pour définir le lien. Ne
supprimez pas le signe dièse (#) qui apparaît par la suite dans la zone Lien de
l'inspecteur de propriétés, sinon vous supprimez le comportement.
Cependant, vous pouvez remplacer ce signe par une nouvelle valeur de lien si
vous le souhaitez.
Ajout d’interactivité et d’animation
259
Modification d'un comportement
Une fois le comportement associé, vous pouvez modifier l'événement qui
déclenche l'action, ajouter ou supprimer des actions et modifier les paramètres des
actions.
Pour modifier un comportement :
1
Sélectionnez un objet associé à un comportement.
2
Choisissez Fenêtre > Comportements pour ouvrir l'inspecteur de
comportements.
Les comportements sont classés par ordre alphabétique, par l'événement. S'il y
a plusieurs actions pour le même événement, elles apparaissent dans l'ordre
d'exécution.
3
Effectuez un choix parmi les options suivantes :
Pour supprimer un comportement, sélectionnez-le et cliquez sur le bouton (signe moins) ou appuyez sur Supprimer.
Pour modifier les paramètres d'une action, double-cliquez sur le
comportement (ou sélectionnez-le et appuyez sur Entrée), modifiez les
paramètres dans la boîte de dialogue, puis cliquez sur OK.
Pour modifier l'ordre d'apparition des actions d'un événement donné,
sélectionnez le comportement et cliquez sur les touches de direction.
Création de nouvelles actions
Les actions sont des éléments JavaScript. Si vous êtes un expert en JavaScript, vous
pouvez écrire de nouvelles actions et les faire apparaître dans le menu contextuel
Actions de l'inspecteur de comportements. Consultez Extension de Dreamweaver Vue d'ensemble dans les pages d’aide de Dreamweaver.
260
Chapitre 16
Inspecteur de comportements
Utilisez l'inspecteur de comportements pour associer des comportements
JavaScript à des objets et pour modifier les paramètres de comportements déjà
associés. Les comportements sont listés par ordre alphabétique de l'événement. Si
un seul événement dispose de plusieurs actions, ces dernières apparaissent dans
l'ordre d'exécution.
Les balises qui contrôlent la sélection en cours apparaissent en haut de
l'inspecteur.
Pour ouvrir l'inspecteur de comportements, choisissez Fenêtre > Comportements
ou cliquez sur le bouton Comportement du Lanceur. Voir aussi Présentation des
comportements, page 258.
(+) Affiche
une liste d'actions qui peuvent se produire. La sélection d'une action
entraîne l'apparition d'une boîte de dialogue Paramètres.
(–) Supprime
l'action en cours de la liste Action.
Spécifie les navigateurs dans lesquels le comportement actuel
devrait fonctionner. La sélection effectuée dans ce menu détermine quels
événements apparaîtront dans le menu contextuel Événements.
Evénements pour
Affiche tous les événements qui peuvent déclencher l'action.
Différents événements s'affichent selon l'objet sélectionné. Si les événements
désirés sont absents, vérifiez que vous avez sélectionné l'objet correct. Utilisez le
sélecteur de balise dans le coin inférieur gauche de la fenêtre Document pour
sélectionner une balise spécifique.
Événements
Remarque: Le menu contextuel Événements apparaît seulement lorsque vous avez
sélectionné une action.
Différents navigateurs reconnaissent différents événements pour divers objets.
Choisissez les navigateurs dans lesquels vous voulez que le comportement
fonctionne à l'aide du menu contextuel Afficher les événements pour. Seuls les
événements reconnus par les navigateurs sélectionnés s'affichent dans le menu
Événements.
Flèches Haut et Bas Déplacent l'action sélectionnée vers le haut ou vers le bas dans
la liste de comportements. Les actions sont exécutées dans l'ordre spécifié.
Ajout d’interactivité et d’animation
261
Téléchargement et installation de comportements de tierce partie
L'extensibilité de Dreamweaver est une de ces caractéristiques les plus
intéressantes. En effet, elle offre aux utilisateurs experts en JavaScript la possibilité
d'écrire leurs propre objets, comportements, commandes, et inspecteurs de
propriété. La plupart d'entre eux ont choisi de partager leurs efforts de
développement en envoyant leurs fichiers sur la page Extensibility Exchange du
site web de Dreamweaver (http://www.dreamweaver.com/). Les instructions pour
le téléchargement de ces fichiers sont disponibles sur la page Extensibility
Exchange.
Pour installer le comportement d'un tiers pour utilisation avec votre copie de
Dreamweaver :
1
Utilisez un utilitaire de dézippage pour extraire le ou les fichiers de
comportement des archives téléchargés.
Par exemple, WinZip (Windows) ou ZipIt (Macintosh) ouvrent les archives
zip disponibles sur la page Extensibility Exchange.
262
Chapitre 16
2
Faites glisser les fichiers extraits vers le dossier Configuration/comportements/
actions de l'application Dreamweaver.
3
Redémarrez Dreamweaver.
Utilisation des comportements livrés avec
Dreamweaver
Les actions de comportement fournies avec Dreamweaver ont été écrites pour les
navigateurs 4.0. Certaines d'entre elles sont refusées pas les navigateurs moins
récents. Consultez le tableau suivant pour obtenir plus de détails sur le
fonctionnement de ces actions selon le navigateur utilisé. Pour plus de détails sur
le fonctionnement de chaque action et sur les choix d'options, consultez les
rubriques ci-dessous.
Macintosh
Action
Windows
Netscape
2.x
Netscape
3.x
Modification de la
propriété
OK; échoue
sans erreur
pour les
objets des
calques
Vérification du
navigateur
Internet
Explorer
3.0
Internet
Explorer
3.01
Netscape
2.x
Netscape
3.x
OK; échoue Échoue
sans erreur sans erreur
pour les
objets des
calques
OK
OK; échoue
sans erreur
pour les
objets des
calques
OK; échoue OK
sans erreur
pour les
objets des
calques
OK
OK
OK
OK
OK
OK
OK
OK
OK
Vérification du
plug-in
OK
OK
Échoue
sans erreur
OK
OK
OK
OK
OK
Contrôler
Shockwave
ou Flash
Échoue
sans erreur
OK
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
OK
Échoue
sans erreur
Échoue
sans erreur
Contrôle du Erreur
son
OK
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
OK
Échoue
sans erreur
Échoue
sans erreur
Affichage
Échoue
du message sans erreur
d'état
OK
Échoue
sans erreur
OK
Échoue
sans erreur
OK
OK
OK
Déplacement du
calque
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Atteindre
l'URL
L'action
OK
Atteindre
l'URL fonctionne dans
un cadre,
mais
échoue
sans erreur
dans une
fenêtre
principale si
appliquée à
un lien.
Échoue
sans erreur
OK
OK
OK
OK
OK
Ouverture
d'une
fenêtre de
navigateur
Échoue
sans erreur
Échoue
sans erreur
OK
OK
OK
OK
OK
Internet
Explorer
3.0
Internet
Explorer
3.01
Appel JavaScript
OK
Ajout d’interactivité et d’animation
263
Macintosh
264
Chapitre 16
Windows
Action
Netscape
2.x
Netscape
3.x
Internet
Explorer
3.0
Internet
Explorer
3.01
Netscape
2.x
Netscape
3.x
Internet
Explorer
3.0
Internet
Explorer
3.01
Message
OK
OK
Échoue
sans erreur
OK
OK
OK
OK
OK
Préchargement des
images
Échoue
sans erreur
OK
Échoue
sans erreur
OK
Échoue
sans erreur
OK
Échoue
sans erreur
Échoue
sans erreur
Affichage- Échoue
masquage sans erreur
des calques
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Échoue
sans erreur
Interversion d'une
image
Échoue
sans erreur
OK
Échoue
sans erreur
OK
Échoue
sans erreur
OK
Échoue
sans erreur
Échoue
sans erreur
Rétablisse- Échoue
ment d'une sans erreur
interversion
d'images
OK
Échoue
sans erreur
OK
Échoue
sans erreur
OK
Échoue
sans erreur
Échoue
sans erreur
Validation Échoue
d'un formu- sans erreur
laire
OK
Échoue
sans erreur
OK
Échoue
sans erreur
OK
Échoue
sans erreur
Échoue
sans erreur
Lecture et
Erreur
Arrêt d'un
scénario
Lecture et
Arrêt d'un
scénario
Atteindre
une image
de scénario
L'animaÉchoue
tion de
sans erreur
l'image
source et
l'appel des
comportements
fonctionnent, mais
l'animation
de calque a
échoué
sans erreur.
Échoue
sans erreur
Erreur
L'animaÉchoue
tion de
sans erreur
l'image
source et
l'appel des
comportements
fonctionnent, mais
l'animation
de calque a
échoué
sans erreur.
Échoue
sans erreur
Appel JavaScript
L'action Appel JavaScript vous permet d'utiliser l'inspecteur de comportements
pour déterminer l'exécution d'une fonction ou d'une ligne personnalisée de code
JavaScript lorsqu'un événement se produit.
Pour utiliser l'action Appel JavaScript :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez Appel JavaScript dans le menu contextuel Actions.
3
Entrez le JavaScript à exécuter ou le nom d'une fonction.
Par exemple, pour créer un bouton Retour vous pourriez saisir si (history.length
> 0){history.back()}. Si vous avez encapsulé votre code dans une fonction, entrez
seulement le nom de la fonction (par exemple, goBack()).
4
Cliquez sur OK.
5
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre dans le menu contextuel. Si les
événements désirés ne sont pas listés, modifiez le navigateur cible dans le menu
contextuel Événements pour.
Modification de la propriété
Utilisez cette action pour modifier la valeur de l'une des propriétés d'un objet (par
exemple, la couleur d'arrière-plan d'un calque ou l'action d'un formulaire). Le
navigateur détermine si les propriétés sont modifiables ou non ; beaucoup plus de
propriétés sont exposées à JavaScript dans Microsoft Internet Explorer (IE) 4.0
que dans IE 3.0 ou Netscape Navigator 3.0 ou 4.0.
Remarque: Nous vous conseillons d'utiliser cette action seulement si vous êtes expert en
HTML et JavaScript.
Ajout d’interactivité et d’animation
265
Pour utiliser l'action Modifier la propriété :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez l'option Modifier la propriété dans le menu contextuel Actions.
3
Sélectionnez le type d'objet dont vous souhaitez modifier la propriété dans le
menu contextuel Type d'objet.
Lorsque vous choisissez un type d'objet, tous les objets nommés du type
sélectionné s'affichent dans le menu contextuel Objets nommés.
4
Sélectionnez-en un.
5
Sélectionnez ensuite une propriété à partir du menu contextuel, ou entrez le
nom de la propriété dans le champ texte.
Choisissez différents navigateurs à partir du menu contextuel pour voir quelles
propriétés peuvent être modifiées dans chacun d'entre eux. Si vous saisissez
une propriété à la main, utilisez bien le nom JavaScript exact de la propriété (et
souvenez-vous que les propriétés JavaScript tiennent compte des majuscules/
minuscules).
6
Entrez la nouvelle valeur de la propriété dans le champ Nouvelle valeur et
cliquez sur OK.
7
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Vérification du navigateur
Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon
l'éditeur et la version de leur navigateur. Par exemple, vous voulez que les
utilisateurs de Netscape Navigator 4.0 ou version ultérieure aillent sur telle page,
les utilisateurs de Microsoft Internet Explorer 4.0 ou version ultérieure aillent sur
telle autre, ou s'ils disposent d'un autre type de navigateur, qu'ils restent sur la
page en cours.
Il est utile d'associer ce comportement à la balise BODY d'une page qui est
compatible avec presque tous les navigateurs (et qui n'utilise pas d'autre
JavaScript) ; ainsi, les visiteurs de la page qui ont désactivé JavaScript verront
toujours quelque chose.
Une autre option consiste à associer ce comportement à un lien sans destination
(balise A) pour que l'action détermine sur quelle page le lien renvoie selon l'éditeur
et la version du navigateur du visiteur.
266
Chapitre 16
Pour utiliser l'action Vérifier le navigateur :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez Vérifier le navigateur dans le menu contextuel Actions.
3
Déterminez comment vous souhaitez distinguer les visiteurs : par navigateur,
par version, ou les deux.
Par exemple, souhaitez-vous que ceux avec un navigateur 4.0 voient telle page,
et ceux avec une version différente en voient une autre ? Ou ceux avec
Netscape Navigator voient telle page, et ceux avec Microsoft Internet Explorer
(IE) en voient une autre ? Ou peut-être souhaitez-vous que les utilisateurs de
Navigator 4.0 et IE 4.0 voient telle page, les utilisateurs de Navigator 2.0 ou
3.0 en voient une autre, et les utilisateurs d'IE 3.0 ou d'un autre navigateur
restent sur la page en cours.
4
Spécifiez une version de Netscape Navigator.
5
Dans les menus contextuels adjacents, choisissez les options au cas où la
version du navigateur est celle que vous avez spécifiée (ou plus récente), et
dans le cas inverse.
Les options sont Atteindre l'URL, Atteindre l'URL sec. et Rester sur cette
page.
6
Spécifiez une version de Microsoft Internet Explorer.
7
Dans les menus contextuels adjacents, choisissez les options au cas où la
version du navigateur est celle que vous avez spécifiée (ou plus récente) et dans
le cas inverse.
Les options sont Atteindre l'URL, Atteindre l'URL sec. et Rester sur cette
page.
8
Choisissez une option à partir du menu contextuel Autres navigateurs pour
spécifier une action dans le cas où il ne s'agit ni de Netscape Navigator, ni de
Microsoft Internet Explorer.
La meilleure option est de rester sur la page en cours pour les navigateurs
autres que Navigator et IE parce que la plupart ne prennent pas en charge
JavaScript – et s'ils n'arrivent pas à lire ce comportement, ils resteront de toute
façon sur cette page.
9
Entrez les chemins et les noms de fichier de l'URL et l'URL secondaire dans
les champs texte au bas de la boîte de dialogue.
10
Cliquez sur OK.
Ajout d’interactivité et d’animation
267
11
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour. Souvenez-vous que le but de ce
comportement est de vérifier les différentes versions du navigateur ; il est
préférable alors d'opter pour un événement qui fonctionne avec les deux
versions – 3.0 et 4.0 – du navigateur.
Vérification du plug-in
Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon le
plug-in installé. Par exemple, vous souhaitez peut-être envoyer les utilisateurs sur
telle page s'ils ont Shockwave et sur telle autre s'ils ne l'ont pas.
Remarque: Il est impossible de détecter des plug-in spécifiques sur Microsoft Internet
Explorer (IE) à l'aide de JavaScript ; cependant, pour les plug-in accompagnés de commandes
ActiveX (tels Shockwave et Flash), la vérification d'un plug-in est inutile si vous avez utilisé
les deux balises OBJECT et EMBED pour inclure votre contenu dans la page. Dans ce cas,
sélectionnez l'option Atteindre le premier URL si ActiveX est disponible. Désélectionnez cette
option si vous n'utilisez pas la balise OBJECT ou si le plug-in n'est pas accompagné d'une
commande ActiveX.
Pour utiliser l'action Vérifier le plug-in :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez Vérifier le plug-in dans le menu contextuel Actions.
3
Sélectionnez un plug-in à partir du menu contextuel Plug-in, ou cliquez sur
Entrée et saisissez le nom exact du plug-in dans le champ adjacent.
Vous devez utiliser le nom exact du plug-in, tel qu'il a été spécifié en gras sur la
page À propos des plug-in dans Netscape Navigator (à partir de Navigator,
choisissez ? > À propos des plug-in sous Windows ou Menu Pomme > À
propos des plug-in sur Macintosh).
4
Spécifiez un URL pour les utilisateurs qui ont le plug-in dans le champ URL.
Pour que les utilisateurs avec plug-in restent sur la même page, laissez le
champ URL vide.
5
Spécifiez un URL secondaire pour ceux qui n'ont pas de plug-in dans le
champ URL sec.
Pour que les utilisateurs sans plug-in restent sur la même page, laissez le champ
URL sec. vide.
268
Chapitre 16
6
Sélectionnez l'option Atteindre le premier URL si ActiveX est disponible
lorsque vous utilisez les deux balises OBJECT et EMBED.
La balise OBJECT téléchargeant automatiquement la commande ActiveX si
l'utilisateur n'en dispose pas encore, cette option permet d'aller à la page avec
le contenu du plug-in. ActiveX est actuellement uniquement disponible sur
Microsoft Internet Explorer pour Windows95/NT.
7
Cliquez sur OK.
8
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Contrôler Shockwave ou Flash
Utilisez l'action Contrôler Shockwave ou Flash pour lire, arrêter, rembobiner ou
atteindre une image dans une animation Shockwave ou Flash Player.
Pour utiliser l'action Contrôler Shockwave ou Flash :
1
Choisissez Insertion > Shockwave ou Insertion > Flash pour insérer une
animation Shockwave ou Flash Player, respectivement.
2
Choisissez Fenêtre > Propriétés et entrez un nom pour l'animation dans le
champ saisie de texte à l'extrême gauche. Vous devez donner un nom à
l'animation avant de pouvoir lui associer l'action Contrôler Shockwave ou
Flash.
3
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
4
Sélectionnez Contrôler Shockwave ou Flash dans le menu contextuel Actions.
5
Sélectionnez une animation dans le menu contextuel Objet Shockwave.
Dreamweaver affiche automatiquement tous les fichiers qui se terminent par
.dcr, .dir, .swf, ou .spl et qui se trouvent dans des balises OBJECT ou EMBED du
document en cours.
6
Sélectionnez lire, arrêter, rembobiner, ou atteindre une image dans
l'animation. L'option Lire jouera l'animation à partir du cadre en cours.
7
Cliquez sur OK.
8
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Ajout d’interactivité et d’animation
269
Contrôle du son
Utilisez cette action pour lire ou arrêter un son. Par exemple, vous souhaitez peutêtre mettre en place un effet sonore à chaque fois que l'utilisateur passe au-dessus
d'un lien, ou jouer une séquence musicale lorsque la page est en train de charger et
permettre à l'utilisateur d'arrêter la musique en cliquant sur un bouton.
Remarque: Certains navigateurs nécessitent le plug-in LiveAudio ou équivalent pour la
lecture des sons.
Pour utiliser l'action Contrôler le son :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez Contrôler le son dans le menu contextuel Actions.
3
Effectuez l'une des opérations suivantes :
Pour utiliser l'action de lecture d'un son, entrez le chemin et le nom d'un
fichier son dans le champ Jouer un son, ou cliquez sur le bouton Parcourir
pour en sélectionner un.
Pour utiliser l'action d'arrêt de la lecture d'un son, sélectionnez l'action Arrêter
le son, puis choisissez un fichier son à partir du menu contextuel adjacent.
4
Cliquez sur OK.
5
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
270
Chapitre 16
Affichage du message d'état
L'action Afficher le message d'état montre un message dans la barre d'état en bas
de la fenêtre du navigateur. Par exemple, vous pouvez utiliser cette action pour
décrire la destination d'un lien dans la barre d'état au lieu d'afficher l'URL associé.
Passez votre souris sur n'importe quel bouton de navigation dans les pages de
l'aide de Dreamweaver pour obtenir un exemple de message d'état.
Pour utiliser l'action Afficher le message d'état :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez Afficher le message d'état dans le menu contextuel Actions.
3
Entrez votre message dans le champ Message.
Le champ est volontairement petit pour vous rappeler d'entrer un message le
plus court possible. Le message sera tronqué par le navigateur s'il dépasse la
barre d'état.
4
Cliquez sur OK.
5
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Déplacement du calque
Cette action permet à l'utilisateur de déplacer un calque. Utilisez-la pour créer des
puzzles, des commandes de défilement, et d'autres éléments d'interface utilisateur
mobiles.
Vous pouvez spécifier dans quelle direction l'utilisateur peut faire glisser le calque
(horizontalement, verticalement, ou toute autre direction), la cible vers laquelle
l'utilisateur devrait faire glisser le calque, si ce dernier doit être aligné sur la cible
ou non lorsqu'il arrive à moins d'un certain nombre de pixels de la cible, l'action à
déclencher lorsque le calque touche la cible, etc.
Puisque l'action Déplacer le calque doit être appelée avant que le calque puisse être
déplacé par l'utilisateur, vérifiez bien que l'événement déclenchant l'action arrive
avant que l'utilisateur essaie de faire glisser le calque. Nous vous conseillons
d'associer cette action à l'objet BODY (à l'aide de l'événement onLoad), bien que
vous puissiez également l'associer à un lien remplissant le calque entièrement (tel
qu'un lien autour d'une image) à l'aide de l'événement onMouseOver.
Ajout d’interactivité et d’animation
271
Pour utiliser l'action Déplacer le calque :
1
Choisissez Insertion > Calque ou cliquez sur le bouton Calque de la palette
d'objet et dessinez un calque dans la fenêtre Document.
2
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
3
Sélectionnez Déplacer le calque dans le menu contextuel Actions.
Lorsque cette action n'est pas disponible, vous avez probablement sélectionné
un calque. Étant donné que les calques ne prennent pas en compte les
événements dans les deux navigateurs de version 4.0, vous devez sélectionner
un objet différent — tel que la balise BODY, un lien (balise A) —, ou remplacez
le navigateur cible par IE 4.0 dans le menu contextuel Événements pour.
4
Sélectionnez le calque que vous voulez rendre mobile dans le menu contextuel
Calque.
5
Sélectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.
Un mouvement Libre convient bien aux puzzles et aux autres jeux nécessitant
du glisser-déplacer. Pour les commandes de défilement et les paysages mobiles
tels que les armoires de classement, les rideaux et les mini-stores, choisissez un
mouvement Contraint.
6
Pour le mouvement Contraint, saisissez des valeurs (exprimées en pixels) dans
les champs Haut, Bas, Gauche, et Droite.
Les valeurs sont relatives à la position de départ du calque. Pour contraindre
un mouvement à l'intérieur d'une zone rectangulaire, entrez des valeurs
positives dans les quatre champs. Pour permettre uniquement un mouvement
vertical, entrez des valeurs pour Haut et Bas, mais 0 pour Gauche et Droite.
Pour permettre uniquement un mouvement horizontal, entrez des valeurs
positives pour Gauche et Droite, mais 0 pour Haut et Bas.
7
Saisissez des valeurs (exprimées en pixels) pour la cible dépôt dans les champs
Gauche et Haut.
La cible de dépôt est l'endroit auquel vous voulez que l'utilisateur fasse glisser
le calque. Un calque est considéré comme ayant atteint la cible dépôt lorsque
ses coordonnés gauche et haut correspondent aux valeurs saisies dans les
champs Gauche et Haut. Les valeurs sont relatives à l'angle supérieur gauche
de la fenêtre du navigateur. Cliquez sur Afficher la position actuelle pour
remplir automatiquement les champs avec la position actuelle du calque.
8
Saisissez une valeur (exprimée en pixels) dans le champ Aligner si à moins de
pour déterminer de combien l'utilisateur doit se rapprocher de la cible dépôt
avant que le calque s'aligne dessus.
Les grandes valeurs facilitent le découverte de la cible dépôt par l'utilisateur.
272
Chapitre 16
9
Pour des puzzles simples et des manipulations de paysage, vous pouvez vous
arrêter ici. Pour définir la poignée de déplacement du calque, suivez bien son
mouvement lors du déplacement, puis déclenchez une action lorsqu'elle est
déposée, cliquez sur Options supplémentaires.
10
Pour spécifier qu'il faut cliquer sur une zone particulière du calque avant de
pouvoir le déplacer, choisissez Zone à l'intérieur du calque dans le menu
contextuel Déplacer la poignée, puis entrez les coordonnés Gauche et Haut,
ainsi que la Largeur et la Hauteur de la poignée de déplacement.
Cette option est utile lorsque l'image à l'intérieur du calque contient un
élément invitant au déplacement, telle une barre de titre ou une poignée de
tiroir. Ne définissez pas cette option lorsque vous voulez que l'utilisateur soit
libre de cliquer n'importe où dans le calque pour le déplacer.
11
Choisissez parmi les options Pendant le déplacement suivantes, si vous le
souhaitez :
Sélectionnez Placer le calque au premier plan si le calque doit être amené au
sommet de l'ordre de superposition lors de son déplacement. En sélectionnant
cette option, déterminez si vous voulez laisser le calque en haut ou si vous préférez
rétablir sa position d'origine dans l'ordre de superposition du menu contextuel.
Entrez un code JavaScript ou un nom de fonction (par exemple, monitorLayer())
dans le champ Appel JavaScript pour exécuter à plusieurs reprises le code ou la
fonction pendant le déplacement du calque. Par exemple, vous souhaitez peutêtre écrire une fonction surveillant les coordonnées des calques et affichant des
conseils comme « vous vous approchez » ou « vous êtes très loin de la cible dépôt
» dans un champ texte. Voir Recueil d'informations sur le calque mobile,
page 274.
12
Entrez un code JavaScript ou un nom de fonction (par exemple,
evaluateLayerPos()) dans le second champ Appel JavaScript pour exécuter à
plusieurs reprises le code ou la fonction lorsque vous déposez le calque.
Sélectionnez l'option Seulement si aligné si le JavaScript devrait être exécuté
uniquement si le calque a atteint la cible dépôt.
13
Cliquez sur OK.
14
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour. Souvenez-vous que les navigateurs 4.0, IE
4.0 et Netscape 4.0 sont les seules options appropriées, puisque les navigateurs
3.0 ne prennent pas en compte les calques.
Remarque: Vous ne pouvez associer l'action Déplacer le calque à un objet avec l'événement
onMouseDown.
Ajout d’interactivité et d’animation
273
Recueil d'informations sur le calque mobile
Lorsque vous associez l'action Déplacer le calque à un objet, Dreamweaver insère
la fonction MM_dragLayer() dans l'en-tête ou encore HEAD de votre document. En
plus de l'enregistrement du calque en tant que mobile, cette fonction définit trois
propriétés pour chaque calque mobile —MM_LEFTRIGHT, MM_UPDOWN, et
MM_SNAPPED—que vous pouvez utiliser dans vos propres fonctions JavaScript
pour déterminer la position horizontale, la position verticale actuelle du calque, et
s'il a atteint la cible ou non.
Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la
position verticale actuelle du calque) dans un champ formulaire appelé curPosField.
(Les champs Formulaire servent à afficher des informations continuellement mises
à jour parce qu’ils sont dynamiques—c'est-à-dire, vous pouvez modifier leur
contenu après que la page ait été chargée—aussi bien dans Netscape Navigator
que dans Microsoft Internet Explorer.)
fonction getPos(containingLayer,nestedLayer){
var layerRef =
((navigator.appName=='Netscape')?document.layers[containingLayer].document.layers[nest
edLayer]:document.all[nestedLayer]);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Au lieu d'afficher la valeur des propriétés MM_UPDOWN ou MM_LEFTRIGHT dans un
champ formulaire, vous pourriez écrire une fonction qui affiche un message dans
ce champ selon la distance qui reste à parcourir jusqu'à la cible, ou vous pourriez
appeler une autre fonction pour afficher ou masquer un calque selon la valeur qu'il
détient. La réaction à la valeur de MM_UPDOWN ou MM_LEFTRIGHT est seulement
limitée par votre propre imagination et vos compétence en matière de JavaScripts.
Il est particulièrement utile de bien lire la propriété MM_SNAPPED lorsque vous
disposez de plusieurs calques sur une page, qui doivent tous atteindre leurs cibles
avant que l'utilisateur puisse passer à la page ou la tâche suivante. Par exemple,
vous pourriez écrire une fonction qui compte le nombre de calques qui ont une
valeur MM_SNAPPED de TRUE et l'appeler à chaque fois qu'un calque est déposé.
Lorsque le compte de calques alignés atteint le nombre désiré, vous pouvez
envoyer l'utilisateur à la page suivante ou envoyer un message de félicitations.
Si vous avez associé l'action Déplacer le calque à des liens placés à l'intérieur de
plusieurs calques à l'aide de l'événement onMouseOver, vous devriez apporter une
petite modification à la fonction MM_dragLayer() pour éviter que la propriété
MM_SNAPPED d'un calque aligné repasse à FALSE lorsque l'on passe dessus avec la
souris (cela peut arriver si vous avez utilisé l'action Déplacer le calque pour créer
un puzzle de photo, car l'utilisateur passera probablement sur des pièces alignées
lors du positionnement des autres). La fonction MM_dragLayer() n'a pas été écrite
dans le but d'éviter ce comportement car il est parfois désirable (par exemple,
lorsque vous voulez établir plusieurs cibles pour un seul calque).
274
Chapitre 16
Pour éviter le réenregistrement de calques alignés :
1
Choisissez Édition > Rechercher.
2
Sélectionnez Source HTML dans le menu contextuel Rechercher.
3
Saisissez (!curDrag) dans le champ texte adjacent.
4
Cliquez sur Rechercher suivant.
Cliquez sur Oui lorsque Dreamweaver vous demande si vous voulez continuer
la recherche depuis le début du document. Dreamweaver trouve l'instruction :
if (!curDrag) return false ;
5
Fermez la boîte de dialogue, puis modifiez l'instruction dans l'inspecteur
HTML pour qu'elle affiche :
if (!curDrag || curDrag.MM_SNAPPED != null) return false ;
Les deux barres verticales (||) signifient “ou”, et curDrag est une variable
représentant le calque qui a été enregistré comme mobile. En Français cette
instruction signifie “si curDrag n'est pas un objet, ou s'il a déjà une valeur
MM_SNAPPED, ce n'est pas la peine d'exécuter le reste de la fonction”.
Atteindre l'URL
Cette action ouvre une nouvelle page dans la fenêtre actuelle ou dans un cadre
spécifié. Elle est particulièrement utile pour la modification du contenu de
plusieurs cadres en ne cliquant qu'une seule fois.
Pour utiliser l'action Atteindre l'URL :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez Atteindre l'URL dans le menu contextuel Actions.
3
Choisissez une destination pour l'URL à partir de la liste Ouvrir dans.
La liste de sélection énumère automatiquement tous les noms des cadres qui se
trouvent dans le jeu de cadres actuel, ainsi que dans la fenêtre principale. S'il
n'y a pas de cadres, cette dernière reste la seule option.
Remarque: Cette action peut produire des résultats inattendus si l'un des cadres porte le
nom haut, vide, auto, ou parent. Les navigateurs confondent parfois ces noms avec les cibles
réservées haut, vide, auto, et parent.
4
Entrez le chemin et le nom de fichier du document à ouvrir dans le champ
URL, ou cliquez sur Parcourir pour sélectionner un fichier.
5
Répétez les étapes 3 et 4 pour ouvrir des documents supplémentaires dans
d'autres cadres.
Ajout d’interactivité et d’animation
275
6
Cliquez sur OK.
7
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Ouverture d'une fenêtre de navigateur
Utilisez cette action pour ouvrir un URL dans une nouvelle fenêtre. Vous pouvez
spécifier les propriétés de la nouvelle fenêtre, y compris la taille, les attributs (si elle
est redimensionnable, dispose d'une barre de menu ou non, etc.), ainsi que le
nom.
Lorsque vous ne spécifiez aucun attribut, elle s'ouvrira dans la taille et avec les
attributs de la fenêtre qui l'a lancée. La spécification d'attributs désactive
automatiquement tous ceux qui ne sont pas volontairement activés. Par exemple,
si vous ne définissez pas d'attributs pour la fenêtre, elle peut s'ouvrir à 640 x 480
pixels et disposer d'une barre d'outils de navigation, d'emplacement, d'état et de
menu. Si vous précisez la largeur à 640 et la hauteur à 480 sans autres
spécifications, la fenêtre ouvrira à 640 x 480 pixels et ne disposera de barre d'outils
ni de navigation, ni d'emplacement, ni d'état, ni de menu, ni de poignées de
redimensionnement, ni de barre de défilement.
Pour utiliser l'action Ouvrir la fenêtre du navigateur :
276
Chapitre 16
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez l'action dans le menu contextuel Actions.
3
Entrez l'URL à afficher, ou cliquez sur Parcourir pour sélectionner un fichier.
4
Définissez l'une ou plusieurs des options suivantes :
Largeur de fenêtre
Spécifie la largeur de la fenêtre en pixels.
Hauteur de fenêtre
Spécifie la hauteur de la fenêtre en pixels.
Barre d'outils Navigation Est constituée de la ligne de boutons navigateurs qui
comprend Précédente, Suivante, Origine, et Actualiser.
Barre d'outils Emplacement Est constituée de la ligne d'options navigateurs qui
contient le champ d'emplacement.
Est la zone grise au bas de la fenêtre du navigateur dans laquelle
apparaissent les messages (tels la durée de chargement restante et les URL
associés à des liens).
Barre d'état
Est la zone de la fenêtre du navigateur (Windows) ou du
Bureau (Macintosh) où apparaissent les menus comme Fichier, Édition,
Affichage, Atteindre, et ?. Vous devez explicitement définir cette option si vous
voulez que les utilisateurs puissent naviguer à partir de la nouvelle fenêtre.
Sinon, l'utilisateur ne pourra que fermer ou réduire la fenêtre (Windows) ou
fermer ou quitter l'application (Macintosh) depuis la nouvelle fenêtre.
Barre de menu
Barre de défilement si nécessaire Spécifie si oui ou non des barres de
défilement devraient apparaître si le contenu dépasse la zone visible. Si vous ne
définissez pas explicitement cette option, les barres de défilement
n'apparaîtront pas. Si l'option Poignées de redimensionnement est également
désactivée, les utilisateurs n'ont aucun moyen de visualiser le contenu au-delà
de la taille d'origine de la fenêtre.
Indiquent que l'utilisateur devrait pouvoir
redimensionner la fenêtre, soit en faisant glisser l'angle inférieur droit de la
fenêtre, soit en cliquant sur le bouton redimensionnement dans l'angle
supérieur droit. Si cette option n'a pas été définie explicitement, le bouton
redimensionnement est indisponible, et l'angle inférieur droit non déplaçable.
Poignées de redimensionnement
Nom de fenêtre Est le nom de la nouvelle fenêtre. Il faut la nommer si vous
voulez la cibler avec des liens ou la contrôler à l'aide de JavaScript.
5
Cliquez sur OK.
6
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Ajout d’interactivité et d’animation
277
Message
Cette action fait apparaître une boîte de dialogue alerte JavaScript avec le message
que vous avez spécifié. Utilisez cette action plutôt pour fournir des informations à
l'utilisateur que pour lui présenter un choix, parce que ces boîtes de dialogues ne
disposent que d'un seul bouton (OK).
Pour utiliser l'action Message :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez l'option Message dans le menu contextuel Actions.
3
Entrez votre message dans le champ Message.
4
Cliquez sur OK.
5
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Préchargement des images
Cette action charge les images qui n'apparaissent pas immédiatement à la page (tel
que les images échangées contre des scénarios, des comportements, ou JavaScript)
dans l'antémémoire du navigateur. Cela évite des retards dus au téléchargement
lorsque les images doivent apparaître.
Remarque: L'action Intervertir une image précharge automatiquement toutes les images
sélectionnées lorsque vous cochez l'option Précharger les images dans la boîte de dialogue
Intervertir une image ; ainsi, il n'y a plus besoin d'utiliser cette option avec cette action.
Pour utiliser l'action Précharger les images :
1
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
2
Sélectionnez l'option Précharger les images dans le menu contextuel Actions.
3
Entrez le chemin ou le nom de fichier d'une image à précharger dans le champ
Fichier source d'image, ou cliquez sur Parcourir pour sélectionner un fichier.
4
Cliquez sur le bouton + (signe plus) en haut de la boîte de dialogue pour
ajouter l'image à la liste Précharger les images.
Vous devez cliquer sur le bouton + (signe plus) avant d'entrer l'image suivante,
sinon l'image que vous venez de choisir sera remplacée par celle que choisirez
ensuite.
278
Chapitre 16
5
Répétez les étapes 3 et 4 pour les images restantes que vous voulez précharger
dans la page en cours.
6
Pour supprimer une image de la liste Précharger les images, sélectionnez-la et
cliquez sur le bouton - (signe moins).
7
Cliquez sur OK.
8
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Affichage-masquage des calques
Cette action affiche, masque, ou rétablit la visibilité par défaut d'un ou plusieurs
calques. Elle sert à afficher des informations au fur et à mesure que l'utilisateur
interagit avec la page. Par exemple, lorsque le curseur passe sur l'image d'une
plante, vous pouvez afficher un calque offrant des détails sur les saisons et la région
de la plante, la quantité de soleil dont elle a besoin, la taille qu'elle peut atteindre,
etc.
Pour utiliser l'action Afficher-masquer les calques :
1
Choisissez Insertion > Calque ou cliquez sur le bouton Calque de la palette
d'objets et dessinez un calque dans la fenêtre Document.
Répétez cette étape pour créer des calques supplémentaires.
2
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
3
Sélectionnez l'action Afficher-masquer les calques dans le menu contextuel
Actions.
Lorsque cette action est indisponible, vous avez probablement sélectionné un
calque. Étant donné que les calques ne prennent pas en compte les événements
dans les deux navigateurs de la version 4.0, vous devez sélectionner un objet
différent — tel que la balise BODY ou un lien (balise A) — ou remplacez le
navigateur cible par IE 4.0 dans le menu contextuel Événements pour.
4
Sélectionnez le calque dont vous voulez modifier la visibilité dans la liste
Calques nommés.
5
Cliquez sur Affichage pour afficher le calque, Masquage pour la masquer, ou
Par Défaut pour rétablir la visibilité par défaut du calque.
6
Répétez les étapes 4 et 5 pour les calques restants dont vous voulez modifier la
visibilité maintenant.
Ajout d’interactivité et d’animation
279
7
Cliquez sur OK.
8
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
L'action Afficher-masquer les calques sert également à créer un calque de
préchargement—c'est-à-dire, un grand calque cachant d'abord le contenu de la
page, puis disparaissant à la fin du chargement de tous les éléments de la page.
Pour créer un calque de préchargement :
1
Cliquez sur le bouton Calque dans la palette d'objets, puis dessinez un grand
calque dans la fenêtre du document.
Assurez-vous que le calque couvre bien tout le contenu de la page.
280
Chapitre 16
2
Dans la palette Calque, faites glisser le nom du calque vers le haut de la liste
afin de spécifier qu'il doit s'afficher au premier plan de l'ordre de
superposition.
3
Appelez le calque chargement dans le champ texte à l'extrême gauche de
l'inspecteur de propriétés.
4
Tout en gardant le calque sélectionné, mettez sa couleur d'arrière-plan à la
même couleur que la page d'arrière-plan de l'inspecteur de propriétés.
5
Cliquez à l'intérieur du calque (qui devrait maintenant cacher le reste du
contenu de la page) et entrez un message, si nécessaire.
Par exemple, Veuillez patienter pendant le chargement de la page ou Chargement...
sont des messages d'information pour éviter que l'utilisateur pense que la page
est vide.
6
Cliquez sur la balise <body> dans le sélecteur de balises situé dans l'angle
inférieur gauche de la fenêtre du document.
7
Dans l'inspecteurs de comportements, sélectionnez Afficher-masquer les
calques dans le menu contextuel Actions.
8
Sélectionnez le calque appelé chargement à partir de la liste Calques nommés.
9
Cliquez sur Masquer.
10
Cliquez sur OK.
Interversion d'une image
Cette action échange une image contre une autre en modifiant l'attribut Src de la
balise IMG. Utilisez-la pour créer des défilements sur bouton et d'autres effets
d'image (y compris l'échange de plusieurs images à la fois).
Remarque: Puisque seul l'attribut Src est affecté par cette action, vous devriez intervertir
une image aux mêmes dimensions (hauteur et largeur) que l'original afin d'éviter des
distorsions.
Pour utiliser l'action Intervertir l'image :
1
Choisissez Insertion > Image ou cliquez sur le bouton Image de la palette
d'objets pour insérer une image.
2
Dans l'inspecteur de propriétés, entrez un nom pour l'image dans le champ
texte à l'extrême gauche.
L'action Intervertir l'image fonctionnera toujours si vous ne nommez pas vos
images (des noms sont automatiquement attribués aux images sans nom
lorsque vous associez le comportement à un objet), mais c'est plus facile de
déterminer de quelle image il s'agit dans la boîte de dialogue Intervertir
l'image si elles sont déjà toutes nommées auparavant.
3
Répétez les étapes 1 et 2 si vous souhaitez insérer des images supplémentaires.
4
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
5
Sélectionnez l'option Intervertir l'image dans le menu contextuel Actions.
6
Sélectionnez l'image dont vous voulez modifier la source dans la liste Images.
Ajout d’interactivité et d’animation
281
7
Entrez le chemin et le nom de fichier de la nouvelle image dans le champ
Définir la source à, ou cliquez sur Parcourir pour sélectionner un fichier
d'images.
8
Répétez les étapes 6 et 7 pour la modification de toute image supplémentaire.
9
Sélectionnez l'option Précharger les images pour charger les nouvelles images
dans l'antémémoire du navigateur.
Cela évite des retards dus au téléchargement lorsque les images doivent
apparaître.
10
Cliquez sur OK.
11
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Rétablissement d'une interversion d'images
Cette action rétablit la dernière série d'images interverties à leurs fichiers source
précédents. Elle est automatiquement ajoutée quand vous associez l'action
Intervertir l'image à un objet ;vous ne devriez jamais la sélectionner
manuellement.
Validation d'un formulaire
Cette action vérifie le contenu de champs texte spécifiques pour assurer que
l'utilisateur ait saisi le bon type de données. Associez cette action à des champs
formulaire individuels avec l'événement onBlur pour valider les champs au fur et à
mesure que l'utilisateur remplit le formulaire, ou associez-la au formulaire avec
l'événement onSubmit pour évaluer divers champs à la fois lorsque l'utilisateur
clique sur le bouton Soumettre. L'association de cette action à un formulaire évite
l'envoi de ce dernier au serveur au cas où il contiendrait des champs aux données
non valides.
282
Chapitre 16
Pour utiliser l'action Valider le formulaire :
1
Choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire de la
palette d'objets pour insérer un formulaire.
2
Choisissez Insertion > Objet de formulaire > Champ texte ou cliquez sur le
bouton Champ texte sur la palette d'objet pour insérer un champ texte.
Répétez cette étape si vous souhaitez insérer des champs texte supplémentaires.
3
Effectuez l'une des opérations suivantes :
Pour valider des champs individuels au fur et à mesure que l'utilisateur remplit
le formulaire, sélectionnez un champ texte et choisissez Fenêtre >
Comportements.
Pour valider des champs multiples lorsque l'utilisateur soumet le formulaire,
cliquez sur la balise <form> dans le sélecteur de balises situé dans l'angle
inférieur gauche de la fenêtre du document, puis choisissez Fenêtre >
Comportements.
4
Sélectionnez Valider le formulaire dans le menu contextuel Actions.
5
Effectuez l'une des opérations suivantes :
Si vous validez des champs individuels, sélectionnez le même champ que vous
aviez sélectionné dans la fenêtre du document à partir de la liste Champs
nommés.
Si vous validez des champs multiples, sélectionnez un champ texte à partir de
la liste Champs nommés.
6
Sélectionnez l'option Requis si le champ doit contenir des données.
7
Effectuez un choix parmi les options suivantes :
Utilisez l'option Tout si le champ est requis, mais ne doit pas contenir un type
particulier de données. Si Requis n'a pas été sélectionné, cette option n'a
aucun sens (c'est-à-dire, cela reviendrait au même si l'action Valider le
formulaire n'était pas associée au champ).
Utilisez l'option Adresse e-mail pour vérifier que le champ contient le
symbole @.
Utilisez Chiffre pour vérifier que le champ ne contient que des caractères
numériques.
Utilisez Chiffre à partir de pour vérifier que le champ ne contient que des
caractères numériques dans la plage prévue.
8
Si vous validez des champs multiples, répétez les étapes 6 et 7 pour tout champ
supplémentaire que vous souhaitez valider.
Ajout d’interactivité et d’animation
283
9
Cliquez sur OK.
Si vous validez des champs multiples au moment où l'utilisateur soumet le
formulaire, alors l'événement onSubmit apparaît automatiquement dans le
menu contextuel Événements.
10
Si vous validez des champs individuels, vérifiez bien que l'événement par
défaut est onBlur ou onChange.
Sinon, sélectionnez onBlur ou onChange dans le menu contextuel. Ces deux
événements déclenchent l'action Valider le formulaire dès que l'utilisateur s'éloigne
du champ. La différence entre ces deux est que onBlur est toujours exécuté, que
l'utilisateur ait saisi le champ ou non, tandis que onChange n'est exécuté que si
l'utilisateur a modifié le contenu du champ d'une façon ou d'une autre.onBlur est
l'événement préféré lorsque vous avez précisé que le champ est obligatoire.
Lecture et Arrêt d'un scénario
Utilisez ces deux actions pour permettre aux utilisateurs de lire et d'arrêter un
scénario en cliquant sur un lien ou un bouton ; ou de démarrer et d'arrêter un
scénario automatiquement lorsque l'utilisateur passe sur un lien, une image, ou
tout autre objet. L'action Lire le scénario est automatiquement associée à la balise
BODY avec l'événement onLoad lorsque vous sélectionnez l'option Lecture auto
dans l'inspecteur de scénario.
Pour utiliser les actions Lire le scénario et Arrêter le scénario :
1
Choisissez Fenêtre > Scénario pour ouvrir l'inspecteur de scénario et vous
assurer que votre document contient un scénario.
Si vous ne voyez pas de barre d'animation violette dans l'inspecteur de
scénario, votre document ne contient pas de scénario. Voir Création d'une
animation de scénario, page 288.
2
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
3
Sélectionnez Lire le scénario ou Arrêter le scénario dans le menu contextuel
Actions.
4
Sélectionnez le scénario concerné, ou choisissez d'arrêter tous les scénarios,
dans le menu contextuel.
5
Cliquez sur OK.
6
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
284
Chapitre 16
Atteindre une image de scénario
Cette action déplace la tête de lecture vers une image particulière. Vous pouvez
l'utiliser dans le Canal de comportement de l'inspecteur de scénario pour rejouer
des parties du scénario un certain nombre de fois (en boucle), pour créer un lien
ou un bouton Rembobiner, ou pour permettre à l'utilisateur de se rendre à
différentes parties de l'animation.
Pour utiliser l'action Atteindre l'image de scénario :
1
Choisissez Fenêtre > Scénario pour ouvrir l'inspecteur de scénario et vous
assurer que votre document contient un scénario.
Si vous ne voyez pas de barre d'animation violette dans l'inspecteur de
scénario, votre document ne contient pas de scénario. Voir Création d'une
animation de scénario, page 288.
2
Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement,
page 258.
Pour associer un comportement à une image de scénario, cliquez sur l'image
désirée dans le Canal de comportement.
3
Sélectionnez Atteindre l'image de scénario dans le menu contextuel Actions.
4
Sélectionnez le scénario désiré dans le menu contextuel Scénario.
5
Entrez un numéro d'image dans le champ Atteindre l'image.
6
Si vous ajoutez cette action au Canal de comportement d'un scénario et que
vous voulez que la partie du scénario entre Atteindre l'image et l'image actuelle
soit jouée en boucle, entrez le nombre de fois que le segment doit être joué
dans le champ Boucle.
Ce champ doit rester vide si vous n'associez pas Atteindre l'image de scénario à
une image de scénario.
7
Cliquez sur OK.
8
Vérifiez que l'événement par défaut est celui que vous voulez.
Si ce n'est pas le cas, sélectionnez-en un autre à partir du menu contextuel. Si
les événements désirés ne sont pas listés, modifiez le navigateur cible dans le
menu contextuel Événements pour.
Ajout d’interactivité et d’animation
285
Animation avec HTML dynamique
HTML dynamique, ou DHTML, décrit la capacité de modifier le style ou les
propriétés de positionnement à l'aide d'un langage de script. Le scénario emploie
HTML dynamique pour modifier les propriétés des calques et des images dans
une série d'images dans le temps. Utilisez les scénarios pour créer des animations
qui n'ont pas besoin de contrôles ActiveX, d'appliquette Java, ou de plug-in.
Les scénarios créent une animation en modifiant la position, la taille, la visibilité et
l'ordre de superposition d'un calque dans le temps. Ils sont également utiles pour
produire d'autres actions souhaitées après le chargement d'une page. Par exemple,
les scénarios peuvent modifier le fichier source d'une image, et elles peuvent
exécuter des comportements à un moment donné. Les fonctions de scénario ne
fonctionnent que dans des navigateurs de la version 4.0 ou ultérieurs.
Ouvrez l'inspecteur HTML pour afficher le code JavaScript généré par le scénario.
Le code du scénario se trouve dans la fonction MM_initTimelines, à l'intérieur d'une
balise SCRIPT à la HEAD du document.
Lorsque vous modifiez l'HTML d'un document contenant des scénarios, faites
attention de ne pas déplacer, renommer ou supprimer des éléments auxquels le
scénario fait référence.
Utilisation de l’inspecteur de scénarios
Cet inspecteur représente les propriétés des calques et des images dans le temps.
Choisissez Fenêtre > Scénarios pour l'ouvrir. Voir aussi Animation avec HTML
dynamique, page 286.
Cliquez du bouton droit de la souris (Windows) ou cliquez en maintenant la
touche Contrôle enfoncée (Macintosh) sur l'inspecteur de scénarios pour ouvrir
un menu contextuel contenant toutes les commandes appropriées.
Tête de lecture
Montre quelle image du scénario est actuellement affichée sur la
page.
Menu contextuel du scénario
Tête de lecture
Spécifie les scénarios du document qui sont affichés
dans l'inspecteur de scénarios.
Menu contextuel Scénario
Canaux d'animation
Affiche les barres animant les calques et les images.
Montre la durée de chaque objet. Une seule ligne peut
comprendre plusieurs barres représentant différents objets. Un objet dans une
image donnée ne peut être contrôlé par différentes barres.
Barres d'animation
286
Chapitre 16
Sont les images dans une barre où vous avez spécifié les propriétés
(telle la position) de l'objet. Dreamweaver calcule les valeurs intermédiaires pour
les images situées entre les images-clés. Les images-clés sont indiquées par les petits
cercles.
Images-clés
Canal de comportement Est le canal contenant les comportements qui devraient
être exécutés dans une image particulière du scénario.
Canal de comportement
Indique le nombre d'images que chaque barre occupe. Le
nombre entre les boutons Retour et Lecture indique l'image en cours. Vous
pouvez contrôler la durée de l'animation en déterminant le nombre total d'images
et le nombre d'images par seconde (ips). La configuration par défaut de 15
images/sec est une bonne vitesse moyenne pour la plupart des navigateurs qui sont
exécutés sous des systèmes Windows et Macintosh communs. Des vitesses
supérieures n'améliorent pas forcément la performance. Les navigateurs lisent
toujours toutes les images de l'animation, même si elles ne peuvent atteindre la
cadence spécifiée par le système de l'utilisateur.
Nombre d'images
Rembobiner
Déplace la tête de lecture vers le premier cadre du scénario.
Déplace la tête de lecture une image vers la gauche. Cliquez sur Retour en
maintenant le bouton de la souris enfoncé pour jouer le scénario en sens inverse.
Retour
Lecture Déplace
la tête de lecture une image vers la droite. Cliquez sur Lecture en
maintenant le bouton de la souris enfoncé pour jouer le scénario continuellement.
Lecture auto Entraîne la lecture automatique du scénario lors du chargement de la
page en cours dans un navigateur. Lecture auto attache un comportement à la
balise BODY de la page qui exécute l'action de lecture du scénario lors du
chargement de la page.
Entraîne la lecture en boucle infinie du scénario en cours lorsque la page
est ouverte dans un navigateur. La lecture en boucle insère le comportement
Atteindre l'image de scénario dans le Canal de comportement après la dernière
image de l'animation. Double-cliquez sur l'indicateur dans ce cadre pour modifier
les paramètres de ce comportement et changez le nombre de boucles.
Boucle
Ajout d’interactivité et d’animation
287
Création d'une animation de scénario
Les scénarios créent une animation en modifiant la position, la taille, la visibilité,
et l'ordre de superposition des calques. Ils peuvent également modifier les fichiers
source des images.
Les scénarios peuvent déplacer seulement des calques. Afin de déplacer des images
ou du texte, créez un calque à l'aide de l'outil Calque sur la palette d'objets, puis
insérez des images, du texte, et d'autres types de contenu dans le calque. Voir
Création de calques, page 214.
Pour créer une animation de scénario :
1
Si vous voulez animer un calque, déplacez-le vers l'emplacement où il devrait
se trouver au démarrage de l'animation.
2
Choisissez Fenêtre > Scénarios, ou cliquez sur le bouton Scénario du lanceur.
3
Sélectionnez le calque ou l'image à animer.
Assurez-vous d'avoir sélectionné l'élément souhaité. Cliquez sur l'indicateur
de calque ou utilisez la palette de calques pour en sélectionner un. Voir aussi
Manipulation des calques, page 220. Lorsqu'un calque est sélectionné, des
poignées apparaissent (voir l'illustration suivante).
Cliquez sur
l'indicateur de
calque pour le
sélectionner
Bouton
Calque
Calque
sélectionné
contenant une
image
Lorsque vous cliquez sur le calque même, un curseur clignotant se place à
l'intérieur du calque, mais cela n'entraîne pas la sélection du calque.
288
Chapitre 16
4
Choisissez Modifier > Ajouter objet à un scénario, ou faites glisser l'objet
sélectionné dans l'inspecteur de scénarios.
Une barre apparaît dans le premier canal du scénario. Le nom du calque ou de
l'image y sera affiché.
Si vous travaillez avec une image, la seule propriété modifiable est son fichier
source dans l'inspecteur de propriétés. Les étapes suivantes ne s'appliquent
pas. Voir Modification des propriétés d'une image et d'un calque à l'aide des
scénarios, page 291.
5
Cliquez sur l'indicateur d'image-clé à la fin de la barre.
6
Déplacez le calque vers l'emplacement où il devrait se trouver à la fin de
l'animation.
7
Si vous voulez que le calque se déplace en courbe, sélectionnez sa barre
d'animation et appuyez sur la touche Contrôle en cliquant (Windows) ou la
touche Commande en cliquant (Macintosh) pour ajouter une image-clé à la
position du curseur, ou cliquez sur un cadre au milieu de la barre d'animation
et choisissez Ajouter image-clé du menu contextuel.
Répétez cette étape pour définir des images-clés supplémentaires.
8
Maintenez le bouton Lecture enfoncé pour avoir un aperçu de l'animation sur
la page.
Répétez la procédure pour ajouter des calques et des images supplémentaires
au scénario et pour créer une animation plus complexe.
Création d'un scénario en faisant glisser un chemin
Si vous voulez créer une animation avec un chemin complexe, c'est plus efficace
d'enregistrer le chemin en faisant glisser le calque plutôt que de créer des imagesclés individuelles.
Pour créer un scénario en faisant glisser un chemin :
1
Choisissez Insertion > Calque pour créer un calque.
2
Déplacez le calque vers l'emplacement où il devrait se trouver au début de
l'animation.
Assurez-vous d'avoir sélectionné l'élément souhaité. Cliquez sur l'indicateur
de calque ou utilisez la palette de calques pour en sélectionner un. Voir aussi
Manipulation des calques, page 220.
3
Choisissez Modifier > Enregistrer le chemin du calque.
4
Faites le tour de la page avec le calque pour créer un chemin.
Ajout d’interactivité et d’animation
289
5
Relâchez la souris à l'emplacement où l'animation devrait s'arrêter.
Dreamweaver ajoute une barre d'animation au scénario avec le nombre
adéquat d'images-clés.
6
Dans l'inspecteur de scénario, cliquez sur le bouton Rembobiner ; puis
maintenez le bouton Lecture enfoncé pour visualiser votre animation.
Modification de scénarios
Après avoir défini les composants de base d'un scénario, vous pouvez effectuer des
modifications utiles tel qu'ajouter et supprimer des images, changer l'heure de
démarrage de l'animation, etc.
Pour modifier un scénario, effectuez l'une des opérations suivantes :
290
Chapitre 16
Pour rallonger la durée de l'animation, faites glisser l'indicateur de l'image de
fin. Toutes les images-clés de l'animation se déplacent en groupe pour que
leurs positions relatives restent constantes. Appuyez sur Contrôle (Windows)
ou Commande (Macintosh) lorsque vous faites glisser l'indicateur d'image de
fin pour éviter que les autres images-clés bougent.
Pour que le calque atteigne la position de l'image-clé plus tôt ou plus tard,
déplacez son indicateur vers la droite ou la gauche dans la barre.
Pour modifier l'heure de démarrage d'une animation, sélectionnez une ou
toutes les barres associées à l'animation (appuyez sur Maj pour sélectionner
plusieurs barres à la fois) et faites-les glisser vers la gauche ou vers la droite.
Pour déplacer tout l'emplacement d'un chemin d'animation, sélectionnez la
barre entière, puis faites glisser l'objet sur la page. Dreamweaver met à jour la
position de toutes les images-clés. Toute modification avec une barre entière
sélectionnée entraînera la modification de toutes les images-clés.
Pour ajouter ou supprimer des images du scénario, choisissez Modifier >
Scénario > Ajouter image ou Supprimer image.
Pour une lecture automatique du scénario lors de l'ouverture de la page dans
un navigateur, cliquez sur Lecture auto. Cette option joint un comportement à
la page exécutant l'action Lecture du scénario lors du chargement de la page.
Pour une lecture en boucle du scénario, cliquez sur Boucle. La lecture en
boucle insère l'action Atteindre l'image du scénario dans le Canal de
comportement après le dernier cadre de l'animation. Vous pouvez modifier les
paramètres de ce comportement afin de définir le nombre de boucles.
Modification des propriétés d'une image et d'un calque à l'aide
des scénarios
En plus du déplacement des calques à l'aide de scénarios, vous pouvez modifier le
fichier source d'une image, ainsi que la visibilité, la taille, et l'ordre de
superposition d'un calque.
Pour modifier les propriétés d'une image et d'un calque à l'aide d'un scénario :
1
Dans l'inspecteur de scénario, effectuez l'une des opérations suivantes :
Sélectionnez une image-clé existante dans la barre qui contrôle l'objet que
vous souhaitez modifier. (Les images de début et de fin sont des images-clés).
Pour créer une nouvelle image-clé, cliquez sur une image au milieu de la barre
d'animation et choisissez Modifier > Scénario > Ajouter une image-clé, ou
appuyez sur la touche Contrôle (Windows) ou sur la touche Commande
(Macintosh) tout en cliquant sur une image dans la barre d'animation.
2
Définissez les nouvelles propriétés de l'objet en choisissant l'une des options
suivantes :
Pour changer le fichier source d'une image, cliquez sur l'icône du dossier à côté
de la boîte Src dans l'inspecteur de propriétés pour parcourir et sélectionner
une nouvelle image.
Pour modifier la visibilité d'un calque, choisissez Afficher, Masquer ou Hériter
dans le menu contextuel de l'inspecteur de propriétés. Voir aussi Modification
de la visibilité des calques, page 225.
Pour modifier la taille d'un calque, faites glisser ses poignées de
redimensionnement, ou entrez de nouvelles valeurs dans les boîtes Largeur et
Hauteur de l'inspecteur de propriétés. Internet Explorer 4.0 est actuellement
le seul navigateur capable de modifier dynamiquement la taille d'un calque.
Pour modifier l'ordre de superposition d'un calque, entrez une nouvelle valeur
dans le champ Index Z, ou utilisez la palette Calque pour modifier l'ordre de
superposition du calque en cours. Voir aussi Modification de l'ordre de
superposition des calques, page 225.
3
Maintenez le bouton Lecture enfoncé pour afficher l'animation.
Le calque actuellement sélectionné reste toujours visible et en haut de l'ordre de
superposition. Désélectionnez tous les calques afin de permettre au scénario de
contrôler l'ordre de superposition ou la visibilité.
Ajout d’interactivité et d’animation
291
Utilisation de scénarios multiples
Au lieu d'essayer de contrôler toute l'action à l'aide d'un seul scénario, il est plus
facile de travailler avec des scénarios séparés contrôlant des parties discrètes de la
page. La page peut également inclure des éléments interactifs déclenchant des
scénarios différents. Par exemple, des boutons peuvent déclencher des animations
de scénario différentes.
Pour gérer plusieurs scénarios, utilisez l'une des options suivantes :
Pour créer un nouveau scénario, choisissez Modifier > Scénario > Ajouter un
scénario.
Pour supprimer un scénario, choisissez Modifier > Scénario > Supprimer le
scénario.
Pour renommer un scénario, choisissez Modifier > Scénario > Renommer
scénario, ou entrez un nouveau nom dans le menu déroulant Scénario.
Pour afficher un scénario différent dans l'inspecteur de scénarios, choisissez-en
un nouveau du menu déroulant Scénarios.
Copie et collage d'animations
Une fois que vous avez obtenu une séquence d'images qui vous plaît, vous pouvez
la copier et la coller dans une autre zone du scénario en cours, dans un autre
scénario du document en cours, ou dans un scénario d'un autre document. Il est
possible de copier et de coller plusieurs séquences à la fois.
Pour couper ou copier et coller des séquences d'animation :
292
Chapitre 16
1
Cliquez sur une barre d'animation pour sélectionner une séquence. Pour en
sélectionner plusieurs, appuyez sur Maj en cliquant, ou sur Ctrl-A (Windows)
ou Commande-A (Macintosh) pour les sélectionner toutes.
2
Copiez ou coupez la sélection.
3
Effectuez l'une des opérations suivantes :
Déplacez la tête de lecture vers un autre emplacement du scénario en cours.
Sélectionnez un autre scénario dans le menu contextuel Scénario.
Ouvrez un autre document ou créez-en un nouveau, puis cliquez sur
l’inspecteur de scénario.
4
Collez la sélection dans le scénario.
Les barres d'animation d'un même objet ne peuvent se chevaucher parce
qu'un calque ne peut se trouver à deux endroits à la fois (de même qu'une
image ne peut avoir deux sources différentes à la fois).Si elle se chevauchent
quand même, Dreamweaver déplace automatiquement la sélection vers le
premier cadre n'étant pas superposé.
Deux principes à garder à l'esprit lorsque l'on colle une séquence d'animation
dans un autre document :
Lorsque vous copiez une séquence d'animation pour un calque et que le nouveau
document contient déjà un calque du même nom, Dreamweaver applique les
propriétés d'animation au calque existant dans le nouveau document.
Lorsque vous copiez une séquence d'animation pour un calque et que le
nouveau document ne contient pas encore de calque du même nom,
Dreamweaver collera le calque et son contenu à partir du document d'origine
en même temps que la séquence d'animation. Pour appliquer la séquence
d'animation collée à un autre calque dans le nouveau document, choisissez
Modifier objet du menu contextuel et sélectionnez le nom du deuxième calque
dans le menu contextuel. Supprimez le calque collé si nécessaire. Voir
Application d'une séquence d'animation à un objet différent, page 293.
Application d'une séquence d'animation à un objet différent
Pour gagner du temps, vous pouvez créer une séquence d'animation une fois et
l'appliquer aux calques restants du document.
Pour appliquer une séquence d'animation existante à d'autres objets :
1
Dans l'inspecteur de scénario, sélectionnez la séquence d'animation à copier et
copiez-la.
2
Cliquez sur n'importe quel cadre de l'inspecteur de scénario et collez la
séquence.
3
Cliquez du bouton droit (Windows) ou appuyez sur la touche Contrôle
(Macintosh) en cliquant sur la séquence d'animation collée et choisissez
Modifier objet dans le menu contextuel.
4
Choisissez un autre objet dans le menu de la boîte de dialogue qui apparaît,
puis cliquez sur OK.
5
Répétez les étapes 2 à 4 pour tous les objets restants qui doivent suivre la
même séquence d'animation.
Vous pouvez changer d'avis sur le calque à animer après la création d'une séquence
d'animation ; suivez simplement les étapes 3 et 4 ci-dessus (inutile de copier ou coller).
Ajout d’interactivité et d’animation
293
Utilisation de comportements dans les scénarios
Placez des comportements dans les scénarios pour qu'ils soient exécutés dans une
image particulière du scénario.
Pour placer un comportement dans un scénario :
1
Cliquez deux fois sur une image dans le Canal des comportements dans
l'inspecteur de scénarios.
2
Utilisez l'inspecteur de comportements pour définir le comportement.
Le seul événement qui peut déclencher une action dans un scénario est
l'animation qui atteint un certain numéro d'image, un événement onFrame7 par
exemple.
Le comportement peut avoir une influence sur tout objet de la page, non
seulement sur ceux dans le scénario. Visualisez le scénario dans un navigateur pour
voir le fonctionnement du comportement. Vous ne pouvez visualiser les
comportements dans Dreamweaver.
Actions de comportement pour contrôler les scénarios
Associez les actions de comportement suivantes à un lien, un bouton, ou un autre
objet pour contrôler les scénarios. Pour créer des effets intéressants, vous pouvez
placer les comportements contenant ces actions dans le canal de comportement.
Par exemple, vous pouvez faire en sorte qu'un scénario s'arrête de lui-même. Voir
aussi Présentation des comportements, page 258.
Entraînera un saut du scénario vers une certaine
image. La case à cocher Boucle dans l’inspecteur de scénario ajoute l'action
Atteindre l'image de scénario après la dernière image de l'animation, ce qui le fera
retourner à l'image 1 et redémarrer l'animation.
Atteindre l'image de scénario
Lit un scénario à partir du premier cadre. La case à cocher Lecture
auto dans l'inspecteur de scénarios exécute l'action Lecture du scénario lors du
chargement de la page.
Lire le scénario
Arrêt du scénario
Arrête le scénario.
Changement de nom des scénarios
Pour renommer le scénario affiché dans l'inspecteur de scénarios, choisissez
Modifier > Scénario > Renommer, puis entrez un nouveau nom, ou entrez un
nouveau nom dans le menu contextuel Nom de scénario.
Si votre document contient l'action de comportement Lire le scénario (par
exemple, s'il contient un bouton sur lequel l'utilisateur doit cliquer pour démarrer
le scénario), vous devez modifier le comportement pour refléter le nouveau nom
de scénario.
294
Chapitre 16
Conseils d'animation pour les scénarios
Les suggestions suivantes peuvent améliorer la performance de vos animations et
faciliter leur création :
Affichez et masquez les calques au lieu de modifier le fichier source de
plusieurs animations d'images. L'échange du fichier source d'une image peut
ralentir l'animation parce que la nouvelle image doit être téléchargée. Il n'y
aura pas de pauses ou d'images manquantes si toutes les images sont
téléchargées en même temps dans les calques masqués avant l'exécution de
l'animation.
Prolongez les barres d'animation pour créer un mouvement plus fluide. Si
l'animation paraît saccadée et que les images sautent entre les positions, faites
glisser la dernière image de la barre d'animation du calque pour étendre le
mouvement sur plus d'images. La prolongation de la barre d'animation crée
plus de points de données entre le point de début et de fin du mouvement et
ralentit également le déplacement de l'objet. Essayez d'accroître le nombre
d'images/sec (ips) pour améliorer la vitesse, mais sachez que la plupart des
navigateurs exécutés sur des systèmes moyens ne peuvent guère aller plus vite
que 15 ips. Testez l'animation sur différents systèmes avec les différents
navigateurs pour trouver la meilleure configuration.
N'essayez pas d'animer des bitmaps trop volumineux. Améliorez la vitesse
d'animation en évitant le déplacement d'images volumineuses. Créez plutôt
des composites et déplacez des petites parties de l'image. Par exemple, montrez
le déplacement d'une voiture en n'animant que les roues.
Créez des animations simples. Ne créez pas d'animations qui demandent
davantage que ce que les navigateurs actuels sont capables de fournir. Les
navigateurs lisent toujours toutes les images d'une animation de scénario,
même si la performance du système ou de l'Internet baisse.
Ajout d’interactivité et d’animation
295
Ajout d'animations, d'appliquettes et d'autres
éléments multimédia
Pour insérer une appliquette Java, une animation Shockwave, Flash Player, ou
toute autre commande ActiveX ou plug-in Netscape dans une page, placez le
curseur à l'endroit désiré pour l'objet, puis cliquez sur le bouton approprié dans la
palette d'objet. Les boutons de la palette d'objets créent le code HTML nécessaire
à l'affichage des objets sur la page. Utilisez l'inspecteur de propriétés pour spécifier
le fichier source, les dimensions, et d'autres paramètres.
Remarque: Il n'existe pas de norme pour l'identification des fichiers source de contrôles
ActiveX qui soit unanimement acceptée. Consultez la documentation sur le contrôle ActiveX
que vous utilisez, afin de savoir quels paramètres choisir.
Insertion d'animations Shockwave
Shockwave, la norme Macromedia pour les multimédia interactifs sur le web, est
un format compressé permettant le téléchargement rapide des fichiers multimédia
créés dans Macromedia Director et la prise en charge par les navigateurs les plus
populaires.
Le logiciel qui permet d'exécuter les animations Shockwave est disponible aussi
bien sous forme de plug-in Netscape, que sous forme de contrôle ActiveX.
Lorsque vous insérez une animation Shockwave, Dreamweaver utilise les deux
balises OBJECT (pour le contrôle ActiveX) et EMBED (pour le plug-in) afin d'obtenir
les meilleurs résultats dans tous les navigateurs. Lorsque vous apportez des
modifications à l'animation dans l'inspecteur de propriétés, Dreamweaver fait
correspondre vos entrées aux paramètres appropriés pour les balises OBJECT et
EMBED.
Pour insérer une animation Shockwave :
1
Placez le curseur là où vous voulez insérer l'animation Shockwave.
2
Cliquez sur le bouton Shockwave de la palette d'objets.
3
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation.
4
Dans l'inspecteur de propriétés, entrez la largeur et la hauteur de l'animation
dans les boîtes L et H.
Ce sont les seules propriétés requises. Voir Propriétés Shockwave, page 297
pour plus de détails sur les autres propriétés.
296
Chapitre 16
Propriétés Shockwave
Pour obtenir les meilleurs résultats dans Internet Explorer et Netscape,
Dreamweaver insère les animations Shockwave en utilisant les balises OBJECT et
EMBED. (OBJECT est la balise définie par Microsoft pour les contrôles ActiveX;
EMBED est la balise définie par Netscape pour les plug-ins.) Double-cliquez sur une
animation Shockwave pour afficher les propriétés dans l'inspecteur de propriétés.
Voir aussi Insertion d'animations Shockwave, page 296.
Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche
d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
Spécifie un nom pour identifier l'animation pour le script. Entrez un nom
dans le champ sans titre, à l'extrême gauche de l'inspecteur de propriétés.
Nom
Spécifient la largeur et la hauteur de l'animation en pixels. Vous pouvez
aussi spécifier les unités suivantes : pc (picas), pt (points), in (pouces), mm
(millimètres), cm (centimètres), ou % (pourcentage de la valeur du parent). Les
abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
L et H
Fichier Spécifie le chemin au fichier d'animation Shockwave. Entrez une valeur, ou
cliquez sur le dossier à droite de la boîte, pour parcourir les fichiers.
Détermine les balises utilisées pour identifier l'animation Shockwave. Vous
pouvez choisir les balises OBJECT et EMBED, ou l'une ou l'autre séparément. La
valeur par défaut, OBJECT et EMBED, est recommandée.
Balise
Détermine l'alignement de l'animation sur la page. Voir Alignement des
éléments, page 190 pour une description de chaque option.
Aligner
Spécifie une couleur d'arrière-plan pour la zone d'animation. Cette
couleur apparaît également tant que l'animation ne joue pas (au cours du
chargement et à la fin de l'animation).
Couleur ar-pl
ID Définit
le paramètre facultatif ID d'ActiveX. Ce paramètre est le plus souvent
utilisé pour transmettre des informations entre les contrôles ActiveX.
Bordures
Spécifie la largeur de la bordure de l'animation.
et Espace H Spécifient le nombre de pixels d'espace blanc au-dessus, audessous et de chaque côté de l'animation.
Espace V
(OBJET seulement) Spécifie une image à afficher si le navigateur de
l'utilisateur ne prend pas en charge les contrôles ActiveX.
Image sec.
Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez entrer des
paramètres supplémentaires à transmettre à l'animation Shockwave. L'animation
Shockwave doit être écrite de façon à pouvoir recevoir ces paramètres. Voir À
propos des paramètres, page 305.
Ajout d’interactivité et d’animation
297
Insertion d'animations Flash Player
La technologie Flash de Macromedia est le leader pour la diffusion de graphiques
et d'animations vectorielles. Flash Player est disponible sous forme de plug-in
Netscape et sous forme de contrôle ActiveX pour Internet Explorer, et il a été
incorporé dans les versions les plus récentes de Netscape Navigator, Windows 98,
et America Online.
Lorsque vous insérez une animation Flash Player, Dreamweaver utilise les deux
balises OBJECT (définie par Microsoft pour les contrôles ActiveX) et EMBED (définie
par Netscape) afin d'obtenir les meilleurs résultats dans tous les navigateurs.
Lorsque vous apportez des modifications à l'animation dans l'inspecteur de
propriétés, Dreamweaver fait correspondre vos entrées aux paramètres appropriés
pour les balises OBJECT et EMBED.
Pour insérer une animations Flash Player :
1
Placez le curseur là où vous voulez insérer l'animation.
2
Cliquez sur le bouton Flash Player dans la palette d'objets.
3
Dans la boîte de dialogue qui s'affiche, sélectionnez un fichier d'animation.
4
Dans l'inspecteur de propriétés, entrez la largeur et la hauteur de l'animation
dans les boîtes L et H.
Ce sont les seules propriétés requises. Voir Propriétés Flash Player, page 298
pour plus de détails sur les autres propriétés.
Propriétés Flash Player
Pour garantir les meilleurs résultats dans Internet Explorer et Netscape,
Dreamweaver insère les animations Flash Player en utilisant les balises OBJECT et
EMBED. (OBJECT est la balise définie par Microsoft pour les contrôles ActiveX;
EMBED est la balise définie par Netscape pour les plug-ins.) Double-cliquez sur une
animation Flash Player pour afficher les propriétés suivantes dans l'inspecteur de
propriétés. Voir aussi Insertion d'animations Flash Player, page 298.
Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche
d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
Spécifie un nom pour identifier l'animation pour le script. Entrez un nom
dans le champ sans titre, à l'extrême gauche de l'inspecteur de propriétés.
Nom
Spécifient la largeur et la hauteur de l'animation en pixels. Vous pouvez
aussi spécifier les unités suivantes : pc (picas), pt (points), in (pouces), mm
(millimètres), cm (centimètres), ou % (pourcentage de la valeur du parent). Les
abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
L et H
Spécifie le chemin au fichier d'animation Flash Player. Entrez une valeur,
ou cliquez sur le dossier à droite de la boîte, pour parcourir les fichiers.
Fichier
298
Chapitre 16
Détermine les balises utilisées pour identifier l'animation. Vous pouvez
choisir les balises OBJECT et EMBED, ou l'une ou l'autre séparément. La valeur par
défaut, OBJECT et EMBED, est recommandée.
Balise
Détermine l'alignement de l'animation sur la page. Voir Alignement des
éléments, page 190 pour une description de chaque option.
Aligner
Spécifie une couleur d'arrière-plan pour la zone d'animation. Cette
couleur apparaît également tant que l'animation ne joue pas (au cours du
chargement et à la fin de l'animation).
Couleur ar-pl
ID Définit
le paramètre facultatif ID d'ActiveX. Ce paramètre est le plus souvent
utilisé pour transmettre des informations entre les contrôles ActiveX.
Bordures
Spécifie la largeur de la bordure de l'animation.
et Espace H Spécifient le nombre de pixels d'espace blanc au-dessus, audessous et de chaque côté de l'animation.
Espace V
(OBJET seulement) Spécifie une image à afficher si le navigateur de
l'utilisateur ne prend pas en charge les contrôles ActiveX.
Image sec.
Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez entrer des
paramètres supplémentaires à transmettre à l'animation. L'animation doit être
écrite de façon à pouvoir recevoir ces paramètres. Voir À propos des paramètres,
page 305.
Définit le paramètre QUALITY pour les balises OBJECT et EMBED qui
exécutent l'animation. Consultez la documentation de Flash pour voir une
description de ces options. Les choix sont Basse, Basse auto, Haute auto, et Haute.
Qualité
Définit le paramètre SCALE pour les balises OBJECT et EMBED qui exécutent
l'animation. Consultez la documentation de Flash pour voir une description de
ces options.
Échelle
Lecture automatique
Lit l'animation automatiquement lors du chargement de la
page.
Boucle
Joue l'animation en boucle, indéfiniment.
Insertion et modification d'objets Aftershock
Aftershock est un utilitaire de Macromedia qui génère tout le code HTML
nécessaire à l'exécution de Shockwave ou des animations Flash Player. Vous
pouvez ouvrir les fichiers créés par Aftershock dans Dreamweaver, puis coller le
contenu dans d'autres documents de Dreamweaver. Pour éditer les objets
Aftershock, installez Aftershock dans votre système, puis lancez Aftershock à partir
de l'inspecteur de propriétés.
Ajout d’interactivité et d’animation
299
Pour insérer des objets Aftershock dans Dreamweaver :
1
Dans Dreamweaver, ouvrez un fichier HTML créé par Aftershock.
Les éléments Aftershock apparaissent comme des objets non modifiables dans
Dreamweaver. Si un objet inclut une image d'aperçu, Dreamweaver l'affiche.
2
Copiez le contenu du fichier dans un autre document de Dreamweaver.
Pour éditer un objet Aftershock :
1
Double-cliquez sur un objet Aftershock pour ouvrir l'inspecteur de propriétés.
2
Cliquez sur Lancer Aftershock.
3
Éditez le fichier dans Aftershock, enregistrez les modifications et quittez
l'utilitaire.
Lorsque vous quittez Aftershock, Dreamweaver met à jour le contenu de
l'objet Aftershock avec les nouvelles informations.
Propriétés du plug-in Netscape
Après avoir inséré un plug-in de Netscape, utilisez l'inspecteur de propriétés pour
définir les paramètres. Double-cliquez sur un plug-in de Netscape pour voir les
propriétés suivantes dans l'inspecteur de propriétés.
Voir aussi Ajout d'animations, d'appliquettes et d'autres éléments multimédia,
page 296.
Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche
d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
Spécifie un nom pour identifier le plug-in pour le script. Entrez un nom
dans le champ sans titre, à l'extrême gauche de l'inspecteur de propriétés.
Plug-in
L et H Spécifient,
en pixels, la largeur et la hauteur allouées à l'objet dans la page.
Vous pouvez aussi spécifier les unités suivantes : pc (picas), pt (points), in
(pouces), mm (millimètres), cm (centimètres), ou % (pourcentage de la valeur du
parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
Src Spécifie le fichier des données source. Entrez un nom de fichier, ou cliquez sur
l'icône de dossier et choisissez un fichier.
Spécifie l'URL pour l'attribut PLUGINSPAGE. Entrez l'URL (en
entier) du site où les utilisateurs peuvent télécharger le plug-in. Si l'utilisateur qui
consulte votre page ne possède pas le plug-in, le navigateur essaie de le télécharger
à partir de cet URL.
URL du plug-in
Détermine l'alignement de l'objet sur la page. Voir Alignement des
éléments, page 190 pour une description de chaque option.
Aligner
300
Chapitre 16
Sec. Spécifie le contenu de remplacement à afficher, si le navigateur de l'utilisateur
ne prend pas en charge la balise EMBED. Si vous choisissez une image, elle est
présentée en utilisant la balise NOEMBED. Si vous tapez du texte, il est présenté en
utilisant l'attribut ALT de la balise EMBED.
et Espace H Spécifient la quantité d'espace blanc en pixels au-dessus, audessous et de chaque côté du plug-in.
Espace V
Bordures
Spécifie la largeur de la bordure du plug-in.
Paramètres Ouvre une boîte de dialogue dans laquelle vous entrez les paramètres
supplémentaires à transmettre au plug-in de Netscape. Nombreux sont les plug-in
qui répondent à des paramètres particuliers. Le plug-in Flash, par exemple, inclut
des paramètres pour BGCOLOR, SALIGN, et SCALE. Voir À propos des paramètres,
page 305.
Lecture du plug-in dans la fenêtre du document
Vous pouvez visualiser des animations qui font appel aux plug-in—c'est-à-dire, les
éléments qui utilisent la balise EMBED—directement dans la fenêtre du document.
(Il est impossible de visualiser des animations qui font appel aux commandes
ActiveX). Vous pouvez jouer tous les éléments plug-in à la fois pour savoir
comment l'utilisateur verra la page, ou vous pouvez les jouer individuellement
pour vous assurer que vous avez incorporé le bon élément multimédia.
Pour jouer des animations, les plug-in adéquats doivent être installé sur votre
machine. Dreamweaver cherche automatiquement tous les plug-in installés au
démarrage, cherchant d'abord dans le dossier Configuration/Plugins, puis dans les
dossiers de plugins de tous les navigateurs installés.
Pour lire le contenu du plug-in dans la fenêtre du document :
1
Insérez un ou plusieurs éléments multimédia en choisissant Insertion >
Shockwave, Insertion > Flash, ou Insertion > Plug-in.
2
Effectuez un choix parmi les options suivantes :
Sélectionnez l'un des éléments multimédia insérés et choisissez Affichage >
Plug-in > Lecture.
Choisissez Affichage > Plug-in > Lire tout pour jouer tous les éléments
multimédia de la page qui font appel à des plug-in.
Pour arrêter la lecture du contenu plug-in :
Sélectionnez un événement multimédia et choisissez Affichage > Plug-in >
Arrêt, ou choisissez Affichage > Plug-in > Arrêter tout pour arrêter la lecture
de tout contenu plug-in.
Ajout d’interactivité et d’animation
301
Dépannage
Si, après avoir suivi les étapes menant à la lecture du contenu plug-in dans la
fenêtre du document, une partie ne joue pas, essayez l'opération suivante :
Vérifiez que le plug-in associé soit bien installé sur votre machine, et que sa
version est compatible avec la version de l'animation.
Ouvrez le fichier appelé badplugins.cfg dans un éditeur de texte et vérifiez si le
plug-in en question est listé. Ce fichier surveille les plug-in qui peuvent causer
un blocage de Dreamweaver ou tout autre problème sérieux. (Si vous avez
constaté des problèmes avec un plug-in particulier, il serait souhaitable de
l'ajouter à ce fichier).
Vérifiez que vous avez suffisamment de mémoire (et sur le Macintosh, que
suffisamment de mémoire est allouée à Dreamweaver). Certains plug-in
nécessitent 2 à 5 MB de mémoire supplémentaire afin de fonctionner.
Propriétés ActiveX
Après l'insertion d'un objet ActiveX, utilisez l'inspecteur de propriétés pour
définir d'autres paramètres. Il n'existe pas de norme pour l'identification des
fichiers de données des contrôles ActiveX qui soit unanimement acceptée.
Consultez la documentation sur le contrôle ActiveX que vous utilisez, afin de
savoir quel paramètre choisir. Cliquez sur Paramètres dans l'inspecteur de
propriétés, afin d'entrer des valeurs pour les propriétés qui n'apparaissent pas dans
l'inspecteur de propriétés.
Double-cliquez sur un objet ActiveX pour voir les propriétés dans l'inspecteur de
propriétés.
Voir aussi Ajout d'animations, d'appliquettes et d'autres éléments multimédia,
page 296.
Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche
d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
Spécifie un nom que vous entrez pour identifier l'objet ActiveX pour le
script. Entrez un nom dans le champ sans titre, à l'extrême gauche de l'inspecteur
de propriétés.
ActiveX
L et H Spécifient
la largeur et la hauteur en pixels de l'objet. Vous pouvez aussi
spécifier les unités suivantes : pc (picas), pt (points), in (pouces), mm
(millimètres), cm (centimètres), ou % (pourcentage de la valeur du parent). Les
abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
302
Chapitre 16
Identifie le contrôle ActiveX au navigateur. Entrez la valeur vousmême, ou choisissez-en une à partir du menu contextuel. Lorsque la page est
chargée, le navigateur utilise l'ID de classe pour localiser le contrôle ActiveX requis
par l'objet ActiveX associé à la page. Si le navigateur ne peut pas localiser le
contrôle ActiveX spécifié, il essaie de le télécharger à partir de l'emplacement
spécifié dans le champ Base.
ID de classe
Base Spécifie l'URL qui contient le contrôle ActiveX. Internet Explorer télécharge
le contrôle ActiveX à partir de cet emplacement si il n'a pas été installé sur le
système de l'utilisateur.
Incorporer Fait que Dreamweaver ajoute une balise EMBED à l'intérieur de la balise
OBJECT pour le contrôle ActiveX. Si le contrôle ActiveX dispose d'un plug-in de
Netscape équivalent, la balise EMBED active le plug-in. Dreamweaver affecte les
valeurs que vous avez entrées comme propriétés d'ActiveX aux plug-ins de
Netscape équivalents.
Src Définit
le fichier de données à utiliser en tant que plug-in de Netscape, si
l'option Incorporer est activée. Si vous n'entrez pas de valeur, Dreamweaver essaie
d'en déterminer une à partir des propriétés d'ActiveX entrées précédemment.
Détermine l'alignement de l'objet sur la page. Voir Alignement des
éléments, page 190 pour une description de chaque option.
Aligner
Img sec. Spécifie
balise OBJECT.
une image à afficher si le navigateur ne prend pas en charge la
et Espace H Spécifient la quantité d'espace vierge en pixels au-dessus, audessous et de chaque côté de l'objet.
Espace V
Spécifie un fichier de données que le contrôle ActiveX doit charger. De
nombreux contrôles ActiveX, tels que Shockwave et RealPlayer, n'utilisent pas ce
paramètre.
Données
ID Définit
le paramètre facultatif ID d'ActiveX. Ce paramètre est le plus souvent
utilisé pour transmettre des informations entre les contrôles ActiveX.
Bordures
Spécifie la largeur de la bordure de l'objet.
Paramètres Ouvre une boîte de dialogue dans laquelle vous entrez les paramètres
supplémentaires à transmettre à l'objet ActiveX. Nombreux sont les contrôles
ActiveX qui répondent à ces paramètres particuliers. Voir À propos des paramètres,
page 305.
Ajout d’interactivité et d’animation
303
Propriétés des l'appliquettes Java
Après l'insertion d'une appliquette Java, utilisez l'inspecteur de propriétés pour
définir les paramètres. Double-cliquez sur une appliquette Java pour afficher ses
propriétés dans l'inspecteur de propriétés.
Voir aussi Ajout d'animations, d'appliquettes et d'autres éléments multimédia,
page 296.
Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche
d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
Appliquette Spécifie un nom pour identifier l'appliquette pour le script. Entrez un
nom dans le champ sans titre, à l'extrême gauche de l'inspecteur de propriétés.
L et H Spécifient
la largeur et la hauteur en pixels de l'appliquette. Vous pouvez
aussi spécifier les unités suivantes : pc (picas), pt (points), in (pouces), mm
(millimètres), cm (centimètres), ou % (pourcentage de la valeur du parent). Les
abréviations doivent suivre la valeur sans espace : par exemple, 3mm.
Spécifie le fichier du contenu de l'appliquette. Entrez un nom de fichier, ou
cliquez sur l'icône de dossier et choisissez un fichier.
Code
Identifie le dossier contenant l'appliquette sélectionnée. Lorsque vous
choisissez une appliquette, ce champ est rempli automatiquement.
Base
Détermine l'alignement de l'objet sur la page. Voir Alignement des
éléments, page 190 pour une description de chaque option.
Aligner
Sec. Spécifie un contenu de remplacement (généralement une image), à afficher si
le navigateur de l'utilisateur ne prend pas en charge les appliquettes Java, ou si Java
y est désactivé. Si vous tapez du texte, Dreamweaver présente le texte en utilisant
l'attribut ALT de la balise APPLET. Si vous choisissez une image, Dreamweaver insère
une balise IMG entre les balises d'ouverture et de fermeture APPLET.
Remarque: Pour spécifier un contenu de remplacement visible dans Netscape Navigateur
(avec JavaScript désactivé) comme dans Lynx (navigateur basé sur le texte), sélectionnez une
image, puis ajoutez manuellement un attribut ALT à la balise IMG dans l'inspecteur HTML.
Espace V et Espace H Spécifient la quantité d'espace vierge en pixels au-dessus, audessous et de chaque côté de l'appliquette.
Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez entrer des
paramètres supplémentaires à transmettre à l'appliquette. Nombreuses sont les
appliquettes qui répondent à des paramètres particuliers. Voir À propos des
paramètres, page 305.
304
Chapitre 16
À propos des paramètres
Utilisez la boîte de dialogue Paramètres pour entrer des valeurs de paramètres
spéciaux définis pour les animations Shockwave, les contrôles ActiveX, les plug-in
Netscape, et les appliquettes Java. Consultez la documentation sur l'objet que
vous utilisez, afin de savoir quels paramètres sont requis.
Pour entrer une valeur de paramètre :
1
Cliquez sur le bouton + (signe plus).
2
Entrez le nom du paramètre dans la colonne Paramètre.
3
Entrez la valeur du paramètre dans la colonne Valeur.
Pour supprimer des paramètres :
Sélectionnez-en un et appuyez sur Supprimer.
Pour réorganiser les paramètres :
Utilisez les boutons fléchés vers le haut et le bas.
Ajout d’interactivité et d’animation
305
306
Chapitre 16
17
CHAPITRE 17
Personnalisation de Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Personnalisation de Dreamweaver –
Vue d’ensemble
Dreamweaver offre de nombreuses possibilités de personnalisation, afin de vous
permettre de travailler le plus confortablement et le plus efficacement possible –
tout en générant un code impeccable.
Voici quelques exemples de personnalisation de Dreamweaver :
Vous pouvez réarranger les objets qui se trouvent dans la palette d'objets afin
d'afficher en permanence les objets les plus souvent utilisés, créer de nouveaux
panneaux pour une réorganisation des objets, ou pour ajouter de nouveaux
objets. Voir Modifier la palette d’objets et le menu Insertion, page 308.
Vous pouvez modifier SourceFormat.profile afin d'obtenir un meilleur
contrôle sur le code HTML créé par Dreamweaver. SourceFormat.profile
comprend, entre autres, tous les paramètres de des préférences du format
HTML. Voir Modifier le profil du formatage de la source HTML, page 310.
Vous pouvez modifier les profils existants du navigateur ou en créer de
nouveaux afin de connaître le fonctionnement exact de votre page dans les
différents navigateurs. Voir Créer et modifier les profils de navigateur, page 311.
Vous pouvez définir toutes vos préférences allant des palettes de couleurs et les
marquages aux configurations de site et les navigateurs. Voir Paramétrage des
préférences, page 72.
307
Modifier la palette d’objets et le menu
Insertion
Par défaut, la palette d'objets est divisée en quatre panneaux : Commun,
Formulaires, Titre, et Invisibles (pour plus d'informations sur les objets de ces
panneaux, consultez Utilisation de la palette d'objets, page 70). Les panneaux
correspondent aux répertoires du dossier Configuration/objets contenu dans le
dossier de l'application Dreamweaver.
Pour réarranger les objets sur la palette d'objets :
Déplacez d'un dossier à un autre les fichiers HTML et GIF correspondants à
un objet.
Pour renommer les panneaux de la palette d'objets :
Renommez les dossiers contenus dans le dossier Configuration/Objets.
Modifier le menu Insertion
L'ordre des objets du menu Insertion est déterminé par le fichier InsertMenu.htm
qui se trouve dans le dossier Configuration/Objets. Ce fichier contient une longue
liste (à puces) non ordonnée de tous les objets situés à l'intérieur du dossier
Configuration/Objets. Les listes à puces imbriquées indiquent des sous-éléments
de menu ; les éléments de liste contenant uniquement des tirets indiquent des
séparateurs. Tout objet non listé est ajouté en bas du menu Insertion au
démarrage.
Pour modifier le menu Insertion :
1
Ouvrez le fichier InsertMenu.htm qui se trouve dans le dossier Configuration/
Objets.
2
Pour ajouter un nouvel objet, créez un nouvel élément de liste et saisissez le
nom de l'objet ; la lettre, le chiffre, ou le symbole que vous souhaitez utiliser
comme raccourci clavier ; et le nom de fichier de l'objet, séparés par des
virgules. Par exemple :
• Copyright DCD, C, Copyright DCD.htm
(Windows uniquement) Sélectionnez la lettre mnémonique que vous
souhaitez utiliser, puis sélectionnez Texte > Style > Souligner.
308
Chapitre 17
3
Pour créer une ligne de séparation entre les objets, créez un nouvel élément de
liste, puis entrez un ou plusieurs traits d'union.
4
Pour réorganiser les objets, réarrangez-les dans la liste.
5
Pour supprimer un élément de menu sans le supprimer de la palette d'objets,
supprimez son nom et son raccourci, mais laissez les virgules et le nom de
fichier. Par exemple :
• , ,Calque.htm
6
Pour supprimer un objet entièrement, sortez-le du dossier Configuration/
Objets.
Remarque: Redémarrez Dreamweaver pour constater les modifications apportées aux
éléments du dossier Configuration/Objets.
Créer un objet simple
Il est inutile d'utiliser Java Script pour les objets les plus simples ; ils ne
contiennent que le code HTML qui sera à insérer dans le document. Pour obtenir
des instructions sur la création d'objets plus complexes à l'aide de Java Script,
consultez Extending Dreamweaver overview dans les pages d’aide de Dreamweaver.
Pour créer un objet simple :
1
Créez un nouveau document vierge dans un éditeur de texte (par exemple,
BBEdit ou HomeSite).
Vous pouvez utiliser l'inspecteur HTML de Dreamweaver comme éditeur de
texte, mais vous devrez d'abord supprimer toutes les balises de l'inspecteur
HTML au démarrage d'un nouveau document.
2
Entrez ou collez les balises que cet objet va insérer dans vos documents.
Par exemple, tapez :
<P>
© 1998 DCD Productions, Inc.<BR>
Tous droits réservés
</P>
3
Enregistrez le fichier.
Si vous voulez que le nouvel objet apparaisse dans l'un des écrans existants,
enregistrez-le dans l'un des dossiers Objets (Commun, Formulaires, Titre ou
Invisibles). Si vous voulez créer un nouvel écran, créez un nouveau dossier à
l'intérieur du dossier Objets, puis enregistrez-y votre fichier. Tout autre dossier
interne aux sous-dossiers Objets est ignoré.
4
Ajouter l'objet au menu Insertion. Voir Modifier le menu Insertion, page 308.
Personnalisation de Dreamweaver
309
5
A l'aide d'une application graphique ou d'édition d'image (telle que
Macromedia Fireworks), créez une image Gif de 18 x 18 pixels qui servira
d’icône pour votre objet dans la palette d’objets.
Si vous créez une plus grande image, Dreamweaver la redimensionne
automatiquement à 18 x 18 pixels. Si vous ne créez pas d’icône, Dreamweaver
insère l'icône d'image manquante dans la palette d’objets.
6
Attribuez à votre icône le même nom de fichier que votre fichier objet et
enregistrez-la dans le même répertoire que ce dernier.
Par exemple, si votre objet s'appelle Copyright DCD.htm et que vous l'avez
enregistré dans le répertoire Commun, appelez votre icône Copyright
DCD.gif, puis enregistrez-la dans le même répertoire.
7
Redémarrez Dreamweaver avant d'utiliser votre nouvel objet.
Modifier le profil du formatage de la source
HTML
Le profil du formatage de la source HTML détermine comment Dreamweaver
formate le code source HTML d'un document. Le profil comprend les préférences
de formatage des balises individuelles et des groupes de balises, ainsi que les
préférences de format HTML (définies à l'aide de la commande Préférences). Vous
pouvez modifier SourceFormat.profile dans un éditeur de texte afin de contrôler
l'écriture du HTML par Dreamweaver. Le profil est un fichier texte enregistré
dans le dossier Configuration à l'intérieur du dossier d'application Dreamweaver.
Les préférences de format HTML définies à l'aide de la commande Préférences
sont enregistrées dans SourceFormat.profile lorsque vous quittez Dreamweaver ;
les modifications apportées au profil ne prennent effet qu'au redémarrage de
Dreamweaver. Ainsi, il est préférable de quitter le programme avant de modifier
un profil pour vous assurer l'accès aux nouveaux paramètres de préférence.
Le profil de formatage de la source HTML adhère à un format spécifique, qui est
décrit dans le fichier. Prêtez attention aux conventions suivantes :
310
Chapitre 17
Chaque section du profil commence par un <?MOTCLÉ> (par exemple,
<?OPTIONS>, <?ELEMENTS>, <?ATTRIBUTES> ).
Les paramètres de chaque section sont définis dans les commentaires HTML
(<!-- -->) directement au-dessus de la section.
La ligne OMIT de la section <?OPTIONS> est réservée à une utilisation ultérieure
(actuellement, elle n'affecte pas le formatage de la source HTML).
Les balises individuelles peuvent être marquées de manière à ce qu'elle fassent
partie de groupes de retrait (IGROUPES) dans la section <?ELEMENTS>. Par
défaut, IGROUP 1 contient des lignes et des colonnes de tableau, et IGROUP 2
contient des jeux de cadres et des cadres. Ces regroupements correspondent
aux options Retrait des lignes et des colonnes de tableau et Retrait des jeux de
cadre et des cadres de la boîte de dialogue Préférences de format HTML. La
mise en retrait peut être désactivée pour tout le groupe en supprimant le
chiffre de l'attribut ACTIVE dans la section <?OPTIONS>. Vous pouvez
également ajouter d'autres balises à IGROUP 1 ou 2 pour que vous puissiez les
contrôler à l'aide des options qui se trouvent dans la boîte de dialogue
Préférences de format HTML.
Par exemple, les paramètres par défaut de la balise P dans SourceFormat.profile
sont <P BREAK=”1,0,0,1” INDENT>, ce qui produit le résultat suivant :
<p> Un paragraphe de texte qui est mis en retrait par rapport à la marge de gauche,
et qui a un saut avant la balise d'ouverture P et après la balise de fermeture P,
mais pas après la balise d'ouverture P et pas avant la balise de fermeture P.</p>
<p>Paragraphe suivant.</p>
Si vous changez les paramètres à <P BREAK=”1,1,1,2”>, vous obtiendrez :
<p>
Un paragraphe de texte qui n'est pas mis en retrait par rapport à la marge de gauche, et qui
a un saut
avant et après la balise d'ouverture P, une autre avant la balise de fermeture P, et deux autres
après la balise de fermeture P.
</p>
<p>
Paragraphe suivant.
</p>
Créer et modifier les profils de navigateur
Les profils de navigateur sont les fichiers auxquels vos documents sont comparés
lorsque vous effectuez une vérification du navigateur cible (voir Vérification de la
compatibilité d'une page avec les navigateurs cibles, page 148). Chaque profil
contient des informations sur les balises et les attributs HTML pris en charge par
un navigateur particulier. Il peut également contenir des avertissements, des
messages d'erreur, et des suggestions de substitution des balises.
Les profils de navigateur sont stockés dans le dossier Configuration/
BrowserProfiles à l'intérieur du dossier d'application Dreamweaver qui se trouve
sur votre disque dur. Vous pouvez éditer les profils existants, ou en créer de
nouveaux avec un éditeur de texte (par exemple, BBEdit, HomeSite, Bloc-notes,
ou SimpleText). Il est inutile de quitter Dreamweaver pour éditer ou créer des
profils de navigateur.
Personnalisation de Dreamweaver
311
Les profils de navigateur suivent un format particulier. Afin d'éviter l'analyse des
erreurs pendant les vérifications du navigateur cible, gardez ces règles à l'esprit lors
de l'édition ou de la création des profils :
La première ligne est destinée au nom du profil. Celui-ci doit être suivi d'un
simple retour chariot. Ce nom apparaît dans la boîte de dialogue Vérifier
navigateur(s) cible(s), ainsi que dans le rapport de vérification. Il doit s'agir
d'un nom unique.
La seconde ligne est destinée au code du profil PROFILE_TYPE=BROWSER_PROFILE.
Dreamweaver utilise cette ligne pour déterminer quels documents sont des
profils de navigateur. Elle ne doit être ni modifiée, ni déplacée.
Deux traits d'union (--) au début d'une ligne indiquent un commentaire
(c'est-à-dire que la ligne sera ignorée lors d'une vérification de cible).
La syntaxe pour une entrée de balise est
<!ELEMENT baliseHtml NAME="nomDeLaBalise" >
<!ATTLIST baliseHtml
attributNonSupporté1!Error !msg="L’attribut attributNonSupporté1 de la balise
baliseHtml n'est pas supporté. Essayez d'utiliser cetAttribut pour des effets similaires."
attributSupporté1
attributSupporté2( valeurValide1 | valeurValide2 | valeurValide3 )
attributNonSupporté2!Error !htmlmsg="<b>N'utilisez jamais l’attribut
attributNonSupporté2 de la balise baliseHtml !!</b>"
>
où
baliseHtml
est la balise telle qu'elle apparaît dans un document HTML.
nomDeLaBalise est l'appellation de la balise (par exemple, la balise s'appelle
"barre horizontale"). L'attribut NAME est optionnel ; s'il est spécifié
nomDeLaBalise est utilisé dans le message d'erreur. Si aucun nom n'est fourni,
baliseHtml est utilisé.
attributNonSupporté est un attribut qui n'est pas pris en charge. Les balises ou
les attributs qui ne sont pas spécifiquement mentionnés sont considérés
comme n'étant pas pris en charge. Spécifiez les balises ou les attributs qui ne
sont pas pris en charge seulement lorsque vous voulez créer un message
d'erreur personnalisé.
est un attribut pris en charge par baliseHtml. Seules les balises
listées sans la mention !Error sont considérées comme prises en charge par le
navigateur.
attributSupporté
valeurValide
est une valeur prise en charge par l'attribut.
Un espace doit figurer avant la parenthèse en chevron (>) sur la ligne !ELEMENT,
après les parenthèses d'ouverture, avant les parenthèses de fermeture, et avant et après
chaque signe (|) dans la liste de valeurs.
312
Chapitre 17
Un point d'exclamation sans espace doit apparaître avant les mots
ELEMENT, ATTLIST, Error, msg, et htmlmsg (!ELEMENT, !ATTLIST, !Error,
!msg, !htmlmsg).
Les messages !Error et !Warning peuvent apparaître dans la zone !ELEMENT ou
!ATTLIST.
Les messages !msg peuvent seulement contenir du texte. Les messages !htmlmsg
peuvent seulement contenir du code HTML valide, y compris des hyperliens.
Les commentaires HTML (<!-- -->) ne peuvent pas être spécifiquement
mentionnés dans les profils de navigateur, car ils interfèrent avec l'analyse.
Dreamweaver ne rapporte pas les erreurs concernant les commentaires, car
tous les navigateurs les prennent en charge.
L'exemple suivant est une entrée correcte de la balise APPLET pour Navigator 3.0 :
<!ELEMENT APPLET Name="Java Applet" >
<!ATTLIST APPLET
Align ( top | middle | bottom | left | right | absmiddle | absbottom | baseline | texttop )
Alt
Archive
Class!Warning !htmlmsg=”Ce navigateur ignore l'attribut <CODE>CLASS</CODE>
pour la balise <CODE>APPLET</CODE>.”
Code
Codebase
Height
HSpace
ID!Warning !htmlmsg=”Ce navigateur ignore l'attribut <CODE>ID</CODE> pour la
balise
<CODE>APPLET</CODE>. Utilisez plutôt <CODE>NAME</CODE>.”
Name
Style!Warning !htmlmsg=”Ce navigateur ignore l'attribut <CODE>STYLE</CODE>
pour la balise <CODE>APPLET</CODE>.”
VSpace
Width
>
Créer un profil de navigateur
Vous pouvez créer un profil de navigateur en modifiant un profil existant. Par
exemple, pour créer un profil pour Netscape Navigator 5.0, ouvrez le profil de
Navigator 4.0, ajoutez de nouvelles balises ou de nouveaux attributs introduits
dans la version 5.0, et enregistrez le profil pour Netscape Navigator 5.0.
Personnalisation de Dreamweaver
313
Pour créer un profil de navigateur :
1
À l'aide d'un éditeur de texte, ouvrez le profil qui ressemble le plus à celui que
vous voulez créer, ou ouvrez celui que vous voulez modifier.
2
Changez le nom du profil.
Il apparaît en première ligne. Le nom doit être unique.
3
Ajoutez toutes les balises ou les attributs dont la prise en charge est assurée par
le navigateur, comme l'indique la syntaxe dans Créer et modifier les profils de
navigateur, page 311.
Si vous ne voulez pas recevoir de message d'erreur pour une balise particulière
qui ne serait pas prise en charge, ajoutez-la à la liste des balises prises en
charge. Si vous incluez des balises qui ne sont pas prises en charge dans la liste
de celles qui le sont, enregistrez le profil dans un fichier séparé sous un
nouveau nom (tel que nomDuNavigateur x.x limité). Le fait de renommer le
profil permet de conserver le fichier original contenant seulement les balises
qui sont réellement prises en charge.
4
Supprimez les balises ou les attributs qui ne sont pas pris en charge par le
navigateur.
Cette étape est inutile si vous créez un profil pour la prochaine version de
Netscape Navigator ou de Microsoft Internet Explorer, puisqu'il est rare que les
navigateurs suppriment la prise en charge de balises d'une version à une autre.
5
Ajoutez des messages d'erreur personnalisés, en respectant la syntaxe indiquée
dans Créer et modifier les profils de navigateur, page 311.
Les profils fournis par Dreamweaver répertorient toutes les balises prises en
charge ; ils peuvent inclure également des lignes de commentaire sur les balises
communément utilisées, mais qui ne sont pas prises en charge. Pour ajouter un
message d'erreur personnalisé, supprimez les deux traits d'union au début de la
ligne, et ajoutez soit le "message" !msg soit le message "<balise>!htmlmsg </
balise>" après !Error. Par exemple, la notation suivante pourrait apparaître dans
le profil de Netscape Navigator 3.0 :
<!ELEMENT HR name="Barre horizontale" >
<!ATTLIST HR
-- COLOR !Error
>
Pour ajouter un message d'erreur personnalisé, supprimez les traits d'union et
ajoutez votre message, précédé de !msg :
<!ELEMENT HR name="Barre horizontale" >
<!ATTLIST HR
COLOR !Error !msg "Internet Explorer 3.0 prend en charge COLOR dans les barres
horizontales, mais pas Netscape Navigator 3.0."
>
314
Chapitre 17
A
ANNEXE A
Raccourcis clavier
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Menu Fichier
Commande
Windows
Macintosh
Nouveau document
Contrôle-Maj-N
Commande-N
Nouvelle fenêtre
Contrôle-N
s/o
Ouvrir un fichier HTML
Contrôle-O, ou faites
glisser le fichier de la
fenêtre du site ou
Explorateur vers la
fenêtre Document.
Commande-O
Ouvrir dans un cadre
Contrôle-Maj-O
Maj-Commande-O
Fermer
Contrôle-W
Commande-L
Enregistrer
Contrôle-S
Commande-S
Enregistrer tout
Contrôle-Maj-S
Maj-Commande-S
Quitter
Alt-F4 ou Contrôle-Q
Commande-Q
315
Menu Édition
Commande
Windows
Macintosh
Annuler
Contrôle-Z
Commande-Z
Rétablir
Contrôle-Y
Commande-Y, MajCommande-Z
Couper
Contrôle-X
Commande-X
Copier
Contrôle-C
Commande-C
Coller
Contrôle-V
Commande-V
Effacer
Supprimer
Supprimer
Sélectionner tout
Contrôle-A
Commande-A
Lancer éditeur externe/BBEdit
Contrôle-E
Commande-E
Propriétés de la page
Contrôle-J
Commande-J
Préférences
Contrôle-U
Commande-U,
Commande-K
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Créer un nouveau paragraphe
Entrée
Entrée
Insérer un saut de ligne
Maj-Entrée
Maj-Entrée
Insérer un espace insécable
Contrôle-Maj-espace
Option-espace
Déplacer du texte ou un objet
dans la page
Faites glisser l'élément
Faites glisser l'élément
sélectionné vers le nouvel sélectionné vers le nouvel
emplacement.
emplacement.
Éditer du texte
Copier du texte ou un objet vers Contrôle-glissez l'élément Option-glissez l'élément
un autre emplacement de la
sélectionné vers le nouvel sélectionné vers le nouvel
page
emplacement.
emplacement.
316
Annexe A
Copier du texte seulement (ne
copie pas les balises HTML)
Contrôle-Maj-C
Maj-Commande-C
Maj-Commande-O
Contrôle-Maj-V
Maj-Commande-V
Sélectionnez un mot
Double-cliquez
Double-cliquez
Ajouter les éléments
sélectionnés à la bibliothèque
Contrôle-Maj-B
Maj-Commande-B
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Basculer entre la fenêtre du
document et l'inspecteur HTML
Contrôle-Tabulation
Commande-Tabulation
ou Option-Tabulation
Ouvrir et fermer l'Inspecteur des Contrôle-Maj-J
propriétés
Maj-Commande-J
Orthographe
Maj-F7
Maj-F7
Commande
Windows
Macintosh
Retrait
Contrôle-]
Commande-]
Retrait négatif
Contrôle-[
Commande-[
Format > Aucun
Contrôle-0 (zéro)
Commande-0 (zéro)
Appliquer les paragraphes
Contrôle-T
Commande-T
Appliquer les titres 1 à 6 au
paragraphe
Contrôle-1-6
Commande-1-6
Alignement > Aligner à gauche
Contrôle-Alt-L
Option-Commande-L
Alignement > Centrer
Contrôle-Alt-C
Option-Commande-C
Alignement > Aligner à droite
Contrôle-Alt-R
Option-Commande-R
Mettre le texte sélectionné en
gras
Contrôle-B
Commande-B
Mettre le texte sélectionné en
italique
Contrôle-I
Commande-I
Bouton Éditer
Contrôle-Maj-E
Maj-Commande-E
Formater du texte
Remarque: De nombreux raccourcis de formatage ne s'appliquent pas lorsque l'on travaille
dans l'inspecteur HTML.
Raccourcis clavier
317
Rechercher et remplacer du texte
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Rechercher
Contrôle-F
Commande-F
Rechercher suivant
F3
F3, Commande-G
Remplacer
Contrôle-H
Commande-H
Travailler avec des tableaux
318
Annexe A
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Sélectionner une table (le
curseur est positionné à
l'intérieur de la table)
Contrôle-A
Commande-A
Passer à la cellule suivante
Tab
Tab
Revenir à la cellule précédente
Maj-Tab
Maj-Tab
Insérer une ligne (avant la ligne
en cours)
Contrôle-M
Commande-M
Ajouter une ligne à la fin d'une
table
Passer à la dernière
cellule à l'aide de la
touche de tabulation
Passer à la dernière
cellule à l'aide de la
touche de tabulation
Supprimer la ligne en cours
Contrôle-Maj-M
Commande-Maj-M
Insérer une colonne
Contrôle-Maj-A
Commande-Maj-A
Supprimer une colonne
Contrôle-Maj- - (signe
moins)
Commande-Maj- - (signe
moins)
Fusionner des cellules de table
Sélectionnez plusieurs
cellules contiguës et
appuyez sur M
Sélectionnez plusieurs
cellules contiguës et
appuyez sur M
Fractionner des cellules de table Contrôle-Alt-S
Commande-Option-S
Mettre à jour la disposition de la Contrôle-Espace
table (actualise l'affichage en
mode “édition rapide de la
table”)
Commande-Espace
Travailler avec des cadres
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Sélectionner un cadre
Alt-cliquez dans le cadre
Maj-Option-cliquez dans
le cadre
Sélectionner le cadre ou le jeu de Alt-flèche vers la droite
cadres suivant
Commande-flèche vers la
droite
Sélectionner le cadre ou le jeu de Alt-flèche vers la gauche
cadres précédent
Commande-flèche vers la
gauche
Sélectionner le jeu de cadres
parent
Commande-flèche vers le
haut
Alt-flèche vers le haut
Sélectionner le premier cadre ou Alt-flèche vers le bas
jeu de cadres enfant
Commande-flèche vers le
bas
Ajouter un nouveau cadre à un
jeu de cadres
Option-glissez la bordure
du cadre
Alt-glissez la bordure du
cadre
Ajouter un nouveau cadre au jeu Alt-Contrôle-glissez la
de cadres à l'aide de la méthode bordure du cadre
de "push"
Option-Commandeglissez la bordure du
cadre
Travailler avec des calques
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Sélectionner un calque
Contrôle-Maj-Cliquer
Maj-Commande-Cliquer
Sélectionner et déplacer le
calque
Maj-Contrôle-glisser
Maj-Commande-glisser
Ajouter ou supprimer un calque Maj-cliquer sur le calque
de la sélection
Maj-cliquer sur le calque
Déplacer le calque sélectionné
en pixels
Touches de direction
Touches de direction
Déplacer le calque sélectionné
par positions de la grille
magnétique
Maj-touches de direction Maj-touches de direction
Redimensionner le calque
sélectionné en pixels
Contrôle-touches de
direction
Redimensionner le calque
sélectionné en alignant
l'incrément
Contrôle-Maj-touches de Option-Maj-touches de
direction
direction
Aligner les calques sélectionnés
au-dessus, en-dessous, à droite
ou à gauche du dernier calque
sélectionné
Contrôle-touches de
direction haut/bas/
gauche/droite
Option-touches de
direction
Commande-touches de
direction haut/bas/
gauche/droite
Raccourcis clavier
319
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Uniformiser la largeur des
calques sélectionnés
Contrôle-Maj-[
Commande-Maj-[
Uniformiser la hauteur des
calques sélectionnés
Contrôle-Maj-]
Commande-Maj-]
Convertir les calques en tableau
Contrôle-Maj-F6
Commande-Maj-F6
Repositionner le contenu à l'aide Contrôle-F6
des calques
Commande-F6
Activer ou désactiver les
préférences d'imbrication
pendant la création d'un calque
Contrôle-glisser
Commande-glisser
Basculer l'affichage de la grille
Contrôle-Alt-Maj-G
Maj-Option-CommandeG
Aligner sur la grille
Contrôle-Alt-G
Option-Commande-G
Ajouter une image-clé (Scénario) Maj-F9
Maj-F9
Supprimer une image-clé
(Scénario)
Supprimer
Supprimer
Travailler avec des scénarios
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Ajouter un objet au scénario
Contrôle-Maj-Alt-T
Commande-Maj-Option-T
Travailler avec des images
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Modifier l'attribut de la source
de l'image
Double-cliquez sur
l'image
Double-cliquez sur
l'image
Modifier l'image dans un éditeur Contrôle-double-cliquez
externe
sur l'image
320
Annexe A
Commande-doublecliquez sur l'image
Gérer les hyperliens
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Créer des hyperliens (texte
sélectionné)
Contrôle-L
Commande-L
Supprimer un hyperlien
Maj-Contrôle-L
Maj-Commande-L
Faire glisser et déposer pour
créer un hyperlien à partir d'un
document
Sélectionnez le texte,
l'image ou l'objet, puis
appuyez sur Maj tout en
faisant glisser la sélection
vers un fichier de la
fenêtre du site.
Sélectionnez le texte,
l'image ou l'objet, puis
appuyez sur Maj tout en
faisant glisser la sélection
vers un fichier de la
fenêtre du site.
Faire glisser et déposer pour
créer un hyperlien à l'aide de
l'inspecteur de propriétés
Sélectionnez le texte,
l'image ou l'objet, puis
faites glisser l'icône
pointeur de fichier de
l'inspecteur de propriétés
vers un fichier de la
fenêtre du site.
Sélectionnez le texte,
l'image ou l'objet, puis
faites glisser l'icône
pointeur de fichier de
l'inspecteur de propriétés
vers un fichier de la
fenêtre du site.
Ouvrir un document lié dans
Dreamweaver
Contrôle-double-cliquez
sur le lien
Commande-doublecliquez sur le lien
Vérifier les liens dans le
document en cours
Contrôle-F7
Commande-F7
Vérifier les liens sur tout le site
Contrôle-F8
Commande-F8
Cibler et visualiser dans les navigateurs
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Aperçu dans le navigateur
principal
F12
F12
Aperçu dans le navigateur
secondaire
Ctrl-F12
Commande-F12
Raccourcis clavier
321
Gestion de site et FTP
322
Annexe A
Action
Windows
Macintosh
Créer un nouveau fichier
Contrôle-Maj-N
Maj-Commande-N
Créer un nouveau dossier
Contrôle-Alt-Maj-N
Maj-OptionCommande-N
Ouvrir la sélection
Contrôle-Alt-Maj-O
Maj-OptionCommande-O
Obtenir les fichiers ou les
Appuyez sur Contrôledossiers sélectionnés à partir du Maj-D, ou déplacez les
site FTP
fichiers du panneau
distant vers le panneau
local dans la fenêtre du
site.
Appuyez sur MajCommande-D, ou
déplacez les fichiers du
panneau distant vers le
panneau local dans la
fenêtre du site.
Placer les fichiers ou les dossiers Appuyez sur Contrôlesélectionnés sur le site FTP
Maj-U, ou déplacez les
fichiers du panneau local
vers le panneau distant
dans la fenêtre du site.
Appuyez sur MajCommande-U, ou
déplacez les fichiers du
panneau local vers le
panneau distant dans la
fenêtre du site.
Extraire
Contrôle-Alt-Maj-D
Maj-OptionCommande-D
Archiver
Contrôle-Alt-Maj-U
Maj-CommandeOption-U
Déconnecter
Contrôle-Alt-Maj-F5
Maj-OptionCommande-F5
Actualiser le site local
Contrôle-F5
Commande-F5
Actualiser le site distant
Alt-F5
Option-F5
Carte du site
Action
Windows
Macintosh
Affichage des fichiers du site
F5.
F5.
Affichage de la carte du site
Maj-F5
Maj-F5
Créer une racine
Contrôle-Maj-R
Commande-Maj-R
Créer un lien au fichier existant
Contrôle-Maj-K
Commande-Maj-K
Modifier un lien
Contrôle-L
Commande-L
Supprimer un lien
Touche Supprimer
Touche Supprimer
Afficher/masquer un lien
Contrôle-Maj-Y
Commande-Maj-Y
Afficher les titres de page
Contrôle-Maj-T
Commande-Maj-T
Renommer un fichier
F2
s/o
Agrandir la carte du site
Contrôle-+ (signe plus)
Commande-+ (signe plus)
Réduire la carte du site
Contrôle- - (signe moins) Commande- - (signe
moins)
Lecture des plug-ins
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Lecture d'un plug-in
Contrôle-P
Commande-P
Arrêter un plug-in
Contrôle-.
Commande-.
Lecture de tous les plug-ins
Contrôle-Maj-P
Commande-Maj-P
Arrêter tous les plug-ins
Contrôle-Maj-.
Commande-Maj-.
Affichage des éléments de page
Basculer l'affichage de
Windows
Macintosh
Éléments invisibles
Contrôle-Maj-I
Maj-Commande-I
Règles
Contrôle-Alt-Maj-R
Maj-Option-Commande-R
Grille
Contrôle-Alt-Maj-G
Maj-Option-Commande-G
Affichage du contenu du titre
Contrôle-Maj-W
Commande-Maj-W
Raccourcis clavier
323
Travailler avec des modèles
Action
Sous Windows, utilisez
Sur Macintosh, utilisez
Créer une nouvelle zone
modifiable
Contrôle-Alt-V
Commande-Option-V
Marquer la zone comme
modifiable
Contrôle-Alt-W
Commande-Option-W
Pour insérer
Windows
Macintosh
Tout objet (image, animation
Shockwave, etc.)
Déplacez le fichier de la
fenêtre du site ou de
l'Explorateur vers la
fenêtre du document.
Déplacez le fichier de la
fenêtre du site ou de la
recherche vers la fenêtre
du document.
Image
Contrôle-Alt-I
Option-Commande-I
Tableau
Contrôle-Alt-T
Option-Commande-T
Animation Flash
Contrôle-Alt-F
Option-Commande-F
Animation Director Shockwave
Contrôle-Alt-D
Option-Commande-D
Ancre nommée
Contrôle-Alt-A
Option-Commande-A
Insérer des objets
Ouvrir et fermer des palettes
324
Annexe A
Basculer l'affichage
Windows
Macintosh
Objets
Contrôle-F2
Commande-F2
Propriétés
Contrôle-F3
Commande-F3
Lanceur
Maj-F4
Maj-F4
Affichage des fichiers du site
F5
F5
Affichage de la carte du site
Maj-F5
Maj-F5
Bibliothèque
F6
F6
Styles
F7
F7
Comportements
F8
F8
Scénarios
F9
F9
Basculer l'affichage
Windows
Macintosh
HTML
F10
F10
Calques
F11
F11
Cadres
Contrôle-F10
Commande-F10
Modèles
Contrôle-F11
Commande-F11
Afficher/masquer des fenêtres
flottantes
F4.
F4.
Fermer la fenêtre du document
Contrôle-F4 ou
Contrôle-W
Commande-W ou
Commande-F4
Commande
Windows
Macintosh
Rubriques d'aide
F1
Aide
Dreamweaver en ligne
Contrôle-F1
Commande-F1
Obtenir de l'aide
Raccourcis clavier
325
326
Annexe A
INDEX
A
Accès au serveur
options 128
acquisition de fichiers au départ d'un serveur distant
135
action Afficher le message d'état 271
action Afficher-masquer les calques 279
Action Appel JavaScript 265
action Arrêter le scénario 284
action Atteindre l'image de scénario 285
action Atteindre l'URL 275
action Contrôler le son 270
action Contrôler Shockwave 269
action Déplacer le calque 274
action Déplacer un calque 271
action Intervertir l'image 281
action Lire le scénario 284
action Message 278
action Modifier la propriété 265
action Ouvrir la fenêtre du navigateur 276
action Précharger les images 278
action Rétablir l'interversion d'images 282
action Valider le formulaire 282
action Vérifier le navigateur 266
action Vérifier le plug-in 268
actions Voir aussi actions individuelles
choir parmi les comportements 258
compabilité de navigateur 263
contrôler des scénarios 294
créer 260
définies 258
modifier les comportements 260
Activer archivage/extraction 128
actualisation d'un affichage 117
Adresse HTTP
option 106
affichage
calques 225
carte du site 115
contenu avec balises HTML 68
contenu de l'EN-TÊTE 90
HTML modifiable 96
HTML verrouillé 96
informations sur le document 68
insertion côté serveur 254
propriétés de l'objet 69
régions modifiables du modèle 95
régions verrouillées du modèle 95
sites distants 115
sites locaux 115
tracé de l'image 81
Afficher le mini-lanceur
option 73
Aide
raccourcis 325
aide 13
alignement
calques 223
éléments de la page 190
tracé de l'image 82
Alignement sur la commande Sélection 82
ancres 111
ancres nommées 111
animations 257
améliorer 295
appliquer aux objets 293
copier et coller 292
insérer 296
scénario 288
sur un chemin complexe 289
animations Flash
contrôler 269
insérer 298
propriétés 298
redimensionnement 190
animations Montrez-moi 13
327
animations Shockwave
contrôler 269
insérer 296
propriétés 297
redimensionnement 190
applications
utilisation avec Dreamweaver 75
Appliquer à la page
commande 100
Appliquer formatage source
commande 160
Appliquer le modèle à la page
commande 100
appliquettes
insérer 296
redimensionnement 190
appliquettes Java
propriétés 304
archivage et extraction de fichiers 133
annulation 133
arrière-plan
image de page 87
attribut ACTION 244
attribut CLASS 177
attribut NAME 193
attribut USEMAP 193
attributs
dans les profils de navigateur 311
recherches 139
attributs CSS
conversion en HTML 183
B
balise BASE 70
balise EMBED 300
balise ILayer 213
balise IMG 193
balise Layer 213
balise MAP 193
balise META 70
Balise spécifique
option 158
balise TITLE 70
328
Index
balises
application 168
ASP 153
CFML 153
dans les profils de navigateur 311
non reconnues 153
non valides 160
recherches 139
se chevauchant 153
sélection 84
tableau 200
balises ASP 153
édition 162
balises CFML 153
édition 162
balises d'en-tête 168
balises de page de serveur actif 153
balises de paragraphe 168
balises en langage de marquage Cold Fusion 153
balises HTML
préférences de couleurs 158
balises non valides 153
balises XML 153
Barre d'état
préférences 73
BBEdit 162
bibliothèques 247
détruire le lien à un élément 251
mise à jour des pages 250
préférences 249
récréer des éléments 253
bibliothèques. Voir aussi éléments de la bibliothèque
bitmaps 185
boîte de dialogue Orthographe 184
boîte de dialogue Paramètres 305
boîte de dialogue Vérificateur de lien 150
bordures
cadres 238
bouton Effaceur 88
bouton Palette 88
branche 125
C
Cache
option 106
cadres 231
bordures 238
changer le contenu 239
ciblabe de liens 110
création 232
dans les navigateurs non pris en charge 240
enregistrer des fichiers dans 233
imbriqués 232
modifier la couleur d'arrière-plan 239
propriétés 235
raccourcis 319
redimentionner 237
sélectionner 233
Cadres et jeux de cadres
option 156
calques
activation 221
alignement 223
alignement sur la grille 223
conversion en tableaux 182
conversion pour les navigateurs 3.0 229
création 214
déplacement 223
empêcher le chevauchement 228
imbrication 215
manipulation 220
mobiles 274
modification de l'ordre de superposition 225
modifier la visibilité 279
points d'ancrage 85
préférences 216
propriétés 217
propriétés pour plusieurs 219
raccourcis 319
redimensionnement 222
séléction 221
vers tableau 226
visibilité 225
vue d’ensemble 213
calques CSS 213
calques Netscape 213
canal de comportement 286
caractères ASCII complexes, dans les noms de fichiers
136
cartes de site
affichage 115
création 118
enregistrement 125
liens 123
cartes du site
affichage de fichiers 124
branche 125
édition de pages 121
raccourcis 323
cartes graphiques 193
cartes graphiques côté client 193
cartes graphiques côté serveur 193
case couleur 88
Casse des attributs
option 157
Casse des balises
option 157
cellules de tableau
copie et collage 210
formatage 202
fractionnement 208
fusion 208
Centrer
option 157
champs de formulaire masqué 85
champs formulaire
valider 282
chemins d'accès relatifs à la racine du site
prévisualisation 151
chemins relatifs 114
chemins relatifs à la racine du document 114
chemins relatifs à la racine du site 114
chemins, absolus et relatifs 114
chevauc 153
ciblage de liens 110
ciblage des navigateurs
conversion du fichier en compatible 3.0 182
vérification de la compatibilité 148
cibler des navigateurs
personnaliser un profil 313
Index 329
cibler les navigateurs
profils de navigateur 311
raccourcis 321
colonnes et lignes
ajout et retrait 207
formatage 202
comande Convertir calques vers tableau 226
Combiner si possible balises FONT imbriquées
option 159
commande Acquérir 135
commande Afficher règles 80
commande Ajouter un objet à la bibliothèque 248
commande Ajouter un objet au scénario 288
commande Ajouter une image 288
commande Coller comme texte 82
commande Convertir tableaux vers couches 229
commande Couleur 171
commande Définir palette de couleurs 87
commande Éditer la liste des navigateurs 151
commande Empêcher le chevauchement des calques
228
commande Enregistrer jeu de cadres 233
commande Enregistrer le chemin du calque 289
commande Enregistrer tout 233
commande Formulaire 242
commande Modifier la liste des polices 170
commande Modifier un contenu sans cadre 240
commande Nouveau à partir d'un modèle... 79
commande Placer 136
commande Réinitialiser la position 81
commande Repositionner le contenu à l'aide des
calques 226
commande Rétablir origine 80
commande Supprimer un scénario 292
commande Supprimer une image 288
commande Vérifier les navigateurs cibles 148
commandes d'alignement 172
commandes de défilement, créer 271
commandes Fractionner cadre 232
commentaires
insertion 165
préférences 85
Commentaires (balises HTML couleur)
option 158
Common Gateway Script Interface (CGI) 244
330
Index
comportements
actions 258
associer 258
compabilité de navigateur 263
créer des actions 260
dans les modèles 99
définis 258
événements 258
modifier 260
placer dans des scénarios 294
supprimer 260
tiers 262
configuration système requise
Macintosh 12
Windows 12
Connecter
option 130
contenu
ajout dans un tableau 197
répétitif 247
contenu de l'EN-TÊTE 90
contenu SANSCADRE 240
contrôles ActiveX
propriétés 302
contrôles d'ActiveX
redimensionnement 190
côté serveur inclut
comparé aux éléments de la bibliothèque 247
couleur
adaptées aux navigateurs 89
arrière-plan de cadre 239
choix 88
éléments de l'interface 72
modification du texte 171
page 87
Couleur d'arrière-plan (balises HTML couleur)
option 158
Couleur du lien
option 87
Couleur du texte
option 87
couleur par défaut
texte 87
création de lien
ancres 111
CSS1 175
D
de cellules. Voir cellules de tableau
Définir les sites
commande 128
délimiteur de formulaire 85
Détacher de
commande 101
dictionnaire
choix 72
édition 184
dictionnaire personnel 184
documents
ajout de texte 82
basés sur des modèles 100
configuration 86
création 78
désignation 86
détachement d'un modèle 101
modèles 78
ouverture 78
prévisualisation dans des navigateur 151
recherche 137
taille du téléchargement, temps 152
vue d’ensemble 77
documents HTML. Voir HTML
Dreamweaver
didacticiel 13
espace de travail 67
étendre 11
guide de l'utilisateur 15
installation 12
nouvelles fonctions 10
personnalisation 307
utilisation avec d'autres applications 75
Dreamweaver Developers Center 15
Dynamic HTML
feuilles de style 174
E
Échange d'extensibilité 262
éditeurs externes
image 192
profils de navigateur 311
texte 161
traitement des formulaires de script 241
édition de contenu dynamique 10
édition de tableau
nouvelles fonctions 11
É`ÉÖÅ 17
élément
points d'ancrage 85
Élément de la bibliothèque
création 248
éléments
affichage des raccourcis 323
alignement 190
mobile 271
éléments CSS-P 213
éléments de la bibliothèque 248
ajout à la page 249
comparés à ce qui est inclus côté serveur 247
couleur de surbrillance 249
édition 250
rendre modifiable 251
renommage 250
suppression 250
éléments HEAD 70
éléments invisibles
affichage et masquage 85
commentaires 165
préférences 85
scripts 164
sélection 84
éléments multimédia
insérer 296
paramètres 305
éléments. Voir aussi éléments d'une page individuelle
Enregistrer comme modèle
commande 92
enregistrer des fichiers dans les cadres et les jeux de
cadres 233
Enregistrer la requête
option 142
enus contextuels 71
événement onBlur 282
Index
331
événements
déclencher des comportements 258
définis 258
disponibles pour différents navigateurs et objets
258
modifier les comportements 260
expressions régulières 143
Extraire les fichiers à l'ouverture
option 128
F
fenêtre Document 68
redimensionnement 80
sélection d'éléments dans 84
fenêtre Message, liens 112
fenêtre Site 130
fenêtres
ouverture et fermeture 69
raccourcis 324
feuilles de style
Voir aussi styles
externes 175
modifier des feuilles de style externes 177
préférences 181
feuilles de style externes
création 175
lien à 175
modifier 177
fichiers
archivage et extraction 133
insertion dans le document 253
téléchargement 135, 136
transfert 133
fichiers cachés
affichage et masquage 124
fichiers dépendants
affichage et masquage 124
Fichiers distants
option 116
Fichiers locaux
option 116
Format Tableau
commande 204
formatage HTML
contrôles 155
préférences 156
formats de fichier 185
332
Index
formulaire
création 242
formulaires 244
ajout d'objets 243
création 242
JavaScript côté client 244
propriétés 243
segments 241
traitement 244
FTP
Connexion et temporisation
option 132
journal 135
préférences 132
Fusionner les cellules
commande 208
G
graphiques. Voir la présentation des
gras 169
grille
Alignement des calques sur 223
utilisation comme guide 82
guides 79
H
HTML
balises de formatage 168
contrôles de format source 155
conversion des attibuts CSS 183
couleurs de balises 158
dans des formulaires 241
dans les insertions côté serveur 255
définition d'éditeurs externes 161
édition avec BBEdit 162
formatage de documents existants 160
modification 153
modifier le profil du format de la source 310
nettoyage 159
non valide 160
préférences 156
préférences de format source 156
recherche de texte 139
réécriture 156
styles de balise 174
HTML Roundtrip 153
I
icône Pointer vers un fichier 108
Ignorer les différences entre les espaces blancs
option 137
images
ajout dans un tableau 197
alignement 172
cartes graphiques 193
édition externe 192
formats pris en charge 185
insérer 186
intervertir 281
modifier le fichier source à l'aide de scénarios 291
précharger 278
propriétés 188
raccourcis 320
redimensionnement visuel 190
rétablir interverties 282
images GIF 185
comme tracé de l'image 81
images JPEG 185
comme tracé de l'image 81
images par seconde (lprs) 286
images PNG 185
comme tracé de l'image 81
images-clés 286
créer 288
imbrication
calques 215
imbriquage
cadres 232
Index, ? 14
insérer
animations 296
animations Flash 298
animations Shockwave 296
appliquettes 296
éléments multimédia 296
objets Aftershock 299
insertion
insertions côté serveur 253
insertion côté serveur
affichage 254
édition 255
insertions côté serveur
insertion 253
InsertMenu.htm 308
inspecteur 154
Inspecteur de cadres 234
Inspecteur de comportements 261
inspecteur de propriétés 69
Inspecteur de scénarios 286
Inspecteur HTML
option 73
inspecteurs
ouverture et fermeture 69
interactivité 257
italique 169
J
JavaScript 164
alertes 278
exécuter 265
jeu de cadres
bordures 238
jeux de cadres
ciblage de liens 110
enregistrer des fichiers dans 233
imbriqués 232
propriétés 236
sélectionner 233
jeux de cadres. Voir aussi cadres
Index 333
L
lanceur 69
liaison
documents 110
liens
aux feuilles de style 175
carte de site 123
changer les cadres avec 239
chemins 114
ciblage 107
création 110
création avec l'icône Pointer vers un fichier 108
fenêtre Message 112
mise à jour 145
modification d'un lien au niveau du site 146
ouverture d'une source 123
raccourcis 321
réparation 150
stockage dans une fichier cache 145
suppression 123
test 113
vérification 149
vérification dans le site 150
vers document 107
Liens actifs
option 87
liens e-mail
création 112
modification 146
liens nowhere
création 112
modification 146
liens script
création 112
modification 146
liens vers des ancres 111
Liens visités
option 87
Lignes et colonnes de tableau
option 156, 196
lire des scénarios en boucle 290
listes
création 173
imbriquées 173
lps 286
334
Index
M
Marquer la sélection comme modifiable
commande 93
marqueurs comme éléments invisibles 85
menu contextuel Actions 261
menu contextuel Événements 261
menu Insertion
modifier 308
message de la barre d'état 271
Mettre à jour la page en cours
commande 101
Mettre à jour les pages
commande 101
mini-Lanceur 68
mise à jour
liens 145
mise en surbrillance d’une option 92
Modèles
répertoire 92
modèles
application à des documents 100
comportements 99
conversion en non modifiable 98
création 92
détachement d'un document 101
mise à jour d'une page 101
modification 93
nouveau nom 99
préférences 94
propriétés de page 92
raccourcis 324
recherche de région modifiable 101
régions verrouillées 93
scénarios 99
styles 99
vue d’ensemble 91
N
navigateur principal 152
navigateur secondaire 152
navigateurs
ciblage 148
conversion de calque 229
couleurs adaptées 89
événements reconnus par 258
fichiers 3.0 compatibles 182
prévisualisation 151
vérification de la compatibilité 148
vérifier la version 266
navigateurs. Voir aussi profils de navigateur
Ne plus marquer la région modifiable
commande 98
Nettoyer HTML
commande 159
Nom du site
option 106
Nouveau à partir d'un modèle
commande 100
Nouvelle région modifiable
commande 93
nouvelles fonctions de productivité 11
O
objets
ajout aux formulaires 243
créer simples 309
insertion 82
insertion avec la palette d'objets 70
raccourcis 324
objets Aftershock
insérer 299
option Index Z
modification de l'ordre de superposition 225
option Lecture auto 286
option Lecture automatique 286
option Lecture en boucle 286
option Liste à puces 173
option Lors de l'édition de styles existants, utiliser
sténographie 181
option Lors de la création de styles, utiliser
sténographie pour 181
Option M'avertir lors de la correction ou de la
suppression de balises 156
Option Retour à la ligne auto 157
Option Supprimer balises de fermeture superflues 156
option Taille de fenêtre 80
Options Corriger lorsque possible les balises
incorrectement imbriquées et non fermées
156
ordre de superposition
calques 225
modifier à l'aide de scénarios 291
orizontales 83
orthographe
choix d'un dictionnaire 72
vérification 184
outils graphiques 10
ouverture
documents 78
fenêtre 69
palettes 69
P
page
couleur 87
image d'arrière-plan 87
ouvrir nouvelle dans le cadre ou la fenêtre en cours
275
réutilisation des éléments 247
taille 152
temps de téléchargement estimé 152
titre 86
Pages d'aide HTML de Dreamweaver 13
palette Calque 220
palette d'objets 70
ajouter des objets à 309
Palette de bibliothèque 253
Palette de modèles 99
palette de styles 181
Palette Objet
personnalisation 308
palettes
ouverture et fermeture 69
Palettes flottantes
préférences 74
palettes flottantes 72
Paramètres de la police
option 73
pare-feu
connexion 106
paramétrage d'un hôte et d'un port 132
photographies 185
placement de fichiers sur un serveur distant 136
Index 335
plug-in
dépannage 302
lire 301
vérifier 268
plug-in Netscape 300
propriétés 300
plug-ins
lecture raccourcis 323
redimensionnement 190
points d'ancrage 85
pour éléments flottants 85
polices
encodage 73
modification des caractéristiques 169
modification des combinaisons 170
paramétrage par défaut 73
Polices / Encodages
préférences 73
préférence d'affichage pour la mise en surbrillance d'un
élément de bibliothèque 85
préférence de format source 156
préférences 72
Aperçu dans le navigateur 152
bibliothèque 249
calque 216
couleurs de surbrillance 74
couleurs des balises HTML 158
éléments invisibles 85
feuilles de style 181
format source HTML 156
modèle 94
palettes flottantes 74
polices 73
réécriture HTML 156
Site FTP 132
préférences de réécriture HTML 156
préférences de traduction 254
préférences du site FTP 132
préférences générales 72
préférences pour Aperçu dans le navigateur 152
préférences pour la barre d'état 73
prévisualisation dans des navigateurs 151
profil du format source 310
profils de navigateur
créer 313
modifier 311
propriété de la bibliothèque Rendre modifiable 251
336
Index
propriétés
affichage 69
animations Flash 298
animations Shockwave 297
appliquette Java 304
cadre 235
calques multiples 219
contrôles ActiveX 302
image 188
jeu de cadres 236
ligne et cellule 202
modification de valeurs 265
tableau 201
propriétés de code non valides 160
propriétés de l'élément de la bibliothèque 253
propriétés des calques 217
puzzles 271
R
raccourcis 315
raccourcis clavier 315
recherche 137
balises et attributs HTML 139
chaînes de texte 139
expressions régulières 143
modèles 141
raccourcis 318
texte dans dans une fenêtre Document 139
texte dans une source HTML 139
texte entouré de balises spécifiques 141
recherche et remplacement. Voir recherche
Rechercher
options 137
Rechercher, ? 14
recherches de texte
chaînes 139
expressions régulières 143
HTML 139
redéfinir la balise HTML 177
redimensionnement
calques 222
cellules de tableau 206
éléments de la page 190
redimensionner
cadres 237
Regarder dans
option 101
région modifiable
couleur 92
recherche 101
région verrouillée 92
règles 80
rétablissement de l'origine 80
Remplacer la casse
option 157
Remplissage de cellule
option 196
répertoire racine local 106
répertoires
recherche 137
répétition des éléments 247
Retrait
option 156
S
Sauts de ligne
option 157
sauts de ligne 85
scénarios
chemins complexes 289
conseils d'animation 295
contrôler avec des actions 294
créer 288
dans les modèles 99
déplacer la tête de lecture 285
images-clé 288
lire automatiquement 290
lire en boucle 290
modifier 290
modifier le fichier source de l'image 291
modifier les options de calque 291
multiples 292
placer des comportements dans 294
raccourcis 320
restants 294
tête de lecture 286
scénarisation 115
script
traitement du formulaire 244
scripts 85
entrée et édition 164
propriétés 164
scripts CGI 244
sélecteur CSS 177
sélecteur de balise 68
sélection
code HTML 84
éléments 84
objets 84
séléction
calques 221
sélectionner
cadres et jeux de cadres 233
Show Log on Completion, option 159
site local Voir aussi sites
carte 118
création 106
sites
affichage 115
ajout 117
cache 145
changement de l'affichage 116
création 106
définition 128
édition au niveau du site 10
instructions 147
options de maintenance 130
raccourcis 322
recherche de fichiers 137
sélection de fichiers mis à jour 117
structure et navigation 127
test 147
vérification des liens 150
son, contrôler 270
souligné 169
SourceFormat.profile 155
sous-menu Object du formulaire 243
sous-menu Style 169
spécification des feuilles de style en cascade 175
structure de répertoires, site 127
styles 174
Voir aussi feuilles de style
application de styles personnalisés 179
conversion en HTML 182
création 177
dans les modèles 99
définition des propriétés 175
incompatibles 180
modifier 180
Tableau de conversion de CSS en indicateur
HTML 183
Index
337
styles imbriqués 85
styles personnalisés. Voir feuilles de style
Supprimer balise(s) spécifique(s)
option 159
Supprimer les balises imbriquées redondantes
option 159
Supprimer les balises vides
option 159
Supprimer les commentaires HTML de Dreamweaver
option 159
Supprimer les commentaires HTML nonDreamweaver
option 159
survols
création 187
test 187
T
Table des matières, Aide 14
tableaux
ajout d'images 197
ajout de contenu 197
ajout et retrait de lignes et de colonnes 207
alignement 172
balises 200
calque secondaire 226
conversion des calques 182
création 195, 196
création de 195
effacement de la largeur et de la hauteur de cellule
207
formatage 200
formatages des éléments 202
imbrication 197
lignes et cellules 202
mise en forme prédéfinie 204
modification des largeurs de colonne 206
propriétés 201
redimensionnement 206
réglage de la taille des cellules 208
réglage de la taille des lignes et des colonnes 206
sélection d'éléments 198
tri 205
338
Index
tableaux. voir aussi colonnes et cellules, cellules de
tableau
raccourcis 318
Taille de la fenêtre
option 73
Taille de tabulation
option 157
Taille du retrait
option 157
téléchargement
taille, estimations de temps 152
téléchargement de fichiers 136
télécharger
comportements 262
Tenir compte de la casse
option 137
tête de lecture 286
texte
ajout au documents 82
alignement 172
couleur par défaut 87
éditer des raccourcis 316
formatage 167
formatage raccourcis 317
modification de la couleur 171
modification des combinaisons de polices 170
retrait 172
Texte (balises HTML couleur)
option 158
texte en retrait 172
Toujours imbriquer un calque créé dans un autre
calque 216
tracé de l'image 81
repositionnement 81
traitement des formulaires 244
transfert de fichiers
dépannage 136
U
URL
ouvrir une nouvelle fenêtre 276
URL relatives à la racine 106
URL. Voir chemins, relatifs et absolus
Utiliser le pare-feu
option 128
Utiliser les expressions régulières
option 137
V
Valeur par défaut
option 158
VBScript 164
visualiser dans les navigateurs
raccourcis 321
Vitesse de connexion
option 73
X
XML
balises 153
Index 339
340
Index